/* TeamKit — tutoriels (/tuto/) — v1.0.0 — 7 sept. 2026
   Lecture longue sur fond sombre : colonne de texte ~70 caractères, sommaire collant à gauche,
   encadrés « À retenir » / « Si ça ne marche pas », cases à cocher mémorisées (js/tuto.js). */

.tk-tuto-main { padding: 90px 1.25rem 4rem; max-width: 1180px; margin: 0 auto; }

.tk-fil { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.tk-fil a { color: var(--accent-primary); text-decoration: none; }
.tk-fil a:hover { text-decoration: underline; }
.tk-fil-sep { opacity: 0.4; }

.tk-tuto-head { margin-bottom: 1.75rem; }
.tk-tuto-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 0.5rem; }
.tk-tuto-head h1 { font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.2; margin: 0 0 0.5rem; text-wrap: balance; }
.tk-tuto-date { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

.tk-tuto-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.tk-tuto-layout.has-side { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 900px) { .tk-tuto-layout.has-side { grid-template-columns: 1fr; } .tk-side { position: static; } }

.tk-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 0.75rem; }
.tk-side-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.85rem 1rem; }
.tk-side-box summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tk-side-list { margin: 0.6rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; }
.tk-side-list a { color: var(--text-secondary); text-decoration: none; }
.tk-side-list a:hover, .tk-side-list a.active { color: var(--accent-primary); }
.tk-side-retour { font-size: 0.85rem; color: var(--accent-primary); text-decoration: none; }

.tk-tuto-content { min-width: 0; }

/* ---------- Prose ---------- */
.tk-prose { max-width: 86ch; font-size: 1.02rem; line-height: 1.7; color: var(--text-secondary); }
.tk-prose h2 { font-family: var(--font-display); font-size: 1.35rem; color: #fff; margin: 2.4rem 0 0.9rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color); scroll-margin-top: 90px; text-wrap: balance; }
.tk-prose h3 { font-size: 1.1rem; color: #fff; margin: 1.8rem 0 0.6rem; scroll-margin-top: 90px; }
.tk-prose h4 { font-size: 1rem; color: #fff; margin: 1.4rem 0 0.4rem; }
.tk-ancre { opacity: 0; margin-left: 0.4rem; color: var(--text-muted); text-decoration: none; font-weight: 400; font-size: 0.85em; }
.tk-prose h2:hover .tk-ancre, .tk-prose h3:hover .tk-ancre { opacity: 1; }
.tk-prose p { margin: 0 0 1rem; }
.tk-prose a { color: var(--accent-primary); }
.tk-prose strong { color: #fff; }
.tk-prose ul, .tk-prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.tk-prose li { margin: 0.3rem 0; }
.tk-prose li > ul, .tk-prose li > ol { margin: 0.3rem 0 0.3rem; }
.tk-prose hr { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.tk-prose img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border-color); }

.tk-prose code { font-family: var(--font-mono); font-size: 0.86em; background: rgba(255,255,255,0.07); border: 1px solid var(--border-color); border-radius: 5px; padding: 0.1em 0.4em; color: #e8e8f0; }
.tk-prose pre { background: #0b0b12; border: 1px solid var(--border-color); border-radius: 10px; padding: 0.9rem 1rem; overflow-x: auto; margin: 0 0 1.2rem; position: relative; }
.tk-prose pre code { background: none; border: 0; padding: 0; font-size: 0.84rem; line-height: 1.55; color: #d6e8ff; white-space: pre; }
.tk-copier { position: absolute; top: 0.45rem; right: 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; background: rgba(255,255,255,0.08); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; padding: 0.2rem 0.5rem; cursor: pointer; }
.tk-copier:hover { color: #fff; border-color: var(--accent-primary); }

.tk-prose blockquote { margin: 0 0 1.2rem; padding: 0.85rem 1.1rem; border-left: 3px solid var(--accent-primary); background: rgba(0,240,255,0.05); border-radius: 0 10px 10px 0; }
.tk-prose blockquote p:last-child { margin-bottom: 0; }
.tk-prose blockquote.tk-encadre[data-type="✅"] { border-left-color: var(--accent-success); background: rgba(0,255,136,0.06); }
.tk-prose blockquote.tk-encadre[data-type="❓"] { border-left-color: #f59e0b; background: rgba(245,158,11,0.07); }
.tk-prose blockquote.tk-encadre[data-type="⚠️"] { border-left-color: #ef4444; background: rgba(239,68,68,0.07); }

.tk-table { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--border-color); border-radius: 10px; }
.tk-prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tk-prose th, .tk-prose td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.tk-prose th { background: rgba(255,255,255,0.04); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tk-prose tr:last-child td { border-bottom: 0; }
.tk-prose td code { white-space: nowrap; }

.tk-task { list-style: none; margin-left: -1.4rem; }
.tk-task label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.tk-task input { margin-top: 0.35rem; accent-color: var(--accent-primary); flex: 0 0 auto; }
.tk-task input:checked + span { color: var(--text-muted); text-decoration: line-through; }

/* ---------- Sommaire / liste des tutos ---------- */
.tk-sommaire { max-width: none; }
.tk-sommaire p { max-width: 90ch; }
.tk-sommaire .tk-table { max-width: none; }
.tk-sommaire td:first-child { white-space: nowrap; font-family: var(--font-mono); color: var(--accent-primary); }
.tk-tutos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.tk-tuto-card { display: flex; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.tk-tuto-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.tk-tuto-ico { font-size: 2.2rem; line-height: 1; }
.tk-tuto-card h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: #fff; }
.tk-tuto-card p { margin: 0 0 0.5rem; color: var(--text-secondary); font-size: 0.92rem; }
.tk-tuto-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.tk-chapitres { padding-left: 1.4rem; }
.tk-chapitres a { color: var(--accent-primary); }

.tk-nav-chap { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); max-width: 86ch; }
.tk-nav-chap .btn { max-width: 100%; white-space: normal; text-align: center; }
.tk-tuto-aide { max-width: 86ch; color: var(--text-muted); font-size: 0.85rem; }
.tk-tuto-aide a { color: var(--accent-primary); }

.tk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent-primary); z-index: 1001; transition: width 0.1s linear; }

/* ---------- Sommaire v1.1 : intro, cartes de chapitres, ordre de lecture ---------- */
.tk-lead { max-width: 76ch; font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 2rem; }
.tk-lead p { margin: 0 0 0.9rem; }
.tk-lead strong { color: #fff; }
.tk-chap-titre { font-family: var(--font-display); font-size: 1.2rem; color: #fff; margin: 0 0 1rem; }
.tk-chap-grid { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.75rem; }
.tk-chap-card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.85rem 1rem; text-decoration: none; color: inherit; min-height: 74px; transition: border-color 0.15s, transform 0.15s; }
.tk-chap-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.tk-chap-num { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--accent-primary); font-variant-numeric: tabular-nums; min-width: 2.2rem; }
.tk-chap-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tk-chap-t { color: #fff; font-weight: 600; line-height: 1.3; }
.tk-chap-qui { font-size: 0.8rem; color: var(--text-muted); }
.tk-chap-go { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-primary); white-space: nowrap; }
.tk-ordre { max-width: 76ch; background: rgba(0,240,255,0.05); border: 1px solid rgba(0,240,255,0.25); border-radius: 12px; padding: 0.85rem 1.1rem; color: var(--text-secondary); line-height: 1.6; }
.tk-ordre p { margin: 0; }
.tk-ordre strong { color: #fff; }
@media (max-width: 480px) { .tk-chap-grid { grid-template-columns: 1fr; } .tk-chap-go { display: none; } }

/* ---------- Accueil des tutoriels v1.2 : recherche, puces, cartes riches ---------- */
.tk-tuto-sub { max-width: 70ch; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; margin: 0.25rem 0 0; }
.tk-tutos-outils { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin: 0 0 1.25rem; }
.tk-recherche { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 0.5rem 1rem; flex: 1 1 320px; max-width: 520px; }
.tk-recherche:focus-within { border-color: var(--accent-primary); }
.tk-recherche input { background: none; border: 0; outline: 0; color: #fff; font: inherit; width: 100%; }
.tk-recherche input::placeholder { color: var(--text-muted); }
.tk-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tk-puce { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 999px; padding: 0.35rem 0.85rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.tk-puce:hover { border-color: var(--accent-primary); color: #fff; }
.tk-puce.active { background: rgba(0,240,255,0.12); border-color: var(--accent-primary); color: #fff; }
.tk-tutos { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.tk-tuto-card { position: relative; align-items: flex-start; padding: 1.25rem 1.25rem 1.1rem; }
.tk-tuto-card[hidden] { display: none; }
.tk-tuto-body { min-width: 0; flex: 1; }
.tk-tuto-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.tk-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(0,240,255,0.12); color: var(--accent-primary); border: 1px solid rgba(0,240,255,0.3); }
.tk-tag.muted { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-color); text-transform: none; letter-spacing: 0; }
.tk-tag.new { background: rgba(0,255,136,0.1); color: var(--accent-success); border-color: rgba(0,255,136,0.35); }
.tk-tuto-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-top: 0.6rem; }
.tk-tuto-go { position: absolute; right: 1.1rem; bottom: 1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-primary); opacity: 0; transition: opacity 0.15s; }
.tk-tuto-card:hover .tk-tuto-go { opacity: 1; }
.tk-tutos-vide { color: var(--text-muted); padding: 2rem 0; text-align: center; }
.tk-tutos-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 14px; padding: 1.1rem 1.25rem; color: var(--text-secondary); }
.tk-tutos-cta strong { color: #fff; }
@media (max-width: 480px) { .tk-tutos { grid-template-columns: 1fr; } }