/* ============================================================
   Palette inspirée de tes cartes Anki : fond bleu nuit, kanji
   crème, accent rose (kun'yomi) / bleu (on'yomi), sections à
   bordure gauche colorée, pastilles arrondies, labels majuscules
   espacés.
   ============================================================ */
:root {
  --bg: #16162a;
  --panel: #1c1c34;
  --panel-alt: #12122a;
  --sidebar: #101020;
  --ink: #e0e0f0;
  --cream: #f0eadc;
  --muted: #8383b2;
  --muted-dim: #8181c0;
  --label-dim: #8383b7;
  --accent: #26739f;
  --accent-bright: #5bc8f5;
  --pink: #ff7a8a;
  --pink-dim: #c04060;
  --good: #3a7a3a;
  --good-bright: #5fae5f;
  --warn: #c07830;
  --warn-bright: #e0a050;
  --bad: #c04060;
  --bad-bright: #d68398;
  --border: #2a2a50;
  --radius: 12px;
  --sur-accent: #ffffff;
  /* Indique au navigateur de peindre en sombre ce qu'il dessine lui-même :
     ascenseurs, champs natifs, menus déroulants. Les thèmes clairs le
     redéfinissent ; les autres sont sombres et héritent d'ici. */
  color-scheme: dark;
}

/* ---------- Thèmes alternatifs (Pro) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3ee;
  --panel: #ffffff;
  --panel-alt: #f0ede6;
  --sidebar: #1c1c34;
  --ink: #232338;
  --cream: #2a2a45;
  --muted: #6b6b8a;
  --muted-dim: #6868a1;
  --label-dim: #6666a6;
  --accent: #26739f;
  --accent-bright: #1f6f9e;
  --pink: #d6455a;
  --pink-dim: #c04060;
  --good: #2e7d32;
  --good-bright: #388e3c;
  --warn: #b5730a;
  --warn-bright: #c9860f;
  --bad: #c0405f;
  --bad-bright: #c75470;
  --border: #ddd8cc;
  --sur-accent: #ffffff;
}

:root[data-theme="sakura"] {
  --bg: #1f1620;
  --panel: #2a1e2c;
  --panel-alt: #1a1220;
  --sidebar: #150e18;
  --ink: #f5e6ea;
  --cream: #ffd9e6;
  --muted: #b98aa0;
  --muted-dim: #a88196;
  --label-dim: #a97f94;
  --accent: #e0608a;
  --accent-bright: #ff8fb3;
  --pink: #ff6f91;
  --pink-dim: #c04570;
  --good: #4a9d6e;
  --good-bright: #6fc491;
  --warn: #c08a3a;
  --warn-bright: #e0a860;
  --bad: #d6455a;
  --bad-bright: #e68190;
  --border: #3a2838;
  --sur-accent: #10101c;
}

/* ---------- Palettes Pro supplémentaires (27/07/2026) ----------
   Quatre thèmes réservés aux comptes Pro. Contrastes et lisibilité
   daltonienne vérifiés par calcul, pas à l'œil :
   - --ink et --cream tiennent au moins 10:1 sur --bg et --panel (AA
     demande 4,5:1).
   - --good, --warn et --bad restent distinguables sous deuteranopie
     (ΔE ≥ 29 après simulation Viénot). C'est pour ça que le "bon" tire
     vers le turquoise et le "mauvais" vers le magenta : le canal bleu
     est intact chez le deutéranope, contrairement à l'opposition
     vert/rouge classique qui devient illisible.
   Script de vérification conservé dans le journal du 27/07.
   ---------------------------------------------------------------- */

/* Sumi — encre et papier washi */
:root[data-theme="sumi"] {
  color-scheme: light;
  --bg: #f2ede3;
  --panel: #fcf9f3;
  --panel-alt: #e7dfd0;
  --sidebar: #2a251e;
  --ink: #241f19;
  --cream: #3a3128;
  --muted: #6a5f50;
  --muted-dim: #716759;
  --label-dim: #726759;
  --accent: #1f5f80;
  --accent-bright: #14485f;
  --pink: #9c2f47;
  --pink-dim: #7a2438;
  --good: #066e82;
  --good-bright: #0a5a6b;
  --warn: #876107;
  --warn-bright: #6d4e06;
  --bad: #931f42;
  --bad-bright: #831c3b;
  --border: #d5cab6;
  --sur-accent: #ffffff;
}

/* Ai — mer et indigo */
:root[data-theme="ai"] {
  --bg: #0e1728;
  --panel: #152136;
  --panel-alt: #0a1220;
  --sidebar: #070d18;
  --ink: #dfe7f4;
  --cream: #f0f4ee;
  --muted: #8398bb;
  --muted-dim: #778aac;
  --label-dim: #788bb0;
  --accent: #3f8fd0;
  --accent-bright: #74c0f2;
  --pink: #e4738f;
  --pink-dim: #a84c66;
  --good: #4fd0b8;
  --good-bright: #7ae4d0;
  --warn: #d9a53c;
  --warn-bright: #f0c257;
  --bad: #cc3a66;
  --bad-bright: #dd688b;
  --border: #22334f;
  --sur-accent: #10101c;
}

/* Momiji — érables d'automne */
:root[data-theme="momiji"] {
  --bg: #1f1510;
  --panel: #2c1e16;
  --panel-alt: #18100c;
  --sidebar: #140d0a;
  --ink: #f2e4d8;
  --cream: #ffd9b8;
  --muted: #bb9a85;
  --muted-dim: #a3836f;
  --label-dim: #a7846f;
  --accent: #4a94b5;
  --accent-bright: #7bbdd8;
  --pink: #e0687e;
  --pink-dim: #a34156;
  --good: #4fd0b8;
  --good-bright: #7ae4d0;
  --warn: #e09a2e;
  --warn-bright: #f7bc55;
  --bad: #cc3a66;
  --bad-bright: #dd688b;
  --border: #3f2b21;
  --sur-accent: #10101c;
}

/* Take — bambou */
:root[data-theme="take"] {
  --bg: #0d1712;
  --panel: #14231b;
  --panel-alt: #09120d;
  --sidebar: #060e0a;
  --ink: #e0ecdf;
  --cream: #eef3d8;
  --muted: #8aa895;
  --muted-dim: #72907f;
  --label-dim: #70917e;
  --accent: #5aa8c4;
  --accent-bright: #84cde6;
  --pink: #df7b96;
  --pink-dim: #a4526a;
  --good: #4fd0b8;
  --good-bright: #7ae4d0;
  --warn: #d9a53c;
  --warn-bright: #f2c058;
  --bad: #cc3a66;
  --bad-bright: #dd688b;
  --border: #1f3327;
  --sur-accent: #10101c;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Supprime le délai de 300 ms que les navigateurs mobiles réservent au
     double-tap. Dans un quiz, chaque validation le subissait. */
  touch-action: manipulation;
  font-family: "Helvetica Neue", "Helvetica", "Arial", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Un seul ascenseur. `.app` faisait 100vh avec `overflow:hidden`, et
   `.content` defilait a l'interieur : comme le pied de page vit SOUS `.app`,
   la fenetre defilait aussi. Deux ascenseurs pour une meme page, dont un qui
   ne descendait jamais jusqu'au pied de page. C'est la fenetre qui defile,
   point — et `position:sticky` sur la barre marche alors tout seul. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 0 4px;
}
.brand-kanji {
  font-size: 30px;
  color: var(--cream);
  font-weight: bold;
}
.brand-text {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-btn:hover { background: var(--panel); color: var(--ink); }
.nav-btn.active { background: var(--accent); color: #fff; }

.sidebar-footer {
  margin-top: auto;
  font-size: 12px;
  color: var(--label-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 4px;
  line-height: 1.8;
}

.sidebar-legal {
  font-size: 11px;
  color: var(--label-dim);
  padding: 2px 4px 0;
  opacity: 0.7;
}

/* ---------- Pied de page légal ---------- */
/* Sous le .app (qui occupe 100vh) : visible en descendant la page, jamais
   écrasé par app.js (contrairement au contenu placeholder des sections
   .view, remplacé au chargement) — sert de mention légale réellement
   présente pour tout visiteur ou robot qui lit le HTML. */
.site-footer {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.site-footer a { color: var(--accent-bright); text-decoration: none; }

/* ---------- Content ---------- */
.content {
  flex: 1;
  /* Centre le contenu sous une barre qui va jusqu'aux bords : sans cette
     limite, les vues s'etalaient sur toute la largeur de l'ecran des que la
     colonne laterale a disparu. */
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.view { display: none; }
.view.active { display: block; }

h2 { margin-top: 0; font-size: 22px; color: var(--cream); font-weight: 700; }

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dashboard-header h2 { margin: 0; }
.mode-toggle {
  display: flex;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.mode-toggle-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.mode-toggle-btn:hover { color: var(--ink); }
.mode-toggle-btn.active { background: var(--accent); color: #fff; }
h3 {
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--muted-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.proverb-card {
  text-align: center;
  padding: 14px 20px;
}
.proverb-kanji {
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 1px;
}
.proverb-lecture {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.proverb-sens {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}

.resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: var(--accent-bright);
  flex-wrap: wrap;
}

/* ---------- Cadeau en attente (tableau de bord, 28/09/2026) ---------- */
.gamif-cadeau {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-color: var(--accent-bright);
  background: linear-gradient(135deg, var(--panel-alt), var(--panel));
  animation: gamifCadeauPulse 2.4s ease-in-out infinite;
}
@keyframes gamifCadeauPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 71, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(255, 196, 71, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gamif-cadeau { animation: none; }
}
.gamif-cadeau__emoji {
  font-size: 34px;
  line-height: 1;
}
.gamif-cadeau__texte {
  flex: 1;
  min-width: 160px;
}
.gamif-cadeau__titre {
  font-weight: 700;
}
.gamif-cadeau__detail {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-box {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}
.stat-box .num { font-size: 26px; font-weight: 700; color: var(--accent-bright); }
.stat-box .label {
  font-size: 12px; color: var(--muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ---------- Applications (page de téléchargement) ---------- */
.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.download-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}
.download-card.recommended { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright); }
.download-icon { font-size: 42px; line-height: 1; }
.download-card h3 { margin: 10px 0 4px; font-size: 18px; color: var(--cream); }
.download-card p { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.download-btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.download-btn:hover { background: var(--accent-bright); }
.download-btn.disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}
.download-tag {
  margin-top: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-bright);
  font-weight: 700;
}
.download-tag.soon { color: var(--warn-bright); }
.download-version {
  margin: 4px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--good-bright);
}
@media (max-width: 720px) {
  .download-grid { grid-template-columns: 1fr; }
}

/* ---------- Boutons ---------- */
button.primary {
  background: var(--accent);
  color: var(--sur-accent, #fff);
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease;
}
button.primary:hover { background: var(--accent-bright); }
button.primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
button.secondary:hover { background: var(--panel-alt); border-color: var(--accent); }
button.secondary:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary:disabled:hover { background: transparent; border-color: var(--border); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover { background: rgba(192, 64, 96, 0.12); }
button.small { padding: 5px 10px; font-size: 12px; }

/* ---------- Bloc "Abonnement Pro" (vue Compte) ---------- */
.pro-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--accent-bright);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.pro-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--accent-bright) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.pro-badge {
  display: inline-block;
  background: var(--accent-bright);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pro-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin: 2px 0 14px;
}
.pro-price span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.pro-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pro-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.pro-features li .pro-check {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(95, 174, 95, 0.18);
  color: var(--good-bright);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.pro-features li strong { color: var(--accent-bright); }
.pro-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--accent-bright);
  color: #ffffff;
  border: none;
  padding: 13px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease;
}
.pro-cta:hover { background: var(--accent); transform: translateY(-1px); }
.pro-note {
  font-size: 11.5px;
  color: var(--muted-dim);
  margin: 10px 0 0;
  text-align: center;
  line-height: 1.5;
}

/* ---------- Podium du classement (top 3 de la semaine) ---------- */
.lb-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 22px;
}
.lb-podium-item {
  flex: 1;
  min-width: 0;
  max-width: 150px;
  border-radius: 14px;
  padding: 16px 10px 14px;
  text-align: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.lb-podium-item.lb-me { box-shadow: 0 0 0 2px var(--accent-bright) inset; }
.lb-rank-1 {
  order: 2;
  padding-top: 26px;
  padding-bottom: 20px;
  border-color: #ffd447;
  background: linear-gradient(160deg, rgba(255, 212, 71, 0.16), var(--panel-alt) 70%);
}
.lb-rank-2 { order: 1; border-color: #c9c9d6; }
.lb-rank-3 { order: 3; border-color: #d7924c; }
.lb-medal { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.lb-podium-pseudo {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-podium-points { font-size: 21px; font-weight: 800; color: var(--accent-bright); }
.lb-podium-points span { font-size: 12px; font-weight: 500; color: var(--muted); }
.lb-rank-1 .lb-podium-points { color: #ffd447; }
.lb-rank-2 .lb-podium-points { color: #c9c9d6; }
.lb-rank-3 .lb-podium-points { color: #d7924c; }
.lb-podium-pct { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.lb-podium-temps { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.lb-table td.lb-rank { font-weight: 700; color: var(--muted); }
.lb-row-me td { background: rgba(41, 128, 185, 0.14); font-weight: 700; }
.lb-row-me td:first-child { border-radius: 8px 0 0 8px; }
.lb-row-me td:last-child { border-radius: 0 8px 8px 0; }

input, select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--panel-alt);
  color: var(--ink);
}
/* `:focus-visible` et non `:focus` : un champ cliqué à la souris n'a pas
   besoin de l'anneau. Même anneau que les cartes de deck, pour rester
   cohérent — un `outline: none` seul laisserait la navigation au clavier
   sans repère visible. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--muted-dim); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
th {
  color: var(--label-dim); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px;
}
tr:hover td { background: var(--panel-alt); }

.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-fill { height: 100%; background: var(--accent); }

.kj { font-size: 20px; color: var(--cream); }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}

.form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
}
/* Filtre "Mots à kanji groupés / simples" (09/09/2026) : 2 cases à cocher
   avec leur texte a cote, pas un champ avec sa legende au-dessus comme les
   autres .form-row label - sans cette regle plus specifique, la case et son
   texte se retrouvaient empiles verticalement en petit gris majuscule
   (heritage de la regle generique ci-dessus), invisibles/illisibles comme
   menu pour Paul. Non qualifiee a .form-row (depuis l'ajout de la modale
   par semaine, meme jour) : .filtre-mots est une classe dediee, jamais
   reutilisee ailleurs, donc pas de risque a la rendre generale pour qu'elle
   s'applique aussi dans .modal-box. */
.filtre-mots {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.filtre-mots label {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: normal;
}
/* Choix du mode (Vocabulaire/Ecriture/Traduction) dans la modale de semaine
   (28/09/2026) : boutons radio sur une ligne, au-dessus du filtre
   mots-groupes/simples ci-dessus qui s'applique aux 3 modes. */
.filtre-mode {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; width: 100%;
  margin-bottom: 4px;
}
.filtre-mode label {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: normal;
}

code {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--accent-bright);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Accueil : grille des semaines ---------- */
/* .review-week-card / .review-week-restart-btn (22/09/2026) partagent tout
   le style de .week-card / .week-restart-btn ci-dessous, mais restent des
   classes séparées exprès : renderDashboard() attache ses gestionnaires de
   clic avec document.querySelectorAll('.week-card')/('.week-restart-btn'),
   sur TOUT le document. Les réutiliser telles quelles depuis l'écran
   Réviser (grille de semaines Écriture/Traduction, voir renderReview())
   accrocherait aussi la logique de la modale du Tableau de bord sur ces
   cartes dès qu'on rouvre le Tableau de bord ensuite. */
.week-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
/* Grille Kana (28/09/2026) : les libelles de groupe ("Sons combines
   (KYA, SHA, CHA...)") sont bien plus longs que "S1" -- les forcer dans
   les 6 colonnes fixes de .week-grid les tasserait illisiblement. Colonnes
   plus larges et flexibles, tout en restant sur .week-grid pour heriter du
   reste (gap, media query mobile). */
.week-grid--kana {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.week-card, .review-week-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  background: var(--panel-alt);
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.week-card:hover, .review-week-card:hover { border-color: var(--accent-bright); transform: translateY(-1px); }
.week-card.empty, .review-week-card.empty { opacity: 0.4; border-top-color: var(--border); }
.week-num { font-weight: 700; font-size: 15px; color: var(--cream); }
.week-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.week-score {
  font-weight: 700; color: var(--good-bright); font-size: 13px; margin-top: 6px;
}
.week-score.muted { color: var(--muted-dim); font-weight: 400; }
.week-score-pct { color: var(--muted); font-weight: 400; font-size: 12px; }

.week-progress-bar {
  margin-top: 8px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.week-progress-fill {
  height: 100%;
  background: var(--good-bright);
  border-radius: 3px;
}
.week-progress-label {
  font-size: 12px;
  color: var(--good-bright);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.week-restart-btn, .review-week-restart-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.week-restart-btn:hover, .review-week-restart-btn:hover { border-color: var(--pink); color: var(--pink); }

/* Onglet "Special" (17/09/2026, reduit au 28/09/2026 a la seule carte
   Vocabulaire pratique -- Ecriture/Traduction/Double sont passes dans le
   choix de mode de la modale de semaine du tableau de bord). Le
   grid-template avec 1 seule carte etirerait celle-ci sur toute la largeur
   (auto-fit + 1fr) : max-width sur la carte evite que Special n'affiche
   un pave disproportionne le jour ou il n'y a plus qu'une seule entree. */
.special-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.special-mode-card { margin-bottom: 0; max-width: 340px; }

/* Type de test fait/en cours (09/09/2026) : quel filtre "Mots" a servi,
   affiché en petit à côté du score ou de la barre de progression. */
.week-type-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 4px;
}

/* Modale de choix par semaine (09/09/2026), ouverte au clic sur une carte
   de semaine du Tableau de bord -- le site reste visible en fond, assombri
   par le calque semi-transparent. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-tete h3 { margin: 0; }
.modal-fermer {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.modal-fermer:hover { color: var(--pink); }
/* Modale de trace des traits (tache #13, KanjiVG). Plus large que la
   modale de base (420px) pour laisser respirer le SVG et un eventuel
   second caractere (fiches "歳/才" a deux kanji). */
.modal-box--trace { max-width: 640px; }
.trace-blocs {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
}
.trace-bloc {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 160px;
}
.trace-bloc-titre { font-size: 22px; font-weight: 700; color: var(--cream); }
.trace-svg-wrap {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px;
}
/* 160px -> 220px le 28/09/2026 (demande de Paul : "bien visible, une
   taille assez grande") -- epaisseurs de trait et taille des numeros
   augmentees dans la meme proportion pour rester lisibles au lieu de
   paraitre plus fins sur un plus grand cadre. */
.svg-trace-kanji { width: 220px; height: 220px; }
.trait-squelette {
  fill: none; stroke: var(--border); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.trait-kanji {
  fill: none; stroke: var(--accent-bright); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
}
.numero-trait { font-size: 8px; fill: var(--muted); }
.trace-attribution {
  margin-top: 14px; font-size: 11px; color: var(--muted); text-align: center;
}
/* Version incrustee (mode Ecriture, 28/09/2026) : meme rendu que dans la
   modale, juste un peu d'espace au-dessus vu qu'elle suit directement le
   kanji dans la carte plutot que d'ouvrir un cadre a part. Taille reduite
   par rapport a la modale (220px) : la carte Ecriture ne fait que 440px de
   large, et un mot a deux kanji (ex. 二人) ne tenait plus a cote de l'autre
   a 220px -- il retombait a la ligne, ce qui donnait l'effet "trop grand,
   s'etend a la verticale" signale par Paul le 28/09/2026. Epaisseurs et
   numeros reduits dans la meme proportion. */
.trace-blocs--inline { margin-top: 14px; }
.trace-blocs--inline .svg-trace-kanji { width: 150px; height: 150px; }
.trace-blocs--inline .trait-squelette { stroke-width: 3; }
.trace-blocs--inline .trait-kanji { stroke-width: 3.5; }
.trace-blocs--inline .numero-trait { font-size: 6px; }

/* Zone du mode Ecriture (28/09/2026) : la carte question/reponse et la
   case de dessin cote a cote, horizontalement -- pas empilees l'une sous
   l'autre. flex-wrap repasse en colonne sur ecran etroit (mobile) plutot
   que de deborder, meme principe que .trace-blocs. */
.ecriture-zone {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start;
}
.ecriture-dessin {
  width: 220px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ecriture-dessin-titre { font-size: 13px; color: var(--muted); font-weight: 600; }
.canvas-ecriture {
  width: 200px; height: 200px; background: #fff; border-radius: 8px; border: 1px solid var(--border);
  touch-action: none; cursor: crosshair;
}
.trace-attribution a { color: var(--muted); }
.modal-reprise {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.modal-separateur {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------- Vocabulaire : blocs par kanji ---------- */
.kanji-block {
  margin-bottom: 18px;
  background: var(--panel-alt);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
}
.kanji-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kanji-block-head .kj { font-size: 26px; font-weight: bold; color: var(--cream); }
.kanji-block-head strong { color: var(--muted); font-weight: 400; font-size: 13px; font-style: italic; }
.kanji-block-head button { margin-left: auto; }

/* ---------- Flashcard de révision ---------- */
.flashcard-wrap { display: flex; flex-direction: column; align-items: center; padding: 30px 0; }
.flashcard {
  width: 440px;
  min-height: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.flashcard .front-word {
  font-size: 64px; font-weight: 700; color: var(--cream); line-height: 1.1;
}
.flashcard .front-word { text-wrap: balance; overflow-wrap: anywhere; }
.flashcard .front-word.front-word--long { font-size: 46px; }
.flashcard .front-word.front-word--tres-long { font-size: 32px; }
.flashcard .back-reading { font-size: 24px; color: var(--accent-bright); margin-top: 12px; font-weight: 700; }
.flashcard .back-meaning { font-size: 16px; margin-top: 8px; color: var(--muted); font-style: italic; }
.registre-badge{
  display:inline-block; vertical-align:middle; margin-left:7px;
  font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:lowercase;
  padding:1px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted);
}
/* Mode Ecriture (tache #14) : le kanji revele est ce que l'eleve doit
   apprendre a tracer -- on l'agrandit nettement par rapport aux autres
   modes (traduction/pratique) ou la reponse revelee est juste a relire.
   Passe de 40px a 64px le 23/09/2026 (demande de Paul) : le kanji doit
   devenir l'element visuellement dominant de la carte une fois revele,
   plus que la lecture en kana -- voir .front-word--ecriture-revele
   juste en dessous, qui fait l'inverse sur la lecture. */
.back-reading--grand {
  font-size: 64px;
}
/* La lecture en kana (la question) redevient secondaire une fois la
   reponse revelee -- seul le kanji ci-dessus doit sauter aux yeux.
   Double classe pour l'emporter sur ".flashcard .front-word" (64px). */
.flashcard .front-word.front-word--ecriture-revele {
  font-size: 22px;
}
.anti-confusion {
  margin-top: 10px; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px;
  text-align: left;
}
.flashcard .hint {
  /* Etait en 10px avec --label-dim a 2:1 de contraste : quasi illisible
     (retour d'un utilisateur le 27/07, confirme par mesure). Passe en 13px
     et --muted, qui tient 4,5:1 sur les sept themes. */
  font-size: 13px; color: var(--muted); margin-top: 18px;
  text-transform: uppercase; letter-spacing: 1px;
}
.flashcard input#answerInput {
  background: var(--panel-alt);
  border: 1px solid var(--border);
}

/* ---------- Mode spectral (calque fantôme + bouton œil) ---------- */
.answer-input-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
/* Mode Double reponse (tache #11) : 2 champs empiles plutot que cote a
   cote (defaut de .answer-input-wrap), pour rester lisible sur mobile. */
.double-answer-wrap { flex-direction: column; }
.spectral-overlay {
  position: absolute;
  top: 16px; left: 0; right: 0;
  height: calc(100% - 16px);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  color: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
  z-index: 2;
}
.spectral-eye {
  margin-top: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
}
.spectral-eye:hover { border-color: var(--accent); }
.spectral-eye:active { background: var(--accent); }

.session-progress { width: 440px; margin-bottom: 14px; }
.session-progress > div:first-child {
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
}

/* Feedback du quiz, façon "section" de tes cartes Anki */
.quiz-feedback {
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  border-left: 4px solid;
  text-align: left;
  width: 100%;
}
.quiz-feedback.good { background: rgba(58, 122, 58, 0.18); border-color: var(--good-bright); color: var(--good-bright); }
.quiz-feedback.mid  { background: rgba(192, 120, 48, 0.18); border-color: var(--warn-bright); color: var(--warn-bright); }
.quiz-feedback.bad  { background: rgba(192, 64, 96, 0.18); border-color: var(--bad-bright); color: var(--bad-bright); }

/* ---------- Statistiques : graphique hexagonal de performance ---------- */
.hexa-wrap { display: flex; justify-content: center; margin-top: 6px; }
.hexa-svg { width: 100%; max-width: 320px; height: auto; }
.hexa-grille { fill: none; stroke: var(--border); stroke-width: 1; }
.hexa-axe { stroke: var(--border); stroke-width: 1; }
.hexa-donnees {
  fill: var(--accent-bright);
  fill-opacity: 0.28;
  stroke: var(--accent-bright);
  stroke-width: 2;
  stroke-linejoin: round;
}
.hexa-label { fill: var(--muted); font-size: 11px; }

/* ---------- Statistiques : historique visuel des erreurs ---------- */
.error-history-list { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.error-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.error-history-label {
  width: 150px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
}
.error-history-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.error-bar {
  width: 7px;
  min-width: 7px;
  border-radius: 3px 3px 0 0;
  transition: opacity 0.15s ease;
}
.error-bar:hover { opacity: 0.7; }
.error-bar.good { background: var(--good-bright); }
.error-bar.mid  { background: var(--warn-bright); }
.error-bar.bad  { background: var(--pink); }
.error-history-trend {
  width: 70px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

/* ---------- Apprendre : fiches par kanji ---------- */
.learn-card {
  margin-bottom: 18px;
  background: var(--panel-alt);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px;
}
.learn-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.learn-card-head .kj { font-size: 32px; font-weight: bold; color: var(--cream); }
.learn-card-head strong { color: var(--muted); font-weight: 400; font-size: 14px; font-style: italic; }

.learn-readings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.learn-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.learn-pill span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 999px;
}
.learn-pill.onyomi { color: var(--accent-bright); }
.learn-pill.onyomi span { background: rgba(41, 128, 185, 0.25); color: var(--accent-bright); }
.learn-pill.kunyomi { color: var(--pink); }
.learn-pill.kunyomi span { background: rgba(255, 122, 138, 0.2); color: var(--pink); }
.learn-pill.bushu { color: var(--warn-bright); }
.learn-pill.bushu span { background: rgba(224, 160, 80, 0.2); color: var(--warn-bright); }

.learn-section {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--border);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
}
.learn-section h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
.learn-section p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); }
.learn-phrase { font-size: 15px !important; color: var(--cream) !important; }
.learn-traduction { color: var(--muted) !important; font-style: italic; margin-top: 4px !important; }
.learn-section.learn-attention { border-left-color: var(--pink); }
.learn-section.learn-attention h4 { color: var(--pink); }
.learn-section table { margin-top: 2px; }
.learn-section td { border-bottom: 1px solid var(--border); padding: 5px 8px; font-size: 13px; }

/* ============================================================
   Adaptation mobile (iPhone / iPad en Safari) — ajouté pour la
   version PWA. Le desktop garde la mise en page en colonnes ci-dessus,
   ces règles ne s'activent qu'en dessous de 860px de large.
   ============================================================ */
@media (max-width: 860px) {
  /* Bug de superposition signale par Paul (28/09/2026) : sur certaines
     largeurs reduites (fenetre PC retrecie ou mobile), le pied de page legal
     (.site-footer, un frere APRES .app dans le DOM) s'affichait par-dessus
     les dernieres cartes du Tableau de bord au lieu d'apparaitre en dessous.
     Cause : ce `height:100vh/100dvh` fixe, en plus du `min-height:100vh` de
     la regle de base, donnait a `.app` (display:flex, .kvt-topbar +
     .content en colonne) une hauteur EXPLICITE plutot qu'un simple plancher
     -- avec .content en `flex:1`, ca rend le calcul de la hauteur reelle
     de .content ambigu des que son contenu depasse un ecran (semestres
     nombreux), et le rendu devient incoherent d'un moteur de rendu a
     l'autre au lieu de deborder proprement sous .app comme prevu. Un
     `min-height:100vh` seul (deja herite de la regle de base ci-dessus)
     suffit a garder l'effet recherche (l'app occupe au moins un ecran
     plein) sans creer cette ambiguite. */
  .app {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: env(safe-area-inset-top, 10px) 10px 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }
  .brand { margin-bottom: 0; flex-shrink: 0; }
  .brand-text { display: none; }
  .nav-btn {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 8px 12px;
  }
  .sidebar-footer { display: none; }
  .sidebar-legal { display: none; }
  .content {
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(3, 1fr); }
  .flashcard, .session-progress { width: 100%; max-width: 440px; }
  .flashcard .front-word { font-size: 44px; }
  .flashcard .front-word.front-word--long { font-size: 34px; }
  .flashcard .front-word.front-word--tres-long { font-size: 26px; }
  .error-history-label { width: 100px; font-size: 12px; }
  table { font-size: 12px; }
  .form-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Bandeau de consentement cookies (RGPD / AdSense) ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
}
.cookie-banner-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 640px;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* ---------- Emplacement pub (masqué pour les comptes Pro) ---------- */
.ad-slot {
  margin: 18px 0;
  overflow: hidden;
}
.ad-slot:empty { display: none; }

/* ============================================================
   Pages éditoriales statiques (À propos, FAQ, Blog) — pages
   indépendantes de l'app SPA, chacune avec sa propre route serveur
   (voir netlify.toml). Design réutilisant la palette de l'app mais
   en mise en page "article" classique plutôt qu'en sidebar+contenu.
   ============================================================ */
.editorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 20px 0;
}
.editorial-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.editorial-brand .brand-kanji { font-size: 26px; color: var(--cream); font-weight: bold; }
.editorial-brand .brand-text { font-size: 13px; color: var(--muted); letter-spacing: 0.5px; }
.editorial-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.editorial-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.editorial-nav a:hover, .editorial-nav a.active { color: var(--accent-bright); }

.editorial-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 20px;
  line-height: 1.7;
  font-size: 15px;
}
.editorial-main h1 {
  font-size: 26px;
  color: var(--cream);
  margin: 0 0 6px;
}
.editorial-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted-dim);
  font-weight: 700;
  margin-bottom: 10px;
}
.editorial-main h2 {
  font-size: 19px;
  color: var(--cream);
  font-weight: 700;
  margin: 32px 0 10px;
}
.editorial-main h3 {
  font-size: 16px;
  color: var(--accent-bright);
  text-transform: none;
  letter-spacing: 0;
  margin: 22px 0 8px;
}
.editorial-main p { margin: 0 0 14px; color: var(--ink); }
.editorial-main strong { color: var(--cream); }
.editorial-main a { color: var(--accent-bright); }
.editorial-main ol, .editorial-main ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink); }
.editorial-main li { margin-bottom: 6px; }
.editorial-main code {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}

.editorial-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.editorial-faq-item:last-child { border-bottom: none; }
.editorial-faq-item h3 { margin: 0 0 8px; }
.editorial-faq-item p { margin: 0; color: var(--muted); }

.editorial-blog-list { list-style: none; margin: 0; padding: 0; }
.editorial-blog-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.editorial-blog-card:hover { border-color: var(--accent-bright); }
.editorial-blog-card h3 { margin: 0 0 6px; color: var(--cream); }
.editorial-blog-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

.editorial-back {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.editorial-back:hover { color: var(--accent-bright); }

.editorial-cta {
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.editorial-cta a {
  display: inline-block;
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

/* ---------- Classement : onglets Meilleurs scores / Progression ---------- */
.lb-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.lb-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.lb-tab:hover { color: var(--ink); }
.lb-tab.is-active {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}
.lb-explain {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ============================================================
   Écran de résultat de fin de session — conçu avec Claude Design
   (kit v2, prompt 2), intégré le 27/07/2026.

   Trois intensités selon le score : --perfect (100 %), --good
   (seuil et au-dessus), --low (en dessous). Le seuil vit dans
   app.js (SEUIL_BON_SCORE), pas ici.

   Aucune couleur figée : tout passe par les variables de thème,
   y compris les nuances obtenues via color-mix(). Les ombres
   sont en rgba(0,0,0,α) pour rester neutres sur les 3 thèmes.
   ============================================================ */

.kvt-result{
  width:360px;
  min-height:480px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  font-family:-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
}

.kvt-result__burst{
  position:absolute;
  top:48px;
  left:50%;
  width:0;
  height:0;
}

.kvt-ring{
  position:absolute;
  left:0; top:0;
  width:130px; height:130px;
  margin-left:-65px; margin-top:-65px;
  border-radius:50%;
  border:2px solid var(--accent-bright);
  opacity:0;
  animation:kvtRingPulse 1.4s ease-out both;
}
.kvt-ring:nth-child(2){border-color:var(--pink);animation-delay:.1s}
.kvt-ring:nth-child(3){border-color:var(--cream);animation-delay:.2s}

.kvt-ray{
  position:absolute;
  left:0; top:0;
  width:4px; height:46px;
  margin-left:-2px;
  transform-origin:center 0;
}
.kvt-ray__bar{
  width:100%; height:100%;
  background:var(--cream);
  border-radius:2px;
  transform-origin:center 0;
  animation:kvtRayGrow .6s ease both;
}
.kvt-ray:nth-child(1){transform:rotate(0deg)}
.kvt-ray:nth-child(2){transform:rotate(36deg)}
.kvt-ray:nth-child(3){transform:rotate(72deg)}
.kvt-ray:nth-child(4){transform:rotate(108deg)}
.kvt-ray:nth-child(5){transform:rotate(144deg)}
.kvt-ray:nth-child(6){transform:rotate(180deg)}
.kvt-ray:nth-child(7){transform:rotate(216deg)}
.kvt-ray:nth-child(8){transform:rotate(252deg)}
.kvt-ray:nth-child(9){transform:rotate(288deg)}
.kvt-ray:nth-child(10){transform:rotate(324deg)}
.kvt-ray:nth-child(3n+1) .kvt-ray__bar{background:var(--cream)}
.kvt-ray:nth-child(3n+2) .kvt-ray__bar{background:var(--accent-bright)}
.kvt-ray:nth-child(3n) .kvt-ray__bar{background:var(--pink)}
.kvt-ray:nth-child(1) .kvt-ray__bar{animation-delay:.15s}
.kvt-ray:nth-child(2) .kvt-ray__bar{animation-delay:.18s}
.kvt-ray:nth-child(3) .kvt-ray__bar{animation-delay:.21s}
.kvt-ray:nth-child(4) .kvt-ray__bar{animation-delay:.24s}
.kvt-ray:nth-child(5) .kvt-ray__bar{animation-delay:.27s}
.kvt-ray:nth-child(6) .kvt-ray__bar{animation-delay:.3s}
.kvt-ray:nth-child(7) .kvt-ray__bar{animation-delay:.33s}
.kvt-ray:nth-child(8) .kvt-ray__bar{animation-delay:.36s}
.kvt-ray:nth-child(9) .kvt-ray__bar{animation-delay:.39s}
.kvt-ray:nth-child(10) .kvt-ray__bar{animation-delay:.42s}

.kvt-result__badge{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg);
  background:var(--cream);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
  animation:kvtGentleFade .5s ease .5s both;
}

.kvt-result__pct{
  position:relative; z-index:2;
  font-size:56px;
  font-weight:700;
  line-height:1;
  margin-top:56px;
}
.kvt-result--good .kvt-result__pct,
.kvt-result--low .kvt-result__pct{margin-top:0}
.kvt-result--perfect .kvt-result__pct{color:var(--good-bright);animation:kvtBadgePop .7s cubic-bezier(.2,.8,.3,1.3) both}
.kvt-result--good .kvt-result__pct{color:color-mix(in oklch, var(--warn-bright) 30%, var(--good-bright) 70%);animation:kvtSoftPop .5s ease both}
.kvt-result--low .kvt-result__pct{color:color-mix(in oklch, var(--bad) 20%, var(--warn-bright) 80%);animation:kvtGentleFade .55s ease both}

.kvt-result__points{
  position:relative; z-index:2;
  font-size:14px;
  color:var(--muted);
  margin-top:8px;
  animation:kvtGentleFade .5s ease .15s both;
}

.kvt-result__duree{
  position:relative; z-index:2;
  font-size:12px;
  color:var(--muted);
  opacity:.8;
  margin-top:2px;
  animation:kvtGentleFade .5s ease .2s both;
}

.kvt-result__title{
  position:relative; z-index:2;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  margin-top:18px;
  animation:kvtGentleFade .5s ease .25s both;
}

.kvt-result__sub{
  position:relative; z-index:2;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
  text-align:center;
  max-width:270px;
  margin-top:10px;
  animation:kvtGentleFade .5s ease .32s both;
}

.kvt-result__btn{
  position:relative; z-index:2;
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-alt);
  border:1px solid var(--border);
  color:var(--ink);
  font-weight:600;
  font-size:14px;
  padding:11px 30px;
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  animation:kvtGentleFade .5s ease .4s both;
}
.kvt-result--low .kvt-result__btn{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--cream);
}

@keyframes kvtRingPulse{
  0%{transform:scale(.4);opacity:.9}
  100%{transform:scale(2.4);opacity:0}
}
@keyframes kvtRayGrow{
  0%{transform:scaleY(0);opacity:0}
  55%{opacity:1}
  100%{transform:scaleY(1);opacity:.85}
}
@keyframes kvtBadgePop{
  0%{transform:scale(.4);opacity:0}
  55%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes kvtSoftPop{
  0%{transform:scale(.85);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes kvtGentleFade{
  0%{transform:translateY(10px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .kvt-ring,.kvt-ray__bar,.kvt-result__badge,.kvt-result__pct,
  .kvt-result__points,.kvt-result__duree,.kvt-result__title,.kvt-result__sub,.kvt-result__btn{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- Page « L'idée » (/decouvrir) ----------
   Conçue avec Claude Design (kit v2), texte retravaillé pour vendre l'idée
   plutôt que le produit. Sert deux publics : le visiteur qui découvre, et le
   robot AdSense qui a besoin de texte réel dans le HTML — d'où un contenu
   statique et non généré en JavaScript (voir l'incident du 16/07).
   ---------------------------------------------------------------- */
.kvt-tags{display:flex;gap:10px;flex-wrap:wrap}
.kvt-tag{
  border:1px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:999px;
  transition:border-color .2s ease, color .2s ease;
}
.kvt-tag:hover{border-color:var(--accent-bright);color:var(--ink)}
.kvt-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--cream);font-weight:700;font-size:17px;
  padding:16px 40px;border-radius:var(--radius);text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  animation:kvtGentleFade .5s ease .2s both;
}
.kvt-cta:hover{background:var(--accent-bright);color:var(--bg);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.kvt-cta:active{transform:translateY(0)}
.kvt-cta-note{font-size:13px;color:var(--muted-dim);margin:16px 0 0;animation:kvtGentleFade .5s ease .26s both}
.kvt-reading{
  border-radius:0 8px 8px 0;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel-alt);
}
.kvt-reading--on{border-left:3px solid var(--accent)}
.kvt-reading--kun{border-left:3px solid var(--pink)}
.kvt-reading__label{
  font-size: 12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--label-dim);
}
.kvt-reading--on .kvt-reading__value{font-size:16px;color:var(--accent-bright);font-weight:600}
.kvt-reading--kun .kvt-reading__value{font-size:16px;color:var(--pink);font-weight:600}
/* ================= Direction A — carte verticale, kanji en filigrane ================= */
.kvt-landing-a{
  background:var(--bg);
  min-height:820px;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
.kvt-landing-a__watermark{
  /* Assez petit pour se lire comme un caractère, assez pâle pour ne pas
     concurrencer le texte. À 460px le kanji devenait une texture de
     rectangles posée derrière le bouton — l'inverse d'un filigrane.
     Décalé vers le haut pour dégager la zone de lecture. */
  position:absolute;top:18%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(160px,20vw,260px);line-height:1;color:var(--cream);opacity:.035;font-weight:700;
  user-select:none;pointer-events:none;
}
.kvt-landing-a__hero{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;max-width:640px;padding:96px 32px 64px;
}
.kvt-landing-a__title{
  font-size:44px;line-height:1.15;color:var(--ink);font-weight:700;margin:0 0 20px;
  animation:kvtGentleFade .6s ease .08s both;
}
.kvt-landing-a__body{
  font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 36px;
  animation:kvtGentleFade .6s ease .14s both;
}
.kvt-landing-a__tags{margin-top:36px;animation:kvtGentleFade .6s ease .32s both}
.kvt-landing-a__card{
  position:relative;z-index:1;width:100%;max-width:520px;margin:0 32px 88px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 30px;box-shadow:0 20px 50px rgba(0,0,0,.35);
  animation:kvtSoftPop .5s ease .38s both;
}
.kvt-landing-a__card-head{display:flex;align-items:baseline;gap:18px;margin-bottom:20px}
.kvt-landing-a__kanji{font-size:52px;color:var(--cream);font-weight:600}
.kvt-landing-a__word-label{
  font-size: 12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--label-dim);
}
.kvt-landing-a__word-kana{font-size:15px;color:var(--muted);margin-top:2px}
.kvt-landing-a__readings{display:flex;flex-direction:column;gap:9px}
@media (prefers-reduced-motion: reduce){
.kvt-landing-a__title,.kvt-landing-a__body,.kvt-landing-a__tags,.kvt-landing-a__card,
  .kvt-landing-b__title,.kvt-landing-b__body,.kvt-landing-b__tags,.kvt-landing-b__card,
  .kvt-cta,.kvt-cta-note{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}
/* ================= Page de présentation (long format) ================= */
.kvt-pitch{background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
.kvt-pitch__hero{
  max-width:720px;margin:0 auto;padding:96px 32px 64px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.kvt-pitch__title{
  font-size:40px;line-height:1.18;color:var(--ink);font-weight:700;margin:0 0 22px;
  animation:kvtGentleFade .6s ease .05s both;
}
.kvt-pitch__hook{
  font-size:18px;line-height:1.65;color:var(--muted);margin:0 0 32px;max-width:600px;
  animation:kvtGentleFade .6s ease .12s both;
}
.kvt-pitch__sections{max-width:760px;margin:0 auto;padding:0 32px 24px;display:flex;flex-direction:column;gap:2px}
.kvt-pitch__section{
  border-left:3px solid var(--accent);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
  padding:28px 32px;margin-bottom:20px;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
/* L'état masqué n'est posé que si le JavaScript s'exécute (classe .kvt-js sur
   <html>). Sans JS — ou si le script échoue — le texte reste visible : le
   contenu ne doit jamais dépendre d'une animation pour être lisible. */
.kvt-js .kvt-pitch__section{ opacity:0; transform:translateY(22px); }
.kvt-pitch__section.kvt-reveal{opacity:1;transform:translateY(0)}
.kvt-pitch__section:nth-child(3n+2){border-left-color:var(--pink)}
.kvt-pitch__section:nth-child(3n){border-left-color:var(--warn-bright)}
.kvt-pitch__section-title{font-size:19px;font-weight:700;color:var(--cream);margin:0 0 12px}
.kvt-pitch__section-body{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 12px}
.kvt-pitch__section-body:last-child{margin-bottom:0}
.kvt-pitch__closing{
  max-width:600px;margin:0 auto;padding:48px 32px 96px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.kvt-pitch__closing-line{
  font-size:19px;line-height:1.55;color:var(--ink);font-weight:600;margin:0 0 32px;
  
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.kvt-js .kvt-pitch__closing-line{ opacity:0; transform:translateY(22px); }
.kvt-pitch__closing-line.kvt-reveal{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
.kvt-pitch__title,.kvt-pitch__hook{animation:none !important;opacity:1 !important;transform:none !important}
.kvt-pitch__section,.kvt-pitch__closing-line{transition:none !important;opacity:1 !important;transform:none !important}
.kvt-cta{transition:none !important}
.kvt-cta:hover{transform:none !important}
}
/* Variante compacte du hero, ex-style inline de la maquette. */
.kvt-landing-a__hero[data-compact="true"]{ min-height:auto; padding-bottom:24px; }

/* Lien de la barre latérale vers une vraie page servie par le serveur
   (/decouvrir). Il reprend l'allure des .nav-btn tout en restant un <a> :
   c'est une navigation, pas un changement de vue. */
.nav-btn.nav-link{
  box-sizing:border-box;
  text-decoration:none;
  color:var(--muted-dim);
  margin-top:10px;
  border-top:1px solid var(--border);
  padding-top:14px;
  border-radius:0;
}
.nav-btn.nav-link:hover{ background:transparent; color:var(--accent-bright); }

/* ---------- Transition entre les vues de l'app ----------
   Les vues basculent en display:none/block, qui ne s'anime pas. On joue donc
   une animation d'entrée sur la vue qui devient active, déclenchée par
   switchView() uniquement quand la vue change vraiment.
   Volontairement courte (240 ms) : une navigation d'app doit rester
   instantanée au ressenti, l'animation sert à situer le changement, pas à
   faire un spectacle. ------------------------------------------------- */
@keyframes kvtViewIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
.view.view-enter{
  animation:kvtViewIn .24s cubic-bezier(.2,.7,.3,1) both;
}
/* Les cartes du tableau de bord arrivent juste après le conteneur, ce qui
   donne une impression de profondeur sans multiplier les animations. */
@keyframes kvtCardIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
.view.view-enter > .card{
  animation:kvtCardIn .3s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:.05s;
}

@media (prefers-reduced-motion: reduce){
  .view.view-enter,
  .view.view-enter > .card{ animation:none; }
}

/* ============================================================
   Decks partagés : la liste publique et le formulaire de publication.
   ============================================================ */

.decks-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.decks-head h2 { margin: 0 0 6px; }
.decks-sous-titre {
  color: var(--muted); font-size: 14px; line-height: 1.6;
  max-width: 62ch; margin: 0 0 18px;
}
.decks-note { color: var(--muted); font-size: 13px; }

.decks-barre {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.decks-filtres { display: flex; gap: 6px; }
.deck-filtre {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.deck-filtre:hover { color: var(--ink); border-color: var(--accent); }
.deck-filtre.is-active { background: var(--accent); border-color: var(--accent); color: var(--sur-accent, #fff); }
.decks-recherche {
  flex: 1; min-width: 220px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: 14px;
}

/* Trois par ligne, et trois seulement : la grille garde son rythme même si
   un titre est court. En dessous de 1100 px on passe à deux, puis à une. */
.decks-grille {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deck-carte {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.deck-titre { margin: 0; font-size: 17px; line-height: 1.35; }
.deck-auteur { color: var(--muted); font-size: 13px; }
.deck-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-etiquette {
  border: 1px solid var(--border); border-radius: 99px;
  padding: 3px 10px; font-size: 12px; color: var(--muted);
}
.deck-description {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink);
  /* Trois lignes réservées quoi qu'il arrive : sans ça, un deck sans
     description remonte ses boutons et casse l'alignement de la ligne. */
  min-height: 3.2em;
}
.deck-description.est-vide { color: var(--muted); font-style: italic; }

.deck-mesures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 0; margin-top: 2px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.deck-mesure { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.deck-mesure-titre { font-size: 12px; color: var(--muted); }
.deck-resultat { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.deck-resultat-score { font-size: 19px; color: var(--good-bright); }
.deck-resultat-detail { font-size: 12px; color: var(--muted); }
.deck-resultat-vide { font-size: 13px; color: var(--muted); }

.deck-note { display: flex; flex-direction: column; gap: 3px; }
.deck-etoiles { display: flex; gap: 2px; }
.deck-etoiles[data-noter] { cursor: pointer; }
.deck-etoile { font-size: 15px; line-height: 1; color: var(--border); }
.deck-etoiles[data-noter] .deck-etoile:hover { color: var(--warn-bright); }
.deck-etoile.est-pleine { color: var(--warn); }
.deck-etoile.est-pleine.est-mienne { color: var(--warn-bright); }
.deck-etoiles.est-sienne { opacity: 0.55; }
.deck-note-texte { font-size: 12px; color: var(--muted); }

.decks-tri-label { font-size: 13px; color: var(--muted); }
.decks-tri {
  background: var(--panel-alt); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 13px;
}

.deck-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.deck-actions .primary[disabled] { opacity: 0.45; cursor: default; }

/* ---- Formulaire de publication ---- */

.pub-fil { margin-bottom: 10px; }
.lien-retour {
  background: none; border: none; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 0;
}
.lien-retour:hover { color: var(--accent); }
/* Lien Jisho par mot (28/09/2026), dans les tables de vocabulaire : discret
   par defaut (meme esprit que .lien-retour), colore seulement au survol
   pour ne pas rivaliser visuellement avec le bouton d'action a cote. */
.lien-jisho {
  color: var(--muted); font-size: 12px; text-decoration: none;
  margin-right: 8px; white-space: nowrap;
}
.lien-jisho:hover { color: var(--accent-bright); text-decoration: underline; }

/* ---- Accueil : widgets Classement + Nouveautés (#21, rang 5) ---- */
.accueil-widgets-row { margin: 16px 0; }
.accueil-classement-liste { display: flex; flex-direction: column; gap: 8px; }
.accueil-classement-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
}
.accueil-classement-pseudo { flex: 1; font-size: 13.5px; }
.accueil-classement-points { font-size: 13px; color: var(--muted); font-weight: 600; }
.accueil-nouveautes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.accueil-nouveautes-liste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px;
}
.accueil-nouveautes-titre { flex: 1; }
.accueil-nouveautes-date { font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* .pub-form : la largeur qui rendait le formulaire etroit et dense. Le
   formulaire utilise desormais .pub-colonnes. Regle conservee au cas ou
   une autre vue l'emploierait encore. */
.pub-form { max-width: 620px; }
.pub-label {
  display: block; font-size: 13px; color: var(--muted);
  margin: 18px 0 6px;
}
.pub-form > .pub-label:first-child { margin-top: 0; }
.pub-champ {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.pub-zone { resize: vertical; line-height: 1.6; }

.pub-choix { display: flex; gap: 8px; }
.pub-option {
  flex: 1; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-size: 14px; cursor: pointer;
}
.pub-option:hover { color: var(--ink); border-color: var(--accent); }
.pub-option.is-active {
  background: var(--accent); border-color: var(--accent);
  color: var(--sur-accent, #fff);
}

.pub-aide { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 6px 0 0; }

.pub-avertissement {
  border-left: 2px solid var(--warn);
  background: var(--panel);
  padding: 10px 14px; margin-top: 8px;
  font-size: 12.5px; line-height: 1.65; color: var(--ink);
}
.pub-avertissement a { color: var(--accent); }

.pub-recap {
  margin-top: 20px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13.5px; color: var(--muted);
}
.pub-recap strong { color: var(--ink); }

.pub-erreur {
  margin-top: 14px; padding: 10px 14px;
  border-left: 2px solid var(--bad); background: var(--panel);
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}

.pub-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 20px;
}
.pub-actions .pub-aide { margin: 0; }

@media (max-width: 1100px) {
  .decks-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .decks-grille { grid-template-columns: 1fr; }
  .decks-barre { flex-direction: column; align-items: stretch; }
  .decks-tri-label { display: none; }
}

/* ---- Page d'un deck : aperçu et avis ---- */

.deck-lien {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.deck-lien:hover { color: var(--accent-bright); text-decoration: underline; }

.deck-page-tete { margin-bottom: 20px; }
.deck-page-tete h2 { margin: 0 0 6px; }
.deck-page-tete .deck-description { max-width: 68ch; margin: 12px 0; min-height: 0; }
.deck-page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.danger {
  background: transparent; color: var(--bad);
  border: 1px solid var(--bad); border-radius: 10px;
  padding: 10px 18px; font-size: 14px; cursor: pointer;
}
.danger:hover { background: var(--bad); color: #fff; }

.deck-section-titre { margin: 0 0 14px; font-size: 16px; }

.deck-apercu { display: flex; flex-direction: column; }
.deck-apercu-ligne {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.deck-apercu-ligne:last-child { border-bottom: none; }
.deck-apercu-kanji { font-size: 22px; min-width: 32px; }
.deck-apercu-sens { font-size: 14px; color: var(--muted); }
.deck-apercu-semaine { margin-left: auto; font-size: 12px; color: var(--muted); }

.avis-form { max-width: 620px; margin-bottom: 24px; }
.avis-form-note { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avis-form-note .deck-etoiles { cursor: pointer; }
.avis-form-note .deck-etoile { font-size: 20px; }
.avis-form-note .deck-etoile:hover { color: var(--warn-bright); }

.avis-liste { display: flex; flex-direction: column; gap: 16px; }
.avis { border-top: 1px solid var(--border); padding-top: 14px; }
.avis:first-child { border-top: none; padding-top: 0; }
.avis-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.avis-pseudo { font-size: 14px; }
.avis-date { font-size: 12px; color: var(--muted); }
.avis-texte { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }

.pub-plage { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pub-plage label { font-size: 13px; color: var(--muted); }
.pub-champ-court { width: auto; min-width: 72px; }

/* ---- Catégories du tableau de bord ---- */

.mode-toggle { flex-wrap: wrap; }
.mode-toggle-plus { font-size: 16px; line-height: 1; padding-left: 12px; padding-right: 12px; }

.categorie-outils {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: 13px; color: var(--muted);
}

.semestre-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.semestre-tete h3 { margin: 0; }
.semestre-origine { font-size: 12px; color: var(--muted); font-weight: normal; }
/* Semestres repliables (28/09/2026) : la fleche vit dans son propre groupe
   flex a cote du h3, pour que .semestre-tete garde exactement 2 blocs
   (titre / categorie) de part et d'autre du justify-content:space-between
   ci-dessus. */
.semestre-titre-groupe {
  display: flex; align-items: center; gap: 8px;
}
.semestre-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.semestre-toggle:hover { color: var(--ink); border-color: var(--accent); }

/* Salons multijoueur / jeu de la bombe (28/09/2026, voir parties.js) */
.partie-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.partie-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.partie-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.partie-form__case { flex-direction: row !important; align-items: center; gap: 8px !important; }
.partie-form__case input { width: auto; }
.partie-liste-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.partie-joueurs-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.partie-joueur-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; font-size: 13.5px;
}
.partie-joueur-chip--actif { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright) inset; }
.partie-vies { font-size: 12px; letter-spacing: 1px; }
.partie-minuteur { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.partie-minuteur-barre { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-alt); border: 1px solid var(--border); overflow: hidden; }
.partie-minuteur-barre__remplissage { height: 100%; width: 100%; background: var(--accent); transition: width 0.2s linear; }
.partie-minuteur-texte { font-size: 13px; color: var(--muted); min-width: 32px; text-align: right; }
.partie-mot-actif { font-size: 46px; font-weight: 700; text-align: center; margin: 18px 0; letter-spacing: 2px; }

/* Boîte à problèmes / retours utilisateurs (28/09/2026, voir aide.js) */
.retour-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.retour-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.retour-form textarea { font-family: inherit; resize: vertical; }
.retour-form__case { flex-direction: row !important; align-items: center; gap: 8px !important; }
.retour-form__case input { width: auto; }
.retour-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.retour-item__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.retour-statut {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--panel-alt); color: var(--muted); white-space: nowrap;
}
.retour-statut--resolu { background: color-mix(in srgb, var(--good-bright, #3ecf8e) 20%, transparent); color: var(--good-bright, #3ecf8e); }
.retour-statut--en_cours { background: color-mix(in srgb, var(--accent-bright) 20%, transparent); color: var(--accent-bright); }
.retour-reponse { font-size: 13px; background: var(--panel-alt); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.retour-admin-controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.retour-admin-controles input[type="text"] { flex: 1; min-width: 220px; }
.retour-item--recent { border-color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 8%, transparent); }
.retour-badge-nouveau {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 4px;
  background: var(--accent-bright); color: #0b1020; vertical-align: middle;
}
.retour-admin-controles button.retour-btn-supprimer { color: var(--pink); }
.retour-captures { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.retour-captures:empty { display: none; }
.retour-captures img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.retour-capture-apercu { position: relative; display: inline-block; }
.retour-capture-apercu button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  background: var(--pink); color: #fff; border: none; font-size: 14px; line-height: 22px; cursor: pointer;
}
.admin-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary::before { content: '▾'; color: var(--muted); transition: transform .15s; }
.admin-section:not([open]) > summary::before { transform: rotate(-90deg); }
.admin-section > summary h3 { margin: 0; }
.admin-section[open] > summary { margin-bottom: 12px; }


.semestre-categorie {
  background: var(--panel-alt); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 8px; font-size: 12px;
}
.semestre-categorie:hover { color: var(--ink); }

/* ---- Survol d'une carte de deck ---- */

.deck-carte {
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
/* Le liseré est un pseudo-élément et non une bordure : une bordure qui
   change d'épaisseur au survol décale tout le contenu de la carte. */
.deck-carte::after {
  content: '';
  position: absolute; inset: -1px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  pointer-events: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.deck-carte:hover, .deck-carte:focus-visible { transform: translateY(-2px); }
.deck-carte:hover::after, .deck-carte:focus-visible::after {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(91, 200, 245, 0.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 18%, transparent);
}
.deck-carte:focus-visible { outline: none; }
.deck-carte:hover .deck-titre { color: var(--accent-bright); }

@media (prefers-reduced-motion: reduce) {
  .deck-carte, .deck-carte::after { transition: none; }
  .deck-carte:hover, .deck-carte:focus-visible { transform: none; }
}

/* ---- Discussion façon fil de commentaires ---- */

.com-entete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.com-entete .deck-section-titre { margin-bottom: 14px; }
.com-nouveau { max-width: 640px; margin-bottom: 22px; }
.com-fil { display: flex; flex-direction: column; gap: 4px; }

.com { padding-top: 10px; }
.com-corps { display: flex; gap: 10px; }
.com-votes { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; }
.com-vote {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 4px;
}
.com-vote:hover { color: var(--ink); }
.com-vote.est-actif { color: var(--accent-bright); }
.com-score { font-size: 12px; color: var(--muted); min-width: 18px; text-align: center; }
.com-score.est-positif { color: var(--good-bright); }
.com-score.est-negatif { color: var(--pink); }

.com-contenu {
  flex: 1; min-width: 0;
  border-left: 1px solid var(--border); padding-left: 12px;
}
.com-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.com-pseudo { font-size: 13px; color: var(--ink); }
.com-marque {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 0 6px;
}
.com-date { font-size: 12px; color: var(--muted); }
.com-texte { margin: 5px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.com-actions { display: flex; gap: 12px; margin-top: 5px; }
.com-action {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--muted);
}
.com-action:hover { color: var(--accent-bright); }
.com-reponse { margin-top: 10px; max-width: 560px; }
.com-reponse .pub-actions { margin-top: 8px; }

/* ---- Avatars et profils ---- */

.avatar-photo, .avatar-initiale {
  display: inline-block; vertical-align: middle;
  border-radius: 50%; flex-shrink: 0;
}
.avatar-photo { object-fit: cover; background: var(--panel-alt); }
.avatar-initiale {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; line-height: 1; font-weight: 600;
}

.auteur { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.auteur-pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-auteur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deck-auteur-date { color: var(--muted); }

.deck-mesures--trois { grid-template-columns: 1fr 1fr 1fr; }
.deck-mesures--deux { grid-template-columns: 1fr 1fr; max-width: 520px; }
.deck-mesures--trois .deck-resultat-score { font-size: 16px; }
.deck-mesures--trois .deck-mesure-titre,
.deck-mesures--trois .deck-resultat-vide,
.deck-mesures--trois .deck-resultat-detail { font-size: 11.5px; }
.deck-mesures--trois .deck-etoile { font-size: 13px; }
.deck-mesures--trois .deck-note-texte { font-size: 11.5px; }

.profil-tete { display: flex; align-items: flex-start; gap: 18px; margin: 16px 0 4px; flex-wrap: wrap; }
.profil-photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.profil-bouton-fichier { display: inline-block; cursor: pointer; }
.profil-photo-actions .pub-aide { margin: 0; }

@media (max-width: 1100px) {
  .deck-mesures--trois { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .deck-mesures--trois, .deck-mesures--deux { grid-template-columns: 1fr 1fr; }
}

/* ---- Amis ---- */

.ami-ajout { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; flex-wrap: wrap; }
.ami-ajout .pub-champ { flex: 1; min-width: 200px; }

.ami-section {
  margin: 22px 0 10px; font-size: 13px; font-weight: normal;
  color: var(--muted); text-transform: none;
}
.ami-liste { display: flex; flex-direction: column; gap: 2px; }

.ami {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.ami:first-child { border-top: none; }
.ami-infos { flex: 1; min-width: 0; }
.ami-pseudo { font-size: 14px; }
.ami-niveau { font-size: 12px; color: var(--muted); margin-top: 1px; }
.ami-bio {
  font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ami-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ami-attente { font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .ami { flex-wrap: wrap; }
  .ami-actions { width: 100%; justify-content: flex-end; }
}

/* ---- Classement : vue d'ensemble ---- */

.lb-filtre { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; flex-wrap: wrap; }
.lb-filtre label { font-size: 13px; color: var(--muted); }

.lb-grille {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 6px;
}

.lb-case {
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.lb-case.lb-me { border-color: var(--accent); }

.lb-case-titre {
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  font-size: 12.5px; color: var(--muted);
}
.lb-case-titre:hover { color: var(--accent-bright); text-decoration: underline; }

.lb-case-premier { display: flex; align-items: center; gap: 10px; }
.lb-case-infos { flex: 1; min-width: 0; }
.lb-case-pseudo {
  font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-case-detail { font-size: 12px; color: var(--muted); margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-case-pct { white-space: nowrap; }
.lb-case-pct { font-size: 20px; color: var(--good-bright); }

.lb-case-suite { border-top: 1px solid var(--border); padding-top: 8px; }
.lb-case-ligne {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--muted); padding: 2px 0;
}
.lb-case-ligne.lb-row-me { color: var(--ink); }
.lb-case-rang { min-width: 12px; }
.lb-case-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-case-reste { font-size: 12px; color: var(--muted); padding-top: 2px; }

.deck-officiel {
  display: inline-flex; align-items: center;
  border: 1px solid var(--accent); color: var(--accent-bright);
  border-radius: 99px; padding: 2px 10px; font-size: 12px;
}

/* ---- Etiquettes de statut partagees : la page "Mises a jour" qui les a
   introduites a ete retiree le 23/09/2026 (demande de Paul), mais deux
   previews les reutilisent encore et restent : le widget "Nouveautes" du
   tableau de bord (maj.js) et la carte "Ce qui arrive" de la page d'accueil
   (communaute.js, regle .comm-arrive .maj-statut plus bas). ---- */
.maj-statut {
  font-size: 11px; border-radius: 99px; padding: 1px 9px;
  border: 1px solid var(--border); color: var(--muted);
}
.maj-statut--etude { border-color: var(--warn); color: var(--warn-bright); }
.maj-statut--prevu { border-color: var(--accent); color: var(--accent-bright); }
.maj-statut--fait  { border-color: var(--good); color: var(--good-bright); }

/* ---- Vue Communauté ---- */

/* Une seule colonne : on lit du haut vers le bas, les avis d'abord parce
   que c'est ce qui donne envie, les decks ensuite parce que c'est ce sur
   quoi on agit. */
.comm-grille { display: flex; flex-direction: column; gap: 18px; }

/* Colonne centree dans la zone de contenu, et non collee a gauche. 940 px :
   assez large pour que les cartes respirent, assez etroit pour que l'oeil
   retrouve le debut de la ligne suivante. */
/* La page d'accueil occupe toute la largeur de contenu (1180 px) : elle est
   faite de colonnes qui se repartissent, pas d'un texte suivi. Elle tenait
   auparavant dans 940 px, ce qui laissait deux tiers de l'ecran vides sur un
   grand affichage et forcait a defiler pour des cartes qui tenaient cote a
   cote. Les blocs de lecture, eux, gardent leur limite ligne par ligne. */
#view-communaute { max-width: none; }
.comm-grille .card { margin-bottom: 0; }

.comm-etat-vide {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--radius); padding: 14px;
}

.comm-arrive { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.5; }
.comm-arrive .maj-statut { flex: none; min-width: 68px; text-align: center; }

/* ---- Bannière de la page d'accueil ---- */

.comm-banniere {
  position: relative; overflow: hidden;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px; margin-bottom: 18px;
}
/* Le kanji de fond reste très en retrait : il décore, il ne concurrence
   pas le texte. À 0.06 d'opacité il ne fait jamais chuter le contraste. */
.comm-banniere-kanji {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: clamp(90px, 14vw, 150px); line-height: 1;
  color: var(--ink); opacity: .06; pointer-events: none; user-select: none;
}
.comm-banniere-texte { position: relative; max-width: 60ch; }
.comm-banniere-texte strong { display: block; font-size: 19px; font-weight: 600; }
.comm-banniere-texte span {
  display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted);
}

/* ============================================================
   Barre de navigation haute, flottante au défilement
   ------------------------------------------------------------
   Remplace la colonne latérale de l'app par une barre en haut,
   partagée avec les pages éditoriales et la page d'accueil.

   Deux contextes de défilement différents, et c'est le piège :
   dans l'app, .app fait 100vh et c'est .content qui défile, pas
   la fenêtre — un `position:sticky` sur la fenêtre ne se
   déclencherait jamais. Sur les pages éditoriales, c'est la
   fenêtre qui défile. ui.js écoute le bon élément selon le cas
   et pose `is-scrolled` ; le CSS ne fait que réagir.

   `backdrop-filter` n'est pas supporté partout : la barre a donc
   un fond opaque de repli, et le flou vient en supplément quand
   le navigateur sait le faire.
   ============================================================ */
.kvt-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
  background: var(--sidebar);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.kvt-topbar.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .kvt-topbar.is-scrolled {
    background: color-mix(in srgb, var(--sidebar) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.kvt-topbar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* Le logo EST le lien de retour : il remplace le lien texte
   « Accueil », qui faisait doublon avec lui. */
.kvt-topbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: 10px;
  padding: 4px 6px;
  transition: opacity 0.15s ease;
}
.kvt-topbar__brand:hover { opacity: 0.75; text-decoration: none; }
.kvt-topbar__brand .brand-kanji { font-size: 24px; line-height: 1; }
.kvt-topbar__brand .brand-text { font-size: 12px; letter-spacing: 0.5px; }

/* Surtout PAS d'`overflow` ici : le menu « Plus » est un enfant absolu de
   cette barre, et un conteneur qui rogne son debordement rognerait le menu
   avec. Il s'ouvrait correctement, mais invisible sous le bord de la barre —
   le bouton semblait ne rien faire. C'est pour ca que la barre ne contient
   que six entrees : elle ne peut pas defiler, donc elle doit tenir. */
.kvt-topbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Les boutons de navigation gardent leur classe .nav-btn : app.js
   les retrouve par `.nav-btn[data-view]`. Seule leur mise en page
   change, d'empilée à alignée. */
.kvt-topbar .nav-btn {
  width: auto;
  margin-bottom: 0;
  padding: 8px 13px;
  white-space: nowrap;
  border-radius: 9px;
  font-size: 13.5px;
}

.kvt-topbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kvt-topbar__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 13px;
  cursor: pointer;
}

/* Sous 860 px la barre ne peut plus tout montrer : la navigation
   se replie derrière un bouton et s'ouvre en colonne. */
@media (max-width: 860px) {
  .kvt-topbar__toggle { display: block; }
  .kvt-topbar__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--sidebar);
    border-bottom: 1px solid var(--border);
    max-height: 70vh;
    overflow-y: auto;
  }
  .kvt-topbar__nav.is-open { display: flex; }
  .kvt-topbar .nav-btn { text-align: left; }
  .kvt-topbar__inner { position: relative; }
}

/* ------------------------------------------------------------
   Apparitions au défilement
   ------------------------------------------------------------
   Un élément marqué .kvt-fade part légèrement décalé et flou, et
   se pose quand il entre dans l'écran. L'état de départ n'est
   applique que si JavaScript est la : sans lui, `.js-anim` sur
   <html> est absent et tout reste visible. Un contenu ne doit
   jamais dependre d'une animation pour s'afficher.
   ------------------------------------------------------------ */
.js-anim .kvt-fade {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-anim .kvt-fade.is-shown {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Une liste dont les enfants arrivent l'un après l'autre. Le
   décalage est posé par ui.js en variable, borné à 6 crans :
   au-delà, l'attente se voit plus que l'effet. */
.js-anim .kvt-stagger > * {
  transition-delay: calc(var(--kvt-rang, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .kvt-fade,
  .js-anim .kvt-fade.is-shown {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .kvt-topbar { transition: none; }
}

/* Le badge de semaine venait du bas de la colonne laterale : `margin-top:auto`
   le poussait alors vers le bas. Dans une barre horizontale, la meme regle le
   collerait au bas de la ligne. */
.kvt-topbar .sidebar-footer {
  margin-top: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.8px;
  line-height: 1.3;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .kvt-topbar .sidebar-footer { display: none; }
}

/* Acces rapide a son profil, dans la barre du haut (23/09/2026) : reutilise
   .auteur/.auteur--lien tel quel (voir profils.js), juste une largeur bornee
   pour qu'un pseudo tres long ne pousse jamais le reste de la barre. */
#topbarProfil .auteur-pseudo { max-width: 120px; }
@media (max-width: 700px) {
  #topbarProfil .auteur-pseudo { display: none; }
}

/* Les pages editoriales partagent la meme barre. Leur ancien en-tete
   `.editorial-header` reste defini pour ne rien casser si une page l'utilise
   encore, mais les pages servies emploient desormais `.kvt-topbar`. */
.kvt-topbar__nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.kvt-topbar__nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.kvt-topbar__nav a.active { color: var(--accent-bright); }
.kvt-topbar__nav a.kvt-topbar__cta {
  background: var(--accent);
  color: var(--sur-accent, #fff);
}
.kvt-topbar__nav a.kvt-topbar__cta:hover { background: var(--accent-bright); color: var(--sur-accent, #fff); }

/* ---------- Menu « Plus » de la barre haute ----------
   Les categories rares vivent ici plutot que de faire deborder la barre.
   `:has()` evite un aller-retour en JavaScript : si l'une des entrees du
   menu est la vue courante, le bouton s'allume tout seul, sans que app.js
   ait a connaitre l'existence de ce menu. */
.kvt-topbar__more { position: relative; }
.kvt-topbar__more-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.kvt-topbar__more-btn:hover { background: var(--panel); color: var(--ink); }
.kvt-topbar__more:has(.nav-btn.active) .kvt-topbar__more-btn {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.kvt-topbar__more-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.95);
  z-index: 50;
}
.kvt-topbar__more-panel.is-open { display: block; }
.kvt-topbar__more-panel .nav-btn {
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

/* Sous 860 px la barre se replie entierement : le menu « Plus » n'a plus de
   raison d'etre, ses entrees rejoignent la liste depliee. */
@media (max-width: 860px) {
  .kvt-topbar__more { position: static; }
  .kvt-topbar__more-btn { display: none; }
  .kvt-topbar__more-panel {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
}

/* ---------- Pages publiques d'un deck : /deck/<slug>/ ----------
   Noms en `deck-fiche__` et non `deck-page__` : `.deck-page-tete` et
   `.deck-page-actions` existent deja dans l'app. Les selecteurs de classe ne
   se confondent pas entre eux, mais deux familles au nom presque identique
   dans un meme fichier finissent par etre editees l'une pour l'autre.

   Ces pages sont servies a des visiteurs qui n'ont jamais vu KVT : elles
   heritent de `.editorial-main`, comme la FAQ et les articles, plutot que du
   style de l'app. */
.deck-fiche__auteur {
  color: var(--muted);
  font-size: 13px;
  margin: -8px 0 20px;
}
.deck-fiche__resume {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cream);
  max-width: 62ch;
}
.deck-fiche__faits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 24px 0 8px;
}
.deck-fiche__faits li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--muted);
}
.deck-fiche__faits strong {
  display: block;
  font-size: 22px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.deck-fiche__note { color: var(--muted); font-size: 13px; }
.deck-fiche__note strong { color: var(--accent-bright); font-size: 16px; }

.deck-fiche__action { margin: 28px 0 36px; }
.deck-fiche__action .primary {
  display: inline-block;
  background: var(--accent);
  color: var(--sur-accent, #fff);
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.deck-fiche__action .primary:hover { background: var(--accent-bright); text-decoration: none; }

.deck-fiche__avis-item {
  border-left: 3px solid var(--border);
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
}
.deck-fiche__avis-item p { margin: 0 0 6px; }
.deck-fiche__avis-item cite {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
}

.deck-fiche__contexte { margin-top: 40px; }

/* ---------- Index de tous les decks : /deck/ ---------- */
.deck-index { list-style: none; padding: 0; margin: 28px 0; }
.deck-index__item { margin-bottom: 10px; }
.deck-index__item a {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.deck-index__item a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.deck-index__titre {
  display: block;
  color: var(--cream);
  font-weight: 600;
  font-size: 16px;
}
.deck-index__detail {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .deck-index__item a:hover { transform: none; }
}

/* Adresse publique d'un deck, montree dans l'app. Elle doit etre lisible et
   selectionnable a la main : la copie automatique est refusee hors HTTPS et
   dans certains navigateurs, et un bouton qui echoue en silence est pire que
   pas de bouton. */
.deck-partage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.deck-partage__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  user-select: all;
  word-break: break-all;
}

/* ============================================================
   Page d'accueil de l'app
   ------------------------------------------------------------
   Trois etages, du plus large au plus dense : une entete centree qui dit ce
   qu'est KVT, deux colonnes pour ce qui bouge, les videos en pleine largeur.
   ============================================================ */
/* Deux colonnes des qu'il y a la place. `auto-fit` avec un minimum : la
   grille decide seule du nombre de colonnes selon la largeur reelle, sans
   qu'on ait a deviner des points de rupture. */
.accueil-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}
.accueil-grille .card { margin-bottom: 0; }

/* Le proverbe du jour et les videos gardent la pleine largeur, mais leur
   texte reste lisible : une ligne de 120 caracteres ne se lit pas. */
#view-communaute .proverb-card { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ============================================================
   Formulaire de publication d'un deck
   ------------------------------------------------------------
   Il tenait dans une seule carte de huit champs empiles sur 620 px : aucun
   repere pour savoir ou l'on en est, et l'avertissement juridique perdu au
   milieu du parcours. Trois etapes numerotees, et sur le cote ce qui ne se
   remplit pas — le recapitulatif de ce qui part, et la regle de nommage,
   lisible au moment ou l'on nomme son deck.
   ============================================================ */
.pub-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (min-width: 940px) {
  .pub-colonnes { grid-template-columns: minmax(0, 1fr) 300px; }
  /* Le recapitulatif suit le regard pendant qu'on remplit : sans ca, il faut
     redescendre pour verifier ce qu'on envoie. */
  .pub-cote { position: sticky; top: 74px; }
}
.pub-principal { display: flex; flex-direction: column; gap: 18px; }
.pub-cote { display: flex; flex-direction: column; gap: 18px; }
.pub-principal .card, .pub-cote .card { margin-bottom: 0; }

.pub-etape { padding: 22px 24px; }
.pub-etape__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}
.pub-etape__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sur-accent, #fff);
  font-size: 12.5px;
  font-weight: 700;
}
.pub-etape .pub-label { margin-top: 20px; }

.pub-recap-carte { padding: 20px 22px; }
.pub-recap__ligne {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.9;
}
.pub-recap__ligne strong {
  color: var(--cream);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.pub-recap-carte .pub-actions { margin-top: 16px; }
.pub-recap-carte .primary { width: 100%; }

/* L'avertissement devient une carte a part : au milieu du formulaire, il
   etait lu comme un champ de plus et donc saute. */
.pub-avertissement {
  padding: 18px 20px;
  border-left: 3px solid var(--warn);
}
.pub-avertissement strong { display: block; font-size: 13.5px; color: var(--cream); }
.pub-avertissement p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 8px 0 10px;
}
.pub-avertissement a { font-size: 12.5px; color: var(--accent-bright); }

/* ---------- Profil public d'une personne ---------- */
.auteur--lien {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px;
}
.auteur--lien:hover .auteur-pseudo { color: var(--accent-bright); text-decoration: underline; }

.profil-entete { padding: 24px; overflow: hidden; }
.profil-entete__haut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profil-entete__ident { flex: 1; min-width: 0; }
.profil-entete__pseudo { margin: 0 0 8px; font-size: 22px; }
.profil-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.profil-badge {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--muted);
}
.profil-bio { margin: 16px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; max-width: 62ch; }
.profil-chiffres { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.profil-chiffres strong { color: var(--cream); font-size: 17px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.profil-ajout { flex: none; }

.profil-onglets { display: flex; gap: 4px; margin: 20px 0 14px; flex-wrap: wrap; }
.profil-onglet {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.profil-onglet:hover { background: var(--panel); color: var(--ink); }
.profil-onglet.is-active { background: var(--panel); border-color: var(--border); color: var(--cream); }
.profil-onglet__n { color: var(--muted); font-size: 12px; margin-left: 3px; }

.profil-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.profil-deck { margin-bottom: 0; padding: 16px 18px; }
.profil-deck__titre { margin: 0 0 4px; font-size: 15px; color: var(--cream); }
.profil-deck__detail, .profil-deck__note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.profil-deck__actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.profil-deck__lien { font-size: 12px; color: var(--accent-bright); text-decoration: none; }

.profil-avis-liste { display: flex; flex-direction: column; gap: 14px; }
.profil-avis { margin: 0; border-left: 3px solid var(--border); padding: 4px 0 4px 16px; }
.profil-avis__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.profil-avis__cible { font-size: 12px; color: var(--muted); }
.profil-avis p { margin: 0; font-size: 14px; line-height: 1.6; }

.profil-amis { display: flex; flex-wrap: wrap; gap: 10px; }
.profil-ami {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px 5px 5px; color: var(--ink); font-size: 13px;
}
.profil-ami:hover { border-color: var(--accent); }

.profil-note-vie-privee { margin-top: 22px; font-size: 12px; color: var(--label-dim); }

/* ============================================================
   Création d'un deck a partir de la banque de kanji
   ------------------------------------------------------------
   Meme structure que la publication : les etapes a gauche, ce qui se
   recapitule a droite. La banque est une grille de pastilles cliquables
   plutot qu'une liste a cases a cocher — on selectionne des dizaines de
   kanji d'affilee, et un clic sur une grande cible vaut mieux qu'un clic
   sur une case de 14 px.
   ============================================================ */
.crea-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (min-width: 940px) {
  .crea-colonnes { grid-template-columns: minmax(0, 1fr) 300px; }
  .crea-cote { position: sticky; top: 74px; }
}
.crea-principal, .crea-cote { display: flex; flex-direction: column; gap: 18px; }
.crea-principal .card, .crea-cote .card { margin-bottom: 0; }
.crea-bloc { padding: 22px 24px; }

.crea-liste-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.crea-liste-actions { display: flex; gap: 8px; }

/* Hauteur bornee : la banque peut contenir plus de mille kanji, et une page
   qui defile sur trente ecrans ne se parcourt pas. */
.crea-banque {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.crea-kanji {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 10px 6px;
  cursor: pointer; color: var(--ink); text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.crea-kanji:hover { border-color: var(--accent); }
.crea-kanji.is-choisi { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-alt)); }
.crea-kanji__glyphe { font-size: 26px; line-height: 1.2; color: var(--cream); }
.crea-kanji__titre {
  font-size: 11.5px; color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crea-kanji__meta { font-size: 10.5px; color: var(--label-dim); }

.crea-recap { padding: 20px 22px; }
.crea-recap .primary { width: 100%; }
.crea-choisis { padding: 16px 18px; }
.crea-choisis-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crea-puce {
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px; font-size: 15px; cursor: pointer;
  color: var(--ink); line-height: 1.3;
}
.crea-puce:hover { border-color: var(--bad); color: var(--pink); }
.crea-puce span { font-size: 11px; color: var(--muted); margin-left: 2px; }

.crea-message { padding: 14px 18px; font-size: 13.5px; }
.crea-message--succes { border-left: 3px solid var(--good-bright); }
.crea-message--erreur { border-left: 3px solid var(--bad); }

/* Vote rapide. Il vit a cote des etoiles : l'un demande d'ecrire, l'autre
   non, et les deux disent des choses differentes. « ▲ 12 » se lit d'un coup
   d'oeil, ce qui est tout l'interet du geste. */
.deck-upvote {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--muted); border-radius: 999px; padding: 4px 12px;
  font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.deck-upvote:hover { border-color: var(--accent); color: var(--ink); }
.deck-upvote.is-actif {
  border-color: var(--accent); color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-alt));
}
.deck-upvote:disabled { opacity: 0.6; cursor: default; }

/* Tableau d'audience de l'onglet Admin. Une ligne par provenance : ce qu'on
   compare, ce sont des sources entre elles, pas des jours. */
.admin-audience { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-audience th, .admin-audience td {
  padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.admin-audience th { color: var(--muted); font-weight: 600; font-size: 12px; }
.admin-audience th:first-child, .admin-audience td:first-child { text-align: left; }
.admin-audience tbody tr:hover { background: var(--panel-alt); }


/* ============================================================
   Gamification — niveaux, XP, pièces, série, boutique (24/08/2026)
   ============================================================ */

.gamif-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gamif-widget__niveau {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
  min-width: 200px;
}
/* Palier de rang (28/09/2026, point 1.5 du backlog) : meme forme que le
   badge de niveau, couleur posee en inline (une par palier, voir
   GAMIF_RANGS dans gamification.js) -- texte blanc, toutes les couleurs du
   tableau sont choisies assez foncees/saturees pour rester lisibles. */
.gamif-widget__rang {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.gamif-widget__badge {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}
.gamif-widget__barre {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.gamif-widget__barre-remplie {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 240ms ease;
}
.gamif-widget__xp {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.gamif-widget__stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}
.gamif-piece, .gamif-streak, .gamif-titre {
  white-space: nowrap;
}
.gamif-icone-piece {
  vertical-align: -3px;
}
.gamif-titre {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}
.gamif-solde {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.boutique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.boutique-item {
  text-align: center;
  margin-bottom: 0;
}
.boutique-item__emoji {
  font-size: 32px;
}
.boutique-item__nom {
  font-weight: 600;
  margin: 6px 0 4px;
}
.boutique-item__pro {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  margin-bottom: 8px;
}
.boutique-item--possede {
  border-color: var(--good);
}
.boutique-item button {
  width: 100%;
}
.boutique-item__apercu {
  margin-bottom: 6px;
}
.boutique-apercu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel-alt);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.boutique-apercu-bar span {
  font-weight: 600;
}
.boutique-apercu-bar button {
  white-space: nowrap;
}

/* ---------- Boutique v6 (25/08/2026) : collations, boosts, thèmes,
   bannières de profil ---------- */
.gamif-collation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 10px 0 0;
  width: fit-content;
}
.gamif-boost {
  white-space: nowrap;
  color: var(--accent-bright);
  font-size: 13px;
}
.boutique-section__titre {
  margin: 26px 0 4px;
  font-size: 16px;
}
.boutique-section__titre:first-of-type {
  margin-top: 18px;
}
.boutique-section__aide {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 62ch;
}
.boutique-item__debloque {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--good);
}
.gamif-retirer-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}

/* Bannière de profil public — bande décorative en haut de .profil-entete,
   achetée en boutique (voir GAMIF_BOUTIQUE, type 'banniere'). Marges
   négatives pour rejoindre les bords de la carte (padding 24px ci-dessus),
   .profil-entete a overflow:hidden pour respecter les coins arrondis. */
.profil-banniere {
  height: 64px;
  margin: -24px -24px 20px;
}
.profil-banniere--aurore { background: linear-gradient(135deg, #ff9a76, #ffd76e, #7ec8e3); }
.profil-banniere--nocturne { background: linear-gradient(135deg, #1b1d3a, #3a2a6b, #0d0d1f); }
.profil-banniere--jade { background: linear-gradient(135deg, #0f4f43, #2fae82, #bff0d8); }
.profil-banniere--or { background: linear-gradient(135deg, #ffe98a, #ffc93c, #e39a1a); }
.profil-banniere--imperiale { background: linear-gradient(135deg, #6c1a1a, #b9284f, #ffd76e, #6c1a1a); }

/* ---------- Sauvegarde cloud manuelle (Compte, 30/08/2026) ---------- */
.sync-cloud {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sync-cloud__statut {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
}
.sync-cloud__aide {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 0;
}
/* Classement : difficulté du meilleur résultat (29/09/2026) */
.lb-diff { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; vertical-align: middle; white-space: nowrap; }
.lb-diff--difficile { background: color-mix(in srgb, var(--pink) 22%, transparent); color: var(--pink); }
.lb-diff--facile { background: var(--panel-alt); color: var(--muted); }
/* Recommencer / Quitter en bas d'une session (29/09/2026) */
.quiz-actions-bas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
/* Recherche dans le Vocabulaire (29/09/2026) */
.vocab-recherche { width: 100%; margin-bottom: 14px; }
.btn-aller-semaine { white-space: nowrap; }
/* Célébration de niveau / de rang après un quiz (29/09/2026) */
.celebration {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 2000;
  background: var(--panel); border: 2px solid var(--accent-bright); border-radius: 16px;
  padding: 14px 26px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: celebration-entree .9s cubic-bezier(.2,1.2,.4,1) both; cursor: pointer;
}
.celebration__titre { font-size: 20px; font-weight: 800; color: var(--ink); }
.celebration__detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.celebration--rang { border-color: var(--rang-couleur); padding: 22px 34px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--rang-couleur) 25%, transparent), 0 16px 50px rgba(0,0,0,.4); }
.celebration--rang .celebration__titre { color: var(--rang-couleur); font-size: 22px; }
.celebration__emoji { font-size: 52px; line-height: 1; animation: celebration-rebond 1.1s ease-in-out infinite; }
.celebration--sortie { animation: celebration-sortie .35s ease both; }
@keyframes celebration-entree { from { opacity: 0; transform: translate(-50%, -24px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes celebration-sortie { to { opacity: 0; transform: translate(-50%, -16px) scale(.95); } }
@keyframes celebration-rebond { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .celebration, .celebration__emoji, .celebration--sortie { animation: none; } }
/* Boutique : bordures de profil et pseudos stylisés (29/09/2026) */
.profil-bordure { position: relative; border-width: 3px; border-style: solid; }
.profil-bordure--sakura { border-color: #f4a6c0; box-shadow: 0 0 0 3px color-mix(in srgb, #f4a6c0 25%, transparent); }
.profil-bordure--vague {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              linear-gradient(120deg, #1d6fa5, #5bc8f5, #b8ecff, #1d6fa5) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: bordure-vague 6s linear infinite;
}
.profil-bordure--or {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              linear-gradient(135deg, #8a6419, #f7d774, #c1902a, #fff1b8, #8a6419) border-box;
  box-shadow: 0 0 18px color-mix(in srgb, #f7d774 35%, transparent);
}
.profil-bordure--dragon {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              conic-gradient(from var(--angle-dragon, 0deg), #c22e49, #f7a21b, #f7d774, #c22e49, #6b0f1e, #c22e49) border-box;
  box-shadow: 0 0 22px color-mix(in srgb, #c22e49 45%, transparent);
  animation: bordure-dragon 4s linear infinite;
}
@property --angle-dragon { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes bordure-vague { to { background-position: 0 0, 300% 0; } }
@keyframes bordure-dragon { to { --angle-dragon: 360deg; } }

.pseudo-style { font-weight: 700; }
.pseudo-style--sakura { color: #f07fa6; }
.pseudo-style--jade { color: #2ca367; }
.pseudo-style--neon { color: #7df9ff; text-shadow: 0 0 6px #7df9ff, 0 0 12px color-mix(in srgb, #7df9ff 60%, transparent); }
.pseudo-style--arcenciel {
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #7ee8a2, #5bc8f5, #b388ff, #ff5f6d);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pseudo-arcenciel 4s linear infinite;
}
.pseudo-style--or {
  background: linear-gradient(90deg, #a8761c, #f7d774, #fff1b8, #f7d774, #a8761c);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pseudo-arcenciel 3s linear infinite;
}
@keyframes pseudo-arcenciel { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .profil-bordure--vague, .profil-bordure--dragon, .pseudo-style--arcenciel, .pseudo-style--or { animation: none; } }

.boutique-apercu-bordure { width: 100%; height: 34px; border-radius: 10px; margin: 6px 0 8px; background-color: var(--panel); }
.boutique-apercu-pseudo { margin: 4px 0 8px; font-size: 15px; }

/* ---------- Voyant de synchro + recherche rapide (30/09/2026) ---------- */
.voyant-sync { display: inline-flex; align-items: center; gap: 6px; }
.voyant-sync__point { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.voyant-sync--ok .voyant-sync__point { background: #3fbf6f; box-shadow: 0 0 6px #3fbf6f; }
.voyant-sync--erreur .voyant-sync__point { background: #e0506a; box-shadow: 0 0 6px #e0506a; }
.voyant-sync--envoi .voyant-sync__point { background: #e0a040; animation: voyant-pulse 1s infinite; }
@keyframes voyant-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .voyant-sync--envoi .voyant-sync__point { animation: none; } }
.recherche-globale {
  /* Ferme : une simple loupe de 34 px, pour ne rien chevaucher dans la barre
     (retour de Lucien, 30/09/2026 : "tout colle, donne moi de la place").
     Ouvert (au focus) : le champ se deploie SOUS la barre, a droite. */
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: var(--panel-alt) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa4c0' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center / 16px no-repeat;
  color: transparent; caret-color: var(--ink);
  border: 1px solid var(--border); border-radius: 999px;
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
}
.recherche-globale::-webkit-search-cancel-button { display: none; }
/* Replie : le texte d'aide ne doit pas depasser sur la loupe (bug d'affichage 02/10/2026) */
.recherche-globale:not(:focus) { font-size: 0; text-indent: -9999px; overflow: hidden; }
.recherche-globale:not(:focus)::placeholder { color: transparent; opacity: 0; }
.recherche-globale:focus {
  position: absolute; right: 20px; top: calc(100% + 4px); z-index: 60;
  width: 280px; height: auto; padding: 8px 14px; cursor: text;
  background-image: none; color: var(--ink); font-size: 14px;
  outline: none; border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.kvt-topbar__inner { position: relative; }

/* ---------- Bordure autour de la photo, titre et rang a cote du pseudo (30/09/2026) ---------- */
.avatar-cadre {
  display: inline-flex; line-height: 0; flex-shrink: 0; vertical-align: middle;
  border-radius: 50%; border-width: 2px;
}
.avatar-cadre .avatar-photo, .avatar-cadre .avatar-initiale { display: block; }
.insigne { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: 0.9em; line-height: 1; flex-shrink: 0; cursor: help; }
.insigne__n { font-size: 0.72em; font-weight: 700; color: var(--rang-couleur, var(--muted)); }

/* ---------- Ecran de fin : resultat plus grand + classement a droite (30/09/2026) ---------- */
.kvt-result-page { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; margin: 8px auto 0; }
.kvt-result-page .kvt-result { width: 420px; max-width: 100%; }
.kvt-result-page .kvt-result__pct { font-size: 1.15em; }
.kvt-result-classement {
  width: 320px; max-width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: kvtGentleFade .8s ease .3s both;
}
.kvt-result-classement h3 { margin: 0 0 12px; font-size: 15px; }
.kvt-result-classement__vide { color: var(--muted); font-size: 13px; }
.kvt-result-classement__place { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.kvt-result-classement__place strong { color: var(--ink); font-size: 16px; }
.kvt-result-classement__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kvt-result-classement__ligne { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.kvt-result-classement__ligne.est-moi { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.kvt-result-classement__rang { width: 18px; text-align: center; font-weight: 700; color: var(--muted); }
.kvt-result-classement__nom { flex: 1; min-width: 0; font-size: 13px; }
.kvt-result-classement__score { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 700; }
.kvt-result-classement__score small { font-weight: 400; color: var(--muted); font-size: 11px; }
.kvt-result-classement__sep { text-align: center; color: var(--muted); list-style: none; }

.indice-question { margin-top: 6px; }
.indice-badge.indice-compteur { border-color: #d19a3a; color: #d19a3a; }
.indice-badge.indice-lecture-speciale { border-color: #8a7cf0; color: #8a7cf0; }

/* ---------- Historique (30/09/2026) ---------- */
.hist-onglets { display: flex; gap: 8px; margin: 10px 0 12px; }
.hist-onglet { background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.hist-onglet.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.hist-carte { padding: 8px 12px; }
.hist-vide { color: var(--muted); font-size: 13px; padding: 10px 4px; }
.hist-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.hist-liste { list-style: none; margin: 0; padding: 0; }
.hist-session { border-bottom: 1px solid var(--border); }
.hist-session:last-child { border-bottom: 0; }
.hist-session__tete { display: grid; grid-template-columns: 1.1fr 1.6fr .9fr 1fr; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font-size: 13px; }
.hist-session__tete--statique { cursor: default; }
.hist-session__tete:hover:not(.hist-session__tete--statique) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hist-session__mode { font-weight: 700; min-width: 0; }
.hist-session__semaine, .hist-session__meta { color: var(--muted); }
.hist-session__pct { font-weight: 700; }
.hist-session--parfait .hist-session__pct { color: var(--good-bright); }
.hist-session--bas .hist-session__pct { color: var(--warn-bright); }
.hist-detail { overflow-x: auto; padding: 0 6px 12px; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; }
.hist-table td { padding: 4px 8px; border-top: 1px solid var(--border); }
.hist-rep--bon td:nth-child(3), .hist-rep--bon .hist-rep__pct { color: var(--good-bright); }
.hist-rep--moyen td:nth-child(3), .hist-rep--moyen .hist-rep__pct { color: var(--warn-bright); }
.hist-rep--faux td:nth-child(3), .hist-rep--faux .hist-rep__pct { color: var(--bad-bright); }
@media (max-width: 700px) { .hist-session__tete { grid-template-columns: 1fr 1fr; } }

/* ---------- Boutique : objet equipe bien visible (30/09/2026) ---------- */
.boutique-item--equipe { border-color: #3fbf6f; box-shadow: 0 0 0 2px color-mix(in srgb, #3fbf6f 35%, transparent); background: color-mix(in srgb, #3fbf6f 8%, var(--panel)); }
.boutique-item__coche { color: #3fbf6f; font-weight: 800; margin-left: 4px; }
.boutique-btn-equiper, .boutique-btn-retirer { width: 100%; padding: 8px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.boutique-btn-equiper { background: #2f9e5b; color: #fff; }
.boutique-btn-equiper:hover { background: #3fbf6f; }
.boutique-btn-retirer { background: transparent; color: #e0506a; border-color: #e0506a; }
.boutique-btn-retirer:hover { background: #e0506a; color: #fff; }
.indice-badge.indice-chiffre { border-color: #4aa3d8; color: #4aa3d8; }

/* Carte "vue d'ensemble" : le pseudo a sa propre ligne (plus tronqué), le % passe dessous */
.lb-case-premier { flex-wrap: wrap; row-gap: 4px; }
.lb-case-premier > .auteur { flex: 1 1 100%; min-width: 0; }
.lb-case-premier .auteur-pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-case-premier .lb-case-infos { flex: 0 0 auto; }
.lb-case-premier .lb-case-pct { margin-left: auto; }

/* Paliers de couleur des cartes de semaine (selon le meilleur %) */
.week-card.palier-faible { border-top-color: var(--bad-bright); background: rgba(192, 64, 96, 0.10); }
.week-card.palier-moyen { border-top-color: var(--warn-bright); background: rgba(224, 160, 80, 0.10); }
.week-card.palier-bon { border-top-color: var(--good-bright); background: rgba(95, 174, 95, 0.08); }
.week-card.palier-parfait { border-color: var(--good-bright); border-top-color: var(--good-bright); background: rgba(95, 174, 95, 0.22); box-shadow: 0 0 0 1px var(--good-bright) inset; }
.week-card--hardcore { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }

/* Fenêtre « semaine » : plus grande, titre mis en avant, aperçu, aide des modes */
.modal-box.modal-box--semaine { max-width: 560px; padding: 0 0 22px; }
.modal-box--semaine > *:not(.modal-tete) { margin-left: 22px; margin-right: 22px; }
.modal-tete--semaine {
  background: linear-gradient(135deg, var(--accent), var(--panel-alt));
  padding: 16px 22px; border-radius: 12px 12px 0 0; margin-bottom: 16px;
}
.modal-tete--semaine h3 { display: flex; flex-direction: column; gap: 2px; }
.modal-semestre { font-size: 12.5px; opacity: 0.85; font-weight: 500; }
.modal-semaine-titre { font-size: 26px; font-weight: 800; color: var(--cream); line-height: 1.1; }
.modal-apercu { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; align-items: baseline; }
.modal-apercu__mot { font-size: 24px; line-height: 1.25; }
.modal-apercu__reste { font-size: 14px; color: var(--muted); }
.filtre-mode--aide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.mode-choix { display: flex; align-items: center; gap: 6px; }
.aide-bulle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted);
  color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; flex: none;
}
.aide-bulle:hover, .aide-bulle:focus { color: var(--ink); border-color: var(--accent-bright); outline: none; }
@media (max-width: 520px) { .filtre-mode--aide { grid-template-columns: 1fr; } }

/* Notifications d'amis */
.notif-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  border: none; vertical-align: middle; margin-left: 4px;
}
.notif-pastille--topbar { cursor: pointer; animation: notif-pouls 2.4s ease-in-out infinite; }
@keyframes notif-pouls { 0%,100% { box-shadow: 0 0 0 0 rgba(192,64,96,.55); } 50% { box-shadow: 0 0 0 5px rgba(192,64,96,0); } }
@media (prefers-reduced-motion: reduce) { .notif-pastille--topbar { animation: none; } }

/* ---------- Salons : 4 jeux, sélection de semaines (02/10/2026, voir parties-ui.js / parties-jeux.js) ---------- */
.jeu-choix-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.jeu-choix { cursor: pointer; display: block; }
.jeu-choix input { position: absolute; opacity: 0; pointer-events: none; }
.jeu-choix__carte {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px;
  background: var(--panel-alt); border: 2px solid var(--border); border-radius: 12px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.jeu-choix__carte em { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.jeu-choix__carte small { color: var(--muted-dim); }
.jeu-choix__icone { font-size: 28px; line-height: 1; }
.jeu-choix:hover .jeu-choix__carte { border-color: var(--accent); transform: translateY(-2px); }
.jeu-choix input:checked + .jeu-choix__carte { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright) inset, 0 6px 18px rgba(0,0,0,.25); }
.jeu-choix input:focus-visible + .jeu-choix__carte { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.partie-form [hidden], .partie-form[hidden] { display: none !important; }
.partie-form > div[data-jeu-options] { display: flex; flex-direction: column; gap: 12px; }

.sel-semaines { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--panel-alt); }
.sel-semaines summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.sel-semaines summary strong { color: var(--ink); }
.sel-semaines__corps { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.sel-semaines__aide { margin: 0; font-size: 12.5px; color: var(--muted); }
.sel-sem__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sel-sem__puces { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-puce {
  min-width: 36px; height: 34px; padding: 0 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink); font-size: 13px;
}
.sel-puce:hover { border-color: var(--accent); }
.sel-puce--actif { background: var(--accent); border-color: var(--accent-bright); color: var(--sur-accent); font-weight: 700; }

.salon-code { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border: 1px dashed var(--accent); border-radius: 10px; margin-bottom: 10px; }
.salon-code span { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.salon-code strong { font-size: 26px; letter-spacing: .25em; color: var(--accent-bright); }

.jeu-manche { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }

/* --- Bombe : scène, mèche, joueurs --- */
.bombe-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.bombe-joueur {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px;
  padding: 8px 10px; border-radius: 12px; background: var(--panel-alt); border: 2px solid var(--border);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.bombe-joueur__pastille {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--accent); color: var(--sur-accent);
}
.bombe-joueur__nom { font-size: 12.5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bombe-joueur--actif { border-color: var(--warn-bright); transform: scale(1.08); box-shadow: 0 0 0 3px rgba(224,160,80,.25), 0 6px 16px rgba(0,0,0,.3); animation: bombe-pouls 1s ease-in-out infinite; }
.bombe-joueur--actif .bombe-joueur__pastille { background: var(--warn); }
@keyframes bombe-pouls { 50% { box-shadow: 0 0 0 7px rgba(224,160,80,.08), 0 6px 16px rgba(0,0,0,.3); } }
.bombe-scene { position: relative; width: min(280px, 80%); margin: 6px auto 0; }
.bombe-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.bombe-mot-carte { position: absolute; left: 50%; top: 59%; transform: translate(-50%, -50%); width: 70%; text-align: center; pointer-events: none; }
.bombe-mot-carte .partie-mot-actif { margin: 0; font-size: clamp(26px, 8vw, 46px); color: #f6ecd2; text-shadow: 0 2px 8px rgba(0,0,0,.6); word-break: keep-all; }
.bombe-scene--alerte .bombe-svg { animation: bombe-tremble .28s linear infinite; }
.bombe-scene--alerte .bombe-svg circle:first-of-type { fill: #ff7a2a; }
@keyframes bombe-tremble { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-1.2deg); } 75% { transform: translate(2px, -1px) rotate(1.2deg); } 100% { transform: translate(0, 0) rotate(0); } }
.bombe-consigne { text-align: center; margin: 8px 0; }
.bombe-saisie { justify-content: center; }
.bombe-flash {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 17px; border-radius: 16px; pointer-events: none; animation: bombe-flash 1.6s ease-out forwards;
}
.bombe-flash span { font-size: 64px; display: block; animation: bombe-boum .9s ease-out; }
.bombe-flash--boum { flex-direction: column; color: #ffd9c2; background: radial-gradient(circle, rgba(255,120,40,.75), rgba(255,120,40,0) 70%); }
.bombe-flash--ok { color: #d6ffd6; background: radial-gradient(circle, rgba(80,200,110,.6), rgba(80,200,110,0) 70%); }
@keyframes bombe-flash { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bombe-boum { 0% { transform: scale(.2) rotate(-20deg); } 55% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* --- Duel éclair --- */
.duel-tableau { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin: 10px 0; }
.duel-joueur { flex: 1; max-width: 220px; text-align: center; padding: 10px; border-radius: 14px; background: var(--panel-alt); border: 2px solid var(--border); transition: border-color .2s, transform .2s; }
.duel-joueur--moi { border-color: var(--accent); }
.duel-joueur--gagne { border-color: var(--good-bright); transform: scale(1.05); }
.duel-joueur__nom { font-size: 13px; color: var(--muted); }
.duel-joueur__score { font-size: 40px; font-weight: 800; line-height: 1.1; }
.duel-joueur__etat { height: 22px; font-size: 18px; }
.duel-vs { align-self: center; font-weight: 800; color: var(--pink); letter-spacing: .1em; }
.duel-pret { text-align: center; font-size: 54px; font-weight: 800; padding: 36px 0; color: var(--warn-bright); animation: duel-pret .5s ease-in-out infinite alternate; }
@keyframes duel-pret { from { transform: scale(.94); } to { transform: scale(1.06); } }
.duel-saisie { justify-content: center; }
.duel-attente { text-align: center; color: var(--muted); }
.duel-revele { text-align: center; font-size: 18px; }
.duel-revele span { color: var(--muted); font-size: 15px; }
.duel-verdict { text-align: center; font-weight: 700; margin-top: 8px; color: var(--good-bright); }
.duel-verdict--aucun { color: var(--muted); }

/* --- Relais des mots --- */
.relais-chaine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; }
.relais-maillon { padding: 4px 12px; border-radius: 16px; background: var(--panel-alt); border: 1px solid var(--border); font-size: 18px; }
.relais-fleche { color: var(--muted); }
.relais-courant { text-align: center; }
.relais-consigne { color: var(--muted); }
.relais-kanji { display: inline-block; min-width: 44px; padding: 0 10px; margin-left: 6px; font-size: 34px; font-weight: 800; color: var(--accent-bright); border-bottom: 3px solid var(--accent-bright); }
.relais-saisie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.relais-saisie input { min-width: 150px; flex: 1; max-width: 240px; }
.relais-retour { margin: 8px 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.relais-retour--ok { background: rgba(95,174,95,.14); border: 1px solid var(--good-bright); }
.relais-retour--rate { background: rgba(192,64,96,.14); border: 1px solid var(--bad-bright); }

/* --- Dessin de kanji --- */
.dessin-consigne { text-align: center; margin: 8px 0; }
.dessin-consigne span { color: var(--muted); font-size: 13px; }
.dessin-mot { font-size: 38px; margin: 0 8px; }
.dessin-indice { text-align: center; color: var(--warn-bright); min-height: 22px; font-size: 14px; }
.dessin-cadre { width: min(480px, 100%); margin: 10px auto 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.dessin-cadre canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #fbf7ea; touch-action: auto; }
.dessin-cadre canvas.dessin-actif { touch-action: none; cursor: crosshair; }
input.dessin-faux { animation: dessin-secoue .4s; border-color: var(--bad-bright); }
@keyframes dessin-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.jeu-carte--dessin .partie-actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .bombe-joueur--actif, .bombe-scene--alerte .bombe-svg, .duel-pret, .bombe-flash, .bombe-flash span { animation: none !important; }
}

/* Explication affichee apres la reponse (vocabulaire pratique, 02/10/2026) */
.flashcard .back-note { margin: 12px auto 0; max-width: 460px; text-align: left; font-size: 14px; line-height: 1.5; padding: 10px 12px; border-left: 3px solid var(--accent-bright); background: rgba(91, 200, 245, 0.08); border-radius: 6px; }
.flashcard .back-note strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-bright); margin-bottom: 2px; }

/* Fleches precedent/suivant dans la modale de trace (03/10/2026) */
.trace-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.trace-nav-btn { font-size: 22px; line-height: 1; min-width: 56px; min-height: 44px; padding: 6px 14px; }
.trace-nav-btn:disabled { opacity: .35; cursor: default; }
.trace-nav-pos { font-size: 14px; color: var(--muted); min-width: 56px; text-align: center; }

/* Memes couleurs de palier pour les cartes du Vocabulaire pratique (compteurs, couleurs, heure) -- 03/10/2026 */
.review-week-card.palier-faible { border-top-color: var(--bad-bright); background: rgba(192, 64, 96, 0.10); }
.review-week-card.palier-moyen { border-top-color: var(--warn-bright); background: rgba(224, 160, 80, 0.10); }
.review-week-card.palier-bon { border-top-color: var(--good-bright); background: rgba(95, 174, 95, 0.08); }
.review-week-card.palier-parfait { border-color: var(--good-bright); border-top-color: var(--good-bright); background: rgba(95, 174, 95, 0.22); box-shadow: 0 0 0 1px var(--good-bright) inset; }
.review-week-card.week-card--hardcore { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }

/* Sens francais a traduire (mode Traduction) -- 04/10/2026 : plus de coupure au milieu des mots,
   une definition par ligne, taille selon la plus longue definition. */
.flashcard .sens-trad { display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--cream); font-weight: 700; line-height: 1.2; }
.flashcard .sens-trad-ligne { font-size: 44px; max-width: 100%; overflow-wrap: break-word; word-break: normal; hyphens: auto; text-wrap: balance; }
.flashcard .sens-trad-ligne + .sens-trad-ligne { font-size: .8em; color: var(--accent-bright); font-weight: 600; }
.flashcard .sens-trad--long .sens-trad-ligne { font-size: 32px; }
.flashcard .sens-trad--tres-long .sens-trad-ligne { font-size: 24px; }
@media (max-width: 640px) {
  .flashcard .sens-trad-ligne { font-size: 34px; }
  .flashcard .sens-trad--long .sens-trad-ligne { font-size: 26px; }
  .flashcard .sens-trad--tres-long .sens-trad-ligne { font-size: 20px; }
}

/* Bouton "Je ne sais pas" apres une validation sans reponse (04/10/2026) */
.passer-wrap { margin-top: 10px; }
.btn-passer-sans-reponse { font-weight: 600; }

/* Indications de cours (Vocabulaire pratique) */
.indice-cours { margin: 10px auto 0; max-width: 420px; text-align: center; }
.indice-cours__sujet { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent, #4f46e5); background: rgba(79,70,229,.10); border-radius: 999px; padding: 3px 10px; }
.indice-cours__rappel { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted, #6b7280); }

.verbe-base-lecture { text-align:center; font-size:14px; color: var(--muted, #6b7280); margin-top:2px; }

/* Tests speciaux (Vocabulaire pratique) : cartes en largeur plutot qu'en
   colonnes etroites -- titre a gauche, mots et score a droite. */
.week-grid--pratique { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.week-grid--pratique .review-week-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px;
  text-align: left; padding: 12px 14px;
}
.week-grid--pratique .review-week-card .week-num { grid-column: 1; grid-row: 1 / span 2; font-size: 15px; line-height: 1.3; }
.week-grid--pratique .review-week-card .week-meta { grid-column: 2; grid-row: 1; text-align: right; }
.week-grid--pratique .review-week-card .week-score { grid-column: 2; grid-row: 2; text-align: right; }
.week-grid--pratique .review-week-card .week-progress-bar,
.week-grid--pratique .review-week-card .week-progress-label { grid-column: 1 / -1; }
@media (max-width: 640px) { .week-grid--pratique { grid-template-columns: 1fr; } }
.kvt-result__btn--suite { display: block; margin: 0 auto 10px; }

/* Mode Ecriture : auto-evaluation, affichage etendu, anti-selection */
.ecriture-dessin, .ecriture-dessin * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.canvas-ecriture { touch-action: none; }
.ecriture-dessin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 8px; }
.ecriture-lissage { font-size: 13px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.ecriture-dessin--etendu {
  position: fixed; inset: 0; z-index: 2000; width: auto; border-radius: 0; background: var(--bg, var(--panel, #fff));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px; box-sizing: border-box;
}
.ecriture-dessin--etendu .canvas-ecriture {
  width: min(92vw, calc(100vh - 150px)); height: min(92vw, calc(100vh - 150px));
  max-width: none; background: #fff; border: 2px solid var(--border);
}
body.ecriture-etendu-actif { overflow: hidden; overscroll-behavior: none; }
.auto-eval { margin-top: 18px; text-align: center; }
.auto-eval__titre { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.auto-eval__boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.auto-eval__btn { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--border); background: var(--panel-alt); color: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.auto-eval__btn span { font-size: 12px; font-weight: 500; color: var(--muted); }
.auto-eval__btn--10 { border-color: var(--good-bright); }
.auto-eval__btn--5 { border-color: var(--warn-bright); }
.auto-eval__btn--0 { border-color: var(--bad-bright); }
.auto-eval-revoir { margin-top: 12px; font-size: 14px; line-height: 1.5; }

.verbe-base-sens { text-align:center; margin-top:8px; font-size:15px; color: var(--text, inherit); font-style: italic; }

.partie-joueur-chip--absent { opacity: .45; }

/* Corrections retours Lucien (05/10/2026) */
/* Bordure hardcore : ne doit pas etre ecrasee par le palier "parfait" (100 %). */
.week-card.week-card--hardcore, .week-card.palier-parfait.week-card--hardcore,
.review-week-card.palier-parfait.week-card--hardcore { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad) inset; }
/* Pas de barre de defilement horizontale quand la fenetre se reduit :
   les largeurs fixes se plafonnent a la largeur disponible. */
.flashcard, .session-progress { width: min(440px, 100%); box-sizing: border-box; }
.week-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ecriture-zone { flex-wrap: wrap; justify-content: center; }
@media (max-width: 860px) { .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.week-grid--pratique { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 640px) { .week-grid--pratique { grid-template-columns: 1fr; } }
.week-grid.week-grid--kana { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* Ecran de fin : gains, progression, barre, correction */
.kvt-result__gains { margin-top: 6px; font-weight: 700; color: var(--accent-bright, var(--accent)); }
.kvt-result__progression { margin-top: 6px; font-size: 14px; color: var(--muted); }
.kvt-result__barre { margin: 10px auto 4px; max-width: 280px; }
.kvt-result__barre-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.kvt-result__btn--secondaire { background: var(--panel-alt); color: inherit; border: 1px solid var(--border); margin-right: 8px; }
.recap-reponses { margin-top: 16px; overflow-x: auto; }
.recap-reponses tr.recap-ok td:last-child { color: var(--good-bright); font-weight: 700; }
.recap-reponses tr.recap-mid td:last-child { color: var(--warn-bright); font-weight: 700; }
.recap-reponses tr.recap-bad td:last-child { color: var(--bad-bright); font-weight: 700; }

.kvt-result-classement { position: relative; }
.kvt-panneau-fermer { position: absolute; top: 6px; right: 8px; border: none; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.kvt-panneau-fermer:hover { background: var(--panel-alt); color: inherit; }

.difficulte-modal { margin: 12px 0; }
.difficulte-modal__titre { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }

/* ---------- Classeur de kanji et coffres (15/10/2026) ---------- */
.coffre-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.coffre-carte-boutique { text-align: center; margin-bottom: 0; border-top: 4px solid var(--coffre); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.coffre-boutique__visuel { width: 132px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.coffre-svg { width: 100%; height: auto; display: block; }
.coffre-boutique__nom { font-weight: 700; font-size: 17px; }
.coffre-boutique__prix { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.coffre-boutique__nb { font-size: 12px; color: var(--muted); }
.coffre-chances { list-style: none; padding: 0; margin: 4px 0 6px; width: 100%; font-size: 12.5px; }
.coffre-chances li { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.coffre-chances b { margin-left: auto; font-variant-numeric: tabular-nums; }
.coffre-puce { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.coffre-ouvrir { width: 100%; margin-top: auto; }
.coffre-ouvrir:disabled { opacity: .55; cursor: not-allowed; }

.classeur-bilan { margin-bottom: 12px; }
.classeur-bilan__haut { margin-bottom: 8px; }
.classeur-barre { height: 10px; border-radius: 999px; background: var(--panel-alt); overflow: hidden; }
.classeur-barre__plein { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius: 999px; transition: width .4s; }
.classeur-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.classeur-legende span { display: inline-flex; align-items: center; gap: 6px; }
.classeur-onglets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.classeur-onglet { background: var(--panel); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; padding: 8px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-weight: 700; }
.classeur-onglet small { font-weight: 400; font-size: 11px; color: var(--muted); }
.classeur-onglet.actif { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright) inset; }
.classeur-onglets select { margin-left: auto; }
.classeur-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.classeur-case { position: relative; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--r); background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--ink); padding: 0; font-family: inherit; }
.classeur-case--vide { border-style: dashed; border-color: color-mix(in srgb, var(--r) 35%, var(--border)); background: var(--panel-alt); color: var(--muted); font-size: 22px; opacity: .8; }
.classeur-case--possede { cursor: pointer; }
.classeur-case--possede:hover, .classeur-case--selection { transform: translateY(-2px); }
.classeur-case__kanji { font-size: 30px; }
.classeur-case__n { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.classeur-case__nouveau { position: absolute; left: 3px; top: 3px; font-size: 9px; font-weight: 700; background: var(--pink); color: #fff; border-radius: 6px; padding: 1px 5px; }
.classeur-detail { display: flex; gap: 16px; align-items: center; border-left: 5px solid var(--r); margin-bottom: 12px; }
.classeur-detail__kanji { font-size: 64px; line-height: 1; }
.classeur-detail__texte { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.classeur-detail__rang, .classeur-detail__niveau { color: var(--muted); font-size: 13px; }
.classeur-detail__lectures { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.classeur-badge { display: inline-block; color: #14142a; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 10px; }

.coffre-ouvert { overflow: hidden; }
.coffre-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(8,8,20,.88); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.coffre-scene { text-align: center; max-width: 720px; width: 100%; color: #fff; }
.coffre-scene h3 { margin: 0 0 4px; }
.coffre-scene__texte { color: #c7c7e6; margin: 6px 0 14px; }
.coffre-boite { width: 200px; margin: 0 auto 14px; filter: drop-shadow(0 0 22px var(--coffre)); }
.coffre-boite--secoue { animation: coffre-secoue .5s ease-in-out 2; }
@keyframes coffre-secoue { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-9deg) scale(1.05); } 40% { transform: rotate(8deg) scale(1.08); } 60% { transform: rotate(-6deg) scale(1.1); } 80% { transform: rotate(5deg) scale(1.06); } }
.coffre-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.coffre-flip { position: relative; aspect-ratio: 3 / 4; border: none; background: none; padding: 0; cursor: pointer; transform-style: preserve-3d; transition: transform .6s; font-family: inherit; }
.coffre-flip.retournee { transform: rotateY(180deg); cursor: default; }
.coffre-flip__dos, .coffre-flip__face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.coffre-flip__dos { background: linear-gradient(145deg, #2a2a50, #1a1a36); border: 2px solid var(--coffre); font-size: 32px; color: var(--coffre); }
.coffre-flip__face { transform: rotateY(180deg); background: #1c1c34; border: 3px solid var(--r); }
.coffre-flip__face--legendaire { background: radial-gradient(circle, #3a2c10, #1c1c34 70%); }
.coffre-flip__face--epique { background: radial-gradient(circle, #2c1a44, #1c1c34 70%); }
@keyframes coffre-legende { from { box-shadow: 0 0 14px var(--r); } to { box-shadow: 0 0 34px var(--r), 0 0 8px #fff3; } }
.coffre-flip__kanji { font-size: 40px; color: #fff; line-height: 1; }
.coffre-flip__rarete { font-size: 11px; font-weight: 700; color: var(--r); text-transform: uppercase; letter-spacing: .5px; }
.coffre-flip__niveau { font-size: 11px; color: #a9a9d0; }
.coffre-flip__nouveau { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: 700; background: var(--pink); color: #fff; border-radius: 6px; padding: 1px 5px; }
.coffre-bilan { color: #fff; font-weight: 600; margin: 0 0 12px; }
.coffre-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .coffre-boite--secoue, .coffre-flip__face--legendaire { animation: none; }
  .coffre-flip { transition: none; }
}
@media (max-width: 520px) {
  .classeur-detail { flex-direction: column; text-align: center; }
  .classeur-onglets select { margin-left: 0; width: 100%; }
}

/* Coffre en perspective : le couvercle se leve et la lumiere sort (15/10/2026) */
.coffre-couvercle { transition: transform .45s cubic-bezier(.3,1.4,.5,1); transform-box: view-box; transform-origin: 80px 32px; }
.coffre-lueur { opacity: 0; transition: opacity .4s ease; }
.coffre-boite--ouvre .coffre-couvercle { transform: translate(0, -20px) rotate(-7deg); }
.coffre-boite--ouvre .coffre-lueur { opacity: 1; }
.coffre-boite--ouvre { filter: drop-shadow(0 0 34px var(--coffre)); }
@media (prefers-reduced-motion: reduce) { .coffre-couvercle, .coffre-lueur { transition: none; } }

/* Ouverture carte par carte, fiche du kanji (15/10/2026) */
.coffre-scene--solo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.coffre-solo { width: min(320px, 100%); }
.coffre-solo__compteur { font-size: 13px; color: #cfd0ee; margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
.coffre-solo__carte { position: relative; background: linear-gradient(160deg, #26264a, #15152c); border: 2px solid var(--r); border-radius: 18px; padding: 26px 20px 20px; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: coffre-solo-entree .55s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes coffre-solo-entree { from { opacity: 0; transform: perspective(700px) rotateY(-80deg) scale(.85); } to { opacity: 1; transform: perspective(700px) rotateY(0) scale(1); } }
.coffre-solo__kanji { font-size: 96px; line-height: 1.05; color: #fff; }
.coffre-solo__pastilles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.coffre-solo__niveau { font-size: 13px; color: #cfd0ee; font-weight: 600; }
.coffre-solo__lectures { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; text-align: left; }
.coffre-solo__lectures > div:only-child { grid-column: 1 / -1; text-align: center; }
.coffre-solo__lectures dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9a9bcb; }
.coffre-solo__lectures dd { margin: 2px 0 0; font-size: 16px; color: #fff; }
.coffre-solo__mot { width: 100%; border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; display: grid; gap: 2px; }
.coffre-solo__mot-jp { font-size: 26px; color: #fff; }
.coffre-solo__mot-lecture { font-size: 14px; color: var(--r); }
.coffre-solo__mot-sens { font-size: 13px; color: #cfd0ee; }
.coffre-solo__doublon { position: absolute; top: 10px; right: 12px; font-size: 11px; color: #cfd0ee; background: rgba(255,255,255,.1); border-radius: 999px; padding: 2px 8px; }
.coffre-solo .coffre-flip__nouveau { top: 10px; right: 12px; }
.coffre-flip--fixe { cursor: default; }
@media (prefers-reduced-motion: reduce) { .coffre-solo__carte, .coffre-solo--legendaire .coffre-solo__carte { animation: none; } }

/* Coffres dans la Boutique : trois cote a cote, animation au survol (15/10/2026) */
.coffre-rangee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; perspective: 900px; }
.coffre-rangee .coffre-carte-boutique { transition: transform .3s cubic-bezier(.2,1.2,.4,1), box-shadow .3s ease, border-color .3s ease; padding: 14px 12px; }
.coffre-rangee .coffre-boutique__visuel { width: min(100%, 170px); transition: transform .35s cubic-bezier(.2,1.2,.4,1), filter .35s ease; }
.coffre-rangee .coffre-carte-boutique:hover, .coffre-rangee .coffre-carte-boutique:focus-within { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(0,0,0,.4), 0 0 24px -4px var(--coffre); border-color: var(--coffre); }
.coffre-rangee .coffre-carte-boutique:hover .coffre-boutique__visuel, .coffre-rangee .coffre-carte-boutique:focus-within .coffre-boutique__visuel { transform: perspective(500px) rotateY(-10deg) scale(1.1) translateY(-4px); filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)) drop-shadow(0 0 14px var(--coffre)); }
.coffre-rangee .coffre-carte-boutique:hover .coffre-couvercle, .coffre-rangee .coffre-carte-boutique:focus-within .coffre-couvercle { transform: translate(0, -9px) rotate(-4deg); }
.coffre-rangee .coffre-carte-boutique:hover .coffre-lueur, .coffre-rangee .coffre-carte-boutique:focus-within .coffre-lueur { opacity: .9; }
.coffre-chances-det { width: 100%; font-size: 12.5px; }
.coffre-chances-det summary { cursor: pointer; color: var(--muted); text-align: center; list-style: none; padding: 2px 0; }
.coffre-chances-det summary::-webkit-details-marker { display: none; }
.coffre-chances-det summary:hover { color: var(--ink); }
.coffre-chances-det[open] summary { margin-bottom: 2px; }
.classeur-lien-boutique { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.coffre-bilan--liste { font-size: 20px; letter-spacing: .04em; margin-top: 4px; }
@media (max-width: 560px) {
  .coffre-rangee { gap: 8px; }
  .coffre-rangee .coffre-carte-boutique { padding: 10px 6px; gap: 4px; }
  .coffre-rangee .coffre-boutique__nom { font-size: 13px; }
  .coffre-rangee .coffre-boutique__nb { font-size: 11px; text-align: center; }
  .coffre-rangee .coffre-ouvrir { font-size: 12px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) { .coffre-rangee .coffre-carte-boutique, .coffre-rangee .coffre-boutique__visuel { transition: none; } .coffre-rangee .coffre-carte-boutique:hover { transform: none; } }

/* Phrase d'exemple apres la reponse (L0, 15/10/2026) */
.phrase-exemple { margin: 12px 0 4px; padding: 10px 14px; border-left: 3px solid var(--accent-bright); background: var(--panel-alt); border-radius: 0 10px 10px 0; text-align: left; }
.phrase-exemple__titre { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.phrase-exemple__jp { font-size: 18px; color: var(--ink); }
.phrase-exemple__lecture { font-size: 13px; color: var(--accent-bright); margin-top: 2px; }
.phrase-exemple__tr { font-size: 13px; color: var(--muted); margin-top: 4px; }

.btn-audio{background:none;border:1px solid var(--border,#ccc);border-radius:999px;padding:0 6px;font-size:13px;line-height:20px;cursor:pointer;vertical-align:middle}
.btn-audio:hover{background:rgba(127,127,127,.15)}

.btn-audio{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;color:var(--accent,#6cb8ff)}
.btn-audio svg{display:block}

.coffre-solo__sens{font-size:18px;font-weight:600;text-align:center;margin:2px 0 6px}
.classeur-detail__sens{font-size:16px;font-weight:600;margin:2px 0}
.classeur-case__sens{position:absolute;left:2px;right:2px;bottom:2px;font-size:9px;line-height:1.1;text-align:center;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.classeur-case__n{bottom:12px}

/* Phrase d'exemple compacte (15/10/2026) : sans titre, lecture et traduction sur une ligne. */
.phrase-exemple { margin: 8px 0 2px; padding: 6px 12px; }
.phrase-exemple__jp { font-size: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.phrase-exemple__sous { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 0; align-items: baseline; margin-top: 1px; }
.phrase-exemple__sous .phrase-exemple__lecture { font-size: 12px; margin-top: 0; }
.phrase-exemple__sous .phrase-exemple__tr { font-size: 12px; margin-top: 0; }
.phrase-exemple .btn-audio { width: 22px; height: 22px; }

.phrase-exemple__jp ruby { ruby-position: over; }
.phrase-exemple__jp rt { font-size: 0.5em; color: var(--accent-bright); letter-spacing: 0; }
.phrase-exemple__jp { line-height: 2; }

.duel-reponses { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.duel-reponse { padding: 8px 12px; border-radius: 10px; background: var(--card-bg, rgba(127,127,127,.12)); }
.duel-reponse--ok { border-left: 4px solid #4caf50; }
.duel-reponse--faux { border-left: 4px solid #e5533d; }
.duel-reponse--aucune { border-left: 4px solid var(--muted); }
.bombe-derniere { margin: 8px 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: rgba(127,127,127,.12); }
.bombe-derniere--ok { border-left: 4px solid #4caf50; }
.bombe-derniere--faux { border-left: 4px solid #e5533d; }

.fin-historique { margin-top: 16px; }
.fin-historique h3 { margin: 0 0 8px; }
.fin-stats { overflow-x: auto; }
.fin-stats table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-stats th, .fin-stats td { padding: 6px 8px; text-align: center; border-bottom: 1px solid rgba(127,127,127,.25); }
.fin-stats th:first-child, .fin-stats td:first-child { text-align: left; }
.fin-historique summary { cursor: pointer; margin: 12px 0 6px; font-weight: 600; }
.fin-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.fin-hist li { padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.1); font-size: 14px; }
.fin-hist__titre span { color: var(--muted); }
.fin-hist__rep { margin-top: 2px; }
.fin-hist__rep--ok { border-left: 4px solid #4caf50; padding-left: 8px; }
.fin-hist__rep--faux { border-left: 4px solid #e5533d; padding-left: 8px; }
.fin-hist__rep--aucune { border-left: 4px solid var(--muted); padding-left: 8px; }

.bombe-scene { position: relative; }
.bombe-decompte { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; background: rgba(0,0,0,.72); color: #fff; text-align: center; padding: 8px; }
.bombe-decompte__qui { font-size: 18px; font-weight: 700; text-wrap: balance; }
.bombe-decompte__n { font-size: 72px; font-weight: 800; line-height: 1; }

.partie-transition { text-align: center; padding: 48px 16px; animation: partie-transition-in .5s ease-out both; }
.partie-transition__icone { font-size: 72px; line-height: 1; animation: partie-transition-pop .9s cubic-bezier(.2,1.4,.4,1) both; }
.partie-transition__titre { margin-top: 12px; font-size: 26px; font-weight: 800; letter-spacing: .02em; animation: partie-transition-in .6s .3s ease-out both; }
.partie-transition__texte { margin-top: 6px; font-size: 18px; color: var(--muted); animation: partie-transition-in .6s .7s ease-out both; }
.jeu-carte--fin { animation: partie-transition-in .6s ease-out both; }
@keyframes partie-transition-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes partie-transition-pop { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .partie-transition, .partie-transition__icone, .partie-transition__titre, .partie-transition__texte, .jeu-carte--fin { animation: none !important; } }

/* Revente, marche et echanges de cartes (17/10/2026) */
.ech-bloc { margin-top: 12px; }
.ech-bloc > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ech-bloc h4 { margin: 14px 0 6px; display: flex; gap: 10px; align-items: center; }
.ech-aide { color: var(--muted); font-size: 13px; font-weight: 400; }
.ech-liste { display: grid; gap: 6px; }
.ech-ligne { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(127,127,127,.1); }
.ech-ligne__texte { flex: 1 1 160px; min-width: 0; }
.ech-carte { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 4px 8px; border-radius: 8px; border: 2px solid var(--r, #9aa5b1); line-height: 1.1; }
.ech-carte b { font-size: 24px; }
.ech-carte small { font-size: 10px; color: var(--muted); }
.ech-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.ech-form input[type="number"], .ech-form input[type="text"], .ech-form select { min-width: 0; max-width: 100%; }
.ech-champ { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }

.resume-card--fermable { position: relative; padding-right: 44px; }
.resume-fermer { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.resume-fermer:hover, .resume-fermer:focus-visible { background: rgba(127,127,127,.2); color: var(--fg, inherit); }

.retour-brouillon { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.retour-brouillon__effacer { background: none; border: 0; padding: 0; color: var(--accent, #3b9bff); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* Fenetre de choix d'une semaine : explications affichees en clair (17/10/2026).
   Les anciennes bulles « ? » depassaient de la fenetre et creaient une barre de
   defilement inutile : plus de bulles, tout tient dans la fenetre. */
.modal-box.modal-box--semaine { max-height: 94vh; padding-bottom: 18px; }
.modal-box--semaine .filtre-mode--aide { gap: 8px 16px; }
.modal-box--semaine .difficulte-modal { margin: 10px 22px; }
.difficulte-modal__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.mode-choix { align-items: flex-start; }
.mode-choix input { margin-top: 3px; flex: none; }
.mode-choix__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mode-choix__txt small { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.modal-nonclasse { margin: 10px 22px 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; }
.kvt-result__badge--libre { background: var(--panel-alt); color: var(--muted); border: 1px dashed var(--border); }
@media (max-width: 520px) { .difficulte-modal__choix { grid-template-columns: 1fr; } }

/* Icones de rang SVG (17/10/2026) */
.rang-icone { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.gamif-widget__rang { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 6px; }
.celebration__icone { display: flex; justify-content: center; font-size: 0; }
.insigne .rang-icone { margin-right: 1px; }

/* Infobulle flottante des « i » (jamais coupée par la modale) */
.aide-flottante {
  position: fixed; z-index: 10000; max-width: min(300px, calc(100vw - 16px));
  padding: 9px 12px; border-radius: 8px; background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: none;
}
.mode-choix .aide-bulle { margin-left: 2px; }
/* Bouton Voc / Trad sous la barre d'XP */
.table-bascule-row { display: flex; justify-content: center; margin: 4px 0 12px; }
.table-bascule {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-alt); cursor: pointer; min-width: 190px; font: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}
.table-bascule::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.4,1.4,.5,1);
}
.table-bascule--trad::before { transform: translateX(100%); }
.table-bascule__opt { position: relative; padding: 7px 0; font-weight: 800; letter-spacing: .06em; color: var(--muted); transition: color .2s; }
.table-bascule__opt.actif { color: #fff; }
.table-bascule:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.section-repliable__tete { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.section-repliable__tete .boutique-section__titre { margin: 0; }