* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --purple: #6c3bff;
  --purple-d: #4f1fd6;
  --pink: #ff5db1;
  --yellow: #ffd23f;
  --green: #2ec4b6;
  --bg1: #7b4dff;
  --bg2: #ff5db1;
}

html, body {
  height: 100%;
  font-family: -apple-system, "Segoe UI", "Baloo 2", system-ui, sans-serif;
  color: #fff;
  overflow: hidden;
  user-select: none;
}

body {
  background: linear-gradient(160deg, #7b4dff 0%, #b14dff 45%, #ff5db1 100%);
  background-attachment: fixed;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- ACCUEIL ---------- */
.home-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.stars-badge {
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.stars-badge.small { font-size: 15px; padding: 6px 12px; }
.icon-btn {
  background: rgba(255,255,255,.22);
  border: none;
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s;
}
.icon-btn:active { transform: scale(.88); }

.mascotte-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 6px;
}

/* ---------- MASCOTTE ---------- */
.mascotte {
  width: 120px; height: 120px;
  background: linear-gradient(145deg, #ffe66d, #ffb703);
  border-radius: 42% 42% 46% 46%;
  position: relative;
  box-shadow: 0 12px 30px rgba(0,0,0,.25), inset 0 -8px 0 rgba(0,0,0,.08);
  animation: bounce 2.4s ease-in-out infinite;
  border: 4px solid #fff;
}
.mascotte::before, .mascotte::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #ffe66d, #ffb703);
  border-radius: 50%;
  border: 4px solid #fff;
}
.mascotte::before { left: 10px; transform: rotate(-20deg); }
.mascotte::after { right: 10px; transform: rotate(20deg); }
.mascotte.small { width: 74px; height: 74px; border-width: 3px; }
.mascotte.small::before, .mascotte.small::after { width: 22px; height: 22px; top: -9px; border-width: 3px; }
.mascotte.big { width: 130px; height: 130px; }

.mascotte-face { position: absolute; inset: 0; }
.m-eye {
  position: absolute;
  top: 38%;
  width: 16px; height: 20px;
  background: #2b2b40;
  border-radius: 50%;
}
.mascotte.small .m-eye { width: 10px; height: 13px; top: 36%; }
.m-eye.left { left: 30%; }
.m-eye.right { right: 30%; }
.m-eye::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; background: #fff; border-radius: 50%;
}
.m-mouth {
  position: absolute;
  bottom: 24%; left: 50%;
  width: 34px; height: 18px;
  border: 4px solid #2b2b40;
  border-top: none;
  border-radius: 0 0 30px 30px;
  transform: translateX(-50%);
  transition: all .2s;
}
.mascotte.small .m-mouth { width: 22px; height: 11px; border-width: 3px; }
/* états */
.mascotte.happy { animation: happyJump .5s ease; }
.mascotte.happy .m-mouth { height: 26px; border-width: 5px; }
.mascotte.sad .m-mouth {
  bottom: 18%; border-top: 4px solid #2b2b40; border-bottom: none;
  border-radius: 30px 30px 0 0;
}
.mascotte.sad { animation: shake .4s ease; }

@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes happyJump { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-24px) scale(1.08); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }

.speech {
  margin-top: 16px;
  background: #fff;
  color: #4f1fd6;
  padding: 12px 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  max-width: 300px;
  position: relative;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.speech::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: #fff;
  border-top: none;
}

.logo {
  text-align: center;
  font-size: clamp(26px, 7.4vw, 38px);
  font-weight: 900;
  letter-spacing: .3px;
  margin-top: 18px;
  white-space: nowrap;
  text-shadow: 0 4px 0 rgba(0,0,0,.15);
  transform: rotate(-2deg);
}
.logo span { color: var(--yellow); }
.tagline { text-align: center; font-weight: 700; opacity: .95; margin-top: 2px; }

.section-title {
  margin: 24px 0 14px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.subjects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 20px;
}
.subject-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .15s;
  border-bottom: 6px solid rgba(0,0,0,.12);
}
.subject-card:active { transform: scale(.94); }
.subject-emoji { font-size: 46px; display: block; margin-bottom: 8px; }
.subject-name { font-weight: 800; font-size: 17px; }
.subject-best { font-size: 12px; font-weight: 700; margin-top: 4px; opacity: .7; }

/* ---------- QUIZ ---------- */
.quiz-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.progress-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
.progress-bar {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, var(--yellow), #ffa62b);
  border-radius: 10px;
  transition: width .3s ease;
}
#q-counter { font-weight: 800; font-size: 14px; min-width: 38px; }

.quiz-mascotte { display: flex; justify-content: center; margin: 10px 0; }

.question-card {
  background: #fff;
  color: #2b2b40;
  border-radius: 26px;
  padding: 22px 20px;
  margin: 6px 0 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
  text-align: center;
}
.q-subject {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  color: #6c3bff;
  background: #efe9ff;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.q-illus {
  font-size: 60px;
  line-height: 1;
  margin: 4px 0 12px;
  animation: illusPop .4s ease;
}
@keyframes illusPop { 0% { transform: scale(0) rotate(-15deg); } 70% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
.q-text { font-size: 21px; font-weight: 800; line-height: 1.35; }

.choices { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.choice {
  background: #fff;
  color: #2b2b40;
  border: none;
  border-radius: 20px;
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.14);
  transition: transform .1s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.choice:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.choice .c-letter {
  width: 30px; height: 30px;
  background: #efe9ff;
  color: #6c3bff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}
.choice.correct { background: #2ec4b6; color: #fff; }
.choice.correct .c-letter { background: rgba(255,255,255,.3); color: #fff; }
.choice.wrong { background: #ff5d5d; color: #fff; }
.choice.wrong .c-letter { background: rgba(255,255,255,.3); color: #fff; }
.choice.disabled { pointer-events: none; opacity: .55; }
.choice.correct.disabled, .choice.wrong.disabled { opacity: 1; }

/* ---------- RÉSULTAT ---------- */
#screen-result { justify-content: center; align-items: center; }
.result-box {
  background: #fff;
  color: #2b2b40;
  border-radius: 32px;
  padding: 30px 24px;
  text-align: center;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.result-box .mascotte { margin: 0 auto 16px; }
#result-title { font-size: 30px; font-weight: 900; color: #6c3bff; }
.result-stars { font-size: 40px; margin: 14px 0 6px; letter-spacing: 4px; }
#result-detail { font-weight: 700; font-size: 16px; opacity: .8; }
.new-medal {
  margin-top: 18px;
  background: linear-gradient(135deg, #ffd23f, #ffa62b);
  color: #7a4a00;
  padding: 14px;
  border-radius: 18px;
  font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: pop .5s ease;
}
.new-medal .medal-emoji { font-size: 34px; }
.result-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.btn-primary, .btn-secondary {
  border: none;
  border-radius: 20px;
  padding: 17px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s;
}
.btn-primary { background: linear-gradient(135deg, #6c3bff, #ff5db1); color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.btn-secondary { background: #efe9ff; color: #6c3bff; }
.btn-primary:active, .btn-secondary:active { transform: scale(.95); }

@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- MODALE MÉDAILLES ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: flex-end;
  z-index: 50;
}
.modal-overlay.active { display: flex; animation: fadeIn .25s ease; }
.modal-sheet {
  background: #fff;
  color: #2b2b40;
  width: 100%;
  border-radius: 28px 28px 0 0;
  padding: 14px 22px calc(env(safe-area-inset-bottom) + 24px);
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.modal-handle { width: 44px; height: 5px; background: #ddd; border-radius: 3px; margin: 0 auto 14px; }
.modal-sheet h2 { text-align: center; margin-bottom: 18px; color: #6c3bff; }
.medals-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.medal-card {
  background: #f6f3ff;
  border-radius: 18px;
  padding: 16px 10px;
  text-align: center;
}
.medal-card.locked { opacity: .4; filter: grayscale(1); }
.medal-card .m-ico { font-size: 34px; display: block; }
.medal-card .m-name { font-weight: 800; font-size: 13px; margin-top: 6px; }
.medal-card .m-desc { font-size: 11px; opacity: .7; margin-top: 2px; }

.hidden { display: none !important; }

/* ---------- BRAVO POP ---------- */
.bravo-pop {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, #ffd23f, #ff5db1);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  padding: 18px 30px;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
  white-space: nowrap;
  border: 4px solid #fff;
}
.bravo-pop.show { animation: bravoPop 1.1s ease forwards; }
@keyframes bravoPop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(4deg); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(.85) rotate(0); opacity: 0; }
}

/* ---------- BOUTONS ACCUEIL ---------- */
.home-top-btns { display: flex; gap: 10px; }

/* ---------- AIDE VISUELLE MATHS ---------- */
.btn-show-calc {
  margin-top: 14px;
  background: linear-gradient(135deg, #ffd23f, #ffa62b);
  color: #7a4a00;
  border: none;
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  transition: transform .12s;
}
.btn-show-calc:active { transform: scale(.95); }
.calc-help {
  margin-top: 16px;
  background: #fff8e6;
  border: 3px dashed #ffb703;
  border-radius: 18px;
  padding: 16px 12px;
  color: #2b2b40;
  animation: pop .4s ease;
}
.ch-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; color: #6c3bff; }
.ch-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-size: 26px; line-height: 1.5;
}
.ch-row.ch-wrap { gap: 10px; }
.ch-grp {
  display: inline-block;
  background: #fff;
  border: 2px solid #ffd23f;
  border-radius: 12px;
  padding: 4px 8px;
  letter-spacing: 2px;
}
.ch-grp.ch-hl { background: #ffe9c2; border-color: #ffa62b; }
.ch-op { font-size: 24px; }
.ch-cross { position: relative; opacity: .55; }
.ch-cross::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 3px; background: #ff5d5d; transform: rotate(-8deg);
}
.ch-hint { margin-top: 12px; font-weight: 700; font-size: 14px; color: #e07b00; }

/* ---------- ATELIER DESSIN ---------- */
.draw-intro { text-align: center; font-weight: 700; font-size: 14px; color: #6c3bff; margin-bottom: 12px; }
.draw-progress {
  background: linear-gradient(135deg, #ffd23f, #ffa62b);
  color: #7a4a00;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 16px;
}
.draw-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.draw-card {
  background: #f6f3ff;
  border-radius: 18px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s;
  border-bottom: 4px solid rgba(108,59,255,.2);
}
.draw-card:active { transform: scale(.94); }
.draw-card.locked { opacity: .45; filter: grayscale(.8); cursor: default; }
.draw-emoji { font-size: 40px; display: block; }
.draw-name { font-weight: 800; font-size: 13px; margin-top: 6px; color: #2b2b40; }
.draw-need { font-size: 12px; font-weight: 700; margin-top: 3px; color: #6c3bff; }
.draw-view-emoji { font-size: 70px; text-align: center; animation: pop .4s ease; }
#draw-view h2 { text-align: center; color: #6c3bff; margin: 8px 0 12px; }
.draw-view-desc {
  color: #2b2b40; font-weight: 600; font-size: 14px;
  line-height: 1.45; text-align: center; margin-bottom: 14px;
  background: #f6f3ff; padding: 12px 14px; border-radius: 16px;
}
.draw-view-head { text-align: center; }
.draw-view-head .draw-view-emoji { font-size: 48px; }
.draw-view-head h2 { margin: 2px 0 8px; }
.draw-sheet { max-height: 92vh; }

/* Zone de dessin : contour à colorier (fond) + canvas transparent (dessus) */
.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 220;
  border: 3px solid #6c3bff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  background: #fff;
  margin-bottom: 14px;
}
.draw-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.draw-outline svg { display: block; width: 100%; height: 100%; }
#draw-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  background: transparent;
  z-index: 1;
}

/* Palette de couleurs */
.draw-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.color-dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  transition: transform .12s;
  padding: 0;
}
.color-dot:active { transform: scale(.88); }
.color-dot.active { border-color: #2b2b40; transform: scale(1.15); }

/* Outils : tailles + gomme */
.draw-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.brush-size {
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 2px solid #ddd;
  background: #f6f3ff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s;
}
.brush-size span { display: block; background: #2b2b40; border-radius: 50%; }
.brush-size.active { border-color: #6c3bff; background: #efe9ff; transform: scale(1.08); }
.tool-btn {
  background: #f6f3ff;
  color: #6c3bff;
  border: 2px solid #ddd;
  border-radius: 14px;
  padding: 0 16px;
  height: 44px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.tool-btn.active { background: #ffd23f; color: #7a4a00; border-color: #ffa62b; }

.draw-actions { display: flex; flex-direction: column; gap: 10px; }

/* confetti */
.confetti {
  position: fixed;
  width: 10px; height: 14px;
  top: -20px;
  z-index: 40;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: .9; }
}

/* ============================================================
   DUMBLE JUNIOR — Profils, Admin, Niveaux
   ============================================================ */

/* ---------- Marque / logo ---------- */
.jr-brand { text-align: center; margin: 10px 0 18px; }
.jr-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.jr-logo h1 {
  font-size: clamp(22px, 6.2vw, 32px);
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  text-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.jr-logo h1 span { color: var(--yellow); }
.jr-logo-mark {
  font-size: 38px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation: jrFloat 2.8s ease-in-out infinite;
}
@keyframes jrFloat {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%     { transform: translateY(-9px) rotate(6deg); }
}

/* ---------- Grille de profils ---------- */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin: 4px 0 18px;
}
.profile-card {
  background: #fff;
  border-radius: 22px;
  padding: 18px 10px 14px;
  text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .15s ease;
  border-bottom: 6px solid var(--purple);
}
.profile-card:active { transform: scale(.94); }
.profile-card .profile-name {
  font-weight: 900;
  font-size: 17px;
  color: #3b2a63;
  margin-top: 8px;
}
.profile-card .profile-meta { font-size: 12px; color: #8b7fb0; font-weight: 700; margin-top: 2px; }

.profile-avatar {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3ecff, #ffe9f5);
  font-size: 34px;
  line-height: 1;
}
.profile-avatar.big  { width: 84px; height: 84px; font-size: 46px; }
.profile-avatar.tiny { width: 28px; height: 28px; font-size: 16px; background: rgba(255,255,255,.25); }

/* Chip profil (accueil) */
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.profile-chip:active { transform: scale(.93); }

/* ---------- Boutons additionnels ---------- */
.btn-block { width: 100%; margin-top: 6px; }
.btn-ghost {
  width: 100%;
  margin-top: 12px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
}
.btn-ghost:active { transform: scale(.96); }
.btn-mini {
  background: #fff;
  color: var(--purple);
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini:active { transform: scale(.93); }

/* ---------- Création de profil ---------- */
.np-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.np-head h2 { font-size: 20px; font-weight: 900; }
.np-label {
  display: block;
  font-weight: 800;
  font-size: 14px;
  margin: 14px 0 8px;
  opacity: .95;
}
.np-help {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .72;
  margin: 6px 0 2px;
}
.np-help.center { text-align: center; }

.np-input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  border: none;
  font-size: 17px;
  font-family: inherit;
  font-weight: 800;
  color: #3b2a63;
  background: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.14);
}
.np-input:focus { outline: 3px solid var(--yellow); }
.np-input.pin { text-align: center; letter-spacing: 8px; font-size: 24px; }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}
.avatar-opt {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,.22);
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .12s ease;
}
.avatar-opt:active { transform: scale(.9); }
.avatar-opt.selected {
  border-color: var(--yellow);
  background: rgba(255,255,255,.42);
  transform: scale(1.06);
}

.np-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 14px 18px;
  margin: 20px 0;
}
.np-preview-name { font-weight: 900; font-size: 19px; }

/* ---------- Espace admin ---------- */
.admin-lock { margin-top: 10px; }
.admin-hint { font-size: 14px; font-weight: 700; opacity: .9; margin-bottom: 12px; line-height: 1.5; }
.admin-note { font-size: 12px; opacity: .75; text-align: center; margin-top: 12px; font-weight: 700; }
.admin-error { color: #ffe0e0; background: rgba(220,38,38,.55); padding: 8px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; text-align: center; margin: 10px 0; }

.admin-section {
  background: rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-section h3 { font-size: 16px; font-weight: 900; margin-bottom: 10px; }

.admin-students { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-student {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.2);
  border: 3px solid transparent;
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  font-weight: 800; font-size: 14px;
  color: #fff; font-family: inherit;
  cursor: pointer;
}
.admin-student.selected { border-color: var(--yellow); background: rgba(255,255,255,.35); }
.admin-student .sa { font-size: 20px; }

.admin-levels { display: flex; flex-direction: column; gap: 12px; }
.admin-level-row {
  background: rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 14px;
}
.admin-level-row .alr-top {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 15px; margin-bottom: 10px;
}
.level-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.level-chip {
  background: rgba(255,255,255,.2);
  border: 2px solid transparent;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.level-chip.active { background: var(--yellow); color: #4a3400; border-color: #fff; }
.level-chip:active { transform: scale(.93); }

.admin-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 14px;
}
.stat-row .sr-label { display: flex; align-items: center; gap: 7px; }
.stat-row .sr-val { font-weight: 900; }
.stat-row .sr-bad  { color: #ffd7d7; }
.stat-row .sr-good { color: #d5ffe4; }

/* ---------- Écran niveaux (paliers) ---------- */
.levels-sub { font-size: 14px; font-weight: 700; opacity: .92; margin-bottom: 16px; }
.levels-list { display: flex; flex-direction: column; gap: 14px; }
.level-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 5px 0 rgba(0,0,0,.15);
  cursor: pointer;
  border-left: 7px solid var(--purple);
}
.level-card:active { transform: scale(.97); }
.level-card.locked { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }
.level-card.done { border-left-color: var(--green); }
.level-card .lc-emoji { font-size: 32px; }
.level-card .lc-body { flex: 1; }
.level-card .lc-title { font-weight: 900; font-size: 16px; color: #3b2a63; }
.level-card .lc-sub { font-size: 12.5px; font-weight: 700; color: #8b7fb0; margin-top: 3px; }
.level-card .lc-state { font-size: 22px; }

/* ---------- Bandeau révisions ---------- */
.review-banner {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 12px 14px;
  margin: 14px 0 6px;
  box-shadow: 0 5px 0 rgba(0,0,0,.14);
}
.review-banner .review-ico { font-size: 26px; }
.review-banner .review-txt { flex: 1; color: #3b2a63; display: flex; flex-direction: column; }
.review-banner .review-txt strong { font-size: 15px; font-weight: 900; }
.review-banner .review-txt small { font-size: 12.5px; color: #8b7fb0; font-weight: 700; }

/* ---------- Badge de niveau sur carte matière ---------- */
.subject-level-badge {
  display: inline-block;
  margin-top: 6px;
  background: #f3ecff;
  color: #6c3bff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 900;
}
.subject-card.locked { opacity: .5; filter: grayscale(.6); }
.subject-lock { font-size: 22px; margin-top: 6px; }

/* ============ AUDIO BIDIRECTIONNEL ============ */
.audio-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.audio-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), #8f6bff);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.audio-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.audio-btn.mic { background: linear-gradient(135deg, #ff5fa2, var(--pink)); }
.audio-btn[disabled] { opacity: .45; filter: grayscale(.5); cursor: default; }

/* bouton micro en écoute : pulsation */
.audio-btn.mic.listening {
  background: linear-gradient(135deg, #ff3b3b, #ff7a45);
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(255,59,59,.45); }
  50%      { transform: scale(1.05); box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 12px rgba(255,59,59,0); }
}

/* bouton écouter actif */
.audio-btn.speaking { background: linear-gradient(135deg, #00b894, #26d0a6); }

.voice-status {
  margin: 8px auto 0;
  max-width: 320px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
  background: #f3efff;
  border-radius: 14px;
  padding: 8px 12px;
  line-height: 1.35;
}
.voice-status.err { color: #c0392b; background: #ffecec; }
.voice-status.ok  { color: #0e8f6f; background: #e6fff7; }

/* ============ ILLUSTRATIONS SVG DES QUESTIONS ============ */
.q-illus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  margin: 2px auto 8px;
  font-size: 46px;
  line-height: 1;
}
.q-illus svg {
  width: 100%;
  max-width: 210px;
  height: auto;
  max-height: 130px;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .10));
}
.q-illus.has-svg { min-height: 120px; }

/* ============ ICÔNES UI SVG (remplacent les emojis) ============ */
/* Conteneur générique : s'aligne dans le texte et hérite de la couleur */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  line-height: 1;
}
.ico > svg,
.ico > .ico-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Tailles */
.ico-sm { width: .95em; height: .95em; }
.ico-lg { width: 1.6em;  height: 1.6em; }
.ico-xl { width: 2.4em;  height: 2.4em; }

/* Les boutons contenant une icône alignent proprement icône + texte */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-mini,
.tool-btn,
.audio-btn,
.btn-show-calc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-block { display: flex; width: 100%; }

/* Dans les boutons pleins, l'icône doit rester lisible sur le dégradé :
   un peu plus grande et trait plus épais (le CSS surcharge l'attribut SVG). */
.btn-primary > .ico,
.btn-secondary > .ico,
.audio-btn > .ico,
.btn-show-calc > .ico { width: 1.35em; height: 1.35em; }
.btn-primary > .ico .ico-svg,
.btn-secondary > .ico .ico-svg,
.audio-btn > .ico .ico-svg { stroke-width: 2.3; }

/* Boutons ronds : l'icône est seule et centrée */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-btn > svg,
.icon-btn > .ico-svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Badge d'étoiles : l'icône est pleine, pas de currentColor à hériter */
.stars-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stars-badge .ico { width: 1.05em; height: 1.05em; }

/* Logo animé (fusée) */
.jr-logo-mark {
  display: inline-flex;
  width: 42px;
  height: 42px;
  color: #fff;
}
.jr-logo-mark > svg,
.jr-logo-mark > .ico-svg { width: 100%; height: 100%; display: block; }

/* Bandeau révisions */
.review-ico {
  display: inline-flex;
  width: 26px; height: 26px;
  flex: 0 0 auto;
  color: var(--purple);
}
.review-ico > svg { width: 100%; height: 100%; display: block; }

/* Étoiles du résultat (rendues en JS) */
.result-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0;
  letter-spacing: normal;
}
.result-stars .ico { width: 40px; height: 40px; }
.result-stars .ico.off { opacity: .28; filter: grayscale(1); }

/* Médaille "nouvelle médaille débloquée" */
.medal-emoji {
  display: inline-flex;
  width: 34px; height: 34px;
  flex: 0 0 auto;
}
.medal-emoji > svg { width: 100%; height: 100%; display: block; }

/* En-tête de la planche à dessin */
.draw-view-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.draw-view-emoji svg { width: 70px; height: 70px; display: block; }

/* ============ AVATARS SVG ============ */
.profile-avatar { overflow: hidden; font-size: 0; }
.avatar-svg {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.avatar-svg > svg,
.avatar-svg > .av-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
/* Grille de choix d'avatar */
.avatar-opt { font-size: 0; overflow: hidden; padding: 4px; }
.avatar-opt .avatar-svg > svg { border-radius: 12px; }

/* ============ ICÔNES DE MATIÈRES ============ */
.subject-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  font-size: 0;
}
.subject-ico > svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
}
/* Pastille de matière dans l'en-tête du quiz */
.q-subject {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.q-subject .subject-ico {
  width: 26px;
  height: 26px;
  margin: 0;
}

/* ---- Espace admin : année scolaire de référence (2026-2027) ---- */
.admin-year {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 210, 63, .16);
  border: 2px solid rgba(255, 210, 63, .45);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}
.admin-year .ico { flex: 0 0 auto; margin-top: 1px; }
.admin-year b { font-weight: 900; }

/* Texte officiel de référence, par matière */
.alr-ref {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  opacity: .85;
  white-space: nowrap;
}
/* Matière régie par les nouveaux programmes applicables au CM2 cette année */
.alr-ref-new {
  background: rgba(46, 196, 182, .3);
  border: 1px solid rgba(46, 196, 182, .55);
  opacity: 1;
}

/* Référentiel officiel du niveau scolaire sélectionné (CP..CM2 / ULIS) */
.alr-official {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border-left: 3px solid rgba(255, 255, 255, .45);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}
.alr-official b { font-weight: 900; color: var(--yellow); }
.alr-official span { display: block; margin-top: 3px; opacity: .8; font-weight: 600; }

/* ---------- Cycle 2 : « Questionner le monde » ---------- */
/* Au cycle 2 (CP/CE1/CE2), histoire / géo / sciences ne sont pas des matières
   distinctes : on garde la carte lisible pour l'enfant, mais on signale
   le cadre officiel réel. */
.subject-cycle-note {
  display: inline-block;
  margin-top: 5px;
  background: #e8f7f5;
  color: #178378;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* ---------- Mode ULIS : cochable EN PLUS du niveau ---------- */
/* ULIS n'est pas un niveau scolaire mais un dispositif : l'enseignant
   choisit un niveau de référence (CP..CM2) PUIS coche l'adaptation. */
.alr-adapt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 2px dashed rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.alr-adapt:active { transform: scale(.985); }
.alr-adapt.on {
  background: rgba(255, 93, 177, .22);
  border-style: solid;
  border-color: rgba(255, 93, 177, .6);
}
.alr-adapt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .15);
  cursor: pointer;
  position: relative;
}
.alr-adapt input[type="checkbox"]:checked {
  background: var(--yellow);
  border-color: #fff;
}
.alr-adapt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #4a3400;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.alr-adapt b { font-weight: 900; font-size: 13.5px; }
.alr-adapt em {
  flex: 1 1 100%;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  opacity: .8;
}

/* ---------- Attendu officiel visé par la question ---------- */
.q-text-main { display: block; }
.q-attendu {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  background: #f6f3ff;
  border-left: 3px solid var(--purple);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #6c5b9e;
}

/* ---------- Tableau de bord admin (par élève) ---------- */
.dj-msg{
  border-radius:16px; padding:14px 16px; margin:4px 0 14px;
  background:#f4f1ff; border:1px solid #e2daff;
}
.dj-msg.dj-good{ background:#eefaf1; border-color:#c9ecd5; }
.dj-msg.dj-bad { background:#fff1f0; border-color:#ffd4d0; }
.dj-msg.dj-ok  { background:#f4f1ff; border-color:#e2daff; }
.dj-head{ display:flex; align-items:center; gap:8px; font-size:.9rem; margin-bottom:6px; }
.dj-text{ margin:0; font-size:.92rem; line-height:1.5; color:#3a3350; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.kpi{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:1px solid #ece8f6; border-radius:14px; padding:10px 4px;
}
.kpi-val{ font-size:1.25rem; font-weight:800; color:var(--purple,#6c4bd8); }
.kpi-label{ font-size:.68rem; opacity:.7; text-align:center; }

.dash-title{ font-size:.95rem; margin:18px 0 10px; color:#3a3350; }

.dash-row{
  background:#fff; border:1px solid #ece8f6; border-left:4px solid #cfc6ea;
  border-radius:14px; padding:12px 14px; margin-bottom:10px;
}
.dash-row.dash-good{ border-left-color:#49c07a; }
.dash-row.dash-bad { border-left-color:#f2685e; }
.dash-row.dash-ok  { border-left-color:#f5b544; }
.dash-row-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.dash-subj{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; }
.dash-lvl{ font-size:.72rem; background:#f2eeff; color:#6c4bd8; padding:3px 9px; border-radius:999px; font-weight:700; }

.bar{ height:9px; background:#f0edf8; border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background:#cfc6ea; transition:width .4s ease; }
.bar-fill.bar-good{ background:linear-gradient(90deg,#49c07a,#7ad89b); }
.bar-fill.bar-bad { background:linear-gradient(90deg,#f2685e,#ff9b92); }
.bar-fill.bar-ok  { background:linear-gradient(90deg,#f5b544,#ffd280); }

.dash-meta{ display:flex; flex-wrap:wrap; gap:10px; font-size:.72rem; opacity:.75; margin-top:7px; }
.dash-advice{ margin:8px 0 0; font-size:.82rem; line-height:1.45; color:#4a4360; }
.dash-weak{ margin:6px 0 0; font-size:.75rem; color:#c0483f; display:flex; align-items:center; gap:5px; }

.dash-reco{
  display:inline-block; margin-top:9px; font-size:.72rem; font-weight:800;
  padding:5px 11px; border-radius:999px; background:#f0edf8; color:#5a5175;
}
.dash-reco-up, .dash-reco-remove_ulis{ background:#e3f7ea; color:#1f7a45; }
.dash-reco-down, .dash-reco-add_ulis { background:#ffe9e7; color:#b03b32; }

.dash-medals{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.dash-medal{
  display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700;
  background:#fff6dd; border:1px solid #f5e2ab; color:#8a6a12;
  padding:5px 10px; border-radius:999px;
}
.dash-medal-off{ background:#f6f5fa; border-color:#e8e5f0; color:#8b849c; font-weight:600; }

/* ============================================================
   COMPTES PROF / PARENT
   Chaque adulte a son espace cloisonné avec son code d'accès.
   ============================================================ */

.acc-hint{
  text-align:center; font-size:.82rem; opacity:.85;
  margin:-6px 0 16px; line-height:1.4;
}

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

.account-card{
  background:#fff; border-radius:22px; padding:18px 12px 15px;
  text-align:center; box-shadow:0 6px 0 rgba(0,0,0,.15);
  cursor:pointer; transition:transform .15s ease;
  border-bottom:6px solid var(--purple);
}
.account-card:active{ transform:scale(.94); }
.account-card:nth-child(2n){ border-bottom-color:var(--pink); }

.acc-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#f3ecff,#ffe9f5);
  color:var(--purple);
}
.acc-badge .ico{ width:28px; height:28px; }
.acc-badge.big{ width:86px; height:86px; }
.acc-badge.big .ico{ width:42px; height:42px; }

.acc-name{ font-weight:900; font-size:16px; color:#3b2a63; margin-top:8px; }
.acc-meta{ font-size:11.5px; color:#8b7fb0; font-weight:700; margin-top:3px; }

/* --- Écran connexion --- */
.acc-login-box{
  background:#fff; border-radius:26px; margin:14px 0;
  padding:26px 20px 22px; text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.13);
}
.acc-login-name{
  font-weight:900; font-size:20px; color:#3b2a63; margin:10px 0 18px;
}
.acc-login-box .np-label{ color:#6b6284; text-align:left; }
.acc-login-box .np-input{ margin-bottom:10px; }

/* --- Choix du rôle (cartes) --- */
.acc-role-row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px;
}
.acc-role{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:rgba(255,255,255,.16); color:#fff;
  border:2px solid rgba(255,255,255,.3); border-radius:20px;
  padding:16px 10px 14px;
  font-family:inherit; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  -webkit-appearance:none; appearance:none;
}
.acc-role b{ font-size:15px; font-weight:900; }
.acc-role em{
  font-style:normal; font-size:10.5px; font-weight:700;
  line-height:1.35; opacity:.8;
}
.acc-role-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff;
  transition:background .15s ease, color .15s ease;
}
.acc-role-ico .ico{ width:24px; height:24px; }
.acc-role:active{ transform:scale(.95); }
.acc-role.selected{
  background:#fff; color:#3b2a63;
  border-color:#fff; box-shadow:0 6px 0 rgba(0,0,0,.16);
  transform:translateY(-2px);
}
.acc-role.selected em{ opacity:.62; }
.acc-role.selected .acc-role-ico{
  background:linear-gradient(135deg,var(--purple),var(--pink)); color:#fff;
}

/* ============================================================
   TUTO / AIDE
   ============================================================ */
.help-sheet{ max-height:88vh; }

.help-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:#f2eeff; border-radius:14px; padding:5px; margin-bottom:16px;
}
.help-tab{
  border:none; background:transparent; color:#6c5b9e;
  font-family:inherit; font-weight:800; font-size:13.5px;
  padding:10px 6px; border-radius:10px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.help-tab.selected{
  background:#fff; color:var(--purple);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.help-pane{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }

.help-step{
  display:flex; align-items:flex-start; gap:12px;
  background:#f8f6ff; border-radius:16px; padding:13px 14px;
}
.help-num{
  flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff; font-weight:900; font-size:14px;
}
.help-txt{ flex:1; display:flex; flex-direction:column; gap:3px; }
.help-txt b{ font-size:14.5px; font-weight:900; color:#3b2a63; }
.help-txt em{
  font-style:normal; font-size:12.5px; font-weight:600;
  line-height:1.5; color:#6b6284;
}
.help-txt em .ico{ width:1em; height:1em; vertical-align:-.15em; color:var(--purple); }
.help-txt u{ text-decoration-color:var(--pink); text-underline-offset:2px; }

.help-note{
  display:flex; align-items:flex-start; gap:9px;
  background:#eefaf1; border:1px solid #c9ecd5; border-radius:14px;
  padding:11px 13px; margin-top:2px;
  font-size:12px; font-weight:700; line-height:1.45; color:#1f7a45;
}
.help-note .ico{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; }

/* --- Bandeau compte connecté (écran élèves) --- */
.account-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 14px; padding:10px 14px;
  background:rgba(255,255,255,.16); border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
}
.account-bar-name{
  font-weight:800; font-size:.85rem; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.btn-mini.ghost{
  background:rgba(255,255,255,.22); color:#fff;
  display:inline-flex; align-items:center; gap:5px;
}
.btn-mini.ghost .ico{ width:13px; height:13px; }

/* ---------- SPLASH DE DÉMARRAGE (PWA) ----------
   Sobre et posé : halo qui s'ouvre, logo qui se pose, titre en fondu,
   fine barre de chargement. Pas d'effet qui gigote. */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(165deg, #5f34e0 0%, #8f4df0 50%, #d94f9a 100%);
  transition:opacity .5s ease, visibility .5s ease;
}
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:0 28px;
}

/* Halo + logo */
.splash-rocket{
  position:relative;
  width:104px; height:104px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:0;
  animation:splashMark .9s cubic-bezier(.16,.84,.30,1) .05s forwards;
}
/* anneau qui s'ouvre autour du logo */
.splash-rocket::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  opacity:0;
  animation:splashRing 1.5s cubic-bezier(.16,.84,.30,1) .35s forwards;
}
.splash-rocket svg{
  display:block; width:58px; height:58px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
/* plus de flamme qui vibre */
.splash-flame{ display:none; }

.splash-title{
  margin-top:26px;
  font-size:clamp(20px, 6.2vw, 27px); font-weight:900; letter-spacing:.2px; color:#fff;
  white-space:nowrap;
  opacity:0;
  animation:splashRise .75s cubic-bezier(.16,.84,.30,1) .4s forwards;
}
.splash-title span{ color:var(--yellow); }

.splash-sub{
  margin-top:8px;
  font-size:13px; font-weight:600; letter-spacing:.1px;
  color:rgba(255,255,255,.78);
  max-width:270px; line-height:1.45;
  opacity:0;
  animation:splashRise .75s cubic-bezier(.16,.84,.30,1) .58s forwards;
}

/* Fine barre de chargement (remplace les points qui rebondissent) */
.splash-dots{
  margin-top:30px;
  width:104px; height:2.5px; border-radius:999px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
  opacity:0;
  animation:splashFade .4s ease .75s forwards;
}
.splash-dots i{
  display:block; width:100%; height:100%; border-radius:999px;
  background:rgba(255,255,255,.95);
  transform:scaleX(0); transform-origin:left center;
  animation:splashBar 1.25s cubic-bezier(.42,0,.25,1) .75s forwards;
}
.splash-dots i:nth-child(2),
.splash-dots i:nth-child(3){ display:none; }

@keyframes splashMark{
  0%   { opacity:0; transform:scale(.72); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes splashRing{
  0%   { opacity:0; transform:scale(.82); }
  45%  { opacity:.85; }
  100% { opacity:0; transform:scale(1.28); }
}
@keyframes splashRise{
  0%   { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes splashBar{
  0%   { transform:scaleX(0); }
  100% { transform:scaleX(1); }
}
@keyframes splashFade{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .splash-rocket, .splash-rocket::after, .splash-dots i{ animation:none; }
  .splash-rocket, .splash-title, .splash-sub, .splash-dots{ opacity:1; animation:none; }
  .splash-dots i{ transform:scaleX(1); }
}

/* ============================================================
   GUIDE COMPLET (3e onglet de l'aide)
   Document long, lisible dans l'app — ton sobre et sérieux.
   ============================================================ */
.help-tabs-3{ grid-template-columns:1fr 1fr 1.25fr; }
.help-tabs-3 .help-tab{ font-size:12.5px; padding:10px 4px; }

.guide-doc{
  color:#3f3a55;
  font-size:13px;
  line-height:1.6;
  margin-bottom:16px;
}
.guide-doc p{ margin:0 0 9px; }
.guide-doc b{ color:#2f2848; font-weight:800; }
.guide-doc u{ text-decoration-color:var(--pink); text-underline-offset:2px; }

.guide-lead{
  font-size:13.5px; font-weight:700; color:#5a5175;
  background:#f6f3ff; border-radius:14px;
  padding:12px 14px; margin-bottom:6px !important;
}

.guide-h{
  font-size:14.5px; font-weight:900; color:var(--purple);
  margin:22px 0 9px; padding-bottom:6px;
  border-bottom:2px solid #ede8fb;
}
.guide-h:first-of-type{ margin-top:16px; }

.guide-sub{
  font-weight:800 !important; color:#4a4360 !important;
  margin-top:13px !important; margin-bottom:7px !important;
}

.guide-ul{ margin:0 0 11px; padding-left:19px; }
.guide-ul li{ margin-bottom:6px; }

.guide-q{
  font-weight:800 !important; color:#2f2848 !important;
  margin-top:12px !important; margin-bottom:3px !important;
}

.guide-callout{
  background:#f4f1ff; border:1px solid #e2daff;
  border-left:4px solid var(--purple);
  border-radius:12px; padding:11px 13px;
  margin:11px 0 13px;
  font-size:12.5px; line-height:1.55;
}
.guide-callout-key{
  background:#fff6e8; border-color:#f6dfb8;
  border-left-color:#f5a623;
}

.guide-table{
  width:100%; border-collapse:collapse;
  margin:8px 0 14px;
  font-size:12px;
  border-radius:10px; overflow:hidden;
}
.guide-table th{
  background:#f2eeff; color:#5a4b8f;
  font-weight:900; text-align:left;
  padding:8px 10px;
  border-bottom:1px solid #e4dcf8;
}
.guide-table td{
  padding:7px 10px;
  border-bottom:1px solid #f0edf8;
  vertical-align:top;
}
.guide-table tr:last-child td{ border-bottom:none; }
.guide-table td:first-child{ font-weight:700; color:#3f3a55; }

/* ---------- Bouton "Lire le guide" sur l'écran Qui êtes-vous ? ---------- */
.btn-ghost-help{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:14px;
  padding:13px 16px;
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:16px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.btn-ghost-help:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.7);
}
.btn-ghost-help:active{ transform:scale(.985); }
.btn-ghost-help .ico{ width:19px; height:19px; }
.btn-ghost-help .ico svg{ width:100%; height:100%; }


/* ---------- Pied de page « Propulsé par Dumble » (dans le flux) ----------
   Placé en bas de chaque écran principal. margin-top:auto le pousse en bas
   quand le contenu est court, sans jamais recouvrir le contenu. */
.app-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 30px;
  padding-bottom: 8px;
  text-align: center;
  opacity: .7;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  user-select: none;
}
.app-footer-logo{
  height: 20px;
  width: auto;
  display: block;
}
@media (max-height: 600px){
  .app-footer{ display: none; }
}

/* ---------- RGPD : information + consentement ---------- */
.rgpd-box{
  margin: 18px 0 4px;
  padding: 14px 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
}
.rgpd-title{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; margin-bottom: 8px;
}
.rgpd-title .ico{ width: 15px; height: 15px; }
.rgpd-box p{
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,.86);
  margin-bottom: 7px;
}
.rgpd-box p b{ color: #fff; }
.rgpd-check{
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
}
.rgpd-check input[type="checkbox"]{
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--yellow);
  cursor: pointer;
}
.rgpd-check span{
  font-size: 12.5px; line-height: 1.5;
  color: #fff; font-weight: 600;
}
.rgpd-link{
  display: inline-block; margin-top: 10px;
  font-size: 12px; color: var(--yellow);
  text-decoration: underline; font-weight: 700;
}
/* bouton inactif tant que le consentement n'est pas coché */
.btn-primary:disabled{
  opacity: .42;
  filter: grayscale(.5);
  cursor: not-allowed;
}

/* ---------- RGPD : actions dans l'espace prof ---------- */
.admin-rgpd{
  margin-top: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(108,59,255,.16);
}
.admin-rgpd .rgpd-title{ color: #3b2a6b; }
.admin-rgpd p{ color: #5b5474; }
.admin-rgpd p b{ color: #2b2342; }
.rgpd-actions{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
}
.btn-sm{
  flex: 1 1 auto;
  min-width: 140px;
  padding: 11px 14px;
  font-size: 13.5px; font-weight: 800;
  border: none; border-radius: 12px;
  cursor: pointer;
}
.btn-danger{
  background: #fdecec;
  color: #c0322b;
  border: 1px solid rgba(192,50,43,.22);
}
.btn-danger:active, .btn-sm:active{ transform: scale(.96); }

/* ---------- RESPIRATION MOBILE ---------- */
@media (max-width: 480px){
  .screen{
    padding: calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 26px);
  }
  .jr-brand{ margin: 16px 0 26px; }
  .tagline{ margin-top: 6px; line-height: 1.45; }
  .section-title{ margin: 30px 0 16px; }
  .acc-hint{ margin: -2px 0 22px; }
  .accounts-grid{ gap: 16px; margin-bottom: 24px; }
  .btn-block{ margin-top: 10px; }
  .btn-ghost-help{ margin-top: 16px; }
  .app-footer{ padding-top: 36px; padding-bottom: 10px; }
}