/* ── printStyles.css — Mise en forme de l'export lisible (PDF / HTML) ───────── * * Feuille de style du DOCUMENT D'IMPRESSION généré par exportPrintable.js * (chantier ROADMAP n°4). Destinée à la lecture/relecture humaine, aux couleurs * de la charte CNED — PAS à Moodle. * * IMPORTANT — où ces règles s'appliquent : * • Toutes les règles sont scopées sous « .printable-doc », une classe qui * N'EXISTE PAS dans l'application (index.html). Lier cette feuille dans * index.html est donc sans effet sur l'interface : elle sert uniquement de * SOURCE UNIQUE, qu'exportPrintable.js inline (via document.styleSheets) * dans le document d'impression / le .html autonome — lesquels sont des * documents SÉPARÉS qui ne partagent pas le de l'application. * • En contexte file:// certains navigateurs (Chrome) bloquent la lecture des * cssRules d'une feuille liée → exportPrintable.js bascule sur un fallback * interne (FALLBACK_PRINT_CSS) couvrant l'essentiel. * * Charte CNED : turquoise #2da288 / #00bcb4, rose #ae2585 / #e6417a. * ─────────────────────────────────────────────────────────────────────────── */ .printable-doc { max-width: 820px; margin: 0 auto; padding: 1.2rem; font-family: "Segoe UI", system-ui, Arial, sans-serif; font-size: 11.5pt; line-height: 1.4; color: #1f2d2a; } .printable-doc p { margin: 0.25rem 0; } /* ── En-tête du document ─────────────────────────────────────────────────── */ .printable-header { border-bottom: 3px solid #2da288; padding-bottom: 0.6rem; margin-bottom: 1rem; } .printable-header .ph-title { font-size: 19pt; font-weight: 700; color: #2da288; margin-bottom: 0.25rem; } .printable-header .ph-meta { font-size: 9.5pt; color: #555; } .printable-header .ph-meta span { margin-right: 1.2rem; white-space: nowrap; } /* ── Bloc question ───────────────────────────────────────────────────────── */ .printable-question { border: 1px solid #d6e9e4; border-left: 4px solid #00bcb4; border-radius: 6px; padding: 0.6rem 0.85rem; margin-bottom: 0.7rem; /* Éviter de couper une question entre deux pages quand c'est possible. */ page-break-inside: avoid; break-inside: avoid; } .pq-head { border-bottom: 1px solid #eef4f2; padding-bottom: 0.3rem; margin-bottom: 0.4rem; } .pq-num { font-weight: 700; color: #ae2585; font-size: 12pt; } .pq-id { font-family: ui-monospace, Consolas, monospace; font-size: 9.5pt; color: #666; margin-left: 0.4rem; } .pq-type { display: inline-block; background: #e3f6f0; color: #1c6b58; font-size: 8.5pt; font-weight: 600; padding: 0.08rem 0.5rem; border-radius: 10px; margin-left: 0.5rem; vertical-align: middle; } .pq-statement { margin: 0.3rem 0 0.5rem; } /* ── Média ───────────────────────────────────────────────────────────────── */ .pq-media { margin: 0.4rem 0; } .pq-media img { max-width: 100%; max-height: 300px; border: 1px solid #d6e9e4; border-radius: 4px; } .pq-media-note { font-style: italic; color: #777; font-size: 9.5pt; background: #f7f7f7; padding: 0.25rem 0.5rem; border-radius: 4px; } /* ── Réponses : disposition en colonnes (coche alignée à gauche) ─────────── */ .pq-answers { list-style: none; padding: 0; margin: 0.3rem 0; } .pq-answer { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.18rem 0.45rem; margin: 0.12rem 0; border-radius: 4px; } .pq-mark { flex: 0 0 1.1em; text-align: center; font-weight: 700; color: #2da288; } .pq-answer:not(.correct) .pq-mark { color: #b7c4c0; } .pq-answer-body { flex: 1 1 auto; min-width: 0; } /* Le texte d'une réponse peut être un bloc

: on neutralise ses marges pour garder la coche et le texte sur la même ligne de base. */ .pq-answer-body p { margin: 0; } .pq-answer.correct { background: #e3f6f0; font-weight: 600; color: #1c6b58; } .pq-weight { font-size: 8.5pt; color: #ae2585; font-weight: 600; } .pq-case { font-size: 8.5pt; color: #777; font-style: italic; font-weight: normal; } .pq-answer-fb { font-size: 9.5pt; color: #555; font-style: italic; font-weight: normal; margin-top: 0.1rem; } .pq-numeric { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.25rem 0.45rem; background: #e3f6f0; border-radius: 4px; color: #1c6b58; } /* ── Rétroactions ────────────────────────────────────────────────────────── */ .pq-feedback { margin-top: 0.5rem; padding: 0.35rem 0.6rem; background: #fafafa; border-left: 3px solid #00bcb4; border-radius: 0 4px 4px 0; font-size: 10.5pt; } .pq-feedback-label { font-weight: 700; color: #2da288; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.03em; } .pq-combined { margin-top: 0.5rem; } .pq-combined-item { padding: 0.3rem 0.6rem; margin: 0.2rem 0; border-radius: 4px; background: #fafafa; font-size: 10.5pt; } .pqc-label { display: inline-block; font-weight: 700; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.4rem; } .pqc-ok { color: #2da288; } .pqc-partial { color: #e6417a; } .pqc-ko { color: #ae2585; } /* ── Impression ──────────────────────────────────────────────────────────── */ @page { margin: 1.5cm; } @media print { .printable-doc { max-width: none; padding: 0; } .printable-question { border-color: #bbb; border-left-color: #00bcb4; } /* Forcer le rendu des aplats de couleur à l'impression (sinon ignorés). */ .pq-answer.correct, .pq-type, .pq-numeric, .pq-combined-item, .pq-feedback { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }