/* Itzul — charte Miatu « Lumière ». Source : miatu-design-system.md (Kudeaketa).
   100 % bleu URDINA + neutres, fond crème, Space Grotesk + IBM Plex, device Cube. */

:root {
  --miatu-black: #2c2c2b; --miatu-blue: #36a7d0; --miatu-gray: #9c9b9b;

  --blue-50: oklch(0.97 0.018 220); --blue-100: oklch(0.93 0.04 220); --blue-200: oklch(0.87 0.07 218);
  --blue-300: oklch(0.80 0.10 215); --blue-400: oklch(0.72 0.115 212);
  --blue-500: oklch(0.685 0.118 224);
  --blue-600: oklch(0.60 0.115 230); --blue-700: oklch(0.50 0.10 232);
  --blue-800: oklch(0.40 0.08 234); --blue-900: oklch(0.30 0.055 236);

  --neutral-0: #fff; --neutral-50: oklch(0.985 0.002 220); --neutral-100: oklch(0.965 0.003 220);
  --neutral-200: oklch(0.922 0.004 220); --neutral-300: oklch(0.87 0.005 220); --neutral-400: oklch(0.72 0.006 220);
  --neutral-500: oklch(0.635 0.006 220);
  --neutral-600: oklch(0.50 0.006 90); --neutral-700: oklch(0.38 0.006 90);
  --neutral-800: oklch(0.27 0.006 90); --neutral-900: oklch(0.205 0.006 90);

  --radius: 0.75rem;
  --shadow-card: 0 1px 2px rgba(22,42,64,.06), 0 12px 32px -18px rgba(22,42,64,.14);

  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;

  --background: oklch(0.985 0.004 95);
  --foreground: var(--neutral-900); --card: var(--neutral-0); --card-foreground: var(--neutral-900);
  --primary: var(--blue-500); --primary-foreground: #fff;
  --muted: var(--neutral-100); --muted-foreground: var(--neutral-500);
  --accent: var(--blue-50);
  --destructive: oklch(0.55 0.22 25);
  --border: oklch(0.90 0.005 220); --input: oklch(0.90 0.005 220); --ring: var(--blue-500);

  /* Couleurs fonctionnelles des zones (exception documentée dans DESIGN.md :
     par-dessus une page scannée couleur, un code couleur reste nécessaire). */
  --z-todo: #d64541; --z-ia: #d98a2b; --z-ok: #3f9d54; --z-ignore: #9c9b9b;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--background); color: var(--foreground);
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- primitives ---------- */
.btn {
  font: var(--fw-medium) var(--text-sm)/1 var(--font-body);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1px solid var(--border); background: var(--card);
  color: var(--foreground); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--primary); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { filter: brightness(.94); border-color: var(--primary); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--muted); border-color: transparent; }
.btn-danger { color: var(--destructive); border-color: transparent; background: transparent; }
.btn-danger:hover { background: color-mix(in oklab, var(--destructive) 8%, transparent); border-color: transparent; }
.btn-sm { padding: 6px 10px; font-size: var(--text-xs); }

.input, textarea, select {
  font: var(--fw-regular) var(--text-sm)/1.5 var(--font-body);
  width: 100%; padding: 9px 11px; background: var(--card);
  border: 1px solid var(--input); border-radius: var(--radius); color: var(--foreground);
}
.input:focus, textarea:focus { outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent); }
textarea { resize: vertical; }
label.field { display: block; font: var(--fw-medium) var(--text-xs)/1 var(--font-body);
  color: var(--muted-foreground); margin: 14px 0 6px; }

.card { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px; }
.hint { color: var(--muted-foreground); font-size: var(--text-sm); }
.hint.error { color: var(--destructive); }
.row { display: flex; gap: 9px; align-items: center; }

/* ---------- eyebrow / marker ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.eyebrow span { font: var(--fw-semibold) 11px/1 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
h1.page-title { font: var(--fw-bold) 30px/1.05 var(--font-heading); letter-spacing: -.025em; }
h2 { font: var(--fw-semibold) var(--text-lg)/1.2 var(--font-heading); letter-spacing: -.015em; }
.marker { display: block; margin-top: 10px; }

/* ---------- header ---------- */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 20px; background: var(--card); border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 9px; font: var(--fw-bold) var(--text-base)/1 var(--font-heading); letter-spacing: -.02em; }
.brand small { font: var(--fw-regular) var(--text-xs)/1 var(--font-body); color: var(--muted-foreground); letter-spacing: 0; }
#header-user, #header-actions { display: flex; gap: 8px; align-items: center; }
#user-chip { font-size: var(--text-xs); color: var(--muted-foreground); }
#user-chip b { color: var(--foreground); font-weight: var(--fw-semibold); }

/* ---------- écran connexion ---------- */
#screen-auth { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; }
.auth-card { width: 360px; }

/* ---------- écran documents / admin ---------- */
.page-scroll { flex: 1; overflow: auto; padding: 34px 24px; }
.page-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.file-drop { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 18px;
  text-align: center; transition: border-color .15s, background .15s; }
.file-drop:hover { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 4%, transparent); }
.doc-item { display: flex; justify-content: space-between; align-items: center;
  padding: 13px 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
.doc-item:last-child { border-bottom: none; }
.doc-item:hover { background: var(--accent); }
.doc-item .meta { color: var(--muted-foreground); font-size: var(--text-xs); margin-top: 3px; }
.doc-open { display: flex; align-items: center; gap: 6px; color: var(--primary); font-size: var(--text-sm); font-weight: var(--fw-medium); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th { text-align: left; font: var(--fw-semibold) var(--text-xs)/1 var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground);
  padding: 0 12px 10px; border-bottom: 1px solid var(--border); }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cost { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi { flex: 1 1 160px; }
.kpi .k-label { font: var(--fw-semibold) 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.kpi .k-value { font: var(--fw-bold) 26px/1.1 var(--font-heading); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---------- éditeur ---------- */
#screen-editor { flex: 1; display: flex; min-height: 0; }
#pages-panel { width: 96px; background: var(--card); border-right: 1px solid var(--border); overflow-y: auto; flex: 0 0 auto; }
.panel-title { font: var(--fw-semibold) 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); padding: 14px 14px 6px; }
#page-list { display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.page-btn { border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  padding: 8px 4px; text-align: center; cursor: pointer; font: var(--fw-medium) var(--text-sm)/1.2 var(--font-body); }
.page-btn:hover { border-color: var(--primary); }
.page-btn.active { border-color: var(--primary); background: var(--accent); font-weight: var(--fw-semibold); }
.page-btn .mini { display: block; font: var(--fw-medium) 10px/1.3 var(--font-mono); color: var(--muted-foreground); }

#viewer { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#viewer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#viewer-bar .sep { width: 1px; height: 20px; background: var(--border); }
#page-label { font: var(--fw-medium) var(--text-sm)/1 var(--font-mono); }
.toggle { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--foreground); cursor: pointer; }
#busy { color: var(--primary); font-weight: var(--fw-medium); font-size: var(--text-sm); display: flex; align-items: center; gap: 7px; }
#stage-wrap { flex: 1; overflow: auto; padding: 16px; background: var(--muted); }
#stage { position: relative; margin: 0 auto; width: fit-content; }
#page-img { display: block; box-shadow: var(--shadow-card); border-radius: 4px; }
#zone-layer { position: absolute; inset: 0; }

.zone { position: absolute; border: 2px solid; border-radius: 3px; background: transparent; cursor: move; }
.zone:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); }
.zone.selected { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring); z-index: 5; }
.zone.todo { border-color: var(--z-todo); }
.zone.ia { border-color: var(--z-ia); }
.zone.ok { border-color: var(--z-ok); }
.zone.ignore { border-color: var(--z-ignore); border-style: dashed; }
.z-tilt { position: absolute; inset: -2px; border: 1px dashed color-mix(in oklab, var(--ring) 55%, transparent);
  border-radius: 3px; pointer-events: none; }
.handle { position: absolute; width: 11px; height: 11px; background: var(--card); border: 2px solid var(--ring);
  border-radius: 3px; }
.handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.handle.rot { left: 50%; top: -26px; margin-left: -6px; border-radius: 50%; cursor: grab;
  background: var(--ring); }
.rot-stem { position: absolute; left: 50%; top: -20px; width: 1px; height: 14px; background: var(--ring); pointer-events: none; }
#rubber { position: absolute; border: 2px dashed var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent); }
#stage.adding { cursor: crosshair; }
#stage.adding .zone { pointer-events: none; }

/* ---------- panneau zone ---------- */
#editor-panel { width: 312px; background: var(--card); border-left: 1px solid var(--border);
  padding: 0 16px 16px; overflow-y: auto; flex: 0 0 auto; }
.opts { flex-wrap: wrap; gap: 12px; }
.opts label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted-foreground); margin: 0; }
.opts input[type=number] { width: 66px; }
.opts input[type=color] { width: 34px; height: 26px; padding: 2px; border-radius: 7px; }
.legend { padding: 8px 2px; line-height: 1.9; font-size: var(--text-sm); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.legend .dot.todo { background: var(--z-todo); } .legend .dot.ia { background: var(--z-ia); }
.legend .dot.ok { background: var(--z-ok); } .legend .dot.ignore { background: var(--z-ignore); }

footer { padding: 5px 20px; background: var(--card); border-top: 1px solid var(--border);
  font: var(--fw-regular) var(--text-xs)/1.6 var(--font-mono); color: var(--muted-foreground); flex: 0 0 auto; }

/* ---------- motion « Lumière » ---------- */
@keyframes v2in { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
@keyframes v2pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes v2draw { from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }
.v2in { animation: v2in .35s ease both; }
.v2pulse { animation: v2pulse 1.4s ease-in-out infinite; }
.v2draw { stroke-dasharray:1; stroke-dashoffset:1; animation: v2draw .7s cubic-bezier(.4,0,.2,1) .12s forwards; }
@media (prefers-reduced-motion: reduce) {
  .v2in, .v2pulse { animation: none !important; }
  .v2draw { animation: none !important; stroke-dashoffset: 0; }
}