/* Memoria Go — design system « Aurora » (ex « cristal nuit ») */
/* La voix typographique de l'app. Self-hébergée : la PWA doit fonctionner
   hors-ligne et sans CDN tiers. Baloo 2 variable, subset latin, 33 Ko, OFL. */
@font-face {
  font-family: "Display";
  src: url("/fonts/display.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  /* ── Aurora : canvas de MARQUE + élévation par LUMINANCE (jamais d'ombre) ──
     Loi n°1 et n°3 des apps au sommet (Opal, Revolut, Headspace) : le fond
     sombre est une couleur d'identité, et une surface « monte » en devenant
     plus claire, pas en projetant une ombre. */
  --bg: #0b1026;          /* canvas de marque */
  --bg2: #131a38;         /* surface +1 */
  --panel: #131a38;       /* surface +1 (opaque : la luminance porte tout) */
  --panel-solid: #131a38;
  --surface-2: #1b2450;   /* surface +2 : élément actif / survol */
  --border: #232f5c;
  --text: #e8f0fb;
  --muted: #8ea0b8;
  --accent: #46e0ff;
  --accent-soft: rgba(70, 224, 255, .14);
  --violet: #8b7bff;
  --new: #4fa8ff;
  --learn: #ff7d63;
  --rev: #3ddc84;
  --again: #ff5d73;
  --hard: #ffb454;
  --good: #3ddc84;
  --easy: #4fc3ff;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /* ═══ Cristal Nuit v2 — tokens game-grade ═══
     Typo display arrondie (chaleur de jeu), motion à ressort, élévations à
     paliers, et TOUS les composants tokenisés pour vivre dans les 2 thèmes
     (la cause racine des toggles « morts » en clair : styles dark codés en
     dur). Règle : les composants consomment ces tokens, jamais de couleur
     de thème en dur dans un composant. */
  /* Grotesque, pas arrondi : les rondeurs lisent « jeu enfantin » sur navy
     premium — c'est ce qui faisait « cheap ». Archivo = famille des fontes
     des grandes apps (Aeonik/Revolut, Cereal/Airbnb). */
  --font-display: "Display", -apple-system, "SF Pro Display", "Segoe UI",
    Roboto, sans-serif;
  --track-tight: -.02em;   /* tracking serré : le réflexe premium */
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);   /* délice : réservé aux moments */
  --ease: cubic-bezier(.4, 0, .2, 1);          /* structurel : tout le reste */
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --dur-slow: 260ms;
  /* Élévation en dark = LUMINANCE seule (loi n°3) : les « ombres » ne sont
     plus que des hairlines. Les lueurs colorées restent, elles, un choix
     d'identité réservé à ce qui doit rayonner. */
  --el-1: 0 0 0 1px rgba(120, 160, 220, .07);
  --el-2: 0 0 0 1px rgba(120, 160, 220, .09);
  --el-3: 0 0 0 1px rgba(120, 160, 220, .11), 0 16px 40px rgba(0, 0, 0, .45);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .045);   /* lumière d'arête */
  --press: rgba(70, 224, 255, .08);
  /* Auroras : la nuit vivante. 3 radiales fixes, ≤13 %, zéro blur (compositor
     friendly). Fortes uniquement sur les écrans-jalons. */
  --aurora:
    radial-gradient(900px 460px at 82% -8%, rgba(70, 224, 255, .13), transparent 60%),
    radial-gradient(700px 420px at -10% 22%, rgba(139, 123, 255, .12), transparent 55%),
    radial-gradient(620px 500px at 110% 80%, rgba(255, 122, 217, .05), transparent 60%);
  --gold: #ffd66e;
  --rose: #ff7ad9;
  /* toggle */
  --tg-track: #16233a;
  --tg-track-brd: #253a58;
  --tg-knob: #8194ad;
  --tg-track-on: linear-gradient(180deg, #2fc8ea, #17a8cc);
  --tg-knob-on: #ffffff;
  --tg-glow: 0 0 12px rgba(70, 224, 255, .45);
  /* lèvres de boutons (physique d'appui) */
  --lip-accent: #128aa8;
  --lip-panel: #0c1524;
  --lip-violet: #5c4fd4;
  --lip-again: #c73a52;
  --lip-hard: #cf8a2e;
  --lip-good: #279a58;
  --lip-easy: #2f8ec4;
}
:root[data-theme="light"] {
  /* Transposition des mêmes lois : en clair, la luminance s'inverse (surfaces
     blanches sur canvas teinté) et une ombre TRÈS douce reste nécessaire —
     sans elle, blanc sur blanc n'a plus de bord. */
  --bg: #eef2fa;
  --bg2: #ffffff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --surface-2: #f4f7fe;
  --border: #dde5f1;
  --muted: #566480;   /* contraste AA : 4.36 → 5.2 sur canvas clair */
  --el-1: 0 1px 2px rgba(23, 40, 80, .07);
  --el-2: 0 3px 10px rgba(23, 40, 80, .08);
  --el-3: 0 14px 40px rgba(23, 40, 80, .14);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --press: rgba(14, 145, 196, .08);
  --aurora:
    radial-gradient(900px 460px at 82% -8%, rgba(14, 145, 196, .10), transparent 60%),
    radial-gradient(700px 420px at -10% 22%, rgba(107, 92, 255, .08), transparent 55%),
    radial-gradient(620px 500px at 110% 80%, rgba(230, 80, 190, .04), transparent 60%);
  --gold: #d99b12;
  --rose: #d64bad;
  --tg-track: #dde4ee;
  --tg-track-brd: #c8d2e0;
  --tg-knob: #ffffff;
  --tg-track-on: linear-gradient(180deg, #17aede, #0e91c4);
  --tg-knob-on: #ffffff;
  --tg-glow: 0 0 10px rgba(14, 145, 196, .35);
  --lip-accent: #0a6e96;
  --lip-panel: #c9d4e2;
  --lip-violet: #4f43c2;
  --lip-again: #c73a52;
  --lip-hard: #cf8a2e;
  --lip-good: #279a58;
  --lip-easy: #2f8ec4;
}
/* Bloc clair HISTORIQUE — réduit à ce qu'Aurora ne définit pas. Il vient
   APRÈS le bloc Aurora dans la cascade : y laisser --bg/--panel/--muted
   annulait silencieusement les valeurs v3 (les surfaces par luminance et le
   --muted corrigé pour l'AA). Une seule source de vérité par token. */
:root[data-theme="light"] {
  --text: #17202b;
  --accent: #0e91c4; --accent-soft: rgba(14,145,196,.12); --violet: #6b5cff;
}
/* (le body prend --aurora + --bg, tous deux redéfinis par thème) */
:root[data-theme="light"] .tabbar { background: rgba(255,255,255,.92); }
:root[data-theme="light"] .btn-ans.ans-1,
:root[data-theme="light"] .btn-ans.ans-2,
:root[data-theme="light"] .btn-ans.ans-3,
:root[data-theme="light"] .btn-ans.ans-4 { color: #fff; }
html, body { margin: 0; height: 100%; }
body {
  /* la nuit vivante : auroras fixes, jamais un aplat */
  background: var(--aurora), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  user-select: none;
}
#app { min-height: 100dvh; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }

/* ── écrans ── */
.screen { padding: calc(var(--safe-t) + 10px) 14px calc(86px + var(--safe-b)); min-height: 100dvh; }
.screen-full { padding: 0; }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 14px; }
.brand { font-size: 19px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 800; }
.gem { filter: drop-shadow(0 0 8px rgba(70,224,255,.6)); }
.header-right { display: flex; gap: 8px; align-items: center; }

.chip-today { background: var(--accent-soft); border: 1px solid rgba(70,224,255,.35);
  color: var(--accent); border-radius: 999px; padding: 5px 10px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; }
.sync-pill { background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.sync-pill.spin { color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sync-pill.err { color: var(--again); border-color: rgba(255,93,115,.4); }

.pull-hint { position: fixed; top: calc(var(--safe-t) + 4px); left: 0; right: 0; text-align: center;
  color: var(--accent); font-size: 13px; opacity: 0; transition: opacity .15s; z-index: 5; pointer-events: none; }
.pull-hint.show { opacity: 1; }

.streak-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg, rgba(70,224,255,.10), rgba(139,123,255,.10));
  border: 1px solid rgba(70,224,255,.25); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.streak-banner b { color: var(--accent); font-size: 17px; white-space: nowrap; }

/* ── sections decks ── */
.deck-section { margin-bottom: 18px; }
.deck-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--muted); margin: 4px 4px 8px; font-weight: 700; }
.deck-rows { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(14px); }
.deck-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid rgba(29,43,64,.6); position: relative; }
.deck-row:last-child { border-bottom: none; }
.deck-row:active { background: rgba(70,224,255,.06); }
.deck-row .indent { flex: none; }
.deck-chevron { flex: none; width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 11px; transition: transform .15s; }
.deck-chevron.open { transform: rotate(90deg); }
.deck-chevron.leafpad { visibility: hidden; }
.deck-main { flex: 1; min-width: 0; }
.deck-name { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.deck-sub { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; }
.eta-badge { color: var(--violet); font-weight: 600; }
.deck-counts { flex: none; display: flex; gap: 5px; font-variant-numeric: tabular-nums; }
.deck-counts span { min-width: 26px; text-align: center; border-radius: 8px; padding: 3px 6px;
  font-size: 13px; font-weight: 700; }
.cnt-new { color: var(--new); background: rgba(79,168,255,.12); }
.cnt-learn { color: var(--learn); background: rgba(255,125,99,.12); }
.cnt-rev { color: var(--rev); background: rgba(61,220,132,.12); }
.cnt-done { background: transparent; min-width: auto; color: var(--rev); opacity: .55; }
.cnt-done .mg-i { width: 15px; height: 15px; vertical-align: -3px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-done { background: var(--rev); box-shadow: 0 0 6px rgba(61,220,132,.8); }
.st-new { background: var(--new); }
.st-partial { background: var(--hard); }
.st-idle { background: #2a3a52; }
.show-more { text-align: center; padding: 10px; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.deckfoot { display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 20px 0 12px; }
.deckfoot .muted { font-size: 12px; }
.btn-create-deck { display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 14px; font-weight: 600; font-size: 14px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(70,224,255,.4); }
.btn-create-deck:active { background: rgba(70,224,255,.22); }
.btn-create-deck .mg-i { width: 17px; height: 17px; }
.text-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font: inherit; font-size: 16px; }
.text-input:focus { outline: none; border-color: rgba(70,224,255,.6); }

/* ── vue decks : liste ou cité ── */
.view-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 5px; margin: 0 0 14px; }
.view-toggle button { display: flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 0; color: var(--muted); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; font-weight: 700; }
.view-toggle button svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.view-toggle button.active { background: var(--accent-soft); color: var(--accent); }
.deck-icon { flex: none; font-size: 15px; color: var(--accent); }
.city-grid { margin-top: 2px; }
.city-card { position: relative; transition: transform .12s; }
.city-card:active { transform: scale(.97); }
.city-card.has-due { border-color: rgba(70,224,255,.45);
  box-shadow: 0 0 0 1px rgba(70,224,255,.25), 0 6px 20px rgba(70,224,255,.08); }
.city-card.done { opacity: .62; }
.city-card.done:active { opacity: 1; }
.city-badge { position: absolute; top: 8px; right: 8px; z-index: 2; min-width: 22px;
  height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent);
  color: #04121d; font-size: 12px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 0 10px rgba(70,224,255,.5); }
/* le backlog n'est plus le héros (le CTA « Réviser » l'est) → discret */
.city-total { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: 12px; }

/* ── CTA héro « Réviser » — un seul point d'entrée, framing objectif ── */
.hero-cta { display: flex; align-items: center; gap: 13px; width: 100%; margin: 2px 0 14px;
  min-height: 64px; padding: 10px 16px; border: none; border-radius: 18px; text-align: left;
  background: linear-gradient(120deg, var(--accent), #7ef0ff); color: #08131f;
  box-shadow: 0 8px 26px rgba(70,224,255,.28); }
.hero-cta:active { transform: scale(.985); }
.hero-cta .hc-i { width: 24px; height: 24px; flex: none; }
.hero-cta .hc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hero-cta .hc-t b { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; }
.hero-cta .hc-t small { font-size: 12.5px; font-weight: 650; opacity: .72; }
.hero-cta .hc-badge { flex: none; font-size: 13px; font-weight: 800; padding: 5px 11px;
  border-radius: 999px; background: rgba(8,19,31,.18); font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .hero-cta { color: #fff;
  background: linear-gradient(120deg, #0e91c4, #26b8e8); box-shadow: 0 8px 26px rgba(14,145,196,.3); }

/* ── skeletons (le shimmer préfigure le layout, pas un spinner) ── */
.skel { position: relative; overflow: hidden; background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.055) 50%, transparent 68%);
  animation: shim 1.15s linear infinite; }
:root[data-theme="light"] .skel::after {
  background: linear-gradient(100deg, transparent 32%, rgba(0,0,0,.05) 50%, transparent 68%); }
@keyframes shim { to { transform: translateX(100%); } }

/* ── stats : métrique héro (cartes mûres = la ville) ── */
.hero-stat { background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--panel);
  border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.hs-main b { font-size: 44px; font-weight: 900; letter-spacing: -2px; line-height: 1;
  font-variant-numeric: tabular-nums; display: block; }
.hs-main span { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted); font-weight: 700; }
.hs-side { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.hs-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.hs-chip.hs-up { color: var(--rev); border-color: rgba(61,220,132,.4); }

/* ── fin de session (séquence tap-through) ── */
.sess-end { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 8px; cursor: pointer; }
.sess-end h2 { margin: 2px 0 4px; }
.se-grid { display: flex; gap: 10px; width: 100%; max-width: 330px; margin-top: 6px; }
.se-cell { flex: 1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 6px; text-align: center; }
.se-cell b { display: block; font-size: 24px; font-weight: 850; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; }
.se-cell span { font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); font-weight: 700; }
.se-rewards { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--accent); }
.se-rewards .mg-i { width: 15px; height: 15px; vertical-align: -2px; }
.se-tap { font-size: 12.5px; margin-top: 16px; animation: pulse 1.6s ease-in-out infinite; }
.se-exit { color: var(--rev); font-weight: 700; font-size: 14.5px; }
.se-exit .mg-i { width: 16px; height: 16px; vertical-align: -3px; }
.streak-step .flame-big .mg-i { width: 74px; height: 74px; color: #ff9d54;
  filter: drop-shadow(0 0 26px rgba(255,157,84,.65)); }
.streak-num { font-size: 76px; font-weight: 900; letter-spacing: -4px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.streak-lbl { font-size: 14px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.6px; }
.streak-step.ms .flame-big .mg-i { width: 92px; height: 92px;
  animation: msGlow 1.4s ease-in-out infinite; }
.ms-lbl { margin-top: 6px; font-size: 15px; font-weight: 800; color: #ff9d54; }
@keyframes msGlow { 0%,100% { filter: drop-shadow(0 0 18px rgba(255,157,84,.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 42px rgba(255,157,84,.95)); transform: scale(1.06); } }
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }

/* streak en jeu (soir, rien révisé) */
.streak-banner.risk { border-color: rgba(255,157,84,.55);
  background: linear-gradient(120deg, rgba(255,157,84,.14), rgba(255,93,115,.10)); }
.streak-banner.risk .mg-i { animation: riskFlame .8s ease-in-out infinite; }
@keyframes riskFlame { 0%,100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.18) rotate(3deg); } }

/* jours gelés (streak freeze) dans le heatmap */
.heatmap i.hm-frozen { background: transparent;
  border: 1.5px dashed var(--accent); box-sizing: border-box; }

/* ── accessibilité : motion réduit ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important; }
}
.city-due { display: flex; justify-content: center; gap: 5px; margin: 7px 0 2px;
  font-variant-numeric: tabular-nums; }
.city-due span { min-width: 26px; text-align: center; border-radius: 8px; padding: 3px 6px;
  font-size: 12px; font-weight: 700; }
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.icon-choice { height: 48px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--accent); font-size: 22px; }
.icon-choice.sel { border-color: rgba(70,224,255,.65); background: var(--accent-soft); }
.icon-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }

/* ── reviewer ── */
.reviewer { position: fixed; inset: 0; background: var(--bg); z-index: 40;
  display: flex; flex-direction: column; }
.rv-top { display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 8px) 10px 8px; }
.rv-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; min-width: 44px; height: 44px; font-size: 16px; }
.rv-btn:disabled { opacity: .35; }
.rv-deck { flex: 1; min-width: 64px; font-weight: 700; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rv-counts { display: flex; gap: 6px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.rv-counts .c-hide { display: none; }
.c-new { color: var(--new); } .c-learn { color: var(--learn); } .c-rev { color: var(--rev); }
.rv-counts .active-count { text-decoration: underline; }
.rv-progress { height: 4px; background: #121e30; }
#rv-progress-fill { height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  box-shadow: 0 0 8px rgba(70,224,255,.7); transition: width .3s ease; }
.rv-btn.on { background: var(--accent-soft); border-color: rgba(70,224,255,.6); color: var(--accent); }
.voice-hud { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: linear-gradient(120deg, rgba(70,224,255,.08), rgba(139,123,255,.08));
  border-bottom: 1px solid var(--border); }
.voice-orb { width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #7ef0ff, var(--accent)); }
.voice-hud.listen .voice-orb { animation: orbPulse 1.1s ease-in-out infinite; }
.voice-hud.speak .voice-orb { background: radial-gradient(circle at 35% 30%, #b9a8ff, var(--violet));
  animation: orbPulse .7s ease-in-out infinite; }
.voice-hud.think .voice-orb { background: radial-gradient(circle at 35% 30%, #ffd9a8, #ff9d54);
  animation: orbPulse 1.5s ease-in-out infinite; }
.voice-hud.think .voice-state { color: #ff9d54; }
.voice-orb { cursor: pointer; }
@keyframes orbPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(70,224,255,.5); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(70,224,255,0); } }
.voice-texts { flex: 1; min-width: 0; }
.voice-state { font-size: 13px; font-weight: 700; color: var(--accent); }
.voice-hud.speak .voice-state { color: var(--violet); }
.voice-heard { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rv-combo { position: absolute; top: calc(var(--safe-t) + 58px); right: 12px; z-index: 5;
  background: linear-gradient(120deg, rgba(70,224,255,.18), rgba(139,123,255,.18));
  border: 1px solid rgba(70,224,255,.5); color: var(--accent); font-weight: 800;
  border-radius: 999px; padding: 4px 12px; font-size: 14px; backdrop-filter: blur(8px); }
.rv-combo.pulse { animation: pulse .5s ease; }
@keyframes pulse { 40% { transform: scale(1.35); } }
.rv-cardwrap { flex: 1; min-height: 0; padding: 6px 5px; }
#rv-frame { width: 100%; height: 100%; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg2); }
.rv-player { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--border); }
.pl-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; height: 38px; min-width: 40px; font-size: 13px; font-weight: 700;
  padding: 0 8px; flex: none; }
.pl-btn:active { background: var(--accent-soft); }
.pl-main { color: var(--accent); font-size: 16px; }
.pl-speed { color: var(--violet); }
.pl-bar { flex: 1; height: 6px; background: #16223a; border-radius: 4px; overflow: hidden;
  min-width: 40px; }
:root[data-theme="light"] .pl-bar { background: #d7dfea; }
#pl-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--violet)); }
.pl-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 62px; text-align: center; }
.rv-controls { padding: 10px 12px calc(12px + var(--safe-b)); }
.btn-reveal { width: 100%; height: 58px; border-radius: 16px; border: 1px solid rgba(70,224,255,.5);
  background: var(--accent-soft); color: var(--accent); font-size: 17px; font-weight: 700; }
.btn-reveal:active { background: rgba(70,224,255,.25); }
.rv-answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.btn-ans { border: none; border-radius: 14px; padding: 9px 2px 10px; color: #08131f;
  font-weight: 800; font-size: 14.5px; display: flex; flex-direction: column; gap: 2px;
  align-items: center; min-height: 58px; justify-content: center; }
.btn-ans small { font-weight: 600; font-size: 11px; opacity: .75; }
.btn-ans:active { filter: brightness(1.15); }
.btn-ans:disabled { opacity: .5; }
.ans-1 { background: var(--again); color: #2b0a12; }
.ans-2 { background: var(--hard); color: #2b1c05; }
.ans-3 { background: var(--good); color: #06301b; }
.ans-4 { background: var(--easy); color: #05283f; }

.rv-congrats { position: absolute; inset: 0; background: var(--bg); z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 30px; text-align: center; }
.congrats-check { font-size: 62px; filter: drop-shadow(0 0 18px rgba(61,220,132,.6)); }
.congrats-stats { color: var(--muted); font-size: 15px; line-height: 1.7; }
.next-deck-card { background: var(--panel); border: 1px solid rgba(70,224,255,.4);
  border-radius: var(--radius); padding: 14px 18px; width: 100%; max-width: 340px; }
.next-deck-card .nd-title { color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px; }
.next-deck-card .nd-name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.countdown-bar { height: 4px; background: #12202f; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.countdown-bar div { height: 100%; background: var(--accent); width: 100%;
  animation: countdown 2.5s linear forwards; }
@keyframes countdown { to { width: 0%; } }

/* ── boutons génériques ── */
.btn-primary { background: linear-gradient(120deg, var(--accent), #37b6ff); border: none;
  color: #04121d; font-weight: 800; font-size: 16px; border-radius: 14px; padding: 14px; width: 100%; }
.btn-mini { background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.btn-sheet { display: flex; align-items: center; gap: 12px; width: 100%; background: none;
  border: none; color: var(--text); font-size: 16px; padding: 13px 6px; text-align: left;
  border-bottom: 1px solid rgba(29,43,64,.5); }
.btn-sheet:last-child { border-bottom: none; }
.btn-sheet:active { color: var(--accent); }
.btn-sheet.danger { color: var(--again); }

/* ── login ── */
#screen-login { display: flex; align-items: center; justify-content: center; }
.login-box { width: 100%; max-width: 320px; text-align: center; display: flex;
  flex-direction: column; gap: 12px; }
.login-gem { font-size: 56px; filter: drop-shadow(0 0 22px rgba(70,224,255,.7)); }
.login-box h1 { margin: 0; }
.login-box input { background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 13px; font-size: 16px; text-align: center; }
.login-err { color: var(--again); font-size: 13px; }

/* ── stats ── */
.stat-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; text-align: center; }
.stat-card b { display: block; font-size: 22px; color: var(--accent); }
.stat-card span { font-size: 11.5px; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; }
.panel h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); }
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
  gap: 3px; justify-content: start; }
/* Couleurs des niveaux en VARIABLES : aucune guerre de spécificité possible.
   (Deux bugs successifs venaient de là : `.heatmap i` battait `.hm-N`, puis
   `:root[data-theme="light"] .heatmap i` battait `.heatmap i.hm-N` → en mode
   clair toutes les cases prenaient le même gris = blanc sur blanc.) */
:root {
  --hm-0: #152030; --hm-1: #0e4a5e; --hm-2: #0f6b80;
  --hm-3: #139ab6; --hm-4: #2bc6e0; --hm-5: var(--accent);
}
:root[data-theme="light"] {
  --hm-0: #e6ecf3; --hm-1: #bfe6f2; --hm-2: #7fd0e6;
  --hm-3: #35aacb; --hm-4: #1584a5; --hm-5: #0a5f7d;
}
.heatmap i { width: 14px; height: 14px; border-radius: 3px; background: var(--hm-0); }
.heatmap i.hm-1, .hm-legend i.hm-1 { background: var(--hm-1); }
.heatmap i.hm-2, .hm-legend i.hm-2 { background: var(--hm-2); }
.heatmap i.hm-3, .hm-legend i.hm-3 { background: var(--hm-3); }
.heatmap i.hm-4, .hm-legend i.hm-4 { background: var(--hm-4); }
.heatmap i.hm-5, .hm-legend i.hm-5 { background: var(--hm-5); }
.heatmap i.hm-5 { box-shadow: 0 0 6px rgba(70,224,255,.7); }
:root[data-theme="light"] .heatmap i.hm-5 { box-shadow: none; }
.heatmap i.hm-pad { background: transparent !important; }
.hm-legend i { background: var(--hm-0); }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 11px; color: var(--muted); }
.hm-legend i { width: 12px; height: 12px; border-radius: 3px; }
.hm-legend span:first-child { margin-right: 2px; }
.hm-legend span:last-child { margin-left: 2px; }

/* ── bouton gemme Cristal dans le reviewer ── */
.rv-btn-gem { color: var(--accent); border-color: rgba(70,224,255,.45); }
.rv-btn-gem:active { background: var(--accent-soft); }

.pd-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid rgba(29,43,64,.5); }
.pd-row:last-child { border: none; }
.pd-row b { font-variant-numeric: tabular-nums; color: var(--accent); }

/* ── cristal : jeu plein écran embarqué ── */
.screen-game { position: fixed; inset: 0; z-index: 25; background: #0a0e16; overflow: hidden; }
#cristal-stage { position: absolute; inset: 0; transform-origin: center center;
  will-change: transform; }
/* Le jeu s'adapte aux DEUX orientations : son plateau est un canvas à taille
   fixe dans un conteneur scrollable, donc l'iframe n'a qu'à remplir l'écran.
   (Avant : rotation 90° forcée en portrait + « tourne ton téléphone ».) */
#cristal-frame { border: 0; display: block; width: 100%; height: 100dvh;
  transform: none; }
/* Le jeu occupe ses 4 coins (statut en haut, FABs en bas) → nos boutons zoom
   vivent sur le bord GAUCHE, centrés verticalement : la seule zone libre,
   dans les deux orientations. */
.game-zoom { position: fixed; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: 8px;
  transition: opacity .18s ease, transform .18s ease; }
/* une modale du jeu est ouverte → nos contrôles s'effacent (ils flottent
   au-dessus de l'iframe entière, donc au-dessus de ses menus) */
.game-zoom.gz-hidden { opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(.92); }
.game-zoom-btn { width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(10,14,22,.55);
  backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center;
  justify-content: center; }
.game-zoom-btn[hidden] { display: none; }
.game-zoom-btn svg { width: 20px; height: 20px; }
.game-zoom-btn:active { background: rgba(10,14,22,.8); }
.game-loading { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: #0a0e16; z-index: 1; }
/* le retour fait partie du même bloc de contrôles d'app, séparé du zoom */
.game-back { margin-bottom: 10px; }

/* ── réglages ── */
.settings { display: flex; flex-direction: column; gap: 10px; }
.set-h { margin: 14px 2px 0; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); }
.set-h:first-child { margin-top: 2px; }
.hour-wrap { display: flex; align-items: center; gap: 6px; color: var(--muted);
  font-weight: 700; font-size: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; font-size: 14.5px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: #1a2940; border-radius: 999px;
  transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px;
  height: 22px; border-radius: 50%; background: #52657f; transition: .2s; }
.switch input:checked + span { background: rgba(70,224,255,.35); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--accent); }

/* ── sheet ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--panel-solid); border: 1px solid var(--border); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 8px 18px calc(16px + var(--safe-b));
  max-height: 82dvh; overflow-y: auto; animation: sheetup .22s ease; }
@keyframes sheetup { from { transform: translateY(60%); opacity: .4; } }
.sheet-grip { width: 40px; height: 4px; background: #2c3d57; border-radius: 4px;
  margin: 6px auto 10px; }
.sheet h3 { margin: 4px 0 12px; font-size: 17px; }
.field-edit { margin-bottom: 12px; }
.field-edit label { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .8px; display: block; margin-bottom: 5px; }
.field-edit textarea { width: 100%; min-height: 74px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 10px;
  font-size: 15px; font-family: inherit; user-select: text; }
.explain-out { font-size: 15px; line-height: 1.65; user-select: text; }
/* ── rendu Markdown (Claude, cartes) ── */
.md { user-select: text; }
.md p { margin: 0 0 10px; line-height: 1.6; }
.md h1, .md h2, .md h3, .md h4 { margin: 14px 0 8px; line-height: 1.3; }
.md h1 { font-size: 20px; } .md h2 { font-size: 17px; color: var(--accent); }
.md h3 { font-size: 15px; } .md h4 { font-size: 14px; color: var(--muted); }
.md ul, .md ol { margin: 6px 0 12px; padding-left: 22px; }
.md li { margin: 3px 0; line-height: 1.5; }
.md strong { color: #fff; font-weight: 700; }
.md em { color: #d8e2f0; }
.md code { background: #0c1524; border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
.md pre { background: #0c1524; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; overflow-x: auto; margin: 10px 0; }
.md pre code { background: none; border: 0; padding: 0; }
.md blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 2px 0 2px 12px;
  color: var(--muted); }
.md a { color: var(--accent); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px;
  display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 7px 10px; text-align: left;
  color: var(--text); background: rgba(12,21,36,.6); }
.md th { background: rgba(70,224,255,.12); color: var(--accent); font-weight: 700; }
.flag-row { display: flex; gap: 10px; padding: 10px 0; }
.flag-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; }
.flag-dot.sel { border-color: #fff; }
.fl-0 { background: #2a3a52; } .fl-1 { background: #ff5d73; } .fl-2 { background: #ffb454; }
.fl-3 { background: #3ddc84; } .fl-4 { background: #4fa8ff; }

/* ── toasts ── */
#toasts { position: fixed; top: calc(var(--safe-t) + 10px); left: 0; right: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--panel-solid); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: toastin .25s ease; max-width: 88vw; }
.toast.gold { border-color: rgba(255,180,84,.6); color: var(--hard); }
.toast.cyan { border-color: rgba(70,224,255,.6); color: var(--accent); }
@keyframes toastin { from { transform: translateY(-16px); opacity: 0; } }

/* ── v1.1 : flag, rewards, lightbox, objectif ── */
.rv-flag { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip-done { border-color: rgba(61,220,132,.5) !important; color: var(--rev) !important;
  background: rgba(61,220,132,.1) !important; }
.goal-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
.reward-pop { position: absolute; top: calc(var(--safe-t) + 96px); right: 12px; z-index: 7;
  background: rgba(24, 32, 50, .92); border: 1px solid rgba(255, 214, 110, .55);
  color: #ffd66e; border-radius: 999px; padding: 5px 13px; font-weight: 800;
  font-size: 13.5px; pointer-events: none; animation: rewardup 1.5s ease forwards; }
@keyframes rewardup {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}
#lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(2, 4, 8, .96); }
#lb-track { position: absolute; inset: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
#lb-track::-webkit-scrollbar { display: none; }
.lb-page { flex: 0 0 100%; width: 100%; height: 100dvh; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center; overflow: auto; }
.lb-page-img { overflow: hidden; }
.lb-page-img img { max-width: 96vw; max-height: 88vh; transform-origin: center;
  transition: transform .2s; user-select: none; -webkit-user-drag: none; border-radius: 8px;
  will-change: transform; }
.lb-page-desc { padding: 0; }
#lb-desc { width: 100vw; height: 100dvh; border: 0; background: var(--bg2); }
.lb-close { position: fixed; top: calc(var(--safe-t) + 10px); right: 14px; z-index: 92; }
.lb-hint { position: fixed; bottom: calc(28px + var(--safe-b)); left: 0; right: 0; z-index: 92;
  text-align: center; color: var(--accent); font-size: 13px; font-weight: 600;
  pointer-events: none; transition: opacity .5s; }
.lb-hint.fade { opacity: 0; }
.lb-dots { position: fixed; bottom: calc(12px + var(--safe-b)); left: 0; right: 0; z-index: 92;
  display: flex; gap: 7px; justify-content: center; pointer-events: none; }
.lb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lb-dots i.on { background: var(--accent); }
.congrats-extends { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── éditeur WYSIWYG ── */
.fmt-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 2; background: var(--panel-solid);
  padding: 4px 0; flex-wrap: wrap; }
.fmt-btn { min-width: 38px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 15px; padding: 0 8px; }
.fmt-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.fmt-btn.on { background: var(--accent-soft); border-color: rgba(70,224,255,.6); color: var(--accent); }
.fmt-btn:active { background: var(--accent-soft); border-color: rgba(70,224,255,.4); }
.fmt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.rich-field { min-height: 46px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); padding: 11px 12px; font-size: 16px;
  line-height: 1.55; user-select: text; -webkit-user-select: text; outline: none;
  overflow-wrap: anywhere; }
.rich-field:focus { border-color: rgba(70,224,255,.45); }
.rich-field img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-field table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
.rich-field td, .rich-field th { border: 1px solid var(--border); padding: 4px 8px; }
.rich-field b, .rich-field strong { color: #fff; }
.field-edit textarea { transition: height .1s; line-height: 1.5; }
.ed-preview { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--bg2); }
.ed-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ed-preview-frame { width: 100%; height: 260px; border: 0; background: var(--bg2); display: block; }

/* ── v1.2 : capitale, ask, hors-ligne, réglages ── */
.hour-input { background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 8px 10px; width: 64px; font-size: 15px; text-align: center; }
.capital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-card { background: rgba(10, 16, 28, .6); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; text-align: center; }
.cap-card:active { border-color: rgba(70,224,255,.4); }
.cap-img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 6px; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.cap-fallback { font-size: 46px; line-height: 84px; }
.cap-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cap-stage { font-size: 11px; color: var(--muted); margin: 2px 0 7px; }
.cap-bar { height: 5px; background: #121e30; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.cap-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), #37b6ff); }
.cap-bar2 div { background: linear-gradient(90deg, #ffd66e, #ffb454); }
.src-h { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  margin: 14px 0 6px; }
.num-input { background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px; width: 100%; font-size: 16px; }

/* ── Rewind Wrapped ── */
.rw-persona { text-align: center; padding: 8px 0 12px; }
.rw-emoji { font-size: 44px; }
.rw-name { font-size: 20px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.rw-tag { font-size: 14px; color: var(--muted); }
.rw-punch { text-align: center; font-size: 16px; font-style: italic; color: var(--text);
  margin: 10px 4px 14px; }
.rw-slides p { font-size: 14.5px; line-height: 1.55; margin: 0 0 9px; padding-left: 12px;
  border-left: 2px solid var(--border); }
.rw-theme { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14.5px; font-weight: 600; margin-top: 8px; }
.rw-theme b { color: var(--accent); }
.rw-bar { height: 5px; background: #16223400; background: rgba(120,140,170,.15);
  border-radius: 4px; overflow: hidden; margin: 3px 0; }
.rw-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); }
.rw-blurb { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.rw-skill { padding: 7px 0; border-bottom: 1px solid rgba(120,140,170,.12); }
.rw-skill-t { font-size: 14.5px; font-weight: 600; }
.rw-skill-d { font-size: 12.5px; }
.rw-reco { margin-top: 14px; background: var(--accent-soft); border: 1px solid rgba(70,224,255,.3);
  border-radius: 12px; padding: 10px 12px; font-size: 14px; }

/* ── icônes SVG (remplacent les emojis d'interface) ── */
.mg-i { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; }
h3 .mg-i, h4 .mg-i { color: var(--accent); margin-right: 4px; width: 1.1em; height: 1.1em; }
.deck-section h3 .mg-i { width: 15px; height: 15px; vertical-align: -3px; }
.btn-sheet .mg-i { width: 20px; height: 20px; flex: none; margin-right: 10px; color: var(--accent); }
.btn-mini .mg-i { width: 16px; height: 16px; vertical-align: -3px; }
.tab .mg-i, .tab span svg { width: 22px; height: 22px; }
.tab span { display: flex; }
.tab.active .mg-i { filter: drop-shadow(0 0 6px rgba(70,224,255,.45)); }
.login-gem .mg-i { width: 60px; height: 60px; color: var(--accent);
  filter: drop-shadow(0 0 22px rgba(70,224,255,.65)); }
.gem .mg-i { width: 21px; height: 21px; color: var(--accent); vertical-align: -4px;
  filter: drop-shadow(0 0 8px rgba(70,224,255,.55)); }
.sync-pill { display: inline-flex; align-items: center; gap: 5px; }
.sync-pill .mg-i { width: 16px; height: 16px; flex: none; }
@media (max-width: 430px) { .sync-pill span { display: none; } }
.sync-pill.spin .mg-i { animation: spin 1s linear infinite; }
.sync-pill.spin { animation: none; }
.rv-btn .mg-i { width: 19px; height: 19px; vertical-align: -4px; }
.chip-today .mg-i { width: 13px; height: 13px; vertical-align: -2px; }
.streak-banner .mg-i { width: 20px; height: 20px; color: #ff9d54; flex: none; }
.congrats-check { font-size: 0; }
.congrats-check .mg-i { width: 64px; height: 64px; color: var(--rev);
  filter: drop-shadow(0 0 18px rgba(61,220,132,.55)); }
.pl-btn .mg-i { width: 18px; height: 18px; vertical-align: -4px; }
.game-back { display: flex; align-items: center; justify-content: center; }
.game-back .mg-i { width: 20px; height: 20px; }
.cap-fallback .mg-i { width: 40px; height: 40px; color: var(--muted); }
.rw-reco .mg-i, .px-link .mg-i { color: var(--accent); }
.reward-pop .mg-i { width: 14px; height: 14px; vertical-align: -2px; }

/* ── cité isométrique : bâtiments peints sur île peinte ── */
.iso-board { position: relative; z-index: 0;  /* stacking context → jamais par-dessus le reviewer */
  width: 100%; aspect-ratio: 1 / 1.03; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06); touch-action: pan-y;
  background: radial-gradient(120% 80% at 50% 8%, #17324f 0%, #0d1b2e 42%, #080f1d 100%); }
.city-zoom { position: absolute; top: 10px; right: 10px; z-index: 30;
  display: flex; flex-direction: column; gap: 8px; }
/* contenu transformable (zoom/pan à 2 doigts) — l'île + les bâtiments ensemble */
.iso-stage { position: absolute; inset: 0; transform-origin: center center; will-change: transform;
  background:
    radial-gradient(70% 40% at 50% 92%, rgba(70, 224, 255, .07), transparent 70%),
    url("/capital/iso-island.webp") center bottom / 100% auto no-repeat; }
.iso-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none; }
.iso-board .loading { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; }
.city-empty { position: absolute; left: 8%; right: 8%; top: 40%; text-align: center;
  padding: 14px; z-index: 3; }
.iso-b { position: absolute; transform: translate(-50%, -100%); width: 22%;
  text-align: center; transition: transform .12s; cursor: pointer; }
.iso-b:active { transform: translate(-50%, -100%) scale(.94); }
.iso-contact { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 40%);
  width: 78%; height: 22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 68%); }
.iso-b img { width: 100%; display: block;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); }
.iso-b.has-due img { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45))
  drop-shadow(0 0 8px rgba(70, 224, 255, .5)); }
/* labels = couche UI au-dessus de TOUS les sprites (dans .iso-stage → zoome
   avec la ville), ancrés au pied de chaque bâtiment */
.iso-stage .b-label { position: absolute; transform: translateX(-50%);
  display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; color: #eaf3ff;
  padding: 2px 7px; border-radius: 8px; letter-spacing: .2px; line-height: 1.3;
  background: rgba(9, 14, 24, .72); border: 1px solid rgba(255,255,255,.07);
  max-width: 96px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; z-index: 400; pointer-events: none; }
.iso-stage .b-label b { color: var(--accent); font-weight: 800; margin-left: 5px;
  font-variant-numeric: tabular-nums; flex: none; }
.iso-b .city-badge { position: absolute; top: -2px; right: 2%; z-index: 4;
  min-width: 20px; height: 20px; font-size: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.4),
    0 0 8px rgba(70,224,255,.5); }
.city-b-fallback { width: 52px; height: 52px; margin: 0 auto; border-radius: 14px;
  background: rgba(10, 16, 28, .7); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted); }
.city-others { margin-top: 8px; }

/* ── Praxis ── */
.px-verdict { display: inline-block; padding: 5px 14px; border-radius: 999px;
  font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.px-ok { background: rgba(61,220,132,.15); color: var(--rev); border: 1px solid rgba(61,220,132,.4); }
.px-mid { background: rgba(255,180,84,.14); color: var(--hard); border: 1px solid rgba(255,180,84,.4); }
.px-ko { background: rgba(255,93,115,.14); color: var(--again); border: 1px solid rgba(255,93,115,.4); }
.px-row { font-size: 14px; line-height: 1.55; margin: 8px 0; user-select: text; }
.px-row b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 2px; }
.px-row ul { margin: 4px 0 0; padding-left: 20px; }
.px-corr b { color: var(--again); }
.px-link { color: var(--muted); font-style: italic; }

/* Praxis inline — au moment de la question, sous la carte */
.rv-praxis:not(:empty) { margin-bottom: 10px; }
.px-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 14px; font-weight: 600; font-size: 14px; color: var(--violet);
  background: linear-gradient(120deg, rgba(139,123,255,.12), rgba(70,224,255,.07));
  border: 1px solid rgba(139,123,255,.38); transition: background .15s; }
.px-cta:active { background: rgba(139,123,255,.22); }
.px-cta .mg-i { width: 18px; height: 18px; }
.px-panel { border: 1px solid rgba(139,123,255,.38); border-radius: 16px; padding: 12px;
  background: linear-gradient(180deg, rgba(139,123,255,.07), transparent 55%), var(--panel); }
.px-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px;
  color: var(--violet); margin-bottom: 9px; }
.px-head .mg-i { width: 17px; height: 17px; }
.px-head span { flex: 1; }
.px-close { width: 30px; height: 30px; border-radius: 9px; color: var(--muted);
  background: transparent; border: 1px solid var(--border); flex: none; }
.px-close .mg-i { width: 14px; height: 14px; }
.px-panel textarea { width: 100%; min-height: 74px; resize: none; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.45; }
.px-panel textarea:focus { outline: none; border-color: rgba(139,123,255,.6); }
.px-bar { display: flex; gap: 8px; margin-top: 10px; }
.px-mic { display: flex; align-items: center; gap: 7px; padding: 0 16px; height: 46px;
  border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--accent); flex: none;
  background: var(--accent-soft); border: 1px solid rgba(70,224,255,.42); }
.px-mic .mg-i { width: 18px; height: 18px; }
.px-mic.rec { color: #fff; background: linear-gradient(120deg, #ff5a7a, #ff3d63);
  border-color: #ff5a7a; animation: pxpulse 1.15s ease-in-out infinite; }
.px-mic.busy { opacity: .6; }
@keyframes pxpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,61,99,.5); }
  50% { box-shadow: 0 0 0 9px rgba(255,61,99,0); } }
.px-go { flex: 1; height: 46px; border-radius: 12px; font-weight: 700; font-size: 15px;
  color: #08131f; background: linear-gradient(120deg, var(--accent), #7ef0ff); border: none; }
.px-go:disabled { opacity: .55; }
.px-out:not(:empty) { margin-top: 12px; max-height: 34vh; overflow-y: auto; }

/* ── tabbar ── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: rgba(10, 15, 25, .92); backdrop-filter: blur(18px);
  border-top: 1px solid var(--border); padding: 6px 8px calc(6px + var(--safe-b)); }
.tab { flex: 1; background: none; border: none; color: var(--muted); font-size: 11px;
  display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 5px 0;
  font-weight: 600; border-radius: 12px; }
.tab span { font-size: 20px; filter: grayscale(1) opacity(.6); }
.tab.active { color: var(--accent); }
.tab.active span { filter: none; }

/* ═════════════════════════════════════════════════════════════════════════
   CRISTAL NUIT V2 — couche game-grade (refonte 2026-07-27)
   Placée en FIN de feuille : à spécificité égale, elle surclasse la v1.
   Tout consomme les tokens :root (les 2 thèmes y sont définis) — aucune
   couleur de thème en dur ici.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Typo display (titres + grands chiffres) ── */
.brand, .rv-congrats h2, .sess-end h2, .streak-num,
.se-cell b, .hs-main b, .stat-card b, .hero-cta .hc-t b,
.sheet h3, .set-h, .deck-section h3 {
  font-family: var(--font-display);
}
.hc-badge, #rv-combo, .city-badge, .cnt-new, .cnt-learn, .cnt-rev {
  font-family: var(--font-display);
}

/* ── Surfaces : lumière d'arête + élévation ── */
.panel, .set-row, .stat-card, .se-cell,
.hero-stat, .px-panel, .sheet, .toast, .rv-btn, .btn-mini {
  box-shadow: var(--card-hi), var(--el-1);
}
.panel, .hero-stat { box-shadow: var(--card-hi), var(--el-2); }
.sheet { box-shadow: var(--card-hi), var(--el-3); }

/* ── TOGGLE V2 — le composant réparé (2 thèmes, relief, glow) ── */
.switch { width: 52px; height: 32px; }
.switch span {
  background: var(--tg-track);
  border: 1px solid var(--tg-track-brd);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease,
              box-shadow var(--dur-base) ease;
}
:root[data-theme="light"] .switch span { box-shadow: inset 0 1px 3px rgba(23,32,43,.14); }
.switch span::after {
  top: 3px; left: 3px; width: 24px; height: 24px;
  background: linear-gradient(180deg, #fcfeff, var(--tg-knob));
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform var(--dur-base) var(--spring), background var(--dur-base) ease;
}
:root[data-theme="light"] .switch span::after {
  background: #fff;
  box-shadow: 0 2px 4px rgba(23, 32, 43, .25), inset 0 -1px 0 rgba(23, 32, 43, .06);
}
.switch input:checked + span {
  background: var(--tg-track-on);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), var(--tg-glow);
}
.switch input:checked + span::after {
  transform: translateX(22px);   /* 3 + 24 + 22 = 49 → 3px de marge à droite */
  background: var(--tg-knob-on);
}
/* appui maintenu : le pouce s'étire légèrement (langage iOS/jeux) */
.switch:active span::after { width: 27px; }
.switch:active input:checked + span::after { transform: translateX(19px); }

/* ── PHYSIQUE DE BOUTON (lèvre qui s'écrase, façon Duolingo) ── */
.btn-primary, .px-go {
  border: none; border-radius: 14px;
  background: linear-gradient(180deg, #5fe6ff, var(--accent) 55%);
  color: #062330;
  box-shadow: 0 4px 0 var(--lip-accent), var(--el-1);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .px-go {
  background: linear-gradient(180deg, #23b2e2, var(--accent) 60%);
  color: #fff;
}
.btn-primary:active, .px-go:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip-accent), var(--el-1);
}
.hero-cta {
  box-shadow: 0 5px 0 var(--lip-accent), 0 10px 26px rgba(70, 224, 255, .25);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.hero-cta:active {
  transform: translateY(5px) scale(1);
  box-shadow: 0 0 0 var(--lip-accent), 0 4px 14px rgba(70, 224, 255, .2);
}
.btn-reveal {
  border: none;
  background: linear-gradient(180deg, rgba(70, 224, 255, .22), rgba(70, 224, 255, .12));
  box-shadow: 0 4px 0 rgba(18, 138, 168, .55), var(--card-hi);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn-reveal:active {
  transform: translateY(4px);
  background: linear-gradient(180deg, rgba(70, 224, 255, .28), rgba(70, 224, 255, .16));
  box-shadow: 0 0 0 rgba(18, 138, 168, .55), var(--card-hi);
}
/* les 4 notes — chacune sa lèvre, l'appui « tampon » de jeu */
.btn-ans {
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn-ans.ans-1 { box-shadow: 0 4px 0 var(--lip-again); }
.btn-ans.ans-2 { box-shadow: 0 4px 0 var(--lip-hard); }
.btn-ans.ans-3 { box-shadow: 0 4px 0 var(--lip-good); }
.btn-ans.ans-4 { box-shadow: 0 4px 0 var(--lip-easy); }
.btn-ans:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }
.btn-ans:disabled { transform: none; opacity: .55; }
/* secondaires : pression douce, pas de lèvre (hiérarchie) */
.btn-mini, .btn-sheet, .rv-btn, .pl-btn, .px-mic, .px-cta, .btn-create-deck,
.game-zoom-btn, .deck-row, .set-row, .cap-card {
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
.btn-mini:active, .btn-sheet:active, .rv-btn:active, .pl-btn:active,
.px-mic:active, .px-cta:active, .btn-create-deck:active {
  transform: scale(.965);
}
.deck-row:active, .set-row:active { background: var(--press); }

/* ── TABBAR V2 — pill animée sous l'onglet actif ── */
.tabbar { padding-top: 8px; }
.tab { position: relative; z-index: 1; }
.tab-pill {
  position: absolute; z-index: 0; top: 7px; height: 52px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(70, 224, 255, .16), rgba(70, 224, 255, .07));
  box-shadow: inset 0 0 0 1px rgba(70, 224, 255, .22);
  transition: left var(--dur-base) var(--spring), width var(--dur-base) var(--spring);
  pointer-events: none;
}
:root[data-theme="light"] .tab-pill {
  background: linear-gradient(180deg, rgba(14, 145, 196, .14), rgba(14, 145, 196, .06));
  box-shadow: inset 0 0 0 1px rgba(14, 145, 196, .22);
}
.tab.active .mg-i { transform: translateY(-1px) scale(1.08); }
.tab .mg-i { transition: transform var(--dur-base) var(--spring); }

/* ── SHEETS V2 ── */
.sheet {
  border: none; border-radius: 26px 26px 0 0;
  background:
    linear-gradient(180deg, rgba(70, 224, 255, .05), transparent 90px),
    var(--panel-solid);
  padding-top: 10px;
}
.sheet-grip { width: 44px; height: 5px; background: var(--border); }
.sheet h3 { font-size: 18px; letter-spacing: -.3px; }
@keyframes sheetup { from { transform: translateY(48%); opacity: .5; } }
.sheet { animation: sheetup 260ms var(--spring); }
.btn-sheet { border-radius: 14px; }

/* ── TOASTS V2 ── */
.toast {
  font-family: var(--font-display);
  padding: 10px 20px;
  animation: toastin 300ms var(--spring);
}
@keyframes toastin { from { transform: translateY(-18px) scale(.92); opacity: 0; } }

/* ── CHIPS / COMPTEURS ── */
.deck-counts span { border-radius: 9px; font-weight: 800; }
.cnt-new { box-shadow: inset 0 0 0 1px rgba(79, 168, 255, .22); }
.cnt-learn { box-shadow: inset 0 0 0 1px rgba(255, 125, 99, .22); }
.cnt-rev { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .22); }

/* ── RÉGLAGES V2 : icône-badge par rangée (façon jeu) ── */
.set-i {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(70, 224, 255, .18), var(--card-hi);
  color: var(--accent);
}
:root[data-theme="light"] .set-i { box-shadow: inset 0 0 0 1px rgba(14, 145, 196, .18), var(--card-hi); }
.set-i .mg-i { width: 19px; height: 19px; }
.set-i.vio { background: rgba(139, 123, 255, .12); color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(139, 123, 255, .2), var(--card-hi); }
.set-i.warm { background: rgba(255, 157, 84, .12); color: #ff9d54;
  box-shadow: inset 0 0 0 1px rgba(255, 157, 84, .2), var(--card-hi); }
.set-i.green { background: rgba(61, 220, 132, .1); color: var(--rev);
  box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .2), var(--card-hi); }
.set-row { gap: 12px; border-radius: 18px; }
.set-row > div:not(.set-i):not(.hour-wrap) { flex: 1; min-width: 0; }
.set-main { flex: 1; min-width: 0; }

/* ── divers chrome ── */
.app-header .brand { letter-spacing: -.4px; }
.view-toggle button { transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.lb-close, .lightbox-close { box-shadow: var(--el-2); }
.voice-orb { box-shadow: 0 0 22px rgba(70, 224, 255, .35); }

/* ── motion d'écran : entrée douce au changement d'onglet ── */
.screen-enter { animation: screenIn 240ms var(--spring); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px) scale(.995); } }
/* stagger discret des rangées de decks au premier rendu */
.deck-rows .deck-row { animation: rowIn 280ms var(--spring) backwards; }
.deck-rows .deck-row:nth-child(1) { animation-delay: 0ms; }
.deck-rows .deck-row:nth-child(2) { animation-delay: 22ms; }
.deck-rows .deck-row:nth-child(3) { animation-delay: 44ms; }
.deck-rows .deck-row:nth-child(4) { animation-delay: 66ms; }
.deck-rows .deck-row:nth-child(5) { animation-delay: 88ms; }
.deck-rows .deck-row:nth-child(n+6) { animation-delay: 105ms; }
@keyframes rowIn { from { opacity: 0; transform: translateY(7px); } }

/* ═══ PASSE « MULTINATIONALE » (2026-07-27) ═══ */

/* HUD header : anneau d'objectif + pill flamme tappable (fini la phrase) */
.goal-ring { width: 18px; height: 18px; flex: none; }
.chip-today { display: inline-flex; align-items: center; gap: 6px; }
.streak-banner { display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 4px 2px 0; box-shadow: none; }
.hud-flame { display: inline-flex; align-items: baseline; gap: 5px; flex: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 157, 84, .38);
  background: linear-gradient(180deg, rgba(255, 157, 84, .16), rgba(255, 157, 84, .07));
  color: var(--text); box-shadow: var(--card-hi), var(--el-1);
  font-family: var(--font-display);
  transition: transform var(--dur-fast) ease; }
.hud-flame:active { transform: scale(.94); }
.hud-flame .mg-i { width: 18px; height: 18px; color: #ff9d54; align-self: center; }
.hud-flame b { font-size: 17px; font-weight: 850; }
.hud-flame small { font-size: 11px; font-weight: 700; color: var(--muted); }
.hud-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-sub.hud-risk { color: #ff9d54; font-weight: 800; }
.streak-banner.risk .hud-flame { border-color: rgba(255, 157, 84, .7);
  box-shadow: 0 0 14px rgba(255, 157, 84, .35), var(--el-1); }

/* centre de streak (sheet) */
.streak-hero { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 2px; }
.streak-hero .sh-flame .mg-i { width: 46px; height: 46px; color: #ff9d54;
  filter: drop-shadow(0 0 16px rgba(255, 157, 84, .5)); }
.streak-hero b { font-family: var(--font-display); font-size: 52px; font-weight: 900;
  letter-spacing: -2.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.streak-hero .sh-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--muted); font-weight: 800; }
.sc-chips { display: flex; gap: 8px; justify-content: center; margin: 12px 0 14px;
  flex-wrap: wrap; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 700; padding: 6px 12px; border-radius: 999px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); }
.sc-chip .mg-i { width: 14px; height: 14px; color: var(--accent); }
.sc-daysrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin: 0 2px 6px; }
.sc-daysrow i { font-style: normal; text-align: center; font-size: 10.5px;
  font-weight: 800; color: var(--muted); letter-spacing: .5px; }
.sc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 2px; }
.sc-day { aspect-ratio: 1; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; background: var(--bg2); border: 1px solid var(--border); }
.sc-day i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.sc-day.done { background: linear-gradient(180deg, rgba(255, 157, 84, .28), rgba(255, 157, 84, .12));
  border-color: rgba(255, 157, 84, .45); }
.sc-day.done .mg-i { width: 17px; height: 17px; color: #ff9d54; }
.sc-day.frozen { border: 1.5px dashed rgba(70, 224, 255, .55); background: rgba(70, 224, 255, .06); }
.sc-day.frozen .mg-i { width: 15px; height: 15px; color: var(--accent); }
.sc-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-hint { font-size: 12px; text-align: center; margin: 12px 4px 14px; line-height: 1.5; }

/* lettres de jours du heatmap stats */
.hm-wrap { display: flex; gap: 6px; }
.hm-days { display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; flex: none; }
.hm-days i { font-style: normal; font-size: 9px; font-weight: 800; color: var(--muted);
  display: flex; align-items: center; }

/* reviewer : barre fantôme (le contenu d'abord, chrome en retrait) */
.rv-top .rv-btn { background: transparent; border-color: transparent; box-shadow: none; }
.rv-top .rv-btn:active { background: var(--press); }
.rv-top .rv-btn.on { background: var(--accent-soft); box-shadow: none; }
.rv-btn-gem { color: var(--accent); }

/* empty state motivant */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 30px 18px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--card-hi), var(--el-1); }
.empty-state .mg-i { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.empty-state b { font-family: var(--font-display); font-size: 16px; }
.empty-state span { font-size: 13px; color: var(--muted); max-width: 30ch; line-height: 1.5; }

/* accessibilité : anneau de focus clavier partout */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═════════════════════════════════════════════════════════════════════════
   AURORA V3 — application des 8 lois observées chez les apps au sommet
   (recherche : brand kits Duolingo/Opal/Revolut/Headspace + ADA 2023-25).
   Couche finale : à spécificité égale elle surclasse v1 et v2.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Loi 3 : ÉLÉVATION PAR LUMINANCE (dark) ──
   En sombre, une surface « monte » en s'éclaircissant. On retire les ombres
   noires diffuses héritées de v1/v2 ; le hairline de --el-* fait le bord. */
.panel, .set-row, .stat-card, .se-cell, .hero-stat,
.px-panel, .deck-rows, .toast, .empty-state, .sc-chip, .sc-day {
  background: var(--panel);
}
.deck-row { background: transparent; }
.deck-row:active, .set-row:active { background: var(--surface-2); }

/* ── Loi 6 : GÉOMÉTRIE CODIFIÉE — 4 crans, plus rien « au feeling » ── */
.deck-rows, .panel, .hero-stat, .empty-state { border-radius: 20px; }
.set-row, .stat-card, .se-cell, .px-panel { border-radius: 18px; }
.btn-mini, .btn-sheet, .rv-btn, .px-mic, .px-go, .btn-primary, .hero-cta,
.btn-reveal, .btn-ans, .btn-create-deck { border-radius: 14px; }
.cnt-new, .cnt-learn, .cnt-rev, .hs-chip, .sc-chip, .chip-today, .hud-flame,
.eta-badge, .city-badge, .hc-badge { border-radius: 999px; }

/* ── Loi 2 : UNE SEULE COULEUR AGIT (cyan). Aplat, pas dégradé ── */
.btn-primary, .px-go, .hero-cta {
  background: var(--accent);
  color: #04202c;
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .px-go,
:root[data-theme="light"] .hero-cta {
  background: #0a6f9c;   /* AA : blanc sur ce fond = 5.1:1 (l'accent pur = 3.6) */
  color: #fff;
}
.hero-cta { box-shadow: 0 5px 0 var(--lip-accent), 0 14px 34px rgba(70, 224, 255, .22); }
.btn-primary, .px-go { box-shadow: 0 4px 0 var(--lip-accent); }
.btn-primary:active, .px-go:active { box-shadow: 0 0 0 var(--lip-accent); }
/* le violet quitte les CTA : il redevient couleur de donnée/émotion */
.px-cta { background: transparent; border: 1px solid var(--border); color: var(--violet); }
.px-cta:active { background: var(--press); }

/* ── Loi 4 : CHIFFRES — display pour les héros, tabular pour le précis ── */
.deck-counts span, .rv-counts span, .hc-badge, .sc-chip,
.hour-input, .pl-time, .eta-badge, .city-badge, .hs-chip {
  font-variant-numeric: tabular-nums;
}
.rv-counts span { font-family: var(--font-num); font-size: 12px; letter-spacing: -.3px; }

/* ── Loi 1 : le canvas de marque respire — auroras déjà sur body ── */
.reviewer, .sheet, .screen-game { background: var(--aurora), var(--bg); }
.reviewer { background-attachment: fixed; }

/* ── ANNEAU ÉPAIS (Copilot) : le héros du header ── */
.goal-ring { width: 22px; height: 22px; }
.chip-today {
  padding: 6px 12px 6px 8px; gap: 7px; font-family: var(--font-display);
  font-weight: 800; font-size: 13px; letter-spacing: -.2px;
  background: var(--panel); border: 1px solid var(--border);
}
.chip-today.chip-done { background: rgba(61, 220, 132, .1); }

/* ── Grands chiffres : dégradé vertical clair→teinte (Wrapped/Strava) ── */
.hs-main b, .streak-num, .streak-hero b {
  background: linear-gradient(180deg, var(--text), var(--accent) 145%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.streak-hero b, .streak-num {
  background: linear-gradient(180deg, var(--text), #ff9d54 135%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-main b { font-size: 52px; letter-spacing: -2.5px; }

/* ── Sheets : surface + hairline, plus d'ombre noire ── */
.sheet { background: var(--aurora), var(--panel); border-top: 1px solid var(--border); }
.sheet-backdrop { background: rgba(4, 8, 20, .62); backdrop-filter: blur(2px); }

/* ── Header : la marque en display ── */
.app-header .brand { font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.set-h, .deck-section h3 { font-weight: 800; }

/* couverture display : tout ce qui « parle » au nom de la marque */
.login-box h1, .btn-primary, .px-go, .btn-reveal, .btn-ans, .btn-create-deck,
.tab, .view-toggle button, .btn-mini, .btn-sheet, .set-row b, .deck-name,
.sc-chip, .hs-chip, .empty-state b, .streak-lbl, .sh-lbl, .se-cell span,
.px-head, .congrats-stats, .ms-lbl, .se-exit {
  font-family: var(--font-display);
}
.login-box h1 { font-size: 34px; font-weight: 800; letter-spacing: -.8px; }
.btn-ans { font-weight: 800; }
.tab { font-weight: 700; letter-spacing: .1px; }

/* ── CARTE-BILLET de fin de session (langage Flighty) ──
   Un objet qu'on a envie de garder : souche perforée, données en mono
   tabular, cachet de deck. */
.ticket {
  width: 100%; max-width: 330px; margin: 6px auto 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--card-hi), var(--el-2);
}
.tk-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--muted);
}
.tk-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.tk-brand .mg-i { width: 14px; height: 14px; }
.tk-date { font-family: var(--font-num); letter-spacing: 0; text-transform: none; }
.tk-deck {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  padding: 14px 16px 4px; letter-spacing: -.4px;
}
/* la perforation : ligne pointillée + encoches latérales, comme un vrai billet */
.tk-perf { position: relative; margin-top: 10px; padding: 16px 16px 18px;
  border-top: 2px dashed var(--border); }
.tk-perf::before, .tk-perf::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--bg);
}
.tk-perf::before { left: -11px; }
.tk-perf::after { right: -11px; }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk-cell { text-align: center; }
.tk-cell b {
  display: block; font-family: var(--font-display); font-size: 27px; font-weight: 850;
  letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tk-cell b i { font-style: normal; font-size: 13px; opacity: .55; margin-left: 1px; }
.tk-cell span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--muted); font-weight: 800; }
.ticket .se-rewards { padding: 0 16px 16px; margin: 0; text-align: center; }

/* ── ÉCRAN-JALON (loi Opal) : objet précieux, noir pur, dégradés réservés ── */
.milestone {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 24px; background: #000; cursor: pointer;
}
.ms-art { width: min(82vw, 330px); aspect-ratio: 1; margin-bottom: -10px; }
.ms-art img { width: 100%; height: 100%; object-fit: contain;
  animation: msFloat 4.5s var(--ease) infinite; }
@keyframes msFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.ms-days {
  font-family: var(--font-display); font-size: 78px; font-weight: 900;
  letter-spacing: -3.5px; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #8fe9ff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-cap { font-size: 11.5px; text-transform: uppercase; letter-spacing: 2.4px;
  font-weight: 800; color: #7d92b8; }
.ms-tag {
  margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 16px; border-radius: 999px;
  color: #cfe9ff; border: 1px solid rgba(120, 200, 255, .3);
  background: linear-gradient(180deg, rgba(70, 224, 255, .14), rgba(139, 123, 255, .1));
}
.milestone .se-tap { color: #55688a; margin-top: 22px; }

/* ── LOI 2 : la couleur appartient à la DONNÉE (Copilot/Brilliant) ──
   Chaque deck porte --deck-h (teinte stable dérivée de son nom). Le chrome
   reste cyan ; c'est la donnée qui colore l'écran. Touche discrète : le
   point d'état, un liseré au tap, le cachet du billet. */
.deck-row .status-dot.st-new,
.deck-row .status-dot.st-partial { background: hsl(var(--deck-h, 190) 78% 60%); }
.deck-row:active { background:
  linear-gradient(90deg, hsl(var(--deck-h, 190) 78% 60% / .1), transparent 55%), var(--surface-2); }
.ticket .tk-deck { color: hsl(var(--deck-h, 190) 75% 72%); }
:root[data-theme="light"] .ticket .tk-deck { color: hsl(var(--deck-h, 190) 62% 38%); }
:root[data-theme="light"] .deck-row .status-dot.st-new,
:root[data-theme="light"] .deck-row .status-dot.st-partial {
  background: hsl(var(--deck-h, 190) 62% 48%); }

/* ── GLINT du cristal à l'activation de l'onglet (loi Airbnb 2025) ── */
.tab[data-tab="cristal"].active .mg-i { animation: gemGlint 900ms var(--ease) 1; }
@keyframes gemGlint {
  0% { filter: drop-shadow(0 0 0 rgba(70,224,255,0)); transform: translateY(-1px) scale(1.08); }
  35% { filter: drop-shadow(0 0 10px rgba(70,224,255,.9)) brightness(1.5); transform: translateY(-1px) scale(1.16) rotate(-4deg); }
  100% { filter: drop-shadow(0 0 6px rgba(70,224,255,.45)); transform: translateY(-1px) scale(1.08); }
}

/* ── Réglage typographique du grotesque : tracking serré sur les grandes
   tailles (le réflexe premium — Revolut serre jusqu'à -2.7px sur ses
   display), interlignage resserré sur les titres. Les petites tailles
   gardent un tracking neutre pour la lisibilité. */
.app-header .brand, .login-box h1, .rv-congrats h2, .sess-end h2,
.streak-hero b, .streak-num, .ms-days, .hs-main b, .tk-deck, .tk-cell b,
.se-cell b, .stat-card b, .hero-cta .hc-t b, .sheet h3 {
  letter-spacing: var(--track-tight);
}
.ms-days { letter-spacing: -.045em; }
.hs-main b, .streak-hero b, .streak-num { letter-spacing: -.035em; }
.deck-name, .set-row b { letter-spacing: -.008em; }
/* les libellés capitales gardent leur respiration */
.set-h, .deck-section h3, .ms-cap, .sh-lbl, .streak-lbl,
.se-cell span, .tk-cell span, .tk-top { letter-spacing: .09em; }

/* ═══ RÉORGANISATION DES ACTIONS (2026-07-28) ═══ */

/* Palette de commande : deux modes pour une même intention */
.cmd-modes { display: flex; gap: 6px; margin: 2px 0 12px; padding: 4px;
  background: var(--bg); border-radius: 14px; border: 1px solid var(--border); }
.cmd-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 8px; border: none; border-radius: 11px; background: none;
  color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cmd-mode .mg-i { width: 16px; height: 16px; }
.cmd-mode.on { background: var(--surface-2); color: var(--accent);
  box-shadow: var(--card-hi); }
.cmd-quick { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); }

/* Titres de groupe dans les feuilles : la nature de l'action se lit d'un coup */
.sh-group { font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 14px 2px 6px; }
.sh-group:first-of-type { margin-top: 6px; }
/* l'action primaire d'une feuille se distingue sans crier */
.btn-sheet.primary { background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(70, 224, 255, .28); font-weight: 700; }
.btn-sheet.primary .mg-i { color: var(--accent); }

/* Compteurs déplacés sous la barre de progression : même nature d'info
   (« où j'en suis »), et la barre du haut ne garde que des ACTIONS. */
.rv-top .rv-deck { flex: 1; min-width: 0; }
.rv-counts { justify-content: flex-end; gap: 8px; padding: 6px 14px 2px; }
.rv-counts span { opacity: .75; }
.rv-counts .active-count { opacity: 1; text-decoration: none; position: relative; }
.rv-counts .active-count::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; }

/* ══ ARCHITECTURE V4 — des portes qu'on voit ═══════════════════════════════
   Fondement : un geste composé sans signifiant n'est découvert que par ~6 %
   des utilisateurs contre 100 % pour un élément visible (Sadana et al.). Les
   options de deck vivaient uniquement sous l'appui long ; elles ont désormais
   un bouton. Le geste survit comme raccourci, jamais comme seul accès.       */

/* Bouton ⋯ de la ligne de deck. Discret au repos (il ne doit pas concurrencer
   les compteurs, qui portent l'information), franc au contact. */
/* PAS d'opacity ici : à .62 le gris se délavait sur le fond clair et tombait à
   2,52:1, sous le plancher de 3:1 des éléments d'interface (WCAG 1.4.11) — or
   c'est le seul indice visible des options d'un deck, il doit être lisible.
   La discrétion vient de la couleur (--muted, calibrée dans les deux thèmes),
   pas d'une transparence qui détruit le contraste. */
.deck-more { flex: none; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border: none; background: transparent; border-radius: 10px;
  color: var(--muted); position: relative; transition: background .16s var(--ease),
  color .16s var(--ease), transform .16s var(--spring); }
.deck-more .mg-i { width: 18px; height: 18px; }
/* cible tactile portée à 44px sans épaissir la ligne (recommandation Apple) */
.deck-more::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
.deck-more:active { color: var(--accent); background: var(--accent-soft); transform: scale(.9); }
@media (hover: hover) { .deck-more:hover { color: var(--text); background: var(--press); } }
.deck-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Le CTA et ses modes forment un bloc : « quoi faire » puis « comment ».
   Écouter et Feed étaient un onglet et un tiroir — ils sont maintenant là où
   la question se pose, visibles et libellés. */
.hero-block { margin: 2px 0 14px; }
.hero-block .hero-cta { margin: 0; }
.hero-modes { display: flex; gap: 8px; margin-top: 8px; }
.hmode { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 0 12px; border-radius: 14px; font-size: 14px; font-weight: 650;
  letter-spacing: -.01em; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--el-1);
  transition: transform .16s var(--spring), background .16s var(--ease); }
.hmode .mg-i { width: 17px; height: 17px; color: var(--muted); flex: none; }
.hmode:active { transform: scale(.97); background: var(--press); }
.hmode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Écran poussé (Réglages) : le retour est à gauche du titre, l'en-tête garde
   sa ligne de base. */
#screen-more .app-header { gap: 10px; }
#screen-more .app-header .brand { flex: 1; }

/* Pastille d'objectif réduite à son anneau quand le CTA héro porte déjà le
   chiffre (voir renderDecks). L'anneau seul reste lisible d'un coup d'œil, et
   l'en-tête retrouve la place nécessaire à la roue dentée. */
.chip-today.ring-only { padding-left: 6px; padding-right: 6px; gap: 0; }
.chip-today.ring-only > span { display: none; }
/* filet de sécurité : les contrôles ne débordent jamais, le titre cède d'abord */
.app-header { gap: 8px; }
.app-header .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.app-header .header-right { flex: none; }

/* ══ ACCUEIL V5 — une seule bande avant le contenu ═════════════════════════
   Mesuré sur l'écran réel : le contenu commençait à 43 % de la hauteur, après
   SIX bandes empilées. Les neuf apps de référence mesurées n'en empilent
   jamais deux : Apple Fitness démarre à ~14 %, Things 3 et Oura à ~19 %.
   Trois causes retirées ici — le wordmark (Apple : ne pas titrer une vue avec
   le nom de l'app), la bande de série (aucune app n'en pose une pleine largeur
   entre l'en-tête et le contenu), et l'action principale, qui sort du flux.  */

/* ── En-tête : la série à gauche, les contrôles à droite ── */
#screen-decks .app-header { gap: 10px; min-height: 44px; }
#screen-decks .app-header .hud-flame { margin-right: auto; }
#screen-decks .app-header .hud-flame[hidden] { display: none; }
/* ⚠️ La série vaut 0 tant qu'aucune carte n'a été revue dans la journée : la
   flamme est alors masquée, et l'en-tête n'avait plus qu'un enfant — les
   contrôles retombaient à GAUCHE chaque matin. On les ancre à droite quoi
   qu'il arrive plutôt que de dépendre de la présence du voisin. */
#screen-decks .app-header .header-right { margin-left: auto; }

/* ── Sélecteur de vue : onglets compacts, collés au contenu (Material) ── */
.view-tabs { display: flex; gap: 4px; margin: 0 0 10px; position: relative; }
.view-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--border); }
.view-tabs button { position: relative; z-index: 1; background: none; border: 0;
  padding: 7px 14px 9px; font-size: 13.5px; font-weight: 700; color: var(--muted);
  letter-spacing: -.01em; transition: color .16s var(--ease); }
.view-tabs button::after { content: ""; position: absolute; left: 10px; right: 10px;
  bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent;
  transition: background .16s var(--ease); }
.view-tabs button.active { color: var(--accent); }
.view-tabs button.active::after { background: var(--accent); }
.view-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
  border-radius: 8px; }

/* ── Action principale ancrée : hors du flux, dans la zone du pouce ──
   Apple note que le haut de l'écran est la zone la MOINS confortable à
   atteindre ; Material ancre le FAB en bas. La barre se pose juste au-dessus
   de la tabbar, et l'écran gagne le rembourrage correspondant pour que le
   dernier deck reste atteignable (Material : le FAB ne doit pas masquer de
   contenu important). */
.home-action { position: fixed; z-index: 29; left: 12px; right: 12px;
  bottom: calc(72px + var(--safe-b)); display: flex; gap: 8px;
  animation: haIn .32s var(--spring) both; }
/* ⚠️ le keyframe `to` est OBLIGATOIRE ici : avec `fill: both` et un `from`
   seul, le navigateur fige le translateY de départ — la barre restait 14 px
   trop bas et mordait sur la tabbar. */
@keyframes haIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .home-action { animation: none; } }
.home-action[hidden] { display: none; }

.ha-go { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center;
  gap: 12px; padding: 0 16px; border: none; border-radius: 18px; text-align: left;
  background: linear-gradient(120deg, var(--accent), #7ef0ff); color: #08131f;
  box-shadow: 0 10px 30px rgba(70, 224, 255, .3), 0 2px 8px rgba(0, 0, 0, .2);
  transition: transform .16s var(--spring); }
.ha-go:active { transform: scale(.978); }
.ha-go .ha-i { width: 22px; height: 22px; flex: none; }
.ha-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ha-t b { font-family: var(--font-display); font-size: 17px; font-weight: 800;
  letter-spacing: -.3px; }
.ha-t small { font-size: 12.5px; font-weight: 650; opacity: .78; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.ha-more { flex: none; width: 56px; min-height: 56px; display: flex; align-items: center;
  justify-content: center; border-radius: 18px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); box-shadow: var(--el-1),
  0 8px 24px rgba(0, 0, 0, .18); transition: transform .16s var(--spring); }
.ha-more:active { transform: scale(.94); background: var(--press); }
.ha-more .mg-i { width: 20px; height: 20px; }
.ha-go:focus-visible, .ha-more:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 3px; }

/* série en jeu : c'est l'action qui porte l'alerte, pas une bande à part */
.home-action.risk .ha-go { background: linear-gradient(120deg, #ff9d54, #ff7d63);
  box-shadow: 0 10px 30px rgba(255, 157, 84, .32), 0 2px 8px rgba(0, 0, 0, .2); }

/* le dernier deck doit pouvoir passer au-dessus de la barre ancrée */
#screen-decks { padding-bottom: calc(146px + var(--safe-b)); }

:root[data-theme="light"] .ha-go { color: #fff;
  background: linear-gradient(120deg, #0e91c4, #26b8e8);
  box-shadow: 0 10px 30px rgba(14, 145, 196, .3), 0 2px 8px rgba(0, 0, 0, .08); }
:root[data-theme="light"] .ha-more { box-shadow: var(--el-1), 0 8px 24px rgba(20, 40, 80, .1); }

/* ── Correctifs de contraste, thème clair ────────────────────────────────
   Le cyan de marque (#0e91c4) est lisible en SURFACE mais pas en TEXTE sur
   fond clair : 3,19:1 pour un onglet actif, et 3,58:1 pour du blanc posé
   dessus. Or WCAG ne classe « grand texte » qu'à partir de 18,5 px en gras :
   « Réviser » (17 px, 800) et « Liste » (13,5 px, 700) relèvent donc du seuil
   normal de 4,5:1. On introduit une déclinaison ENCRE de l'accent, réservée au
   texte, sans toucher au cyan des surfaces.
   (Apple tolérerait 3:1 pour tout gras ; on retient la règle la plus stricte,
   comme sur le reste de l'app.) */
:root { --accent-ink: var(--accent); }
:root[data-theme="light"] { --accent-ink: #0a6f9c; }   /* 4,97:1 sur le fond clair */

.view-tabs button.active { color: var(--accent-ink); }
.view-tabs button.active::after { background: var(--accent-ink); }

/* dégradé du CTA resserré sur des tons assez sombres pour que le blanc tienne
   4,5:1 SUR TOUTE sa longueur (mesuré 5,57:1 à gauche, 4,75:1 à droite) */
:root[data-theme="light"] .ha-go { color: #fff;
  background: linear-gradient(120deg, #08658f, #0a6f9c);
  box-shadow: 0 10px 30px rgba(10, 111, 156, .28), 0 2px 8px rgba(0, 0, 0, .08); }

/* Le sous-titre du CTA était à opacity .78 : mélangé au fond, cela le ramenait
   à 4,04:1 en thème clair, sous le seuil de 4,5:1 (12,5 px = texte normal).
   .9 le remonte à ~4,7:1 sans le rendre aussi présent que le titre. */
.ha-t small { opacity: .9; }

/* ⚠️ TROISIÈME occurrence du même défaut : le cyan de marque employé comme
   TEXTE sur le fond de page. Il est fait pour les surfaces, pas pour les
   glyphes : 3,19:1 en thème clair. `--accent-ink` est sa déclinaison encre. */
/* même défaut, débusqué par l'audit automatique des contrastes */
.pull-hint { color: var(--accent-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   FLÂNERIE — le fil de lecture (ex-AnkiScroll, rapatrié dans l'app)
   ══════════════════════════════════════════════════════════════════════════
   Flâner n'est pas réviser : rien n'est demandé, rien n'est noté, rien n'est
   programmé. On relit ses cartes, verso compris, comme on feuillette.

   ⚠️ CE QUI EST VOLONTAIREMENT ABSENT, ET DOIT LE RESTER : aucun compteur
   « 12 / 11847 », aucun pourcentage de couverture, aucune durée, aucun décompte
   de cartes lues, aucune série, aucun XP. Mesurer une activité suffit à en
   réduire le plaisir (Etkin, JCR 2016) et les séries déplacent l'objet du désir
   (Silverman & Barasch 2023). Le rail montre une POSITION dans le passage en
   cours — une position ne se maximise pas. Si quelqu'un rajoute un compteur ici
   dans six mois de bonne foi, c'est cette note qu'il faut relire d'abord.

   Le CSS des types de notes vit dans le Shadow DOM de chaque carte ; ce bloc-ci
   ne stylise que le CHROME, en tokens Aurora uniquement.
   Bloc écrit en FIN de fichier : la cascade du projet est une pile de couches à
   spécificité égale, une règle insérée plus haut serait écrasée en silence. */

.flaneur {
  position: fixed; inset: 0; z-index: 40;      /* niveau reviewer : > tabbar 30 */
  display: flex; flex-direction: column;
  background: var(--aurora), var(--bg); background-attachment: fixed;
  overflow: hidden;
}

/* ── en-tête : une seule bande, calquée sur .rv-top ── */
.fl-top { display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 8px) 10px 8px; flex: none; }

.fl-scope { min-height: 44px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--card-hi), var(--el-1);
  padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text); max-width: 74vw; min-width: 0; }
.fl-scope b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-scope i { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: hsl(var(--deck-h, 190) 78% 60%); font-style: normal; }
.fl-scope span { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
:root[data-theme="light"] .fl-scope i { background: hsl(var(--deck-h, 190) 62% 48%); }

/* ── rail : la position dans le PASSAGE en cours, jamais dans le deck ── */
.fl-rail { height: 3px; flex: none; background: var(--surface-2); }
.fl-rail i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: hsl(var(--deck-h, 190) 78% 60%);
  transition: width var(--dur-base) var(--ease); }
:root[data-theme="light"] .fl-rail i { background: hsl(var(--deck-h, 190) 62% 48%); }
.flaneur.is-all .fl-rail i { background: var(--muted); }

/* ── le défilement : patron déjà éprouvé sur iOS par #lb-track ── */
.fl-track { flex: 1; position: relative; overflow-y: auto;
  overscroll-behavior: contain; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fl-track::-webkit-scrollbar { display: none; }
.fl-spacer { width: 1px; }

.fl-item { position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column;
  scroll-snap-align: start; scroll-snap-stop: always;
  padding: 10px 14px calc(64px + var(--safe-b)); }

/* ── coiffe : le chemin du deck, et l'état SEULEMENT s'il dit quelque chose ── */
.fl-cap { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 18px; margin-bottom: 8px; }
.fl-path { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-seal { display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); }
/* La couleur vit dans l'anneau, jamais dans le mot : --new (#4fa8ff) tombe à
   2,6:1 en texte sur le canvas clair, --hard (#ffb454) à 1,9:1. */
.fl-seal::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid currentColor; flex: none; }
.fl-seal.is-new::before { border-color: var(--new); }
.fl-seal.is-hard::before { border-color: var(--hard); }

/* ── la ligne « repris ici », comme la barre des messages non lus ── */
.fl-resume { position: relative; height: 1px; margin: 2px 0 12px;
  background: hsl(var(--deck-h, 190) 78% 60% / .45); }
.fl-resume b { position: absolute; right: 0; top: -8px; padding: 0 6px;
  background: var(--bg); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }

/* ── le corps : SEULE zone scrollable de l'item ── */
.fl-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-user-select: text; user-select: text; scrollbar-width: none; }
.fl-body::-webkit-scrollbar { display: none; }
.fl-body.is-center { display: flex; flex-direction: column; justify-content: center; }

/* Le type de note peint son propre fond DANS le rectangle arrondi : la carte
   Anki reste visiblement l'objet d'Anki, posé sur le canvas Aurora. */
.fl-host { display: block; border-radius: 20px; overflow: hidden;
  background: var(--panel); box-shadow: var(--card-hi), var(--el-2); padding: 4px; }

.fl-broken { display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--border); font-size: 12px; color: var(--muted); }

/* ── la barre du pouce : les deux contrôles permanents sont EN BAS ── */
.fl-thumb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px calc(10px + var(--safe-b));
  background: linear-gradient(0deg, var(--bg) 40%, transparent);
  pointer-events: none; }
.fl-thumb > * { pointer-events: auto; }
.flaneur.no-thumb .fl-thumb { background: none; }
.fl-aside { min-height: 44px; border-radius: 14px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.fl-aside svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.fl-aside.is-on { background: var(--surface-2); border-color: hsl(38 100% 66% / .45); }
.fl-aside.is-on svg { color: var(--hard); }        /* le libellé reste --text */
.fl-more { width: 44px; height: 44px; border-radius: 50%; background: var(--panel);
  border: 1px solid var(--border); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; }
.fl-more svg { width: 20px; height: 20px; }
.fl-aside:active, .fl-more:active { transform: scale(.965); }

/* Tap sur le corps = escamoter le chrome. Raccourci pur : aucune action n'est
   accessible UNIQUEMENT par ce geste (un geste sans signifiant n'est trouvé que
   par ~6 % des gens, contre 100 % pour un élément visible — Sadana et al.). */
.flaneur.is-quiet .fl-top,
.flaneur.is-quiet .fl-thumb,
.flaneur.is-quiet .fl-rail { opacity: 0; pointer-events: none; }
/* ⚠️ .fl-thumb rend ses ENFANTS cliquables (pointer-events: auto) : neutraliser
   le conteneur ne suffit pas, et un tap en bas de l'écran mettrait une carte de
   côté alors que le bouton est invisible. */
.flaneur.is-quiet .fl-thumb > *,
.flaneur.is-quiet .fl-top > * { pointer-events: none; }
.fl-top, .fl-thumb, .fl-rail { transition: opacity var(--dur-fast) var(--ease); }

/* ── le palier : un temps d'arrêt, pas un mur — on le franchit en scrollant ── */
.fl-palier { max-width: 330px; margin: auto; background: var(--panel);
  border-radius: 20px; box-shadow: var(--card-hi), var(--el-2);
  padding: 20px 18px; text-align: center; }
.fl-palier .fl-k { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); }
.fl-palier h4 { font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: var(--track-tight); color: var(--text); margin: 8px 0 6px; }
.fl-palier p { font-size: 13.5px; color: var(--muted); margin: 0; }
.fl-palier hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.fl-palier .btn-primary { margin: 12px 0 0; }
.fl-mini { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
/* .btn-mini fait ~34 px : sous le plancher de 44 pt que le reste de l'écran
   s'impose. Or ce sont les SEULES portes de sortie du palier et de l'écran de
   fin. Relevé ici seulement, pour ne pas déplacer les boutons de toute l'app. */
.flaneur .btn-mini, .fl-orig .btn-mini {
  min-height: 44px; display: inline-flex; align-items: center; }
/* Deux éléments imbriqués, et non un seul avec -webkit-line-clamp : overflow
   découpe à la boîte de PADDING, donc le padding du bas d'un cadre unique
   laisse dépasser une tranche de la ligne suivante. Le texte est donc clippé
   par un enfant sans padding, à une hauteur d'exactement deux lignes. */
.fl-set { display: block; width: 100%; text-align: left; border-radius: 18px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; padding: 10px 12px; margin-top: 8px; }
.fl-set i { display: block; font-style: normal; line-height: 1.35;
  max-height: 2.7em; overflow: hidden; }

.fl-empty { max-width: 320px; margin: auto; text-align: center; color: var(--muted); }
.fl-empty svg { width: 30px; height: 30px; color: var(--muted); }
.fl-empty h4 { font-family: var(--font-display); font-size: 21px; font-weight: 800;
  letter-spacing: var(--track-tight); color: var(--text); margin: 10px 0 6px; }
.fl-empty p { font-size: 13.5px; margin: 0 0 4px; }

.fl-skel { flex: 1; margin: 12px 0 24px; border-radius: 20px; }

/* Parcours sans carte : la couleur dit l'indisponibilité, jamais une opacité
   (à .62 un gris tombe à 2,52:1, sous le plancher de 3:1 des éléments d'UI). */
.btn-sheet.fl-off, .btn-sheet.fl-off svg, .btn-sheet.fl-off span { color: var(--muted); }

/* Écran plein pour « Voir la carte d'origine » : le rendu EXACT du reviewer,
   iframe comprise — l'échappatoire honnête quand le fil déforme quelque chose. */
.fl-orig { position: fixed; inset: 0; z-index: 70; background: var(--bg);
  display: flex; flex-direction: column; }
.fl-orig .fl-top { justify-content: flex-start; }
.fl-orig iframe { flex: 1; width: 100%; border: 0; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .fl-track { scroll-snap-type: y proximity; }
  .fl-rail i { transition: none; }
  .fl-top, .fl-thumb, .fl-rail { transition: none; }
}

/* ⚠️ QUATRIÈME récidive du même défaut : `--accent` employé comme couleur de
   TEXTE. `.btn-sheet.primary` (l.1363) est l'action primaire de TOUTES les
   feuilles — « Réviser » du menu deck, « Classique » du menu des modes, le
   parcours actif de Flâner — et il tombe à 3,58:1 sur le fond de feuille clair,
   sous le seuil de 4,5:1 (16 px = texte normal). `--accent-ink` est la
   déclinaison encre prévue pour ça ; le cyan de marque reste sur la SURFACE. */
.btn-sheet.primary { color: var(--accent-ink); }