*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6fb;color:#1f2937;min-height:100vh}
button,input{font:inherit}.app{min-height:100vh}.topbar{height:70px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.brand{font-size:22px;font-weight:800}.user{font-weight:600;color:#4b5563;display:flex;align-items:center;gap:8px}.niveau-pill{background:#ffedd5;color:#c2410c;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:800}.container{max-width:1100px;margin:0 auto;padding:35px 24px}
.center{text-align:center}.hero{max-width:650px;margin:8vh auto 0;background:#fff;padding:45px;border-radius:22px;box-shadow:0 8px 30px #00000012}.hero h1{font-size:38px;margin:0 0 12px}.hero p{color:#6b7280;font-size:18px}
.form{max-width:430px;margin:30px auto;text-align:left}.field{margin-bottom:18px}.field label{display:block;font-weight:700;margin-bottom:7px}.field input{width:100%;padding:14px 16px;border:1px solid #d1d5db;border-radius:10px;background:#fff}.primary,.secondary,.danger{border:0;border-radius:10px;padding:13px 22px;font-weight:700;cursor:pointer}.primary{background:#2563eb;color:#fff}.primary:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#e5e7eb}.danger{background:#fee2e2;color:#991b1b}.linkbtn{background:none;border:0;color:#2563eb;cursor:pointer;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;margin-top:28px}.book{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px #00000010;border:2px solid transparent;transition:.15s}.book.available{cursor:pointer}.book.available:hover{transform:translateY(-3px);box-shadow:0 9px 25px #00000018}.book.done{opacity:.72}.cover{width:100%;aspect-ratio:3/4;display:block;background:#e5e7eb;object-fit:cover}.bookbody{padding:16px}.booktitle{font-size:19px;font-weight:800}.author{color:#6b7280;margin-top:5px}.status{margin-top:12px;font-weight:800}.done .status{color:#15803d}.available .status{color:#2563eb}
.quiz{max-width:850px;margin:25px auto}.quizhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#4b5563;font-weight:700}.podcast-recall{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:12px 16px;margin-bottom:18px;box-shadow:0 4px 14px #00000010}.podcast-recall img{width:60px;height:60px;object-fit:cover;border-radius:10px;flex-shrink:0}.podcast-recall .info{flex:1;min-width:0}.podcast-recall .info strong{display:block;font-size:15px}.podcast-recall .info .hint{color:#6b7280;font-size:13px}.podcast-recall audio{width:100%;height:32px;margin-top:6px;display:block}.progress{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin-bottom:28px}.progress>div{height:100%;background:#2563eb}.questioncard{background:#fff;border-radius:20px;padding:34px;box-shadow:0 8px 28px #00000012}.question{font-size:28px;line-height:1.3;margin:0 0 28px}.answers{display:grid;gap:13px}.answer{width:100%;text-align:left;border:2px solid #e5e7eb;background:#fff;padding:16px 18px;border-radius:12px;cursor:pointer}.answer:hover{border-color:#93c5fd}.answer.selected{border-color:#2563eb;background:#eff6ff}.letter{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;margin-right:12px;font-weight:800;color:#fff;background:#6b7280;}.letter.a{background:#e74c3c; /* Rouge */}.letter.b{background:#448aff; /* Bleu */}.letter.c{background:#00c853; /* Vert */}.answer.selected{border-color:#2563eb;background:#eff6ff;}.answer.selected .letter{box-shadow:0 0 0 3px rgba(37,99,235,.25);}.actions{text-align:right;margin-top:24px}
.result{max-width:650px;margin:9vh auto;background:#fff;border-radius:22px;padding:45px;text-align:center;box-shadow:0 8px 30px #00000012}.score{font-size:72px;font-weight:900;margin:20px 0}.stars{font-size:28px;letter-spacing:4px}
.admin table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}.admin th,.admin td{padding:13px 12px;border-bottom:1px solid #e5e7eb;text-align:center}.admin th:first-child,.admin td:first-child{text-align:left}.admin th{background:#f3f4f6}.clickable{cursor:pointer;color:#2563eb;font-weight:800}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:25px}.stat{background:#fff;border-radius:14px;padding:18px;text-align:center}.stat strong{display:block;font-size:28px}.notice{padding:14px 16px;border-radius:10px;background:#fff7ed;color:#9a3412;margin:15px 0}.error{padding:14px 16px;border-radius:10px;background:#fee2e2;color:#991b1b;margin:10px 0}.muted{color:#6b7280}.detail{background:#fff;border-radius:14px;padding:22px;margin-top:20px}.ok{color:#15803d}.ko{color:#b91c1c}
@media(max-width:700px){.topbar{padding:0 15px}.container{padding:22px 15px}.hero{padding:30px 20px}.hero h1{font-size:30px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.question{font-size:22px}.questioncard{padding:22px}.stats{grid-template-columns:1fr}.admin{overflow-x:auto}.admin table{min-width:700px}.podcast-recall{padding:10px 12px;gap:10px}.podcast-recall img{width:46px;height:46px}}

/* --- Choix de l'activité --- */
.activity-container{max-width:1000px;text-align:center}.activity-title{margin-bottom:30px}.activity-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:30px 0 28px}.activity-cards.single{grid-template-columns:minmax(0,380px);justify-content:center}.activity-card{border:0;border-radius:22px;background:#fff;padding:34px 28px;box-shadow:0 8px 28px #00000012;cursor:pointer;transition:.15s;min-height:280px}.activity-card:hover{transform:translateY(-4px);box-shadow:0 12px 34px #00000018}.activity-card .activity-icon{font-size:68px;margin-bottom:15px}.activity-card h2{margin:0 0 10px;font-size:28px}.activity-card p{color:#6b7280;font-size:17px;min-height:44px}.activity-card span{display:inline-block;margin-top:16px;padding:11px 18px;border-radius:10px;background:#2563eb;color:#fff;font-weight:800}.podcast-card span{background:#7c3aed}

/* --- Podcast --- */
.podcast-cards .book.available:hover{border-color:#7c3aed}
.podcast-cards .available .status{color:#7c3aed}

/* --- Thème violet pour les écrans podcast (quiz + résultat) --- */
.podcast-theme .answer:hover{border-color:#c4b5fd}
.podcast-theme .primary{background:#7c3aed}
.podcast-theme .clickable{color:#7c3aed}
.podcast-theme .admin-tabs button.active{background:#7c3aed}
.podcast-theme .linkbtn{color:#7c3aed}

/* --- Boutons neutres (écrans hors thème Lecture/Podcast) --- */
.btn-start{background:#15803d}
.admin-link{color:#991b1b}
.admin-btn{background:#991b1b}
.podcast-theme .progress>div{background:#7c3aed}
.podcast-theme .answer.selected{border-color:#7c3aed;background:#f5f0ff}
.podcast-theme .answer.selected .letter{box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.podcast-intro .primary{background:#7c3aed}
.podcast-intro .linkbtn{color:#7c3aed}.podcast-intro .audio-box{margin:25px auto;width:min(100%,560px);padding:16px;border-radius:14px;background:#f3f4f6}.audio-box audio{width:100%;display:block}.intro-cover{width:140px;height:190px;object-fit:cover;border-radius:10px;display:block;margin:0 auto 18px;box-shadow:0 4px 12px #00000018}

/* --- Navigation / résultats enseignant --- */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.admin{max-width:100%;width:100%;overflow-x:auto}.admin-table-wrap{width:100%;overflow-x:auto}.admin table{width:100%;min-width:max-content}.admin th,.admin td{white-space:nowrap}.admin th:first-child,.admin td:first-child{position:sticky;left:0;z-index:2}.admin td:first-child{background:#fff}.admin th:first-child{background:#f3f4f6}.admin-cover{width:60px;height:80px;object-fit:cover;border-radius:6px;display:block;margin:auto}.score-cell{display:inline-flex;flex-direction:column;align-items:center;gap:3px}.score-cell small{font-weight:400;color:#6b7280}.admin-tabs{display:flex;gap:8px;margin:0 0 22px}.admin-tabs button{border:0;background:#e5e7eb;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer}.admin-tabs button.active{background:#2563eb;color:#fff}.detail-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.result-item{display:flex;align-items:center;gap:10px}.detail-cover{width:45px;height:60px;object-fit:cover;border-radius:5px}

/* --- Responsive --- */
@media(max-width:700px){.activity-cards{grid-template-columns:1fr}.activity-card{min-height:220px}.section-head{align-items:flex-start;flex-direction:column}.detail-head{align-items:flex-start;flex-direction:column}.admin{overflow-x:auto}.admin table{min-width:700px}}

/* --- Badges --- */
.badge-btn{border:0;border-radius:10px;padding:13px 22px;font-weight:700;cursor:pointer;background:#fef3c7;color:#92400e;margin-top:22px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:24px}
.badge-card{background:#fff;border-radius:18px;padding:26px 20px;text-align:center;box-shadow:0 5px 18px #00000010;border:2px solid transparent}
.badge-card.unlocked.blue{border-color:#bfdbfe;background:linear-gradient(#eff6ff,#fff)}
.badge-card.unlocked.violet{border-color:#ddd6fe;background:linear-gradient(#f5f0ff,#fff)}
.badge-card.unlocked.gold{border-color:#fde68a;background:linear-gradient(#fffbeb,#fff)}
.badge-card.locked{opacity:.5;filter:grayscale(1)}
.badge-emoji{font-size:44px;margin-bottom:10px;display:block}
.badge-title{font-weight:800;font-size:16px;margin-bottom:4px}
.badge-desc{font-size:13px;color:#6b7280}
.badge-progress{font-size:12px;color:#9ca3af;margin-top:8px;font-weight:700}

/* --- Animation de déblocage (écran de résultat) --- */
.badge-unlock-wrap{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.badge-toast{display:flex;align-items:center;gap:14px;background:linear-gradient(#fffbeb,#fff7e0);border:1px solid #fde68a;border-radius:14px;padding:12px 18px;text-align:left;opacity:0;animation:badgePop .5s cubic-bezier(.34,1.56,.64,1) both}
.badge-toast-emoji{font-size:32px}
@keyframes badgePop{0%{transform:scale(.3) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:700px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}