/* Kaeshi, feuille de style.
   Deux contraintes commandent tout : ça doit rester lisible d'un coup d'œil
   en marchant, et supportable une demi-heure d'affilée le soir. */

:root{
  --encre:#16212e;
  --encre-doux:#5a6a7b;
  --papier:#f6f2ea;
  --papier-2:#fffdf9;
  --trait:#e0d8c9;
  --indigo:#2a4a6b;
  --indigo-clair:#e7edf4;
  --vermillon:#c0492f;
  --vert:#3d7a5a;
  --ambre:#b7791f;
  --rayon:14px;
  --ombre:0 1px 2px rgba(22,33,46,.06), 0 8px 24px -12px rgba(22,33,46,.18);
  --ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",
       "Meiryo",system-ui,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --encre:#e8e3d9;
    --encre-doux:#93a1b0;
    --papier:#131a22;
    --papier-2:#1b242e;
    --trait:#2c3945;
    --indigo:#7fa8d4;
    --indigo-clair:#1e2c3b;
    --vermillon:#e0755c;
    --vert:#6fbb92;
    --ambre:#d8a63f;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--papier);
  color:var(--encre);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
a{ color:inherit; }

/* ── Barre ─────────────────────────────────────────────── */
#barre{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
  padding-top:calc(10px + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);
}
.marque{
  font-family:var(--ja); font-size:22px; font-weight:700;
  text-decoration:none; letter-spacing:.02em; display:flex; align-items:baseline; gap:8px;
}
.marque span{
  font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--encre-doux);
}
#nav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
#nav a{
  padding:6px 11px; border-radius:99px; text-decoration:none; font-size:14px;
  color:var(--encre-doux);
}
#nav a:hover{ background:var(--indigo-clair); color:var(--encre); }
#nav a.actif{ background:var(--indigo); color:#fff; }

/* ── Trame ─────────────────────────────────────────────── */
#vue{
  max-width:880px; margin:0 auto;
  padding:22px max(14px, env(safe-area-inset-left)) 90px max(14px, env(safe-area-inset-right));
}
h1{ font-size:26px; margin:0 0 4px; letter-spacing:-.01em; }
h2{ font-size:17px; margin:30px 0 12px; letter-spacing:-.005em; }
h2:first-child{ margin-top:0; }
.chapo{ color:var(--encre-doux); margin:0 0 22px; max-width:60ch; }
.discret{ color:var(--encre-doux); font-size:14px; }
.rien{ color:var(--encre-doux); padding:26px 0; text-align:center; }

.carte{
  background:var(--papier-2); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:16px; box-shadow:var(--ombre);
}
.grille{ display:grid; gap:12px; }
.grille.deux{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grille.trois{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.rangee{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ── Boutons ───────────────────────────────────────────── */
button, .bouton{
  font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--trait);
  background:var(--papier-2); color:var(--encre); padding:9px 15px;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; transition:transform .06s ease, background .15s ease;
}
button:active, .bouton:active{ transform:translateY(1px); }
button:disabled{ opacity:.45; cursor:default; }
.primaire{ background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:600; }
.danger{ color:var(--vermillon); }
.mini{ padding:5px 10px; font-size:13px; border-radius:8px; }

/* ── Accueil ───────────────────────────────────────────── */
.dette{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:20px; margin-bottom:18px;
  background:linear-gradient(135deg, var(--indigo-clair), transparent 70%);
  border:1px solid var(--trait); border-radius:var(--rayon);
}
.dette b{ font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.dette .zero{ color:var(--vert); }

.action{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border-radius:var(--rayon);
}
.action .titre{ font-weight:650; }
.action .sous{ font-size:13.5px; color:var(--encre-doux); }
.action .corps{ flex:1; min-width:0; }
.action .compte{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:19px; color:var(--indigo);
}
.action.creux{ border-style:dashed; box-shadow:none; }
.pastille{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:grid; place-items:center; font-size:19px;
  background:var(--indigo-clair);
}

/* ── Séance ────────────────────────────────────────────── */
.scene{
  min-height:min(58vh, 460px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:14px; padding:22px 8px;
}
.etiquette{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-doux); font-weight:600;
}
.invite{ font-size:clamp(22px, 5.2vw, 34px); font-weight:600; max-width:22ch; line-height:1.3; }
.reponse-ja{ font-family:var(--ja); font-size:clamp(28px, 7vw, 46px); font-weight:600; line-height:1.35; }
.reponse-romaji{ font-size:clamp(20px, 4.6vw, 30px); font-weight:600; letter-spacing:.01em; }
.reponse-kanji{ font-family:var(--ja); font-size:clamp(19px, 4vw, 26px); color:var(--encre-doux); }
.note-item{ font-size:14px; color:var(--encre-doux); max-width:44ch; }

.jauge{
  width:100%; max-width:420px; height:4px; border-radius:3px;
  background:var(--trait); overflow:hidden;
}
.jauge i{ display:block; height:100%; background:var(--indigo); width:100%; }
.jauge.attente i{ animation:vider linear forwards; }
@keyframes vider{ from{ width:100%; } to{ width:0; } }

.avancement{
  position:sticky; top:56px; z-index:20;
  display:flex; align-items:center; gap:12px; padding:10px 0 14px;
  background:var(--papier);
}
.avancement .barre{ flex:1; height:3px; background:var(--trait); border-radius:3px; overflow:hidden; }
.avancement .barre i{ display:block; height:100%; background:var(--indigo); transition:width .3s ease; }

.notes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:520px; width:100%; }
.notes button{ flex-direction:column; gap:2px; padding:12px 6px; }
.notes .quoi{ font-weight:650; font-size:14.5px; }
.notes .quand{ font-size:11.5px; color:var(--encre-doux); font-variant-numeric:tabular-nums; }
.notes .n1{ color:var(--vermillon); }
.notes .n4{ color:var(--vert); }

.jol{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:340px; width:100%; }

/* ── Mains libres ──────────────────────────────────────── */
.volant{ text-align:center; }
.volant .invite{ font-size:clamp(26px, 6.5vw, 42px); }
.volant .reponse-romaji{ font-size:clamp(26px, 7vw, 44px); }
.tap{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px;
}
.tap button{ min-height:104px; font-size:19px; font-weight:650; border-radius:16px; }
.tap .oui{ background:color-mix(in srgb,var(--vert) 14%, var(--papier-2)); border-color:var(--vert); }
.tap .non{ background:color-mix(in srgb,var(--vermillon) 14%, var(--papier-2)); border-color:var(--vermillon); }
.etape{ font-size:13px; color:var(--encre-doux); min-height:1.4em; }

/* ── Listes ────────────────────────────────────────────── */
.ligne{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--trait);
}
.ligne:last-child{ border-bottom:0; }
.ligne .fr{ flex:1; min-width:0; }
.ligne .ja{ font-family:var(--ja); }
.ligne .romaji{ font-size:13.5px; color:var(--encre-doux); }
.liste{ background:var(--papier-2); border:1px solid var(--trait); border-radius:var(--rayon); overflow:hidden; }

.puce{
  font-size:11px; padding:2px 8px; border-radius:99px; font-weight:600;
  background:var(--indigo-clair); color:var(--indigo); white-space:nowrap;
}
.puce.chaud{ background:color-mix(in srgb,var(--vermillon) 16%, transparent); color:var(--vermillon); }
.puce.froid{ background:color-mix(in srgb,var(--vert) 16%, transparent); color:var(--vert); }

.lecon{
  display:flex; align-items:center; gap:12px; padding:12px 14px; width:100%;
  text-align:left; border-radius:var(--rayon);
}
.lecon .n{
  width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  font-weight:700; font-variant-numeric:tabular-nums; background:var(--indigo-clair); color:var(--indigo);
}
.lecon .jauge-l{ height:3px; background:var(--trait); border-radius:3px; margin-top:5px; overflow:hidden; }
.lecon .jauge-l i{ display:block; height:100%; background:var(--indigo); }

/* ── Formulaires ───────────────────────────────────────── */
label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:5px; }
input[type=text], input[type=number], select, textarea{
  font:inherit; width:100%; padding:9px 11px; border-radius:9px;
  border:1px solid var(--trait); background:var(--papier-2); color:var(--encre);
}
textarea{ min-height:180px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13.5px; }
input[type=range]{ width:100%; accent-color:var(--indigo); }
.champ{ margin-bottom:14px; }
.aide{ font-size:12.5px; color:var(--encre-doux); margin-top:5px; }
.bascule{ display:flex; align-items:center; gap:10px; padding:9px 0; }
.bascule input{ width:20px; height:20px; accent-color:var(--indigo); flex:none; }
.bascule label{ margin:0; font-weight:500; }

/* ── Suivi ─────────────────────────────────────────────── */
.stat{ text-align:center; padding:14px 10px; }
.stat b{ display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.stat span{ font-size:12.5px; color:var(--encre-doux); }
.histo{ display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:6px; }
.histo div{ flex:1; background:var(--indigo); border-radius:3px 3px 0 0; min-height:2px; opacity:.85; }
.histo div.aujourdhui{ background:var(--vermillon); opacity:1; }
.axe{ display:flex; justify-content:space-between; font-size:11px; color:var(--encre-doux); margin-top:5px; }

/* ── Souffle (messages fugaces) ────────────────────────── */
#souffle{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:80;
  background:var(--encre); color:var(--papier);
  padding:10px 18px; border-radius:99px; font-size:14px; box-shadow:var(--ombre);
  max-width:min(92vw,460px); text-align:center;
}

@media (max-width:600px){
  #nav a{ padding:6px 9px; font-size:13px; }
  .notes{ grid-template-columns:repeat(2,1fr); }
  #vue{ padding-top:16px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}