/* Tutoriels en images (documentation) : accueil /documentation/tutoriels/, pages des tutos, blocs
   injectés dans les pages d'aide (src/lib/tutoriels.mjs). Charte « Clinique douce » : uniquement les
   jetons --c-* / --app-* de public/css/clinique.css, chargée après cette feuille. */

.tuto-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tuto-page p { color: var(--c-ink-soft); }
.tuto-page h2 { margin-top: 3rem; }
.tuto-page ul, .tuto-page ol { list-style: none; margin: 0; padding: 0; }
/* sections sans marge propre (la charte donne 64 px de marge à tout <section>) */
.tuto-steps, .tuto-chap, .tuto-catalogue, .tuto-theme, .tuto-more { padding: 0; }
/* le défilement horizontal de la vitrine ne doit pas élargir la page (élément flex du gabarit) */
.layout > .main-content { min-width: 0; }

/* ── fil d'Ariane, en-tête ── */
.tuto-crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .9rem; color: var(--c-ink-soft); margin-bottom: 1.25rem; }
.tuto-crumbs a { text-decoration: none; }
.tuto-crumbs a:hover { text-decoration: underline; }
.tuto-hero h1 { margin-bottom: 1rem; }
.tuto-lede { font-size: 1.15rem !important; color: var(--c-ink) !important; max-width: 46rem; }
.tuto-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: -.5rem !important; color: var(--c-ink-soft); font-size: .95rem; }
.tuto-facts li { display: flex; align-items: center; gap: 8px; }
.tuto-facts svg.icon { color: var(--c-accent); font-size: 1.1rem; }
.tuto-prev-note { margin-top: 1rem; font-size: .95rem; }

/* ── vitrine (accueil des tutoriels) ── */
.tuto-vitrine { background: var(--c-deep); border-radius: var(--r-lg); padding: 28px 28px 32px; margin: 2rem 0 1rem; color: var(--c-surface); }
.tuto-vitrine h2 { margin: 0 0 1.5rem; color: var(--c-surface) !important; }
.tuto-vitrine h2::before { background: var(--c-accent-soft); }
.vitrine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 22px; }
.vitrine-item { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.vitrine-phone { position: relative; display: block; width: 78%; max-width: 200px; margin: 0 auto; aspect-ratio: 540 / 1169;
	border: 7px solid var(--c-ink); border-radius: 28px; overflow: hidden; background: var(--c-ink);
	box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--c-ink) 80%, transparent); transition: transform .3s ease; }
.vitrine-item:hover .vitrine-phone { transform: translateY(-4px) rotate(-1deg); }
.vitrine-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.vitrine-layer.on { opacity: 1; }
.vitrine-sub, .player-sub { position: absolute; left: 6%; right: 6%; bottom: 15%; padding: 6px 8px; border-radius: 8px; text-align: center;
	background: color-mix(in srgb, var(--c-ink) 90%, transparent); color: var(--c-surface); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.vitrine-sub { font-size: .66rem; transition: opacity .25s ease; }
.vitrine-sub.top, .player-sub.top { bottom: auto; top: 9%; }
.vitrine-sub.fade { opacity: 0; }
.vitrine-body { display: grid; align-content: start; gap: 6px; }
.vitrine-body p { margin: 0 !important; }
.vitrine-theme { font-size: .78rem !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent-soft) !important; }
.vitrine-body h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; color: var(--c-surface); }
.tuto-vitrine a { color: var(--c-surface) !important; }
.vitrine-body h3 a { text-decoration: none; }
.vitrine-body h3 a:hover { text-decoration: underline; }
.vitrine-intro { font-size: .95rem !important; color: var(--c-accent-soft) !important; line-height: 1.5; }
.vitrine-suite { font-size: .92rem !important; color: var(--c-accent-soft) !important; }
.vitrine-suite a { font-weight: 700; }
@media (max-width: 700px) {
	.tuto-vitrine { padding: 22px 0 24px; margin-left: -4px; margin-right: -4px; }
	.tuto-vitrine h2 { padding: 0 20px; }
	.vitrine-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 20px 6px; scrollbar-width: thin; }
	.vitrine-item { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ── recherche et filtres ── */
.tuto-toolbar { display: grid; gap: 12px; margin: 0 0 1.5rem; }
.tuto-search { position: relative; }
.tuto-search svg.icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-ink-soft); font-size: 1.15rem; pointer-events: none; }
.tuto-search input { width: 100%; font: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-surface);
	border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 12px 18px 12px 44px; }
.tuto-search input::placeholder { color: var(--c-ink-soft); }
.tuto-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tuto-chip { font: inherit; font-size: .9rem; font-weight: 600; color: var(--c-ink); background: var(--c-surface);
	border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer; }
.tuto-chip:hover { border-color: var(--c-accent); }
.tuto-chip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface); }
.tuto-count { margin: 0 !important; font-size: .9rem; }
.tuto-empty { padding: 1rem 0; }

/* ── listes de tutos ── */
.tuto-theme { margin-top: 2.25rem; scroll-margin-top: 80px; }
.tuto-theme h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0 0 .25rem; }
.tuto-theme-icon { color: var(--c-accent); }
.tuto-theme-intro { margin: 0 0 1rem !important; font-size: 1rem !important; }
.tuto-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.tuto-tile-link { display: flex; gap: 14px; height: 100%; padding: 12px; text-decoration: none; background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--r-md); transition: border-color .2s ease, box-shadow .2s ease; }
.tuto-tile-link:hover { border-color: var(--c-accent); box-shadow: var(--shadow-hover); }
.tuto-thumb { flex: 0 0 74px; height: 112px; overflow: hidden; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-bg); }
.tuto-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tuto-tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tuto-tile-title { font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.tuto-tile-link:hover .tuto-tile-title { color: var(--c-accent-ink); }
.tuto-tile-intro { font-size: .88rem; color: var(--c-ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tuto-meta { margin-top: auto; font-size: .78rem; color: var(--c-ink-soft); }

/* ── lecteur animé ── */
.tuto-player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin: 2rem 0 1rem;
	padding: 22px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.tuto-player[hidden] { display: none; }
.player-stages { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; width: 250px; }
.tuto-player.dual .player-stages { width: 420px; }
.player-phone { display: grid; gap: 6px; min-width: 0; transition: opacity .4s ease; }
.player-phone.dim { opacity: .45; }
.player-label { font-size: .75rem; font-weight: 700; text-align: center; color: var(--c-ink-soft); }
.player-screen { margin: 0; position: relative; aspect-ratio: 540 / 1169; border: 7px solid var(--c-ink); border-radius: 28px; overflow: hidden; background: var(--c-ink); }
.player-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.player-layer.on { opacity: 1; }
.player-sub { font-size: .74rem; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.tuto-player.dual .player-sub { font-size: .64rem; }
.player-sub.show { opacity: 1; transform: none; }
.player-cover { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding: 34% 20px 20px; border-radius: 28px;
	background: var(--c-deep); color: var(--c-surface); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.tuto-player.dual .player-cover { padding-top: 22%; }
.player-cover.on { opacity: 1; pointer-events: auto; }
.player-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-soft); }
.player-cover-title { font-size: 1.35rem; line-height: 1.15; text-wrap: balance; }
.player-cover p { margin: 0 !important; color: var(--c-accent-soft) !important; font-size: .92rem !important; line-height: 1.45; }
.player-big { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; border: 0;
	display: grid; place-items: center; background: var(--c-surface); color: var(--c-deep); cursor: pointer; font-size: 1.7rem; }
.player-big[hidden] { display: none; }
.player-console { display: grid; gap: 14px; min-width: 0; }
.player-now { margin: 0 !important; font-weight: 600; color: var(--c-ink) !important; min-height: 3em; }
.player-bar { position: relative; height: 10px; border-radius: 6px; background: var(--c-line); cursor: pointer; }
.player-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--c-accent); }
.player-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.player-ctrl button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--c-ink);
	background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; }
.player-ctrl button.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface); }
.player-time { margin-left: auto; font-size: .85rem; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
	.tuto-player { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 16px; }
	.player-stages { width: min(240px, 100%); }
	.tuto-player.dual .player-stages { width: 100%; gap: 8px; }
	.tuto-player.dual .player-sub { font-size: .58rem; padding: 4px 5px; }
	.tuto-player.dual .player-cover { padding: 18% 14px 14px; }
	.player-console { width: 100%; }
}

/* ── étapes ── */
.tuto-chap { margin-top: 2rem; }
.tuto-chap h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 1.25rem; }
.tuto-chap-num { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-accent-ink);
	background: var(--c-accent-soft); border-radius: var(--r-pill); padding: 3px 10px; }
.tuto-shot { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 24px; scroll-margin-top: 80px; }
.tuto-shot-img { margin: 0; }
.tuto-shot-img img { display: block; width: 100%; height: auto; border: 6px solid var(--c-ink); border-radius: 24px; background: var(--c-ink); }
.tuto-shot-text { display: grid; justify-items: start; gap: 8px; }
.tuto-shot-text p { margin: 0 !important; font-size: 1.08rem !important; color: var(--c-ink) !important; line-height: 1.5; }
.tuto-shot-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: var(--c-surface); font-weight: 700; font-size: .9rem; }
.tuto-side { font-size: .78rem; font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; background: var(--app-sante); color: var(--app-sante-ink); }
.tuto-side.side-pro { background: var(--app-refuge); color: var(--app-refuge-ink); }
@media (max-width: 600px) {
	.tuto-shot { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
	.tuto-shot-img img { border-width: 4px; border-radius: 16px; }
	.tuto-shot-text p { font-size: 1rem !important; }
}

/* ── résultat, liens ── */
.tuto-outro { margin-top: 2.5rem; padding: 4px 24px 22px; background: var(--c-accent-soft); border-radius: var(--r-md); }
.tuto-outro h2 { margin-top: 1.25rem; }
.tuto-outro-title { font-size: 1.2rem !important; font-weight: 700; color: var(--c-ink) !important; margin-bottom: .5rem !important; }
.tuto-outro p { color: var(--c-ink) !important; }
.tuto-outro p:last-child { margin-bottom: 0; }
.tuto-next { font-weight: 600; }
.tuto-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tuto-help a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; text-decoration: none;
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.tuto-help a:hover { border-color: var(--c-accent); }
.tuto-help svg.icon { grid-row: span 2; font-size: 1.4rem; color: var(--c-accent); }
.tuto-help span { font-weight: 700; color: var(--c-ink); }
.tuto-help small { color: var(--c-ink-soft); font-size: .8rem; }
.tuto-back { margin-top: 1.5rem; }
.tuto-back a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* ── blocs injectés dans les pages d'aide ── */
.tuto-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 1.5rem 0; padding: 18px 20px; text-decoration: none;
	background: var(--c-deep); border-radius: var(--r-md); }
.tuto-banner-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-deep); font-size: 1.4rem; flex: 0 0 auto; }
.tuto-banner-icon svg.icon { margin: 0 !important; font-size: 1.4rem !important; color: var(--c-deep) !important; }
.tuto-banner-text { display: grid; gap: 2px; flex: 1 1 260px; }
.tuto-banner-text strong { color: var(--c-surface); font-size: 1.1rem; }
.tuto-banner-text span { color: var(--c-accent-soft); font-size: .95rem; }
.tuto-banner-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-deep); background: var(--c-surface); border-radius: var(--r-pill); padding: 8px 16px; }
.tuto-banner-go svg.icon { margin: 0 !important; font-size: 1rem !important; color: var(--c-deep) !important; }
.tuto-related { margin-top: 3rem; padding-top: .5rem; border-top: 1px solid var(--c-line); }
.tuto-mini-list { list-style: none; margin: 0 0 1rem !important; padding: 0; display: grid; gap: 8px; }
.tuto-mini { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; text-decoration: none;
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.tuto-mini:hover { border-color: var(--c-accent); }
.tuto-mini-title { font-weight: 700; color: var(--c-accent-ink); }
.tuto-mini-meta { font-size: .85rem; color: var(--c-ink-soft); }

@media (prefers-reduced-motion: reduce) {
	.vitrine-layer, .vitrine-sub, .vitrine-phone, .player-layer, .player-sub, .player-cover, .player-phone { transition: none !important; }
	.vitrine-item:hover .vitrine-phone { transform: none; }
}