/* Espace clients : sobre et lisible, pensé pour le téléphone d'abord. */
:root {
  --bg: #F5F6F8; --card: #FFFFFF; --ink: #18212B; --muted: #5F6B7A; --line: #E2E6EC; --line2: #CBD2DB;
  --accent: #2753C9; --accent-soft: #E8EEFC; --accent-ink: #FFFFFF;
  --new: #2753C9; --new-soft: #E8EEFC; --doing: #A35A00; --doing-soft: #FCEFD9; --wait: #8A3FBE; --wait-soft: #F3E9FB;
  --done: #1D7A46; --done-soft: #E1F3E8; --closed: #4A5562; --closed-soft: #EDEFF2; --no: #B23A2E; --no-soft: #FBE7E5;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 26px; font-weight: 750; } h2 { font-size: 20px; font-weight: 700; } h3 { font-size: 16px; font-weight: 650; }
p { margin: 0; }
.muted { color: var(--muted); } .small { font-size: 14px; } .tiny { font-size: 12.5px; }
.center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: calc(var(--sat) + 10px) 16px 10px; }
.top .in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.top .grow { flex: 1; min-width: 0; }
.top .t { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); font-size: 20px; flex: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.avatar.client { background: var(--accent-soft); color: var(--accent); }
.avatar.assistant { background: var(--wait-soft); color: var(--wait); }
.main { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(var(--sab) + 110px); display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.row { display: flex; align-items: center; gap: 10px; } .row .grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 11px; font-weight: 650; background: var(--card); border: 1px solid var(--line2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; }
.btn:focus-visible, .pick:focus-visible, .back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.s-nouvelle { background: var(--new-soft); color: var(--new); } .s-en_cours { background: var(--doing-soft); color: var(--doing); }
.s-attente_client { background: var(--wait-soft); color: var(--wait); } .s-livree { background: var(--done-soft); color: var(--done); }
.s-validee { background: var(--closed-soft); color: var(--closed); } .s-refusee { background: var(--no-soft); color: var(--no); }
.urgent { background: var(--no-soft); color: var(--no); }
.kind { font-size: 12.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.list { display: grid; gap: 10px; }
.req { display: grid; gap: 6px; text-align: left; width: 100%; }
.req .title { font-weight: 650; font-size: 16.5px; }
.req.read .title { font-weight: 550; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); align-items: center; }
.seg { display: flex; background: #E9ECF1; border-radius: 11px; padding: 3px; }
.seg button { flex: 1; min-height: 34px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.space { display: grid; gap: 10px; text-align: left; width: 100%; }
.counts { display: flex; flex-wrap: wrap; gap: 6px; }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; display: grid; gap: 10px; justify-items: center; }
.section-t { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.act { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; text-align: left; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
/* fil d'une demande */
.thread { display: grid; gap: 14px; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.msg .bubble { background: var(--card); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me .bubble { background: var(--accent-soft); border-color: transparent; }
.msg .who { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.msg .who b { color: var(--ink); font-weight: 650; }
.event { text-align: center; font-size: 13px; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 8px; }
.photos button { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--line); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px calc(var(--sab) + 10px); }
.composer .in { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.composer textarea { width: 100%; min-height: 44px; max-height: 160px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; resize: none; background: var(--bg); font-size: 16px; }
.composer .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.statusbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.statusbar::-webkit-scrollbar { display: none; }
.statusbar .pick { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 14px; font-weight: 600; }
.statusbar .pick.on { border-color: transparent; }
/* feuilles */
#sheet { display: none; }
#sheet.open { display: block; position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-in { max-width: 640px; margin: 0 auto; padding: calc(var(--sat) + 12px) 16px calc(var(--sab) + 40px); display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 650; }
.field .help { font-size: 13px; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); font-size: 16px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kinds button { text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); display: grid; gap: 2px; }
.kinds button b { font-size: 15px; } .kinds button span { font-size: 13px; color: var(--muted); }
.kinds button.on { border-color: var(--accent); background: var(--accent-soft); }
.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle { width: 50px; height: 30px; border-radius: 15px; background: var(--line2); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle.on { background: var(--no); } .toggle.on::after { left: 23px; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: #EEF1F5; padding: 10px 12px; border-radius: 10px; word-break: break-all; user-select: all; }
.error { background: var(--no-soft); color: var(--no); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.banner { background: var(--doing-soft); color: var(--doing); border-radius: 12px; padding: 12px 14px; }
.login { max-width: 420px; margin: 0 auto; padding: calc(var(--sat) + 48px) 20px 40px; display: grid; gap: 16px; }
.login .logo { width: 84px; height: 84px; border-radius: 20px; background: url('/icons/icon-192.png') center/cover; justify-self: center; }
.login h1 { text-align: center; } .login .sub { text-align: center; color: var(--muted); margin-top: -8px; }
#lightbox:empty { display: none; }
#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,14,20,.94); display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 16px) 12px calc(var(--sab) + 16px); }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
#toast:empty { display: none; }
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--sab) + 96px); z-index: 70; display: flex; justify-content: center; pointer-events: none; }
#toast div { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 12px; font-weight: 600; max-width: 460px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.fab { position: fixed; right: 16px; bottom: calc(var(--sab) + 18px); z-index: 25; min-height: 52px; padding: 0 20px; border-radius: 26px; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 6px 18px rgba(39,83,201,.35); }
@media (min-width: 700px) { .kinds { grid-template-columns: repeat(4, 1fr); } }
/* débordements et liens-cartes */
.main > *, .list > *, .thread > *, .act > *, .msg > *, .row > .grow { min-width: 0; }
a.card, a.act { color: inherit; }
a.card:active, a.act:active { opacity: .75; }
.space h2 { overflow-wrap: anywhere; }
.statusbar .pick.on.s-nouvelle { background: var(--new-soft); color: var(--new); } .statusbar .pick.on.s-en_cours { background: var(--doing-soft); color: var(--doing); }
.statusbar .pick.on.s-attente_client { background: var(--wait-soft); color: var(--wait); } .statusbar .pick.on.s-livree { background: var(--done-soft); color: var(--done); }
.statusbar .pick.on.s-validee { background: var(--closed-soft); color: var(--closed); } .statusbar .pick.on.s-refusee { background: var(--no-soft); color: var(--no); }