/* Lecteur de leçon, blocs de contenu, schémas et questions. */

.badge--success { background: var(--success-soft); color: var(--success); }

.loading { display: flex; align-items: center; gap: 10px; padding: var(--space-6); color: var(--text-2); }
.loading__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

/* ---------- En-tête et barre d'outils ---------- */
.lesson-head { margin-bottom: var(--space-4); }
.lesson-head__module { font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); }
.lesson-head__title { font-size: var(--fs-2xl); margin: 4px 0 10px; }
.lesson-head__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-head__intro { margin-top: var(--space-4); font-size: var(--fs-lg); color: var(--text-2); max-width: 75ch; }

.lesson-toolbar {
  position: sticky; top: var(--header-h); z-index: 20;
  margin: var(--space-4) calc(-1 * var(--space-2)) var(--space-5);
  padding: var(--space-3) var(--space-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.lesson-toolbar .levels { margin-bottom: var(--space-2); }
.lesson-toolbar .lesson-path { padding: 0; background: none; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.lesson-path li { flex: none; padding: 0; }
.lesson-path a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.lesson-path a:hover { color: var(--primary); }
@media (max-width: 639px) { .lesson-toolbar { position: static; } }

/* ---------- Analogie ---------- */
.analogy {
  display: flex; gap: 14px; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  border-radius: var(--radius-lg); background: var(--warning-soft); border-left: 4px solid var(--warning);
}
.analogy__icon { font-size: 1.6rem; line-height: 1; }
.analogy__title { font-weight: 750; color: var(--warning); margin-bottom: 4px; }

/* ---------- Étapes ---------- */
.lesson-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.lstep, .question, .widget, .quiz-list, .quiz-list__item, .cli-static, .term { min-width: 0; max-width: 100%; }
.table-wrap, .diagram, .lesson-path { max-width: 100%; }
.quiz-list { grid-template-columns: minmax(0, 1fr); }
.lstep { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); scroll-margin-top: 150px; }
.lstep__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.lstep__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.lstep__sub { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.lstep__lvl { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.lstep--errors .lstep__icon { background: var(--danger-soft); color: var(--danger); }
.lstep--quiz .lstep__icon { background: var(--success-soft); color: var(--success); }
.lstep--exercise .lstep__icon { background: var(--warning-soft); color: var(--warning); }
.lstep > * + * { margin-top: var(--space-4); }
.lstep > .lstep__title + * { margin-top: 0; }
@media (max-width: 639px) { .lstep { padding: var(--space-4); } .lstep__title { font-size: var(--fs-lg); } }

/* ---------- Texte ---------- */
.prose { max-width: 78ch; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p { margin-top: var(--space-3); }
.prose ul, .prose ol, .prose-list { padding-left: 1.3em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.prose li code, .prose-list li code { overflow-wrap: anywhere; }
.prose ul + ul { margin-top: var(--space-3); }
.prose code, .prose-list code, .table code, .mini-card code, .feedback code, .question code, .keypoints code, .pitfalls code, .reveal code, .flow code {
  padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: .88em;
}
/* Touches du clavier (leçons du parcours Bureautique, M29) */
.prose kbd, .prose-list kbd, .table kbd, .callout kbd, .keypoints kbd, .reveal kbd, .flow kbd, .question kbd, .feedback kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  background: var(--surface); font: 600 .82em/1.4 var(--font-mono); white-space: nowrap;
}
.prose pre { max-width: 100%; overflow-x: auto; padding: var(--space-3); border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.prose pre code { padding: 0; border: 0; background: none; }
.prose strong { color: var(--text); }
.prose .term-def { font-weight: 700; color: var(--primary); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: left; padding: 10px 14px; font-weight: 700; color: var(--text-2); caption-side: top; }
.table th, .table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.table thead th { background: var(--surface-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); border-top: 0; }
.table tbody th { font-weight: 700; white-space: nowrap; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 40%, transparent); }

/* ---------- Mini-cartes, flux, révélations ---------- */
.mini-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.mini-card { padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.mini-card__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); margin-bottom: 8px; }
.mini-card__title { font-weight: 750; margin-bottom: 4px; }
.mini-card__text { font-size: var(--fs-sm); color: var(--text-2); }

.flow { list-style: none; display: grid; gap: 0; max-width: 560px; }
.flow li { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0 22px; }
.flow li:not(:last-child)::after { content: "↓"; position: absolute; left: 13px; bottom: 0; color: var(--text-3); font-weight: 700; }
.flow__n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: var(--fs-sm); }
.flow__t { padding: 8px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); flex: 1; }
.flow li:last-child .flow__t { border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.flow--h { max-width: none; display: flex; flex-wrap: wrap; gap: 8px 4px; }
.flow--h li { padding: 0; }
.flow--h li:not(:last-child)::after { content: "→"; position: static; margin-left: 4px; }
.flow--h .flow__n { display: none; }

.reveal { display: grid; gap: 8px; }
.reveal__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.reveal__item summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.reveal__item summary::-webkit-details-marker { display: none; }
.reveal__item summary::after { content: "Voir la réponse"; margin-left: auto; font-size: var(--fs-xs); color: var(--primary); font-weight: 700; white-space: nowrap; }
.reveal__item[open] summary::after { content: "Masquer"; }
.reveal__n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); font-weight: 800; font-size: var(--fs-xs); }
.reveal__q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reveal__a { padding: 0 14px 14px 50px; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .reveal__item summary { flex-wrap: wrap; }
  .reveal__item summary::after { margin-left: 36px; }
  .reveal__a { padding-left: 14px; }
}

/* ---------- À retenir, pièges, fin de leçon ---------- */
.keypoints, .pitfalls { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); }
.keypoints { background: var(--primary-soft); }
.pitfalls { background: var(--danger-soft); }
.keypoints h2, .pitfalls h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.keypoints ul, .pitfalls ul { padding-left: 1.3em; display: grid; gap: 6px; }

.lesson-finish {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px dashed var(--border-strong);
}
.lesson-finish__title { font-weight: 750; font-size: var(--fs-lg); }
.lesson-finish .btn-row { margin-top: 0; }

/* ---------- Schémas ---------- */
.diagram { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; }
.diagram figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.dg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; font-family: var(--font-sans); }
.dg-body { fill: var(--surface); stroke: var(--nc, var(--primary)); stroke-width: 2; }
.dg-body--fw { stroke: var(--danger); }
.dg-mark { fill: none; stroke: var(--nc, var(--primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-screen { fill: color-mix(in srgb, var(--nc, var(--primary)) 18%, var(--surface)); stroke: none; }
.dg-led { fill: var(--nc, var(--primary)); }
.dg-glyph-text { fill: var(--nc, var(--primary)); font-size: 10px; font-weight: 800; }
.dg-node--router { --nc: var(--d3); }
.dg-node--switch, .dg-node--l3switch { --nc: var(--d1); }
.dg-node--firewall { --nc: var(--danger); }
.dg-node--ap, .dg-node--wlc { --nc: var(--d2); }
.dg-node--cloud { --nc: var(--text-3); }
.dg-node--server { --nc: var(--d4); }
.dg-node.is-highlight .dg-body { stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nc, var(--primary)) 60%, transparent)); }
.dg-label { fill: var(--text); font-size: 13px; font-weight: 700; }
.dg-sub { fill: var(--text-2); font-size: 11px; font-family: var(--font-mono); }
.dg-link line { stroke: var(--lc, var(--border-strong)); stroke-width: 2.5; }
.dg-link--wireless line { stroke-dasharray: 3 6; stroke-linecap: round; }
.dg-link--serial line { stroke: var(--lc, var(--d5)); stroke-dasharray: 10 4; }
.dg-link--trunk line { stroke-width: 5; stroke: var(--lc, var(--d2)); }
.dg-link--wan line { stroke-dasharray: 2 5; stroke-linecap: round; stroke-width: 3; }
.dg-link--active line { stroke: var(--lc, var(--success)); stroke-width: 3.5; }
.dg-link--blocked line { stroke: var(--lc, var(--text-3)); stroke-dasharray: 6 5; }
.dg-block circle { fill: var(--danger); }
.dg-block path { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.dg-port { fill: var(--text-2); font-size: 10.5px; font-family: var(--font-mono); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.dg-link-label rect { fill: var(--surface); stroke: var(--border-strong); }
.dg-link-label text { fill: var(--text-2); font-size: 11px; font-family: var(--font-mono); font-weight: 600; }
.dg-zone rect { fill: color-mix(in srgb, var(--zc) 9%, transparent); stroke: color-mix(in srgb, var(--zc) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg-zone text { fill: var(--zc); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.dg-packet circle { fill: var(--pc); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px var(--pc)); }
.dg-packet text { fill: var(--text); font-size: 11px; font-weight: 800; paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }

.dg-seq-actor rect { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.dg-seq-actor text { fill: var(--text); font-size: 13px; font-weight: 750; }
.dg-seq-life { stroke: var(--border-strong); stroke-dasharray: 4 5; }
.dg-seq-msg line { stroke: var(--mc, var(--primary)); stroke-width: 2.2; }
.dg-seq-msg text { fill: var(--text); font-size: 12.5px; font-weight: 700; }
.dg-seq-msg .dg-seq-note { fill: var(--text-2); font-size: 11px; font-weight: 500; font-family: var(--font-mono); }
.dg-seq-head { fill: var(--primary); }
.dg-seq-msg { animation: seq-in .5s var(--ease) both; animation-delay: var(--d); }
@keyframes seq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Questions ---------- */
.quiz-list { display: grid; gap: var(--space-4); }
.question { padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.question__head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.question__prompt { font-weight: 650; font-size: var(--fs-lg); margin-bottom: var(--space-3); }
/* Schéma en image (bloc « figure ») : fond blanc fixe, car les SVG ont un texte noir sur fond transparent */
.lfigure { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); background: #fff; text-align: center; }
.lfigure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.lfigure figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: #444; }
.lfigure__zoom { display: block; cursor: zoom-in; text-decoration: none; }
.lfigure__hint { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius); background: rgba(255, 255, 255, .92); border: 1px solid #ccc; color: #333; font-size: var(--fs-xs, .75rem); }
.lfigure__hint svg { width: 14px; height: 14px; }
/* Fiche résumé PDF (bloc « fiche ») */
.fiche { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.fiche__icon { display: inline-flex; color: var(--primary); }
.fiche__txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.fiche__txt span { font-size: var(--fs-sm); color: var(--text-3); }
/* Testlet : scénario commun à plusieurs questions, rappelé au-dessus de chacune */
.testlet { margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); border-left: 4px solid var(--primary); background: var(--surface-2); overflow-wrap: anywhere; }
.testlet__kicker { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.testlet__title { font-weight: 700; margin: 2px 0 var(--space-2); }
.testlet p:last-child { margin-bottom: 0; }
.testlet .terminal--static { margin-top: var(--space-2); }
/* Adresses IPv6, sorties IOS… : un mot très long se coupe plutôt que d'élargir la page */
.question__prompt, .q-choice, .feedback, .q-match__left { overflow-wrap: anywhere; }
.q-choice > * { min-width: 0; }
.question .terminal { margin-bottom: var(--space-3); }
.question .diagram { margin-bottom: var(--space-3); }
.q-choices { display: grid; gap: 8px; }
.q-choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.q-choice:hover { border-color: var(--border-strong); background: var(--surface-2); }
.q-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.q-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.q-choice__letter { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-size: var(--fs-sm); }
.q-choice:has(input:checked) .q-choice__letter { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.q-choice.is-correct { border-color: var(--success); background: var(--success-soft); }
.q-choice.is-correct .q-choice__letter { background: var(--success); color: var(--on-success); border-color: var(--success); }
.q-choice.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.q-choice.is-wrong .q-choice__letter { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.q-choice:has(input:disabled) { cursor: default; }
.question__actions { margin-top: var(--space-3); }

.q-command { flex-direction: row; align-items: center; gap: 0; padding: 0 0 0 12px; border-radius: 10px; background: #0B1220; border: 1px solid #1E2A40; }
.q-command__prompt { color: #7FD4F7; font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; }
.q-command input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; color: #E7EDF6; font-family: var(--font-mono); min-height: 46px; padding: 0 10px; }
.q-command input:focus-visible { outline: none; }
.q-command:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.q-match { display: grid; gap: 8px; }
.q-match__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); }
.q-match__left { font-weight: 700; }
.q-match select { min-height: 40px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); padding: 0 8px; }
.q-match__row.is-correct { border-color: var(--success); background: var(--success-soft); }
.q-match__row.is-wrong { border-color: var(--danger); background: var(--danger-soft); }

.feedback { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius); display: grid; gap: 8px; }
.feedback--ok { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.feedback--ko { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.feedback__title { font-weight: 800; font-size: var(--fs-lg); }
.feedback__why { padding-left: 1.2em; color: var(--text-2); display: grid; gap: 4px; }

/* ---------- Encapsulation (bloc HTML dédié) ---------- */
.encap { display: grid; gap: 6px; max-width: 620px; font-size: var(--fs-sm); font-weight: 700; }
.encap__row { display: flex; align-items: stretch; gap: 0; }
.encap__label { width: 130px; flex: none; color: var(--text-2); font-weight: 650; display: flex; align-items: center; }
.encap__parts { display: flex; flex: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.encap__parts span { padding: 8px 10px; text-align: center; white-space: nowrap; }
.encap__h2 { background: color-mix(in srgb, var(--d4) 25%, var(--surface)); }
.encap__h3 { background: color-mix(in srgb, var(--d6) 28%, var(--surface)); }
.encap__h4 { background: color-mix(in srgb, var(--d3) 25%, var(--surface)); }
.encap__data { background: color-mix(in srgb, var(--d2) 22%, var(--surface)); flex: 1; }
.encap__t2 { background: color-mix(in srgb, var(--d4) 25%, var(--surface)); }
.encap__bits { background: color-mix(in srgb, var(--d1) 22%, var(--surface)); flex: 1; font-family: var(--font-mono); letter-spacing: .1em; }
.encap { grid-template-columns: minmax(0, 1fr); }
.encap__parts, .encap__parts span { min-width: 0; }
@media (max-width: 560px) { .encap__label { width: 90px; } .encap__parts span { padding: 6px 4px; font-size: 11px; white-space: normal; overflow-wrap: anywhere; } }

/* ---------- Structure d'une adresse ou d'un en-tête (bloc « fields ») ---------- */
.fields { margin: 0; display: grid; gap: 8px; }
.fields__row { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.fields__label { width: 140px; flex: none; display: flex; align-items: center; font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); }
.fields__parts { display: flex; flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fields__seg { flex: var(--w) 1 0; min-width: 0; display: grid; align-content: center; gap: 2px; padding: 8px 6px; text-align: center;
  background: color-mix(in srgb, var(--fc) 20%, var(--surface)); border-right: 1px solid var(--border); }
.fields__seg:last-child { border-right: 0; }
.fields__t { font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.fields__s { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.fields__t code, .fields__s code { font-size: .92em; }
.fields figcaption { font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
@media (max-width: 560px) {
  .fields__row { flex-direction: column; gap: 4px; }
  .fields__label { width: auto; }
  .fields__seg { padding: 6px 3px; }
  .fields__t { font-size: var(--fs-xs); }
}
/* Schémas et fiches (#/ressources et page de module, js/views/resources.js) */
.res-schema { display: flex; flex-direction: column; gap: var(--space-2); }
.res-schema__title { font-size: var(--fs-md, 1rem); margin: 0; }
.res-schema .lfigure { margin: 0; }
.res-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.res-link svg { width: 16px; height: 16px; }
.res-fiches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.res-fiche { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.res-fiche__icon { display: inline-flex; color: var(--primary); }
.res-fiche__txt { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 2px; }
.res-box { display: flex; flex-direction: column; gap: var(--space-3); }
.res-thumb { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.res-thumb img { width: 96px; height: 64px; object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.res-thumb span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-thumb small { color: var(--text-3); }
.res-anim { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.res-anim:hover { border-color: var(--primary); }
.res-anim small { color: var(--text-3); }
/* Écrans redessinés (étape « À l'écran ») : légende des repères, un par ligne */
.lstep--screen .lfigure figcaption, .res-schema .lfigure figcaption { text-align: left; line-height: 1.6; }