:root{
  --papier:#FBF7EE;
  --encre:#28324A;
  --craie:#FFFFFF;
  --addition:#4CA98E;
  --soustraction:#E8804A;
  --multiplication:#7A6BD8;
  --division:#D8567A;
  --masses:#3C8DBC;
  --temps:#C75B39;
  --jeu:#6A4C8C;
  --jaune:#F4C84A;
  --ombre:rgba(40,50,74,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.5;
  min-height:100vh;
  background-image:radial-gradient(var(--ombre) 1px,transparent 1px);
  background-size:26px 26px;
}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 60px}

a.op-link{
  text-decoration:none;
  color:inherit;
}

/* En-tête */
header{text-align:center;margin:14px 0 26px}
header h1{
  font-size:clamp(1.9rem,7vw,2.8rem);
  letter-spacing:-.5px;
}
header h1 .pop{
  display:inline-block;color:var(--jaune);
  text-shadow:2px 2px 0 var(--encre);
}
header p{font-size:1.05rem;color:#6a7388;margin-top:4px}

/* Menu des opérations */
.menu{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;margin-bottom:10px;
}
.op-card{
  border:none;cursor:pointer;color:var(--craie);
  border-radius:22px;padding:22px 16px;text-align:left;
  font-family:inherit;box-shadow:0 6px 0 var(--ombre);
  transition:transform .12s,box-shadow .12s;
  display:flex;align-items:center;gap:14px;width:100%;
}
.op-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ombre)}
.op-card:active{transform:translateY(2px);box-shadow:0 3px 0 var(--ombre)}
.op-card .signe{
  font-size:2.6rem;font-weight:bold;line-height:1;
  width:64px;height:64px;flex:0 0 64px;
  background:rgba(255,255,255,.22);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
}
.op-card .nom{font-size:1.35rem;font-weight:bold}
.op-card .sous{font-size:.85rem;opacity:.9}
.add{background:var(--addition)}
.sou{background:var(--soustraction)}
.mul{background:var(--multiplication)}
.div{background:var(--division)}
.mas{background:var(--masses)}
.tps{background:var(--temps)}
.jeu{background:var(--jeu)}

/* Vue leçon */
.ecran{display:none}
.ecran.actif{display:block;animation:apparait .25s ease}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.barre{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.retour{
  border:none;background:var(--encre);color:var(--craie);
  font-family:inherit;font-size:1rem;font-weight:bold;cursor:pointer;
  padding:10px 16px;border-radius:14px;box-shadow:0 4px 0 var(--ombre);
  text-decoration:none;display:inline-block;
}
.retour:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ombre)}
.titre-op{font-size:1.6rem;font-weight:bold}

.carte{
  background:var(--craie);border-radius:22px;padding:22px;
  margin-bottom:18px;box-shadow:0 5px 0 var(--ombre);
  border:3px solid var(--encre);
}
.etiquette{
  display:inline-block;font-size:.8rem;font-weight:bold;
  text-transform:uppercase;letter-spacing:1px;color:var(--craie);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.carte h2{font-size:1.3rem;margin-bottom:10px}
.carte p{margin-bottom:10px}

.exemple-calcul{
  font-size:2rem;font-weight:bold;text-align:center;
  padding:16px;border-radius:16px;background:var(--papier);
  margin:14px 0;letter-spacing:1px;
}
.schema{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:14px 0;
}
.jeton{
  width:26px;height:26px;border-radius:50%;
  background:var(--jaune);border:2px solid var(--encre);
}
.jeton.vide{background:transparent;opacity:.35}
.plus-petit{font-size:.95rem;color:#6a7388}
.table-masse{
  width:100%;border-collapse:collapse;margin:14px 0;text-align:center;
  font-size:1rem;
}
.table-masse th,.table-masse td{
  border:2px solid var(--encre);padding:8px 6px;
}
.table-masse th{background:var(--masses);color:var(--craie);font-size:.9rem}
.table-masse td{background:var(--papier);font-weight:bold}
@media (max-width:480px){
  .table-masse{font-size:.78rem}
  .table-masse th,.table-masse td{padding:6px 3px}
}

/* Exercices */
.exo-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.score{font-weight:bold}
.progression{
  height:12px;background:var(--papier);border-radius:999px;
  overflow:hidden;margin-bottom:18px;border:2px solid var(--encre);
}
.progression > div{height:100%;width:0;background:var(--jaune);transition:width .3s}

.question{
  font-size:2.6rem;font-weight:bold;text-align:center;margin:10px 0 20px;
  letter-spacing:2px;
}
.reponse-zone{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
#champ-reponse{
  font-family:inherit;font-size:1.8rem;font-weight:bold;text-align:center;
  width:130px;padding:10px;border-radius:14px;border:3px solid var(--encre);
  background:var(--papier);color:var(--encre);
}
#champ-reponse:focus{outline:3px solid var(--jaune);outline-offset:2px}
.btn-valider{
  border:none;cursor:pointer;font-family:inherit;font-size:1.15rem;font-weight:bold;
  color:var(--craie);background:var(--addition);padding:13px 24px;border-radius:16px;
  box-shadow:0 4px 0 var(--ombre);
}
.btn-valider:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ombre)}

.verdict{text-align:center;font-size:1.25rem;font-weight:bold;margin-top:18px;min-height:34px}
.verdict.bon{color:var(--addition)}
.verdict.faux{color:var(--division)}

.clavier{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:280px;margin:18px auto 0;
}
.clavier button{
  font-family:inherit;font-size:1.4rem;font-weight:bold;cursor:pointer;
  padding:14px 0;border-radius:14px;border:3px solid var(--encre);
  background:var(--craie);color:var(--encre);box-shadow:0 3px 0 var(--ombre);
}
.clavier button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ombre)}
.clavier .efface{background:var(--soustraction);color:var(--craie);border-color:var(--soustraction)}

/* Bilan */
.bilan{text-align:center;padding:30px 20px}
.bilan .medaille{font-size:4.5rem;margin-bottom:8px}
.bilan h2{font-size:1.8rem;margin-bottom:6px}
.bilan .gros-score{font-size:2.4rem;font-weight:bold;color:var(--multiplication);margin:6px 0 16px}
.btn-rejouer{
  border:none;cursor:pointer;font-family:inherit;font-size:1.1rem;font-weight:bold;
  color:var(--craie);background:var(--multiplication);padding:14px 26px;border-radius:16px;
  box-shadow:0 4px 0 var(--ombre);margin:6px;text-decoration:none;display:inline-block;
}
.btn-rejouer:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ombre)}

.footer-note{text-align:center;color:#9aa1b2;font-size:.8rem;margin-top:30px}

/* ----- La Maison Mystère ----- */
.jeu-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:bold}
.clefs{font-size:1.1rem}
.scene{
  position:relative;height:180px;border-radius:16px;overflow:hidden;
  background:linear-gradient(#3a2d4d,#5a4a6a);
  border:3px solid #2c2238;margin-bottom:14px;
}
.scene .sol{
  position:absolute;left:0;right:0;bottom:0;height:46px;
  background:repeating-linear-gradient(90deg,#4a3a2c 0 28px,#43342780 28px 56px);
  border-top:3px solid #2c2238;
}
.scene .porte{
  position:absolute;right:18px;bottom:46px;width:74px;height:108px;
  background:linear-gradient(#8a5a36,#6e4527);
  border:4px solid #4a2e18;border-bottom:none;border-radius:8px 8px 0 0;
  box-shadow:inset 0 0 0 6px #7a4d2c;
  transition:transform .5s ease, opacity .5s ease;transform-origin:left bottom;
}
.scene .porte.ouverte{transform:perspective(300px) rotateY(-78deg)}
.scene .poignee{
  position:absolute;left:10px;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--jaune);box-shadow:0 0 0 2px #4a2e18;
}
.scene .serrure{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-size:1rem}
.scene .porte.ouverte .serrure{opacity:0}
.scene .heros{
  position:absolute;bottom:44px;left:14px;font-size:2.6rem;line-height:1;
  transition:left 1.6s ease-in-out;
}
.scene .heros.marche{animation:dodine .35s ease-in-out infinite}
@keyframes dodine{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.scene.victoire{background:linear-gradient(#2e5d4a,#3f7d63)}

.jeu-consigne{text-align:center;font-weight:bold;margin-bottom:14px;min-height:24px}
#jeu-champ{
  font-family:inherit;font-size:1.8rem;font-weight:bold;text-align:center;
  width:130px;padding:10px;border-radius:14px;border:3px solid var(--encre);
  background:var(--papier);color:var(--encre);
}
#jeu-champ:focus{outline:3px solid var(--jaune);outline-offset:2px}

@media (max-width:480px){
  .menu{grid-template-columns:1fr}
  .question{font-size:2.1rem}
}