*{box-sizing:border-box} html,body{margin:0;overflow-x:hidden} body{font-family:'Segoe UI',Roboto,Arial,sans-serif;text-align:center;padding:20px 10px;background:#f2f4f8;color:#333} main{max-width:820px;margin:auto} h1{font-size:2.2em;margin:8px 0 14px;color:#1565c0} h1:before{content:'🎵 '} h2,h3{color:#2c3e50;margin:8px 0 10px}.section{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);padding:16px;min-height:auto}.screen{display:none}.screen.show{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.intro{font-size:18px;line-height:1.5}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:680px;margin:18px auto}button{padding:12px 22px;margin:4px;font-size:17px;background:#4CAF50;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:.2s}button:hover{filter:brightness(.95);transform:translateY(-1px)}button.selected{background:#1565c0}.red{background:#f44336}.small{font-size:14px;padding:8px 12px;background:#fff;color:#1565c0;box-shadow:0 1px 4px rgba(0,0,0,.18)}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.tabs4{grid-template-columns:repeat(4,1fr)}.tabs button{font-size:15px;padding:10px}.tutorial-card,.card,.result-card{border:1px solid #e3e7ed;background:#fbfcff;border-radius:14px;padding:14px;margin:10px auto;max-width:720px}.rule{font-size:20px;font-weight:800;color:#1565c0;margin:8px}.example{background:#e8f5e9;border:2px solid #4CAF50;border-radius:12px;padding:12px;margin:12px auto;text-align:left;line-height:1.55}.memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.memo{background:#fff;border:1px solid #dfe6ee;border-radius:12px;padding:10px}.badge{display:inline-block;background:#e3f2fd;color:#1565c0;border-radius:999px;padding:6px 12px;font-weight:700;margin:4px}.question{font-size:22px;font-weight:750;margin:10px 0}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:12px auto}.answers button{width:100%;background:#4CAF50}.answers button.wrong{background:#e53935}.answers button.good{background:#1565c0}.feedback{min-height:80px;font-size:18px;line-height:1.45;font-weight:650}.ok{color:#2e7d32}.ko{color:#c62828}.hidden{display:none!important}.staff-image-box{width:min(100%,620px);min-height:175px;margin:8px auto 4px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px 12px;overflow:hidden}.staff-image-row{display:flex;align-items:center;justify-content:center;gap:0}.staff-image-row img{display:block;height:175px;width:auto;flex:0 0 auto}.recap-table .staff-image-box{min-height:76px;padding:2px 4px}.recap-table .staff-image-row img{height:76px}.armure-cell{min-width:190px}.armure-cell{width:190px;background:#fff}.table-title{margin-top:20px}.exception-box{background:#fff8e1;border:3px solid #ff9800;border-radius:14px;padding:14px;margin:10px auto 14px;line-height:1.6;font-size:18px}.exception-box span{font-weight:900;color:#1565c0}.mini-note{font-size:15px;color:#465668}.quick-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.plus-memo{max-width:560px;margin:0 auto 14px}.key-label{font-size:13px;fill:#333}.acc{fill:#d32f2f;font-weight:bold;font-family:Georgia,serif}#progress{font-weight:800;color:#1565c0}#scoreBig{font-size:48px;font-weight:900;color:#1565c0}.table{width:100%;border-collapse:collapse;margin-top:8px}.table td,.table th{border:1px solid #dde3ea;padding:8px}.table th{background:#eef4ff}@media(max-width:650px){.mode-grid,.answers,.memo-grid,.tabs,.tabs4{grid-template-columns:1fr}.section{padding:12px}button{font-size:16px}.question{font-size:20px}}

.feedback-help{font-size:22px;line-height:1.45;background:#fff8e1;border:2px solid #ff9800;border-radius:12px;padding:10px;margin:8px auto;max-width:620px}
.feedback-help small{font-size:16px;color:#555}
#game .staff-image-box{min-height:245px}
#game .staff-image-row img{height:235px}
@media(max-width:650px){#game .staff-image-box{min-height:195px}#game .staff-image-row img{height:185px}.staff-image-row img{height:145px}.staff-image-box{min-height:150px}}
/* Accueil organisé par familles */
.home-groups{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:720px;
  margin:18px auto 0;
}
.home-block{
  background:#f8fbff;
  border:1px solid #dde7f2;
  border-radius:16px;
  padding:14px;
}
.home-block h3{
  margin:0 0 10px;
  color:#1565c0;
  font-size:20px;
}
.home-block .mode-grid{
  margin:0 auto;
}
.learn-block button,
.challenge-block button{
  width:min(100%,360px);
}
@media(max-width:650px){
  .home-groups{gap:14px}
  .home-block{padding:12px}
  .home-block h3{font-size:18px}
}
@media(max-width:650px){
  body{
    padding:8px 4px;
  }

  .section{
    min-height:auto;
    padding:10px;
  }

  .home-groups{
    gap:12px;
  }

  .home-block{
    padding:10px;
  }
}