:root { --bleu:#0055A4; --rouge:#EF4135; --ink:#1a1a1a; --paper:#faf9f7; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 system-ui,sans-serif; color:var(--ink); background:var(--paper); }
.banner { display:flex; gap:16px; align-items:center; padding:20px; border-bottom:4px solid var(--rouge);
  background:linear-gradient(90deg,var(--bleu) 0 8px,#fff 8px 16px,var(--rouge) 16px 24px,#fff 24px); }
.banner .marianne { height:60px; width:auto; border-radius:8px; object-fit:cover; box-shadow:0 1px 5px rgba(0,0,0,.25); }
.banner h1 { margin:0; letter-spacing:.02em; } .tag { margin:2px 0 0; color:#333; }
main { max-width:760px; margin:0 auto; padding:20px; }
section { margin-bottom:28px; }
input,textarea,button { width:100%; padding:10px; margin:6px 0; font:inherit; border:1px solid #ccc; border-radius:8px; }
button { background:var(--bleu); color:#fff; border:0; cursor:pointer; }
.sujet { padding:12px; border:1px solid #e5e2dc; border-radius:10px; margin:8px 0; cursor:pointer; background:#fff; }
.sujet h3 { margin:0 0 4px; } .meta { color:#777; font-size:.85em; }
.bot { background:#eef4ff; border-radius:8px; padding:8px; }
#besoins-list { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
#besoins-list li { background:#fff; border:1px solid #e5e2dc; border-radius:999px; padding:4px 12px; font-size:.9em; }
#follow-code { background:#fff8dc; padding:10px; border-radius:8px; }