/* Awa · Ma porte. Indigo = marque et micro, vert = garder / fini, ambre = attention. */
:root {
  --brand: #3730a3; --brand-2: #4f46e5; --brand-soft: #eef0ff; --ok: #15803d; --ok-soft: #e7f6ec; --warn: #b45309;
  --ink: #0f172a; --muted: #64748b; --line: #e3e6f0; --bg: #f6f7fc; --card: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button { -webkit-tap-highlight-color: transparent; }
svg { width: 1em; height: 1em; }

/* en-tête */
.bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px 22px; padding-top: max(16px, env(safe-area-inset-top));
  background: linear-gradient(135deg, #312e81, #4f46e5); color: #fff; border-radius: 0 0 22px 22px; }
.logo { height: 20px; width: auto; display: block; }
.sep { width: 1px; height: 20px; background: rgba(255,255,255,.35); }
.sub { font-size: 17px; opacity: .92; }

/* progression */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; margin: 14px auto 0; padding: 0 20px; }
.st { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.st i { display: block; height: 6px; border-radius: 3px; background: var(--line); margin-bottom: 6px; overflow: hidden; position: relative; }
.st i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--brand-2); border-radius: 3px; transition: width .45s ease; }
.st.done i::after { width: 100%; background: var(--ok); }
.st.done { color: var(--ok); }
.st.now i::after { width: 50%; }
.st.now { color: var(--brand); }

main { max-width: 520px; margin: 0 auto; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); }
.screen { display: none; animation: fade .25s ease; }
.screen.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
h1 { font-size: 26px; line-height: 1.18; margin: 6px 0 10px; letter-spacing: -.3px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.hidden { display: none !important; }
.warn { color: var(--warn); font-weight: 600; }

/* boutons */
.btn { display: block; width: 100%; margin-top: 16px; padding: 16px; border: 0; border-radius: 16px; font: inherit;
  font-weight: 700; color: #fff; background: var(--brand); cursor: pointer; }
.btn.primary { background: linear-gradient(135deg, #3730a3, #4f46e5); box-shadow: 0 8px 20px rgba(79,70,229,.25); }
.btn.consent { background: var(--ok); }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid #c7c9f5; }
.btn:disabled { opacity: .4; }

/* accueil */
.hero { width: 76px; height: 76px; margin: 8px auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-2); font-size: 38px; box-shadow: 0 0 0 10px rgba(79,70,229,.06); }
.hero.ok { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 10px rgba(21,128,61,.06); }
.badge { display: flex; width: max-content; align-items: center; gap: 8px; margin: 4px auto 18px; padding: 8px 14px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--brand); font-size: 15px; }
.badge svg { font-size: 18px; }
.plan { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.plan li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
.plan li + li { border-top: 1px solid var(--line); }
.plan b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft);
  color: var(--brand); font-size: 15px; }
.plan strong { display: block; font-size: 16px; }
.plan strong { line-height: 1.3; margin-bottom: 3px; }
.plan span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }
.fine { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 14px; text-align: center; }

/* position */
.radar { position: relative; width: 170px; height: 170px; margin: 26px auto 18px; display: grid; place-items: center; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(79,70,229,.35); animation: ping 2.4s infinite ease-out; opacity: 0; }
.radar span:nth-child(2) { animation-delay: .8s; } .radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ping { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.radar svg { font-size: 56px; color: var(--brand-2); filter: drop-shadow(0 6px 10px rgba(79,70,229,.3)); position: relative; }
.radar.found span { animation: none; opacity: 0; }
.radar.found svg { color: var(--ok); }
.pos-titre { font-size: 19px; font-weight: 700; }

/* questions */
.scene { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 16px; font-size: 16px; color: #334155; }
.scene-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft);
  color: var(--brand-2); font-size: 22px; }
.chip { display: inline-block; margin: 6px 0; padding: 4px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand);
  font-weight: 800; font-size: 18px; }


/* micro */
.rec-ui { text-align: center; margin-top: 18px; }
.timer { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.mic { --lvl: 0; position: relative; width: 132px; height: 132px; margin: 14px auto 10px; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: radial-gradient(circle at 35% 30%, #6366f1, #3730a3 70%);
  box-shadow: 0 14px 30px rgba(55,48,163,.35), 0 0 0 calc(10px + var(--lvl) * 26px) rgba(79,70,229,.13);
  transition: box-shadow .08s linear, transform .15s; }
.mic:active { transform: scale(.96); }
.mic svg { font-size: 54px; display: none; }
.mic .ic-stop, .mic .ic-pause { font-size: 44px; }
.mic .ic-play { margin-left: 8px; }
.mic.listen:not(.listening) .ic-play, .mic.listening .ic-pause,
.mic:not(.listen):not(.listening):not(.recording):not(.counting) .ic-mic, .mic.recording:not(.listening) .ic-stop { display: block; }
/* micro = rouge (la consigne reste bleue) */
.mic:not(.listen):not(.listening) { background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 70%);
  box-shadow: 0 14px 30px rgba(220,38,38,.33), 0 0 0 calc(10px + var(--lvl) * 26px) rgba(220,38,38,.13); }
.mic.recording::before { border-color: rgba(220,38,38,.45) !important; }
/* compte à rebours 3 2 1 */
.mic .count { display: none; font-size: 64px; font-weight: 800; line-height: 1; }
.mic.counting .count { display: block; animation: tick 1s ease-out; }
@keyframes tick { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } }
/* consigne : anneau de progression autour du bouton */
.mic.listening::after { content: ""; position: absolute; inset: -12px; border-radius: 50%;
  background: conic-gradient(var(--brand-2) calc(var(--p, 0) * 1turn), #dfe1fb 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.relisten { display: block; margin: 6px auto 0; padding: 8px 12px; border: 0; background: none; color: var(--brand); font: inherit;
  font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mic.recording::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(79,70,229,.45);
  animation: ping 1.6s infinite ease-out; }
.mic-label { font-weight: 700; color: var(--brand); }
.mic-label.red { color: #b91c1c; }
.hint { color: var(--muted); font-size: 13.5px; margin-top: 14px; }
.after { margin-top: 6px; }
audio { width: 100%; margin-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .btn { margin-top: 12px; }

/* envoi / fin */
.progress { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 20px 0 12px; }
#envoi-barre { height: 100%; width: 0; background: var(--brand-2); transition: width .2s; }
.code { font-size: 36px; font-weight: 800; letter-spacing: 3px; text-align: center; padding: 18px; margin: 10px 0 16px;
  background: #fff; border: 2px dashed var(--ok); border-radius: 16px; color: var(--ok); user-select: all; }

/* administration */
.wide { max-width: 1100px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 14px 0; font-size: 15px; }
h2 { font-size: 16px; margin: 20px 0 8px; color: var(--muted); font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat b { display: block; font-size: 26px; }
.stat b.list { font-size: 16px; line-height: 1.5; }
.mini { display: inline-block; width: auto; margin: 0 6px 0 0; padding: 6px 10px; font-size: 14px; border-radius: 8px; }
input[type=password], input[type=number], input[type=text] { font: inherit; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line); width: 100%; }