/* Brand DNA · système de design. Un seul fichier, une grille de 8 px, une couleur d'accent. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 64px;
  --radius: 8px; --radius-lg: 12px;
  --text-xs: 12px;   /* label */
  --text-sm: 13px;   /* texte secondaire */
  --text-base: 15px; /* texte */
  --text-md: 17px;   /* titre 3 */
  --text-lg: 20px;   /* titre 2 */
  --text-xl: 28px;   /* titre 1 */
  /* Fond légèrement teinté vert, texte presque noir, un accent : le vert Marlia. */
  --bg: #f3f6f2; --surface: #ffffff; --surface-2: #eef2ec;
  --line: #dfe5dc; --line-strong: #c3ccc0;
  --ink: #1d1f1d; --ink-2: #474b47; --ink-3: #666b66;
  --accent: #075230; --accent-ink: #ffffff; --accent-hover: #04391f; --accent-soft: #e1efe6;
  /* Une couleur par état : à monter = orange, en relecture = bleu, en ligne = vert, à refaire = rouge. */
  --todo-bg: #fde7c8; --todo-ink: #7a3b00; --todo: #d97706;
  --review-bg: #dbe9fb; --review-ink: #1e3a8a; --review: #2563eb;
  --ok-bg: #d6f0de; --ok-ink: #075230; --ok: #075230;
  --bad-bg: #fde2e2; --bad-ink: #9b1c1c; --bad: #b91c1c;
  --warn-bg: var(--todo-bg); --warn-ink: var(--todo-ink);
  --info-bg: var(--review-bg); --info-ink: var(--review-ink);
  --neutral-bg: #e9ece8; --neutral-ink: #3f433f;
  --menu-w: 232px; --content-w: 960px;
  --control-h: 40px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--text-base); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding-left: 20px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.93em; }
video, img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Coquille : menu à gauche, contenu à droite */
.shell { min-height: 100vh; display: flex; }
.menu { width: var(--menu-w); flex: 0 0 var(--menu-w); background: var(--surface); border-right: 1px solid var(--line); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.menu .brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3) var(--space-5); }
.menu .brand b { display: block; font-size: var(--text-base); font-weight: 600; line-height: 1.2; }
.menu .brand span { display: block; font-size: var(--text-sm); color: var(--ink-3); margin-top: 2px; }
.menu .item { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius); font-size: var(--text-base); color: var(--ink); font-weight: 500; }
.menu .item:hover { background: var(--surface-2); text-decoration: none; }
.menu .item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.menu .item .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.menu .item .count.zero { display: none; }
.menu .group { margin-top: var(--space-5); padding: 0 var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.menu .group-field { padding: 0 var(--space-3) var(--space-2); }
.menu .group-field select { height: 32px; }
.menu .foot { margin-top: auto; padding: var(--space-4) var(--space-3) 0; font-size: var(--text-sm); color: var(--ink-3); line-height: 1.5; display: flex; flex-direction: column; gap: var(--space-1); }
.menu .foot a { color: var(--ink-2); }
main { flex: 1 1 auto; min-width: 0; padding: var(--space-7) var(--space-6) var(--space-8); }
.content { max-width: var(--content-w); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.content.narrow { max-width: 640px; margin-left: 0; }

/* ---- Titres et textes */
h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.head { display: flex; flex-direction: column; gap: var(--space-2); }
.head .over { font-size: var(--text-sm); color: var(--ink-3); }
.lead { color: var(--ink-2); max-width: 64ch; }
.sm { font-size: var(--text-sm); color: var(--ink-3); }
.label, label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.hint { font-size: var(--text-sm); color: var(--ink-3); }
.pt { font-size: var(--text-md); line-height: 1.4; }
.big { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.forbidden { color: var(--bad); font-weight: 600; }
.crumb { font-size: var(--text-sm); color: var(--ink-3); }
.crumb a { color: var(--ink-2); }

/* ---- Blocs */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.card.tight { padding: 0; gap: 0; overflow: hidden; }
.card.tight.table-wrap { overflow-x: auto; }
.card.bad { border-color: #f0b9b9; border-left: 4px solid var(--bad); }
.section { display: flex; flex-direction: column; gap: var(--space-3); }
.section > h2, .section > h3 { padding: 0 2px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.list { display: flex; flex-direction: column; }
.list > * { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); }
.list > *:first-child { border-top: 0; }
.list .grow { flex: 1 1 200px; min-width: 0; }
.list a.rowlink { color: var(--ink); }
.list a.rowlink:hover { background: var(--surface-2); text-decoration: none; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; }
.kv dt { font-size: var(--text-sm); color: var(--ink-3); }
.kv dd { margin: 0; }
.empty { padding: var(--space-5); text-align: center; color: var(--ink-3); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-ink); font-weight: 500; border-left: 4px solid var(--ok); }
.flash.err { background: var(--bad-bg); color: var(--bad-ink); border-left-color: var(--bad); }
.help { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--info-bg); color: var(--info-ink); font-size: var(--text-sm); }
.steps { counter-reset: s; display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; }
.steps li { counter-increment: s; display: flex; gap: var(--space-3); }
.steps li::before { content: counter(s); flex: 0 0 24px; height: 24px; border-radius: 12px; background: var(--neutral-bg); color: var(--neutral-ink); font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.thumb { width: 72px; height: 128px; flex: 0 0 72px; border-radius: var(--radius); background: var(--neutral-bg); overflow: hidden; }
.thumb video, .thumb img { width: 100%; height: 100%; object-fit: cover; }
.player { width: 100%; max-width: 320px; aspect-ratio: 9 / 16; border-radius: var(--radius); background: #111; }
.player.wide { max-width: 100%; aspect-ratio: auto; }
details { border-top: 1px solid var(--line); }
details:first-of-type { border-top: 0; }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: var(--text-lg); }
details[open] > summary::after { content: "–"; }
details > .body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius); border: 1px solid transparent; font-size: var(--text-base); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.danger { background: var(--surface); color: var(--bad-ink); border-color: #e7b4b4; }
.btn.danger:hover { background: var(--bad-bg); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---- Champs */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field label { margin-bottom: 2px; }
.field .hint { order: 3; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea { width: 100%; height: var(--control-h); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 var(--space-3); background: var(--surface); font-size: var(--text-base); color: var(--ink); }
textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input::placeholder, textarea::placeholder { color: #8e8e93; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); }
.fields { display: grid; gap: var(--space-4); }
.fields.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inline-form { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 120px; }
form.card > .actions, .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---- Zone de dépôt */
.drop { position: relative; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--text-base); color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; background: var(--surface-2); cursor: pointer; }
.drop.on { border-color: var(--accent); background: var(--accent-soft); }
.drop strong { font-size: var(--text-md); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .picked { font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }

/* ---- Tags de statut : une couleur par statut, toujours un mot */
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: 6px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-ink); }
.tag.ok { background: var(--ok-bg); color: var(--ok-ink); }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tag.bad { background: var(--bad-bg); color: var(--bad-ink); }
.tag.info { background: var(--info-bg); color: var(--info-ink); }
.tag.todo { background: var(--todo-bg); color: var(--todo-ink); }
.tag.review { background: var(--review-bg); color: var(--review-ink); }
/* Un bloc coloré par état ou par section : bord gauche de la couleur, ou fond plein. */
.card.todo { border-left: 4px solid var(--todo); }
.card.review { border-left: 4px solid var(--review); }
.card.ok { border-left: 4px solid var(--ok); }
.card.refused { border-left: 4px solid var(--bad); }
.card.solid-ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.card.solid-bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.card.solid-ok .sm, .card.solid-bad .sm, .card.solid-ok .kv dt, .card.solid-bad .kv dt { color: rgba(255, 255, 255, .85); }
.card.solid-bad .forbidden { color: #fff; }
.card.solid-ok a, .card.solid-bad a { color: #fff; text-decoration: underline; }
.card.pale { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }

/* ---- Onglets */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 500; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.chip:hover { text-decoration: none; background: var(--surface-2); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Tableaux */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.t th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); height: 48px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { height: 48px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t th.num, table.t td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Prose (fiches du DNA) */
.prose { line-height: 1.6; }
.prose > * + * { margin-top: var(--space-2); }
.prose h2 { font-size: var(--text-md); margin-top: var(--space-5); }
.prose h3 { font-size: var(--text-base); margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li + li { margin-top: var(--space-1); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.prose td, .prose th { border-bottom: 1px solid var(--line); padding: var(--space-2); text-align: left; vertical-align: top; }
.prose code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.prose p.script { white-space: pre-line; }

/* ---- Connexion */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-4); }
.login { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.login .brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding-bottom: var(--space-2); }

/* ---- Aujourd'hui : bienvenue en 3 étapes */
.progress { height: 8px; border-radius: 4px; background: var(--neutral-bg); overflow: hidden; max-width: 420px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.step-n { display: inline-flex; width: 28px; height: 28px; border-radius: 14px; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); background: rgba(0, 0, 0, .08); }
.card.solid-ok .step-n { background: rgba(255, 255, 255, .22); }
.card.solid-ok h3, .card.solid-ok h2 { color: #fff; }
.card.solid-ok .lead { color: rgba(255, 255, 255, .9); }
.card.solid-ok .over { color: rgba(255, 255, 255, .8); }
.card.solid-ok .tag.todo { background: #fff; color: var(--todo-ink); }
.btn.big-btn { height: 48px; padding: 0 var(--space-5); font-size: var(--text-md); background: #fff; color: var(--accent); border-color: #fff; }
.btn.big-btn:hover { background: var(--accent-soft); }
.card.solid-ok a.btn, .next.solid-ok a.btn { color: var(--accent); text-decoration: none; }
.steps-cards .card { min-height: 100%; }
.next.solid-ok .btn.primary { background: #fff; color: var(--accent); }
/* ---- Aujourd'hui */
.next { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.next .over { font-size: var(--text-sm); color: var(--ink-3); }
.next h2 { font-size: var(--text-lg); }
.next .btn { margin-top: var(--space-2); }

/* ---- Vignettes en grand (liste des vidéos qui marchent) */
.thumb.lg { width: 132px; height: 235px; flex: 0 0 132px; }
@media (max-width: 900px) { .thumb.lg { width: 96px; height: 171px; flex: 0 0 96px; } }
.drop-preview { display: flex; gap: var(--space-4); align-items: center; }
.drop-preview .thumb { flex: 0 0 72px; }
/* ---- Brief : intro sur 3 lignes, bandeau Format / Offre / Interdit */
.lead.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.compact { padding: var(--space-4); gap: var(--space-2); }
.card.compact h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.kv.tight { gap: 2px var(--space-3); grid-template-columns: 1fr auto; }
.card.solid-ok .kv dd, .card.solid-bad .kv dd { color: #fff; }
/* ---- Brief : une carte par vidéo */
.video-card { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-5); align-items: start; }
.video-card > * { align-self: start; }
.kv { align-content: start; }
.video-card .side { display: flex; flex-direction: column; gap: var(--space-2); }
.video-card .side .player { max-width: 200px; }

/* ---- Menu mobile */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .menu { width: 100%; flex: 0 0 auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .menu .brand { padding: 0; flex: 1 1 auto; }
  .menu-toggle { display: inline-flex; width: var(--control-h); height: var(--control-h); align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
  .menu .nav { display: none; width: 100%; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); }
  .menu.open .nav { display: flex; }
  .menu .foot { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  main { padding: var(--space-5) var(--space-4) var(--space-8); }
  .grid-2, .grid-3, .fields.cols-2, .fields.cols-3 { grid-template-columns: 1fr; }
  .video-card { grid-template-columns: 1fr; }
  .video-card .side .player { max-width: 160px; }
  .kv { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .kv dt { margin-top: var(--space-2); }
  .content.narrow { max-width: none; }
}
@media (min-width: 901px) { .menu .nav { display: flex; flex-direction: column; gap: var(--space-1); } }