:root {
  --fond: #0d0f14;
  --carte: #181b23;
  --texte: #f4f5f7;
  --doux: #9aa1ad;
  --accent: #f2c14e;
  --rouge: #e5534b;
  --vert: #3fb950;
  --taille: 1.6rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte);
  font-family: system-ui, "Noto Sans KR", "Noto Sans", sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* Accueil */
#accueil { max-width: 32rem; margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) 1rem 2rem;
  display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }
h1 { margin: 1rem 0 0; font-size: 2rem; }
.sous { margin: 0 0 1rem; color: var(--doux); }
.sens { display: flex; flex-direction: column; gap: .75rem; }
.sens button { text-align: left; background: var(--carte); border: 2px solid transparent; border-radius: 14px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; cursor: pointer; }
.sens button[aria-checked="true"] { border-color: var(--accent); }
.sens .grand { font-size: 1.35rem; font-weight: 600; }
.sens .petit { color: var(--doux); font-size: .95rem; }
.principal { margin-top: .5rem; background: var(--accent); color: #1a1405; border: 0; border-radius: 14px;
  padding: 1.1rem; font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.principal:disabled { opacity: .5; }
details { background: var(--carte); border-radius: 14px; padding: .8rem 1rem; }
summary { cursor: pointer; color: var(--doux); }
label { display: flex; flex-direction: column; gap: .35rem; margin-top: .9rem; color: var(--doux); font-size: .9rem; }
input, textarea { font: inherit; font-size: 1rem; color: var(--texte); background: var(--fond);
  border: 1px solid #2c313c; border-radius: 10px; padding: .6rem .7rem; }
.message { color: var(--rouge); min-height: 1.2em; }

/* Direct */
#direct { position: fixed; inset: 0; display: flex; flex-direction: column; }
.barre { display: flex; align-items: center; gap: .5rem; padding: max(.5rem, env(safe-area-inset-top)) .75rem .5rem;
  background: var(--carte); }
.barre button { background: transparent; border: 1px solid #2c313c; border-radius: 10px; padding: .4rem .7rem; }
.barre .arreter { border-color: var(--rouge); color: var(--rouge); }
.espace { flex: 1; }
.etat { width: .8rem; height: .8rem; border-radius: 50%; background: var(--doux); flex: none; }
.etat.ecoute { background: var(--vert); animation: pulse 1.6s infinite; }
.etat.erreur { background: var(--rouge); }
@keyframes pulse { 50% { opacity: .35; } }
.sens-actif { color: var(--doux); font-size: .9rem; white-space: nowrap; }
.fil { flex: 1; overflow-y: auto; padding: 1rem 1rem 3rem; display: flex; flex-direction: column; gap: 1.1rem;
  font-size: var(--taille); overscroll-behavior: contain; }
.replique { display: flex; flex-direction: column; gap: .3rem; }
.nom { align-self: flex-start; font-size: .55em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: .15em .6em; border-radius: 999px; background: currentColor; cursor: pointer; border: 0; }
.nom span { color: #0d0f14; }
.phrase .trad { line-height: 1.25; }
.phrase .trad.attente { color: var(--doux); }
.phrase .orig { color: var(--doux); font-size: .55em; line-height: 1.3; margin-top: .1em; }
.partiel { color: var(--doux); font-size: .55em; font-style: italic; }
.info { color: var(--doux); font-size: .5em; text-align: center; }
.aide { margin: 0; padding: .4rem 1rem max(.4rem, env(safe-area-inset-bottom)); color: var(--doux);
  font-size: .8rem; text-align: center; }
.retour { position: absolute; right: 1rem; bottom: 3rem; background: var(--accent); color: #1a1405; border: 0;
  border-radius: 999px; padding: .6rem 1rem; font-weight: 700; box-shadow: 0 4px 16px #0008; }
.situations { display: flex; gap: .5rem; }
.situations button { flex: 1; background: var(--carte); border: 2px solid transparent; border-radius: 999px;
  padding: .7rem .4rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.situations button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.note { margin: .6rem 0 0; color: var(--doux); font-size: .85rem; }
.raconter { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.raconter button { flex: none; background: var(--fond); border: 2px solid var(--accent); color: var(--accent);
  border-radius: 999px; padding: .6rem 1rem; font-weight: 700; cursor: pointer; }
.raconter button.enregistre { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.raconter button:disabled { opacity: .6; }
.raconter .note { margin: 0; }
.recit { margin-top: .5rem; padding: .5rem .8rem; background: var(--fond); }
.recit p { margin: .5rem 0 0; color: var(--doux); font-size: .9rem; white-space: pre-wrap; }
.voix { border: 1px solid #2c313c; border-radius: 12px; margin: 1rem 0 0; padding: .4rem .9rem .9rem; }
.voix legend { color: var(--doux); padding: 0 .3rem; }
#liste-voix { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
#liste-voix li { display: flex; align-items: center; gap: .5rem; background: var(--fond); border-radius: 10px; padding: .35rem .5rem; }
#liste-voix label { flex: 1; flex-direction: row; align-items: center; gap: .6rem; margin: 0; color: var(--texte); font-size: 1rem; }
#liste-voix input[type=checkbox] { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); }
#liste-voix button { background: transparent; border: 1px solid #2c313c; border-radius: 8px; padding: .3rem .55rem; cursor: pointer; }
.secondaire { background: var(--fond); border: 2px solid var(--accent); color: var(--accent); border-radius: 999px;
  padding: .55rem 1rem; font-weight: 700; cursor: pointer; }
.secondaire.enregistre { background: var(--rouge); border-color: var(--rouge); color: #fff; }