/* Visionneuse de tuto et thème commun : clair, sombre, ou automatique selon le système. Lisible aussi à l'impression. */
:root {
  --fond: #f3f5f9; --carte: #fff; --texte: #172033; --discret: #5a667a; --bord: #dde3ec;
  --accent: #3b5bdb; --accent-texte: #fff; --accent-doux: #e8edff; --juste: #15803d; --faux: #b91c1c;
  --ombre: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%); --rayon: 14px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --fond: #0e1218; --carte: #171d27; --texte: #e6eaf1; --discret: #98a3b5; --bord: #28313f;
  --accent: #7c9cff; --accent-texte: #0b1020; --accent-doux: #1f2a47; --juste: #4ade80; --faux: #f87171;
  --ombre: 0 1px 2px rgb(0 0 0 / 40%); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fond: #0e1218; --carte: #171d27; --texte: #e6eaf1; --discret: #98a3b5; --bord: #28313f;
    --accent: #7c9cff; --accent-texte: #0b1020; --accent-doux: #1f2a47; --juste: #4ade80; --faux: #f87171;
    --ombre: 0 1px 2px rgb(0 0 0 / 40%); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
#racine { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; }
.entete { position: relative; }
.entete-outils { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.resume { color: var(--discret); font-size: 1.1rem; margin: 0 0 24px; }
.sommaire { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 20px; margin-bottom: 24px; }
.sommaire ol { margin: 0; padding-left: 20px; }
.sommaire a { color: var(--accent); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.etape { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); break-inside: avoid; }
.etape-numero { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 20px; font-size: 0.9rem; background: var(--accent); color: var(--accent-texte); display: grid; place-items: center; font-weight: 700; }
.etape-texte > :first-child { margin-top: 0; }
.etape-texte a { color: var(--accent); }
.etape-texte code { background: var(--fond); padding: 1px 6px; border-radius: 4px; }
.etape-texte pre { background: var(--fond); padding: 12px; border-radius: 8px; overflow-x: auto; }
.etape-image { display: block; width: 100%; padding: 0; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: none; cursor: zoom-in; margin-top: 12px; }
.etape-image img { display: block; width: 100%; height: auto; }
.bouton, .quiz-choix, .quiz-deplacer { font: inherit; font-size: 0.95rem; cursor: pointer; border-radius: 10px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); padding: 8px 14px; }
.bouton.petit { padding: 4px 10px; font-size: 0.85rem; }
.bouton:hover, .quiz-choix:hover:not(:disabled) { border-color: var(--accent); }
.bouton:focus-visible, .quiz-choix:focus-visible, .quiz-deplacer:focus-visible, a:focus-visible, .etape-image:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quiz { margin-top: 32px; }
.quiz-question { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 20px; margin-bottom: 12px; }
.quiz-question h3 { margin: 0 0 12px; font-size: 1.05rem; }
.quiz-reponses { display: grid; gap: 8px; }
.quiz-choix { text-align: left; }
.quiz-choix.juste { border-color: var(--juste); background: color-mix(in srgb, var(--juste) 15%, var(--carte)); }
.quiz-choix.faux { border-color: var(--faux); background: color-mix(in srgb, var(--faux) 15%, var(--carte)); }
.quiz-ordre { margin: 0; padding-left: 24px; display: grid; gap: 6px; }
.quiz-ordre li span { margin-right: 8px; }
.quiz-retour, .quiz-score { margin: 4px 0 0; font-weight: 600; }
.quiz-score { font-size: 1.2rem; }
.pied { margin-top: 32px; text-align: center; }
.zoom { max-width: 95vw; max-height: 95vh; padding: 12px; border: 0; border-radius: var(--rayon); background: var(--carte); color: var(--texte); }
.zoom::backdrop { background: rgb(0 0 0 / 70%); }
.zoom img { max-width: 100%; max-height: 80vh; display: block; margin-bottom: 8px; }
@media (max-width: 560px) { .etape { grid-template-columns: 1fr; } }
@media print {
  :root, :root[data-theme='dark'] { --fond: #fff; --carte: #fff; --texte: #000; --bord: #ccc; --accent: #1d3fb8; --accent-texte: #fff; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .sommaire, .pied, .quiz, .entete-outils { display: none; }
  .etape { box-shadow: none; }
}

/* Chapitres, plusieurs captures par étape, encadrés. */
.chapitre { list-style: none; margin-top: 12px; }
.chapitre-titre { font-size: 1.5rem; margin: 8px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--accent); letter-spacing: -0.01em; }
.sommaire-chapitre { font-weight: 600; margin-top: 6px; }
.sommaire-chapitre ol { font-weight: 400; }
.etape-images { display: grid; gap: 12px; margin-top: 12px; }
.etape-figure { margin: 0; }
.etape-figure .etape-image { margin-top: 0; }
.etape-figure figcaption { color: var(--discret); font-size: 0.9rem; margin-top: 4px; }
.encadre { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bord); border-left-width: 5px; background: var(--fond); }
.encadre > :last-child { margin-bottom: 0; }
.encadre p { margin: 4px 0; }
.encadre-titre { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.encadre-info { border-left-color: var(--accent); }
.encadre-info .encadre-titre { color: var(--accent); }
.encadre-astuce { border-left-color: var(--juste); }
.encadre-astuce .encadre-titre { color: var(--juste); }
.encadre-attention { border-left-color: #d97706; }
.encadre-attention .encadre-titre { color: #d97706; }

.chapitre-numero { color: var(--accent); }
.sommaire ol { list-style: none; }
.sommaire-chapitre > ol { padding-left: 18px; }