/* F4IOZ — the tutorials (tutos.js and its tutorials), /tutos and /mascottes. Only .tu-… and .mo-… classes; the game
   page's frame is jeux.css's (.dx-app, .jeu-panneau…), the mascots' mascottes.css's. */

.tu-page, .tu-page-hub, .tu-page-mascottes {
  --tu-or: #FFC94D; --tu-rose: #FF6FAE; --tu-ciel: #4FC3FF; --tu-vert: #4FE08A; --tu-violet: #A98BFF; --tu-orange: #FF9A4D; --tu-bleu: #5B95FF; --tu-rouge: #FF6464;
  --tu-ecran: #0A1326; --tu-grille: rgba(150, 185, 235, .16); --tu-terre: #2E7D4F; --tu-texte: #E8EEF6; --tu-dim: #9AA8BA;
}
:root[data-theme="light"] .tu-page, :root[data-theme="light"] .tu-page-hub, :root[data-theme="light"] .tu-page-mascottes {
  --tu-or: #B97E00; --tu-rose: #D6337A; --tu-ciel: #0A82C8; --tu-vert: #149A4E; --tu-violet: #6B4FD8; --tu-orange: #D9620B; --tu-bleu: #1F5FD6; --tu-rouge: #C92A2A;
  --tu-ecran: #F4F8FD; --tu-grille: rgba(30, 60, 110, .13); --tu-terre: #7FBF8F; --tu-texte: #14202E; --tu-dim: #5A6B80;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tu-page, :root:not([data-theme="dark"]) .tu-page-hub, :root:not([data-theme="dark"]) .tu-page-mascottes {
    --tu-or: #B97E00; --tu-rose: #D6337A; --tu-ciel: #0A82C8; --tu-vert: #149A4E; --tu-violet: #6B4FD8; --tu-orange: #D9620B; --tu-bleu: #1F5FD6; --tu-rouge: #C92A2A;
    --tu-ecran: #F4F8FD; --tu-grille: rgba(30, 60, 110, .13); --tu-terre: #7FBF8F; --tu-texte: #14202E; --tu-dim: #5A6B80;
  }
}

/* ------------------------------------------------------------ the welcome */
.tu-arene { background-image: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--tu-ciel) 14%, transparent), transparent 55%),
  radial-gradient(ellipse at 92% 100%, color-mix(in srgb, var(--tu-orange) 12%, transparent), transparent 55%); }
.tu-accueil { display: flex; flex-direction: column; gap: 10px; }
.tu-trio { max-width: 640px; width: 100%; margin: 0 auto; }
.tu-trio .ma-fil { max-height: 150px; }
.tu-accueil h2 { margin: 2px 0 0; font-size: 19px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tu-total { font-size: 13px; color: var(--tu-or); }
.tu-niveaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tu-niv { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 10px 52px; border-radius: 16px; cursor: pointer; color: var(--text);
  border: 1px solid var(--border-strong); font: inherit; text-align: left; background: linear-gradient(135deg, color-mix(in srgb, var(--tu-c) 22%, var(--panel-2)), color-mix(in srgb, var(--tu-c) 5%, var(--panel-2)));
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim); }
.tu-niveaux li:nth-child(1) .tu-niv { --tu-c: var(--tu-ciel); } .tu-niveaux li:nth-child(2) .tu-niv { --tu-c: var(--tu-or); }
.tu-niveaux li:nth-child(3) .tu-niv { --tu-c: var(--tu-vert); } .tu-niveaux li:nth-child(4) .tu-niv { --tu-c: var(--tu-rose); }
.tu-niveaux li:nth-child(5) .tu-niv { --tu-c: var(--tu-orange); } .tu-niveaux li:nth-child(6) .tu-niv { --tu-c: var(--tu-violet); }
.tu-niv:hover, .tu-niv:focus-visible { transform: translateY(-3px); border-color: var(--tu-c); box-shadow: 0 10px 26px color-mix(in srgb, var(--tu-c) 28%, transparent); outline: none; }
.tu-niv-n { position: absolute; left: 11px; top: 11px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--font-sans); color: #0B1220; background: var(--tu-c); }
.tu-niv b { font-size: 15px; } .tu-niv small { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.tu-etoiles { color: var(--text-muted); letter-spacing: 2px; font-style: normal; font-size: 15px; margin-top: auto; }
.tu-etoiles.tu-ont { color: var(--tu-or); text-shadow: 0 0 8px color-mix(in srgb, var(--tu-or) 45%, transparent); }
.jeu-option .tu-etoiles { font-size: 12px; margin-left: 4px; }
.tu-simule { font-size: 12.5px; margin: 8px 0 0; }
.tu-sources ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }

/* ------------------------------------------------------------ a level */
@media (min-width: 860px) { .tu-app.tu-joue { grid-template-columns: minmax(0, 1fr); } .tu-app.tu-joue > .tu-panneau { display: none; } }
.tu-jeu { position: relative; }
.tu-niveau { position: relative; display: flex; flex-direction: column; gap: 10px; }
.tu-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tu-titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tu-titre > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.tu-titre b { font-size: 18px; } .tu-titre small { font-size: 12px; color: var(--text-dim); }
.tu-num { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--font-sans); color: #0B1220;
  background: conic-gradient(var(--tu-ciel), var(--tu-violet), var(--tu-rose), var(--tu-or), var(--tu-vert), var(--tu-ciel)); }
.tu-points { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex: 1 1 120px; justify-content: center; }
.tu-points li { width: 12px; height: 12px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border-strong); transition: background .3s, transform .3s; }
.tu-points li.ici { border-color: var(--tu-or); background: color-mix(in srgb, var(--tu-or) 35%, var(--panel-2)); transform: scale(1.25); }
.tu-points li.fait { background: var(--tu-vert); border-color: var(--tu-vert); }
.tu-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tu-icone { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); cursor: pointer; }
.tu-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tu-icone[aria-pressed="true"] { border-color: var(--tu-vert); color: var(--tu-vert); }
.tu-icone[aria-pressed="false"] { color: var(--text-muted); }
.tu-icone .tu-barre { display: none; } .tu-icone[aria-pressed="false"] .tu-barre { display: inline; } .tu-icone[aria-pressed="false"] .tu-ondes { display: none; }
.tu-corps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 14px; align-items: stretch; }
.tu-scene { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.tu-pupitre { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.tu-salon:empty { display: none; }
.tu-plateau { max-width: 720px; width: 100%; margin: 6px auto 0; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--tu-violet) 8%, var(--panel)); border: 1px solid var(--border-strong); }
.tu-plateau .ma-acteur .ma-svg { width: 96px; height: 96px; }
.tu-plateau .ma-fil { max-height: 380px; }
.tu-plateau .ma-replique { font-size: 15px; }
.tu-salon { padding: 8px 10px; border-radius: 16px; background: color-mix(in srgb, var(--tu-violet) 8%, var(--panel)); border: 1px solid var(--border-strong); }
.tu-pupitre.en-scene .tu-guide, .tu-pupitre.en-scene .tu-controles, .tu-pupitre.en-scene .tu-retour, .tu-pupitre.en-scene .tu-pied { display: none; }
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran .tu-app.tu-joue .tu-arene { display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px; }
  body.ecran .tu-app.tu-joue .tu-jeu { flex: 1; min-height: 0; display: flex; }
  body.ecran .tu-app.tu-joue .tu-niveau { flex: 1; min-height: 0; }
  body.ecran .tu-app.tu-joue .tu-corps { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.ecran .tu-app.tu-joue .tu-pupitre, body.ecran .tu-app.tu-joue .tu-scene { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
  body.ecran .tu-salon .ma-fil { max-height: 300px; }
}
.tu-toile { display: block; width: 100%; border-radius: 12px; }
.tu-cliquable { cursor: crosshair; touch-action: none; }
.tu-lectures { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.tu-lectures div { padding: 6px 9px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.tu-lectures dt { font: 600 11px var(--font-sans); color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.tu-lectures dd { margin: 0; font-size: 15px; font-weight: 700; }
.tu-lectures .vient dd { color: var(--tu-bleu); } .tu-lectures .part dd { color: var(--tu-rouge); } .tu-lectures .fort dd { color: var(--tu-or); }

/* The desk: controls, feedback, buttons. */
.tu-controles { display: flex; flex-direction: column; gap: 10px; }
.tu-retour:empty { display: none; }
.tu-retour { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border-left: 4px solid var(--info); background: color-mix(in srgb, var(--info) 10%, var(--panel-2)); }
.tu-retour.ok { border-left-color: var(--tu-vert); background: color-mix(in srgb, var(--tu-vert) 13%, var(--panel-2)); }
.tu-retour.ko { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel-2)); }
.tu-retour.ok b { color: var(--tu-vert); } .tu-retour.ko b { color: var(--red); }
.tu-pourquoi { display: inline-block; margin-top: 4px; color: var(--text); }
.tu-pied { display: flex; flex-wrap: wrap; gap: 8px; } .tu-pied:empty { display: none; }
.tu-btn { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 650 14px var(--font-sans); cursor: pointer;
  transition: transform var(--anim), border-color var(--anim); touch-action: manipulation; }
.tu-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.tu-btn:disabled { opacity: .45; cursor: not-allowed; }
.tu-btn[hidden] { display: none; }
.tu-valider { border-color: transparent; color: #0B1220; background: linear-gradient(135deg, var(--tu-vert), var(--tu-ciel)); }
.tu-suivant { border-color: transparent; color: #0B1220; background: linear-gradient(135deg, var(--tu-or), var(--tu-rose)); animation: tu-appel 1.4s ease-in-out infinite; }
.tu-gros { min-height: 50px; font-size: 17px; padding: 0 26px; align-self: flex-start; }
@keyframes tu-appel { 50% { transform: scale(1.04); } }
.tu-note { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.tu-secoue { animation: tu-secoue .4s ease-in-out; }
@keyframes tu-secoue { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.tu-etincelles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* Choices. */
.tu-qcm { display: flex; flex-direction: column; gap: 8px; }
.tu-question { margin: 0; font-weight: 700; font-size: 15px; }
.tu-choix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.tu-choix.ligne { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tu-rep { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 46px; padding: 7px 12px; border-radius: 14px; cursor: pointer; font: 600 14px var(--font-sans); color: var(--text);
  border: 1px solid var(--border-strong); background: var(--panel-2); transition: transform var(--anim), border-color var(--anim); touch-action: manipulation; }
.tu-rep:hover:not(:disabled) { transform: translateX(3px); border-color: var(--accent); }
.tu-lettre { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-sans); color: #0B1220; background: var(--tu-c, var(--tu-ciel)); }
.tu-rep.c0 { --tu-c: var(--tu-ciel); } .tu-rep.c1 { --tu-c: var(--tu-or); } .tu-rep.c2 { --tu-c: var(--tu-vert); } .tu-rep.c3 { --tu-c: var(--tu-rose); }
.tu-rep.juste { border-color: var(--tu-vert); background: color-mix(in srgb, var(--tu-vert) 18%, var(--panel-2)); }
.tu-rep.faux { border-color: var(--red); background: color-mix(in srgb, var(--red) 15%, var(--panel-2)); }
.tu-rep:disabled { cursor: default; }
.tu-rep:disabled:not(.juste):not(.faux) { opacity: .6; }
.tu-bascule { justify-content: center; border-left: 5px solid var(--tu-c); }
.tu-bascule[aria-pressed="true"] { background: color-mix(in srgb, var(--tu-c) 22%, var(--panel-2)); border-color: var(--tu-c); }

/* Sliders, the tuning knob's needle, the FM memories, the TLE. */
.tu-curseur { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tu-curseur input { width: 100%; accent-color: var(--tu-or); min-height: 32px; }
.tu-pas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tu-pas-b { padding: 0 4px; min-height: 44px; font-family: var(--font-mono); }
.tu-cadran { display: flex; flex-direction: column; align-items: center; }
.tu-cadran svg { width: min(100%, 260px); height: auto; overflow: visible; }
.tu-arc { fill: none; stroke: var(--border-strong); stroke-width: 10; stroke-linecap: round; }
.tu-arc-vert { fill: none; stroke: var(--tu-vert); stroke-width: 10; stroke-linecap: round; opacity: .55; }
.tu-aiguille { fill: var(--tu-rouge); transition: transform .08s linear; }
.tu-cadran.ok .tu-aiguille { fill: var(--tu-vert); }
.tu-axe { fill: var(--text); }
.tu-note-entendue { margin: 0; font-size: 15px; font-weight: 700; }
.tu-canaux { display: flex; flex-direction: column; gap: 8px; }
.tu-canal { margin: 0; padding: 6px 8px 8px; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 5px; }
.tu-canal legend { font-size: 13px; font-weight: 700; padding: 0 4px; } .tu-canal legend small { font-weight: 500; color: var(--text-dim); }
.tu-canal-b { min-height: 40px; padding: 0 10px; font-family: var(--font-mono); font-size: 13px; }
.tu-canal-b[aria-pressed="true"] { border-color: var(--tu-or); background: color-mix(in srgb, var(--tu-or) 22%, var(--panel-2)); }
.tu-tle { padding: 12px; border-radius: 12px; background: var(--tu-ecran); color: var(--tu-texte); overflow-x: auto; font-size: clamp(9.5px, 1.25vw, 15px); line-height: 2; white-space: pre; }
.tu-tle-ligne span { cursor: pointer; border-radius: 3px; padding: 2px 0; }
.tu-tle-ligne span:hover { background: color-mix(in srgb, var(--tu-or) 30%, transparent); }
.tu-tle-ligne span.trouve { background: color-mix(in srgb, var(--tu-vert) 45%, transparent); color: inherit; }
.tu-carte-zone { min-height: 0; }

/* The quiz, the end. */
.tu-quiz-carte { padding: 18px 20px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--tu-violet) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tu-violet) 16%, var(--panel-2)), var(--panel-2) 70%); text-align: center; }
.tu-quiz-titre { margin: 0; font: 800 22px var(--font-sans); } .tu-compte { margin: 4px 0 0; font-size: 26px; color: var(--tu-or); }
.tu-bilan { text-align: center; padding: 18px; border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tu-or) 22%, transparent), transparent 70%), var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--tu-or) 55%, transparent); }
.tu-bilan.rate { border-color: color-mix(in srgb, var(--red) 50%, transparent); background: var(--panel-2); }
.tu-bilan-titre { margin: 0; font: 800 24px var(--font-sans); }
.tu-bilan-etoiles { margin: 6px 0; font-size: 54px; line-height: 1; letter-spacing: 6px; }
.tu-bilan-etoiles span { color: var(--border-strong); display: inline-block; }
.tu-bilan-etoiles span.pleine { color: var(--tu-or); text-shadow: 0 0 18px color-mix(in srgb, var(--tu-or) 70%, transparent); animation: tu-etoile .6s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes tu-etoile { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
.tu-bilan-score { margin: 4px 0; display: flex; flex-direction: column; align-items: center; } .tu-bilan-score small { color: var(--text-dim); } .tu-bilan-score b { font-size: 32px; color: var(--tu-ciel); }
.tu-bilan-mot { margin: 4px 0 0; font-weight: 700; color: var(--tu-rose); }

/* ------------------------------------------------------------ /tutos */
.tu-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: start; }
.tu-hub > .jeux-memoire { grid-column: 1 / -1; }
.tu-theme { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-top: 5px solid var(--tu-c); }
.tu-theme[data-qui="gamma"] { --tu-c: var(--tu-ciel); } .tu-theme[data-qui="kepler"] { --tu-c: var(--tu-or); } .tu-theme[data-qui="doppler"] { --tu-c: var(--tu-orange); }
.tu-theme-tete { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.tu-theme-perso .ma-svg { width: 72px; height: 72px; }
.tu-theme-tete h2 { margin: 0 0 4px; font-size: 20px; }
.tu-theme-mot { margin: 0; font-size: 13.5px; color: var(--text-dim); padding: 7px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.tu-theme-mot b { color: var(--tu-c); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-right: 4px; }
.tu-cartes { display: flex; flex-direction: column; gap: 10px; }
.tu-carte { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--panel-2); transition: transform var(--anim), border-color var(--anim); }
.tu-carte:hover { transform: translateY(-2px); border-color: var(--tu-c); }
.tu-carte h3 { margin: 0; font-size: 17px; } .tu-carte h3 a { color: inherit; text-decoration: none; }
.tu-carte p { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.tu-etiquettes { display: flex; flex-wrap: wrap; gap: 5px; }
.tu-progres .tu-etoiles { font-size: 17px; }
.tu-bientot { border-style: dashed; background: transparent; } .tu-bientot:hover { transform: none; border-color: var(--border-strong); }

/* ------------------------------------------------------------ /mascottes */
.mo-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.mo-fiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mo-fiche { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--border); border-top: 5px solid var(--tu-c); }
.mo-fiche[data-qui="gamma"] { --tu-c: var(--tu-ciel); } .mo-fiche[data-qui="kepler"] { --tu-c: var(--tu-or); } .mo-fiche[data-qui="doppler"] { --tu-c: var(--tu-orange); }
.mo-grand { display: grid; place-items: center; height: 104px; }
.mo-grand .ma-svg { width: 100px; height: 100px; }
.mo-fiche h2 { margin: 0; font-size: 21px; text-align: center; } .mo-fiche h2 small { display: block; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.mo-humeurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.mo-humeur { display: flex; flex-direction: row; justify-content: center; gap: 4px; align-items: center; gap: 1px; padding: 3px 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer; font: inherit; }
.mo-humeur:hover, .mo-humeur[aria-pressed="true"] { border-color: var(--tu-c); background: var(--panel-2); }
.mo-humeur .ma-svg { width: 28px; height: 28px; animation: none; }
.mo-humeur small { font-size: 11px; line-height: 1.1; text-align: left; }
.mo-humeur > span { flex: none; }
.mo-dl { margin: 0; display: grid; gap: 2px; font-size: 13px; }
.mo-dl dt { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: var(--tu-c); margin-top: 4px; }
.mo-dl dd { margin: 0; color: var(--text); }
.mo-devise { margin: 4px 0 0; font-style: italic; font-weight: 600; text-align: center; color: var(--text); }
.mo-scene .card-body { display: flex; flex-direction: column; gap: 10px; }
.mo-scene .ma-fil { max-height: 330px; }
.mo-rejouer { margin: 0; }
.mo-page.mo-eteint .mo-grand, .mo-page.mo-eteint .mo-humeurs { opacity: .35; filter: grayscale(1); }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1250px) { .mo-page { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1099px) { .tu-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tu-hub { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 859px) {
  .tu-corps { display: flex; flex-direction: column; }
  .tu-pupitre { display: contents; }
  .tu-salon { order: -2; } .tu-guide { order: -1; } .tu-retour { order: 1; } .tu-pied { order: 2; } .tu-controles { order: 3; }
  .mo-fiches { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tu-niveaux { grid-template-columns: minmax(0, 1fr); }
  .tu-tete { gap: 8px; } .tu-titre b { font-size: 16px; }
  .tu-points { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .tu-pas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tu-bilan-etoiles { font-size: 44px; }
  .tu-lectures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tu-suivant, .tu-secoue, .tu-bilan-etoiles span.pleine { animation: none; }
  .tu-niv, .tu-carte, .tu-rep, .tu-btn { transition: none; }
}