/* ─────────────────────────────────────────────────────────────────────────────
   Pages de tutoriel illustré (/tuto-*.html).
   S'appuie sur les jetons de app.css et la mise en page vitrine de site.css :
   aucune couleur en dur ici, pour que le tutoriel suive le site s'il évolue.
   ───────────────────────────────────────────────────────────────────────────── */

.tuto-page { max-width: 860px; margin: 0 auto; padding: 0 24px 88px; }

/* ── Fil d'ariane et titre ─────────────────────────────────────────────────── */
.tuto-fil { font-size: 13.5px; color: var(--muted); margin: 28px 0 10px; }
.tuto-fil a { color: var(--text2); font-weight: 600; }
.tuto-page > h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.tuto-chapo { font-size: 16.5px; color: var(--text2); line-height: 1.65; margin: 0 0 8px; }

/* ── Sommaire local ───────────────────────────────────────────────────────── */
.tuto-sommaire { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 22px; margin: 26px 0 40px; }
.tuto-sommaire h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 10px; }
.tuto-sommaire ol { margin: 0; padding-left: 20px; }
.tuto-sommaire li { margin: 5px 0; font-size: 15px; }
.tuto-sommaire a { color: var(--text); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.tuto-section { margin: 0 0 52px; scroll-margin-top: 80px; }
.tuto-section > h2 { font-size: 23px; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.tuto-section p { font-size: 15.5px; line-height: 1.7; color: var(--text2); margin: 0 0 14px; }
.tuto-section p b, .tuto-section li b { color: var(--text); }
/* Intertitre d'un chapitre qui se subdivise. Sans filet sous le texte : le trait
   est la marque du <h2>, et le redoubler brouillerait la hiérarchie. */
.tuto-section > h3 { font-size: 17px; font-weight: 700; color: var(--text);
  margin: 30px 0 12px; }
.tuto-section > ul { margin: 0 0 18px; padding-left: 20px; }
.tuto-section > ul > li { margin: 0 0 10px; }
.tuto-section > ul > li > p { margin: 0; }

/* ── Étapes numérotées ────────────────────────────────────────────────────── */
.tuto-etapes { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: etape; }
.tuto-etapes > li { position: relative; padding: 0 0 4px 42px; margin: 0 0 22px; counter-increment: etape; }
.tuto-etapes > li::before { content: counter(etape); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tuto-etapes > li > p:first-child { margin-top: 3px; }

/* ── Figures ──────────────────────────────────────────────────────────────── */
.tuto-fig { margin: 18px 0 22px; }
.tuto-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); }
.tuto-fig figcaption { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 9px; }

/* Une capture de téléphone ne doit pas s'étaler sur toute la largeur : à 1200 px
   de large pour 2400 de haut, elle occuperait deux écrans de défilement. */
.tuto-fig.tel img { max-width: 280px; margin: 0 auto; }
.tuto-fig.tel figcaption { text-align: center; }

/* Plusieurs captures de téléphone qui se lisent ensemble (avant / après). */
.tuto-duo { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 18px 0 22px; }
.tuto-duo figure { flex: 0 1 280px; margin: 0; }
.tuto-duo img { display: block; width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); }
.tuto-duo figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }

/* ── Loupe sur les captures ───────────────────────────────────────────────────
   Une capture de téléphone fait 1080 px de large et s'affiche à 280 : la finesse
   est dans le fichier, pas à l'écran. Un appui l'ouvre en grand (cf. tuto.js). */
.tuto-fig img, .tuto-duo img { cursor: zoom-in; }
.tuto-fig img:focus-visible, .tuto-duo img:focus-visible { outline: 3px solid var(--accent2);
  outline-offset: 3px; }

.tuto-loupe { width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  display: none; flex-direction: column; }
.tuto-loupe[open] { display: flex; }
.tuto-loupe::backdrop { background: rgba(13, 27, 42, .9); }

.tuto-loupe-cadre { flex: 1; min-height: 0; overflow: auto; display: flex;
  padding: 60px 16px 10px; }
/* `margin: auto` plutôt que `align-items: center` : centré tant que l'image
   tient, mais une image plus grande que le cadre reste atteignable au
   défilement — le centrage par alignement, lui, rend son bord haut
   inaccessible. */
.tuto-loupe-cadre img { margin: auto; display: block; max-width: 100%;
  max-height: 100%; border-radius: 6px; cursor: zoom-in; }
.tuto-loupe.reelle .tuto-loupe-cadre img { max-width: none; max-height: none;
  width: auto; height: auto; cursor: zoom-out; }

.tuto-loupe-legende { flex: none; margin: 0; padding: 8px 60px 16px;
  text-align: center; font-size: 13.5px; line-height: 1.5; color: #cbd5e1; }
.tuto-loupe-x { position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 17px; line-height: 1; }
.tuto-loupe-x:hover { background: rgba(255, 255, 255, .26); }

/* ── Pastille « Haut de page » ────────────────────────────────────────────────
   Ajoutée par tuto.js, et seulement une fois la page réellement défilée. */
.tuto-haut { position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border: 0; border-radius: 999px; background: var(--navy); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s; }
.tuto-haut.visible { opacity: 1; visibility: visible; transform: none; }
.tuto-haut.masquee { display: none; }
.tuto-haut:hover { background: var(--navy3); }
.tuto-haut span { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .tuto-haut { transition: none; } }

/* ── Tableaux ─────────────────────────────────────────────────────────────────
   Le débordement se pose sur l'enveloppe, jamais sur la table : `overflow` posé
   sur un <table> annule en silence toute colonne `position: sticky`. */
.tuto-tableau { overflow-x: auto; border: 1px solid var(--border);
  border-radius: 10px; margin: 18px 0 22px; }
.tuto-tableau table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tuto-tableau th, .tuto-tableau td { padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: top; }
.tuto-tableau thead th { background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 700; white-space: nowrap; }
.tuto-tableau tbody th { color: var(--text); font-weight: 700; }
.tuto-tableau tr:last-child th, .tuto-tableau tr:last-child td { border-bottom: 0; }
.tuto-tableau .oui { color: var(--success); font-weight: 700; }
.tuto-tableau .non { color: var(--muted); }

/* ── Encadrés ─────────────────────────────────────────────────────────────── */
.tuto-note { border-left: 3px solid var(--accent2); background: var(--primary-l);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 18px 0 22px; }
.tuto-note p { margin: 0; font-size: 14.5px; color: var(--text); }
.tuto-note p + p { margin-top: 8px; }

.tuto-attention { border-left: 3px solid var(--warn); background: #fff7ed;
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 18px 0 22px; }
.tuto-attention p { margin: 0; font-size: 14.5px; color: var(--text); }
.tuto-attention p + p { margin-top: 8px; }

/* Chapitre annoncé mais pas encore illustré : on le dit, on ne le masque pas. */
.tuto-bientot { border: 1px dashed var(--border); border-radius: 10px; padding: 16px 18px;
  margin: 18px 0 22px; background: var(--surface-2); }
.tuto-bientot p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ── Navigation bas de page ───────────────────────────────────────────────── */
.tuto-suite { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 22px; margin-top: 12px; }
.tuto-suite a { font-size: 15px; font-weight: 700; color: var(--primary-d); }

/* ── Cartes du sommaire général ───────────────────────────────────────────── */
.tuto-card.lien { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.tuto-card.lien:hover { border-color: var(--accent2); box-shadow: var(--shadow); }
.tuto-card .compte { font-size: 12.5px; color: var(--muted); margin-top: 10px; display: block; }

@media (max-width: 640px) {
  .tuto-page { padding: 0 18px 64px; }
  .tuto-page > h1 { font-size: 27px; }
  .tuto-section > h2 { font-size: 20px; }
  .tuto-fig.tel img { max-width: 100%; }
  .tuto-haut { right: 14px; bottom: 14px; padding: 9px 14px; font-size: 13px; }
  .tuto-loupe-cadre { padding: 56px 8px 6px; }
  .tuto-loupe-legende { padding: 8px 16px 14px; font-size: 12.5px; }
}

/* ── Impression ───────────────────────────────────────────────────────────────
   Chaque partie doit pouvoir être remise à un client sur papier ou en PDF : on
   retire la navigation du site, on évite de couper une figure de sa légende. */
@media print {
  .site-header, .site-mobile-nav, .site-footer, .tuto-suite, .tuto-fil { display: none !important; }
  .tuto-haut, .tuto-loupe { display: none !important; }
  .tuto-fig img, .tuto-duo img { cursor: auto; }
  .tuto-tableau { overflow: visible; page-break-inside: avoid; }
  .tuto-page { max-width: none; padding: 0; }
  .tuto-section { page-break-inside: auto; margin-bottom: 28px; }
  .tuto-section > h2 { page-break-after: avoid; }
  .tuto-fig, .tuto-duo figure, .tuto-etapes > li { page-break-inside: avoid; }
  .tuto-fig img, .tuto-duo img { box-shadow: none; }
  .tuto-fig.tel img { max-width: 62mm; }
  a { color: inherit; text-decoration: none; }
}