:root {
  --orange: #C8501E; --orange-d: #A63F17; --ivory: #F4F0E6; --ink: #1A120D; --paper: #FFFDF8;
  --line: rgba(26, 18, 13, .14); --muted: rgba(26, 18, 13, .62);
  --green: #1C7340; --green-bg: #DFF1E5; --red: #B3261E; --red-bg: #FBE1DE; --amber: #8F5200; --amber-bg: #FCEBCB;
  --tabbar: 62px; --dock: 76px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.4 'Poppins', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
input, textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 18px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; }
input:focus, textarea:focus { outline: 2px solid var(--orange); border-color: transparent; }

/* Connexion */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--orange); }
.login-card { background: var(--paper); border-radius: 24px; padding: 26px 22px; width: 100%; max-width: 420px; }
.login-card .brand { font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-d); }
.login-card h1 { margin: 4px 0 18px; font-size: 28px; line-height: 1.15; }
.login-card label { display: block; font-weight: 500; margin-bottom: 14px; }
.login-card .err { color: var(--red); font-weight: 600; margin-top: 12px; min-height: 1em; }
.hint { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--ivory); padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.clock { font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.delta { font-weight: 700; font-size: 17px; padding: 5px 11px; border-radius: 10px; background: rgba(244, 240, 230, .12); white-space: nowrap; }
.delta.green { background: #2E8B57; color: #fff; }
.delta.amber { background: #E39B2D; color: var(--ink); }
.delta.red { background: #D2412F; color: #fff; }
.delta.none { display: none; }
.conn { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; line-height: 1.3; font-weight: 500; text-align: right; }
.conn .ok::before, .conn .ko::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.conn .ok::before { background: #4ADE80; }
.conn .ko { color: #FFB4A8; font-weight: 700; }
.conn .ko::before { background: #FF6B57; }
.notice { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 29; background: var(--orange); color: #fff; font-weight: 600; font-size: 16px; padding: 10px 14px; text-align: center; }
.notice.err { background: var(--red); }

main { padding: 12px 12px calc(var(--tabbar) + var(--dock) + 26px + env(safe-area-inset-bottom)); max-width: 1100px; margin: 0 auto; }
body.no-dock main { padding-bottom: calc(var(--tabbar) + 24px + env(safe-area-inset-bottom)); }
.tab { display: none; }
.tab.on { display: block; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.h2 { font-size: 22px; font-weight: 700; margin: 6px 4px 12px; line-height: 1.2; }
.sec { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 8px; }
.sec:first-child { margin-top: 6px; }

/* Boutons */
.b { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 17px; cursor: pointer; text-decoration: none; color: var(--ink); line-height: 1.2; }
.b:active { transform: scale(.985); }
.b.big { min-height: 64px; font-size: 19px; }
.b.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.b.dark { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.b.ok { background: var(--green); border-color: var(--green); color: #fff; }
.b.danger { background: var(--red); border-color: var(--red); color: #fff; }
.b.on { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.b.ghost { background: transparent; }
.b.small { min-height: 46px; font-size: 15px; }
.b[disabled] { opacity: .45; pointer-events: none; }
.b.col { flex-direction: column; gap: 2px; }
.b small { display: block; font-weight: 500; font-size: 14px; opacity: .85; }
.stack > * + * { margin-top: 10px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Direct */
.preview { background: var(--ink); border-radius: 18px; padding: 8px 8px 9px; margin-bottom: 12px; }
.pv-head { display: flex; justify-content: space-between; align-items: center; color: var(--ivory); font-size: 13px; font-weight: 600; padding: 0 4px 7px; letter-spacing: .02em; }
.pv-head .ko { color: #FFB4A8; }
.pv-box { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--orange); }
.pv-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; font-weight: 600; background: var(--ink); color: var(--ivory); }
.alert.red { background: var(--red); color: #fff; }
.alert .b { width: auto; min-height: 46px; flex: none; font-size: 15px; background: #fff; color: var(--ink); border: 0; }
.now .k { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); }
.now .t { font-size: 27px; font-weight: 700; line-height: 1.15; margin: 4px 0 2px; letter-spacing: -.01em; }
.now .w { font-size: 17px; color: var(--muted); }
.now .w b { color: var(--ink); font-weight: 600; }
.now .w .todo { color: var(--red); font-weight: 600; }
.tm { margin-top: 14px; }
.tm .l { display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; }
.tm .l b { font-variant-numeric: tabular-nums; font-size: 20px; }
.tm .track { height: 10px; border-radius: 6px; background: var(--ivory); margin-top: 6px; overflow: hidden; }
.tm .fill { height: 100%; background: var(--orange); border-radius: 6px; }
.tm.over .fill { background: var(--red); }
.ctx-t { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 2px 4px 10px; }
.info { font-size: 16px; margin: 0 4px 12px; color: var(--muted); }
.info b { color: var(--ink); }
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; min-height: 64px; cursor: pointer; }
.field span { font-size: 13px; color: var(--muted); display: block; font-weight: 500; }
.field b { font-size: 18px; font-weight: 600; display: block; line-height: 1.25; }
.field b.todo { color: var(--red); }
.field em { font-style: normal; font-weight: 600; color: var(--orange-d); font-size: 15px; flex: none; }

/* Suivant / Retour */
.dock { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); z-index: 25; display: flex; gap: 10px; padding: 10px 12px; background: linear-gradient(rgba(244, 240, 230, 0), var(--ivory) 30%); max-width: 1100px; margin: 0 auto; }
body.no-dock .dock { display: none; }
.dock .back { width: 92px; flex: none; min-height: var(--dock); font-size: 16px; background: var(--paper); }
.dock .next { flex: 1; min-height: var(--dock); background: var(--orange); border-color: var(--orange); color: #fff; flex-direction: column; gap: 2px; font-size: 21px; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(150, 50, 10, .8); }
.dock .next small { font-size: 14.5px; font-weight: 500; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Barre d'onglets */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; display: flex; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { position: relative; flex: 1; height: var(--tabbar); border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabbar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabbar svg .fill { fill: currentColor; stroke: none; }
.tabbar button.on { color: var(--orange-d); }
.badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 21px; height: 21px; border-radius: 11px; background: var(--orange); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.badge.green { background: var(--green); }

/* Questions */
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qhead .h2 { margin: 6px 4px; }
.switch { flex: none; width: auto; min-height: 44px; font-size: 14.5px; padding: 8px 14px; border-radius: 999px; }
.switch.on { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.switch.off { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.seg { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.seg button { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 15px; font-weight: 600; font-size: 15px; min-height: 44px; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.onair { background: var(--ink); color: var(--ivory); border-radius: 20px; padding: 14px 16px; margin: 4px 0 12px; }
.onair .l { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFB08A; }
.onair .x { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 19px; margin: 6px 0 4px; line-height: 1.35; }
.onair .who { font-size: 14px; opacity: .8; margin-bottom: 10px; }
.q { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 14px 14px 14px 16px; margin-bottom: 10px; }
.q.isair { border: 2px solid var(--orange); }
.q.rejected { opacity: .62; }
.q .who { font-size: 14.5px; color: var(--muted); }
.q .who b { color: var(--ink); font-weight: 600; }
.q .x { font-size: 19px; line-height: 1.38; margin: 6px 0 12px; word-wrap: break-word; cursor: pointer; }
.q .row2 .b { min-height: 58px; font-size: 18px; }
.empty { color: var(--muted); text-align: center; padding: 34px 12px; font-size: 17px; }

/* Votes */
.vote { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.vote.isopen { border: 2px solid var(--green); }
.vh { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 8px; background: var(--ivory); }
.chip.open { background: var(--green); color: #fff; }
.chip.screen { background: var(--ink); color: var(--ivory); }
.chip.here { background: var(--orange); color: #fff; }
.vq { font-size: 19px; font-weight: 600; margin: 10px 0 8px; line-height: 1.3; }
.vo { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 15.5px; margin: 7px 0; align-items: center; }
.vo b { font-variant-numeric: tabular-nums; }
.vo .bar { grid-column: 1 / -1; height: 8px; border-radius: 6px; background: var(--ivory); overflow: hidden; }
.vo .bar i { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.vtot { font-weight: 700; font-size: 18px; margin: 10px 0 12px; }

/* Plus */
.seqrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; min-height: 60px; margin-bottom: 8px; cursor: pointer; }
.seqrow .tt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--muted); width: 46px; flex: none; }
.seqrow .nn { flex: 1; font-weight: 500; font-size: 16.5px; line-height: 1.25; }
.seqrow .nn small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.seqrow.cur { border: 2px solid var(--orange); background: #FFF1E8; }
.seqrow.cur .tt { color: var(--orange-d); }
.seqrow.hid { opacity: .5; }
.seqrow.hid .nn { text-decoration: line-through; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; background: var(--orange); color: #fff; text-decoration: none; }
.tag.grey { background: var(--line); color: var(--ink); }
.kv { font-size: 16px; margin: 4px 2px 10px; }
.kv span { color: var(--muted); }
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; text-align: center; font-weight: 700; font-size: 20px; }
.contact { border-top: 1px solid var(--line); padding: 10px 0; font-size: 15px; }
.contact .m { color: var(--muted); font-size: 14px; word-break: break-all; }

/* Feuille, guide, message */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(26, 18, 13, .5); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .sheet-bg { align-items: center; } }
.sheet { background: var(--paper); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .sheet { border-radius: 24px; } }
.sheet h3 { margin: 0 0 14px; font-size: 23px; line-height: 1.2; }
.sheet label { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 12px; }
.sheet p { margin: 0 0 14px; }
.reader .who { color: var(--muted); font-size: 16px; }
.reader .who b { color: var(--ink); }
.reader .big { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 29px; line-height: 1.35; margin: 12px 0 18px; word-wrap: break-word; }
.chk { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.chk input { width: 26px; height: 26px; margin: 0; flex: none; }
.onb { position: fixed; inset: 0; z-index: 70; background: rgba(26, 18, 13, .72); display: flex; align-items: flex-end; justify-content: center; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .onb { align-items: center; } }
.onb-card { background: var(--paper); border-radius: 26px; padding: 22px 20px 18px; width: 100%; max-width: 440px; }
.onb-card .st { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-d); }
.onb-card h3 { font-size: 26px; line-height: 1.18; margin: 6px 0 10px; }
.onb-card p { font-size: 17px; color: var(--muted); margin: 0 0 16px; }
.onb-card .pic { background: var(--ivory); border-radius: 18px; padding: 14px; margin-bottom: 16px; }
.onb-card .dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 0; }
.onb-card .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onb-card .dots i.on { background: var(--orange); }
.mini-screen { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--orange); color: var(--ivory); display: flex; flex-direction: column; justify-content: center; padding: 0 18px; font-weight: 700; font-size: 22px; line-height: 1.1; }
.mini-screen small { font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 500; font-size: 14px; margin-top: 6px; }
.mini-next { background: var(--orange); color: #fff; border-radius: 14px; padding: 14px; text-align: center; font-weight: 700; font-size: 20px; }
.mini-next small { display: block; font-weight: 500; font-size: 13.5px; }
.mini-q { background: #fff; border-radius: 14px; padding: 12px; font-size: 15px; }
.mini-q b { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.mini-q .row2 { margin-top: 10px; }
.mini-q .row2 div { border-radius: 10px; padding: 9px; text-align: center; font-weight: 600; font-size: 14px; border: 1.5px solid var(--line); }
.mini-q .row2 div:first-child { background: var(--orange); color: #fff; border-color: var(--orange); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + var(--dock) + 34px + env(safe-area-inset-bottom)); z-index: 80; background: var(--ink); color: var(--ivory); padding: 12px 18px; border-radius: 14px; font-weight: 600; max-width: 92vw; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.toast.err { background: var(--red); }

/* Tablette et ordinateur */
@media (min-width: 900px) {
  main { padding-left: 20px; padding-right: 20px; }
  .d-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .tabbar { max-width: 1100px; margin: 0 auto; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; }
  #t-questions, #t-votes, #t-plus { max-width: 760px; margin: 0 auto; }
}
body.no-dock .toast { bottom: calc(var(--tabbar) + 18px + env(safe-area-inset-bottom)); }

/* ---------- Pas à pas ---------- */
.sv, .sdock, .advback { display: none; }
body.mode-step .sv { display: block; padding: 10px 12px calc(170px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
body.mode-step main, body.mode-step .dock, body.mode-step .tabbar, body.mode-step .conn { display: none !important; }
body.mode-step .sdock { display: block; }
body.mode-adv .advback { display: block; }
.sv-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sv-pv { position: relative; flex: 0 0 46%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--orange); border: 3px solid var(--ink); }
.sv-pv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.sv-info { flex: 1; min-width: 0; }
.sv-k { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-d); }
.sv-seq { font-size: 17px; font-weight: 700; line-height: 1.2; margin: 2px 0 6px; }
.sv-warn { color: var(--red); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.qpill { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; min-height: 36px; cursor: pointer; }
.qpill.hot { background: var(--orange); border-color: var(--orange); color: #fff; }
.late { background: var(--amber-bg); border: 2px solid #E39B2D; border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; font-weight: 600; font-size: 17px; }
.late .row2 { margin-top: 10px; }
.viewer { background: var(--ink); color: var(--ivory); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; font-size: 16px; }
.cons { padding: 18px 16px; }
.cons .ck { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); }
.cons .ck span:last-child { color: var(--muted); letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: 14px; }
.cons .cs { font-size: 25px; font-weight: 600; line-height: 1.28; margin: 8px 0 2px; letter-spacing: -.005em; }
.cons .ce { margin-top: 16px; }
.cons .q { margin-bottom: 0; }
.cons .q .x { cursor: default; }
.sdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(244, 240, 230, 0), var(--ivory) 22%); }
.sdock > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.bigstep { min-height: 92px; background: var(--orange); border-color: var(--orange); color: #fff; font-size: 23px; font-weight: 700; flex-direction: column; gap: 3px; box-shadow: 0 12px 26px -12px rgba(150, 50, 10, .85); line-height: 1.15; }
.bigstep small { font-size: 14px; font-weight: 500; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bigstep.take { background: var(--ink); border-color: var(--ink); }
.bigstep.done { background: var(--paper); color: var(--muted); border-color: var(--line); box-shadow: none; }
.minor { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.minor button { flex: 0 1 auto; white-space: nowrap; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--muted); padding: 10px 6px; min-height: 44px; cursor: pointer; border-radius: 12px; }
.minor button[hidden] { display: none; }
.minor #btn-undo { color: var(--orange-d); background: #FFF1E8; }
.minor button:last-child { margin-left: auto; text-align: right; }
.advback { position: relative; margin: 10px auto 0; z-index: 1; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font: 600 14.5px/1 'Poppins', sans-serif; padding: 11px 16px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); cursor: pointer; }
body.mode-adv main { padding-top: 56px; }
body.mode-step .toast { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }