jamais coupé entre 2 pages. Format
8×6cm (plus haut que les 8×4cm des flashcards — une question + 4 options +
indice éventuel, c'est davantage de contenu qu'une flashcard, demande
explicite de l'utilisateur).
v0.29.5 (retour utilisateur après 1er test réel) : la carte imprimée
reproduit maintenant fidèlement le design ÉCRAN (.nlm-qz-card/.nlm-qz-head/
.nlm-qz-opts, voir plus haut dans ce fichier) plutôt qu'un design
imprimable indépendant — bandeau dégradé + chip + options en tuiles
bordées sur 2 colonnes. Toujours le thème CLAIR à l'impression (demande
d'origine), quel que soit le data-theme courant du widget à l'écran : les
variables --nlm-qz-* theme-dépendantes sont re-déclarées ici avec leurs
valeurs CLAIRES, indépendamment d'un éventuel [data-theme="dark"] posé sur
l'ancêtre .nlm-widget.nlm-quiz (--nlm-qz-accent2/--nlm-qz-correct-* etc. ne
sont PAS theme-dépendantes, donc pas besoin d'être re-déclarées ici).
⚠️⚠️ **`display:none` (v0.29.11, correctif DÉFENSIF — mécanisme NON
confirmé)** : voir le commentaire détaillé sur `.nlm-fc-print-sheet` plus
haut dans ce fichier (même correctif, même honnêteté testé vs supposé) —
hypothèse retenue : un `position:absolute` seul (état d'origine ici aussi)
pourrait laisser la feuille contribuer à l'étendue de mise en page utilisée
par le moteur d'impression pour paginer, même hors de la zone imprimable.
Imprimer le quiz après avoir déjà imprimé les flashcards (ou l'inverse)
faisait hériter le nombre de pages de LA PRÉCÉDENTE feuille encore présente
dans le DOM. `.nlm-qz-print-measuring` (ajoutée/retirée dans `printQuiz()` autour
de `typeset()`) réintroduit une fenêtre `display:block` UNIQUEMENT pendant
la mesure KaTeX, sans réintroduire le bug de pagination. */
.nlm-qz-print-sheet {
display: none;
position: absolute; left: -99999px; top: 0;
visibility: hidden;
--nlm-qz-card-bg: #fff;
--nlm-qz-card-shadow: 0 4px 16px rgba(45,55,90,.12);
--nlm-qz-body-text: var(--nlm-text);
--nlm-qz-opt-bg: #f7f8fb;
--nlm-qz-opt-border: #e2e6ef;
--nlm-qz-muted-text: #6b7280;
}
.nlm-qz-print-sheet.nlm-qz-print-measuring { display: block; }
@media print {
body.nlm-printing-quiz * { visibility: hidden; }
body.nlm-printing-quiz .nlm-qz-print-active,
body.nlm-printing-quiz .nlm-qz-print-active * { visibility: visible; }
body.nlm-printing-quiz .nlm-qz-print-active {
display: block;
position: absolute; left: 0; top: 0;
}
}
.nlm-qz-print-note { font-size: 9.5pt; margin: 0 0 0.4cm; color: #333; font-family: var(--nlm-font); }
.nlm-qz-print-grid { border-collapse: collapse; table-layout: fixed; }
.nlm-qz-print-row { break-inside: avoid; page-break-inside: avoid; }
.nlm-qz-print-cell {
position: relative; width: 8cm; height: 6cm; box-sizing: border-box;
padding: 0; overflow: hidden; vertical-align: top;
border: 1px dashed #999;
}
.nlm-qz-print-cell.nlm-qz-print-q { border-right: 1px dotted #999; }
.nlm-qz-print-cell.nlm-qz-print-a { border-left: none; }
/* Carte en position absolue à l'intérieur de la cellule → ne contribue JAMAIS
à la hauteur naturelle du | , même principe que les flashcards (garantit
les 6cm exacts quel que soit le nombre d'options/la longueur du texte —
overflow:hidden en filet de sécurité physique). Reproduit .nlm-qz-card :
coins arrondis + overflow:hidden (le bandeau dégradé épouse le haut de la
carte) + ombre légère. Forcer l'impression des couleurs de fond (dégradé
du bandeau, fonds des tuiles d'options) : la plupart des navigateurs les
omettent par défaut à l'impression sans ce réglage. */
.nlm-qz-print-card {
position: absolute; top: 0.15cm; left: 0.15cm; right: 0.15cm; bottom: 0.15cm;
border-radius: 0.35cm; overflow: hidden; box-sizing: border-box;
box-shadow: var(--nlm-qz-card-shadow);
background: var(--nlm-qz-card-bg);
display: flex; flex-direction: column;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* ---- Bandeau (reprend .nlm-qz-head/.nlm-qz-headrow/.nlm-qz-chip/.nlm-qz-question) ---- */
/* Hauteur FIXE (v0.29.7, demande explicite) : le recto (question en 7.4pt) et
le verso (même question reprise en 6.2pt, voir .nlm-qz-print-question-a plus
bas) ne remplissent pas la même hauteur pour un texte identique — sans
hauteur explicite, les deux bandeaux d'une même carte auraient une hauteur
différente. `overflow:hidden` en filet de sécurité si une question très
longue dépasse (même principe que le reste de la carte imprimée : limite
physique assumée plutôt qu'un bandeau qui grandirait sans borne). */
.nlm-qz-print-head {
flex: none; height: 2cm; box-sizing: border-box; overflow: hidden;
background: linear-gradient(90deg, var(--nlm-qz-accent2), var(--nlm-accent));
padding: 0.22cm 0.26cm 0.24cm;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Bandeau du VERSO (v0.29.7, demande explicite) : dégradé dédié, distinct de
celui du recto — couleurs fixes (pas de variable), même principe que
--nlm-qz-accent2 (signature du design, pas dérivée de la cascade de
réglages). */
.nlm-qz-print-cell.nlm-qz-print-a .nlm-qz-print-head {
background: linear-gradient(90deg, #00b359, #28714d);
}
.nlm-qz-print-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.2cm; }
.nlm-qz-print-chip {
font-family: 'Fredoka', var(--nlm-font); font-weight: 700; color: #fff !important;
font-size: 6.3pt; background: rgba(255,255,255,.18); padding: 0.05cm 0.16cm;
border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
}
.nlm-qz-print-meta {
font-family: 'Fredoka', var(--nlm-font); font-weight: 600; color: rgba(255,255,255,.88) !important;
font-size: 5.6pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: right; flex: 1 1 auto; min-width: 0;
}
.nlm-qz-print-question {
font-family: 'Fredoka', var(--nlm-font); font-weight: 600; font-size: 7.4pt;
color: #fff !important; line-height: 1.32; margin-top: 0.14cm;
}
/* Verso (v0.29.5, demande explicite) : la question est reprise SOUS le même
bandeau, mais en plus petit/italique, dans un ton pastel qui reprend la
couleur du bandeau plutôt que le blanc gras du recto — un blanc TRANSLUCIDE
(pas une couleur calculée à la main) se teinte automatiquement de la
couleur du dégradé qu'il recouvre, quel que soit l'accent configuré. */
.nlm-qz-print-question-a {
font-weight: 500; font-style: italic; font-size: 6.2pt;
color: rgba(255,255,255,.6) !important; margin-top: 0.1cm;
}
/* ---- Corps (reprend .nlm-qz-body/.nlm-qz-opts/.nlm-qz-opt) ---- */
.nlm-qz-print-body {
flex: 1 1 auto; overflow: hidden; box-sizing: border-box;
background: var(--nlm-qz-card-bg);
padding: 0.2cm 0.24cm;
display: flex; flex-direction: column;
}
.nlm-qz-print-opts {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.12cm;
flex: 1 1 auto; overflow: hidden;
}
.nlm-qz-print-opt {
display: flex; align-items: flex-start; gap: 0.08cm;
background: var(--nlm-qz-opt-bg); border: 1pt solid var(--nlm-qz-opt-border);
border-radius: 0.16cm; padding: 0.11cm 0.12cm;
font-size: 6.3pt; line-height: 1.25; color: var(--nlm-qz-body-text);
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.nlm-qz-print-letter { font-family: 'Fredoka', var(--nlm-font); font-weight: 700; color: var(--nlm-qz-accent2); flex: 0 0 auto; }
.nlm-qz-print-hint {
flex: 0 0 auto; margin-top: 0.1cm;
font-size: 5.6pt; line-height: 1.25; color: var(--nlm-qz-muted-text); font-family: var(--nlm-font);
}
.nlm-qz-print-hint-label { text-decoration: underline; font-weight: 700; }
/* ---- Verso : lettre + texte de la bonne réponse (inchangé sur le fond) ---- */
.nlm-qz-print-body-a { align-items: center; justify-content: center; text-align: center; }
.nlm-qz-print-answer-letter {
font-family: 'Fredoka', var(--nlm-font); font-weight: 700; font-size: 26pt;
color: var(--nlm-correct); line-height: 1; margin: 0.08cm 0;
}
.nlm-qz-print-answer-text {
font-family: 'Fredoka', var(--nlm-font); font-weight: 600; font-size: 7.6pt;
line-height: 1.3; color: var(--nlm-qz-body-text);
}
/* ---------- MINDMAP (repris de mindmap_markmap_demo_2.html) ---------- */
.nlm-mindmap { border: 1px solid #dfe3ea; border-radius: 14px; overflow: hidden; background: #fff; position: relative; max-width: none; }
.nlm-mindmap .mmk-head { padding: 10px 12px 0; background: #fbfcfe; }
.nlm-mindmap .mmk-title { font-weight: bold; }
.nlm-mindmap .mmk-title .t-main { font-size: 26px; color: #d62828; }
.nlm-mindmap .mmk-title .t-sub { font-size: 13px; color: #1a365d; }
.nlm-mindmap .mmk-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: #fbfcfe; }
/* Boutons de la barre d'outils — icônes seules, cercle pastel (v0.29.0,
remplace les pilules texte : "trop de place, trop présentes" retour
utilisateur explicite). Système PARTAGÉ par les deux vues (.mmk-btns vue
linéaire ICI, .mmkr-btns vue radiale dans nlm-mindmap-radial.css) — les
classes .mmk-icon-btn/.mmk-c-* vivent ici pour que les deux fichiers CSS
les consomment sans dupliquer les couleurs. Palette dérivée de PALETTE
(nlm-mindmap-radial.js, couleurs de branches) en tons pastel. */
.nlm-mindmap .mmk-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mmk-mid); background: var(--mmk-bg) !important; cursor: pointer; padding: 0; position: relative; }
.nlm-mindmap .mmk-icon-btn svg { width: 17px; height: 17px; color: var(--mmk-mid); }
.nlm-mindmap .mmk-icon-btn:hover { filter: brightness(.96); }
.nlm-mindmap .mmk-icon-btn.is-active { background: var(--mmk-mid) !important; }
.nlm-mindmap .mmk-icon-btn.is-active svg { color: #fff; }
.nlm-mindmap .mmk-c-teal { --mmk-bg: #e6f4f2; --mmk-mid: #4f9d94; }
.nlm-mindmap .mmk-c-green { --mmk-bg: #eaf5ec; --mmk-mid: #5fa873; }
.nlm-mindmap .mmk-c-gold { --mmk-bg: #f7f0e3; --mmk-mid: #b6903f; }
.nlm-mindmap .mmk-c-pink { --mmk-bg: #fbeaf1; --mmk-mid: #c97ba0; }
.nlm-mindmap .mmk-c-blue { --mmk-bg: #e9f1fb; --mmk-mid: #4f7fb3; }
/* Badge menu déroulant (Export Image/Texte) — remplace le "▾" texte devenu
sans objet sur un bouton icône seule. */
.nlm-mindmap .mmk-chev { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1px solid var(--mmk-mid); display: flex; align-items: center; justify-content: center; }
.nlm-mindmap .mmk-chev svg { width: 7px; height: 7px; color: var(--mmk-mid); }
/* .mmk-export NICHÉ dans .mmk-btns/.mmkr-btns (v0.29.1, demande explicite : les
boutons Export doivent rester sur la MÊME ligne que les autres, pas en dessous).
Avant : ligne séparée avec son propre padding/background/justify-content — un
1er essai (spacer margin-left:auto DANS .mmk-btns) pouvait laisser les boutons
Export à gauche quand .mmk-btns passait à la ligne (flex-wrap). Ici .mmk-export
est lui-même UN SEUL item flex de la ligne .mmk-btns/.mmkr-btns : son propre
margin-left:auto le pousse au bord droit DE CET ITEM (donc de la ligne), sans
dépendre du nombre de boutons qui précèdent — et s'il n'y a plus de place, il
passe à la ligne suivante EN BLOC (flex-wrap du parent), jamais scindé entre
ses deux boutons. */
.nlm-mindmap .mmk-export { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.nlm-mindmap .mmk-export-wrap { position: relative; }
.nlm-mindmap [data-tip] { position: relative; }
.nlm-mindmap [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1a365dd9; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 6px; pointer-events: none; z-index: 20; }
.nlm-mindmap [data-tip]:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a365d; z-index: 20; }
/* Infobulles des boutons de BORD (v0.29.2 → v0.29.3, retour utilisateur :
coupées par overflow:hidden du widget, .nlm-mindmap) — même technique que
l'override .mmk-vt-btn ci-dessous (nlm-mindmap-radial.css) : ancrage au
bord du bouton plutôt que centré. TOUS les boutons directs de
.mmk-btns/.mmkr-btns (Ajuster/Développer/Replier/Zoom ±/Plein écran) →
ancrés à GAUCHE (pas seulement le 1er : à v0.29.2, le 2ᵉ bouton
« Tout développer » débordait encore, son texte d'infobulle plus long que
« Ajuster » suffisant à dépasser le bord même centré sur son propre
bouton) ; boutons Export (toujours les plus à droite, .mmk-export poussé
par margin-left:auto) → ancrés à DROITE. Le sélecteur `>` cible les
boutons DIRECTS de la ligne, pas les boutons nichés dans .mmk-export. */
.nlm-mindmap .mmk-btns > [data-tip]:hover::after,
.nlm-mindmap .mmkr-btns > [data-tip]:hover::after {
left: 0; transform: none;
}
.nlm-mindmap .mmk-btns > [data-tip]:hover::before,
.nlm-mindmap .mmkr-btns > [data-tip]:hover::before {
left: 14px; transform: none;
}
/* Boutons Export : infobulle EN DESSOUS plutôt qu'au-dessus (v0.29.4, retour
utilisateur — solution retenue plutôt que de continuer à ajuster le
z-index face à .mmk-vt-btn juste au-dessus, dans .mmk-head : l'export
texte, dernier bouton de la ligne, est géométriquement flush-droite comme
.mmk-vt-btn, donc leurs bulles/boutons peuvent se chevaucher quel que soit
le z-index. En pointant vers le bas, l'infobulle s'étend dans la zone du
SVG/canevas juste en dessous, qui ne contient jamais rien à cet endroit —
aucun risque de chevauchement, indépendamment de tout contexte
d'empilement. Même principe que l'override .mmk-vt-btn (ci-dessous,
nlm-mindmap-radial.css) : bottom auto / top calc(100% + 6px), flèche
retournée (border-bottom-color au lieu de border-top-color). */
.nlm-mindmap .mmk-export .exp-btn[data-tip]:hover::after {
bottom: auto; top: calc(100% + 6px);
left: auto; right: 0; transform: none;
}
.nlm-mindmap .mmk-export .exp-btn[data-tip]:hover::before {
bottom: auto; top: 100%;
left: auto; right: 14px; transform: none;
border-top-color: transparent; border-bottom-color: #1a365d;
}
/* Le menu s'ancre maintenant sur SON PROPRE bouton (.mmk-export-wrap, position:relative
ci-dessus) et non plus sur toute la ligne .mmk-btns : il s'ouvre directement sous
l'intitulé qui l'a déclenché, plutôt qu'à une position fixe de la ligne entière. */
.nlm-mindmap .mmk-menu { position: absolute; top: calc(100% + 4px); right: 0; left: auto; background: #fff; border: 1px solid #dfe3ea; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 6px; min-width: 240px; max-width: calc(100vw - 24px); z-index: 30; display: none; }
.nlm-mindmap .mmk-menu.open { display: block; }
.nlm-mindmap .mmk-menu .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #a0aec0; padding: 6px 8px 2px; font-weight: bold; }
.nlm-mindmap .mmk-menu button { display: block; width: 100%; text-align: left; background: transparent !important; color: #2d3748 !important; padding: 8px 10px; border-radius: 6px; position: static; border: none; cursor: pointer; }
.nlm-mindmap .mmk-menu button:hover { background: #edf4ff !important; }
.nlm-mindmap .mmk-hint { padding: 0 12px 10px; font-size: 12px; color: #718096; background: #fbfcfe; border-bottom: 1px solid #e6e9ef; display: none; }
.nlm-mindmap.mmk-hasmouse .mmk-hint { display: block; }
.nlm-mindmap .mmk-svg { width: 100%; height: 600px; display: block; --markmap-max-width: 340px; cursor: grab; border-top: 1px solid #e6e9ef; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.nlm-mindmap .mmk-svg.mmk-grabbing { cursor: grabbing; }
.nlm-mindmap .mmk-svg .markmap-node:has(> circle) > foreignObject { cursor: pointer; }
.nlm-mindmap .mmk-svg .markmap-node > circle { cursor: pointer; }
.nlm-mindmap .mmk-svg .markmap-node.mmk-foldable > foreignObject { cursor: pointer; }
.nlm-mindmap .mmk-msg { padding: 18px; color: #c05621; font-size: 14px; }
/* Message d'erreur (éditeurs seulement) */
.nlm-error { margin: 10px 0; }
/* ---------- ONGLETS multi-ressources ([nlm_quiz]/[nlm_flashcards] à 2+ id) ---------- */
/* .nlm-tabs-wrap enveloppe plusieurs .nlm-widget (un par id demandé) derrière une
barre d'onglets — n'existe QUE si le shortcode reçoit 2+ id valides (1 seul id
garde le rendu "nu" historique, sans enveloppe, voir NLM_Shortcodes::render_group()).
Reprend les mêmes variables --nlm-* que .nlm-widget (calculées côté PHP depuis
la 1ère ressource du groupe + les mêmes surcharges de shortcode que tous les
widgets du groupe) pour que la barre suive visuellement le thème du contenu
qu'elle encadre, avec les mêmes valeurs de repli si aucune n'est fournie. */
.nlm-tabs-wrap {
--nlm-accent: #2b6cb0;
--nlm-accent-dark: #255a97;
--nlm-radius: 10px;
--nlm-font: Arial, Helvetica, sans-serif;
--nlm-font-size: 16px;
--nlm-max-width: 640px;
max-width: var(--nlm-max-width);
margin: 0 auto;
font-family: var(--nlm-font);
box-sizing: border-box;
}
/* Chaque panneau contient déjà un .nlm-widget complet, qui se centrerait sinon
une 2e fois sur SA PROPRE largeur (potentiellement différente si les réglages
diffèrent d'une ressource à l'autre) — .nlm-tabs-wrap est la seule référence
de largeur/centrage du groupe entier, le widget interne remplit son panneau. */
.nlm-tabs-wrap .nlm-widget { max-width: none; margin: 0; }
.nlm-tabs-bar {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 12px; border-bottom: 2px solid #e2e8f0;
}
/* ⚠️ `!important` sur `:hover`/`.is-active` — piège rencontré en conditions
réelles (thème WordPress de l'utilisateur) : une règle de thème du genre
`:not(.mejs-button) > button:hover, :not(.mejs-button) > button:focus { … }`
a une spécificité plus élevée qu'un simple `.nlm-tabs-btn:hover` (elle combine
un sélecteur de type `button` ET deux pseudo-classes/`:not()`), donc elle
gagne sans `!important` — même famille de piège que `.nlm-tabs-panel[hidden]`
ci-dessous, juste côté spécificité plutôt que côté `[hidden]` natif. Design
"onglet souligné" (pas de boîte pleine) : retenu après essai d'un design en
bouton/boîte pleine, retiré sur retour utilisateur (v0.22.3). */
.nlm-tabs-btn {
font-family: inherit; font-size: calc(var(--nlm-font-size) * 0.8); font-weight: 700;
cursor: pointer; border: none; background: transparent; color: #4a5568;
padding: 8px 16px; border-radius: var(--nlm-radius) var(--nlm-radius) 0 0;
border: #ccc solid 1px !important;
border-bottom: 3px solid transparent; margin-bottom: -2px;
transition: color .15s, border-color .15s;
-webkit-appearance: none; appearance: none;
}
.nlm-tabs-btn:hover { color: var(--nlm-accent) !important; background: #dbe0f5 !important; }
.nlm-tabs-btn.is-active { border: #2e6ab3 solid 2px !important; background: #dbe0f5 !important; color: var(--nlm-accent) !important; border-bottom-color: var(--nlm-accent) !important; font-weight: 800; }
/* Piège CSS [hidden] déjà rencontré 3 fois côté admin sur ce projet (voir
CLAUDE.md) : une règle d'auteur peut battre `[hidden]{display:none}` à
spécificité égale — règle explicite posée dès la création plutôt que
découverte après coup une 4e fois. */
.nlm-tabs-panel[hidden] { display: none !important; }
|