/* Bloc Problème (contenu riche à questions/parties, cf. models/problemes.py)
   — v1 : réutilise .doc-block/.doc-env-head existants (doc.css) pour
   l'enveloppe, styles propres pour la liste de questions imbriquées. */

.doc-probleme { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); padding: 14px 18px; }
.probleme-title { font-weight: 700; font-size: 0.95rem; }
.probleme-title:empty::before { content: "Titre du problème…"; color: var(--text-faint); font-style: italic; }

.pi-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }

.pi-item { padding: 4px 0; }
.pi-row { display: flex; align-items: flex-start; gap: 6px; }

/* Retrait par niveau — QUESTION à gauche, SubQuestion/SubSubQuestion décalées. */
.pi-question { margin-left: 0; }
.pi-subquestion { margin-left: 22px; }
.pi-subsubquestion { margin-left: 44px; }
.pi-partie { margin: 10px 0 4px; }
.pi-text { margin-left: 0; }

.pi-row-partie .pi-editable { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }

.pi-number { font-weight: 700; flex: 0 0 auto; min-width: 1.4em; color: var(--text-muted); }
.pi-content { flex: 1 1 auto; }

.pi-editable { outline: none; min-height: 1.4em; }
.pi-editable:empty::before { content: "…"; color: var(--text-faint); font-style: italic; }
.pi-editable:focus { background: var(--surface-2); border-radius: var(--radius-sm); }

.pi-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; opacity: 0; transition: opacity .1s; }
.pi-row:hover .pi-actions, .pi-row:focus-within .pi-actions { opacity: 1; }
.pi-btn {
    border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-muted);
    border-radius: var(--radius-sm); font-size: 0.72rem; line-height: 1; padding: 3px 6px; cursor: pointer;
}
.pi-btn:hover { background: var(--surface-3); color: var(--text); }
.pi-btn.is-active { color: var(--accent); border-color: var(--accent); }
.pi-points-input { width: 3.2em; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 0.72rem; padding: 3px 4px; }

.pi-correction, .pi-demo {
    margin-left: 1.4em; margin-top: 2px; padding: 6px 10px;
    border-left: 2px solid var(--border-soft); font-size: 0.88rem; color: var(--text-muted);
}
.pi-subquestion + .pi-correction, .pi-item:has(.pi-subquestion) .pi-correction { margin-left: 22px; }
.pi-subsubquestion + .pi-correction, .pi-item:has(.pi-subsubquestion) .pi-correction { margin-left: 44px; }
.pi-correction-label, .pi-demo-label {
    display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 2px;
}

.pi-item-hidden { opacity: 0.45; }

.pi-add-item {
    margin-top: 8px; border: 1px dashed var(--border-soft); background: transparent; color: var(--text-muted);
    border-radius: var(--radius-sm); font-size: 0.8rem; padding: 6px 10px; cursor: pointer; width: 100%; text-align: left;
}
.pi-add-item:hover { background: var(--surface-2); color: var(--text); }

body.mode-eleve .pi-actions, body.mode-eleve .pi-add-item { display: none; }