:root {
  /* Palette tirée des deux températures de la lumière de projection : le
     tungstène chaud d'une cabine et la lumière du jour. Le fond est un noir
     chaud, encre plutôt qu'ardoise ; l'accent tire vers l'indigo, et l'ambre
     signale ce qui demande un regard. Le gris-bleu froid d'avant faisait
     ressembler un outil de laboratoire cinéma à une console d'administration. */
  --bg: #14133a; --surface: rgba(30, 29, 74, .74); --raised: #262555;
  --line: rgba(255, 255, 255, .09);
  --text: #eeecfb; --muted: #a5a1c8; --accent: #7d7bf5; --warm: #e8a34a;
  --error: #ff8a8a; --ok: #4ad4a0;

  /* Matières. La barre latérale est structurelle, donc plus dense et plus
     sombre que le contenu ; les surfaces de contenu restent opaques pour ne
     jamais empiler deux translucidités l'une sur l'autre. */
  --chrome: rgba(21, 20, 56, .62);
  --chrome-edge: rgba(255, 255, 255, .06);
  --scrim: rgba(9, 10, 13, .55);

  /* Élévation : plus une surface est large, plus son ombre est profonde. */
  --lift-1: 0 1px 2px rgba(12,8,20,.34);
  --lift-2: 0 2px 6px rgba(8,6,30,.40), 0 10px 30px rgba(8,6,30,.30);
  --lift-3: 0 6px 18px rgba(8,6,30,.46), 0 28px 64px rgba(8,6,30,.38);

  /* Une seule durée de référence. Tout ce qui répond à un doigt ou à un
     curseur reste sous 120 ms — au-delà, le geste et l'effet se décollent. */
  --tempo: 140ms;
  --tempo-press: 90ms;
  --courbe: cubic-bezier(.22, .61, .36, 1);

  --rail: 236px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Corps en rem : la taille de texte du système doit pouvoir agrandir
     l'interface sans casser la mise en page. */
  font-size: 0.9375rem; line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

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

/* Un anneau de focus visible au clavier, invisible à la souris. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #fff;
}
.skip:focus { left: 8px; }

/* --- Colonne de navigation ----------------------------------------------
   Barre latérale plutôt que bandeau : à dix-sept destinations, un rang
   horizontal ne répond plus à « où suis-je et où puis-je aller ». Les entrées
   sont groupées par moment du métier, dans l'ordre où il se déroule. */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 20;
  display: flex; flex-direction: column;
  padding: 18px 12px 12px;
  background: var(--chrome);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-right: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-group {
  margin: 18px 10px 6px; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: #8f8ab8;
}
.nav-group:first-child { margin-top: 0; }
.nav a {
  padding: 7px 10px; border-radius: 7px; color: var(--muted);
  font-size: 0.875rem; line-height: 1.35;
  transition: background-color var(--tempo) var(--courbe), color var(--tempo) var(--courbe);
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,.045); text-decoration: none; }
.nav a:active { background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] {
  color: var(--text); background: rgba(125,123,245,.14);
  box-shadow: inset 0 0 0 1px rgba(125,123,245,.22);
}

.sidebar-foot {
  margin-top: 16px; padding: 12px 10px 4px; border-top: 1px solid var(--line);
  display: grid; gap: 3px;
}
.who { color: var(--text); font-size: 0.8125rem; overflow-wrap: anywhere; }
.role {
  justify-self: start; padding: 1px 8px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.quit { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
.quit:hover { color: var(--text); }

@media (max-width: 900px) {
  /* Sous cette largeur la colonne reprend sa place dans le flux : une barre
     fixe mangerait la moitié de l'écran. */
  .sidebar {
    position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px 10px; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 12px 16px;
  }
  .brand { margin: 0 12px 0 0; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .nav-group { display: none; }
  .sidebar-foot {
    margin: 0 0 0 auto; padding: 0; border-top: 0;
    grid-auto-flow: column; align-items: center; gap: 10px;
  }
}

.page { max-width: 1100px; margin: 0 auto; padding: 34px 32px 72px; }

/* La colonne est fixe : c'est au contenu de lui réserver sa place, par une
   marge intérieure et non par une marge extérieure — une marge extérieure
   serait écrasée par le centrage automatique. La largeur maximale absorbe le
   rail pour que la colonne de lecture garde sa mesure. */
@media (min-width: 901px) {
  .sidebar ~ .page {
    padding-left: calc(var(--rail) + 32px);
    max-width: calc(1100px + var(--rail) + 32px);
  }
}
@media (max-width: 900px) { .page { padding: 24px 20px 56px; } }

.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

/* --- Type ---------------------------------------------------------------
   L'interlettrage suit la taille : un titre grandit et ses lettres semblent
   s'écarter, il faut donc resserrer ; un petit texte a besoin de l'inverse.
   Une valeur unique pour toutes les tailles est fausse quelque part. */
h1 {
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 4px; font-weight: 600;
}
h2 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 24px; font-size: 0.875rem; }

.card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 28px;
}
.card.wide { max-width: 440px; }
.card label { display: block; margin: 16px 0 6px; font-size: 13px; color: var(--muted); }
.card input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 15px;
}
.card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.card button {
  width: 100%; margin-top: 22px; padding: 11px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
}
.card button:hover { filter: brightness(1.08); }
.card .secondary { display: block; text-align: center; margin-top: 14px; font-size: 13px; }

.qr { display: block; width: 200px; height: 200px; margin: 8px auto 16px; border-radius: 8px; background: #fff; padding: 6px; }
.secret { display: block; margin-top: 8px; padding: 8px; background: var(--bg);
          border-radius: 6px; font-size: 11px; word-break: break-all; color: var(--muted); }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }

.error, .field-error {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px; font-size: 13px;
  background: rgba(255,122,122,.1); color: var(--error); border: 1px solid rgba(255,122,122,.25);
}
.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px;
       background: var(--surface); border: 1px solid var(--line); }
.msg.success { border-color: rgba(74,212,160,.35); color: var(--ok); }
.msg.error { border-color: rgba(255,122,122,.35); color: var(--error); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; box-shadow: var(--lift-1);
}
.tile h2 { font-size: 13px; color: var(--muted); margin: 0 0 10px; font-weight: 500;
           text-transform: uppercase; letter-spacing: .4px; }
.metric {
  font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; font-variant-numeric: tabular-nums;
}

/* --- En-tête de page ----------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 6px; }
.page-head .sub { margin: 0; }
.crumb { margin: 0 0 8px; font-size: 13px; }
.crumb a { color: var(--muted); }
.actions { display: flex; gap: 10px; align-items: center; }
.actions form { margin: 0; }

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 9px 16px; border: 1px solid transparent;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  box-shadow: var(--lift-1);
  transition: transform var(--tempo-press) var(--courbe),
              filter var(--tempo) var(--courbe),
              box-shadow var(--tempo) var(--courbe);
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
/* L'enfoncement, pas le relâchement : attendre le clic donne une interface morte. */
.btn:active { transform: scale(.975); box-shadow: none; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }
.btn.danger { background: transparent; border-color: rgba(255,122,122,.4); color: var(--error); }
.btn.small { padding: 5px 11px; font-size: 0.8125rem; }

/* --- Filtres ------------------------------------------------------------- */
.filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px;
  box-shadow: var(--lift-1);
}
.filters .field { display: flex; flex-direction: column; gap: 5px; }
.filters .field.grow { flex: 1; min-width: 220px; }
.filters label { font-size: 12px; color: var(--muted); }
.filters input, .filters select {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 14px; min-width: 150px;
}
.filters .field.grow input { width: 100%; }

/* --- Tableaux ------------------------------------------------------------ */
table.data {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--lift-2);
  /* Les chiffres d'une colonne doivent s'aligner : sans chasse fixe, les
     volumes et les montants dansent d'une ligne à l'autre. */
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: top;
}
table.data thead th {
  background: rgba(255,255,255,.045); color: var(--muted); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .055em;
}
table.data thead th a { color: inherit; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr {
  transition: background-color var(--tempo) var(--courbe);
}
table.data tbody tr:hover { background: rgba(255,255,255,.05); }
table.data .num { text-align: right; }
table.data.compact th, table.data.compact td { padding: 8px 12px; font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.small { font-size: 12px; }

/* --- Badges et chips ----------------------------------------------------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--line); color: var(--muted);
}
.badge.active { border-color: rgba(74,212,160,.4); color: var(--ok); }
.badge.archived { border-color: rgba(152,160,176,.4); }
.badge.danger { border-color: rgba(255,122,122,.4); color: var(--error); }
.chip {
  display: inline-block; padding: 2px 8px; margin: 0 4px 4px 0;
  border-radius: 6px; background: #22273250; border: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.chip.warn { border-color: rgba(232,163,74,.4); color: var(--warm); }

/* --- Listes et fiches ---------------------------------------------------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.section-title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .055em;
  color: var(--muted); font-weight: 600; margin: 0 0 12px;
}
/* Un titre qui suit du contenu a besoin d'air : sans cela, il se lit comme la
   suite du paragraphe précédent au lieu d'ouvrir une section. La règle vaut
   aussi pour le conteneur en deux colonnes, dont les titres sont imbriqués et
   n'ont donc pas le paragraphe pour frère. */
p + .section-title, table + .section-title, form + .section-title,
dl + .section-title, ul + .section-title,
p + .cols, table + .cols, form + .cols, ul + .cols,
p + .grid, table + .grid { margin-top: 30px; }

.grid + * { margin-top: 30px; }
.list { list-style: none; padding: 0; margin: 0 0 28px; }
.list li {
  padding: 10px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
}
.list li:last-child { border-bottom: 0; }
.list.compact li { padding: 7px 0; font-size: 13px; }
.list .action { color: var(--accent); font-size: 13px; min-width: 110px; }
.list .obj { flex: 1; }
.meta { color: var(--muted); font-size: 0.75rem; letter-spacing: .005em; }
.empty { color: var(--muted); font-size: 14px; padding: 18px 0; }

dl.facts { display: grid; grid-template-columns: 160px 1fr; gap: 9px 16px; margin: 0 0 28px; }
dl.facts dt { color: var(--muted); font-size: 13px; }
dl.facts dd { margin: 0; font-size: 14px; }
.notes { font-size: 14px; line-height: 1.65; }

.pager {
  display: flex; gap: 18px; align-items: center; justify-content: center;
  margin-top: 20px; font-size: 14px; color: var(--muted);
}

/* --- Formulaires --------------------------------------------------------- */
.form { max-width: 720px; }
.form fieldset {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px 24px; margin: 0 0 20px; background: var(--surface);
  box-shadow: var(--lift-1);
}
.form legend {
  padding: 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
}
.form .field { margin-bottom: 16px; }
.form .field:last-child { margin-bottom: 0; }
.form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.form input[type=text], .form input[type=email], .form input[type=url],
.form input[type=number], .form input[type=date], .form select, .form textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}
.form ul { list-style: none; padding: 0; margin: 0;
           display: flex; flex-wrap: wrap; gap: 6px 16px; }
.form ul li label { display: inline-flex; align-items: center; gap: 6px;
                    margin: 0; color: var(--text); font-size: 14px; }
.hint { margin: 5px 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted); letter-spacing: .005em; }
.form-actions { display: flex; gap: 12px; align-items: center; }

/* --- Bandeaux d'information --------------------------------------------- */
.notice {
  padding: 14px 18px; border-radius: 10px; margin-bottom: 24px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); line-height: 1.6;
}
.notice.warn { border-color: rgba(232,163,74,.35); background: rgba(232,163,74,.06); }
.notice strong { color: var(--text); }
.key-list { list-style: none; padding: 10px 0 0; margin: 0; }
.key-list li { padding: 2px 0; color: var(--muted); }

/* --- Dépôt de fichiers --------------------------------------------------- */
.uploader-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.global-progress { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.global-bar-track {
  flex: 1; height: 8px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden;
}
.global-bar { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

.upload-list { list-style: none; padding: 0; margin: 0 0 24px; }
.upload-row {
  display: grid; grid-template-columns: 1fr 90px 140px 90px;
  gap: 14px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.upload-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.upload-size, .upload-state { color: var(--muted); text-align: right; }
.upload-bar {
  height: 6px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; display: block;
}
.upload-bar > span { display: block; height: 100%; width: 0; background: var(--accent); }
.upload-row.done .upload-bar > span { background: var(--ok); }
.upload-row.done .upload-state { color: var(--ok); }
.upload-row.error .upload-bar > span { background: var(--error); }
.upload-row.error .upload-state { color: var(--error); }

.mini-bar {
  display: inline-block; width: 90px; height: 6px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
  vertical-align: middle; margin-right: 8px;
}
.mini-bar > span { display: block; height: 100%; background: var(--accent); }

/* --- Statuts ------------------------------------------------------------- */
.badge.valid, .badge.passed, .badge.complete, .badge.qc_done,
.badge.received { border-color: rgba(74,212,160,.4); color: var(--ok); }
.badge.invalid, .badge.failed, .badge.error, .badge.aborted,
.badge.abandoned { border-color: rgba(255,122,122,.4); color: var(--error); }
.badge.warning, .badge.warnings, .badge.warn,
.badge.purged { border-color: rgba(232,163,74,.4); color: var(--warm); }
.badge.uploading, .badge.qc_running, .badge.running, .badge.qc_queued,
.badge.pending_qc { border-color: rgba(125,123,245,.4); color: var(--accent); }
.badge.info { border-color: var(--line); color: var(--muted); }

tr.finding.error td { background: rgba(255,122,122,.04); }
tr.finding.warning td { background: rgba(232,163,74,.03); }

.small-metric { font-size: 15px; padding-top: 6px; }
.metric-sub { font-size: 16px; color: var(--muted); }

/* --- Fiches CPL ---------------------------------------------------------- */
.cpl-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.cpl-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 500; }
dl.facts.tight { grid-template-columns: 130px 1fr; gap: 5px 14px; margin: 0; }
dl.facts.tight dt, dl.facts.tight dd { font-size: 13px; }

.inline-form {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.inline-form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.inline-form select {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 14px; min-width: 260px;
}

details summary { cursor: pointer; }
code.small { display: block; margin-top: 6px; padding: 7px 9px; background: var(--bg);
             border-radius: 6px; color: var(--muted); word-break: break-all; }

/* --- Vignettes ----------------------------------------------------------- */
.previews { margin-bottom: 32px; }
.preview-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.preview-strip figure { margin: 0; }
.preview-strip img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
}
.preview-strip figure.poster img { border-color: var(--accent); }
.preview-strip figcaption {
  margin-top: 6px; font-size: 11px; color: var(--muted); text-align: center;
}
.poster-large {
  width: 100%; max-width: 460px; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 20px; display: block;
}

/* --- Parc et échéances --------------------------------------------------- */
.tile.alerte { border-color: rgba(255,122,122,.4); }
.tile.alerte .metric { color: var(--error); }
.badge.expire, .badge.expired, .badge.revoked { border-color: rgba(255,122,122,.4); color: var(--error); }
.badge.pending { border-color: rgba(125,123,245,.4); color: var(--accent); }
.badge.inactive, .badge.replaced { border-color: var(--line); color: var(--muted); }
label.inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
               font-size: 14px; color: var(--text); }

/* Motifs de refus d'une émission : lisibles en pile, jamais tronqués — c'est
   ce que l'opérateur doit corriger avant de réessayer. */
ul.reasons { margin: 4px 0 0; padding-left: 18px; }
ul.reasons li { font-size: 12px; color: var(--muted); line-height: 1.5; }
p.group { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Sélection de destinataires : une ligne par case. Alignées côte à côte, les
   salles d'un même site deviennent illisibles dès qu'elles portent un badge. */
.choicelist label.inline { display: flex; width: 100%; margin-top: 6px; }

/* Certificat public affiché tel quel : à copier, donc jamais reformaté ni tronqué. */
pre.pem {
  white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--muted); line-height: 1.45;
}

/* --- Page publique de visionnage -----------------------------------------
   Volontairement dépouillée : aucun élément de l'outil interne n'a sa place
   devant un journaliste ou un sélectionneur de festival. */
body.watch { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.watch-shell { width: min(1100px, 94vw); padding: 32px 0; }
.watch-head { margin-bottom: 18px; }
.watch-head h1 { font-size: 22px; margin: 0 0 4px; }
.watch-card {
  max-width: 520px; margin: 0 auto; padding: 32px 34px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.watch-card h1 { font-size: 20px; margin: 0 0 12px; }
.watch-error { color: #ff6b6b; font-size: 13px; margin: 6px 0 0; }

.watch-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.watch-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Le calque ne doit jamais intercepter un clic destiné aux commandes. */
.watch-mark {
  position: absolute; pointer-events: none; user-select: none;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.62);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  transition: top 1.2s ease, left 1.2s ease;
}
.watch-mark span { display: block; }
.watch-mark-sub { font-size: 11px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   Accessibilité des réglages système
   Réduire le mouvement ne veut pas dire supprimer le retour : il reste, plus
   doux. Réduire la transparence ne veut pas dire aplatir : la matière devient
   opaque et garde sa fonction de séparation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* On garde l'enfoncement, qui informe, en retirant le déplacement. */
  .btn:active { transform: none; filter: brightness(.92); }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar {
    background: #13161c;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --muted: #c3c9d6; --line: #47506a; }
  .nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--accent); }
  table.data th, table.data td { border-bottom-color: var(--line); }
  .badge { border-width: 1px; color: var(--text); }
}

/* Le filigrane d'un screener défile en continu : c'est exactement le genre de
   mouvement lent et perpétuel qui gêne. Il se fige, sans disparaître. */
@media (prefers-reduced-motion: reduce) {
  .watch-mark { transition: none; }
}

/* --- Marque -------------------------------------------------------------
   Le logo est un dessin noir sur fond transparent. Sur une interface sombre,
   une simple inversion suffit : le noir devient blanc et les pixels
   transparents le restent. Aucun mode de fusion n'est nécessaire — j'en avais
   prévu un avant de vérifier le fichier, il aurait été nuisible ici.

   Le trait est fin et manuscrit : sous 130 px de large il se referme et les
   pattes disparaissent. C'est le plancher, pas une préférence. */
.brand {
  display: block; margin: 4px 12px 22px; color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand:hover .brand-logo { opacity: 1; }

.brand-logo {
  display: block; width: 100%; min-width: 130px; max-width: 174px; height: auto;
  filter: invert(1);
  opacity: .92;
  transition: opacity var(--tempo) var(--courbe);
}

/* Le nom du produit sous la marque de maison : ce sont deux choses
   différentes, et les confondre reviendrait à faire croire que l'outil est
   l'entreprise. */
.brand-product {
  display: block; margin-top: 7px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: .02em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .brand { margin: 0 14px 0 0; flex: none; }
  .brand-logo { width: 132px; min-width: 0; }
  .brand-product { display: none; }
}

/* Sur la page de connexion, la marque est ce qu'on voit en premier. */
.card .brand-logo { max-width: 100%; margin: 0 auto 18px; }

/* --- Points de vigilance -------------------------------------------------
   Une phrase par ligne, un point de couleur pour la gravité, une flèche pour
   dire que ça mène quelque part. Pas de compteur isolé : « 3 » n'apprend rien
   tant qu'on ne sait pas 3 quoi, ni si c'est grave. */
.attention { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 8px; }

.attention-item a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font-size: 0.9375rem; line-height: 1.45;
  box-shadow: var(--lift-1);
  transition: transform var(--tempo-press) var(--courbe),
              border-color var(--tempo) var(--courbe),
              box-shadow var(--tempo) var(--courbe);
}
.attention-item a:hover { text-decoration: none; border-color: rgba(255,255,255,.24); box-shadow: var(--lift-2); }
.attention-item a:active { transform: scale(.995); box-shadow: var(--lift-1); }

.attention-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(152,160,176,.14);
}
.attention-item.urgent .attention-dot {
  background: var(--error); box-shadow: 0 0 0 3px rgba(255,122,122,.16);
}
.attention-item.attention .attention-dot {
  background: var(--warm); box-shadow: 0 0 0 3px rgba(232,163,74,.16);
}
.attention-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(74,212,160,.16); }

.attention-item.urgent a { border-color: rgba(255,122,122,.28); }
.attention-item.attention a { border-color: rgba(232,163,74,.24); }

.attention-go { color: var(--muted); font-size: 1rem; transition: transform var(--tempo) var(--courbe); }
.attention-item a:hover .attention-go { transform: translateX(3px); }

/* Tout va bien : on le dit une fois, en clair, sans en faire un tableau. */
.all-clear {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 34px; padding: 15px 18px; border-radius: 11px;
  background: rgba(74,212,160,.05); border: 1px solid rgba(74,212,160,.2);
  color: var(--muted); font-size: 0.9375rem;
}

/* Ce qui avance seul : plus discret, car rien n'est attendu du lecteur. */
.running {
  list-style: none; padding: 0; margin: 0 0 34px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.running li a {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  color: var(--muted); font-size: 0.8125rem;
  transition: color var(--tempo) var(--courbe), border-color var(--tempo) var(--courbe);
}
.running li a:hover { color: var(--text); border-color: rgba(255,255,255,.24); text-decoration: none; }

/* Un vide qui explique vaut mieux qu'un vide qui constate. */
.empty { color: var(--muted); font-size: 0.875rem; padding: 16px 0; line-height: 1.6; }

/* --- Recherche transversale ---------------------------------------------
   Placée au-dessus de la navigation : quand on ne sait pas dans quelle section
   chercher, c'est précisément qu'il ne faut pas commencer par en choisir une. */
.search { position: relative; margin: 0 8px 16px; }
.search input {
  width: 100%; padding: 8px 30px 8px 11px;
  border-radius: 8px; border: 1px solid var(--line);
  background: rgba(0,0,0,.22); color: var(--text);
  font-family: inherit; font-size: 0.8125rem;
  transition: border-color var(--tempo) var(--courbe), background-color var(--tempo) var(--courbe);
}
.search input::placeholder { color: #8f8ab8; }
.search input:focus { background: rgba(0,0,0,.34); border-color: rgba(255,255,255,.24); }
.search input:focus + kbd { opacity: 0; }
.search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 1px 5px; border-radius: 4px; pointer-events: none;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  font: inherit; font-size: 0.6875rem; color: #8f8ab8;
  transition: opacity var(--tempo) var(--courbe);
}
@media (max-width: 900px) {
  .search { order: 3; flex: 1 1 100%; margin: 8px 0 0; }
  .search kbd { display: none; }
}

.results { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.results li a {
  display: grid; gap: 2px; padding: 11px 15px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); box-shadow: var(--lift-1);
  transition: transform var(--tempo-press) var(--courbe),
              border-color var(--tempo) var(--courbe);
}
.results li a:hover { text-decoration: none; border-color: rgba(255,255,255,.24); }
.results li a:active { transform: scale(.995); }
.results-title { font-size: 0.9375rem; }
.results-detail { font-size: 0.75rem; color: var(--muted); }

/* --- Icônes de navigation ------------------------------------------------ */
.ic { width: 17px; height: 17px; flex: none; opacity: .72; }
.nav a { display: flex; align-items: center; gap: 10px; }
.nav a:hover .ic, .nav a[aria-current="page"] .ic { opacity: 1; }

/* --- Réglages ------------------------------------------------------------ */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.settings-card {
  display: grid; gap: 3px; padding: 16px 18px; position: relative;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); box-shadow: var(--lift-1);
  transition: transform var(--tempo-press) var(--courbe),
              border-color var(--tempo) var(--courbe),
              box-shadow var(--tempo) var(--courbe);
}
.settings-card:hover { text-decoration: none; border-color: rgba(255,255,255,.24); box-shadow: var(--lift-2); }
.settings-card:active { transform: scale(.995); box-shadow: var(--lift-1); }
.settings-title { font-size: 0.9375rem; font-weight: 500; }
.settings-desc { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; padding-right: 28px; }
.settings-count {
  position: absolute; top: 15px; right: 16px;
  font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* --- Que voulez-vous faire ? ---------------------------------------------
   Des verbes, en tête d'accueil. « Titres » ou « KDM » sont des objets : ils
   supposent qu'on sache déjà lequel manipuler. On arrive avec une intention. */
.tasks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 30px;
}
.task {
  --teinte: 125, 123, 245;
  display: grid; gap: 4px; padding: 18px 20px;
  border-radius: 13px; color: var(--text);
  background: linear-gradient(160deg, rgba(var(--teinte), .12), rgba(var(--teinte), .03));
  border: 1px solid rgba(var(--teinte), .24); box-shadow: var(--lift-1);
  transition: transform var(--tempo-press) var(--courbe),
              border-color var(--tempo) var(--courbe), box-shadow var(--tempo) var(--courbe);
}
.task:hover { text-decoration: none; border-color: rgba(var(--teinte), .5); box-shadow: var(--lift-2); }
.task:active { transform: scale(.99); box-shadow: var(--lift-1); }
.task-ic { width: 20px; height: 20px; color: rgb(var(--teinte)); margin-bottom: 4px; }

/* Diffusion en indigo, clés en ambre — la couleur de la lumière de projection —
   et réception en vert d'eau. Trois domaines, trois températures. */
.task.t-diffusion { --teinte: 125, 123, 245; }
.task.t-cles { --teinte: 232, 163, 74; }
.task.t-reception { --teinte: 74, 212, 160; }
.task-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }
.task-detail { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }

/* --- Parcours guidé ------------------------------------------------------ */
.steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 0; margin: 0 0 18px;
}
.steps li { display: flex; align-items: center; gap: 8px; color: #8f8ab8; font-size: 0.8125rem; }
.steps-num {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); font-size: 0.6875rem;
}
.steps li.done { color: var(--muted); }
.steps li.done .steps-num { border-color: rgba(74,212,160,.45); color: var(--ok); }
.steps li.now { color: var(--text); }
.steps li.now .steps-num {
  border-color: var(--accent); color: var(--accent); background: rgba(125,123,245,.12);
}

/* Dire à chaque étape ce qu'elle engage : c'est de ne pas savoir si une action
   se rattrape qu'on reste figé. Une seule étape parle fort — si tout est
   signalé comme grave, plus rien ne l'est. */
.engagement {
  margin: 0 0 26px; padding: 11px 15px; border-radius: 9px;
  font-size: 0.8125rem; line-height: 1.55;
}
.engagement.libre { background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--muted); }
.engagement.definitif {
  background: rgba(232,163,74,.07); border: 1px solid rgba(232,163,74,.32); color: var(--text);
}

.guide { max-width: 640px; }
.guide fieldset { margin-bottom: 22px; }
.legend-opt { text-transform: none; letter-spacing: 0; color: #8f8ab8; }

label.inline.pick {
  align-items: flex-start; gap: 11px; padding: 12px 14px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 10px; width: 100%;
  transition: border-color var(--tempo) var(--courbe), background-color var(--tempo) var(--courbe);
}
label.inline.pick:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.02); }
label.inline.pick:has(input:checked) {
  border-color: rgba(125,123,245,.5); background: rgba(125,123,245,.07);
}
label.inline.pick input { margin-top: 3px; flex: none; }
.pick-detail { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }

.recap { padding: 20px 22px; border-radius: 12px; background: var(--surface);
         border: 1px solid var(--line); box-shadow: var(--lift-1); margin-bottom: 22px; }
.recap dl.facts { margin: 0; }

/* --- Prérequis ----------------------------------------------------------- */
.checks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.checks li {
  display: flex; gap: 13px; padding: 15px 18px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-1);
}
.checks li.ok { border-color: rgba(74,212,160,.3); }
.checks-mark { font-size: 0.9375rem; line-height: 1.5; flex: none; }
.checks li.ok .checks-mark { color: var(--ok); }
.checks li.todo .checks-mark { color: var(--warm); }
.checks-body { display: grid; gap: 6px; justify-items: start; }
.checks-label { font-size: 0.9375rem; }
.checks-manque { font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   Adoucissements
   Un outil qu'on regarde six heures par jour n'a pas besoin d'être austère
   pour être sérieux. Rien ici n'ajoute d'information : ce sont des angles plus
   ronds, des surfaces qui accrochent un peu de lumière, et un accent qui a une
   température plutôt qu'une valeur.
   ========================================================================== */

/* Un halo très large, immobile, qui évite au fond d'être parfaitement plat.
   Fixe et sans animation : une lueur qui bouge derrière du texte fatigue. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(62rem 42rem at 2% 22%, rgba(88, 132, 255, .46), transparent 66%),
    radial-gradient(54rem 38rem at 26% -4%, rgba(150, 96, 246, .40), transparent 64%),
    radial-gradient(42rem 30rem at 0% 54%, rgba(226, 104, 190, .26), transparent 62%),
    radial-gradient(46rem 32rem at 70% -8%, rgba(96, 140, 255, .16), transparent 66%),
    radial-gradient(58rem 38rem at 92% 96%, rgba(232, 163, 74, .12), transparent 68%);
}

/* Trame de points. Fixe — une houle animée est charmante dix secondes et
   épuisante à onze heures du matin, et le mouvement en vision périphérique est
   précisément ce que l'œil ne sait pas ignorer.

   Elle n'est pas posée uniformément : un masque la révèle là où la lueur passe
   et l'efface ailleurs. La trame ne se lit donc jamais comme du papier
   millimétré — elle donne l'impression que la lumière accroche une grille, ce
   qui est l'effet recherché et non un quadrillage de fond.

   En dégradés CSS : aucun fichier à charger, et net à toutes les densités
   d'écran. */
html::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(214, 220, 255, .30) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image:
    radial-gradient(58rem 40rem at 4% 20%, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%),
    radial-gradient(46rem 30rem at 90% 94%, rgba(0,0,0,.42) 0%, transparent 68%);
  mask-image:
    radial-gradient(58rem 40rem at 4% 20%, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%),
    radial-gradient(46rem 30rem at 90% 94%, rgba(0,0,0,.42) 0%, transparent 68%);
}

/* Grain. Un dégradé large sans grain se voit : il se casse en bandes sur un
   écran 8 bits, et il a l'air imprimé. Une trame très fine par-dessus suffit à
   le rendre continu — c'est ce qui sépare une lueur d'un aplat dégradé. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Le bouton principal porte la lumière plutôt qu'un aplat. */
.btn { background-image: linear-gradient(175deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.btn.ghost, .btn.danger { background-image: none; }

/* Les surfaces attrapent un filet de clarté sur leur arête haute, comme un
   objet éclairé par le dessus. */
.tile, table.data, .form fieldset, .filters, .recap, .checks li,
.settings-card, .attention-item a, .results li a, .card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Angles : un cran plus généreux, sans arrondir au point de faire jouet. */
.tile, table.data, .form fieldset, .filters, .recap, .card { border-radius: 14px; }
.checks li, .settings-card, .attention-item a, .results li a, .task { border-radius: 13px; }
.btn { border-radius: 9px; }

/* Le survol d'une ligne de tableau se teinte au lieu de virer au gris. */
table.data tbody tr:hover { background: rgba(125,123,245,.055); }

/* Les pastilles d'état gagnent un fond très léger : un simple liseré se perd
   sur un fond chaud. */
.badge.active, .badge.valid { background: rgba(74,212,160,.09); }
.badge.danger, .badge.invalid { background: rgba(255,122,122,.09); }
.badge.warn { background: rgba(232,163,74,.09); }

/* Le nom de la marque, dans la colonne, respire un peu plus. */
.brand-product { letter-spacing: .06em; text-transform: uppercase; font-size: 0.6875rem; }

@media (prefers-reduced-transparency: reduce) { body::before, html::before { display: none; } }
@media (prefers-contrast: more) {
  body::before { display: none; }
  .tile, table.data, .form fieldset, .filters, .recap, .checks li,
  .settings-card, .attention-item a, .results li a, .card { background-image: none; }
}

/* Le grain et la lueur sont un décor : ils disparaissent dès que le système
   demande moins de transparence ou plus de contraste, et les surfaces
   redeviennent opaques pour que rien ne dépende d'eux. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::after, html::before { display: none; }
  :root { --surface: #1e1d4a; }
  .tile, table.data, .form fieldset, .filters, .recap, .checks li,
  .settings-card, .attention-item a, .results li a, .card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* --- Marche à suivre ----------------------------------------------------- */
.howto { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; counter-reset: pas; }
.howto li {
  display: flex; gap: 14px; padding: 15px 18px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.howto-num {
  display: grid; place-items: center; width: 25px; height: 25px; flex: none;
  border-radius: 50%; font-size: 0.75rem; font-variant-numeric: tabular-nums;
  color: var(--accent); background: rgba(125,123,245,.14);
  box-shadow: inset 0 0 0 1px rgba(125,123,245,.3);
}
.howto li > span:last-child { display: grid; gap: 4px; }
.howto-detail { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }

/* --- Page publique de visionnage, suite ----------------------------------
   C'est la seule page que voit un journaliste ou un sélectionneur. Elle porte
   donc la marque : sans elle, le destinataire ne sait pas de qui vient le lien. */
.watch-brand { display: block; width: 156px; margin: 0 0 26px; opacity: .85; }
.watch-brand img { width: 100%; height: auto; filter: invert(1); display: block; }

.watch-head h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
.watch-version { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }

.watch-player { box-shadow: var(--lift-3); }
.watch-player-vide {
  display: grid; place-items: center; text-align: center; padding: 32px;
  background: var(--surface); border: 1px solid var(--line);
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%);
}
.watch-vide-titre { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
.watch-vide-detail { margin: 0; font-size: 0.875rem; color: var(--muted); line-height: 1.6; max-width: 34ch; }

.watch-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 18px; font-size: 0.8125rem; color: var(--muted);
}
.watch-foot-note { color: #8f8ab8; }