/* アルゴ劇場 — un cahier japonais, rond et doux.
   Mêmes encres (墨, 朱, 藍, 抹茶) + un rose 桜 pour la mascotte. */
:root {
  --paper: #fde4ee; --sheet: #fffafc; --ink: #3a2230; --ink-2: #5c3d4c; --muted: #9a7484;
  --line: #f1c6d6; --dot: #f9cbdc; --shu: #c8381f; --shu-soft: #f6ddd3; --ai: #24366b; --ai-soft: #dfe3ee;
  --matcha: #5d7a3a; --matcha-soft: #e2ead2; --kin: #b08a2e; --kin-soft: #f5e8c4;
  --sakura: #f38ba8; --sakura-soft: #ffe0ea;
  --poil: #9b6b4a; --creme: #f3dfc4;
  --press: 3px 3px 0 var(--ink); --press-sm: 2px 2px 0 var(--ink);
  --hand: "Klee One", "Hiragino Mincho ProN", serif;
  --jp: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
  --ui: "Zen Kaku Gothic New", "Hiragino Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #2a1622; --sheet: #36202d; --ink: #fbe6ef; --ink-2: #e6c3d3; --muted: #b48ea0;
    --line: #5a3247; --dot: #3a1f2f; --shu: #e2573a; --shu-soft: #3d1f17; --ai: #9db0e6; --ai-soft: #222a40;
    --matcha: #9cbf6e; --matcha-soft: #263020; --kin: #d6b25a; --kin-soft: #3a3020;
    --sakura: #f0a3b6; --sakura-soft: #3d2229; --poil: #b88663; --creme: #e8d2b4;
    --press: 3px 3px 0 #12070d; --press-sm: 2px 2px 0 #12070d;
  }
}
:root[data-theme="dark"] {
  --paper: #2a1622; --sheet: #36202d; --ink: #fbe6ef; --ink-2: #e6c3d3; --muted: #b48ea0;
  --line: #5a3247; --dot: #3a1f2f; --shu: #e2573a; --shu-soft: #3d1f17; --ai: #9db0e6; --ai-soft: #222a40;
  --matcha: #9cbf6e; --matcha-soft: #263020; --kin: #d6b25a; --kin-soft: #3a3020;
  --sakura: #f0a3b6; --sakura-soft: #3d2229; --poil: #b88663; --creme: #e8d2b4;
  --press: 3px 3px 0 #12070d; --press-sm: 2px 2px 0 #12070d;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; color: var(--ink); font: 15px/1.6 var(--ui);
  background: radial-gradient(var(--dot) 2.2px, transparent 2.6px) 0 0 / 26px 26px, radial-gradient(var(--dot) 2.2px, transparent 2.6px) 13px 13px / 26px 26px, var(--paper); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.jp { font-family: var(--jp); }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
kbd { font: 600 11px var(--ui); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }

/* — un seul écran : tout est visible en même temps — */
.ecran { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; max-width: 1600px; margin: 0 auto; }
.haut { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
h1 { font: 700 1.35rem/1 var(--jp); margin: 0; }
.outils { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }

/* — cartes — */
.carte { background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--press); padding: 10px 12px; min-height: 0; min-width: 0; }
.titre-carte { font: 700 .68rem var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--shu); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.titre-carte .jp { font-size: .9rem; letter-spacing: .02em; text-transform: none; color: var(--ink); }

/* — choix de l'algorithme — */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 2px solid var(--ink); background: var(--sheet); border-radius: 999px; padding: 3px 12px; box-shadow: var(--press-sm); display: flex; gap: 6px; align-items: baseline; transition: transform .12s; }
.chip:hover { transform: translateY(-2px); }
.chip .jp { font-weight: 700; }
.chip .cat { font: 700 .62rem var(--ui); color: var(--muted); }
.chip .etoiles { color: var(--kin); font-size: .75rem; }
.chip.actif { background: var(--ink); color: var(--sheet); }
.chip.actif .cat { color: var(--sakura); }

.intro { margin: 0; background: var(--kin-soft); border-radius: 12px; padding: 5px 12px; font-size: .86rem; line-height: 1.45; }
.intro b { color: var(--shu); font-family: var(--jp); margin-right: 6px; }
.intro .fr { color: var(--muted); margin-right: 8px; }

/* — scène : code | ce qui bouge | suivi — */
.scene { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .85fr); min-height: 0; }
.milieu, .cote { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.code-carte { overflow: auto; }
.stage-carte { flex: 1; display: flex; flex-direction: column; }
.trace-carte { flex: 1; display: flex; flex-direction: column; }
@media (max-width: 1100px) {
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .cote { grid-column: 1 / -1; flex-direction: row; }
  .cote > .carte { flex: 1; max-height: 24vh; }
}
@media (max-width: 760px), (max-height: 560px) {
  /* téléphone : impossible de tout faire tenir, on empile et seule la barre du bas reste fixe */
  .ecran { height: auto; min-height: 100dvh; }
  .scene { grid-template-columns: minmax(0, 1fr); }
  .milieu { order: -1; }
  .cote { flex-direction: column; }
  .cote > .carte { max-height: none; }
  .stage-carte { min-height: 230px; }
  .commandes { position: sticky; bottom: 8px; }
}

/* — le code — */
.code { list-style: none; margin: 0; padding: 0; font: 500 clamp(.78rem, 1.8vh, 1.12rem)/1.45 var(--hand); }
.code li { display: grid; grid-template-columns: 2.2em 1.2em 1fr auto; align-items: center; border-radius: 8px; padding: 1px 6px 1px 0; transition: background .25s; }
.code .num { color: var(--muted); font: .75rem var(--mono); text-align: right; padding-right: 6px; }
.code .fleche { color: var(--shu); opacity: 0; transform: translateX(-6px); transition: .25s; font-size: .8rem; }
.code .txt { white-space: pre; }
.code .fois { font: 700 .68rem var(--maru); color: var(--ai); background: var(--ai-soft); border-radius: 999px; padding: 0 7px; margin-left: 8px; opacity: 0; transition: opacity .2s; }
.code li.vu .fois { opacity: 1; }
.code li.vu { background: color-mix(in srgb, var(--ai-soft) calc(var(--chaleur, 0) * 100%), transparent); }
.code li.cur { background: var(--shu-soft); box-shadow: inset 3px 0 0 var(--shu); }
.code li.cur .fleche { opacity: 1; transform: none; animation: hop .9s ease-in-out infinite; }
.code li.prochain { background: var(--kin-soft); box-shadow: inset 3px 0 0 var(--kin); }
.code li.prochain .fleche { opacity: 1; transform: none; color: var(--kin); }
.code .k { color: var(--ai); font-weight: 600; }
.code .t { color: var(--matcha); }
.code .fl { color: var(--shu); font-weight: 600; }
.code .com { color: var(--muted); }
@keyframes hop { 50% { transform: translateX(3px); } }

/* — la loutre et sa bulle — */
.prof { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.loutre { width: 64px; height: 64px; transform-origin: 50% 90%; }
.l-poil { fill: var(--poil); stroke: var(--ink); stroke-width: 2; }
.l-creme { fill: var(--creme); }
.l-joue { fill: var(--sakura); opacity: .65; }
.l-noir { fill: #1d1b19; }
.l-trait { fill: none; stroke: #1d1b19; stroke-width: 2; stroke-linecap: round; }
.l-trait.fin { stroke-width: 1.2; opacity: .6; }
.l-yeux { animation: cligne 4.5s infinite; transform-origin: 50% 52%; }
@keyframes cligne { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.loutre.parle { animation: parle .35s ease-out; }
.loutre.joie { animation: joie .6s cubic-bezier(.3, 1.6, .5, 1); }
.loutre.oups { animation: oups .45s; }
@keyframes parle { 40% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes joie { 30% { transform: translateY(-14px) scale(1.06); } 60% { transform: translateY(0) scale(.97, 1.03); } }
@keyframes oups { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }

.bulle { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; min-height: 64px; font-size: .92rem; }
.bulle::before { content: ""; position: absolute; left: -9px; top: 20px; width: 14px; height: 14px; background: var(--paper); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.bulle .ligne-no { font: 700 .7rem var(--maru); background: var(--ink); color: var(--sheet); border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.bulle .q { font-weight: 700; margin-bottom: 8px; display: block; }
.bulle .reps { display: flex; flex-wrap: wrap; gap: 6px; }
.rep { border: 2px solid var(--ink); border-radius: 999px; background: var(--sheet); padding: 4px 14px; box-shadow: var(--press-sm); font-family: var(--maru); font-weight: 700; transition: transform .1s; }
.rep:hover:not(:disabled) { transform: translateY(-2px); background: var(--kin-soft); }
.rep:disabled { cursor: default; opacity: .55; }
.rep.bon { background: var(--matcha-soft); border-color: var(--matcha); opacity: 1; }
.rep.faux { background: var(--shu-soft); border-color: var(--shu); opacity: 1; }
.bulle .verdict { margin-top: 8px; font-weight: 700; }
.bulle .verdict.ok { color: var(--matcha); }
.bulle .verdict.ko { color: var(--shu); }
.suite { margin-top: 8px; border: 0; background: var(--ink); color: var(--sheet); border-radius: 999px; padding: 4px 14px; font-weight: 700; }
.hanamaru { display: inline-block; font: 700 1.1rem var(--jp); color: var(--shu); border: 2.5px solid var(--shu); border-radius: 50%; width: 2.6em; height: 2.6em; line-height: 2.45em; text-align: center; transform: rotate(-12deg); margin-right: 10px; vertical-align: middle; animation: tampon .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tampon { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } }

/* — variables — */
.vars { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.boite { position: relative; min-width: 70px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); padding: 12px 10px 3px; text-align: center; }
.boite .nom { position: absolute; top: -10px; left: 8px; background: var(--ink); color: var(--sheet); font: 700 .72rem var(--mono); border-radius: 999px; padding: 1px 8px; }
.boite .val { font: 700 1.35rem/1.1 var(--maru); display: inline-block; }
.boite .val.vide { color: var(--muted); font-weight: 500; }
.boite .avant { display: block; font: .7rem var(--mono); color: var(--muted); text-decoration: line-through; min-height: 1em; }
.boite.change { background: var(--sakura-soft); border-color: var(--sakura); }
.boite.change .val { animation: pop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* — le tableau en barres — */
.cible { margin-left: auto; font: 700 .8rem var(--maru); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--kin-soft); border-radius: 999px; padding: 1px 10px; }
.cible:empty { display: none; }
.stage { display: flex; gap: 6px; align-items: stretch; flex: 1; min-height: 0; }
.slot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.slot .colonne { flex: 1; min-height: 60px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.slot .v { font: 700 .9rem var(--maru); margin-bottom: 2px; transition: color .2s; }
.bar { width: 100%; max-width: 46px; border: 2px solid var(--ink); border-radius: 10px 10px 5px 5px; background: var(--ai-soft); transition: height .45s cubic-bezier(.3, 1.4, .5, 1), background .25s, opacity .25s, transform .25s; }
.slot .idx { font: .72rem var(--mono); color: var(--muted); margin-top: 3px; }
.slot .drapeaux { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; margin-top: 3px; }
.drapeau { font: 700 .78rem/1.35 var(--mono); color: #fff; border-radius: 999px; padding: 1px 9px; box-shadow: 1px 1px 0 var(--ink); position: relative; animation: pop .3s; }
.drapeau::before { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top: 0; border-bottom: 5px solid; border-bottom-color: inherit; }
.slot.regarde .bar { background: var(--kin-soft); transform: translateY(-4px); }
.slot.compare .bar { background: var(--kin); }
.slot.ecrit .bar { background: var(--sakura); animation: tremble .4s; }
.slot.fixe .bar { background: var(--matcha-soft); border-color: var(--matcha); }
.slot.fixe .v::after { content: " ★"; color: var(--matcha); font-size: .7rem; }
.slot.hors .bar { opacity: .25; }
.slot.hors .v { color: var(--muted); }
.slot.trouve .bar { background: var(--matcha); animation: joie .6s; }
.slot.fantome { flex: .55; }
.slot.fantome .colonne, .slot.fantome .idx { opacity: 0; transition: opacity .2s; }
.slot.fantome .bar { height: 30px; border-style: dashed; background: transparent; }
.slot.fantome.actif .colonne, .slot.fantome.actif .idx { opacity: .6; }
@keyframes tremble { 25% { transform: translateY(-6px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(3deg); } }

/* — compteurs — */
.compteurs { display: grid; gap: 5px; }
.cpt { display: grid; grid-template-columns: 6.5em 2.2em 1fr; gap: 8px; align-items: center; font-size: .8rem; }
.cpt b { font: 700 1.1rem var(--maru); text-align: right; }
.cpt .jauge { height: 10px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--ink); overflow: hidden; }
.cpt .jauge i { display: block; height: 100%; border-radius: 999px; transition: width .35s; }
.courbe { width: 100%; height: 34px; display: block; }
.courbe .tout { fill: none; stroke: var(--line); stroke-width: 2; }
.courbe .fait { fill: none; stroke: var(--shu); stroke-width: 2.5; stroke-linejoin: round; }
.courbe circle { fill: var(--shu); }

/* — commandes — */
.commandes { z-index: 5; background: var(--sheet); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--press); padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.modes { display: flex; background: var(--sheet); border-radius: 999px; padding: 3px; border: 2px solid var(--ink); }
.mode { border: 0; background: none; border-radius: 999px; padding: 2px 12px; font-size: .85rem; }
.mode.actif { background: var(--ink); color: var(--sheet); }
.rond { border: 2px solid var(--ink); background: var(--sheet); border-radius: 999px; width: 40px; height: 40px; box-shadow: var(--press-sm); }
.suivant { border: 2px solid var(--ink); background: var(--shu); color: #fff; border-radius: 999px; height: 44px; padding: 0 22px; font: 700 1rem var(--maru); box-shadow: var(--press-sm); }
.suivant:hover:not(:disabled) { filter: brightness(1.08); }
.suivant:disabled { background: var(--line); color: var(--muted); cursor: default; }
.rond:active, .suivant:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.avance { flex: 1; min-width: 140px; display: flex; gap: 10px; align-items: center; }
.barre-prog { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.barre-prog i { display: block; height: 100%; background: var(--sakura); border-radius: 999px; transition: width .3s; }
.etape { font: 700 .78rem var(--maru); color: var(--muted); white-space: nowrap; }
.aide { font-size: .75rem; }
@media (max-width: 760px) { .commandes { border-radius: 20px; } .aide { display: none; } }

/* — fenêtres (données, exercices) — */
.fenetre { border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); background: var(--sheet); color: var(--ink); padding: 14px 16px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); }
.fenetre.large { width: min(820px, calc(100vw - 32px)); }
.fenetre::backdrop { background: rgb(29 27 25 / .45); }
.fenetre-haut { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.fermer { border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; width: 32px; height: 32px; }

/* — données — */
.form-d { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-d label { font: 700 .82rem var(--mono); }
.form-d input { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); padding: 4px 10px; min-width: 0; }
.form-d input.a { flex: 1; min-width: 160px; }
.form-d input.x { width: 70px; }
.petit { border: 2px solid var(--ink); background: var(--sheet); border-radius: 999px; padding: 3px 12px; box-shadow: var(--press-sm); font-size: .85rem; }
.petit.plein { background: var(--ink); color: var(--sheet); }
.erreur { color: var(--shu); font-size: .85rem; margin: 6px 0 0; }

/* — exercices — */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.onglets button { border: 2px solid var(--ink); background: var(--paper); border-radius: 12px 12px 4px 4px; padding: 5px 12px; font-size: .86rem; }
.onglets button.actif { background: var(--ink); color: var(--sheet); }
.onglet { display: none; }
.onglet.actif { display: block; }
.consigne { color: var(--ink-2); font-size: .9rem; margin: 0 0 10px; }

table.trace { border-collapse: separate; border-spacing: 0; width: 100%; font: .82rem var(--maru); }
.trace-boite { overflow: auto; flex: 1; min-height: 0; }
.trace th { position: sticky; top: 0; font: 700 .72rem var(--mono); background: var(--ink); color: var(--sheet); padding: 5px 8px; text-align: center; }
.trace th:first-child { border-radius: 10px 0 0 0; }
.trace th:last-child { border-radius: 0 10px 0 0; }
.trace td { border-bottom: 1px dashed var(--line); padding: 3px 6px; white-space: nowrap; text-align: center; }
.trace tr.neuf td { background: var(--sakura-soft); animation: glisse .4s ease-out; }
.trace tr.vide td { color: var(--muted); font-style: italic; }
.trace tr.live td { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--kin-soft) 70%, transparent) 6px 12px); color: var(--ink-2); border-bottom: 2px dashed var(--kin); }
.trace tr.live td:first-child { box-shadow: inset 3px 0 0 var(--kin); }
.trace td.chg { font-weight: 700; color: var(--shu); animation: pop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes glisse { from { transform: translateY(-8px); opacity: 0; } }

.exo { border: 2px dashed var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.exo h4 { margin: 0 0 8px; font: 700 .9rem var(--ui); }
.exo .code { background: var(--paper); border-radius: 10px; padding: 6px 0; margin-bottom: 10px; }
.trou { display: inline-block; min-width: 3.2em; text-align: center; background: var(--kin-soft); border: 2px dashed var(--kin); border-radius: 8px; padding: 0 8px; font-family: var(--maru); font-weight: 700; color: var(--kin); }
.trou.rempli { border-style: solid; color: var(--ink); }
.exo .reps { display: flex; flex-wrap: wrap; gap: 6px; }
.exo .expl { margin-top: 8px; font-size: .9rem; background: var(--paper); border-radius: 10px; padding: 8px 10px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* — langue — */
.langues .mode { font: 700 .78rem var(--maru); padding: 2px 10px; }

/* — confettis — */
#confettis { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* — les amies : elles glissent depuis le bord, parlent, puis repartent — */
.amie { position: fixed; bottom: 70px; z-index: 50; display: flex; align-items: flex-end; gap: 4px; cursor: pointer;
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .4s; opacity: 0; }
.amie.droite { right: 6px; flex-direction: row; transform: translateX(110%) rotate(8deg); }
.amie.gauche { left: 6px; flex-direction: row-reverse; transform: translateX(-110%) rotate(-8deg); }
.amie.la { opacity: 1; transform: none; }
.amie.part { opacity: 0; transition-timing-function: ease-in; }
.amie svg { width: 128px; height: 172px; filter: drop-shadow(3px 3px 0 rgb(58 34 48 / .25)); }
.amie-bulle { max-width: 250px; margin-bottom: 96px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--press-sm);
  padding: 8px 12px; font: 700 .9rem/1.45 var(--maru); position: relative; animation: pop .4s .25s both cubic-bezier(.3, 1.8, .5, 1); }
.amie-bulle b { display: block; font-size: .7rem; color: var(--sakura); letter-spacing: .08em; }
.amie.droite .amie-bulle::after, .amie.gauche .amie-bulle::after { content: ""; position: absolute; bottom: 14px; width: 12px; height: 12px; background: var(--sheet); border: 2px solid var(--ink); border-width: 0 2px 2px 0; }
.amie.droite .amie-bulle::after { right: -8px; transform: rotate(-45deg); }
.amie.gauche .amie-bulle::after { left: -8px; transform: rotate(135deg); }
/* frames (pas de transition : de vraies images successives) */
.amie .bras { transform-origin: 90px 104px; }
.amie .oeil-clin, .amie .bouche-o { display: none; }
.amie[data-f="1"] .corps { transform: translateY(-3px); }
.amie[data-f="1"] .bras { transform: rotate(-22deg); }
.amie[data-f="1"] .bouche-f { display: none; }
.amie[data-f="1"] .bouche-o { display: inline; }
.amie[data-f="2"] .bras { transform: rotate(10deg); }
.amie[data-f="2"] .oeil-ouvert { display: none; }
.amie[data-f="2"] .oeil-clin { display: inline; }
@media (max-width: 760px) { .amie svg { width: 92px; height: 124px; } .amie-bulle { max-width: 190px; margin-bottom: 64px; font-size: .82rem; } .amie { bottom: 120px; } }

/* — icônes : trait encre arrondi, remplissage pastel — */
.ico { width: 1.2em; height: 1.2em; vertical-align: -.24em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mode .ico, .petit .ico { margin-right: 4px; }
.suivant { display: inline-flex; align-items: center; gap: 6px; }
.suivant .ico { width: 1.05em; height: 1.05em; }
.rond, .fermer { display: inline-grid; place-items: center; padding: 0; }
.rond .ico { width: 18px; height: 18px; }
.fermer .ico { width: 16px; height: 16px; }
.mode.actif .ico { --f: rgb(255 255 255 / .25); }
.chip .etoiles .ico { width: .95em; height: .95em; vertical-align: -.12em; margin-left: -1px; }
.amie-bulle .ico { width: 1.25em; height: 1.25em; margin-left: 3px; }
.verdict .ico { margin: 0 2px; }
:root[data-theme="dark"] .ico, .ico { color: inherit; }

/* — panneau d'exercices : deux tiers droits, sans voile, le programme reste visible à gauche — */
.fenetre.panneau { position: fixed; inset: 10px 14px 10px auto; margin: 0; width: calc(66.6vw - 20px); max-width: none; height: calc(100dvh - 20px); max-height: none; overflow: auto; z-index: 40; animation: glisse-g .3s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes glisse-g { from { transform: translateX(40px); opacity: 0; } }
.exos-donnees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--kin-soft); border-radius: 12px; padding: 6px 12px; margin-bottom: 12px; font-size: .88rem; }
.exos-donnees code { font: 700 .9rem var(--mono); background: var(--sheet); border-radius: 8px; padding: 1px 8px; }
.exos-donnees .petit { margin-left: auto; }
@media (max-width: 760px) { .fenetre.panneau { width: calc(100vw - 20px); } }

/* — catégories, vues, 流れ図 — */
.cats .mode { font-weight: 700; }
.vues { margin-left: auto; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.vues .mode { padding: 1px 10px; font: 700 .76rem var(--jp); color: var(--ink); }
.vues .mode.actif { color: var(--sheet); }
.intro .ordre { display: inline-block; font: 700 .72rem var(--mono); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 8px; margin-right: 8px; }
.code .com { color: var(--muted); font-size: .85em; }
.code-carte { display: flex; flex-direction: column; }
.flux { overflow: auto; flex: 1; min-height: 0; }
.flux svg.fc { display: block; height: auto; margin: 0 auto; }
.fc .fc-forme { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; transition: fill .25s, stroke .25s; }
.fc .fc-trait { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.fc .fc-pointe { fill: var(--ink); }
.fc text { font: 500 12.5px var(--ui); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.fc .fc-cond { font-size: 11.5px; }
.fc .fc-oui { font-size: 10.5px; fill: var(--muted); text-anchor: start; }
.fc .fc-titre { font: 700 13px var(--mono); fill: var(--shu); }
.fc .fc-no circle { fill: var(--paper); stroke: var(--muted); stroke-width: 1; }
.fc .fc-no text { font: 700 10px var(--mono); fill: var(--muted); }
.fc .fn.vu .fc-forme { fill: color-mix(in srgb, var(--ai-soft) 60%, var(--sheet)); }
.fc .fn.cur .fc-forme { fill: var(--shu-soft); stroke: var(--shu); stroke-width: 2.6; }
.fc .fn.cur .fc-no circle { fill: var(--shu); stroke: var(--shu); }
.fc .fn.cur .fc-no text { fill: #fff; }
.fc .fn.prochain .fc-forme { fill: var(--kin-soft); stroke: var(--kin); stroke-width: 2.6; }
.fc .fn.prochain .fc-no circle { fill: var(--kin); stroke: var(--kin); }
.fc .fn.prochain .fc-no text { fill: #fff; }

/* — cases vides, 番兵, partie triée — */
.slot.vide .bar { border-style: dashed; background: transparent; }
.slot.garde .idx::after { content: " 番兵"; color: var(--kin); font-weight: 700; }
.slot.garde .bar { border-color: var(--kin); }
.slot.partiel .bar { background: color-mix(in srgb, var(--matcha-soft) 70%, var(--sheet)); border-style: dashed; border-color: var(--matcha); }

/* — liste chaînée : la chaîne Top → [D|P] → … et les tableaux en mémoire — */
.stage.visu-liste { display: block; overflow: auto; }
.lst { display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: center; }
.lst-chaine, .lst-hors { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; row-gap: 10px; }
.lst-hors:empty { display: none; }
.lst-legende { width: 100%; font-size: .75rem; color: var(--muted); }
.lst-top { display: flex; flex-direction: column; align-items: center; font: 700 .72rem var(--mono); margin-top: 16px; }
.lst-top b { border: 2px solid var(--ink); border-radius: 8px; padding: 2px 10px; font: 700 1rem var(--maru); background: var(--kin-soft); }
.lst-fl { font: 700 1.2rem var(--maru); color: var(--ink-2); margin-top: 22px; }
.lst-n { display: flex; flex-direction: column; align-items: center; transition: transform .3s; }
.lst-i { font: .7rem var(--mono); color: var(--muted); }
.lst-box { display: flex; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--sheet); font: 700 1.05rem var(--maru); }
.lst-box span { padding: 4px 10px; min-width: 2.2em; text-align: center; transition: background .25s; }
.lst-box .lst-p { border-left: 2px dashed var(--ink); background: var(--ai-soft); font-size: .9rem; }
.lst-fin .lst-box { padding: 4px 10px; border-style: dashed; color: var(--muted); }
.lst-n .drapeaux { display: flex; gap: 3px; min-height: 22px; margin-top: 4px; }
.lst-n.regarde .lst-box { background: var(--kin-soft); transform: translateY(-3px); }
.lst-n.compare .lst-box { box-shadow: 0 0 0 3px var(--kin); }
.lst-n.ecrit .lst-box { box-shadow: 0 0 0 3px var(--sakura); animation: tremble .4s; }
.lst-n.lst-detache .lst-box { border-style: dashed; opacity: .85; }
.lst-mem { border-collapse: collapse; font: .85rem var(--maru); margin: 0 auto; }
.lst-mem th { font: 700 .72rem var(--mono); color: var(--muted); padding: 2px 10px; }
.lst-mem td { border: 1.5px solid var(--ink); padding: 3px 12px; text-align: center; background: var(--sheet); transition: background .25s; }
.lst-mem td.libre { color: var(--muted); background: var(--paper); }
.lst-mem td.regarde { background: var(--kin-soft); }
.lst-mem td.compare { background: var(--kin); }
.lst-mem td.ecrit { background: var(--sakura); }

/* — arbre binaire — */
.stage.visu-arbre { display: block; overflow: auto; }
.arb { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.arb-svg { flex: 1; min-height: 140px; width: 100%; }
.arb-trait { stroke: var(--ink); stroke-width: 2; }
.arb-n circle { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.2; transition: fill .25s, stroke .25s; }
.arb-v { font: 700 15px var(--maru); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.arb-i { font: 10px var(--mono); fill: var(--muted); }
.arb-fl text { font: 700 9.5px var(--mono); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.arb-vide { font: 14px var(--ui); fill: var(--muted); text-anchor: middle; }
.arb-n.sorti circle { fill: var(--matcha-soft); stroke: var(--matcha); }
.arb-n.regarde circle { fill: var(--kin-soft); stroke: var(--kin); stroke-width: 3; }
.arb-n.compare circle { fill: var(--kin); }
.arb-n.ecrit circle { fill: var(--sakura); }
.arb-n.trouve circle { fill: var(--matcha); stroke: var(--matcha); }
.arb-mem sup { font: 700 .6rem var(--mono); color: var(--shu); margin-left: 3px; }
.lst-mem td.fixe { background: var(--matcha-soft); border-color: var(--matcha); font-weight: 700; }

/* — ハッシュ（チェーン法） — */
.stage.visu-hachage { display: block; overflow: auto; }
.hc { display: flex; flex-direction: column; gap: 6px; }
.hc-ligne { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; padding: 4px 6px; border-radius: 12px; transition: background .25s; }
.hc-ligne.actif { background: var(--kin-soft); }
.hc-k { font: 700 .85rem var(--mono); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px; margin-top: 14px; background: var(--sheet); }
.hc-k.ecrit { background: var(--sakura); }
.hc-fin { font: .85rem var(--mono); color: var(--muted); border: 2px dashed var(--line); border-radius: 8px; padding: 4px 8px; margin-top: 14px; }
.hc .lst-fl { margin-top: 16px; }
.lst-n.trouve .lst-box { background: var(--matcha-soft); box-shadow: 0 0 0 3px var(--matcha); }

/* — écran trop petit : le médaillon du chien — */
.petit-ecran { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(var(--dot) 2.2px, transparent 2.6px) 0 0 / 26px 26px, color-mix(in srgb, var(--paper) 94%, transparent); }
.petit-ecran[hidden] { display: none; }
.pe-carte { max-width: 340px; text-align: center; background: var(--sheet); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); padding: 26px 20px 20px; }
.medaillon { position: relative; width: 190px; height: 190px; margin: 6px auto 14px; border-radius: 50%; padding: 7px;
  background: conic-gradient(from 0deg, var(--sakura), #f5d36b, var(--sakura), #c9b2ef, var(--sakura));
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 9px var(--sheet), 0 0 0 11px var(--sakura); animation: balance 3.2s ease-in-out infinite; }
.medaillon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.pe-noeud { position: absolute; left: 50%; top: -30px; width: 64px; height: 44px; transform: translateX(-50%); fill: none; stroke: var(--ink); stroke-width: 1.4; color: var(--ink); }
@keyframes balance { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.pe-carte h2 { font: 700 1.25rem var(--jp); margin: 4px 0 8px; }
.pe-carte p { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; }
.pe-carte .suivant { margin: 0 auto; }
.hc-ligne { flex-wrap: nowrap; overflow-x: auto; padding: 2px 6px; }
.hc { gap: 2px; }
.hc .lst-n .drapeaux { min-height: 16px; margin-top: 2px; }
.hc .lst-box { font-size: .95rem; }
.hc .lst-box span { padding: 2px 8px; }