/*
 * Site public : complète admin.css (mêmes couleurs, boutons, cartes et replis)
 * pour une page neutre d'une seule colonne : téléchargement + guide d'installation.
 */

.site-head {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 760px; margin: 0 auto;
    padding: calc(12px + var(--safe-top)) calc(20px + var(--safe-right)) 12px calc(20px + var(--safe-left));
    background: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.site-head .brand { padding: 0; }

.site-main {
    max-width: 760px; margin: 0 auto;
    padding: 12px calc(20px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(20px + var(--safe-left));
}

.hero { padding: 20px 0 0; }
@media (min-width: 760px) { .hero { padding-top: 40px; } }

.download .card-body { padding: 20px; }
.download-meta { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

.section { padding-top: 48px; scroll-margin-top: 72px; }
.section h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }

.steps { counter-reset: etape; list-style: none; margin: 24px 0 0; padding: 0; }
.steps > li {
    counter-increment: etape;
    position: relative; padding: 0 0 28px 52px;
}
.steps > li::before {
    content: counter(etape);
    position: absolute; left: 0; top: -2px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--text); color: #000; font: 600 15px/1 var(--font);
}
.steps > li::after {
    content: ''; position: absolute; left: 16.5px; top: 40px; bottom: 8px; width: 1px; background: var(--border);
}
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: 17px; margin: 4px 0 8px; }
.steps p { color: #C7C7CC; line-height: 1.6; }
.steps p.muted { color: var(--muted); font-size: 14px; }

.substeps { margin: 0 0 12px; padding-left: 20px; color: #C7C7CC; line-height: 1.6; }
.substeps li + li { margin-top: 6px; }


/* Mot de fin, après la dernière étape. */
.outro { margin: 8px 0 0 52px; }
.outro p { color: #C7C7CC; line-height: 1.6; margin: 0; }
.outro .enjoy { margin-top: 20px; color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }