.tuto-intro{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1a2e;border-radius:20px;padding:28px 24px;margin-bottom:36px;text-align:center}
.tuto-intro h1{font-size:28px;line-height:1.3;margin-bottom:10px}
.tuto-intro p{font-size:16px;opacity:.9;max-width:700px;margin:0 auto}
.tuto-toggle{display:flex;justify-content:center;gap:0;margin-bottom:32px;background:#1a1a2e;border-radius:999px;padding:4px;max-width:280px;margin-left:auto;margin-right:auto}
.tuto-toggle button{flex:1;padding:10px 20px;border:none;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.tuto-toggle button.active{background:#fbbf24;color:#1a1a2e}
.tuto-toggle button:not(.active){background:transparent;color:#94a3b8}
.tuto-toggle button:not(.active):hover{color:#fbbf24}
.tuto-sommaire{background:#fff;border:1px solid rgba(26,26,46,.08);border-radius:16px;padding:24px;margin-bottom:40px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.tuto-sommaire h2{font-size:18px;color:#1a1a2e;margin-bottom:14px}
.tuto-sommaire ul{list-style:none;padding:0}
.tuto-sommaire li{margin-bottom:8px}
.tuto-sommaire a{color:#d97706;font-weight:700;text-decoration:none;font-size:15px}
.tuto-sommaire a:hover{text-decoration:underline}
.tuto-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.tuto-tag.debutant{background:#dcfce7;color:#166534}
.tuto-tag.intermediaire{background:#fef3c7;color:#92400e}
.tuto-tag.avance{background:#ede9fe;color:#5b21b6}
.tuto-section{margin-bottom:50px}
.tuto-section-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.tuto-section-header h2{font-size:24px;color:#1a1a2e;margin:0}
.tuto-section-header .tuto-icon{font-size:32px}
.tuto-section > p{font-size:15px;color:#475569;line-height:1.7;margin-bottom:16px}
.tuto-step{background:#fff;border:1px solid rgba(26,26,46,.08);border-radius:14px;padding:20px 22px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.tuto-step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#1a1a2e;color:#fbbf24;font-weight:800;font-size:14px;border-radius:50%;margin-right:10px;flex-shrink:0}
.tuto-step h3{display:inline;font-size:17px;color:#1a1a2e;vertical-align:middle}
.tuto-step p{font-size:14px;color:#475569;line-height:1.7;margin-top:10px}
.tuto-screenshot{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:40px 20px;text-align:center;margin:14px 0 4px;color:#94a3b8;font-size:13px}
.tuto-screenshot img{width:100%;border-radius:10px;display:block}
.tuto-screenshot.hide{display:none}
.tuto-texte{font-size:14px;color:#475569;line-height:1.7;margin-top:10px;font-style:italic}
.tuto-texte.hide{display:none}
.tuto-tip{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px 16px;margin:16px 0;font-size:14px;color:#92400e;line-height:1.6}
.tuto-tip strong{color:#78350f}
.tuto-cta{text-align:center;margin:20px 0 10px}
.tuto-cta a{display:inline-block;background:#1a1a2e;color:#fbbf24;font-weight:800;font-size:15px;padding:12px 28px;border-radius:999px;text-decoration:none;transition:all .2s}
.tuto-cta a:hover{background:#111827;transform:translateY(-1px)}
.tuto-separator{border:none;height:2px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:50px 0}
.tuto-conclusion{background:linear-gradient(135deg,#1a1a2e,#2d2d5e);border-radius:20px;padding:32px 28px;text-align:center;color:white}
.tuto-conclusion h2{font-size:22px;margin-bottom:12px}
.tuto-conclusion p{color:#cbd5e1;font-size:15px;max-width:600px;margin:0 auto 20px}
.tuto-conclusion a{display:inline-block;background:#fbbf24;color:#1a1a2e;font-weight:700;font-size:15px;padding:14px 32px;border-radius:50px;text-decoration:none;box-shadow:0 4px 16px rgba(251,191,36,.35);transition:all .2s}
.tuto-conclusion a:hover{background:#f59e0b;transform:translateY(-2px)}
@media(max-width:640px){.tuto-intro h1{font-size:22px}.tuto-section-header h2{font-size:20px}.tuto-step{padding:16px}}