/* Guide « Comment ça marche ». Mise en page longue, lecture au calme :
   colonne étroite pour le texte, captures pleine largeur. */
.tuto-body{background:var(--bg)}

/* Bandeau : logo a gauche, titre au centre, retour a droite. Il reste colle
   en haut pendant toute la lecture, c'est le seul repere de sortie. */
.tuto-barre{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:0 24px;height:56px;border-bottom:1px solid var(--line);
  background:rgba(10,12,17,.9);backdrop-filter:blur(10px)}
.tuto-retour{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}
.tuto-retour img{width:24px;height:24px}
.tuto-retour b{font-size:14px;font-weight:650;letter-spacing:-.01em}
.tuto-barre-titre{color:var(--muted);font-size:12px;font-weight:550;letter-spacing:.02em}
.tuto-barre-titre::before{content:"·";margin-right:14px;color:#38424f}
.tuto-barre-cta{margin-left:auto;padding:7px 14px;border:1px solid var(--line);border-radius:8px;
  color:#b9c2d0;font-size:11.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.tuto-barre-cta:hover{border-color:#4a5b73;color:var(--text)}

.tuto{width:min(860px,92vw);margin:0 auto;padding:44px 0 90px}
.tuto-hero{padding:52px 0 8px}
.tuto-hero .eyebrow{margin:0 0 12px;color:var(--cyan);font-size:10.5px;font-weight:650;letter-spacing:.18em}
.tuto-hero h1{margin:0 0 18px;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.025em;max-width:15ch}
.tuto .lead{margin:0 0 12px;color:#b9c2d0;font-size:15px;line-height:1.65;max-width:60ch}

/* Une liste de fonctionnalites, regroupees par usage. */
.tuto-bloc{padding:34px 0 4px;border-top:1px solid var(--line);margin-top:30px}
.tuto-bloc h2{margin:0 0 16px;font-size:13px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan)}
.tuto-features{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.tuto-features li{position:relative;padding:11px 14px 11px 30px;border-radius:9px;
  color:#a7b2c1;font-size:13.5px;line-height:1.6}
.tuto-features li::before{content:"";position:absolute;left:12px;top:19px;width:5px;height:5px;
  border-radius:50%;background:#4b5769}
.tuto-features li:hover{background:rgba(255,255,255,.025)}
.tuto-features li:hover::before{background:var(--accent)}
.tuto-features b{color:#e6ebf3;font-weight:600}

.tuto-pied{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);text-align:center}
.tuto-pied p{margin:0 0 16px;color:var(--muted);font-size:13px}
.tuto-cta{display:inline-block;padding:11px 22px;border-radius:9px;background:var(--accent);
  color:#0a0d13;font-size:13px;font-weight:650;text-decoration:none}
.tuto-cta:hover{filter:brightness(1.12)}

@media(max-width:640px){
  .tuto-tete h1{font-size:29px}
  .tuto-section h2{font-size:19px}
}
.tuto-features code{padding:1px 5px;border:1px solid #2b3543;border-radius:4px;background:#0d131b;color:#93bded;font-family:var(--font-mono);font-size:11.5px}