/* Kuriosa · Le Regard (PWA corps universel) · langue visuelle de l'œil :
   nuit (#04101c → #0f2c3f) + iris turquoise (#4fd8bd) + ambre découverte */

* { box-sizing: border-box; margin: 0; }
:root {
  --encre: #04101c;
  --abysse: #0f2c3f;
  --iris: #4fd8bd;
  --ambre: #e8b04b;
  --texte: #dbe7ec;
  --brume: #8fa7b4;
  --carte: rgba(255, 255, 255, 0.06);
  --ligne: rgba(79, 216, 189, 0.25);
}
html, body { height: 100%; }
body {
  background: linear-gradient(160deg, var(--encre), var(--abysse));
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.app { min-height: 100%; max-width: 560px; margin: 0 auto; padding: env(safe-area-inset-top) 14px calc(env(safe-area-inset-bottom) + 14px); }

/* ── Consentement ── */
.consent { display: flex; align-items: center; min-height: 100vh; }
.consent-card { width: 100%; background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.logo-eye { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--encre), var(--abysse)); box-shadow: 0 0 0 2px var(--ligne); display: flex; align-items: center; justify-content: center; }
.consent-card h1 { font-size: 1.7rem; }
.consent-card p { color: var(--brume); }
.privacy { font-size: 0.82rem; }
.lang-row { display: flex; align-items: center; gap: 12px; }
select, input {
  background: rgba(0, 0, 0, 0.35); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; font: inherit;
}
.btn-primary {
  background: var(--iris); color: var(--encre); font-weight: 700; font-size: 1.05rem;
  border: none; border-radius: 12px; padding: 15px; cursor: pointer;
}

/* ── Balade ── */
.walk { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.status { display: flex; align-items: center; gap: 8px; color: var(--brume); font-size: 0.9rem; }
.led { width: 10px; height: 10px; border-radius: 50%; background: #666; }
.led.on { background: var(--iris); box-shadow: 0 0 8px var(--iris); animation: pulse 2.4s infinite; }
.led.err { background: #e86a4b; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .led.on { animation: none; } }
.top-actions { display: flex; gap: 8px; }
.chip {
  background: var(--carte); color: var(--texte); border: 1px solid var(--ligne);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.chip[aria-pressed="true"] { background: rgba(79, 216, 189, 0.18); border-color: var(--iris); }

.hud {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 12px 16px; min-height: 64px;
}
.hud-1 { font-size: 1.12rem; font-weight: 650; }
.hud-2 { color: var(--ambre); font-size: 0.9rem; min-height: 1.2em; }

.video-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--ligne); background: #000; }
#video { display: block; width: 100%; max-height: 34vh; object-fit: cover; }
.video-off { padding: 30px 16px; text-align: center; color: var(--brume); }

.live-text {
  color: var(--brume); font-size: 0.95rem; min-height: 3em; max-height: 9em; overflow-y: auto;
  padding: 2px 4px;
}

.grid-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-act {
  background: var(--carte); color: var(--texte); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 15px 8px; font: inherit; font-size: 0.98rem; cursor: pointer;
  min-height: 54px;
}
.btn-act:active { background: rgba(79, 216, 189, 0.2); }

.btn-talk {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--encre), var(--abysse));
  color: var(--iris); border: 2px solid var(--iris); border-radius: 14px;
  padding: 18px; font: inherit; font-size: 1.08rem; font-weight: 650; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.btn-talk.listening { background: var(--iris); color: var(--encre); }

.tour-box, .journal-box {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px;
}
summary { cursor: pointer; color: var(--brume); }
.tour-row { display: flex; gap: 8px; margin-top: 10px; }
.tour-row input { flex: 1; min-width: 0; }
.tour-state { color: var(--ambre); font-size: 0.9rem; margin-top: 8px; min-height: 1.2em; }
.journal { margin: 10px 0 4px 1.3em; display: flex; flex-direction: column; gap: 8px; }
.journal li strong { color: var(--texte); }
.journal li { color: var(--brume); font-size: 0.9rem; }

/* ── L'Arche : échelle de bavardage + recherche mondiale ── */
.verb-row { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.verb-row label { color: var(--texte); font-size: 0.95rem; }
.verb-row strong { color: var(--iris); font-size: 1.1rem; }
.verb-row input[type="range"] { width: 100%; accent-color: var(--iris); }
.verb-hint { color: var(--brume); font-size: 0.8rem; }
.world-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.world-row input { width: 18px; height: 18px; accent-color: var(--iris); margin-top: 2px; }
.world-row em { color: var(--brume); font-style: normal; font-size: 0.8rem; }

/* ── Modes (revision interface 2026-07-24) ── */
.modes-title { color: var(--brume); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.modes-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mode-chip {
  background: rgba(0, 0, 0, 0.25); color: var(--texte); border: 1px solid var(--ligne);
  border-radius: 10px; padding: 10px 6px; font: inherit; font-size: 0.88rem; cursor: pointer;
  min-height: 44px;
}
.mode-chip.on { background: rgba(79, 216, 189, 0.22); border-color: var(--iris); color: var(--iris); font-weight: 650; }
.mode-chip.mode-blind { border-color: rgba(232, 176, 75, 0.5); }
.mode-chip.mode-blind.on { background: rgba(232, 176, 75, 0.2); border-color: var(--ambre); color: var(--ambre); }
/* mode aveugle : tout s'agrandit */
body.blind .btn-act { min-height: 68px; font-size: 1.08rem; }
body.blind .btn-talk { padding: 24px; font-size: 1.2rem; }
body.blind .chip { padding: 12px 18px; font-size: 1rem; }