:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --text: #0f1b2d;
  --muted: #5b6676;
  --border: #d8dee7;
  --primary: #0f766e;
  --primary-text: #ffffff;
  --danger: #b42318;
  --ok: #15803d;
  --warn: #b45309;
  --topbar: #0f1b2d;
  --radius: 14px;
  --tap: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body { display: flex; flex-direction: column; }

[hidden] { display: none !important; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.muted { color: var(--muted); margin: 0; }

/* ─── Barre supérieure ─────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top) + .5rem) 1.25rem .5rem;
  background: var(--topbar);
  color: #e2e8f0;
  font-size: .85rem;
  user-select: none;
  -webkit-user-select: none;
}
.brand { font-weight: 600; letter-spacing: .02em; }
.device { margin-left: auto; opacity: .7; }
.conn { display: inline-flex; align-items: center; gap: .4rem; }
.conn i { width: .6rem; height: .6rem; border-radius: 50%; background: #94a3b8; }
.conn[data-state="online"] i { background: #4ade80; }
.conn[data-state="connecting"] i { background: #fbbf24; }
.conn[data-state="offline"] i, .conn[data-state="error"] i { background: #f87171; }

/* ─── Écrans ───────────────────────────────────────────────────────── */

main { flex: 1; min-height: 0; display: flex; }
.screen { flex: 1; min-height: 0; display: flex; }

.center {
  margin: auto;
  text-align: center;
  padding: 2rem;
  max-width: 34rem;
}
.logo, .done-icon {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.5rem;
  color: var(--primary);
}
.done-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-size: 3rem;
}
.done-icon[data-variant="pending"] { color: var(--muted); background: #e5e9f0; }
.done-icon[data-variant="warn"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.setup { margin: auto; width: min(32rem, calc(100% - 2rem)); display: grid; gap: 1rem; }

/* ─── Session ──────────────────────────────────────────────────────── */

.session {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}
.session-head { padding: 1.25rem 1.5rem .75rem; }
#session-intro { margin-top: .25rem; }

.steps {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  counter-reset: step;
}
.steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: #e5e9f0;
  color: var(--muted);
  font-size: .85rem;
  counter-increment: step;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  font-weight: 600;
}
.steps li[aria-current="step"] { background: var(--primary); color: var(--primary-text); }
.steps li[aria-current="step"]::before { color: var(--primary); }
.steps li.done::before { content: "✓"; color: var(--ok); }

.step-body { flex: 1; min-height: 0; display: flex; padding: 0 1.5rem; }
.step { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; }

.session-foot {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: 1rem 1.5rem calc(env(safe-area-inset-bottom) + 1rem);
}
.spacer { flex: 1; }

/* ─── Document ─────────────────────────────────────────────────────── */

.doc-viewer {
  flex: 1;
  min-height: 12rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.doc-text { white-space: pre-wrap; }
.doc-html table { border-collapse: collapse; width: 100%; }
.doc-html td, .doc-html th { border: 1px solid var(--border); padding: .35rem .5rem; }
.doc-html img { max-width: 100%; }
.doc-pdf { padding: .75rem; background: #e5e9f0; }
.doc-pdf canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto .75rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 27, 45, .15);
}
.doc-end { height: 1px; }
.doc-loading { color: var(--muted); text-align: center; padding: 2rem; }

.accept {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: var(--tap);
}
.accept.disabled { opacity: .55; }
.hint { font-size: .85rem; color: var(--warn); margin: -.5rem 0 0; }

/* ─── Formulaire ───────────────────────────────────────────────────── */

.form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-content: start;
  padding-bottom: 1rem;
}
.field { grid-column: span 2; display: grid; gap: .35rem; }
.field.half { grid-column: span 1; }
@media (max-width: 640px) { .field.half { grid-column: span 2; } }
.field > label, .field legend { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--danger); margin-left: .15rem; }
.field .help { font-size: .85rem; color: var(--muted); margin: 0; }
.field .err { font-size: .85rem; color: var(--danger); margin: 0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.info { grid-column: span 2; margin: 0; color: var(--muted); }
.info.section { color: var(--text); font-weight: 600; font-size: 1.1rem; margin-top: .5rem; }

input, select, textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: .65rem .85rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - .85rem) 50%;
  background-size: .4rem .4rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); border-color: var(--primary); }
input[readonly] { background: #eef1f5; }

input[type="checkbox"], input[type="radio"] {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:checked::after { content: "✓"; color: #fff; font-weight: 700; }
input[type="radio"]:checked::after { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; }

.choice {
  display: flex;
  gap: .75rem;
  align-items: center;
  min-height: var(--tap);
  padding: .5rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

/* ─── Signature ────────────────────────────────────────────────────── */

.sig-text { margin: 0; }
.sig-wrap {
  position: relative;
  flex: 1;
  min-height: 14rem;
  max-height: 26rem;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}
.sig-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.sig-line {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}
.sig-placeholder {
  position: absolute;
  left: 8%;
  bottom: calc(22% - 1.75rem);
  color: #aab3c0;
  font-size: .9rem;
  pointer-events: none;
}
.sig-actions { display: flex; justify-content: space-between; align-items: center; }

/* ─── Boutons, dialogue, toast ─────────────────────────────────────── */

.btn {
  font: inherit;
  font-weight: 600;
  min-height: var(--tap);
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); min-width: 9rem; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--danger); }
.btn.small { min-height: 40px; padding: 0 1rem; font-size: .9rem; }

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(30rem, calc(100% - 2rem));
  box-shadow: 0 20px 50px rgba(15, 27, 45, .3);
}
dialog::backdrop { background: rgba(15, 27, 45, .45); }
.dialog-body { padding: 1.5rem; display: grid; gap: 1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; }
label { display: grid; gap: .35rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 6rem);
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: .95rem;
  box-shadow: 0 8px 24px rgba(15, 27, 45, .25);
}
.toast.error { background: var(--danger); }