/* ========== On apprend avec Levy — styles ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #FDF6EC;
  --card: #FFFFFF;
  --ink: #2B2540;
  --ink-soft: #5A5270; /* fonce depuis #6B6483 pour rester >4.5:1 avec le texte hebreu en 0.92em */
  --primary: #4A90D9;
  --primary-dark: #2C5E93;
  --accent: #F5A623;
  --accent-text: #C77F0A; /* meme teinte que l'accent mais assez sombre pour 4.5:1 sur fond clair */
  --on-accent: #2B2540; /* texte SUR un fond orange (boutons) : foncé => lisible en clair ET en sombre */
  --good: #34A853;
  --good-bg: #E3F6E8;
  --bad: #E5484D;
  --bad-bg: #FDEBEC;
  --radius: 20px;
  --shadow: 0 4px 14px rgba(43, 37, 64, 0.10);
  --font: "Fredoka", "Rubik", "Segoe UI", sans-serif;
  --font-he: "Rubik", "Segoe UI", sans-serif;
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

#app { max-width: 540px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; padding: 16px; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }

/* ---------- Texte hébreu : toujours sur sa propre ligne, sous le français ---------- */
.he {
  direction: rtl; unicode-bidi: isolate; text-align: center;
  font-family: var(--font-he); color: var(--ink-soft);
  font-size: 0.92em; line-height: 1.7; /* le niqqud a besoin d'air */
  display: block; margin-top: 4px;
}
.ex-prompt .he, .lesson-card .he, .mascot-panel .he { font-size: 0.95em; }
.sub-card .he, .level-card .he, .profile-row .he { text-align: right; margin-top: 2px; }

/* garde-fous anti-débordement */
.ex-question, .fill-sentence, .choice, .lesson-card .big, .read-text, .joke-card .joke-q, .joke-card .joke-a {
  overflow-wrap: anywhere;
}
@media (max-width: 360px) {
  .lesson-card .big { font-size: 2rem; }
  .ex-question { font-size: 1.9rem; }
  .fill-sentence { font-size: 1.4rem; }
  .choice { font-size: 1.15rem; }
}

/* ---------- Boutons génériques ---------- */
button { font-family: inherit; border: none; cursor: pointer; color: inherit; background: none; }
.btn:focus-visible, .choice:focus-visible, .tile:focus-visible, .match-item:focus-visible,
.level-card:focus-visible, .sub-card:focus-visible, .chip:focus-visible, .say-btn:focus-visible,
.back:focus-visible, .profile-row .del:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}
.btn {
  display: block; width: 100%; padding: 15px 20px; border-radius: var(--radius);
  font-size: 1.15rem; font-weight: 700; text-align: center;
  background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-dark); }
.btn.btn-accent { background: var(--accent); box-shadow: 0 4px 0 #C77F0A; color: var(--on-accent); }
.btn.btn-accent .he { color: rgba(43, 37, 64, 0.7); }
.btn.btn-accent:active { box-shadow: 0 1px 0 #C77F0A; }
.btn.btn-good { background: var(--good); box-shadow: 0 4px 0 #1E7A38; }
.btn.btn-good:active { box-shadow: 0 1px 0 #1E7A38; }
.btn.btn-ghost { background: #fff; color: var(--ink); box-shadow: 0 4px 0 #D8D2C6; border: 2px solid #EEE7DA; }
.btn.btn-ghost:active { box-shadow: 0 1px 0 #D8D2C6; }
.btn + .btn { margin-top: 10px; }
.btn .he { color: rgba(255,255,255,0.85); }
.btn.btn-ghost .he { color: var(--ink-soft); }

/* ---------- Header commun ---------- */
.topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.topbar .back { font-size: 1.5rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); }
.topbar .title { flex: 1; font-weight: 600; font-size: 1.05rem; }
.topbar .chip {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 11px; background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  font-size: 0.95rem; font-weight: 600;
}
.topbar .chip.active { background: var(--primary); color: #fff; }

/* ---------- Écran profils ---------- */
.splash { justify-content: center; text-align: center; gap: 10px; }
.splash .mascot-wrap { width: 150px; margin: 0 auto; }
.splash h1 { font-size: 2rem; font-weight: 700; color: var(--primary-dark); line-height: 1.15; }
.splash h1 .fr { color: var(--accent); }
.splash .subtitle { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 8px; }
.profiles-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.profile-row {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border-radius: var(--radius); padding: 13px 16px; box-shadow: var(--shadow);
  font-size: 1.1rem; font-weight: 600; text-align: left;
}
.profile-row .avatar { font-size: 1.6rem; }
.profile-row .stars { margin-left: auto; color: var(--accent); font-size: 0.95rem; }
.profile-row .del {
  color: #C9C2D4; font-size: 1.1rem; padding: 4px 6px;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.new-title { font-weight: 700; color: var(--primary-dark); margin: 14px 0 4px; font-size: 1.05rem; }
.avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 10px;
}
.avatar-pick {
  aspect-ratio: 1 / 1; min-height: 64px; border: 3px solid #E9E1D2; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); font-size: 2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .1s, border-color .1s;
}
.avatar-pick:hover, .avatar-pick:focus-visible { border-color: var(--primary); transform: translateY(-2px); outline: none; }
.avatar-pick:active { transform: scale(0.94); }
@media (max-width: 340px) { .avatar-grid { grid-template-columns: repeat(3, 1fr); } }
.newplayer-form { display: flex; gap: 8px; margin-top: 6px; }
.newplayer-form input {
  flex: 1; padding: 13px 16px; border-radius: var(--radius); border: 2px solid #E5DDCF;
  font-family: inherit; font-size: 1.05rem; outline: none; background: #fff;
}
.newplayer-form input:focus { border-color: var(--primary); }
.newplayer-form .btn { width: auto; padding: 13px 18px; }

/* ---------- Carte des niveaux ---------- */
.level-card {
  display: flex; align-items: center; gap: 14px; background: var(--card);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  margin-bottom: 12px; width: 100%; text-align: left; position: relative;
  border-left: 8px solid var(--lvl, var(--primary));
}
.level-card .lvl-emoji {
  width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; background: color-mix(in srgb, var(--lvl, var(--primary)) 14%, white); flex-shrink: 0;
}
.level-card .lvl-info { flex: 1; min-width: 0; }
.level-card .lvl-num { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--lvl, var(--primary)); text-transform: uppercase; }
.level-card .lvl-name { display: block; font-size: 1.15rem; font-weight: 700; }
.level-card .lvl-name .he-inline { font-weight: 400; color: var(--ink-soft); font-size: 0.82em; margin-left: 6px; direction: rtl; unicode-bidi: isolate; }
.level-card .lvl-tag { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }
.level-card .lvl-progress { font-size: 0.9rem; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.level-card.locked { filter: grayscale(1); opacity: 0.55; }
.level-card.locked .lvl-lock { position: absolute; right: 14px; font-size: 1.3rem; }

/* ---------- Sous-niveaux ---------- */
.sub-list { display: flex; flex-direction: column; gap: 12px; }
.sub-card {
  display: flex; align-items: center; gap: 13px; background: var(--card);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  width: 100%; text-align: left; position: relative;
}
.sub-card .sub-emoji {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--bg); flex-shrink: 0; border: 3px solid var(--lvl, var(--primary));
}
.sub-card.done .sub-emoji { background: var(--good-bg); border-color: var(--good); }
.sub-card .sub-info { flex: 1; }
.sub-card .sub-name { display: block; font-weight: 700; font-size: 1.05rem; }
.sub-card .sub-name .he-inline { font-weight: 400; color: var(--ink-soft); font-size: 0.82em; margin-left: 6px; direction: rtl; unicode-bidi: isolate; }
.sub-card .sub-stars { display: block; font-size: 0.88rem; color: var(--accent-text); }
.sub-card.locked { filter: grayscale(1); opacity: 0.55; }

/* ---------- Leçon ---------- */
.lesson-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 18px; text-align: center; flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: 14px; margin-bottom: 14px;
  border-top: 8px solid var(--lvl, var(--primary));
}
.lesson-card h2 { font-size: 1.35rem; color: var(--lvl, var(--primary)); }
.lesson-card .big {
  font-size: 2.6rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3;
  color: var(--ink); word-break: break-word;
}
.lesson-card .body { font-size: 1.08rem; line-height: 1.6; color: var(--ink); max-width: 30em; margin: 0 auto; }
/* chaque phrase sur sa ligne */
.lesson-card .body-line { display: block; margin: 8px 0; }
/* chaque item de liste ("X comme mot") dans une petite pastille, un par ligne */
.lesson-card .body-item {
  display: block; margin: 7px auto; padding: 7px 12px;
  background: #FBF5EA; border-radius: 12px; font-weight: 600; max-width: 22em;
}
.lesson-card .he .body-item { background: #F5F0FA; }
.lesson-card .he .body-line { display: block; }
.lesson-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.lesson-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: #DDD5C6; }
.lesson-dots .dot.on { background: var(--lvl, var(--primary)); }

/* ---------- Exercices ---------- */
.progress-track { flex: 1; height: 12px; background: #EDE5D6; border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--good); border-radius: 8px; transition: width 0.3s ease; }

.ex-wrap { flex: 1; display: flex; flex-direction: column; }
.ex-prompt { text-align: center; margin: 10px 0 4px; }
.ex-prompt .fr { font-size: 1.2rem; font-weight: 700; }
.ex-question {
  text-align: center; font-size: 2.4rem; font-weight: 700; margin: 14px 0;
  line-height: 1.25; word-break: break-word;
}
.ex-question.small { font-size: 1.25rem; font-weight: 500; text-align: left; white-space: pre-wrap; }

.say-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 10px auto; padding: 12px 22px; border-radius: 50px;
  background: var(--accent); color: var(--on-accent); font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 4px 0 #C77F0A;
}
.say-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C77F0A; }
.say-btn.big { font-size: 1.4rem; padding: 18px 30px; }
.say-btn.loading { opacity: 0.75; animation: pulse 0.7s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 14px; }
.choices.single-col { grid-template-columns: 1fr; }
.choice {
  padding: 16px 10px; border-radius: var(--radius); background: var(--card);
  border: 3px solid #EEE7DA; box-shadow: var(--shadow);
  font-size: 1.3rem; font-weight: 700; text-align: center; word-break: break-word;
  transition: transform 0.08s ease;
}
.choice:active { transform: scale(0.97); }
.choice.emoji { font-size: 2.2rem; }
.choice.correct { background: var(--good-bg); border-color: var(--good); }
.choice.wrong { background: var(--bad-bg); border-color: var(--bad); animation: shake 0.4s; }
.choice:disabled { pointer-events: none; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* build */
.build-target {
  min-height: 64px; display: flex; gap: 8px; justify-content: center; align-items: center;
  background: #fff; border: 3px dashed #D8CFBE; border-radius: var(--radius);
  padding: 10px; margin: 14px 0; flex-wrap: wrap;
}
.build-slot {
  padding: 12px 16px; border-radius: 14px; background: var(--good-bg);
  border: 2px solid var(--good); font-size: 1.3rem; font-weight: 700;
}
.build-tiles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.tile {
  padding: 15px 19px; border-radius: 14px; background: var(--card);
  border: 3px solid #EEE7DA; box-shadow: var(--shadow);
  font-size: 1.3rem; font-weight: 700;
}
.tile.used { opacity: 0.25; pointer-events: none; }

/* fill */
.fill-sentence { text-align: center; font-size: 1.7rem; font-weight: 700; margin: 18px 0; line-height: 1.5; }
.fill-blank {
  display: inline-block; min-width: 46px; border-bottom: 4px solid var(--accent);
  color: var(--accent-text); padding: 0 6px;
}

/* type (dictée) */
.type-input {
  width: 100%; padding: 16px; border-radius: var(--radius); border: 3px solid #E5DDCF;
  font-family: inherit; font-size: 1.4rem; font-weight: 600; text-align: center;
  outline: none; margin: 14px 0; background: #fff;
}
.type-input:focus { border-color: var(--primary); }

/* match */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.match-item {
  padding: 14px 8px; border-radius: var(--radius); background: var(--card);
  border: 3px solid #EEE7DA; box-shadow: var(--shadow);
  font-size: 1.2rem; font-weight: 700; text-align: center;
}
.match-item.selected { border-color: var(--primary); background: #EAF2FC; }
.match-item.matched { background: var(--good-bg); border-color: var(--good); opacity: 0.7; pointer-events: none; }
.match-item.flash { background: var(--bad-bg); border-color: var(--bad); animation: shake 0.4s; }

/* read */
.read-text {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 18px; text-align: center; font-size: 1.6rem; font-weight: 600;
  line-height: 1.6; margin: 16px 0; white-space: pre-wrap;
  border-top: 8px solid var(--lvl, var(--primary));
}

/* ---------- Mascotte overlay (réaction) ---------- */
.mascot-overlay {
  position: fixed; inset: 0; background: rgba(43, 37, 64, 0.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
  animation: fadeIn 0.2s ease;
}
.mascot-panel {
  background: #fff; border-radius: 26px 26px 0 0; width: 100%; max-width: 540px;
  padding: 20px 20px 26px; text-align: center; animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.mascot-panel .mascot-wrap { width: 110px; margin: -70px auto 4px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }
.mascot-panel h3 { font-size: 1.4rem; margin-bottom: 6px; }
.mascot-panel.good h3 { color: var(--good); }
.mascot-panel.bad h3 { color: var(--bad); }
.mascot-panel .explain { font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin-bottom: 6px; }
.mascot-panel .btn { margin-top: 12px; }

/* mascotte animations */
.mascot-wrap svg { width: 100%; height: auto; }
.mascot-cheer { animation: bounce 0.6s ease infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.mascot-wave { animation: wiggle 1.2s ease infinite; transform-origin: 50% 90%; }
@keyframes wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
/* danse de victoire de Levy (Mazal Tov, résultats, diplôme) : plus rebondie et vivante */
.mascot-dance { animation: victoryDance 0.85s cubic-bezier(.34,.6,.4,1.2) infinite; transform-origin: 50% 92%; }
@keyframes victoryDance {
  0%   { transform: translateY(0) rotate(-7deg) scale(1,1); }
  20%  { transform: translateY(-11px) rotate(-7deg) scale(1.05,.95); }
  40%  { transform: translateY(0) rotate(7deg) scale(1,1); }
  60%  { transform: translateY(-11px) rotate(7deg) scale(1.05,.95); }
  80%  { transform: translateY(-2px) rotate(-4deg) scale(1,1); }
  100% { transform: translateY(0) rotate(-7deg) scale(1,1); }
}

/* ---------- Résultats ---------- */
.results { justify-content: center; text-align: center; gap: 14px; }
.results .mascot-wrap { width: 140px; margin: 0 auto; }
.results h2 { font-size: 1.7rem; color: var(--primary-dark); }
.results .stars-big { font-size: 1.9rem; letter-spacing: 0.05em; overflow-wrap: anywhere; line-height: 1.3; padding: 0 8px; }
.results .score-line { color: var(--ink-soft); font-size: 1.05rem; }

.joke-card {
  background: #FFF6E3; border: 3px solid var(--accent); border-radius: var(--radius);
  padding: 18px; margin: 8px 0; text-align: center;
}
.joke-card .joke-label { font-weight: 700; color: #C77F0A; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.joke-card .joke-q { font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
.joke-card .joke-a { font-size: 1.12rem; font-weight: 700; color: var(--primary-dark); margin-top: 10px; line-height: 1.45; }
.joke-card .btn { margin-top: 12px; }

/* ---------- Diplôme ---------- */
.diploma {
  background: linear-gradient(160deg, #FFF9EA, #FFEFC8); border: 4px solid var(--accent);
  border-radius: var(--radius); padding: 26px 18px; text-align: center; margin: 12px 0;
}
.diploma .dip-title { font-size: 0.85rem; letter-spacing: 0.2em; font-weight: 700; color: #C77F0A; }
.diploma h2 { font-size: 1.8rem; color: var(--primary-dark); margin: 8px 0; }
.diploma .dip-name { font-size: 2.2rem; font-weight: 700; color: var(--accent); margin: 10px 0; }
.diploma .dip-text { font-size: 1rem; line-height: 1.5; }

/* confetti */
#confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti {
  position: absolute; width: 10px; height: 14px; top: -20px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}

@media (min-width: 541px) {
  #app { border-left: 1px solid #EDE4D3; border-right: 1px solid #EDE4D3; }
}

/* ========== Nouvelles fonctionnalités (sauvegarde, badges, série, reprise) ========== */
.splash-tools { display: flex; gap: 10px; justify-content: center; margin: 14px auto 0; flex-wrap: wrap; }

.resume-btn { margin-bottom: 12px; }
.streak-chip { background: #FFF1DE; color: var(--accent-text); font-weight: 700; }

/* Bannière + grille de badges */
.streak-banner {
  background: linear-gradient(90deg, #FFF1DE, #FDEBEC);
  border-radius: var(--radius); padding: 12px 16px; text-align: center;
  font-weight: 700; color: var(--ink); box-shadow: var(--shadow); margin-bottom: 8px;
}
.badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.badge-item {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 10px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 8px; opacity: 0.55; filter: grayscale(0.6);
  border: 2px solid transparent; transition: transform 0.15s ease;
}
.badge-item.got { opacity: 1; filter: none; border-color: var(--accent); }
.badge-emoji { font-size: 2.6rem; line-height: 1; }
.badge-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }

/* Écran sauvegarde */
.backup-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px;
}
.backup-h { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; color: var(--primary-dark); }
.backup-p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 12px; line-height: 1.4; }
.backup-box .btn { margin-top: 8px; }
.backup-code {
  width: 100%; min-height: 70px; margin-top: 10px; padding: 10px; border-radius: 12px;
  border: 2px solid #EDE4D3; font-family: monospace; font-size: 0.8rem; resize: vertical;
  background: #FBF6EE; color: var(--ink-soft); word-break: break-all;
}

/* ========== Levy vivant : bulles de BD + animations ========== */
/* --- bulle de BD (remplace le petit toast) --- */
.comic-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px; z-index: 70;
  max-width: 94vw; animation: comicPop 0.34s cubic-bezier(.18,.9,.32,1.5);
  pointer-events: none;
}
.comic-toast.out { animation: comicOut 0.3s ease forwards; }
.comic-mascot { width: 66px; flex-shrink: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,.22)); }
.comic-bubble {
  position: relative; background: #fff; border: 3px solid var(--ink);
  border-radius: 20px; padding: 9px 18px; margin-bottom: 12px;
  box-shadow: 4px 5px 0 rgba(43,37,64,.22);
}
.comic-bubble .comic-txt {
  font-family: var(--font); font-weight: 700; font-size: 1.4rem; color: var(--ink);
  display: block; line-height: 1.05; white-space: nowrap;
}
.comic-bubble .he { font-size: .78rem; font-weight: 500; white-space: normal; }
/* petite queue de bulle pointant vers Levy */
.comic-bubble::before {
  content: ""; position: absolute; left: -15px; bottom: 13px;
  border: 9px solid transparent; border-right-color: var(--ink); border-left: 0;
}
.comic-bubble::after {
  content: ""; position: absolute; left: -10px; bottom: 15px;
  border: 7px solid transparent; border-right-color: #fff; border-left: 0;
}
@keyframes comicPop { 0% { transform: translateX(-50%) scale(.55); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes comicOut { to { transform: translateX(-50%) translateY(14px); opacity: 0; } }

/* --- saut de joie (bonnes réponses) --- */
.mascot-jump { animation: joyJump 0.62s cubic-bezier(.3,.7,.4,1.3) 2; transform-origin: 50% 90%; }
@keyframes joyJump {
  0%,100% { transform: translateY(0) scale(1,1); }
  18% { transform: translateY(0) scale(1.08,.9); }
  45% { transform: translateY(-15px) scale(.93,1.09) rotate(-5deg); }
  70% { transform: translateY(0) scale(1.05,.95) rotate(4deg); }
  85% { transform: translateY(-3px) rotate(-2deg); }
}

/* --- applaudissements : les mains se rapprochent, le corps rebondit --- */
.mascot-clap { animation: clapBob 0.3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes clapBob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } }
.mascot-clap .lv-hand-l { animation: clapL 0.3s ease-in-out infinite; }
.mascot-clap .lv-hand-r { animation: clapR 0.3s ease-in-out infinite; }
@keyframes clapL { 0%,100% { transform: translateX(-6px) rotate(-4deg); } 50% { transform: translateX(2px); } }
@keyframes clapR { 0%,100% { transform: translateX(6px) rotate(4deg); } 50% { transform: translateX(-2px); } }

/* --- Levy tout content qui tient un cœur (love) : le corps se dandine, le cœur bat --- */
.mascot-love { animation: clapBob 0.5s ease-in-out infinite; transform-origin: 50% 92%; }
.mascot-love .lv-heart { transform-origin: 50px 93px; animation: heartBeat 0.7s ease-in-out infinite; }
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  25% { transform: scale(1.28); }
  45% { transform: scale(1.06); }
  65% { transform: scale(1.2); }
}

/* --- dandinement rigolo (surprises) --- */
.mascot-fun { animation: funWiggle 0.7s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes funWiggle {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  25% { transform: rotate(4deg) translateY(-2px); }
  50% { transform: rotate(-4deg) translateY(0); }
  75% { transform: rotate(6deg) translateY(-2px); }
}

/* --- barre de félicitation avec bouton "Suivant" cliqué par l'enfant --- */
.correct-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 76;
  background: linear-gradient(180deg, #FFFFFF, #EAF7EE);
  border-top: 3px solid var(--good);
  box-shadow: 0 -6px 20px rgba(43,37,64,.16);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: barUp .28s ease;
}
@keyframes barUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.correct-levy { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.correct-levy .comic-mascot { width: 52px; }
.correct-levy .comic-bubble { padding: 8px 14px; }
.correct-levy .comic-bubble .comic-txt { font-size: 1.15rem; white-space: normal; }
.correct-bar .next-btn { flex: 0 0 auto; width: auto; margin: 0; padding: 13px 24px; font-size: 1.1rem; }
#app { padding-bottom: 0; }

/* ========== Coin des parents : ressources, fiches, coloriages ========== */
.parents-btn {
  display: block; width: 100%; margin: 6px 0 4px; padding: 13px;
  background: #FFF; color: var(--primary-dark); border: 2px dashed var(--primary);
  border-radius: 16px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: var(--font);
}
.res-intro { text-align: center; color: var(--ink-soft); margin: 4px 0 14px; }
.res-cards { display: flex; flex-direction: column; gap: 12px; }
.res-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background: var(--card); border: none; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 14px; cursor: pointer; font-family: var(--font); border-top: 6px solid var(--accent);
}
.res-card .rc-emoji { font-size: 2.4rem; }
.res-card .rc-t { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.res-card .rc-d { font-size: .9rem; color: var(--ink-soft); }
.res-list { display: flex; flex-direction: column; gap: 10px; }
.res-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: none; border-radius: 16px; box-shadow: var(--shadow);
  padding: 14px 16px; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.res-item .ri-emoji { font-size: 1.6rem; }
.res-item span:nth-child(2) { flex: 1; }
.res-item .ri-go { color: var(--accent-text); font-size: 1.2rem; }

/* grille coloriages */
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-thumb {
  background: var(--card); border: none; border-radius: 16px; box-shadow: var(--shadow);
  padding: 12px; cursor: pointer; font-family: var(--font); font-weight: 700; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.color-thumb .color-svg svg { width: 90px; height: 90px; }
.color-thumb .color-svg img { width: 92px; height: 92px; object-fit: contain; display: block; }
.color-svg svg, .color-big svg { stroke: var(--ink); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.color-big img.color-print-img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
@media print { .color-big img.color-print-img { max-width: 100%; } }

/* vue imprimable */
.print-hint { text-align: center; color: var(--ink-soft); font-size: .9rem; margin: 6px 0 10px; }
.print-chip { background: var(--good); color: #fff; }
.print-area { flex: 1; }
.sheet {
  background: #fff; color: #111; border-radius: 12px; padding: 18px 20px 26px;
  box-shadow: var(--shadow); max-width: 720px; margin: 0 auto;
}
.sheet-title { text-align: center; font-size: 1.5rem; color: var(--primary-dark); margin-bottom: 6px; }
.sheet-sub { text-align: center; color: #555; margin-bottom: 16px; font-size: .98rem; }
.sheet-foot { text-align: center; color: #999; font-size: .8rem; margin-top: 22px; }
/* tracer */
.trace-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px dashed #DDD; }
.trace-big { font-size: 2.4rem; font-weight: 700; color: #CFC7B6; width: 48px; text-align: center; }
.trace-line { flex: 1; border-bottom: 2px dotted #BBB; height: 30px; }
/* relier */
.relie-grid { display: flex; justify-content: space-between; gap: 30px; }
.relie-col { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.relie-cell { display: flex; align-items: center; gap: 8px; }
.relie-col:first-child .relie-cell { justify-content: flex-start; }
.relie-col:last-child .relie-cell { justify-content: flex-end; }
.relie-letter { font-size: 1.8rem; font-weight: 700; }
.relie-img { font-size: 2rem; }
.relie-dot { width: 12px; height: 12px; border: 2px solid #333; border-radius: 50%; flex-shrink: 0; }
/* recopier */
.copie-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.copie-word { font-size: 1.3rem; font-weight: 700; width: 110px; }
.copie-line { flex: 1; border-bottom: 2px dotted #AAA; height: 24px; }
/* règles */
.rule-sheet { text-align: left; }
.rule-sheet p { margin: 10px 0; line-height: 1.6; }
.rule-sheet ul { margin: 8px 0 8px 20px; line-height: 1.8; }
.rule-sheet li { margin: 2px 0; }
/* coloriage grand */
.color-sub { text-align: center; color: #555; font-weight: 600; margin-bottom: 10px; }
.color-big { text-align: center; }
.color-big svg { width: 100%; max-width: 420px; height: auto; stroke-width: 3.2; }

@media print {
  body { background: #fff !important; }
  .noprint, .topbar, .print-hint { display: none !important; }
  #app { max-width: none; }
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .sheet { box-shadow: none; max-width: none; }
  .color-big svg { max-width: 60%; }
}

/* astuce sauvegarde */
.backup-tip {
  background: #FFF6E3; border: 1.5px dashed var(--accent); border-radius: 14px;
  padding: 12px 14px; margin-top: 14px; font-size: .95rem; color: var(--ink); line-height: 1.5;
}

/* ---- ressources : sous-titres de groupe ---- */
.res-group { font-weight: 700; color: var(--primary-dark); margin: 16px 2px 8px; font-size: 1.02rem; }
.res-group:first-of-type { margin-top: 4px; }

/* ---- fiche : écrire les syllabes ---- */
.syll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.syll-cell { display: flex; align-items: baseline; gap: 10px; }
.syll-w { font-size: 1.4rem; font-weight: 700; width: 44px; }
.syll-line { flex: 1; border-bottom: 2px dotted #AAA; height: 22px; }
/* ---- fiche : compléter le mot ---- */
.complete-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #DDD; }
.complete-img { font-size: 2.2rem; width: 50px; text-align: center; }
.complete-word { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.15em; }
/* ---- fiche : entoure le son ---- */
.son-grid { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; margin-top: 6px; }
.son-word { font-size: 1.5rem; font-weight: 600; padding: 6px 4px; }
/* ---- fiche : remettre en ordre ---- */
.ordre-block { padding: 12px 0; border-bottom: 1px dashed #DDD; }
.ordre-words { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ordre-word { border: 2px solid #333; border-radius: 10px; padding: 6px 12px; font-size: 1.2rem; font-weight: 600; }
/* ---- fiche : pluriel ---- */
.pluriel-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.pluriel-sing { font-size: 1.3rem; font-weight: 600; min-width: 120px; }
.pluriel-arrow { font-size: 1.4rem; color: #888; }
.copie-line.short { max-width: 200px; }
/* ---- fiche : conjugaison ---- */
.conjug-grid { display: flex; flex-direction: column; gap: 10px; }
.conjug-row { display: flex; align-items: baseline; gap: 8px; font-size: 1.4rem; }
.conjug-pro { min-width: 110px; font-weight: 600; }
.conjug-stem { font-weight: 700; }
.conjug-blank { display: inline-block; width: 90px; border-bottom: 2px dotted #999; height: 26px; }
.conjug-title { font-weight: 700; font-size: 1.15rem; color: var(--primary-dark); margin: 16px 0 8px; }
.conjug-title:first-child { margin-top: 4px; }
.dictee-key { margin-top: 18px; padding-top: 8px; border-top: 1px dashed #CCC; font-size: 0.8rem; color: #888; }
@media print { .dictee-key { color: #aaa; font-size: 0.72rem; } }
/* ---- coloriages-jeux : grille de cases à colorier ---- */
.cx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; }
.cx-cell {
  aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.cx-let { font-size: 2.2rem; font-weight: 700; color: var(--ink); }
.cx-img { font-size: 2.4rem; }
@media print { .cx-cell { border-color: #333; } }

/* ---- note de maîtrise sur 3 étoiles ---- */
.stars3 { display: inline-flex; gap: 6px; align-items: center; }
.star3 { color: #DDD5C6; line-height: 1; font-size: 1.5rem; }
.star3.on { color: var(--accent); animation: starPop 0.45s cubic-bezier(.2,.8,.3,1.7) backwards; }
.results .stars3 { justify-content: center; margin: 6px 0 4px; }
.results .star3 { font-size: 3.1rem; }
@keyframes starPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.sub-stars { display: flex; align-items: center; gap: 8px; }
.sub-hint { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }

/* ---- accessibilité : bouton Écoute qui invite au toucher ---- */
.say-btn.hint { animation: sayHint 1.3s ease-in-out infinite; }
@keyframes sayHint {
  0%,100% { transform: scale(1); box-shadow: 0 3px 0 rgba(74,144,217,.25); }
  50% { transform: scale(1.05); box-shadow: 0 3px 0 rgba(74,144,217,.25), 0 0 0 7px rgba(74,144,217,.14); }
}
/* ---- réponse révélée après 2 essais : elle appelle le doigt ---- */
.choice.reveal { animation: revealPulse 0.9s ease-in-out infinite; position: relative; }
@keyframes revealPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,168,83,.55); }
  50% { box-shadow: 0 0 0 9px rgba(52,168,83,0); }
}

/* ---- exercice de fusion (méthode syllabique) : consonne + voyelle = syllabe ---- */
.blend-visual { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 6px; font-weight: 700; flex-wrap: wrap; }
.blend-c, .blend-v, .blend-c2 { font-size: 2.6rem; color: var(--primary-dark); }
.blend-c { animation: blendSlideR 0.9s ease both; }
.blend-v { animation: blendSlideL 0.9s ease both; }
.blend-c2 { animation: blendSlideUp 0.9s ease both; }
.blend-op, .blend-eq { font-size: 1.7rem; color: var(--ink-soft); }
.blend-syll { font-size: 3rem; color: var(--accent-text); animation: blendPop 1s ease both; }
@keyframes blendSlideR { 0% { transform: translateX(-16px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes blendSlideUp { 0% { transform: translateY(14px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes blendSlideL { 0% { transform: translateX(16px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes blendPop { 0%,45% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }

/* ---- album d'autocollants ---- */
.stickers-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sticker {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: #F1ECE0; border-radius: 16px; color: #C4BCAC;
}
.sticker.got { background: #fff; box-shadow: var(--shadow); border: 2px solid var(--accent); }

/* ---- Fluence chronométrée (read) ---- */
.read-timer { width: 100%; height: 12px; background: #EDE6D8; border-radius: 8px; overflow: hidden; margin: 4px 0 12px; }
.read-timer-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--good), #7BC96F); border-radius: 8px; }

/* ---- Le grand défi de Levy (révision espacée) ---- */
.challenge-btn { position: relative; margin-bottom: 12px; }
.due-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 6px; margin-left: 6px; border-radius: 12px; background: #fff; color: var(--accent);
  font-weight: 800; font-size: 0.9rem; vertical-align: middle;
}

/* ---- Série incarnée par Levy ---- */
.streak-levy {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 14px;
  background: linear-gradient(90deg, #FFF3E0, #FFF9F0); border: 2px solid #F4D9A8;
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.95rem; font-weight: 600; color: #8A5A16;
}
.streak-fire { font-size: 1.5rem; flex-shrink: 0; }

/* ---- Coffre surprise (récompense variable de fin d'étape) ---- */
.chest-zone { margin: 6px 0 4px; text-align: center; }
.chest-btn {
  border: none; background: linear-gradient(135deg, #FFE29A, #FFC04D); color: #7A4E00;
  border-radius: var(--radius); box-shadow: 0 5px 0 #E0A93C; cursor: pointer;
  padding: 16px 22px; font-size: 2.4rem; font-family: inherit; line-height: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px; animation: chest-wiggle 1.4s ease-in-out infinite;
}
.chest-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #E0A93C; }
.chest-cap { font-size: 0.95rem; font-weight: 800; }
@keyframes chest-wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.chest-open { animation: pop-in 0.35s ease; }
.levy-card {
  background: #fff; border: 3px dashed var(--accent); border-radius: var(--radius);
  padding: 10px; margin-bottom: 12px; box-shadow: var(--shadow);
}
@keyframes pop-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Accessibilité : si l'enfant/le parent a demandé "moins d'animations" sur son appareil,
   on calme les mouvements de la mascotte et les effets (sans casser le jeu). */
@media (prefers-reduced-motion: reduce) {
  .mascot-jump, .mascot-clap, .mascot-clap .lv-hand-l, .mascot-clap .lv-hand-r,
  .mascot-fun, .mascot-dance, .mascot-love, .mascot-love .lv-heart,
  .mascot-cheer, .mascot-wave, .chest-btn, .say-btn.hint, .choice.reveal {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Aide & Contact ---------- */
/* Intro de Levy dans Aide & Contact : bulle qui s'adapte à l'écran (multi-lignes, pas de débordement) */
.help-intro { margin: 6px 0 14px; display: flex; align-items: flex-start; gap: 8px; }
.help-intro .comic-mascot { width: 54px; flex-shrink: 0; }
.help-intro .comic-bubble { flex: 1; min-width: 0; margin-bottom: 0; }
.help-intro .comic-bubble .comic-txt { white-space: normal; font-size: 1.02rem; line-height: 1.35; }
.help-intro .comic-bubble::before, .help-intro .comic-bubble::after { top: 16px; bottom: auto; }
.help-map-btn { margin-top: 8px; }
.help-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.help-chip {
  text-align: left; background: #fff; border: 2px solid #EEE7DA; border-radius: 14px;
  padding: 12px 14px; font-size: 1rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); min-height: 44px;
}
.help-chip:active { transform: translateY(1px); }
.help-search { display: flex; gap: 8px; margin: 10px 0 4px; }
.help-search input {
  flex: 1; padding: 12px 14px; border: 2px solid #EEE7DA; border-radius: 14px;
  font-family: inherit; font-size: 1rem; background: #fff;
}
.help-search .say-btn { margin: 0; white-space: nowrap; }
.help-answer:not(:empty) { margin: 10px 0 4px; }
.help-bubble {
  background: var(--good-bg); border-radius: 16px; padding: 14px 16px;
  font-size: 1.05rem; line-height: 1.45;
}
.help-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.help-form textarea, .help-form input {
  width: 100%; padding: 12px 14px; border: 2px solid #EEE7DA; border-radius: 14px;
  font-family: inherit; font-size: 1rem; background: #fff; resize: vertical;
}
.help-status { margin: 10px 0 4px; text-align: center; line-height: 1.4; }
.help-ok { color: var(--good); font-weight: 700; }

.help-err { color: var(--bad); font-weight: 600; }

/* ---------- Mettre à jour le jeu (vider le cache) ---------- */
.help-update { background: var(--good-bg); border-radius: 16px; padding: 14px 16px; margin-bottom: 6px; }
.help-update .btn-good { width: 100%; margin: 0; }
.help-update .res-intro { text-align: left; margin: 0 0 12px; }
.upd-note { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin: 8px 0 0; }
.upd-manual-toggle {
  display: block; width: 100%; margin: 6px 0 0; padding: 8px 4px; background: none; border: none;
  color: var(--primary-dark); font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: center;
}
.upd-manual { margin-top: 8px; }
.upd-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.upd-tab {
  flex: 1; min-width: 90px; padding: 9px 8px; border: 2px solid #EEE7DA; border-radius: 12px;
  background: #fff; color: var(--ink); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; min-height: 40px;
}
.upd-tab.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.upd-steps { margin: 0; padding-left: 22px; font-size: 0.98rem; line-height: 1.5; }
.upd-steps li { margin-bottom: 8px; }
@media (prefers-color-scheme: dark) {
  .upd-tab { background: #2e2842; color: var(--ink); border-color: #3a3352; }
  .upd-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
}

/* ---------- Coin des parents : guide + jeux + par niveau ---------- */
.parent-guide { background: var(--good-bg); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.pg-title { font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.pg-steps { margin: 0; padding-left: 20px; font-size: 0.96rem; line-height: 1.5; }
.pg-steps li { margin-bottom: 3px; }
.ri-sub { display: block; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.ri-emoji.ri-num { background: var(--primary); color: #fff; border-radius: 10px; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.lvl-detail-intro { background: #fff; border: 2px solid #EEE7DA; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: 1.02rem; box-shadow: var(--shadow); }
.lvl-rule { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 0.98rem; line-height: 1.45; margin-bottom: 8px; }
.lvl-rule ul { padding-left: 20px; }

/* jeu : chemin des lettres */
.laby-grid { display: grid; gap: 3px; margin: 8px auto; max-width: 340px; }
.laby-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #CFC7B8; border-radius: 6px; font-weight: 700; font-size: 1.1rem; background: #fff; }
.laby-start, .laby-end { border-color: var(--good); border-width: 2.5px; }
@media print { .laby-cell { border-color: #999; } }

/* jeu : mots mêlés */
.ws-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.ws-word { border: 2px solid var(--primary); border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 0.95rem; }
.ws-grid { display: grid; gap: 2px; margin: 0 auto; max-width: 380px; }
.ws-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid #DDD5C6; font-weight: 600; font-size: 0.95rem; background: #fff; }
@media print { .ws-cell { border-color: #aaa; } }

/* jeu de l'oie des syllabes */
.oie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.oie-cell { border: 2px solid #CFC7B8; border-radius: 10px; min-height: 56px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; background: #fff; }
.oie-cell b { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; }
.oie-start, .oie-end { background: var(--good-bg); border-color: var(--good); font-size: 0.9rem; }
@media print { .oie-cell { border-color: #999; } }

/* trouve l'intrus */
.intrus-row { display: flex; justify-content: space-around; gap: 8px; padding: 12px 4px; border-bottom: 2px dashed #DDD; }
.intrus-item { font-size: 2.4rem; }

/* ---------- Bannière "nouvelle version disponible" ---------- */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 0.98rem;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: barDown .3s ease;
}
.update-banner .ub-txt { flex: 1; }
.update-banner .ub-go {
  background: #fff; color: var(--primary-dark); border-radius: 10px;
  padding: 9px 14px; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}
.update-banner .ub-x { color: rgba(255,255,255,.85); font-size: 1.2rem; padding: 4px 8px; min-width: 40px; min-height: 40px; }
@keyframes barDown { from { transform: translateY(-100%); } to { transform: none; } }

/* ============================================================
   MODE SOMBRE — suit le réglage du téléphone. CSS pur : ne casse
   aucune session (pas de reload). Les imprimables (.sheet : fiches,
   jeux, coloriages) restent VOLONTAIREMENT sur fond blanc (= papier,
   + impression). On adapte uniquement l'interface du jeu.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17141f;
    --card: #241f33;
    --ink: #F1EDFA;
    --ink-soft: #B2AAC6;
    --primary: #4A90D9;        /* inchangé : fond de bouton (texte blanc ok) + texte sur sombre ok */
    --primary-dark: #A9CBF0;   /* sert de couleur de TITRE -> clair sur fond sombre */
    --accent: #F5A623;         /* inchangé : fond orange, texte foncé via --on-accent */
    --accent-text: #F0C070;    /* texte accent lisible sur sombre */
    --good: #47C169;
    --good-bg: #223d2c;
    --bad: #F0686C;
    --bad-bg: #3f2430;
    --shadow: 0 4px 14px rgba(0,0,0,0.5);
  }
  /* surfaces claires codées en dur -> surfaces sombres */
  .btn.btn-ghost { background: #2e2842; color: var(--ink); border-color: #3a3352; box-shadow: 0 4px 0 #140f1e; }
  .btn.btn-ghost:active { box-shadow: 0 1px 0 #140f1e; }
  .topbar .back, .topbar .chip, .parents-btn { background: #2e2842; }
  .avatar-pick { background: #2e2842; border-color: #3a3352; }
  .newplayer-form input, .type-input,
  .help-search input, .help-form textarea, .help-form input,
  .backup-code { background: #2e2842; color: var(--ink); border-color: #3a3352; }
  .level-card .lvl-emoji { background: color-mix(in srgb, var(--lvl, var(--primary)) 25%, #241f33); }
  .lesson-card .body-item { background: #322c45; }
  .lesson-card .he .body-item { background: #2c2740; }
  .lesson-dots .dot { background: #4a4460; }
  .progress-track { background: #322c45; }
  .choice, .tile, .match-item { border-color: #3a3352; }
  .match-item.selected { background: #22324a; }
  .build-target { background: #2e2842; border-color: #4a4460; }
  .read-text, .mascot-panel { background: var(--card); }
  .joke-card { background: #322c45; }
  .streak-chip { background: #322c45; }
  .streak-banner { background: linear-gradient(90deg, #322c45, #3f2430); }
  .backup-tip { background: #322c45; }
  .lvl-detail-intro, .lvl-rule { background: #2e2842; border-color: #3a3352; }
  .help-chip { background: #2e2842; color: var(--ink); border-color: #3a3352; }
  #app { border-color: #2a2540; }
  /* bulle de BD : reste blanche à bord foncé (identité graphique), texte foncé */
  .comic-bubble { background: #fff; border-color: #2B2540; }
  .comic-bubble .comic-txt { color: #2B2540; }
  .comic-bubble .he { color: #5A5270; }
  .comic-bubble::before { border-right-color: #2B2540; }
  .comic-bubble::after { border-right-color: #fff; }
  /* barre de félicitation : fond sombre au lieu du blanc/vert */
  .correct-bar { background: linear-gradient(180deg, #241f33, #1c2a22); }
  /* diplôme : reste un "certificat" clair -> on force ses textes en foncé */
  .diploma h2 { color: #2C5E93; }
  .diploma .dip-name { color: #C77F0A; }
  .diploma .dip-title { color: #B4771A; }
  /* IMPRIMABLES (.sheet = papier blanc) : garder les titres/traits FONCÉS malgré le thème */
  .sheet .sheet-title, .sheet .conjug-title { color: #2C5E93; }
  .color-big svg { stroke: #2B2540; }
}