/* =========================================================
   Mandarin en famille : système de design
   Inspirations : Duolingo (boutons en relief, mascotte, chemin),
   Khan Academy Kids / Lingokids (douceur, grandes zones tactiles),
   Headspace / Drops (sobriété pour les adultes).
   ========================================================= */

:root {
  --rouge: #e8423f;
  --rouge-fonce: #b92e2b;
  --rouge-clair: #fdecea;
  --or: #ffc83d;
  --or-fonce: #d9a21a;
  --or-clair: #fff6dc;
  --jade: #2bb673;
  --jade-fonce: #1d8a55;
  --jade-clair: #e3f7ec;
  --ciel: #33b5f0;
  --ciel-fonce: #1a8fc4;
  --ciel-clair: #e2f4fd;
  --violet: #8e6cef;
  --violet-fonce: #6a4bc9;
  --violet-clair: #f0ebfd;
  --orange: #ff9a3c;
  --orange-fonce: #d97a1f;

  --fond: #fbf7f2;
  --carte: #ffffff;
  --texte: #2d2a32;
  --doux: #77707f;
  --bord: #ece4da;
  --bord-fonce: #d8cdbf;

  --piste: #ece6df;          /* fond des barres de progression */
  --champ: #faf8f5;          /* fond des champs de saisie */
  --verrou: #e3ded7;
  --verrou-fonce: #c9c2b8;
  --bandeau-ok: #d7ffb8;
  --bandeau-ok-bord: #b8f28b;
  --bandeau-ok-texte: #3a7d0a;
  --bandeau-ko: #ffdfe0;
  --bandeau-ko-bord: #ffc1c1;
  --bandeau-ko-texte: #c62828;

  /* anciens noms gardés pour compatibilité */
  --ok: var(--jade);

  --rayon: 20px;
  --rayon-petit: 14px;
  --police: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-hanzi: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --taille: 16px;
}

/* Thème enfant et bébé : ciel pastel, formes plus rondes, tout est plus grand. */
:root[data-theme="enfant"], :root[data-theme="bebe"] {
  --fond: #eaf6ff;
  --bord: #d6e9f8;
  --bord-fonce: #b9d6ee;
  --rayon: 28px;
  --rayon-petit: 20px;
  --taille: 18px;
}

* { box-sizing: border-box; }
html { font-size: var(--taille); }

body {
  margin: 0;
  font-family: var(--police);
  background-color: var(--fond);
  background-image: radial-gradient(circle at 1px 1px, rgba(45, 42, 50, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--texte);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="enfant"] body, :root[data-theme="bebe"] body {
  background-image:
    radial-gradient(ellipse 120px 40px at 15% 12%, #fff 60%, transparent 61%),
    radial-gradient(ellipse 90px 30px at 85% 30%, #fff 60%, transparent 61%),
    radial-gradient(ellipse 140px 45px at 70% 75%, rgba(255, 255, 255, 0.8) 60%, transparent 61%),
    linear-gradient(180deg, #d9efff 0%, #eef8ff 45%, #fff7ec 100%);
  background-size: auto;
  background-attachment: fixed;
}

h1, h2, h3 { font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 30px 0 12px; }
section > h2:first-child { margin-top: 0; }
a { color: var(--lien); }
ruby, .hanzi, .q-hanzi, .d-hanzi, .choix-hanzi, .cp-hanzi, .pj-hanzi, .lc-hanzi, .ii-hanzi, .morceau { font-family: var(--police-hanzi); }

/* ---------- En-tête ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--rouge);
  background-image:
    radial-gradient(circle at 92% -20%, rgba(255, 200, 61, 0.45), transparent 45%),
    linear-gradient(135deg, #f0524e, #d63431);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 3px 0 var(--rouge-fonce);
}
header h1 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 6px; }
header a { color: #fff; text-decoration: none; }
.sous-titre { font-weight: 700; font-size: 0.85rem; opacity: 0.85; }
.marque { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: -0.01em; }
.marque img { border-radius: 9px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); background: #fff; }
.profil-actif { font-weight: 800; font-size: 0.95rem; }
.bouton-entete {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

main { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }

/* Barre de stats en haut de l'accueil (série, XP, niveau) */
.pastilles { display: flex; gap: 6px; align-items: center; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 900;
  font-size: 0.95rem;
}
.pastille.eteinte { opacity: 0.6; filter: grayscale(0.6); }

/* ---------- Boutons en relief ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--jade);
  color: #fff;
  border: none;
  border-radius: var(--rayon-petit);
  padding: 13px 24px;
  font: inherit;
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--jade-fonce);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.bouton:hover { filter: brightness(1.05); }
.bouton:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--jade-fonce); }
.bouton:disabled { background: var(--verrou); color: #a59d94; box-shadow: 0 5px 0 var(--verrou-fonce); cursor: default; }
.bouton.secondaire {
  background: var(--carte);
  color: var(--ciel-fonce);
  border: 2px solid var(--bord);
  box-shadow: 0 4px 0 var(--bord-fonce);
  text-transform: none;
  letter-spacing: 0;
}
.bouton.secondaire:active { box-shadow: 0 1px 0 var(--bord-fonce); }
.bouton.vert { background: var(--jade); }
.lien { display: block; margin: 12px auto 0; background: none; border: none; color: var(--doux); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Cartes et tuiles ---------- */
.carte {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
  margin-bottom: 14px;
}
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.tuile {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px 12px 14px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--bord-fonce);
  transition: transform 0.08s, box-shadow 0.08s;
}
.tuile:hover { border-color: var(--ciel); }
.tuile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bord-fonce); }
.tuile.active { border-color: var(--ciel); box-shadow: 0 5px 0 var(--ciel-fonce); background: var(--ciel-clair); }
.tuile .grand { font-size: 2.6rem; display: block; line-height: 1.3; }
.tuile strong { font-weight: 900; }
.tuile small { color: var(--doux); font-weight: 600; }
.tuile-vedette { border-color: #ffd28a; background: linear-gradient(160deg, #fff4e0, #fff); box-shadow: 0 5px 0 #f3c27a; }
.verrouille { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.7); }

.petit { color: var(--doux); font-size: 0.85rem; margin: 4px 0 0; }
.intro { line-height: 1.6; }
.conseil { background: var(--or-clair); border-color: #ffe39a; }
.defi { background: var(--jade-clair); border-color: #a9e5c6; text-align: left; }

/* ---------- Formulaires ---------- */
form.ajout, .ajout { display: flex; gap: 8px; flex-wrap: wrap; }
.ajout input {
  flex: 1 1 150px;
  padding: 12px 16px;
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-weight: 700;
  background: var(--champ);
  color: var(--texte);
}
.ajout input:focus { outline: none; border-color: var(--ciel); background: var(--champ); box-shadow: inset 0 0 0 2px var(--orange); }
.formulaire { margin-top: 18px; display: grid; gap: 14px; }
.formulaire h3 { margin: 0; }
.case { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 700; }
.case input { width: 20px; height: 20px; accent-color: var(--jade); }
.choix-mode { border: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.choix-mode legend { font-weight: 900; margin-bottom: 6px; }
.choix-mode label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bord);
}
.choix-mode label:has(input:checked) { border-color: var(--ciel); background: var(--ciel-clair); box-shadow: 0 3px 0 var(--ciel); }
.choix-mode input { accent-color: var(--ciel-fonce); margin-top: 5px; }
.choix-mode small { display: block; color: var(--doux); font-weight: 600; }

.reglages { display: grid; gap: 14px; }
.reglages h3 { margin: 0; }
.reglages label { display: grid; gap: 6px; font-weight: 800; }
.reglages select {
  font: inherit;
  font-weight: 700;
  color: var(--texte);
  padding: 11px 12px;
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--carte);
}

/* ---------- Barres de progression ---------- */
.barre { height: 14px; background: var(--piste); border-radius: 999px; overflow: hidden; }
.barre > span {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--or), var(--orange));
  transition: width 0.5s cubic-bezier(.2, .8, .3, 1.2);
}
.barre > span::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
}

/* ---------- Mascotte ---------- */
.mascotte-svg { width: 100%; height: 100%; overflow: visible; }
.mascotte-svg .oeil { transform-box: fill-box; transform-origin: center; animation: cligne 4.5s infinite; }
.mascotte-svg.respire { animation: respire 3s ease-in-out infinite; }
.mascotte-svg.saute { animation: saute 0.55s ease-out 3; }
.mascotte-svg.penche { animation: penche 0.6s ease-in-out 2; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes respire { 50% { transform: translateY(-3px) scale(1.01); } }
@keyframes saute { 40% { transform: translateY(-14px) rotate(-4deg); } 70% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes penche { 50% { transform: rotate(-8deg); } }

.salut { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.salut .avatar-mascotte { width: 84px; height: 88px; flex: 0 0 auto; }
.bulle {
  position: relative;
  margin: 0;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: 18px;
  padding: 10px 14px;
  font-weight: 700;
  flex: 1;
}
.bulle::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--carte);
  border-left: 2px solid var(--bord);
  border-bottom: 2px solid var(--bord);
  transform: rotate(45deg);
}
.mascotte { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.mascotte .avatar-mascotte { width: 64px; height: 66px; flex: 0 0 auto; }

/* ---------- Accueil : objectif, quêtes, révision ---------- */
.objectif-jour { display: flex; gap: 16px; align-items: center; }
.anneau { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.anneau .fond-anneau { stroke: var(--piste); }
.anneau .plein { stroke: var(--orange); transition: stroke-dashoffset 0.8s cubic-bezier(.2, .8, .3, 1); }
.anneau.complet .plein { stroke: var(--jade); }
.anneau-centre { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 900; line-height: 1.1; }
.anneau-centre small { display: block; font-size: 0.7rem; color: var(--doux); font-weight: 700; }
.objectif-texte { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-weight: 800; }

.quetes { display: grid; gap: 10px; }
.quete { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.quete-emoji { font-size: 1.6rem; text-align: center; }
.quete-texte { font-weight: 800; font-size: 0.95rem; }
.quete .barre { height: 10px; margin-top: 4px; }
.quete.faite .barre > span { background: linear-gradient(90deg, var(--jade), #5fd69b); }
.quete-compte { font-weight: 900; color: var(--doux); font-size: 0.85rem; }
.quete.faite .quete-compte { color: var(--jade); }
.coffre {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px dashed var(--or);
  border-radius: var(--rayon-petit);
  padding: 10px 14px;
  background: var(--or-clair);
  font-weight: 800;
}
.coffre .coffre-emoji { font-size: 2.2rem; }
.coffre.pret .coffre-emoji { animation: secoue-coffre 1.2s infinite; }
.coffre .bouton { margin-left: auto; padding: 10px 16px; background: var(--or); box-shadow: 0 5px 0 var(--or-fonce); color: #5b4300; }
@keyframes secoue-coffre { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }

.revision {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  border-color: #cdbdf7;
  background: linear-gradient(135deg, var(--violet-clair), #fff);
  box-shadow: 0 5px 0 #cdbdf7;
}
.revision-icone { font-size: 2.2rem; }
.revision .fleche { margin-left: auto; font-size: 2rem; font-weight: 900; color: var(--violet); }

.bebe-intro { background: linear-gradient(160deg, var(--or-clair), #fff); border-color: #ffe39a; }
.bebe-intro h2 { margin: 0 0 6px; font-size: 1.15rem; }
.bebe-intro p { margin: 0; }

/* ---------- Phrase du jour et phrases du quotidien ---------- */
.phrase-jour { border-color: #ffd28a; background: linear-gradient(135deg, #fff1db, #fff 70%); box-shadow: 0 5px 0 #f3c27a; }
.phrase-jour .etiquette { color: var(--orange-fonce); margin: 0 0 6px; }
.pj-contenu { display: flex; align-items: center; gap: 12px; }
.pj-emoji { font-size: 2.8rem; }
.pj-hanzi { font-size: 1.9rem; line-height: 1.7; }

.carte-phrase { box-shadow: 0 4px 0 var(--bord); }
.carte-phrase .cp-haut { display: flex; gap: 12px; align-items: center; }
.cp-emoji { font-size: 2.3rem; }
.cp-hanzi { font-size: 1.7rem; line-height: 1.7; }
.cp-fr { color: var(--doux); font-weight: 700; }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.bouton-dite, .bouton-micro, .bouton-comparer {
  font: inherit;
  font-weight: 800;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  border: 2px solid var(--bord);
  background: var(--carte);
  color: inherit;
  box-shadow: 0 3px 0 var(--bord);
}
.bouton-dite { border-color: #ffc48a; color: var(--orange-fonce); box-shadow: 0 3px 0 #ffc48a; }
.bouton-dite.fait { border-color: var(--jade); color: var(--jade-fonce); background: var(--jade-clair); box-shadow: none; cursor: default; }
.micro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.decouverte .micro { margin-top: 6px; }
.bouton-micro.enregistre { border-color: var(--rouge); color: var(--rouge); animation: pulse 1s infinite; }
.micro-aide { color: var(--doux); font-size: 0.85rem; width: 100%; text-align: center; font-weight: 700; }
.micro-aide:empty { display: none; }
#d-entrainer { margin-bottom: 14px; }

/* ---------- Parcours ---------- */
.unite { margin-top: 26px; }
.unite-entete {
  position: relative;
  overflow: hidden;
  background: var(--couleur);
  color: #fff;
  border-radius: var(--rayon);
  padding: 16px 18px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
}
.unite-entete::after {
  /* motif de nuages porte-bonheur, en filigrane */
  content: "";
  position: absolute;
  right: -20px;
  top: -10px;
  width: 140px;
  height: 140px;
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.16) 22px, transparent 23px),
    radial-gradient(circle at 55% 35%, rgba(255, 255, 255, 0.16) 28px, transparent 29px),
    radial-gradient(circle at 75% 55%, rgba(255, 255, 255, 0.16) 20px, transparent 21px);
}
.unite-entete h3 { margin: 2px 0; font-size: 1.35rem; }
.unite-entete small { opacity: 0.92; font-weight: 700; }
.note-unite {
  margin-top: 10px;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 10px 14px;
}
.note-unite summary { cursor: pointer; font-weight: 900; color: var(--couleur); }
.note-unite p { margin: 8px 0 0; }

.chemin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 0 10px; }
.noeud {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(var(--decalage));
  text-decoration: none;
  color: inherit;
}
.noeud .rond {
  position: relative;
  width: 76px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  background: var(--couleur);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--couleur) 70%, #000);
  transition: transform 0.08s, box-shadow 0.08s;
}
.noeud .rond::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 18px;
  width: 22px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(-20deg);
}
.noeud:active .rond { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--couleur) 70%, #000); }
.noeud.fait .rond { background: var(--or); color: #8a5a00; box-shadow: 0 8px 0 var(--or-fonce); }
.noeud.verrou .rond { background: var(--verrou); color: #a39b91; font-size: 1.5rem; box-shadow: 0 8px 0 var(--verrou-fonce); }
.noeud.verrou .rond::after { display: none; }
.noeud.actuel .rond { outline: 7px solid color-mix(in srgb, var(--couleur) 25%, transparent); outline-offset: 3px; animation: pulse 1.6s infinite; }
.noeud.revision-unite .rond { border-radius: 24px; width: 82px; }
.noeud-titre { font-size: 0.8rem; color: var(--doux); margin-top: 12px; font-weight: 800; }
.infobulle {
  position: absolute;
  top: -40px;
  background: var(--carte);
  border: 2px solid var(--bord);
  color: var(--couleur);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--bord);
  animation: flotte 1.6s ease-in-out infinite;
}
.mascotte-chemin { position: absolute; width: 62px; height: 64px; top: 4px; pointer-events: none; }
.deco { position: absolute; font-size: 2.6rem; opacity: 0.85; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.08)); }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes flotte { 50% { transform: translateY(-5px); } }

/* ---------- Succès : niveau, badges, album ---------- */
.niveau-carte { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff1db, #fff 60%); border-color: #ffd28a; }
.niveau-medaille {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.8rem;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--or));
  box-shadow: 0 5px 0 var(--or-fonce), inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.niveau-infos { flex: 1; }
.niveau-infos h3 { margin: 0; }
.niveau-infos .hanzi-niveau { font-family: var(--police-hanzi); color: var(--rouge); font-weight: 900; }
.zodiaque { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.zodiaque span { font-size: 1.4rem; filter: grayscale(1); opacity: 0.35; }
.zodiaque span.atteint { filter: none; opacity: 1; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.badge { text-align: center; }
.badge-medaille {
  width: 70px;
  height: 70px;
  margin: 0 auto 6px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  background: var(--verrou);
  box-shadow: 0 5px 0 var(--verrou-fonce);
  filter: grayscale(1);
  opacity: 0.55;
  transform: rotate(-4deg);
}
.badge.obtenu .badge-medaille { background: linear-gradient(160deg, #fff5d1, var(--or)); box-shadow: 0 5px 0 var(--or-fonce); filter: none; opacity: 1; }
.badge strong { display: block; font-size: 0.85rem; line-height: 1.2; }
.badge small { display: block; font-size: 0.72rem; color: var(--doux); line-height: 1.25; margin-top: 2px; }

.album { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; background: var(--carte); border-radius: var(--rayon); border: 2px solid var(--bord); }
.autocollant {
  font-size: 2.4rem;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.autocollant:nth-child(odd) { transform: rotate(-8deg); }
.autocollant:nth-child(even) { transform: rotate(6deg); }
.autocollant.vide { background: transparent; border: 3px dashed var(--bord-fonce); box-shadow: none; font-size: 1.4rem; opacity: 0.5; }

.classement { list-style: none; padding: 0; margin: 0; }
.classement li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-weight: 800;
}
.classement li.moi { border-color: var(--ciel); background: var(--ciel-clair); }
.classement .rang { width: 30px; text-align: center; font-size: 1.4rem; }
.classement .pts { margin-left: auto; font-weight: 900; color: var(--jade-fonce); }

/* ---------- Onglets du bas (accueil) ---------- */
.avec-onglets main { padding-bottom: 110px; }
.onglets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-around;
  background: var(--carte);
  border-top: 2px solid var(--bord);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.onglet {
  flex: 1;
  max-width: 120px;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--rayon-petit);
  padding: 4px 2px;
  font: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--doux);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onglet span { font-size: 1.6rem; line-height: 1.2; filter: grayscale(0.7); opacity: 0.75; }
.onglet.actif { color: var(--ciel-fonce); border-color: #bfe6fa; background: var(--ciel-clair); }
.onglet.actif span { filter: none; opacity: 1; }

/* ---------- Notifications ---------- */
#toasts { position: fixed; top: 12px; left: 0; right: 0; z-index: 30; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--carte);
  border: 2px solid var(--or);
  border-radius: 18px;
  padding: 10px 18px 10px 12px;
  box-shadow: 0 6px 0 var(--or-fonce), 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: toast-entre 0.45s cubic-bezier(.2, 1.4, .4, 1);
  max-width: 420px;
}
.toast.sortie { animation: toast-sort 0.4s forwards; }
.toast-emoji { font-size: 2rem; }
.toast strong { display: block; font-weight: 900; }
.toast small { color: var(--doux); font-weight: 700; }
@keyframes toast-entre { from { transform: translateY(-120%) scale(0.8); opacity: 0; } }
@keyframes toast-sort { to { transform: translateY(-120%); opacity: 0; } }

/* ---------- Couleurs des tons (comme Pleco) ---------- */
.ton1 { color: #e53935; }
.ton2 { color: #2e9e5b; }
.ton3 { color: #1e88e5; }
.ton4 { color: #8e24aa; }
.ton5 { color: #9e9e9e; }
ruby { ruby-position: over; }
rt { font-family: var(--police); font-size: 0.32em; font-weight: 800; letter-spacing: 0.02em; }

/* ---------- Leçon ---------- */
.page-lecon { min-height: 100vh; }
.lecon-haut { display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto; padding: 18px 16px 0; }
.lecon-haut .barre { flex: 1; height: 18px; }
.lecon-haut .barre > span { background: linear-gradient(90deg, #58cc02, var(--jade)); }
.fermer { font-size: 1.7rem; font-weight: 900; color: #b5ada4; text-decoration: none; line-height: 1; }
.combo { min-width: 48px; font-weight: 900; color: var(--orange); font-size: 1.1rem; }
.combo:not(:empty) { animation: pulse 0.6s; }

.lecon-zone { padding-bottom: 180px; }
.apparition { animation: apparait 0.3s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateX(24px); } }

.consigne { font-size: 1.4rem; font-weight: 900; margin: 10px 0 16px; }
.etiquette { color: var(--violet); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; }

.question { text-align: center; margin-bottom: 10px; }
.q-hanzi { font-size: 4.2rem; line-height: 1.5; }
.q-emoji { font-size: 4rem; line-height: 1.2; }
.q-emoji.petit { font-size: 2.4rem; }
.q-fr { font-size: 1.4rem; font-weight: 800; }
.grand-hanzi { font-size: 4.5rem; line-height: 1.1; font-family: var(--police-hanzi); }
.grand-emoji { font-size: 3.5rem; }

/* Bao « parle » pendant les exercices d'écoute */
.q-parle { display: flex; align-items: center; justify-content: center; gap: 10px; }
.q-parle .avatar-mascotte { width: 92px; height: 96px; flex: 0 0 auto; }
.q-parle .bulle { flex: 0 1 auto; padding: 12px; }

.sons { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 10px 0; }
.q-parle .sons { margin: 0; }
.bouton-son {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  border: none;
  background: var(--ciel);
  color: #fff;
  font-size: 1.9rem;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ciel-fonce);
  transition: transform 0.06s, box-shadow 0.06s;
}
.bouton-son.lent { width: 52px; height: 52px; font-size: 1.4rem; background: #8fd6f7; box-shadow: 0 5px 0 #5bbbe8; }
.bouton-son.petit { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 14px; margin: 0; }
.bouton-son:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ciel-fonce); }

.choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.choix button {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 16px 10px;
  font: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  color: inherit;
  cursor: pointer;
  min-height: 74px;
  box-shadow: 0 5px 0 var(--bord-fonce);
  transition: transform 0.06s, box-shadow 0.06s, background 0.15s;
}
.choix button:hover:not(:disabled) { border-color: var(--ciel); }
.choix button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--bord-fonce); }
.choix button.hanzi-choix, .choix button.choix-hanzi { font-size: 2.3rem; font-weight: 400; }
.choix button.choix-emoji { font-size: 3.2rem; min-height: 108px; }
.choix button.choix-pinyin { font-size: 1.55rem; }
.choix button.choix-phrase { font-size: 1.5rem; line-height: 1.8; font-weight: 400; }
.choix button.choisi { border-color: var(--ciel); background: var(--ciel-clair); box-shadow: 0 5px 0 var(--ciel); }
.choix button.bon { border-color: var(--jade); background: var(--jade-clair); box-shadow: 0 5px 0 var(--jade); animation: pop 0.35s; }
.choix button.faux { border-color: var(--rouge); background: var(--rouge-clair); box-shadow: 0 5px 0 var(--rouge); animation: secoue 0.4s; }
.choix button:disabled { cursor: default; }
.choix .ton-signe { display: block; font-size: 2rem; line-height: 1; color: var(--rouge); }
.choix small { color: var(--doux); font-size: 0.85rem; }
@keyframes secoue { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pop { 50% { transform: scale(1.06); } }

.decouverte {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: 28px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 6px 0 var(--bord);
}
.d-emoji { font-size: 4.2rem; line-height: 1.2; animation: pop 0.5s; }
.d-hanzi { font-size: 5rem; line-height: 1.6; font-family: var(--police-hanzi); }
.d-hanzi.phrase { font-size: 2.6rem; }
.d-fr { font-size: 1.5rem; font-weight: 900; }
.note-lecon { font-size: 1.1rem; line-height: 1.65; font-weight: 600; }

.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paires .colonne { display: grid; gap: 10px; }
.paires button {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  min-height: 66px;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--bord-fonce);
}
.paires button.choix-hanzi { font-size: 1.9rem; font-weight: 400; }
.paires button.choix-emoji { font-size: 2.3rem; }
.paires button.choisi { border-color: var(--ciel); background: var(--ciel-clair); box-shadow: 0 5px 0 var(--ciel); }
.paires button.bon { border-color: var(--jade); background: var(--jade-clair); opacity: 0.5; box-shadow: none; transform: translateY(4px); }
.paires button.faux { border-color: var(--rouge); background: var(--rouge-clair); animation: secoue 0.4s; }

.ligne-reponse {
  min-height: 70px;
  border-bottom: 3px dashed var(--bord-fonce);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin: 12px 0 18px;
}
.ligne-reponse.bon { border-color: var(--jade); }
.ligne-reponse.faux { border-color: var(--rouge); }
.banque { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 60px; }
.morceau {
  font-size: 1.6rem;
  padding: 6px 16px;
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--carte);
  box-shadow: 0 4px 0 var(--bord-fonce);
  cursor: pointer;
  animation: pop 0.25s;
}

/* Bandeau de correction, en bas */
.bandeau {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: var(--carte);
  border-top: 2px solid var(--bord);
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  animation: monte 0.25s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes monte { from { transform: translateY(100%); } }
.bandeau.ok { background: var(--bandeau-ok); border-color: var(--bandeau-ok-bord); color: var(--bandeau-ok-texte); }
.bandeau.ko { background: var(--bandeau-ko); border-color: var(--bandeau-ko-bord); color: var(--bandeau-ko-texte); }
.bandeau-contenu { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.b-mascotte { width: 58px; height: 60px; flex: 0 0 auto; }
.bandeau.neutre .b-mascotte { display: none; }
.bandeau-texte { flex: 1 1 200px; }
.bandeau-texte strong { font-size: 1.3rem; font-weight: 900; }
.bandeau #continuer { flex: 1 0 100%; }
.bandeau.ok #continuer { background: #58a700; box-shadow: 0 5px 0 #3f7a00; }
.bandeau.ko #continuer { background: var(--rouge); box-shadow: 0 5px 0 var(--rouge-fonce); }
.bandeau.neutre .bandeau-texte:has(strong:empty) { display: none; }
.b-mot { font-size: 1.3rem; color: var(--texte); }
@media (min-width: 600px) {
  .bandeau #continuer { flex: 0 0 auto; min-width: 170px; }
}

/* Écran de fin de leçon */
.fin { text-align: center; padding-top: 6px; }
.fin-mascotte { width: 130px; height: 134px; margin: 0 auto; }
.fin-emoji { font-size: 4.5rem; animation: pulse 1.2s 2; }
.fin h2 { margin: 6px 0; }
.tuiles-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.tuile-fin { border: 2px solid; border-radius: 16px; overflow: hidden; animation: pop 0.4s backwards; }
.tuile-fin:nth-child(2) { animation-delay: 0.15s; }
.tuile-fin:nth-child(3) { animation-delay: 0.3s; }
.tuile-fin small { display: block; color: #fff; font-weight: 900; padding: 4px; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.tuile-fin strong { display: block; padding: 10px 4px; font-size: 1.2rem; font-weight: 900; }
.tuile-fin.or { border-color: var(--or); } .tuile-fin.or small { background: var(--or); color: #6b4c00; }
.tuile-fin.vert { border-color: var(--jade); } .tuile-fin.vert small { background: var(--jade); }
.tuile-fin.rouge { border-color: var(--orange); } .tuile-fin.rouge small { background: var(--orange); }
.fin-niveau { text-align: left; margin: 0 0 14px; }
.fin-niveau .objectif-texte { font-size: 0.95rem; }
.objectif-atteint { font-weight: 900; color: var(--orange-fonce); font-size: 1.1rem; }
.mots-fin { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.puce-mot {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: 12px;
  padding: 4px 10px;
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bord);
}
.puce-mot.a-revoir { border-color: #ffc48a; box-shadow: 0 3px 0 #ffc48a; }
.autocollant-gagne { margin: 10px auto; display: flex; flex-direction: column; align-items: center; font-weight: 900; color: var(--orange-fonce); }
.autocollant-gagne span { font-size: 4.5rem; animation: revele 1s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes revele { 0% { transform: scale(0) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } }

.confetti {
  position: fixed;
  top: -14px;
  width: 10px;
  height: 15px;
  border-radius: 3px;
  z-index: 20;
  pointer-events: none;
  animation: tombe linear forwards;
}
@keyframes tombe { to { transform: translateY(105vh) rotate(720deg); } }

/* ---------- Flashcards ---------- */
.flashcard {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: 28px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  box-shadow: 0 7px 0 var(--bord-fonce);
}
.flashcard .hanzi { font-size: 5rem; line-height: 1.1; }
.flashcard .pinyin { font-size: 1.8rem; color: var(--rouge); margin-top: 8px; font-weight: 800; }
.flashcard .fr { font-size: 1.3rem; font-weight: 800; }
.flashcard .emoji { font-size: 3rem; }
.flashcard .indice { color: var(--doux); font-size: 0.9rem; margin-top: 16px; font-weight: 700; }
.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.progression { color: var(--doux); text-align: center; margin: 12px 0; font-weight: 700; }

/* ---------- Tons et quiz ---------- */
.retour { text-align: center; min-height: 3.2em; margin-top: 14px; font-size: 1.1rem; font-weight: 700; }
.retour .ok { color: var(--jade-fonce); font-weight: 900; }
.retour .ko { color: var(--rouge); font-weight: 900; }
.score { text-align: right; color: var(--doux); font-weight: 800; }
.aide-tons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 12px 8px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 700;
}
.aide-tons strong { display: block; font-size: 1.5rem; }

/* ---------- Comptines ---------- */
.lignes { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 14px; }
.ligne-comptine {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 8px 14px;
  cursor: pointer;
  display: grid;
  box-shadow: 0 4px 0 var(--bord);
}
.ligne-comptine.en-cours { border-color: var(--or); background: var(--or-clair); box-shadow: 0 4px 0 var(--or); }
.lc-hanzi { font-size: 1.6rem; line-height: 1.8; }
.lc-fr { color: var(--doux); font-weight: 700; }

/* ---------- Imagier ---------- */
.imagier-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.image-imagier {
  width: 100%;
  min-height: 52vh;
  background: var(--carte);
  border: 3px solid var(--bord);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  touch-action: pan-y;
  box-shadow: 0 8px 0 var(--bord-fonce);
}
.ii-emoji { font-size: min(38vw, 11rem); line-height: 1.1; }
.ii-hanzi { font-size: 3.4rem; }
.ii-fr { color: var(--doux); font-size: 1.1rem; font-weight: 700; }
.rebond { animation: rebond 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rebond { 40% { transform: scale(1.04) rotate(-1deg); } }
.imagier-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.bouton-rond {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: var(--rouge);
  color: #fff;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--rouge-fonce);
}
.bouton-rond:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--rouge-fonce); }
.pause { position: fixed; inset: 0; background: rgba(30, 25, 40, 0.5); display: grid; place-items: center; padding: 16px; z-index: 20; }
.pause-carte { background: var(--carte); border-radius: 28px; padding: 24px; max-width: 420px; text-align: center; box-shadow: 0 8px 0 var(--bord-fonce); }
.pause-emoji { font-size: 4rem; }

/* ---------- Thème enfant : encore plus gros et rebondissant ---------- */
:root[data-theme="enfant"] .choix button, :root[data-theme="bebe"] .choix button { min-height: 96px; }
:root[data-theme="enfant"] .choix button.choix-emoji { font-size: 3.8rem; min-height: 130px; }
:root[data-theme="enfant"] .noeud .rond { width: 86px; height: 80px; font-size: 2.2rem; }
:root[data-theme="enfant"] .tuile .grand { font-size: 3.2rem; }


/* ---------- Mode sombre (profils adultes) ---------- */
:root[data-sombre="oui"][data-theme="adulte"] { color-scheme: dark; }
:root[data-sombre="oui"][data-theme="adulte"] {
  --fond: #16141b; --carte: #221f2a; --texte: #f2eef6; --doux: #a8a0b3;
  --bord: #34303f; --bord-fonce: #2a2633; --piste: #34303f; --champ: #1b1921;
  --verrou: #3a3545; --verrou-fonce: #2a2633;
  --rouge-clair: #3d2224; --or-clair: #3a3020; --jade-clair: #1d3528; --ciel-clair: #1c2f3d; --violet-clair: #2a2440;
  --bandeau-ok: #1f3a17; --bandeau-ok-bord: #2f5a22; --bandeau-ok-texte: #9be37a;
  --bandeau-ko: #3d1f22; --bandeau-ko-bord: #5c2b30; --bandeau-ko-texte: #ff9c9c;
}
@media (prefers-color-scheme: dark) {
  :root[data-sombre="auto"][data-theme="adulte"] { color-scheme: dark;
    --fond: #16141b; --carte: #221f2a; --texte: #f2eef6; --doux: #a8a0b3;
    --bord: #34303f; --bord-fonce: #2a2633; --piste: #34303f; --champ: #1b1921;
    --verrou: #3a3545; --verrou-fonce: #2a2633;
    --rouge-clair: #3d2224; --or-clair: #3a3020; --jade-clair: #1d3528; --ciel-clair: #1c2f3d; --violet-clair: #2a2440;
    --bandeau-ok: #1f3a17; --bandeau-ok-bord: #2f5a22; --bandeau-ok-texte: #9be37a;
    --bandeau-ko: #3d1f22; --bandeau-ko-bord: #5c2b30; --bandeau-ko-texte: #ff9c9c;
  }
}
/* Quelques dégradés clairs à adoucir en sombre */
:root[data-theme="adulte"][data-sombre="oui"] :is(.phrase-jour, .tuile-vedette, .niveau-carte, .revision, .bebe-intro) { background: var(--carte); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="adulte"][data-sombre="auto"] :is(.phrase-jour, .tuile-vedette, .niveau-carte, .revision, .bebe-intro) { background: var(--carte); }
}

/* ---------- Accessibilité : focus clavier visible ---------- */
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; border-radius: 8px; }

/* ---------- Premier lancement ---------- */
#ecran-bienvenue { text-align: center; padding-top: 10px; }
.bienvenue-mascotte { width: 150px; height: 156px; margin: 0 auto 8px; }
.diapo { min-height: 190px; animation: apparait 0.3s ease-out; }
.diapo p { font-size: 1.1rem; line-height: 1.6; }
.liste-etapes { list-style: none; padding: 0; text-align: left; display: grid; gap: 10px; }
.liste-etapes li { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 2px solid var(--bord); border-radius: var(--rayon-petit); padding: 10px 14px; font-weight: 700; }
.liste-etapes span { font-size: 1.8rem; }
.points { display: flex; justify-content: center; gap: 8px; margin: 14px 0 18px; }
.points i { width: 10px; height: 10px; border-radius: 50%; background: var(--piste); transition: width 0.2s; }
.points i.actif { width: 26px; border-radius: 99px; background: var(--jade); }

.alerte { border-color: #ffc48a; background: var(--or-clair); }

/* ---------- Parcours : étapes et test de passage ---------- */
.titre-etape {
  margin: 34px 0 6px;
  text-align: center;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doux);
  display: flex;
  align-items: center;
  gap: 10px;
}
.titre-etape::before, .titre-etape::after { content: ""; flex: 1; height: 2px; background: var(--bord); }
#parcours > .titre-etape:first-child { margin-top: 10px; }
.bouton-test {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
}

/* ---------- Histoires ---------- */
.page-histoire {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: 28px;
  padding: 22px 16px;
  margin-top: 14px;
  text-align: center;
  box-shadow: 0 6px 0 var(--bord-fonce);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ph-emoji { font-size: 5rem; line-height: 1.2; }
.ph-hanzi { font-family: var(--police-hanzi); font-size: 2.2rem; line-height: 1.9; }
.ph-fr { font-size: 1.15rem; font-weight: 800; color: var(--doux); }
.centre { justify-content: center; margin: 6px 0; }
.choix-colonne { grid-template-columns: 1fr; }

/* ---------- Lexique ---------- */
.recherche { margin: 10px 0; }
.recherche input { flex: 1 1 100%; }
.filtres { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filtre {
  font: inherit;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid var(--bord);
  background: var(--carte);
  color: var(--doux);
  cursor: pointer;
}
.filtre.actif { border-color: var(--ciel); background: var(--ciel-clair); color: var(--ciel-fonce); }
.lexique { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lexique li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 6px 12px;
}
.lexique li.vide { justify-content: center; color: var(--doux); padding: 18px; font-weight: 700; }
.lx-mot { flex: 1; display: grid; grid-template-columns: 40px auto; column-gap: 8px; align-items: center; background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.lx-emoji { grid-row: span 2; font-size: 1.8rem; text-align: center; }
.lx-hanzi { font-size: 1.5rem; line-height: 1.7; }
.lx-fr { color: var(--doux); font-size: 0.85rem; font-weight: 700; }
.jauge { display: flex; gap: 3px; }
.jauge i { width: 7px; height: 18px; border-radius: 3px; background: var(--piste); }
.jauge i.plein { background: var(--jade); }
.jauge i.plein:nth-child(-n+2) { background: var(--orange); }

.bilan-mots { justify-content: flex-start; }

/* =========================================================
   Thème « Forêt de bambous » : l'univers de Bao, flat et immersif
   Vert menthe et bambou, cartes crème, noir panda, rouge de l'écharpe,
   rose des joues. Titres dans des pastilles blanches, police ronde Fredoka.
   (Les noms de variables --turquoise, --peche, --orange… datent du premier
   essai de ce style : ils désignent maintenant le fond, les cartes et le vert.)
   ========================================================= */
:root, :root[data-theme="enfant"], :root[data-theme="bebe"] {
  --turquoise: #bdebcc;        /* fond : menthe de la forêt */
  --turquoise-fonce: #7fd3a1;
  --turquoise-pale: #eafaef;
  --menthe: #d9f5e3;
  --peche: #fff4de;            /* cartes : crème */
  --peche-clair: #fffaf0;
  --orange: #1e8449;           /* vert bambou : boutons, progression (texte blanc lisible) */
  --orange-fonce: #145c33;
  --bambou-vif: #3fb871;       /* vert vif, décoratif uniquement (pas de texte dessus) */
  --marine: #2d2a32;           /* noir panda */
  --marine-doux: #575160;
  --corail: #c8342b;           /* rouge de l'écharpe de Bao */
  --corail-fonce: #9c241d;
  --surface: #ffffff;          /* pastilles, champs, cartes blanches */
  --lien: #1b62a0;
  --rose: #ffd3dc;             /* rose des joues */
  --soleil: #ffc83d;

  --fond: var(--turquoise);
  --carte: #ffffff;
  --texte: var(--marine);
  --doux: var(--marine-doux);
  --bord: #ffffff;
  --bord-fonce: rgba(45, 42, 50, 0.16);
  --piste: #e6fbfb;
  --champ: #ffffff;
  --verrou: #e9f6f6;
  --verrou-fonce: #b9dcdd;
  --or: var(--orange);
  --or-fonce: var(--orange-fonce);
  --or-clair: var(--peche-clair);
  --jade: #22c08a;
  --jade-fonce: #129368;
  --jade-clair: #d9fbe9;
  --rouge: var(--corail);
  --rouge-fonce: var(--corail-fonce);
  --bandeau-ok: #d9fbe9;
  --bandeau-ok-bord: #8fe8c2;
  --bandeau-ok-texte: #0b6b47;
  --bandeau-ko: #ffe1de;
  --bandeau-ko-bord: #ffb3ad;
  --bandeau-ko-texte: #a8271f;
  --police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  --rayon: 28px;
  --rayon-petit: 20px;
}
:root[data-theme="enfant"], :root[data-theme="bebe"] { --rayon: 32px; }

body, :root[data-theme="enfant"] body, :root[data-theme="bebe"] body {
  background-color: var(--fond);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' opacity='.35'%3E%3Cpath d='M20 40 q30 -22 52 -10 q-30 16 -52 10z'/%3E%3Cpath d='M100 120 q26 -26 50 -18 q-26 20 -50 18z'/%3E%3Cpath d='M118 30 q-24 -12 -40 -2 q22 10 40 2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.4) 0 60px, transparent 61px),
    radial-gradient(circle at 92% 22%, rgba(255, 255, 255, 0.3) 0 90px, transparent 91px);
  background-size: 160px 160px, auto, auto;
  background-attachment: fixed;
  color: var(--texte);
}
h1, h2, h3, .consigne, .bouton, .onglet, .tuile strong, .quete-texte, .infobulle, .niveau-infos h3, .toast strong, .d-fr, .fin h2 {
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Titres de section : pastille blanche centrée, comme « MY GOALS » */
main h2 {
  display: table;
  margin: 30px auto 14px;
  padding: 8px 26px;
  background: var(--surface);
  border-radius: 999px;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--marine);
  box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12);
}
main section > h2:first-child { margin-top: 4px; }

/* En-tête turquoise, logo et stats en pastilles blanches */
header {
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--marine);
  padding: 12px 16px 6px;
  position: sticky;
  backdrop-filter: blur(6px);
  background-color: color-mix(in srgb, var(--turquoise) 85%, transparent);
}
header a, .marque { color: var(--marine); }
header h1 { font-size: 1.3rem; }
.marque img { box-shadow: 0 3px 0 rgba(45, 42, 50, 0.18); }
.sous-titre { color: var(--marine-doux); opacity: 1; }
.pastille { background: var(--surface); color: var(--marine); box-shadow: 0 3px 0 rgba(45, 42, 50, 0.12); padding: 5px 11px; }
.profil-actif, .bouton-entete { color: var(--marine); }
.bouton-entete { background: var(--surface); border: none; box-shadow: 0 3px 0 rgba(45, 42, 50, 0.12); }

/* Cartes : blanches ou pêche, sans bordure, ombre douce et franche */
.carte, .tuile, .decouverte, .page-histoire, .flashcard, .image-imagier, .album, .classement li, .lexique li, .ligne-comptine, .carte-phrase, .note-unite, .liste-etapes li {
  border: none;
  box-shadow: 0 6px 0 rgba(45, 42, 50, 0.12);
}
.carte { background: var(--peche); }
.carte.reglages, .carte.alerte, .carte.intro, .carte.conseil, .carte-phrase { background: var(--surface); }

/* Tuiles d'activité : rangées horizontales illustrées (« Drink Water ») */
.grille { grid-template-columns: 1fr; gap: 14px; }
.tuile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titre image" "texte image";
  align-items: center;
  text-align: left;
  padding: 18px 20px;
  min-height: 104px;
  background: var(--peche);
  overflow: hidden;
  position: relative;
}
.tuile br { display: none; }
.tuile .grand {
  grid-area: image;
  font-size: 3.6rem;
  line-height: 1;
  filter: drop-shadow(0 6px 0 rgba(45, 42, 50, 0.12));
  transform: rotate(-6deg);
}
.tuile strong { grid-area: titre; font-size: 1.35rem; color: var(--marine); }
.tuile small { grid-area: texte; color: var(--marine-doux); font-weight: 800; font-size: 0.95rem; }
.tuile::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 150px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.tuile:nth-child(3n+2) { background: var(--menthe); }
.tuile:nth-child(3n) { background: var(--rose); }
.tuile-vedette { background: var(--orange) !important; }
.tuile-vedette strong { color: #fff; }
.tuile-vedette small { color: #fff; text-shadow: none; }
.tuile.active { background: var(--turquoise-pale); box-shadow: 0 6px 0 var(--turquoise-fonce); }
.tuile.verrouille { filter: grayscale(0.6); }
/* Les choix de profils et de thèmes restent en grille de cartes */
#profils, #themes, #routines, #comptines, #histoires { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Boutons : orange solaire, corail pour l'action principale des leçons */
.bouton { background: var(--orange); box-shadow: 0 6px 0 var(--orange-fonce); color: #fff; border-radius: 999px; text-transform: none; font-size: 1.15rem; letter-spacing: 0.02em; }
.bouton:active:not(:disabled) { box-shadow: 0 2px 0 var(--orange-fonce); }
.bouton.secondaire { background: var(--surface); color: var(--marine); border: none; box-shadow: 0 5px 0 rgba(45, 42, 50, 0.14); }
.bouton-son { background: var(--corail); box-shadow: 0 5px 0 var(--corail-fonce); border-radius: 50%; }
.bouton-son.lent { background: var(--orange); box-shadow: 0 5px 0 var(--orange-fonce); }
.bouton-rond { background: var(--orange); box-shadow: 0 6px 0 var(--orange-fonce); }

/* Pastilles segmentées (Year / Month / Today) : filtres et onglets */
.filtres { justify-content: center; background: transparent; }
.filtre { background: var(--surface); border: none; color: var(--marine); box-shadow: 0 3px 0 rgba(45, 42, 50, 0.12); font-family: var(--police-titre); font-weight: 600; font-size: 1rem; }
.filtre.actif { background: var(--corail); color: #fff; box-shadow: 0 3px 0 var(--corail-fonce); }

.onglets {
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  border: none;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 0 rgba(45, 42, 50, 0.15), 0 10px 30px rgba(45, 42, 50, 0.12);
}
.onglet { border-radius: 999px; color: var(--marine); font-size: 0.78rem; }
.onglet.actif { background: var(--corail); border-color: transparent; color: #fff; }
.onglet span { filter: none; opacity: 1; font-size: 1.4rem; }

/* Barres : épaisses, corail, comme « Total Tasks » */
.barre { height: 18px; background: var(--surface); box-shadow: inset 0 0 0 2px rgba(45, 42, 50, 0.06); }
.barre > span { background: var(--corail); }
.lecon-haut .barre > span { background: var(--orange); }
.quete.faite .barre > span { background: var(--jade); }

/* Accueil : héros avec Bao en grand et bulle blanche */
.salut { align-items: flex-end; }
#onglet-apprendre > .salut, #ecran-profils > .salut {
  position: relative;
  background: var(--orange);
  border-radius: var(--rayon);
  padding: 16px 16px 0;
  min-height: 170px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--orange-fonce);
}
#onglet-apprendre > .salut::before, #ecran-profils > .salut::before {
  /* soleil doux et bambous derrière Bao */
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 200'%3E%3Cg fill='%23ffffff' opacity='.3'%3E%3Crect x='72' y='0' width='13' height='200' rx='6'/%3E%3Crect x='69' y='62' width='19' height='5' rx='2.5'/%3E%3Crect x='69' y='134' width='19' height='5' rx='2.5'/%3E%3Crect x='104' y='24' width='11' height='176' rx='5'/%3E%3Crect x='101' y='96' width='17' height='5' rx='2.5'/%3E%3Cpath d='M85 60 q24 -16 38 -7 q-22 12 -38 7z'/%3E%3Cpath d='M72 132 q-26 -12 -38 0 q24 9 38 0z'/%3E%3Cpath d='M115 94 q16 -18 28 -13 q-16 15 -28 13z'/%3E%3C/g%3E%3C/svg%3E") right -10px bottom 0 / auto 100% no-repeat,
    radial-gradient(circle at 18% 30%, rgba(255, 200, 61, 0.55) 0 54px, rgba(255, 200, 61, 0.18) 55px 84px, transparent 85px);
}
#onglet-apprendre > .salut .avatar-mascotte, #ecran-profils > .salut .avatar-mascotte { width: 140px; height: 146px; position: relative; margin-bottom: -6px; }
.salut .bulle { align-self: center; border: none; border-radius: 24px; font-family: var(--police-titre); font-weight: 600; font-size: 1.1rem; color: var(--marine); box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12); }
.bulle { border: none; box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12); }
.bulle::before { border: none; }

/* Objectif du jour */
.anneau .fond-anneau { stroke: #fff; }
.anneau .plein { stroke: var(--corail); }
.anneau-centre { color: var(--marine); }

/* Quêtes : verres qui se remplissent (« 80 % ») */
.quetes { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quete { display: flex; flex-direction: column; align-items: stretch; border-radius: 22px; overflow: hidden; background: var(--turquoise-pale); box-shadow: 0 5px 0 rgba(45, 42, 50, 0.12); }
.quete-titre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; text-align: center; min-height: 92px; }
.quete-emoji { font-size: 1.5rem; }
.quete-texte { font-size: 0.86rem; line-height: 1.2; color: var(--marine); }
.quete-verre { position: relative; width: 100%; height: 76px; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.quete-liquide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--orange);
  transition: height 0.8s cubic-bezier(.2, .8, .3, 1);
}
.quete-liquide::before {
  /* petite vague à la surface */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  background: radial-gradient(circle at 10px -2px, transparent 8px, var(--orange) 9px) 0 0 / 20px 12px repeat-x;
}
.quete.faite .quete-liquide { background: var(--soleil); }
.quete.faite .quete-liquide::before { background-image: radial-gradient(circle at 10px -2px, transparent 8px, var(--soleil) 9px); }
.quete-compte { position: relative; font-family: var(--police-titre); font-size: 1.5rem; color: var(--marine); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8); }
.quete.faite .quete-compte { color: var(--marine); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7); }
.coffre { border: none; background: var(--surface); box-shadow: 0 5px 0 rgba(45, 42, 50, 0.12); }

.revision { background: var(--surface); box-shadow: 0 6px 0 rgba(45, 42, 50, 0.12); border: none; }
.phrase-jour { background: var(--surface); border: none; box-shadow: 0 6px 0 rgba(45, 42, 50, 0.12); }
.phrase-jour .etiquette { color: var(--corail-fonce); }
.niveau-carte { background: var(--peche); border: none; }
.niveau-medaille { background: radial-gradient(circle at 35% 30%, #fff3c4, var(--soleil)); }
.anneau.complet .plein { stroke: var(--orange); }
.lecon-haut .barre > span { background: var(--orange); }
.niveau-infos .hanzi-niveau { color: var(--corail-fonce); }
.bebe-intro { background: var(--surface); border: none; }

/* Parcours */
.titre-etape {
  display: table;
  margin: 34px auto 8px;
  padding: 8px 22px;
  background: var(--surface);
  border-radius: 999px;
  color: var(--marine);
  font-family: var(--police-titre);
  box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12);
}
.titre-etape::before, .titre-etape::after { display: none; }
.unite-entete { box-shadow: 0 6px 0 rgba(45, 42, 50, 0.18); border-radius: var(--rayon); }
.unite-entete h3 { font-family: var(--police-titre); font-size: 1.5rem; }
.unite-entete::after { background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.25) 0 50px, transparent 51px); }
.noeud .rond { width: 82px; height: 76px; box-shadow: 0 8px 0 color-mix(in srgb, var(--couleur) 70%, #2c2a6b); border: 4px solid #fff; }
.noeud.fait .rond { background: var(--soleil); color: #7a5200; box-shadow: 0 8px 0 #d9a21a; }
.noeud.verrou .rond { background: #e9f6f6; color: #8fb9bb; box-shadow: 0 8px 0 #b9dcdd; }
.noeud-titre { color: var(--marine); background: rgba(255, 255, 255, 0.7); padding: 1px 10px; border-radius: 99px; }
.infobulle { border: none; color: var(--corail-fonce); background: var(--surface); box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12); }
.note-unite { background: var(--surface); }
.note-unite summary { color: var(--marine); }

/* Leçons */
.consigne { color: var(--marine); font-size: 1.45rem; }
.etiquette { color: var(--corail-fonce); }
.choix button, .paires button, .morceau {
  border: none;
  background: var(--surface);
  color: var(--marine);
  box-shadow: 0 6px 0 rgba(45, 42, 50, 0.14);
  border-radius: 24px;
}
.choix button.choisi, .paires button.choisi { background: var(--turquoise-pale); box-shadow: 0 6px 0 var(--turquoise-fonce); }
.choix button.bon, .paires button.bon { background: var(--jade-clair); box-shadow: 0 6px 0 var(--jade); }
.choix button.faux, .paires button.faux { background: #ffe1de; box-shadow: 0 6px 0 var(--corail); }
.decouverte { background: var(--peche); }
.d-hanzi, .q-hanzi { color: var(--marine); }
.bandeau { border: none; border-radius: 28px 28px 0 0; box-shadow: 0 -6px 20px rgba(45, 42, 50, 0.12); }
.bandeau.ok #continuer { background: var(--orange); box-shadow: 0 6px 0 var(--orange-fonce); }
.bandeau.ko #continuer { background: var(--corail); box-shadow: 0 6px 0 var(--corail-fonce); }
.fermer { color: var(--marine); }
.tuile-fin small { font-family: var(--police-titre); }
.tuile-fin { background: var(--surface); }

/* Badges et autocollants */
.badge.obtenu .badge-medaille { background: var(--soleil); box-shadow: 0 5px 0 #d9a21a; }
.badge-medaille { border-radius: 24px; }
.album { background: var(--peche); }

/* Divers */
.petit { color: var(--marine-doux); }
.toast { border: none; box-shadow: 0 6px 0 var(--soleil), 0 10px 30px rgba(45, 42, 50, 0.2); }
.lexique li { background: var(--surface); }
.jauge i.plein { background: var(--jade); }
.jauge i { background: var(--turquoise-pale); }
.coffre .bouton { background: var(--corail); box-shadow: 0 5px 0 var(--corail-fonce); color: #fff; }
.page-histoire, .flashcard, .image-imagier { background: var(--peche); }
.ligne-comptine.en-cours { background: var(--peche); box-shadow: 0 4px 0 var(--orange); }
.choix-mode label { border: none; background: var(--surface); box-shadow: 0 4px 0 rgba(45, 42, 50, 0.12); }
.choix-mode label:has(input:checked) { background: var(--turquoise-pale); box-shadow: 0 4px 0 var(--turquoise-fonce); }
.ajout input { border: none; background: var(--champ); color: var(--texte); box-shadow: inset 0 0 0 2px rgba(45, 42, 50, 0.18); }
.ajout input::placeholder { color: var(--marine-doux); opacity: 1; }

/* Mode sombre : la forêt de bambous la nuit */
:root[data-sombre="oui"][data-theme="adulte"] { --fond: #14281f; --carte: #1f3a2d; --texte: #f1f7f2; --doux: #a9c4b3; --marine: #f1f7f2; --marine-doux: #a9c4b3; --peche: #284a39; --peche-clair: #284a39; --turquoise-pale: #234334; --menthe: #234334; --rose: #4a2e36; --piste: #284a39; --surface: #1f3a2d; --champ: #16301f; --turquoise: #14281f; --turquoise-fonce: #2f6b4f; --corail-fonce: #ffb4ab; --lien: #8cc8ff; --bandeau-ok: #173d2a; --bandeau-ok-texte: #9be8bd; --bandeau-ko: #4a2226; --bandeau-ko-texte: #ffb4ab; --verrou: #2a4a3a; --verrou-fonce: #1a3326; }
@media (prefers-color-scheme: dark) {
  :root[data-sombre="auto"][data-theme="adulte"] { --fond: #14281f; --carte: #1f3a2d; --texte: #f1f7f2; --doux: #a9c4b3; --marine: #f1f7f2; --marine-doux: #a9c4b3; --peche: #284a39; --peche-clair: #284a39; --turquoise-pale: #234334; --menthe: #234334; --rose: #4a2e36; --piste: #284a39; --surface: #1f3a2d; --champ: #16301f; --turquoise: #14281f; --turquoise-fonce: #2f6b4f; --corail-fonce: #ffb4ab; --lien: #8cc8ff; --bandeau-ok: #173d2a; --bandeau-ok-texte: #9be8bd; --bandeau-ko: #4a2226; --bandeau-ko-texte: #ffb4ab; --verrou: #2a4a3a; --verrou-fonce: #1a3326; }
}
:root[data-sombre="oui"][data-theme="adulte"] :is(.pastille, .bouton-entete, main h2, .titre-etape, .filtre:not(.actif), .bouton.secondaire, .choix button, .paires button, .morceau, .salut .bulle, .bulle, .infobulle, .quete-verre, .onglets) { background: var(--carte); }
@media (prefers-color-scheme: dark) {
  :root[data-sombre="auto"][data-theme="adulte"] :is(.pastille, .bouton-entete, main h2, .titre-etape, .filtre:not(.actif), .bouton.secondaire, .choix button, .paires button, .morceau, .salut .bulle, .bulle, .infobulle, .quete-verre, .onglets) { background: var(--carte); }
}

/* Navigation par glissement : l'écran arrive du côté du geste */
.depuis-droite { animation: depuis-droite 0.28s cubic-bezier(.2, .8, .3, 1); }
.depuis-gauche { animation: depuis-gauche 0.28s cubic-bezier(.2, .8, .3, 1); }
@keyframes depuis-droite { from { opacity: 0; transform: translateX(40px); } }
@keyframes depuis-gauche { from { opacity: 0; transform: translateX(-40px); } }
#ecran-accueil, #ecran-bienvenue { touch-action: pan-y; }
.points i { cursor: pointer; }
.astuce-glisser {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  z-index: 7;
  background: var(--marine);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(45, 42, 50, 0.25);
  animation: flotte 1.6s ease-in-out infinite;
  pointer-events: none;
}
:root[data-sombre="oui"] .astuce-glisser { background: #fff; color: #2d2a32; }

/* ---------- Audit de lisibilité (contrastes WCAG AA) ---------- */
.classement .pts { color: var(--orange-fonce); }
.bouton-dite { color: var(--orange-fonce); border-color: var(--orange); box-shadow: 0 3px 0 var(--orange); }
.bouton-test { background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.6); }
.unite-entete small { opacity: 1; }
.noeud.verrou .rond { color: #4f7f76; }
.sous-titre { color: var(--marine-doux); }
.ton1 { color: #c62828; } .ton2 { color: #1f7a45; } .ton3 { color: #1565c0; } .ton4 { color: #7b1fa2; } .ton5 { color: #6f6a75; }
/* En mode sombre : couleurs des tons et accents verts éclaircis */
:root[data-sombre="oui"][data-theme="adulte"] .ton1 { color: #ff8a80; }
:root[data-sombre="oui"][data-theme="adulte"] .ton2 { color: #7ee2a8; }
:root[data-sombre="oui"][data-theme="adulte"] .ton3 { color: #8cc8ff; }
:root[data-sombre="oui"][data-theme="adulte"] .ton4 { color: #e1a6ff; }
:root[data-sombre="oui"][data-theme="adulte"] .ton5 { color: #b8b2c0; }
:root[data-sombre="oui"][data-theme="adulte"] :is(.classement .pts, .bouton-dite:not(.fait)) { color: #9be8bd; }
:root[data-sombre="oui"][data-theme="adulte"] .noeud-titre { background: rgba(0, 0, 0, 0.35); }
@media (prefers-color-scheme: dark) {
  :root[data-sombre="auto"][data-theme="adulte"] .ton1 { color: #ff8a80; }
  :root[data-sombre="auto"][data-theme="adulte"] .ton2 { color: #7ee2a8; }
  :root[data-sombre="auto"][data-theme="adulte"] .ton3 { color: #8cc8ff; }
  :root[data-sombre="auto"][data-theme="adulte"] .ton4 { color: #e1a6ff; }
  :root[data-sombre="auto"][data-theme="adulte"] .ton5 { color: #b8b2c0; }
  :root[data-sombre="auto"][data-theme="adulte"] :is(.classement .pts, .bouton-dite:not(.fait)) { color: #9be8bd; }
  :root[data-sombre="auto"][data-theme="adulte"] .noeud-titre { background: rgba(0, 0, 0, 0.35); }
}

.choix .ton-signe { color: var(--corail-fonce); }

/* Zones tactiles d'au moins 44 px (recommandation Apple / WCAG 2.5.5) */
.fermer { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -8px; }
.marque, .bouton-test, .lien, .filtre, .case { min-height: 44px; }
.marque, .lien { display: inline-flex; align-items: center; }
.lien { margin-left: auto; margin-right: auto; padding: 0 10px; }
.bouton-test { display: inline-flex; align-items: center; }

/* Partage */
.partage { background: var(--surface); text-align: center; }
.partage > p:first-child { text-align: left; margin-top: 0; }
.partage-qr { margin: 6px auto 16px; }
.partage-qr img { display: block; margin: 0 auto; border-radius: 16px; padding: 8px; background: #fff; box-shadow: 0 5px 0 rgba(45, 42, 50, 0.12); }

/* Réinitialisation */
.zone-danger { background: var(--surface); }
.zone-danger h3 { color: var(--corail-fonce); }
.bouton.danger { color: var(--corail-fonce); box-shadow: 0 5px 0 rgba(200, 52, 43, 0.35); }

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

.cache { display: none !important; }

/* ---------- Illustrations (famille, pronoms) ---------- */
/* Elles remplacent l'emoji et suivent la taille de police de leur conteneur. */
.illu { height: 1.2em; width: auto; vertical-align: middle; display: inline-block; user-select: none; -webkit-user-drag: none; }
.q-emoji .illu, .d-emoji .illu, .grand-emoji .illu, .choix-emoji .illu { height: 1.5em; }
.ii-emoji .illu { height: 1.35em; }
.lx-emoji .illu { height: 1.4em; }
.puce-mot .illu, .b-mot .illu, #retour .illu, .flashcard .emoji .illu { height: 1.6em; margin-right: 2px; }