/* Tutoriel guidé des applications (listes projets / scénarios). */

.tuto-root {
    position: fixed; inset: 0; z-index: 40000;
    font-family: 'Outfit', sans-serif;
}
.tuto-spot {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(0, 117, 201, 0.45), 0 0 0 9999px rgba(15, 23, 42, 0.52);
    pointer-events: none;
    transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
    z-index: 40001;
}
.tuto-card {
    position: fixed;
    z-index: 40002;
    width: min(380px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 1.05rem 1.15rem 0.95rem;
    box-shadow: 0 22px 48px -20px rgba(15, 23, 42, 0.45);
    color: #0f172a;
}
.tuto-kicker {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: #0075c9; margin-bottom: 0.4rem;
}
.tuto-card h3 {
    font-size: 1.05rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: -0.02em;
}
.tuto-card p {
    font-size: 0.84rem; color: #475569; line-height: 1.5; margin: 0 0 1rem;
}
.tuto-nav {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.tuto-nav .tuto-skip { margin-right: auto; }
.tuto-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 0.45rem 0.85rem;
    font-family: inherit; font-size: 0.8rem; font-weight: 650;
    cursor: pointer; border: 1px solid #eef2f7;
    background: #f6f8fb; color: #475569;
}
.tuto-btn:hover { background: #eaf3fc; border-color: #cfe3f6; color: #0075c9; }
.tuto-btn--primary {
    background: #0075c9; border-color: #0075c9; color: #fff;
}
.tuto-btn--primary:hover { background: #005fa3; border-color: #005fa3; color: #fff; }
.tuto-btn[hidden] { display: none; }
.tuto-btn:disabled { opacity: 0.45; cursor: default; }