/* Extrait de teacher-dashboard.html. Ordre historique : 4. */
/* ─ Reset scope ─ */
#hp3-root { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: #1e293b; }
#hp3-root * { box-sizing: border-box; }

/* ─ Header ─ */
.hp3-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.hp3-title { font-size:1.35rem; font-weight:700; color:#1e293b; }
.hp3-subtitle { font-size:12px; color:#64748b; margin-top:2px; }

/* ─ Stepper ─ */
.hp3-stepper { display:flex; align-items:center; gap:0; margin-bottom:24px; background:white; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.hp3-step { display:flex; align-items:center; gap:10px; padding:13px 20px; flex:1; cursor:pointer; transition:all .2s; border-right:1px solid #e2e8f0; position:relative; }
.hp3-step:last-child { border-right:none; }
.hp3-step.active { background:#eff6ff; }
.hp3-step.done { background:#f0fdf4; cursor:pointer; }
.hp3-step.locked { opacity:.4; cursor:not-allowed; pointer-events:none; }
.hp3-step-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; background:#e2e8f0; color:#64748b; }
.hp3-step.active .hp3-step-num { background:#6366f1; color:white; }
.hp3-step.done .hp3-step-num { background:#10b981; color:white; }
.hp3-step-info { flex:1; }
.hp3-step-label { font-size:12px; font-weight:700; color:#1e293b; }
.hp3-step.active .hp3-step-label { color:#4338ca; }
.hp3-step.done .hp3-step-label { color:#065f46; }
.hp3-step-desc { font-size:11px; color:#94a3b8; margin-top:1px; }

/* ─ Cards / Panels ─ */
.hp3-card { background:white; border:1px solid #e2e8f0; border-radius:12px; padding:20px; margin-bottom:16px; }
.hp3-card-title { font-size:13px; font-weight:700; color:#1e293b; margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.hp3-section { display:none; }
.hp3-section.active { display:block; }

/* ─ Form ─ */
.hp3-label { display:block; font-size:11px; font-weight:700; color:#374151; margin-bottom:5px; letter-spacing:.02em; }
.hp3-input, .hp3-select { width:100%; padding:8px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; color:#1a202c; background:white; font-family:inherit; transition:border-color .2s; }
.hp3-input:focus, .hp3-select:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.08); }
.hp3-row { display:grid; gap:14px; }
.hp3-row-2 { grid-template-columns:1fr 1fr; }
.hp3-row-3 { grid-template-columns:1fr 1fr 1fr; }
.hp3-field { display:flex; flex-direction:column; gap:5px; }

/* ─ Buttons ─ */
.hp3-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border:none; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; transition:transform .12s, box-shadow .15s, background .15s, opacity .15s, filter .15s; font-family:inherit; line-height:1.1; white-space:nowrap; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.hp3-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,.15); filter:brightness(1.03); }
.hp3-btn:active:not(:disabled) { transform:translateY(0); box-shadow:0 1px 2px rgba(15,23,42,.10); }
.hp3-btn:focus-visible { outline:3px solid rgba(99,102,241,.45); outline-offset:2px; }
.hp3-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; filter:grayscale(.3); transform:none; }
.hp3-btn-primary { background:#6366f1; color:#fff !important; }
.hp3-btn-primary:hover:not(:disabled) { background:#4f46e5; }
.hp3-btn-success { background:#10b981; color:#fff !important; }
.hp3-btn-success:hover:not(:disabled) { background:#059669; }
.hp3-btn-danger { background:#dc2626; color:#fff !important; }
.hp3-btn-danger:hover:not(:disabled) { background:#b91c1c; }
.hp3-btn-teal { background:#0f766e; color:#fff !important; }
.hp3-btn-teal:hover:not(:disabled) { background:#0d6460; }
.hp3-btn-amber { background:#d97706; color:#fff !important; }
.hp3-btn-amber:hover:not(:disabled) { background:#b45309; }
.hp3-btn-ghost { background:#eef2f7; color:#334155 !important; border:1px solid #cbd5e1; }
.hp3-btn-ghost:hover:not(:disabled) { background:#e2e8f0; border-color:#94a3b8; color:#1e293b !important; }
.hp3-btn-danger-soft { background:#fee2e2; color:#b91c1c !important; border:1px solid #fca5a5; }
.hp3-btn-danger-soft:hover:not(:disabled) { background:#fecaca; border-color:#f87171; color:#991b1b !important; }
.hp3-btn-sm { padding:7px 13px; font-size:12px; border-radius:8px; }
.hp3-btn-lg { padding:13px 26px; font-size:14.5px; border-radius:11px; }
.hp3-btn-group { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* ─ Answer selector ─ */
.hp3-answer-btns { display:flex; gap:6px; flex-wrap:wrap; }
.hp3-answer-btn { width:40px; height:40px; border-radius:8px; border:2px solid #e2e8f0; background:white; font-weight:700; font-size:14px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.hp3-answer-btn.selected { border-color:#6366f1; background:#6366f1; color:white; }
.hp3-answer-btn.hidden { display:none; }

/* ─ Roster (liste élèves) ─ */
.hp3-roster { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; }
.hp3-roster-item { display:flex; align-items:center; gap:8px; padding:7px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-left:3px solid transparent; border-radius:8px; cursor:pointer; transition:background .15s, border-color .15s; }
.hp3-roster-item:hover { background:#f0fdf4; border-color:#86efac; }
.hp3-roster-item.answered-ok { background:#dcfce7; border-color:#86efac; border-left-color:#16a34a; cursor:default; }
.hp3-roster-item.answered-ko { background:#fee2e2; border-color:#fca5a5; border-left-color:#dc2626; cursor:default; }
.hp3-roster-item.answered-abs { background:#f1f5f9; border-color:#cbd5e1; border-left-color:#94a3b8; opacity:.75; cursor:default; }
.hp3-roster-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; background:#e2e8f0; color:#475569; }
.hp3-roster-item.answered-ok .hp3-roster-num { background:#16a34a; color:white; }
.hp3-roster-item.answered-ko .hp3-roster-num { background:#dc2626; color:white; }
.hp3-roster-item.answered-abs .hp3-roster-num { background:#94a3b8; color:white; }
.hp3-roster-name { flex:1; font-size:12px; font-weight:600; }
.hp3-roster-item.answered-ok .hp3-roster-name,
.hp3-roster-item.answered-ko .hp3-roster-name { font-weight:800; color:#1e293b; }
.hp3-roster-badge { font-size:11px; font-weight:700; }
.hp3-roster-badge.ok { color:#16a34a; }
.hp3-roster-badge.ko { color:#dc2626; }
.hp3-roster-badge.wait { color:#94a3b8; }

/* 10/09/2026 — mise en évidence ponctuelle à l'instant précis où une réponse
   vient d'être validée (jouée une seule fois, cf. hexaplicker.js _renderRoster).
   Combine agrandissement + halo, pas seulement une couleur, pour rester
   visible même en cas de daltonisme. */
.hp3-roster-item.just-validated { animation: hp3RosterValidated .9s ease-out; }
@keyframes hp3RosterValidated {
  0%   { transform:scale(1.04); box-shadow:0 0 0 3px rgba(99,102,241,.35); }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(99,102,241,0); }
}

/* ─ Timer ─ */
.hp3-timer-wrap { text-align:center; margin-bottom:12px; }
.hp3-timer-val { font-size:3rem; font-weight:900; font-variant-numeric:tabular-nums; transition:color .3s; color:#6366f1; }
.hp3-timer-bar { height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden; margin-top:6px; }
.hp3-timer-fill { height:100%; background:#6366f1; border-radius:3px; transition:width 1s linear, background .5s; }

/* ─ Histogram ─ */
.hp3-histo-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.hp3-histo-letter { width:22px; text-align:center; font-weight:700; font-size:14px; }
.hp3-histo-bar-wrap { flex:1; background:#f1f5f9; border-radius:6px; height:28px; overflow:hidden; }
.hp3-histo-bar { height:100%; border-radius:6px; transition:width .5s; display:flex; align-items:center; padding-left:8px; }
.hp3-histo-pct { width:40px; text-align:right; font-size:12px; font-weight:600; color:#475569; }

/* ─ QCM Editor (diaporama) ─ */
.hp3-editor-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
.hp3-slide-list { display:flex; flex-direction:column; gap:6px; }
.hp3-slide-thumb { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; transition:all .15s; user-select:none; position:relative; }
.hp3-slide-thumb:hover { background:#f0f7ff; border-color:#c7d2fe; }
.hp3-slide-thumb.active { background:#eff6ff; border-color:#6366f1; border-width:2px; }
.hp3-slide-thumb.dragging { opacity:.4; }
.hp3-slide-thumb.drag-over { border-top:3px solid #6366f1; }
.hp3-slide-idx { width:22px; height:22px; border-radius:50%; background:#e2e8f0; color:#475569; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp3-slide-thumb.active .hp3-slide-idx { background:#6366f1; color:white; }
.hp3-slide-info { flex:1; overflow:hidden; }
.hp3-slide-title { font-size:12px; font-weight:600; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp3-slide-meta { font-size:10px; color:#94a3b8; margin-top:1px; }
.hp3-slide-drag { font-size:14px; color:#cbd5e1; cursor:grab; padding:0 2px; }
.hp3-slide-drag:active { cursor:grabbing; }

/* 10/09/2026 — banque de QCM en cartes (remplace l'ancienne liste en lignes) */
.hp3-pkt-list { display:flex; flex-direction:column; gap:8px; }
.hp3-pkt-card { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 14px; background:white; border:1px solid #e2e8f0; border-left:3px solid #6366f1; border-radius:10px; cursor:pointer; transition:all .15s; }
.hp3-pkt-card:hover { background:#f8fafc; border-color:#c7d2fe; box-shadow:0 2px 8px rgba(99,102,241,.14); transform:translateY(-1px); }
.hp3-pkt-card-title { font-size:13px; font-weight:800; color:#1e293b; margin-bottom:6px; word-break:break-word; }
.hp3-pkt-card-meta { display:flex; flex-wrap:wrap; gap:6px; }
.hp3-pkt-chip { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:#475569; background:#f1f5f9; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.hp3-pkt-chip.class { color:#4338ca; background:#eef2ff; }
.hp3-pkt-card-date { font-size:10px; color:#cbd5e1; margin-top:6px; }
.hp3-pkt-card-actions { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.hp3-pkt-card-actions button { width:28px; height:28px; border:none; border-radius:7px; font-size:12px; cursor:pointer; transition:filter .15s; }
.hp3-pkt-card-actions button:hover { filter:brightness(.95); }

/* ─ Image drop zone ─ */
.hp3-img-zone { border:2px dashed #c7d2fe; border-radius:8px; padding:16px; background:#fafbff; cursor:pointer; transition:all .2s; text-align:center; }
.hp3-img-zone:hover, .hp3-img-zone.dragover { border-color:#6366f1; background:#eef2ff; }
.hp3-img-zone img { max-width:100%; max-height:100px; border-radius:6px; object-fit:contain; }

/* ─ Score cards ─ */
.hp3-score-grid { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.hp3-score-card { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:14px 18px; text-align:center; min-width:90px; }
.hp3-score-big { font-size:2rem; font-weight:900; line-height:1; }
.hp3-score-label { font-size:11px; color:#64748b; margin-top:4px; }

/* ─ Live badge ─ */
.hp3-live-badge { display:inline-flex; align-items:center; gap:5px; background:#10b981; color:white; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.hp3-live-dot { width:7px; height:7px; border-radius:50%; background:white; animation:hp3blink 3s infinite; }
@keyframes hp3blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ─ Toast ─ */
.hp3-toast { position:fixed; top:20px; right:20px; z-index:99999; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600; color:white; box-shadow:0 4px 20px rgba(0,0,0,.2); max-width:340px; transition:opacity .3s; }

/* ─ VP Modal (plein écran dans le dashboard) ─ */
.hp3-vp-overlay { position:fixed; inset:0; z-index:9999; background:#0f172a; display:flex; flex-direction:column; }
.hp3-vp-bar { background:#1e293b; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #334155; flex-shrink:0; }
.hp3-vp-body { flex:1; display:flex; overflow:hidden; }
.hp3-vp-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
.hp3-vp-question { font-size:clamp(1.2rem,3vw,2.2rem); font-weight:700; color:white; text-align:center; max-width:900px; line-height:1.3; margin-bottom:24px; }
.hp3-vp-choices { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:960px; }
.hp3-vp-choice { min-width:140px; max-width:260px; flex:1; padding:18px 14px; border-radius:14px; color:white; text-align:center; transition:all .3s; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hp3-vp-choice.revealed-ok { transform:scale(1.08); box-shadow:0 0 0 4px rgba(255,255,255,.3); }
.hp3-vp-choice.revealed-ko { opacity:.3; transform:scale(.95); }
.hp3-vp-progress { width:100%; max-width:900px; height:5px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin-top:20px; }
.hp3-vp-prog-fill { height:100%; background:#6366f1; transition:width 1s linear; }
.hp3-vp-counter { color:rgba(255,255,255,.6); font-size:14px; margin-top:10px; }
.hp3-vp-img { max-height:38vh; max-width:min(860px, 78vw); width:auto; height:auto; border-radius:12px; margin-bottom:18px; object-fit:contain; background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.28); }
.hp3-vp-histo { width:100%; max-width:600px; margin-top:16px; }
/* ── Sidebar roster élèves ── */
.hp3-vp-sidebar { width:300px; flex-shrink:0; background:#1a2436; border-left:1px solid #1e3a5f; display:flex; flex-direction:column; overflow:hidden; }
.hp3-vp-sidebar-hdr { padding:9px 12px; font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid #1e3a5f; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.hp3-vp-roster { flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; min-height:40px; transition:max-height .3s; }
.hp3-vp-ri { display:flex; align-items:center; gap:6px; padding:4px 7px; border-radius:6px; font-size:11.5px; transition:background .25s; }
.hp3-vp-ri.ok { background:rgba(16,185,129,.12); }
.hp3-vp-ri.scanned{background:rgba(96,165,250,.18);border-color:#60a5fa;}
.hp3-vp-ri.ko { background:rgba(239,68,68,.08); }
.hp3-vp-ri .dot { width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; background:rgba(255,255,255,.07); color:#475569; }
.hp3-vp-ri.ok .dot { background:rgba(16,185,129,.25); color:#34d399; }
.hp3-vp-ri.ko .dot { background:rgba(239,68,68,.2); color:#f87171; }
.hp3-vp-ri .rname { flex:1; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp3-vp-ri .tick { font-size:12px; flex-shrink:0; }
/* ── Remote / kbd ── */
.hp3-vp-remote { padding:8px 10px; border-top:1px solid #1e3a5f; flex-shrink:0; text-align:center; }
.hp3-vp-kbd { padding:5px 10px; font-size:9.5px; color:#334155; text-align:center; border-top:1px solid #1e3a5f; flex-shrink:0; }

/* ─ Responsive ─ */
@media(max-width:700px){
  .hp3-editor-layout { grid-template-columns:1fr; }
  .hp3-row-2, .hp3-row-3 { grid-template-columns:1fr; }
  .hp3-stepper { flex-direction:column; }
  .hp3-step { border-right:none; border-bottom:1px solid #e2e8f0; }
}

/* ══════════════════════════════════════════════════════════════════════
   24/09/2026 — LISIBILITÉ : AUCUN TEXTE SOUS 4,5:1 DANS QCM CRÉATOR

   Mesuré dans le tableau de bord (scripts/test-lisibilite-qcm.js) :
     · le titre « QCM Créator » posé à même le fond sombre du tableau de
       bord : 1,32:1 ;
     · les indications en #94a3b8 sur blanc : 2,56:1 ;
     · « Sauvegarder » blanc sur #10b981 : 2,54:1, « Projeter » et
       « Révéler » blanc sur #d97706 : 3,19:1, « Relancer » blanc sur
       #f59e0b : 2,15:1, le violet #6366f1 : 4,47:1.
   Les teintes restent les mêmes familles, un cran plus foncées. Rien ne
   change de place, aucun bouton n'est retiré.
   ══════════════════════════════════════════════════════════════════════ */
#hp3-root .hp3-header { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 20px !important; margin-top:16px; }
#hp3-root .hp3-title { color:#1e293b; }
#hp3-root .hp3-subtitle { color:#475569; }
#hp3-root .hp3-step-desc,
#hp3-root .hp3-slide-meta,
#hp3-root .hp3-score-label { color:#475569; }
#hp3-root .hp3-step-num { color:#475569; }
#hp3-root .hp3-step.active .hp3-step-num,
#hp3-root .hp3-slide-thumb.active .hp3-slide-idx { background:#4f46e5; color:#fff; }
#hp3-root .hp3-step.done .hp3-step-num { background:#047857; color:#fff; }
.hp3-btn-primary { background:#4f46e5; }
.hp3-btn-primary:hover:not(:disabled) { background:#4338ca; }
.hp3-btn-success { background:#047857; }
.hp3-btn-success:hover:not(:disabled) { background:#065f46; }
.hp3-btn-amber { background:#b45309; }
.hp3-btn-amber:hover:not(:disabled) { background:#92400e; }

/* Couleurs posées en ligne par le moteur (HTML généré) : même correction,
   limitée à l'interface claire de l'outil. Les deux écritures comptent —
   celle du gabarit et celle que le navigateur réécrit après style.color. */
#hp3-root [style*="color:#94a3b8"], #hp3-root [style*="color: rgb(148, 163, 184)"],
#hp3-hub-classbar [style*="color:#94a3b8"] { color:#64748b !important; }
#hp3-root [style*="color:#6366f1"], #hp3-root [style*="color: rgb(99, 102, 241)"] { color:#4f46e5 !important; }
#hp3-root [style*="color:#16a34a"], #hp3-root [style*="color: rgb(22, 163, 74)"] { color:#15803d !important; }
#hp3-root [style*="color:#ca8a04"] { color:#a16207 !important; }
#hp3-root [style*="color:#3b82f6"], #hp3-root [style*="color: rgb(59, 130, 246)"] { color:#1d4ed8 !important; }
#hp3-root [style*="color:#7c6cf0"] { color:#5b4bd6 !important; }
#hp3-root [style*="background:#6366f1"], #hp3-root [style*="background: rgb(99, 102, 241)"] { background-color:#4f46e5 !important; }
#hp3-root [style*="background:#10b981"], #hp3-root [style*="background: rgb(16, 185, 129)"] { background-color:#047857 !important; }
#hp3-root [style*="background:#f59e0b"][style*="color:white"],
#hp3-root [style*="background:#f59e0b"][style*="color:#fff"] { background-color:#b45309 !important; }
/* La caméra reste sur fond sombre : ses indications gardent le gris clair. */
#hp3-root #hp3-cam-area [style*="color:#94a3b8"] { color:#cbd5e1 !important; }
#hp3-root [style*="background:#d97706"] { background-color:#b45309 !important; }
/* Le message d'attente des résultats n'avait pas de carte : il flottait sur
   le fond sombre du tableau de bord. */
#hp3-results-content > p:only-child { background:#fff; border:1px solid #e2e8f0; border-radius:12px; }
#hp3-root [style*="color:#d97706"] { color:#b45309 !important; }
#hp3-scoresheet:not(:empty) { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; }

/* Suivi en direct : les pastilles vert et rouge vif tombaient à 3:1. */
.hp3-roster-item.answered-ok .hp3-roster-num { background:#15803d; }
.hp3-roster-item.answered-abs .hp3-roster-num { background:#64748b; }
.hp3-roster-badge.ok { color:#166534; }
.hp3-roster-badge.ko { color:#b91c1c; }
.hp3-roster-badge.wait { color:#64748b; }
#hp3-root [style*="rgba(16,185,129,.9)"] { background:#047857 !important; }
#hp3-root [style*="color:#ef4444"], #hp3-root [style*="color: rgb(239, 68, 68)"] { color:#dc2626 !important; }

/* ── Diaporama et fenêtre QR : fond sombre, gris et violet éclaircis ──
   Ici c'est l'inverse de l'interface claire : #334155, #475569 et #64748b
   sur l'ardoise #1e293b descendaient entre 1,5 et 3,3:1 — le texte que la
   salle doit lire au vidéoprojecteur. */
.hp3-vp-kbd { color:#94a3b8; }
#hp3-vp [style*="color:#334155"], #hp3-vp [style*="color:#475569"], #hp3-vp [style*="color:#64748b"],
#hp3-remote-modal [style*="color:#334155"], #hp3-remote-modal [style*="color:#475569"], #hp3-remote-modal [style*="color:#64748b"],
#hp3-vp [style*="color: rgb(71, 85, 105)"], #hp3-vp [style*="color: rgb(100, 116, 139)"] { color:#a8b4c6 !important; }
#hp3-vp [style*="color:#6366f1"], #hp3-vp [style*="color: rgb(99, 102, 241)"], #hp3-remote-modal [style*="color:#6366f1"] { color:#a5b4fc !important; }
#hp3-vp .hp3-vp-ri .tick { color:#93c5fd; }
#hp3-vp [style*="background:#6366f1"], #hp3-vp [style*="background: rgb(99, 102, 241)"] { background-color:#4f46e5 !important; }
.hp3-vp-sidebar-hdr { color:#a8b4c6; }
#hp3-vp .tick[style*="color:#60a5fa"] { color:#93c5fd !important; }

/* ══════════════════════════════════════════════════════════════════════
   24/09/2026 — CARTE SCANNÉE : SURBRILLANCE, JAMAIS DE CORRECTION

   Les listes d'élèves (suivi en direct, grille « Réponses », diaporama
   projeté) passaient en vert ou en rouge avec la lettre choisie et ✓/✗ dès
   le scan. Projeté au tableau, cela disait à la classe qui s'était trompé :
   les élèves changeaient de carte. Une carte lue met maintenant l'élève en
   surbrillance indigo « Répondu » — la même pour une bonne ou une mauvaise
   réponse. La correction attend 👁 Révéler.
   ══════════════════════════════════════════════════════════════════════ */
.hp3-roster-item.answered { background:#e0e7ff; border-color:#a5b4fc; border-left:4px solid #4338ca; cursor:pointer; }
.hp3-roster-item.answered .hp3-roster-num { background:#4338ca; color:#fff; }
.hp3-roster-item.answered .hp3-roster-name { font-weight:800; color:#1e1b4b; }
.hp3-roster-badge.fait { color:#3730a3; }

.hp3-vp-ri { border:1px solid transparent; }
.hp3-vp-ri.scanned { background:rgba(129,140,248,.30); border-color:#818cf8; }
.hp3-vp-ri.scanned .dot { background:#6366f1; color:#fff; }
.hp3-vp-ri.scanned .rname { color:#fff; font-weight:700; }
#hp3-vp .hp3-vp-ri .tick { color:#c7d2fe; font-size:10.5px; }
.hp3-vp-ri.vient-de-repondre { animation:hp3VpRepondu 1.4s ease-out; }
@keyframes hp3VpRepondu { 0% { background:rgba(165,180,252,.85); } 100% { background:rgba(129,140,248,.30); } }
@media (prefers-reduced-motion: reduce) { .hp3-vp-ri.vient-de-repondre { animation:none; } }

/* QR télécommande repliable : la liste des élèves récupère la hauteur. */
.hp3-vp-remote-bascule { display:block; width:100%; background:transparent; border:1px solid #1e3a5f; border-radius:8px; color:#c7d2fe; font-size:10.5px; font-weight:700; padding:5px 8px; cursor:pointer; margin-bottom:6px; }
.hp3-vp-remote-bascule:hover, .hp3-vp-remote-bascule:focus-visible { background:rgba(99,102,241,.18); outline:none; }
.hp3-vp-remote.replie { padding-bottom:4px; }
.hp3-vp-remote.replie .hp3-vp-remote-bascule { margin-bottom:0; }
.hp3-vp-remote.replie .hp3-vp-remote-corps { display:none; }
.hp3-vp-remote.replie .fl { display:inline-block; transform:rotate(-90deg); }
/* Classe nombreuse : deux colonnes, toute la classe d'un coup d'œil. */
.hp3-vp-roster.dense { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:3px; }
.hp3-vp-roster.dense .hp3-vp-ri { padding:3px 5px; font-size:11px; min-width:0; }
.hp3-vp-roster.dense .hp3-vp-ri .tick { display:none; }
.hp3-vp-roster.dense .hp3-vp-ri .dot { width:18px; height:18px; }