:root {
  --bg: #fafaf8;
  --fg: #222;
  --muted: #686868;
  --line: #e4e4de;
  --accent: #137a2b;
  --win: #7bb662;
  --draw: #bdbdb2;
  --loss: #d1685f;
  --freq: #4a7bd1;
  --best: #d9a400;
}
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: var(--fg); background: var(--bg); margin: 0; line-height: 1.4; }
/* En-tête : ≥ 1320 px sur une ligne (marque | modes centrés | contrôles) ; en dessous, deux lignes ; mobile, trois. */
:root { --ctl-h: 2.25rem; }
header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: .6rem; padding: .7rem 1.5rem; border-bottom: 1px solid var(--line); }
.hzone { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hleft { justify-self: start; max-width: 100%; }
.hcenter { justify-self: center; }
.hcenter .seg { flex: 0 0 auto; }
.hright { justify-self: end; flex-wrap: nowrap; gap: .8rem; }
.ctl-seg, .ctl-icons { display: flex; align-items: center; gap: .5rem; }
.brand { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: .6rem; }
#meta { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
header h1 { margin: 0; font-size: 1.25rem; cursor: pointer; }
header h1:hover { text-decoration: underline; }

.board-row { display: flex; gap: .5rem; align-items: stretch; }
.evalcol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#evalnum { font-size: .68rem; font-variant-numeric: tabular-nums; min-height: .9rem; color: var(--muted); font-weight: 600; }
#evalnum.pos { color: #2e7d32; } #evalnum.neg { color: #b23b30; }
#evalbar {
  position: relative; width: 16px; flex: 1 1 auto;
  background: #3a3a38; border-radius: 3px; overflow: hidden;
}
#evalfill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: #f1f1ec; transition: height .35s ease;
}
#evalbar.flip #evalfill { bottom: auto; top: 0; }
.phase { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 1rem; padding: .05rem .5rem; }
.controls { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.muted { color: var(--muted); font-size: .9rem; }
/* Contrôles segmentés : tous les boutons d'un groupe ont la même largeur (celle du plus large) et la même hauteur. */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg button { white-space: nowrap; height: var(--ctl-h); display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; position: relative; }
.seg button + button { margin-left: -1px; }
.seg button:first-child { border-radius: .4rem 0 0 .4rem; }
.seg button:last-child { border-radius: 0 .4rem .4rem 0; }
.seg button.active { background: var(--fg); color: #fff; border-color: var(--fg); z-index: 1; }
#mode button { font-weight: 600; padding: 0 1rem; min-width: 7.6rem; }
#mode button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#period button { min-width: 2.9rem; padding: 0 .4rem; }
#colorseg button { min-width: 3rem; padding: 0; }

main { display: flex; gap: 2.5rem; flex-wrap: wrap; padding: 1.5rem; align-items: flex-start; justify-content: center; }
.board-col { display: flex; flex-direction: column; gap: .6rem; }
#board { width: min(88vw, 72vh, 680px); height: min(88vw, 72vh, 680px); }

.navbar { display: flex; gap: .3rem; justify-content: center; }
.navbar button { flex: 1; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .4rem 0; border-radius: .35rem; }
.navbar button:hover:not(:disabled) { background: #f0f0ea; }
.navbar button:disabled { opacity: .35; cursor: default; }

.breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; font-size: .9rem; max-width: 100%; }
.breadcrumb button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: .1rem .25rem; border-radius: .25rem; }
.breadcrumb button:hover { background: #eef; }
.breadcrumb button.current { background: var(--accent); color: #fff; }
.breadcrumb .sep { color: var(--muted); }

.curmove { font-size: .9rem; min-height: 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.curmove button {
  border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit;
  padding: .2rem .55rem; border-radius: .35rem; color: var(--fg);
}
.curmove button.on { background: var(--best); border-color: var(--best); color: #3a2c00; }
.curmove button:hover { border-color: var(--accent); }

.panel { flex: 1; min-width: 340px; max-width: 560px; }
.turn-label { font-weight: 600; margin-bottom: .4rem; }
.turn-label .you { color: var(--accent); }

.engine {
  font-size: .9rem; padding: .5rem .65rem; border-radius: .4rem; margin-bottom: .7rem;
  background: #11161d; color: #eee; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
.engine .score { font-weight: 700; font-variant-numeric: tabular-nums; }
.engine .score.pos { color: #8fd36f; } .engine .score.neg { color: #e88a80; } .engine .score.eq { color: #ddd; }
.engine .muted2 { color: #9aa; }
.engine.off { background: #efeee8; color: var(--muted); }

.legend { font-size: .82rem; color: var(--muted); margin: 0 0 .7rem; }
.legend b { color: var(--fg); }
.note { font-size: .8rem; color: #8a6d00; background: #fff6d6; border: 1px solid #ecd98a; border-radius: .35rem; padding: .4rem .55rem; margin: 0 0 .7rem; }

.badge { display: inline-block; min-width: 1.1em; text-align: center; border-radius: .25rem; font-size: .8rem; }
.badge.best { color: var(--best); } .badge.top { color: var(--accent); }

.moves-head, .moves li { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: center; font-size: .9rem; }
.moves-head { color: var(--muted); padding: 0 .5rem .4rem; border-bottom: 1px solid var(--line); }
.moves-head > span, .moves li > span { text-align: center; }
.moves-head .c-you, .moves-head .c-eng { cursor: pointer; user-select: none; }
.moves-head .c-you:hover, .moves-head .c-eng:hover { color: var(--fg); }
.moves-head .sort-active { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.rank { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: .72rem; font-weight: 700; color: #fff; }
.rank.r1 { background: #d9a400; color: #2b2000; } .rank.r2 { background: #b5b5ab; color: #1a1a18; } .rank.r3 { background: #d09a62; color: #2a1a08; }
.moves { list-style: none; margin: 0; padding: 0; }
.moves li { padding: .5rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.moves li:hover { background: #fff; }
.moves li.unplayed .san { color: var(--muted); }
.moves .san { font-weight: 600; }
.moves .you { font-variant-numeric: tabular-nums; }
.moves .you .n { color: var(--muted); }
.moves .nd { color: var(--muted); }
.moves .mcell { font-variant-numeric: tabular-nums; }
.repbtn { width: 1.9rem; height: 1.9rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1.15rem; line-height: 1;
  border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: var(--muted); cursor: pointer; }
.repbtn:hover { color: var(--accent); border-color: var(--accent); background: #eef3ee; }
.repbtn.on { color: var(--accent); border-color: var(--accent); font-weight: 700; }
.moves .san .mark { margin-left: .25rem; }

.cell { display: flex; flex-direction: column; gap: .18rem; }
.cell .bar { height: .45rem; border-radius: 3px; background: #ecece6; overflow: hidden; }
.cell .bar i { display: block; height: 100%; }
.cell .bar.toi i { background: var(--freq); }
.cell .bar.lic i { background: #8a8a80; }
.cell .lbl { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cell .lbl b { color: var(--fg); }
.cell.nd { color: var(--muted); font-size: .8rem; }

.mcell { font-variant-numeric: tabular-nums; }
.mcell .ev.pos { color: #2e7d32; } .mcell .ev.neg { color: #b23b30; } .mcell .ev.eq { color: var(--muted); }

.empty { color: var(--muted); padding: 1rem .5rem; }

/* Bascule de vue pilotée par une classe sur <body> (robuste) */
#repgraph, #repinfo { display: none; }
body.mode-rep .turn-label,
body.mode-rep .engine,
body.mode-rep .legend,
body.mode-rep .moves-head,
body.mode-rep #moves { display: none; }
body.mode-rep #repgraph { display: block; order: 1; }
body.mode-rep #repinfo { display: block; order: 2; text-align: center; max-width: min(88vw, 72vh, 680px); margin: 0; }
body.mode-rep .panel {
  max-width: none; flex: 0 0 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}

/* Cadre de l'arbre : carré, même taille que l'échiquier, sans scrollbar */
#repgraph {
  width: min(88vw, 72vh, 680px); height: min(88vw, 72vh, 680px);
  overflow: hidden; border: 1px solid var(--line); border-radius: .5rem;
  background: #1e1e1c; cursor: grab; touch-action: none;
}
#repgraph:active { cursor: grabbing; }
#repgraph svg { display: block; width: 100%; height: 100%; }
#repgraph .rgn text { user-select: none; }

#errbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #b00020; color: #fff; font: 13px system-ui; padding: .4rem .8rem;
}

/* Vue répertoire */
.repinfo { margin-bottom: .8rem; }
.moves.rep li {
  display: flex; grid-template-columns: none; gap: .35rem; align-items: center;
  padding: .16rem .3rem; border-bottom: 0; cursor: pointer; font-variant-numeric: tabular-nums;
}
.moves.rep li:hover { background: #fff; }
.moves.rep li.current { background: #eef3ee; border-radius: .25rem; }
.moves.rep .mv { font-weight: 600; }
.moves.rep .mv.opp { font-weight: 400; color: #555; }
.moves.rep .repstats { display: inline-flex; gap: .5rem; align-items: baseline; font-size: .8rem; font-variant-numeric: tabular-nums; }
.moves.rep .repstats .rf { color: var(--freq); }
.moves.rep .repstats .rn { color: var(--muted); }
.moves.rep .repstats .rs { font-weight: 600; padding: 0 .25rem; border-radius: .2rem; }
.moves.rep .repstats .rs.sc-good { color: #1b7a32; background: #e6f4e9; }
.moves.rep .repstats .rs.sc-bad { color: #b23b30; background: #fbe9e7; }
.moves.rep .repstats .rs.sc-mid { color: #555; background: #eee; }
.moves.rep .rmv { margin-left: auto; font-size: .8rem; }

/* --- Mode sombre --- */
.iconbtn { width: var(--ctl-h); height: var(--ctl-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; border-radius: .4rem; color: inherit; flex: 0 0 auto; }
.ico { width: 1.15rem; height: 1.15rem; display: block; }
.iconbtn:hover { border-color: var(--accent); }
body.dark {
  --bg: #16181c; --fg: #e7e7e4; --muted: #9aa0a6; --line: #2a2e35;
  --accent: #4ea55f; --win: #6fae5f; --draw: #6a6a62; --loss: #d1685f;
  --freq: #6a95e0; --best: #e0b23a;
}
body.dark .iconbtn,
body.dark .seg button,
body.dark .navbar button,
body.dark .curmove button { background: #20242a; color: var(--fg); border-color: var(--line); }
body.dark .seg button.active { background: var(--fg); color: #16181c; border-color: var(--fg); }
body.dark #mode button.active { background: var(--accent); border-color: var(--accent); color: #0e1510; }
body.dark .navbar button:hover:not(:disabled),
body.dark .moves li:hover { background: #20242a; }
body.dark .curmove button:hover, body.dark .iconbtn:hover { border-color: var(--accent); }
body.dark .breadcrumb button:hover { background: #20303a; }
body.dark .repbtn:hover { background: #22301f; }
body.dark .note { background: #3a3320; border-color: #5a4e24; color: #e8d79a; }
body.dark .mcell .ev.pos, body.dark #evalnum.pos { color: #5fbf72; }
body.dark .mcell .ev.neg, body.dark #evalnum.neg { color: #e3786b; }
body.dark .rs.sc-good { background: #1f3524; color: #a7e0b4; }
body.dark .rs.sc-bad { background: #3a211e; color: #eaa69c; }
body.dark .rs.sc-mid { background: #2a2e35; color: #cfcfcf; }

/* --- Responsive --- */
@media (max-width: 1319px) {
  header { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem 1rem; }
  .hcenter { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .hcenter .seg { flex: 1; }
  #mode button { min-width: 0; }
}
@media (max-width: 760px) {
  .hzone { gap: .5rem; }
  #period button { min-width: 2.6rem; padding: 0 .3rem; }
  main { padding: 1rem; gap: 1rem; }
  .panel { min-width: 0; max-width: none; flex: 1 1 100%; }
  #board { width: min(86vw, 460px); height: min(86vw, 460px); }
  .moves-head, .moves li { grid-template-columns: repeat(5, 1fr); gap: .4rem; }
  #repgraph { max-height: 68vh; }
  .legend { font-size: .78rem; }
@media (max-width: 640px) {
  .hright { display: contents; }
  .ctl-icons { grid-column: 2; grid-row: 1; }
  .ctl-seg { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; }
  .ctl-seg #period { flex: 1; }
  #mode button { font-size: .92rem; padding: 0 .3rem; }
  #meta { max-width: 100%; }
}
}
@media (max-width: 440px) {
  .moves-head, .moves li { grid-template-columns: repeat(5, 1fr); gap: .25rem; }
  .moves .you .n { display: none; }
  #board { width: min(90vw, 460px); height: min(90vw, 460px); }
  header { padding: .55rem .6rem; }
  .phase { display: none; }
}

/* --- révision (FSRS) --- */
.review { display: none; }
body.mode-review .review { display: block; text-align: center; margin: 0 auto; }
.review.session { max-width: min(88vw, 72vh, 680px); }
body.mode-review .turn-label, body.mode-review .engine, body.mode-review .legend,
body.mode-review .moves-head, body.mode-review #moves, body.mode-review #repgraph, body.mode-review #repinfo,
body.mode-review .evalcol, body.mode-review .navbar, body.mode-review .breadcrumb, body.mode-review .curmove { display: none; }
.rv-progress { color: var(--muted, #888); font-size: .85rem; }
.rv-line { font-family: monospace; }
.rv-feedback { min-height: 1.6em; font-weight: 600; margin: .6em 0; }
.rv-feedback.good { color: #2e9d4f; }
.rv-feedback.bad { color: #d64545; }
.rv-next { min-height: 2.6rem; padding: 0 1.2em; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rv-name { margin: .4em 0 .2em; }
.rv-title { font-size: 1.25rem; font-weight: 700; }
.rv-sub { color: var(--muted); font-size: .85rem; }
.rv-edit { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1rem; }
.rv-edit:hover { color: inherit; }

/* --- album / collection --- */
:root { --lv-new: #8a8f98; --lv-learning: #e0a030; --lv-acquired: #3a8fd6; --lv-mastered: #2e9d4f; }
.rv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin: .6em 0; }
.rv-tile { border: 2px solid var(--c); border-radius: 10px; padding: .5em .2em; display: flex; flex-direction: column; }
.rv-tile b { font-size: 1.6rem; color: var(--c); }
.rv-tile span { font-size: .72rem; color: var(--muted); }
.lv-new { --c: var(--lv-new); } .lv-learning { --c: var(--lv-learning); }
.lv-acquired { --c: var(--lv-acquired); } .lv-mastered { --c: var(--lv-mastered); }
.rv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 14rem)); justify-content: center; gap: .6rem; margin: .8rem 0 .5rem; }
.rv-actions .rv-next { width: 100%; }
.rv-hint { margin: 0 0 1rem; font-size: .88rem; color: var(--muted); }
.rv-next:disabled { opacity: .4; cursor: default; }
.rv-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7em; text-align: left; }
.rv-card { border: 2px solid var(--c); border-radius: 10px; padding: .45em; background: var(--panel, transparent); }
.rv-card.is-due { box-shadow: 0 0 0 2px var(--c) inset, 0 0 8px var(--c); }
.rv-card.lv-new { border-style: dashed; }
.rv-card-name { font-weight: 700; font-size: .8rem; margin-top: .35em; line-height: 1.15; }
.rv-card-meta, .rv-card-due { font-size: .68rem; color: var(--muted); }
.mini { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.mini i { font-style: normal; display: flex; align-items: center; justify-content: center; font-size: clamp(7px, 1.6vw, 14px); line-height: 1; }
.mini .lt { background: #ecd9b0; } .mini .dk { background: #b58863; }
.mini .w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000; } .mini .b { color: #111; }

/* --- mise en page révision : échiquier centré, deck en dessous --- */
body.mode-review main { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 1rem; }
body.mode-review .panel { flex: none; min-width: 0; max-width: none; width: min(94vw, 980px); }
.rv-replay { background: none; border: 1px solid var(--line); border-radius: .4rem; cursor: pointer; padding: .25em .7em; color: var(--muted); font: inherit; font-size: .85rem; }
.rv-replay:hover:not(:disabled) { color: inherit; border-color: var(--muted); }
.rv-album { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .9em; justify-items: center; }
.rv-card { width: 100%; max-width: 150px; aspect-ratio: 5 / 7; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .15s; }
.rv-card:hover { transform: translateY(-4px) rotate(-1deg); }
.rv-card.is-due { box-shadow: 0 0 0 2px var(--c) inset, 0 0 10px var(--c); }
.rv-card-name { flex: 1; overflow: hidden; }

/* --- accueil : cartes d'abord, échiquier dessous ; decks chevauchants --- */
body.mode-review.rv-home .panel { order: -1; }
.rv-decks { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; text-align: left; }
.rv-deck-h { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c); }
.rv-row { display: flex; padding: 1.1rem 0 .4rem; }
.rv-row .rv-card { flex: 0 0 110px; width: 110px; max-width: none; cursor: pointer; position: relative; background: var(--card-bg, #fff); transition: transform .15s ease, box-shadow .15s; transform-origin: 50% 70%; }
body.dark .rv-row .rv-card { --card-bg: #2a2a28; }
.rv-row .rv-card:hover { transform: translateY(-28px) scale(1.7); z-index: 100; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.rv-row .rv-card:hover .rv-card-name { overflow: visible; }

/* noms de cartes complets : hauteur libre au lieu du ratio fixe */
.rv-row .rv-card { aspect-ratio: auto; min-height: 154px; }
.rv-row .rv-card-name { overflow: visible; flex: 0 0 auto; }
.rv-row .rv-card-meta, .rv-row .rv-card-due { margin-top: auto; }

/* accueil Réviser : pas d'échiquier tant qu'on ne révise pas */
body.mode-review.rv-home .board-col { display: none; }
.rv-card-no { font-size: .66rem; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }

/* l'historique de parties n'a de sens que dans l'Explorer */
body.mode-rep #period, body.mode-rep #sync, body.mode-review #period, body.mode-review #sync { display: none; }
/* la méta (pseudo, parties, synchro) garde sa place pour que la hauteur de l'en-tête ne saute pas d'un onglet à l'autre */
body.mode-rep #meta, body.mode-review #meta { visibility: hidden; }
/* remise en apprentissage d'une carte (visible au survol) */
.rv-relearn { display: none; margin-top: .3em; font: inherit; font-size: .62rem; padding: .15em .3em; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.rv-row .rv-card:hover .rv-relearn { display: block; }
.rv-relearn.arm { color: #fff; background: #b02a2a; border-color: #b02a2a; }

/* thème sombre : texte du fil d'Ariane courant lisible (clair sur vert = 3:1, insuffisant) */
body.dark .breadcrumb button.current { background: var(--accent); color: #0e1510; }

/* icônes de roi Blanc / Noir (pièces cburnett de l'échiquier) sur pastille claire : lisibles dans les deux thèmes */
.kicon { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: middle; border-radius: 50%;
  background-color: #ebebe6; background-repeat: no-repeat; background-position: center; background-size: 88%; }
.kicon.w { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg=='); }
.kicon.b { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4='); }
.seg button .kicon { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.seg button.active .kicon { box-shadow: 0 0 0 2px var(--accent); }

/* synchro : bouton en rotation pendant l'opération + notification (blanc sur #222 = 15,9:1) */
@keyframes rv-spin { to { transform: rotate(360deg); } }
#sync.spin { animation: rv-spin 1s linear infinite; }
#sync:disabled { opacity: .6; cursor: default; }
#toast { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  background: #222; color: #fff; padding: .6rem .9rem; border-radius: .5rem; font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); max-width: min(90vw, 360px); }

/* « Réviser » traite les deux couleurs : le choix Blancs/Noirs n'y a pas d'effet */
body.mode-review #colorseg { display: none; }

/* --- progression : série, objectif du jour, activité, répartition (textes en --fg / --muted, contrastes vérifiés) --- */
.rv-strip { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 1rem; max-width: 40rem; margin: .5rem auto .8rem; }
.rv-streak, .rv-best { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.rv-streak b { display: inline-flex; align-items: center; gap: .2rem; font-size: 1.8rem; color: var(--muted); }
.rv-streak.on b { color: var(--lv-learning); }
.rv-streak b .flame { width: 1.6rem; height: 1.6rem; }
.rv-best b { font-size: 1.8rem; }
.rv-streak span, .rv-best span { font-size: .78rem; color: var(--muted); }
.rv-goal { text-align: left; }
.rv-goal-h { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.rv-goal-txt { font-size: .85rem; margin-top: .3rem; }
.rv-bar { height: .7rem; border-radius: .35rem; background: var(--line); overflow: hidden; }
.rv-bar i { display: block; height: 100%; background: var(--accent); border-radius: .35rem; transition: width .3s; }
.rv-bar.done i { background: var(--lv-mastered); }
.rv-cal { margin: 0 auto 1rem; max-width: 22rem; }
.rv-cal-h { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.rv-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rv-dow { font-size: .65rem; color: var(--muted); text-align: center; }
.rv-hc.future { border-color: transparent; }
.rv-legend { display: flex; flex-wrap: nowrap; justify-content: center; gap: .3rem .8rem; white-space: nowrap; margin-top: .45rem; font-size: .72rem; color: var(--muted); }
.rv-leg-i { display: inline-flex; align-items: center; gap: .3rem; }
.rv-leg-i .rv-hc { width: .8rem; height: .8rem; aspect-ratio: auto; display: inline-block; }
.rv-bonus { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.rv-hc { display: block; aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--line); }
.rv-hc.l1 { background: var(--lv-learning); border-color: var(--lv-learning); }
.rv-hc.l2 { background: var(--lv-mastered); border-color: var(--lv-mastered); }
.rv-hc.today { outline: 2px solid var(--fg); outline-offset: 1px; }
.rv-stack { display: flex; height: .8rem; border-radius: .4rem; overflow: hidden; margin: .2rem auto .3rem; max-width: 32rem; background: var(--line); }
.rv-stack i { display: block; background: var(--c); }
/* case « aucune révision » : bordure assez marquée pour être visible sur fond clair comme sombre */
.rv-hc.l0 { border-color: var(--muted); }

/* puce Blancs / Noirs (remplace les émojis ⚪ ⚫, absents de certaines polices) */
.dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; border: 1px solid var(--muted); vertical-align: middle; margin-left: .35rem; }
.dot.w { background: #fff; } .dot.b { background: #222; }
@media (max-width: 640px) {
  .rv-actions { grid-template-columns: 1fr; }
  .rv-strip { grid-template-columns: 1fr 1.6fr 1fr; gap: .6rem; }
}

/* accueil Réviser : textes de synthèse en police normale, calendrier compact, numéro de carte en tête */
.rv-note { margin: .5rem 0; font-size: .88rem; color: var(--fg); }
.rv-streak b .flame { width: 1.9rem; height: 1.9rem; }
.rv-heat .rv-hc { aspect-ratio: auto; height: 1.55rem; }
.rv-card-no { font-size: .72rem; margin: 0 0 .3rem; }

/* boutons d'action (Réviser par ligne, Carte par carte, Entraînement libre, Suivant…) : cohérents dans les deux thèmes */
.rv-next { background: #fff; color: var(--fg); border: 1px solid var(--muted); border-radius: .4rem; font: inherit; }
.rv-next:hover:not(:disabled) { border-color: var(--accent); }
.rv-next:disabled { opacity: .55; }
body.dark .rv-next { background: #20242a; color: var(--fg); border-color: var(--line); }
body.dark .rv-next:hover:not(:disabled) { border-color: var(--accent); }
.rv-replay { color: var(--muted); }
@media (max-width: 420px) {
  #mode button { font-size: .84rem; padding: 0 .2rem; }
}

/* ================= Page « Comment ça marche » ================= */
.guide { display: none; }
body.mode-guide .board-col, body.mode-guide .panel { display: none; }
body.mode-guide .guide { display: block; width: 100%; max-width: 1040px; margin: 0 auto; }
body.mode-guide #period, body.mode-guide #sync, body.mode-guide #colorseg { display: none; }
body.mode-guide #meta { visibility: hidden; }
#guide-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark #guide-btn.active { color: #0e1510; }

.g-intro { text-align: center; max-width: 40rem; margin: .5rem auto 1.2rem; }
.g-intro h2 { margin: 0 0 .4rem; font-size: 1.8rem; }
.g-lead { margin: 0; color: var(--muted); font-size: 1.05rem; }
.g-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; align-items: center; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.g-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
body.dark .g-num { color: #0e1510; }
.g-text h3 { margin: .1rem 0 .4rem; font-size: 1.3rem; }
.g-text p { margin: 0; }
.g-text ul { padding-left: 1.1rem; margin: .7rem 0 1rem; }
.g-text li { margin: .3rem 0; }
.g-cta { width: 17rem; max-width: 100%; }

.g-demobox { position: relative; }
.g-demo { position: relative; display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; min-height: 300px; overflow: hidden; }
body.dark .g-demo { background: #20242a; }
.g-left { display: flex; gap: .5rem; align-items: stretch; flex: 0 0 auto; }
.g-board { width: 250px; height: 250px; flex: 0 0 auto; }
.g-eval { width: 12px; background: #3a3a38; border-radius: 3px; position: relative; overflow: hidden; }
.g-eval i { position: absolute; left: 0; right: 0; bottom: 0; height: 53%; background: #f1f1ec; transition: height .5s; }
.g-right { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.g-head, .g-row { display: grid; grid-template-columns: 1.6rem 3rem 1fr 3.4rem; align-items: center; gap: .5rem; }
.g-head { font-size: .72rem; color: var(--muted); padding: 0 .5rem; }
.g-row { padding: .35rem .5rem; border-bottom: 1px solid var(--line); border-radius: .3rem; font-size: .9rem; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, background .3s; }
.g-row.show { opacity: 1; transform: none; }
.g-row.hot { background: rgba(19, 122, 43, .15); }
.g-freq { display: flex; align-items: center; gap: .4rem; }
.g-bar { flex: 1; height: .5rem; background: var(--line); border-radius: .25rem; overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 0; background: var(--freq); transition: width .7s .1s; }
.g-row.show .g-bar i { width: var(--w); }
.g-pct { font-size: .78rem; color: var(--muted); min-width: 2.4rem; text-align: right; }
.g-ev { color: #2e7d32; font-weight: 600; text-align: right; }
body.dark .g-ev, body.dark .g-q.good { color: #5fbf72; }
.g-addrow { grid-template-columns: 3rem 1fr 2rem; }
.g-add { width: 1.9rem; height: 1.9rem; border: 1px solid var(--muted); border-radius: .4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.15rem; transition: all .25s; }
.g-add.on { color: var(--accent); border-color: var(--accent); font-weight: 700; background: #eef3ee; }
body.dark .g-add.on { background: #22301f; }
.g-tip { min-height: 2.4em; font-size: .85rem; color: var(--accent); opacity: 0; transition: opacity .3s; }
.g-tip.on { opacity: 1; }
.g-tree { align-self: center; }
.g-tree svg { width: 150px; height: 215px; display: block; }
.g-edge { stroke: #5a5a56; stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
.g-edge.show, .g-node.show { opacity: 1; }
.g-node { opacity: 0; transition: opacity .3s; }
.g-node circle { stroke: #888; stroke-width: 1; }
.g-node.root circle { fill: #bdbdb6; } .g-node.w circle { fill: #f3f3ee; } .g-node.b circle { fill: #3a3a38; }
.g-node text { text-anchor: middle; font: 600 10px system-ui, sans-serif; }
.g-node.root text { font-size: 9px; }
.g-node.root text, .g-node.w text { fill: #222; } .g-node.b text { fill: #f3f3ee; }
.g-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(.4, 0, .2, 1), opacity .3s; z-index: 5; }
.g-cursor svg { width: 100%; height: 100%; transition: transform .15s; }
.g-cursor.press svg { transform: scale(.8); }

.g-cardwrap { flex-direction: column; }
.g-card { border: 2px solid var(--lv-learning); border-radius: 10px; padding: .5rem; background: #fff; width: 270px; max-width: 100%; }
body.dark .g-card { background: #2a2a28; }
.g-cardno { font-size: .75rem; font-weight: 700; color: var(--lv-learning); margin-bottom: .35rem; }
.g-card .g-board { width: 100%; height: auto; aspect-ratio: 1; }
.g-q { margin-top: .5rem; text-align: center; font-weight: 700; min-height: 1.4em; }
.g-q.good { color: #2e7d32; }
.g-meter { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.g-lv { border: 2px solid var(--c); border-radius: .5rem; padding: .35rem .4rem; font-size: .78rem; text-align: center; color: var(--muted); opacity: .55; transition: opacity .3s, background .3s; }
.g-lv.on { opacity: 1; color: var(--fg); font-weight: 700; background: color-mix(in srgb, var(--c) 16%, transparent); }
.g-next { min-height: 1.4em; font-size: .85rem; opacity: 0; transition: opacity .3s; }
.g-next.on { opacity: 1; }
.g-streak { display: flex; align-items: center; gap: .4rem; color: var(--lv-learning); }
.g-streak b { font-size: 1.6rem; display: inline-block; }
.g-streak span { color: var(--muted); font-size: .8rem; }
.g-streak .flame { width: 1.7rem; height: 1.7rem; }
.g-streak.bump b { animation: g-bump .5s; }
@keyframes g-bump { 50% { transform: scale(1.4); } }
.g-replay { display: block; margin: .4rem 0 0 auto; font: inherit; font-size: .72rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--bg); color: var(--muted); cursor: pointer; }
.g-replay:hover { border-color: var(--accent); }
.g-outro { text-align: center; max-width: 40rem; margin: 1rem auto 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.g-outro h3 { margin: 0 0 .4rem; }
@media (prefers-reduced-motion: reduce) { .g-row, .g-edge, .g-node, .g-bar i, .g-eval i, .g-cursor { transition: none; } .g-streak.bump b { animation: none; } }
@media (max-width: 860px) {
  .g-step { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .g-demo { flex-direction: column; }
  .g-left { width: 100%; justify-content: center; }
  .g-board { width: min(72vw, 250px); height: min(72vw, 250px); }
  .g-right { width: 100%; flex: 0 0 auto; }
  .g-cta { width: 100%; }
}

/* focus clavier visible, cohérent sur tous les contrôles */
button:focus-visible, .seg button:focus-visible, .iconbtn:focus-visible, .rv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }
.g-card .g-board { width: 100%; height: auto; aspect-ratio: 1; }

/* une seule liste par niveau ; diaporama (pages) quand il y a trop de cartes */
.rv-deck-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; }
.rv-pager { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-pg { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1.2rem; line-height: 1; border: 1px solid var(--muted); border-radius: .4rem; background: #fff; color: var(--fg); cursor: pointer; }
.rv-pg:hover:not(:disabled) { border-color: var(--accent); }
.rv-pg:disabled { opacity: .4; cursor: default; }
body.dark .rv-pg { background: #20242a; border-color: var(--line); }
.rv-viewport { overflow-x: clip; overflow-y: visible; padding-inline: var(--padx, 44px); }
.rv-row.slide-next { animation: rv-slide-next .28s ease-out; }
.rv-row.slide-prev { animation: rv-slide-prev .28s ease-out; }
@keyframes rv-slide-next { from { opacity: 0; transform: translateX(36px); } }
@keyframes rv-slide-prev { from { opacity: 0; transform: translateX(-36px); } }
@media (prefers-reduced-motion: reduce) { .rv-row.slide-next, .rv-row.slide-prev { animation: none; } }

/* Couleurs de TEXTE des niveaux : plus foncées en thème clair pour respecter 4,5:1 (3:1 pour le grand texte) ;
   les couleurs d'origine (--lv-*) restent pour les bordures, pastilles et graphiques. */
:root { --lt-new: #5b6068; --lt-learning: #8a5a00; --lt-acquired: #1c6aa8; --lt-mastered: #1b7a3b; }
body.dark { --lt-new: #a3a8b0; --lt-learning: #e0a030; --lt-acquired: #5aa6e6; --lt-mastered: #4fbf6e; }
.lv-new { --ct: var(--lt-new); } .lv-learning { --ct: var(--lt-learning); }
.lv-acquired { --ct: var(--lt-acquired); } .lv-mastered { --ct: var(--lt-mastered); }
.rv-deck-h, .rv-card-no, .rv-tile b { color: var(--ct); }
.g-cardno, .g-streak b { color: var(--lt-learning); }
.rv-streak b .num { color: var(--fg); }

/* les étiquettes de colonnes de chessground débordent de 10 px sur mobile : on les rogne au bord du plateau */
#board { overflow: hidden; }

/* ================= Connexion, compte, onboarding ================= */
body.auth-gate > header, body.auth-gate > main, body.auth-gate > #onboarding { display: none; }
#auth-gate:not([hidden]) { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.ag-card { width: min(100%, 26rem); border: 1px solid var(--line); border-radius: .8rem; padding: 1.4rem 1.4rem 1.6rem; background: #fff; text-align: center; }
body.dark .ag-card { background: #20242a; }
.ag-lang { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: .8rem; }
.ag-lang button { height: 2rem; padding: 0 .8rem; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; font: inherit; font-size: .85rem; }
.ag-lang button + button { margin-left: -1px; }
.ag-lang button:first-child { border-radius: .4rem 0 0 .4rem; } .ag-lang button:last-child { border-radius: 0 .4rem .4rem 0; }
.ag-lang button.active { background: var(--accent); border-color: var(--accent); color: #fff; position: relative; }
body.dark .ag-lang button.active { color: #0e1510; }
.ag-title { margin: .2rem 0 .1rem; font-size: 1.8rem; }
.ag-sub { margin: 0 0 1rem; color: var(--muted); }
.ag-form { display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.ag-form label { font-size: .85rem; color: var(--muted); }
.ag-form input, .ob-form input { height: 2.5rem; padding: 0 .7rem; border: 1px solid var(--muted); border-radius: .4rem; font: inherit; background: #fff; color: #222; }
body.dark .ag-form input, body.dark .ob-form input { background: #16181c; color: var(--fg); border-color: var(--line); }
.ag-btn { height: 2.6rem; border: 0; border-radius: .4rem; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; margin-top: .4rem; padding: 0 1.2rem; }
body.dark .ag-btn { color: #0e1510; }
.ag-btn:disabled { opacity: .6; cursor: default; }
.ag-msg { min-height: 1.4em; margin: .4rem 0 0; font-size: .9rem; }
.ag-msg.ok { color: #1b7a3b; } .ag-msg.err { color: #b02a2a; }
body.dark .ag-msg.ok { color: #4fbf6e; } body.dark .ag-msg.err { color: #f08080; }

.ctl-icons { position: relative; }
.acc-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 300; min-width: 14rem; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); text-align: left; display: flex; flex-direction: column; gap: .35rem; }
.acc-menu[hidden] { display: none; }
body.dark .acc-menu { background: #20242a; }
.acc-name { font-weight: 700; } .acc-mail { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.acc-label { font-size: .75rem; color: var(--muted); margin-top: .4rem; }
.acc-seg button { white-space: nowrap; }
.acc-logout { margin-top: .5rem; height: 2.25rem; border: 1px solid var(--muted); border-radius: .4rem; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.acc-logout:hover { border-color: var(--accent); }
#account { font-weight: 700; }

.onboarding { max-width: 34rem; margin: 1.2rem auto 0; padding: 1.1rem 1.3rem; border: 1px solid var(--accent); border-radius: .8rem; text-align: center; background: #fff; width: calc(100% - 2rem); }
body.dark .onboarding { background: #20242a; }
.onboarding h2 { margin: 0 0 .4rem; }
.ob-text { margin: 0 0 .8rem; color: var(--muted); }
.ob-form { display: flex; gap: .5rem; justify-content: center; }
.ob-form input { flex: 1; min-width: 0; max-width: 16rem; }
.ob-status { min-height: 1.4em; margin: .6rem 0 .2rem; font-size: .9rem; }
.ob-status.err { color: #b02a2a; } body.dark .ob-status.err { color: #f08080; }
.onboarding .rv-bar { max-width: 20rem; margin: 0 auto; }
body.mode-guide #onboarding { display: none; }