/* Extrait de student_dashboard.html. Ordre historique : 4. */
/* ── Rendu TP student ── */
[id^="wsTPContentPart"] { position: relative; min-height: 60px; }
/* ✅ FIX — .tp-scale-inner doit être position:relative pour être le containing block
   des .tp-textbox (position:absolute). Sans ça, les textboxes se positionnent par
   rapport au parent wsTPContentPartN qui est EN DEHORS du transform:scale() → décalage
   systématique sur mobile/tablette. Cette règle CSS renforce le fix JS dans _wrapTPContent. */
.tp-scale-inner { position: relative; pointer-events: none; }
/* Les enfants interactifs restent cliquables malgré pointer-events:none sur le parent */
.tp-scale-inner input,
.tp-scale-inner textarea,
.tp-scale-inner select,
.tp-scale-inner [data-question-id],
.tp-scale-inner [data-blank-field] {
    pointer-events: auto !important;
    cursor: text !important;
}
.tp-textbox { position: absolute; box-sizing: border-box; z-index: 10; }
/* ✅ FIX scroll/input : les zones de réponse élève doivent être AU-DESSUS du contenu scalé
   transform:scale crée un stacking context → peut masquer les éléments suivants dans le DOM
   z-index:30 garantit que les textareas sont toujours cliquables et visibles */
.ws-response-area, [id^="wsResponsePart"] {
    position: relative !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    background: #f0f4ff !important;
    color: #1e293b !important;
    border: 2px solid #667eea !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: Arial, sans-serif !important;
}
.tp-textbox-inner { position: absolute; inset: 2px; padding: 6px 10px;
    background: rgba(255,255,255,0.96); border: 2px solid #e74c3c;
    border-radius: 5px; font-weight: 600;
    font-family: Arial, sans-serif !important; line-height: 1.6;
    word-break: break-word; white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); box-sizing: border-box;
    overflow: hidden !important; }
.tp-textbox-toolbar, .tp-textbox-handle, .tp-textbox-frame,
.tp-leg-del, .tp-legend-hint { display: none !important; }
.tp-annot-wrapper { position: relative; display: inline-block; line-height: 0; }
/* ✅ FIX images sans width explicite → taille naturelle → ratio minuscule */
[id^="wsTPContentPart"] img { max-width: 100%; max-height: 480px; height: auto; object-fit: contain; display: block; margin: 0 auto; }
[id^="wsTPContentPart"] .tp-annot-wrapper img { display: block; height: auto; }
.tp-annot-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; }
.tp-legend-container { display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-start; margin: 12px 0; position: relative; }
.tp-legend-image-zone { position: relative; display: inline-block; flex-shrink: 0; }
.tp-legend-image-zone img { display: block; max-width: 100%; height: auto; }
.tp-leg-anchor { position: absolute; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid white; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px; font-weight: bold; font-family: Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 5; }
.tp-legend-panel { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.tp-leg-entry { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; }
.tp-leg-badge { width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px; font-weight: bold;
    font-family: Arial, sans-serif; flex-shrink: 0; }
.tp-leg-text { font-size: 13px; color: #1e293b; font-family: Arial, sans-serif; flex: 1; }
.tp-legend-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible; z-index: 4; }