:root { --bg: #faf7f3; --card: #fff; --ink: #2b2522; --muted: #7a706a; --line: #e7dfd7; --accent: #9b3d5a; --green: #2f7d4f; --amber: #b07316; --red: #b3392f; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.6rem; margin: .4em 0 .8em; } h2 { font-size: 1.15rem; margin: 0 0 .6em; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .92rem; } .small { font-size: .85rem; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.1rem; } .brand span { color: var(--muted); font-weight: 400; }
nav { display: flex; flex-wrap: wrap; gap: 4px; } nav a { text-decoration: none; color: var(--ink); padding: 6px 10px; border-radius: 8px; font-size: .95rem; }
nav a.on { background: var(--accent); color: #fff; } nav a.out { color: var(--muted); }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; } .flash.ok { background: #e6f3ea; color: var(--green); } .flash.erreur { background: #f8e5e3; color: var(--red); }
.card, .tile, .video { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tile { text-decoration: none; color: var(--ink); transition: transform .1s, box-shadow .1s; margin: 0; } .tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.tile p { margin: .3em 0; color: var(--muted); font-size: .92rem; } .tile .num { color: var(--ink); }
.state { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #eee8e2; font-size: .82rem; white-space: nowrap; }
.badge.green { background: #e2f1e7; color: var(--green); } .badge.amber { background: #fbf0dc; color: var(--amber); } .badge.red { background: #f8e1de; color: var(--red); }
label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
textarea { resize: vertical; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.danger { color: var(--red); border-color: #e9c4bf; }
button:disabled { opacity: .5; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .actions.big { margin-top: 14px; } .actions form { margin: 0; }
.login { max-width: 360px; margin: 12vh auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.login h1 { margin: 0; } .login button { width: 100%; margin-top: 8px; }
.narrow { max-width: 460px; margin-bottom: 10px; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; background: #fff; margin-bottom: 22px; }
.drop.over { border-color: var(--accent); background: #fbf2f5; } .link { display: inline; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 1rem; }
.progress { height: 24px; background: #eee8e2; border-radius: 6px; position: relative; overflow: hidden; margin-top: 10px; }
.progress div { height: 100%; width: 0; background: var(--accent); transition: width .2s; } .progress span { position: absolute; inset: 0; line-height: 24px; font-size: .85rem; }
.video { display: grid; grid-template-columns: 170px 1fr; gap: 18px; } .video.pending { border-left: 4px solid var(--amber); } .video.validated { border-left: 4px solid var(--green); }
.thumb video { width: 100%; max-height: 300px; border-radius: 8px; background: #000; }
.meta { font-size: .88rem; color: var(--muted); margin-bottom: 8px; word-break: break-all; } .meta b { color: var(--ink); }
.warn { background: #fbf0dc; color: #7a5210; padding: 6px 10px; border-radius: 6px; font-size: .85rem; margin-bottom: 8px; }
.row { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 10px; }
.st.publiee { color: var(--green); } .st.erreur, .st.a_verifier { color: var(--red); }
.radio label { color: var(--ink); font-size: .95rem; } .radio input, .check input { display: inline; width: auto; margin: 0 6px 0 0; }
.check { color: var(--ink); font-size: .95rem; }
#slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.slot { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.slot input { border: 0; margin: 0; width: 120px; } .slot .x { border: 0; color: var(--muted); padding: 6px 10px; }
.order { list-style: none; padding: 0; margin: 0; user-select: none; }
.order li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: grab; touch-action: pan-y; }
.order li.skip { opacity: .6; } .order li.dragging { cursor: grabbing; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.order li.ph { border: 2px dashed var(--accent); background: #fbf2f5; }
.order .grip { font-size: 1.3rem; color: var(--muted); touch-action: none; padding: 4px; }
.order img { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; background: #ddd; flex: none; }
.order .cap { flex: 1; } .order .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.order { counter-reset: n; } .order li:not(.ph)::before { counter-increment: n; content: counter(n); font-weight: 700; color: var(--muted); width: 1.6em; text-align: right; }
table.list { width: 100%; border-collapse: collapse; } .list td, .list th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.res { font-weight: 600; } .res.publie, .res.info { color: var(--green); } .res.echec, .res.erreur { color: var(--red); } .res.simule, .res.rien_a_publier { color: var(--amber); }
pre { margin: 0; white-space: pre-wrap; font: inherit; }
.help ol { padding-left: 1.2em; } .help li { margin-bottom: 6px; }
details { margin: 6px 0 12px; } summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) {
  .video { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; }
  .order .tags { display: none; } nav a { padding: 5px 7px; font-size: .88rem; }
}
.help ul { margin: 6px 0 4px; padding-left: 1.2em; list-style: disc; } .help ul li { margin-bottom: 3px; }

.card.confirm { border: 2px solid var(--amber); background: #fffaf0; } .card.confirm ol { padding-left: 1.2em; }

.cover { margin-top: 10px; font-size: .85rem; } .cover img { width: 90px; border-radius: 6px; display: block; margin: 6px 0; }
.coverform { display: flex; flex-direction: column; gap: 6px; } .coverform button, .btn { font-size: .82rem; padding: 6px 8px; }
.btn { display: inline-block; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; text-align: center; margin: 0; }
.tablewrap { overflow-x: auto; } table.stats td.n { text-align: right; white-space: nowrap; } table.stats th { font-size: .82rem; white-space: nowrap; }
img.mini { width: 40px; height: 56px; object-fit: cover; border-radius: 5px; }
.coverform form { margin: 0; } .coverform button, .coverform .btn { width: 100%; }