/* tutoriels.css — page « Tutoriels » (octobre 2026) : hero avec recherche, rail de thèmes, cartes sobres et contrastées */
.tt-hero { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px 32px; padding:34px 36px; border-radius:22px; color:#FFFFFF; background:linear-gradient(120deg, #2E1065 0%, #5B21B6 55%, #7C3AED 100%); border:2px solid #2E1065; box-shadow:0 18px 36px -22px rgba(46,16,101,.8) }
.tt-hero .wm { position:absolute; right:-18px; top:-34px; font-size:230px; line-height:1; color:#FFFFFF; opacity:.07; pointer-events:none; transform:rotate(-8deg) }
.tt-hero-in { position:relative; flex:1 1 520px; max-width:760px; min-width:0 }
.tt-kick { display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4); font:800 12.5px Inter, sans-serif; letter-spacing:.06em }
.tt-kick .sep { opacity:.6 }
.tt-hero h1 { margin:12px 0 8px; font:900 clamp(30px, 4.2vw, 44px)/1.05 Inter, sans-serif; letter-spacing:-.02em; color:#FFFFFF }
.tt-hero p { margin:0; max-width:680px; font:500 16px/1.6 Inter, sans-serif; color:#EDE9FE; text-align:justify; hyphens:auto }
.tt-search { display:flex; align-items:center; gap:12px; margin-top:20px; padding:0 18px; height:54px; border-radius:16px; background:#FFFFFF; border:3px solid #FFFFFF; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); cursor:text }
.tt-search:focus-within { border-color:#22D3EE; box-shadow:0 0 0 4px rgba(34,211,238,.35) }
.tt-search i { font-size:22px; color:#5B21B6 }
.tt-search input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:600 16px Inter, sans-serif; color:#0F172A }
.tt-search input::placeholder { color:#64748B; font-weight:500 }
.tt-stats { position:relative; display:flex; gap:12px; margin:0; padding:0; list-style:none }
.tt-stats li { display:flex; flex-direction:column; min-width:96px; padding:12px 16px; border-radius:14px; background:rgba(15,23,42,.35); border:1.5px solid rgba(255,255,255,.28); font:600 12.5px/1.3 Inter, sans-serif; color:#DDD6FE }
.tt-stats b { font:900 28px/1 Inter, sans-serif; color:#FFFFFF; margin-bottom:4px }

.tt-note { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0; padding:12px 18px; border-radius:14px; background:#ECFDF5; border:2px solid #059669; color:#064E3B; font:500 14.5px/1.5 Inter, sans-serif }
.tt-note > i { font-size:22px; color:#047857 }
.tt-note > span { flex:1 1 320px }
.tt-note a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; background:#047857; color:#FFFFFF; font:800 13.5px Inter, sans-serif; text-decoration:none; border:2px solid #064E3B }
.tt-note a:hover { background:#064E3B }

.tt-wrap { display:grid; grid-template-columns:268px minmax(0, 1fr); gap:26px; align-items:start }
.tt-rail { position:sticky; top:86px; padding:16px; border-radius:18px; background:#FFFFFF; border:2px solid #1E293B; max-height:calc(100vh - 110px); overflow:auto }
.tt-rail h2 { display:flex; align-items:center; gap:8px; margin:0 0 10px; font:900 13px Inter, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#334155 }
.tt-ths { display:flex; flex-direction:column; gap:4px }
.tt-th { --k:#6D28D9; display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border-radius:12px; border:2px solid transparent; background:transparent; color:#1E293B; font:700 14px/1.25 Inter, sans-serif; text-align:left; cursor:pointer }
.tt-th .ic { flex-shrink:0; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:color-mix(in srgb, var(--k) 14%, #FFFFFF); color:var(--k); font-size:18px }
.tt-th .nm { flex:1; min-width:0 }
.tt-th b { min-width:26px; padding:2px 7px; border-radius:99px; background:#E2E8F0; color:#1E293B; font:800 12px/1.5 Inter, sans-serif; text-align:center }
.tt-th:hover { background:color-mix(in srgb, var(--k) 8%, #FFFFFF); border-color:color-mix(in srgb, var(--k) 40%, #FFFFFF) }
.tt-th.on { background:var(--k); color:#FFFFFF; border-color:var(--k); box-shadow:0 8px 16px -10px var(--k) }
.tt-th.on .ic { background:rgba(255,255,255,.2); color:#FFFFFF }
.tt-th.on b { background:#FFFFFF; color:var(--k) }
.tt-th.zero:not(.on) { opacity:.45 }
.tt-th:focus-visible, .tt-seg button:focus-visible, .tt-opt:focus-visible, .tt-go:focus-visible, .tt-dl:focus-visible, .tt-fiche:focus-visible, .tt-note a:focus-visible { outline:3px solid #22D3EE; outline-offset:2px }

.tt-main { min-width:0; display:flex; flex-direction:column; gap:16px }
.tt-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 14px; border-radius:14px; background:#FFFFFF; border:2px solid #CBD5E1 }
.tt-count { flex:1 1 200px; margin:0; font:600 15px Inter, sans-serif; color:#334155 }
.tt-count b { font-weight:900; color:#5B21B6; font-size:18px }
.tt-seg { display:inline-flex; padding:3px; border-radius:12px; background:#E2E8F0; border:2px solid #94A3B8 }
.tt-seg button { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px; border:0; background:transparent; color:#334155; font:700 13.5px Inter, sans-serif; cursor:pointer }
.tt-seg button[aria-pressed="true"] { background:#5B21B6; color:#FFFFFF }
.tt-opt { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:2px solid #94A3B8; background:#FFFFFF; color:#1E293B; font:700 13.5px Inter, sans-serif; cursor:pointer }
.tt-opt:hover { border-color:#5B21B6; color:#5B21B6 }
.tt-opt[aria-pressed="true"] { background:#1D4ED8; border-color:#1D4ED8; color:#FFFFFF }

.tt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px }
.tt-hd { grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin-top:12px; padding:8px 14px 8px 8px; border-radius:16px; background:#FFFFFF; border:2px solid var(--k); border-left-width:8px }
.tt-hd:first-child, .tt-hd[hidden] + .tt-hd:first-of-type { margin-top:0 }
.tt-hd .ic { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--k); color:#FFFFFF; font-size:21px }
.tt-hd h2 { margin:0; flex:1; min-width:0; font:900 19px Inter, sans-serif; color:#0F172A }
.tt-hd .ct { padding:3px 12px; border-radius:99px; background:color-mix(in srgb, var(--k) 12%, #FFFFFF); border:1.5px solid var(--k); color:var(--k); font:800 12.5px Inter, sans-serif }
.tt-hd[hidden], .tt-c[hidden] { display:none }

.tt-c { --k:#6D28D9; position:relative; display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px; border-radius:18px; background:#FFFFFF; border:2px solid #CBD5E1; border-top:6px solid var(--k); transition:transform .15s, box-shadow .15s, border-color .15s }
.tt-c:hover { transform:translateY(-3px); border-color:var(--k); box-shadow:0 16px 28px -18px var(--k) }
.tt-top { display:flex; align-items:center; gap:9px }
.tt-top .ic { flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, var(--k) 14%, #FFFFFF); color:var(--k); font-size:17px }
.tt-top .th { flex:1; min-width:0; font:800 12px/1.3 Inter, sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--k) }
.tt-top .nw { padding:2px 9px; border-radius:99px; background:#F59E0B; border:1.5px solid #78350F; color:#451A03; font:900 11px Inter, sans-serif; letter-spacing:.04em; text-transform:uppercase }
.tt-c h3 { margin:0; font:800 17px/1.35 Inter, sans-serif; color:#0F172A; overflow-wrap:anywhere }
.tt-facts { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; padding:0; list-style:none; font:600 12.5px Inter, sans-serif; color:#475569 }
.tt-facts li { display:inline-flex; align-items:center; gap:5px }
.tt-facts i { font-size:15px; color:#64748B }
.tt-fiche { display:flex; align-items:center; gap:8px; margin-top:auto; padding:7px 10px; border-radius:10px; background:#DBEAFE; border:1.5px solid #93C5FD; color:#1E3A8A; font:600 12.5px/1.3 Inter, sans-serif; text-decoration:none; min-width:0 }
.tt-fiche b { flex-shrink:0; padding:1px 8px; border-radius:6px; background:#1D4ED8; color:#FFFFFF; font-weight:800; font-size:12px }
.tt-fiche span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
a.tt-fiche:hover { border-color:#1D4ED8; background:#BFDBFE }
.tt-fiche.no { background:#F1F5F9; border:1.5px dashed #94A3B8; color:#475569 }
.tt-fiche.no b { background:#475569 }
.tt-fiche.vide { visibility:hidden; padding:0; height:0; min-height:30px; margin-top:auto }
.tt-act { display:flex; gap:8px }
.tt-go { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--k); border:2px solid var(--k); color:#FFFFFF; font:800 14px Inter, sans-serif; text-decoration:none }
.tt-go:hover { filter:brightness(.88) }
.tt-dl { display:grid; place-items:center; width:44px; border-radius:12px; background:#FFFFFF; border:2px solid var(--k); color:var(--k); font-size:19px; text-decoration:none }
.tt-dl:hover { background:var(--k); color:#FFFFFF }
.tt-vide { display:flex; align-items:center; justify-content:center; gap:10px; margin:0; padding:34px 20px; border-radius:16px; border:2px dashed #94A3B8; background:#F8FAFC; color:#334155; font:700 16px Inter, sans-serif }
.tt-vide[hidden] { display:none }
.tt-vide i { font-size:26px; color:#5B21B6 }

@media (max-width:980px) {
  .tt-wrap { grid-template-columns:minmax(0, 1fr); gap:14px }
  .tt-rail { position:static; max-height:none; padding:10px; overflow:visible }
  .tt-rail h2 { display:none }
  .tt-ths { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
  .tt-th { width:auto; flex-shrink:0; padding:6px 12px 6px 6px; border-color:color-mix(in srgb, var(--k) 40%, #FFFFFF) }
  .tt-th .nm { white-space:nowrap; flex:none }
}
@media (max-width:640px) {
  .tt-hero { padding:24px 20px; border-radius:18px }
  .tt-hero .wm { font-size:150px }
  .tt-stats { width:100%; gap:8px } .tt-stats li { flex:1; min-width:0; padding:10px 12px }
  .tt-stats b { font-size:22px }
  .tt-search { height:50px }
  .tt-grid { grid-template-columns:minmax(0, 1fr) }
  .tt-seg { width:100% } .tt-seg button { flex:1; justify-content:center }
  .tt-opt { width:100%; justify-content:center }
  .tt-note a { width:100%; justify-content:center }
}
@media (prefers-reduced-motion:reduce) { .tt-c { transition:none } .tt-c:hover { transform:none } }