/* /Components/Pages/Guide.razor.rz.scp.css */
.guide-page[b-jnu2i6ball] {
    --role-coach: #e08a3e;
    --role-organisateur: var(--gold);
    --role-arbitre: #6fa8dc;
    max-width: 880px;
}

.guide-header[b-jnu2i6ball] { margin-bottom: 2rem; }
.guide-kicker[b-jnu2i6ball] { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.guide-header h1[b-jnu2i6ball] { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.guide-lede[b-jnu2i6ball] { color: var(--ink-muted); max-width: 62ch; margin-top: 0.7rem; }

.guide-tabs[b-jnu2i6ball] {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.6rem 0; margin-bottom: 2rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--border);
}
.guide-tabs a[b-jnu2i6ball] {
    text-decoration: none; color: var(--ink-muted); font-size: 0.85rem; font-weight: 600;
    padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border);
}
.guide-tabs a:hover[b-jnu2i6ball] { color: var(--ink); border-color: var(--border-strong); }
.guide-tabs a.role-coach:hover[b-jnu2i6ball] { border-color: var(--role-coach); color: var(--role-coach); }
.guide-tabs a.role-organisateur:hover[b-jnu2i6ball] { border-color: var(--role-organisateur); color: var(--role-organisateur); }
.guide-tabs a.role-arbitre:hover[b-jnu2i6ball] { border-color: var(--role-arbitre); color: var(--role-arbitre); }

section.role[b-jnu2i6ball] { padding-top: 0.5rem; margin-top: 3rem; scroll-margin-top: 4.5rem; }
#debut[b-jnu2i6ball] { scroll-margin-top: 4.5rem; }
section.role + section.role[b-jnu2i6ball] { border-top: 1px solid var(--border); padding-top: 2.5rem; }

.role-head[b-jnu2i6ball] { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.4rem; }
.role-head .tag[b-jnu2i6ball] {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    padding: 0.18rem 0.5rem; border-radius: 999px; color: #14161c; background: var(--role-color);
}
.role-head h2[b-jnu2i6ball] { font-size: 1.7rem; margin: 0; }
#coach .role-head .tag[b-jnu2i6ball] { --role-color: var(--role-coach); }
#organisateur .role-head .tag[b-jnu2i6ball] { --role-color: var(--role-organisateur); }
#arbitre .role-head .tag[b-jnu2i6ball] { --role-color: var(--role-arbitre); }

.role-intro[b-jnu2i6ball] { color: var(--ink-muted); max-width: 62ch; margin: 0.5rem 0 1.6rem; }

h3.step-title[b-jnu2i6ball] { font-size: 1.15rem; margin: 1.8rem 0 0.8rem; display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
h3.step-title .role-color-coach[b-jnu2i6ball],
h3.step-title .role-color-organisateur[b-jnu2i6ball],
h3.step-title .role-color-arbitre[b-jnu2i6ball] { width: 4px; height: 1.05em; border-radius: 3px; display: inline-block; }
h3.step-title .role-color-coach[b-jnu2i6ball] { background: var(--role-coach); }
h3.step-title .role-color-organisateur[b-jnu2i6ball] { background: var(--role-organisateur); }
h3.step-title .role-color-arbitre[b-jnu2i6ball] { background: var(--role-arbitre); }

.guide-page p[b-jnu2i6ball] { margin: 0 0 0.8rem; max-width: 68ch; color: var(--ink); }

/* Numbered steps — genuine sequences only */
ol.steps[b-jnu2i6ball] { list-style: none; margin: 0 0 1.3rem; padding: 0; counter-reset: step; }
ol.steps li[b-jnu2i6ball] {
    counter-increment: step;
    position: relative;
    padding: 0.7rem 0 0.7rem 2.3rem;
    border-left: 2px solid var(--border);
    margin-left: 0.75rem;
}
ol.steps li:last-child[b-jnu2i6ball] { border-left-color: transparent; padding-bottom: 0; }
ol.steps li[b-jnu2i6ball]::before {
    content: counter(step);
    font-weight: 700; font-size: 0.78rem;
    position: absolute; left: -0.75rem; top: 0.6rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg); border: 2px solid var(--role-color, var(--gold));
    color: var(--role-color, var(--gold));
}
#coach ol.steps li[b-jnu2i6ball]::before { --role-color: var(--role-coach); }
#organisateur ol.steps li[b-jnu2i6ball]::before { --role-color: var(--role-organisateur); }
#arbitre ol.steps li[b-jnu2i6ball]::before { --role-color: var(--role-arbitre); }
ol.steps li p[b-jnu2i6ball] { margin: 0; color: var(--ink); }
ol.steps li .field[b-jnu2i6ball] {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.85em;
    background: var(--card-bg-alt); padding: 0.05em 0.4em; border-radius: 4px; border: 1px solid var(--border);
}

/* Feature card grid — not sequential */
.card-grid[b-jnu2i6ball] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; margin: 0 0 1.4rem; }
.card[b-jnu2i6ball] { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; }
.card h4[b-jnu2i6ball] { font-size: 1rem; margin: 0 0 0.3rem; color: var(--ink); }
.card p[b-jnu2i6ball] { font-size: 0.87rem; color: var(--ink-muted); margin: 0; }
.card .badge[b-jnu2i6ball] {
    display: inline-block; font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: 5px; margin-bottom: 0.45rem;
    background: var(--card-bg-alt); color: var(--ink-muted); border: 1px solid var(--border);
}

/* Callouts */
.note[b-jnu2i6ball] {
    border: 1px solid var(--border); border-left: 3px solid var(--role-color, var(--gold));
    background: var(--card-bg); border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem; margin: 1rem 0 1.4rem; font-size: 0.9rem;
    display: flex; gap: 0.55rem;
}
#coach .note[b-jnu2i6ball] { --role-color: var(--role-coach); }
#organisateur .note[b-jnu2i6ball] { --role-color: var(--role-organisateur); }
#arbitre .note[b-jnu2i6ball] { --role-color: var(--role-arbitre); }
.note .icon[b-jnu2i6ball] { flex-shrink: 0; line-height: 1.4; }
.note.warn[b-jnu2i6ball] { border-left-color: var(--danger); }
.note strong[b-jnu2i6ball] { display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--role-color, var(--gold)); margin-bottom: 0.15rem; }
.note.warn strong[b-jnu2i6ball] { color: var(--danger); }
.note p[b-jnu2i6ball] { margin: 0; color: var(--ink); }

.lock[b-jnu2i6ball] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--ink-muted); font-style: italic; margin: 0 0 0.5rem; }

.guide-foot[b-jnu2i6ball] { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 0.8rem; }

@media (max-width: 640px) {
    .guide-tabs[b-jnu2i6ball] { top: 0; }
}