/* Site du bot : la maquette « Bot Site v2 » (Claude Design), en CSS. Aucune valeur n'est écrite en dur dans le HTML : tout vient de l'API. */
:root {
  --bg: #0d0d0b; --panel: #121211; --panel2: #141412; --line: #252522; --line2: #1d1d1b; --line3: #22221f;
  --text: #ecebe4; --muted: #8d8c86; --dim: #6f6e69; --soft: #a9a8a1; --input: #0e0e0d; --chip: #1c1c1a;
  --accent: #c2e85a; --danger: #ff7b72;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration: none; } a:hover { color: var(--accent); }
button, input, select, textarea { font-family: inherit; }
::placeholder { color: var(--dim); }
code { font-family: var(--mono); color: var(--text); background: #1a1a18; padding: 1px 6px; border-radius: 4px; }
[hidden] { display: none !important; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
header.top { position: sticky; top: 0; z-index: 20; background: rgba(14, 14, 13, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line3); }
.top-in { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logo { font-weight: 600; font-size: 20px; letter-spacing: -.05em; cursor: pointer; display: flex; align-items: center; gap: 9px; } .mark { display: inline-flex; align-items: center; gap: 3px; } .mark i { display: block; width: 4px; height: 16px; border: 2px solid var(--text); } .mark i:first-child { border-right: 0; } .mark i:last-child { border-left: 0; } .mark b { display: block; width: 5px; height: 5px; background: var(--accent); } .logo span { color: var(--accent); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav button { background: transparent; color: var(--muted); border: 0; padding: 7px 12px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.nav button.on { background: var(--chip); color: var(--text); }
.top-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status { display: flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--muted); }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .status.off i { background: var(--danger); }
.btn { background: var(--accent); color: #0e0e0d; border: 0; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-block; }
.btn:hover { color: #0e0e0d; filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid #2e2e2a; font-weight: 500; }
.btn.ghost:hover { color: var(--text); border-color: #444; }
.user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
.user img { width: 24px; height: 24px; border-radius: 50%; }

/* Commandes */
main.cmds { max-width: 1240px; width: 100%; margin: 0 auto; padding: 48px 24px 80px; }
.eyebrow { font: 12px var(--mono); color: var(--accent); }
h1.big { margin: 10px 0 0; font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.lead { margin: 10px 0 32px; color: var(--muted); font-size: 16px; max-width: 600px; text-wrap: pretty; }
.cmds-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cats { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; width: 210px; flex: none; }
.cats button, .hubcats button { display: flex; justify-content: space-between; align-items: center; background: transparent; color: var(--muted); border: 0; padding: 7px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; text-align: left; }
.cats button.on, .hubcats button.on { background: var(--chip); color: var(--text); }
.cats small, .hubcats small { font: 12px var(--mono); color: var(--dim); }
.cmds-main { flex: 1; min-width: min(100%, 480px); display: flex; flex-direction: column; gap: 20px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.search span { font: 14px var(--mono); color: var(--dim); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 15px; padding: 13px 0; }
.search em { font: 11px var(--mono); color: var(--dim); border: 1px solid #2e2e2a; border-radius: 4px; padding: 2px 6px; white-space: nowrap; font-style: normal; }
.group { display: flex; flex-direction: column; gap: 10px; }
.group h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; padding: 0 4px; }
.group h2 small { font: 12px var(--mono); color: var(--dim); font-weight: 400; }
.table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line2); }
.row:first-child { border-top: 0; }
.row .n { font: 500 14px var(--mono); } .row .d { font-size: 14px; color: var(--soft); text-wrap: pretty; }
.perm { font: 11px var(--mono); color: #cfcec8; border: 1px solid #3a3a35; border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.perm.none { color: var(--dim); border-color: var(--line); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed #2a2a27; border-radius: 12px; }

/* Tableau de bord */
main.dash { flex: 1; display: flex; flex-wrap: wrap; width: 100%; max-width: 1240px; margin: 0 auto; }
aside.side { width: 240px; flex: none; border-right: 1px solid var(--line3); padding: 20px 12px; display: flex; flex-direction: column; gap: 22px; }
.label { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 8px; display: block; }
.side select { width: calc(100% - 8px); margin: 0 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 10px; font-size: 14px; }
.hubcats { display: flex; flex-direction: column; gap: 2px; } .hubcats button { padding: 8px 10px; border-radius: 8px; }
.checkup { margin: 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.checkup b { font-size: 13px; font-weight: 500; } .checkup span { font-size: 12px; color: var(--muted); line-height: 1.45; } .checkup code { background: transparent; padding: 0; color: var(--accent); font-size: 12px; }
.checkup code.bad { color: var(--danger); }
.content { flex: 1; min-width: min(100%, 520px); padding: 32px 32px 120px; display: flex; flex-direction: column; gap: 24px; }
.crumb { font: 12px var(--mono); color: var(--muted); }
h1.mid { margin: 6px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card:hover { border-color: #34342f; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .card-top span { font-size: 15px; font-weight: 500; }
.card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; flex: 1; text-wrap: pretty; }
.card-bot { display: flex; justify-content: space-between; align-items: center; }
.state { font: 11px var(--mono); color: var(--dim); } .state.on { color: var(--accent); } .state.warn { color: #e6b450; }
.link { background: transparent; border: 0; color: var(--soft); font-size: 13px; cursor: pointer; padding: 0; } .link:hover { color: var(--text); }
.switch { width: 34px; height: 20px; border-radius: 10px; background: #2e2e2a; position: relative; border: 0; padding: 0; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #0e0e0d; transition: left .15s; }
.switch.on { background: var(--accent); } .switch.on::after { left: 16px; } .switch:disabled { opacity: .5; cursor: wait; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.back { background: transparent; border: 0; padding: 0; font: 12px var(--mono); color: var(--muted); cursor: pointer; } .back:hover { color: var(--text); }
.modstate { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px; cursor: pointer; }
.body { display: flex; flex-direction: column; gap: 24px; transition: opacity .15s; } .body.off { opacity: .4; pointer-events: none; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.box { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.box-h { padding: 14px 20px; border-bottom: 1px solid var(--line3); font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; }
.box-h small { font: 12px var(--mono); color: var(--muted); font-weight: 400; }
.field { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line3); } .field:last-child { border-bottom: 0; }
.field label { font-size: 13px; color: var(--soft); }
.field select, .field textarea, .field input { background: var(--input); border: 1px solid #2a2a27; border-radius: 8px; color: var(--text); padding: 9px 10px; font: 14px var(--mono); outline: 0; }
.field textarea { font: 13px/1.55 var(--mono); resize: vertical; padding: 10px 12px; }
.field select:focus, .field textarea:focus, .field input:focus, .inline input:focus { border-color: #44443d; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { background: #1a1a18; border: 1px solid #2a2a27; border-radius: 5px; color: var(--soft); font: 12px var(--mono); padding: 3px 8px; cursor: pointer; } .chip:hover { color: var(--text); border-color: #3a3a36; }
.chips small { font: 11px var(--mono); color: var(--dim); margin-left: auto; }
.line { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line2); flex-wrap: wrap; } .line:first-child { border-top: 0; }
.line > div:first-child { display: flex; flex-direction: column; gap: 2px; } .line b { font-size: 14px; font-weight: 400; } .line small { font-size: 12px; color: var(--muted); }
.seg { display: flex; background: var(--input); border: 1px solid #2a2a27; border-radius: 8px; padding: 2px; }
.seg button { background: transparent; color: var(--muted); border: 0; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .seg button.on { background: #24241f; color: var(--text); }
.preview-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .preview-h span { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.discord { background: #1b1b1f; border: 1px solid #26262b; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.discord .ch { font: 12px var(--mono); color: var(--muted); }
.msg { display: flex; gap: 12px; padding-top: 6px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #0e0e0d; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 13px; }
.msg-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .msg-n { display: flex; gap: 8px; align-items: baseline; } .msg-n b { font-size: 14px; } .msg-n em { font: 10px var(--mono); background: var(--accent); color: #0e0e0d; padding: 1px 4px; border-radius: 3px; font-style: normal; } .msg-n small { font-size: 11px; color: var(--muted); }
.bubble { display: flex; flex-direction: column; gap: 10px; border-radius: 4px; } .bubble.carte { border-left: 4px solid var(--accent); padding: 12px 12px 12px 14px; background: #222226; }
.bubble p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: #dcdbd6; text-wrap: pretty; overflow-wrap: anywhere; }
.imgph { aspect-ratio: 2.4/1; border-radius: 8px; border: 1px solid #2e2e33; background: repeating-linear-gradient(135deg, #202024 0 8px, #1b1b1f 8px 16px); display: grid; place-items: center; font: 12px var(--mono); color: var(--muted); }
.ef { padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line2); } .ef:first-of-type { border-top: 0; } .ef > span { font-size: 14px; color: #cfcec8; }
.ef .inline { display: flex; align-items: center; gap: 8px; } .ef input, .inline input { width: 96px; background: var(--input); border: 1px solid #2a2a27; border-radius: 7px; color: var(--text); padding: 7px 9px; font: 13px var(--mono); text-align: right; outline: 0; } .ef .unit { font: 12px var(--mono); color: var(--dim); width: 44px; }
.pad { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .pad b { font-size: 14px; font-weight: 500; }
.games { display: flex; flex-wrap: wrap; gap: 6px; } .games button { background: var(--chip); border: 1px solid #3a3a35; color: var(--text); border-radius: 6px; padding: 5px 10px; font: 12px var(--mono); cursor: pointer; } .games button.off { background: transparent; border-color: var(--line); color: var(--dim); }
.dom { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line2); font: 13px var(--mono); } .dom button { background: transparent; border: 0; color: var(--dim); font: 12px var(--mono); cursor: pointer; } .dom button:hover { color: var(--text); }
.adder { padding: 12px 20px; border-top: 1px solid var(--line3); display: flex; gap: 8px; } .adder input { flex: 1; min-width: 0; background: var(--input); border: 1px solid #2a2a27; border-radius: 7px; color: var(--text); padding: 8px 10px; font: 13px var(--mono); outline: 0; } .adder button { background: var(--chip); border: 1px solid #2e2e2a; border-radius: 7px; color: var(--text); font-size: 13px; padding: 0 12px; cursor: pointer; }
.generic { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .generic > span { font: 12px var(--mono); color: var(--dim); } .generic p { margin: 0; font-size: 14px; color: var(--soft); max-width: 560px; line-height: 1.55; text-wrap: pretty; } .generic code { border: 1px solid var(--line); background: var(--input); border-radius: 7px; padding: 8px 12px; color: var(--accent); font-size: 13px; }
.bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; background: #1a1a18; border: 1px solid #2e2e2a; border-radius: 12px; padding: 10px 10px 10px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); z-index: 30; }
.bar span { font-size: 14px; color: var(--soft); white-space: nowrap; } .bar .plain { background: transparent; border: 0; color: var(--text); font-size: 14px; padding: 8px 10px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1a1a18; border: 1px solid #2e2e2a; border-radius: 10px; padding: 10px 16px; font: 13px var(--mono); color: var(--accent); z-index: 40; max-width: 90vw; }
.toast.err { color: var(--danger); border-color: #5a2b28; }
.center { margin: 80px auto; max-width: 460px; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .center h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.03em; } .center p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.addlist { display: flex; flex-direction: column; gap: 8px; width: 100%; } .addlist a { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--panel); font-size: 14px; } .addlist small { font: 12px var(--mono); color: var(--accent); }
.err-box { border: 1px solid #5a2b28; background: #1d1211; color: #ffb4ad; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
@media (max-width: 760px) { aside.side { width: 100%; border-right: 0; border-bottom: 1px solid var(--line3); } .content { padding: 24px 16px 120px; } .row { grid-template-columns: 1fr; } h1.big { font-size: 32px; } .cats { position: static; width: 100%; } }

/* Accueil */
main.home { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 72px; }
.hero { padding: 88px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-title { margin: 0; font-size: clamp(72px, 14vw, 132px); line-height: .9; font-weight: 700; letter-spacing: -.05em; } .hero-title span { color: var(--accent); }
.hero-sub { margin: 0; color: var(--soft); font-size: 20px; line-height: 1.5; max-width: 640px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.btn.big { padding: 14px 22px; font-size: 16px; border-radius: 10px; }
.stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line3); width: 100%; }
.stats div { display: flex; flex-direction: column; gap: 2px; } .stats b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; } .stats span { font: 12px var(--mono); color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.step { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.step em { font: 12px var(--mono); color: var(--accent); font-style: normal; } .step b { font-size: 16px; font-weight: 600; } .step p, .feature p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.feature { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; } .feature b { font-size: 16px; font-weight: 600; }
.cta { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .cta h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.center .small { font-size: 13px; } .center .small a { color: var(--accent); }

/* Formulaires générés */
.ef.wide { align-items: flex-start; } .ef.wide > span { display: flex; flex-direction: column; gap: 3px; max-width: 60%; } .ef.wide small { font-size: 12px; color: var(--muted); }
.ef .ctl { background: var(--input); border: 1px solid #2a2a27; border-radius: 7px; color: var(--text); padding: 8px 10px; font: 13px var(--mono); max-width: 280px; min-width: 160px; outline: 0; }
.field .fh { font-size: 12px; color: var(--muted); margin-top: -2px; } .field label small.count { font: 11px var(--mono); color: var(--dim); margin-left: 10px; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; padding: 2px; }
.pick { background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: 12px var(--mono); padding: 4px 9px; cursor: pointer; } .pick:hover { color: var(--text); border-color: #3a3a35; } .pick.on { background: var(--chip); color: var(--text); border-color: var(--accent); }
.section-hint { padding: 12px 20px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .hero { padding-top: 48px; } .ef.wide > span { max-width: 100%; } .ef { flex-wrap: wrap; } main.home { gap: 48px; } }

/* Assistant d'installation */
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; padding: 16px 20px; } .opts.small { padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.opt { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; font-size: 14px; }
.opt span { font-size: 12px; color: var(--muted); line-height: 1.45; } .opt:hover { border-color: #3a3a35; } .opt.on { border-color: var(--accent); background: #171a12; }
.dots { display: flex; gap: 5px; margin-top: 4px; } .dots i { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid rgba(255, 255, 255, .15); }
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; } .nm { display: flex; flex-direction: column; gap: 4px; } .nm span { font-size: 12px; color: var(--muted); } .nm input, .xrole input[type=text] { background: var(--input); border: 1px solid #2a2a27; border-radius: 8px; color: var(--text); padding: 9px 10px; font: 14px var(--mono); outline: 0; }
.xroles { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .xrole { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .xrole input[type=color] { width: 40px; height: 34px; background: transparent; border: 1px solid #2a2a27; border-radius: 8px; padding: 2px; cursor: pointer; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--soft); cursor: pointer; } .check input { margin-top: 3px; accent-color: #b9e662; } .xrole .check { align-items: center; font-size: 13px; } .xrole .check input { margin: 0; }
.plain { background: transparent; border: 0; color: var(--dim); font: 12px var(--mono); cursor: pointer; } .plain:hover { color: var(--text); }
.row-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn:disabled { opacity: .4; cursor: not-allowed; }
.fold summary { padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; } .fold summary small { font: 12px var(--mono); color: var(--muted); font-weight: 400; }
.fold-body { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 14px; } .fold-cat { display: flex; flex-direction: column; gap: 6px; } .fold-cat b { font-size: 13px; font-weight: 500; color: var(--soft); }
.plan { padding: 6px 20px 18px; display: flex; flex-direction: column; gap: 12px; } .plan b { font-size: 13px; font-weight: 500; } .plan p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.warns { padding: 8px 20px 0; } .warns p { margin: 4px 0; font-size: 13px; color: #e6b450; line-height: 1.5; }
.job { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .job.ok { border-color: #2f5a2b; } .job.warn { border-color: #6b5a22; } .job.bad { border-color: #5a2b28; } .job p { margin: 0; font-size: 14px; color: var(--soft); line-height: 1.5; overflow-wrap: anywhere; } .job small { color: var(--muted); font-size: 12px; }
.bar-anim { height: 6px; border-radius: 3px; background: #1d1d1b; overflow: hidden; position: relative; } .bar-anim i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--accent); border-radius: 3px; animation: slide 1.4s ease-in-out infinite; } @keyframes slide { 0% { left: -30%; } 100% { left: 100%; } }
.report { display: flex; flex-direction: column; gap: 12px; } .report span { font-size: 13px; font-weight: 500; } .report p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.todo { border-top: 1px solid var(--line3); padding-top: 14px; } .todo ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--soft); line-height: 1.5; }

/* Listes, actions, état */
.items { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; } .item .ef, .item .field { border-bottom: 0; border-top: 1px solid var(--line2); } .item-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; } .item-h b { font-size: 13px; font-weight: 500; color: var(--soft); }
.status-lines { padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; } .status-lines p { margin: 0; font-size: 13px; color: var(--soft); line-height: 1.5; overflow-wrap: anywhere; }
.action { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line2); } .action:first-of-type { border-top: 0; } .action-t { display: flex; flex-direction: column; gap: 3px; } .action-t b { font-size: 14px; font-weight: 500; } .action-t small { font-size: 12px; color: var(--muted); line-height: 1.5; } .action-f { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.btn.danger { background: #ff6b5e; color: #1a0a08; } .ctl.short { min-width: 80px; max-width: 120px; text-align: center; }
/* Images de fond */
.img-row { align-items: flex-start; } .img-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; } .img-actions .thumb { max-width: 180px; max-height: 100px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.btn.file { position: relative; overflow: hidden; cursor: pointer; } .btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }