:root{
  --rose:#ff6fae; --rose-d:#e84f95;
  --vert:#4cc78a; --vert-d:#2fa96d;
  --jaune:#ffc93c; --jaune-d:#e8ad1f;
  --ink:#3a2a4d; --bg:#faf5ff; --white:#fff;
  --muted:#8a7b9c; --shadow:0 10px 30px rgba(90,60,120,.15);
  --font:"Baloo 2",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);overflow-x:hidden}

.screen{display:none;min-height:100vh;flex-direction:column;align-items:center;padding:24px;animation:fade .3s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.app-title{font-size:1.6rem;color:var(--ink);font-weight:700}
.teacher-link{font-size:1.5rem;text-decoration:none;background:var(--white);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.instruction{font-size:1.6rem;font-weight:600;color:var(--muted);text-align:center;margin:24px 0 28px}
.hl{color:var(--rose-d)}

/* Prénoms */
.names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;width:100%;max-width:900px}
.name-btn{background:var(--white);border:none;border-radius:24px;padding:28px 16px;font-family:var(--font);font-size:1.7rem;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform .12s;text-transform:uppercase;letter-spacing:.02em}
.name-btn:active{transform:scale(.94)}
.name-btn:nth-child(4n+1){color:var(--rose-d)}
.name-btn:nth-child(4n+2){color:var(--vert-d)}
.name-btn:nth-child(4n+3){color:var(--jaune-d)}
.name-btn:nth-child(4n){color:#7a5cd0}
.empty-hint{color:var(--muted);font-size:1.1rem;text-align:center;margin-top:40px;max-width:400px}

/* Cartons */
.cards-grid{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;width:100%;max-width:800px;margin-top:10px}
.card{border:none;border-radius:32px;width:220px;height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;color:var(--white);font-family:var(--font);box-shadow:var(--shadow);transition:transform .12s}
.card:active{transform:scale(.95)}
.card-emoji{font-size:4rem}
.card-label{font-size:1.5rem;font-weight:700;text-align:center;line-height:1.15}
.card-rose{background:linear-gradient(160deg,var(--rose),var(--rose-d))}
.card-vert{background:linear-gradient(160deg,var(--vert),var(--vert-d))}
.card-jaune{background:linear-gradient(160deg,var(--jaune),var(--jaune-d))}

/* Micro */
.record-banner{padding:10px 26px;border-radius:100px;font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:8px}
.record-banner.rose{background:var(--rose-d)}
.record-banner.vert{background:var(--vert-d)}
.record-banner.jaune{background:var(--jaune-d);color:var(--ink)}
.mic-btn{width:180px;height:180px;border-radius:50%;border:none;background:linear-gradient(160deg,#7a5cd0,#5c3cb0);cursor:pointer;box-shadow:0 12px 40px rgba(122,92,208,.4);transition:transform .12s;margin:10px 0}
.mic-btn:active{transform:scale(.93)}
.mic-btn.recording{animation:pulse 1.2s infinite}
.mic-emoji{font-size:5rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,79,149,.6)}70%{box-shadow:0 0 0 30px rgba(232,79,149,0)}100%{box-shadow:0 0 0 0 rgba(232,79,149,0)}}
.mic-status{font-size:1.2rem;color:var(--muted);font-weight:600;margin-bottom:20px;min-height:1.5em}
.transcript-box{background:var(--white);border-radius:24px;padding:24px;width:100%;max-width:640px;min-height:120px;box-shadow:var(--shadow);margin-bottom:20px}
.transcript{font-size:1.5rem;color:var(--ink);line-height:1.5;text-align:center}
.transcript:empty::before{content:"Ta phrase apparaîtra ici…";color:#c8bcd8}

/* Pouce valider */
.thumb-btn{background:linear-gradient(160deg,var(--vert),var(--vert-d));border:none;border-radius:100px;padding:18px 44px;display:flex;align-items:center;gap:14px;font-family:var(--font);font-size:1.6rem;font-weight:700;color:var(--white);cursor:pointer;box-shadow:0 10px 30px rgba(76,199,138,.4);transition:transform .12s}
.thumb-btn:active{transform:scale(.94)}
.thumb-emoji{font-size:2.2rem}

/* Back */
.back-btn{align-self:flex-start;background:var(--white);border:none;border-radius:100px;padding:12px 24px;font-family:var(--font);font-size:1.1rem;font-weight:600;color:var(--muted);cursor:pointer;box-shadow:var(--shadow)}
.back-btn:active{transform:scale(.95)}

/* Done */
.done-box{margin:auto;text-align:center}
.done-emoji{font-size:6rem;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.done-box h2{font-size:3rem;color:var(--vert-d);margin:10px 0}
.done-box p{font-size:1.5rem;color:var(--muted)}

/* ===== ESPACE ENSEIGNANT ===== */
.teacher-wrap{max-width:900px;margin:0 auto;padding:24px}
.login-box{max-width:400px;margin:80px auto;background:var(--white);border-radius:24px;padding:40px;box-shadow:var(--shadow);text-align:center}
.login-box h1{margin-bottom:24px;color:var(--ink)}
.login-box input{width:100%;padding:14px 18px;border:2px solid #eee;border-radius:14px;font-size:1.1rem;font-family:var(--font);margin-bottom:16px}
.login-box input:focus{outline:none;border-color:#7a5cd0}
.btn{background:linear-gradient(160deg,#7a5cd0,#5c3cb0);color:#fff;border:none;border-radius:100px;padding:14px 30px;font-family:var(--font);font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn-sm{padding:9px 18px;font-size:.95rem}
.btn-ghost{background:var(--white);color:var(--muted);box-shadow:var(--shadow)}
.btn-danger{background:linear-gradient(160deg,#ff6b6b,#e84f4f)}
.err{color:#e84f4f;font-weight:600;margin-top:8px}

.teacher-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:12px}
.teacher-header h1{color:var(--ink);font-size:1.8rem}
.teacher-actions{display:flex;gap:10px;flex-wrap:wrap}
.panel{background:var(--white);border-radius:20px;padding:24px;box-shadow:var(--shadow);margin-bottom:22px}
.panel h2{font-size:1.3rem;margin-bottom:16px;color:var(--ink)}
.student-add{display:flex;gap:10px;margin-bottom:16px}
.student-add input{flex:1;padding:12px 16px;border:2px solid #eee;border-radius:12px;font-family:var(--font);font-size:1rem;text-transform:uppercase}
.student-add input:focus{outline:none;border-color:#7a5cd0}
.students-list{display:flex;flex-wrap:wrap;gap:10px}
.student-chip{background:var(--bg);border-radius:100px;padding:8px 12px 8px 18px;display:flex;align-items:center;gap:10px;font-weight:600}
.student-chip button{background:#ffd0d0;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;color:#e84f4f;font-weight:700;font-size:1rem}

.msg-card{border-left:6px solid #ccc;background:var(--bg);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.msg-card.rose{border-color:var(--rose-d)}
.msg-card.vert{border-color:var(--vert-d)}
.msg-card.jaune{border-color:var(--jaune-d)}
.msg-card .who{font-weight:700;color:var(--ink)}
.msg-card .when{font-size:.82rem;color:var(--muted);font-weight:500}
.msg-card .txt{margin-top:4px;color:#5a4a6c}
.cat-title{font-size:1.15rem;font-weight:700;margin:20px 0 12px;padding:6px 16px;border-radius:100px;display:inline-block;color:#fff}
.cat-title.rose{background:var(--rose-d)}
.cat-title.vert{background:var(--vert-d)}
.cat-title.jaune{background:var(--jaune-d);color:var(--ink)}
.empty-hint2{color:var(--muted);font-style:italic}

@media(max-width:600px){
  .instruction{font-size:1.3rem}
  .card{width:150px;height:180px}
  .card-emoji{font-size:3rem}
  .card-label{font-size:1.2rem}
  .mic-btn{width:150px;height:150px}
  .mic-emoji{font-size:4rem}
}

.student-chip.chip-active{background:#e8dcff;box-shadow:0 0 0 2px #7a5cd0}