/*
 * Guide Symbrik public
 * Couche unique, mobile-first, palette marketing exclusivement.
 */

.nstr-guide {
    /* Les pages publiques ne chargent pas l'échelle complète de l'application.
       Le guide redéclare donc les tokens déjà documentés pour éviter que les
       espacements et les tailles de texte retombent à leur valeur par défaut. */
    --nstr-space-1: 0.25rem;
    --nstr-space-2: 0.5rem;
    --nstr-space-3: 0.75rem;
    --nstr-space-4: 1rem;
    --nstr-space-5: 1.25rem;
    --nstr-space-6: 1.5rem;
    --nstr-space-8: 2rem;
    --nstr-space-10: 2.5rem;
    --nstr-space-12: 3rem;
    --nstr-space-16: 4rem;
    --nstr-space-20: 5rem;
    --nstr-font-xs: 0.75rem;
    --nstr-font-sm: 0.875rem;
    --nstr-font-base: 1rem;
    --nstr-font-lg: 1.125rem;
    --nstr-font-xl: 1.25rem;
    --nstr-font-2xl: 1.5rem;
    --nstr-font-3xl: 1.875rem;
    --nstr-font-bold: 700;
    --nstr-font-semibold: 600;
    --nstr-leading-tight: 1.25;
    --nstr-leading-snug: 1.375;
    --nstr-leading-normal: 1.5;
    --nstr-leading-relaxed: 1.625;
    --nstr-leading-loose: 1.7;
    --nstr-tracking-tight: -0.02em;
    --nstr-tracking-wide: 0.025em;
    --nstr-tracking-wider: 0.05em;
    background: var(--nstr-mkt-coal);
    color: var(--nstr-mkt-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* nstr-pages.css (.nstr-page) et le thème (body) posent « overflow-x: hidden » : chacun
   devient un conteneur de défilement et la barre latérale ne colle alors jamais
   (position: sticky). nstr-global.css prévoit « clip », qui coupe de la même façon sans
   créer de conteneur de défilement : le guide le rétablit sur ces deux éléments,
   « hidden » restant le repli des navigateurs qui ne le connaissent pas. */
.nstr-page.nstr-guide {
    overflow-x: hidden;
    overflow-x: clip;
}

html body:has(> .nstr-page.nstr-guide) {
    overflow-x: clip;
}

.nstr-guide main {
    min-height: 60vh;
}

.nstr-guide-header {
    background: var(--nstr-mkt-coal-deep);
    border-bottom: 1px solid var(--nstr-mkt-line);
}

.nstr-guide-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nstr-space-4);
    min-height: 64px;
}

.nstr-guide-header__brand,
.nstr-guide-header__nav {
    display: flex;
    align-items: center;
}

.nstr-guide-header__brand {
    flex-shrink: 0;
    gap: var(--nstr-space-2);
    min-width: 44px;
    min-height: 44px;
    color: var(--nstr-mkt-ink);
    font-size: var(--nstr-font-base);
    font-weight: var(--nstr-font-bold);
    text-decoration: none;
}

.nstr-guide-header__logo {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.nstr-guide-header__nav {
    gap: var(--nstr-space-4);
}

.nstr-guide-header__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-sm);
    font-weight: var(--nstr-font-semibold);
    text-decoration: none;
}

.nstr-guide-header__nav a:hover {
    color: var(--nstr-mkt-ink);
}

.nstr-guide-header__nav .nstr-guide-header__cta {
    padding: 0 var(--nstr-space-3);
    background: var(--nstr-mkt-accent);
    border-radius: var(--nstr-mkt-radius-sm);
    color: var(--nstr-mkt-on-accent);
}

.nstr-guide-header__brand:focus-visible,
.nstr-guide-header__nav a:focus-visible {
    outline: 3px solid var(--nstr-mkt-ink);
    outline-offset: 3px;
}

@media (max-width: 540px) {
    .nstr-guide-header__inner {
        min-height: 56px;
    }

    .nstr-guide-header__nav {
        gap: var(--nstr-space-3);
    }

    .nstr-guide-header__nav a:first-child {
        display: none;
    }

    .nstr-guide-header__nav .nstr-guide-header__cta {
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .nstr-guide-header__brand span {
        display: none;
    }
}

.nstr-guide__eyebrow {
    margin: 0 0 var(--nstr-space-3);
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wider);
    text-transform: uppercase;
}

.nstr-guide h1,
.nstr-guide h2,
.nstr-guide-card strong {
    font-family: var(--nstr-mkt-font-serif);
    font-optical-sizing: auto;
    color: var(--nstr-mkt-ink);
}

/* Hub */
.nstr-guide-hero {
    padding: var(--nstr-space-12) 0;
    background: var(--nstr-mkt-coal-deep);
    border-bottom: 1px solid var(--nstr-mkt-line);
}

.nstr-guide-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.1rem, 6vw, 3.5rem);
    font-weight: var(--nstr-font-bold);
    line-height: 1.04;
    letter-spacing: var(--nstr-tracking-tight);
}

.nstr-guide-hero__lead {
    max-width: 620px;
    margin: var(--nstr-space-5) 0 0;
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-hero__meta {
    margin: var(--nstr-space-4) 0 0;
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-semibold);
    line-height: var(--nstr-leading-relaxed);
}

.nstr-guide-quick {
    padding: var(--nstr-space-8) 0;
    background: var(--nstr-mkt-surface-0);
    border-bottom: 1px solid var(--nstr-mkt-line);
}

.nstr-guide-quick__intro h2 {
    margin: 0;
    font-size: var(--nstr-font-xl);
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-tight);
}

.nstr-guide-quick__grid {
    display: grid;
    gap: var(--nstr-space-3);
    margin: var(--nstr-space-5) 0 0;
    padding: 0;
    list-style: none;
}

.nstr-guide-quick__grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nstr-space-3);
    min-height: 52px;
    padding: var(--nstr-space-3) var(--nstr-space-4);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-sm);
    font-weight: var(--nstr-font-semibold);
    line-height: var(--nstr-leading-snug);
    text-decoration: none;
    transition: var(--nstr-transition-fast);
}

.nstr-guide-quick__grid a:hover {
    border-color: var(--nstr-mkt-line-strong);
    color: var(--nstr-mkt-ink);
}

.nstr-guide-quick__grid a span {
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-lg);
}

.nstr-guide-quick__grid a:focus-visible {
    outline: 3px solid var(--nstr-mkt-ink);
    outline-offset: 3px;
}

.nstr-guide-hub {
    padding: var(--nstr-section-padding-mobile) 0;
}

.nstr-guide-hub .nstr-container {
    max-width: 1040px;
}

.nstr-guide-hub__intro {
    max-width: 680px;
    margin-bottom: var(--nstr-space-6);
}

.nstr-guide-hub__intro h2,
.nstr-guide-support h2 {
    margin: 0 0 var(--nstr-space-3);
    font-size: clamp(var(--nstr-font-2xl), 6vw, var(--nstr-font-3xl));
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-tight);
}

.nstr-guide-hub__intro p,
.nstr-guide-support p,
.nstr-guide__not-found p {
    margin: 0;
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-grid {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--nstr-mkt-line);
    list-style: none;
}

.nstr-guide-card-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--nstr-mkt-line);
}

.nstr-guide-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: var(--nstr-space-3);
    align-items: start;
    min-height: 0;
    padding: var(--nstr-space-5) 0;
    color: var(--nstr-mkt-ink);
    text-decoration: none;
    transition: var(--nstr-transition-fast);
}

.nstr-guide-card__number {
    justify-self: start;
    padding-top: 2px;
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-sm);
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-tight);
}

.nstr-guide-card__content,
.nstr-guide-card__description {
    display: block;
    min-width: 0;
}

.nstr-guide-card__meta {
    display: block;
    margin-top: var(--nstr-space-3);
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-card strong {
    display: block;
    margin: 0;
    font-size: var(--nstr-font-lg);
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-tight);
}

.nstr-guide-card__description {
    max-width: 650px;
    margin-top: var(--nstr-space-2);
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-card__arrow {
    align-self: center;
    justify-self: end;
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xl);
    line-height: 1;
    transition: var(--nstr-transition-fast);
}

.nstr-guide-card:hover .nstr-guide-card__arrow {
    color: var(--nstr-mkt-accent);
    transform: translateX(3px);
}

.nstr-guide-card:focus-visible,
.nstr-guide-breadcrumb a:focus-visible,
.nstr-guide-mobile-nav summary:focus-visible,
.nstr-guide-mobile-nav a:focus-visible,
.nstr-guide-sidebar a:focus-visible,
.nstr-guide-pagination a:focus-visible,
.nstr-guide-article__content a:focus-visible {
    outline: 3px solid var(--nstr-mkt-ink);
    outline-offset: 3px;
}

.nstr-guide-support,
.nstr-guide-article__cta {
    padding: var(--nstr-section-padding-mobile) 0;
    background: var(--nstr-mkt-surface-2);
    border-top: 1px solid var(--nstr-mkt-line);
}

/* Article */
.nstr-guide-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nstr-space-2);
    padding: var(--nstr-space-2) 0;
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
}

.nstr-guide-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--nstr-mkt-muted);
    text-decoration: none;
}

.nstr-guide-breadcrumb a:hover {
    color: var(--nstr-mkt-accent);
}

/* Progressive disclosure mobile */
.nstr-guide-mobile-nav {
    margin: var(--nstr-space-2) 0 var(--nstr-space-6);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-mobile-nav summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: var(--nstr-space-1) var(--nstr-space-3);
    align-items: center;
    min-height: 64px;
    padding: var(--nstr-space-3) var(--nstr-space-4);
    color: var(--nstr-mkt-ink);
    cursor: pointer;
    list-style: none;
}

.nstr-guide-mobile-nav summary::-webkit-details-marker {
    display: none;
}

.nstr-guide-mobile-nav__meta {
    grid-column: 1;
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-mobile-nav summary strong {
    grid-column: 1;
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-snug);
}

.nstr-guide-mobile-nav summary svg {
    grid-column: 2;
    grid-row: 1 / 3;
    transition: var(--nstr-transition-fast);
}

.nstr-guide-mobile-nav[open] summary svg {
    transform: rotate(180deg);
}

.nstr-guide-mobile-nav ol {
    display: grid;
    gap: var(--nstr-space-1);
    margin: 0;
    padding: var(--nstr-space-2) var(--nstr-space-3) var(--nstr-space-3);
    border-top: 1px solid var(--nstr-mkt-line);
    list-style: none;
}

.nstr-guide-mobile-nav__group {
    margin: 0;
    padding: var(--nstr-space-3) var(--nstr-space-4) 0;
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-mobile-nav__group + ol {
    border-top: 0;
}

.nstr-guide-mobile-nav a {
    display: block;
    min-height: 48px;
    padding: var(--nstr-space-3);
    border-left: 2px solid transparent;
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-snug);
    text-decoration: none;
}

.nstr-guide-mobile-nav a:hover,
.nstr-guide-mobile-nav a[aria-current="page"] {
    background: var(--nstr-mkt-surface-2);
    border-left-color: var(--nstr-mkt-accent);
    color: var(--nstr-mkt-ink);
}

.nstr-guide-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.nstr-guide-sidebar {
    display: none;
}

.nstr-guide-article__content {
    min-width: 0;
}

.nstr-guide-article__header {
    padding: var(--nstr-space-4) 0 var(--nstr-space-8);
    border-bottom: 1px solid var(--nstr-mkt-line);
}

.nstr-guide-article__header h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: var(--nstr-font-bold);
    line-height: 1.08;
    letter-spacing: var(--nstr-tracking-tight);
}

.nstr-guide-article__lead {
    max-width: 620px;
    margin: var(--nstr-space-5) 0 0;
    color: var(--nstr-mkt-muted);
    font-size: var(--nstr-font-lg);
    line-height: var(--nstr-leading-relaxed);
}

.nstr-guide-article__updated {
    margin: var(--nstr-space-4) 0 0;
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
    line-height: var(--nstr-leading-normal);
}

.nstr-guide-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nstr-space-2);
    margin: var(--nstr-space-5) 0 0;
    padding: 0;
    list-style: none;
}

.nstr-guide-article__meta li {
    padding: var(--nstr-space-1) var(--nstr-space-3);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-sm);
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-xs);
    line-height: var(--nstr-leading-normal);
}

.nstr-guide-article__start {
    display: grid;
    gap: var(--nstr-space-4);
    margin-top: var(--nstr-space-8);
}

.nstr-guide-outcome,
.nstr-guide-prerequisites {
    padding: var(--nstr-space-5);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-outcome {
    border-left: 3px solid var(--nstr-mkt-accent);
}

.nstr-guide-outcome__label,
.nstr-guide-prerequisites__label {
    margin: 0 0 var(--nstr-space-2);
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-outcome p:last-child,
.nstr-guide-prerequisites li {
    color: var(--nstr-mkt-ink);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-outcome p:last-child {
    margin: 0;
}

.nstr-guide-prerequisites ul {
    display: grid;
    gap: var(--nstr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nstr-guide-prerequisites li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--nstr-space-2);
}

.nstr-guide-prerequisites li::before {
    content: "✓";
    color: var(--nstr-mkt-accent);
    font-weight: var(--nstr-font-bold);
}

.nstr-guide-toc {
    margin-top: var(--nstr-space-8);
    padding: var(--nstr-space-5);
    background: var(--nstr-mkt-surface-2);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-toc > p {
    margin: 0 0 var(--nstr-space-3);
    color: var(--nstr-mkt-ink);
    font-size: var(--nstr-font-sm);
    font-weight: var(--nstr-font-bold);
}

.nstr-guide-toc ol {
    display: grid;
    gap: var(--nstr-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-toc;
}

.nstr-guide-toc li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--nstr-space-2);
    align-items: baseline;
    counter-increment: guide-toc;
}

.nstr-guide-toc li::before {
    content: counter(guide-toc, decimal-leading-zero);
    color: var(--nstr-mkt-accent);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-relaxed);
}

.nstr-guide-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-relaxed);
    text-decoration-color: var(--nstr-mkt-line-strong);
    text-underline-offset: 3px;
}

.nstr-guide-toc a:hover {
    color: var(--nstr-mkt-accent);
}

.nstr-guide-toc a:focus-visible {
    outline: 3px solid var(--nstr-mkt-ink);
    outline-offset: 3px;
}

.nstr-guide-article__content > section:not(.nstr-guide-article__cta) {
    padding: var(--nstr-space-12) 0 0;
}

.nstr-guide-article__content > section h2 {
    max-width: 620px;
    margin: 0 0 var(--nstr-space-5);
    font-size: clamp(1.55rem, 6vw, 2.15rem);
    font-weight: var(--nstr-font-bold);
    line-height: var(--nstr-leading-tight);
    letter-spacing: var(--nstr-tracking-tight);
}

/* Barre accent : repere visuel de debut de section, independant de la
   numerotation manuelle (certaines sections n'ont pas de numero). */
.nstr-guide-article__content > section h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: var(--nstr-space-4);
    background: var(--nstr-mkt-accent);
    border-radius: 2px;
}

.nstr-guide-article__content > section p,
.nstr-guide-steps p,
.nstr-guide-callout p,
.nstr-guide-three p {
    max-width: 64ch;
    margin: 0;
    color: var(--nstr-mkt-ink);
    font-size: var(--nstr-font-base);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-article__content > section p + p {
    margin-top: var(--nstr-space-4);
}

.nstr-guide-steps {
    display: grid;
    gap: var(--nstr-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
}

.nstr-guide-steps li {
    position: relative;
    padding: var(--nstr-space-6);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
    counter-increment: guide-step;
}

.nstr-guide-steps li::before {
    content: counter(guide-step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--nstr-space-3);
    color: var(--nstr-mkt-accent);
    font-family: var(--nstr-mkt-font-serif);
    font-size: var(--nstr-font-lg);
    font-weight: var(--nstr-font-bold);
}

.nstr-guide-steps strong,
.nstr-guide-callout strong,
.nstr-guide-three strong {
    color: var(--nstr-mkt-ink);
}

.nstr-guide-steps p,
.nstr-guide-callout p,
.nstr-guide-three p {
    margin-top: var(--nstr-space-3);
}

.nstr-guide-callout {
    margin-top: var(--nstr-space-8);
    padding: var(--nstr-space-6);
    background: var(--nstr-mkt-surface-2);
    border-left: 3px solid var(--nstr-mkt-accent);
    border-radius: 0 var(--nstr-mkt-radius-md) var(--nstr-mkt-radius-md) 0;
}
.nstr-guide-downloads {
    display: grid;
    gap: var(--nstr-space-4);
    margin-top: var(--nstr-space-6);
}

.nstr-guide-download {
    display: grid;
    gap: var(--nstr-space-5);
    padding: var(--nstr-space-6);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-download h3 {
    margin: 0;
    color: var(--nstr-mkt-ink);
    font-family: var(--nstr-mkt-font-serif);
    font-size: var(--nstr-font-xl);
    line-height: var(--nstr-leading-tight);
}

.nstr-guide-download p {
    margin-top: var(--nstr-space-3);
}

.nstr-guide-download__type {
    margin: 0 !important;
    color: var(--nstr-mkt-accent) !important;
    font-size: var(--nstr-font-xs) !important;
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wider);
    text-transform: uppercase;
}

.nstr-guide-download .nstr-cta {
    justify-self: start;
}

.nstr-guide-path {
    margin-top: var(--nstr-space-6);
    padding: var(--nstr-space-4) var(--nstr-space-5);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-path__label,
.nstr-guide-checklist__label {
    margin: 0 0 var(--nstr-space-2);
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-path__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nstr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nstr-guide-path__items li {
    display: flex;
    align-items: center;
    gap: var(--nstr-space-2);
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-relaxed);
}

.nstr-guide-path__items li:not(:last-child)::after {
    content: "→";
    color: var(--nstr-mkt-accent);
}

.nstr-guide-checklist {
    margin-top: var(--nstr-space-8);
    padding: var(--nstr-space-6);
    background: var(--nstr-mkt-surface-2);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-checklist ul {
    display: grid;
    gap: var(--nstr-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nstr-guide-checklist li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--nstr-space-2);
    color: var(--nstr-mkt-ink-soft);
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-loose);
}

.nstr-guide-checklist li::before {
    content: "✓";
    color: var(--nstr-mkt-accent);
    font-weight: var(--nstr-font-bold);
}

.nstr-guide-figure {
    width: 100%;
    max-width: 920px;
    margin: var(--nstr-space-8) 0 0;
}

.nstr-guide-figure__link {
    display: block;
    overflow: hidden;
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
    transition: var(--nstr-transition-fast);
}

.nstr-guide-figure__link:hover {
    border-color: var(--nstr-mkt-line-strong);
}

.nstr-guide-figure__link:focus-visible {
    outline: 3px solid var(--nstr-mkt-ink);
    outline-offset: 3px;
}

.nstr-guide-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.nstr-guide-figure figcaption {
    margin-top: var(--nstr-space-4);
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
    line-height: var(--nstr-leading-relaxed);
}

/* Capture de téléphone (écran de 390 px, image 2x) : pleine largeur sur un
   petit écran, puis centrée à la largeur du téléphone au lieu d'être étirée. */
.nstr-guide-figure--narrow {
    max-width: 24.375rem;
    margin-right: auto;
    margin-left: auto;
}
.nstr-guide-three {
    display: grid;
    gap: var(--nstr-space-4);
}

.nstr-guide-three > div {
    padding: var(--nstr-space-5);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-three span {
    display: block;
    margin-bottom: var(--nstr-space-4);
    color: var(--nstr-mkt-accent);
    font-family: var(--nstr-mkt-font-serif);
    font-size: var(--nstr-font-xl);
    font-weight: var(--nstr-font-bold);
}

.nstr-guide-pagination {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nstr-space-3);
    padding: var(--nstr-space-12) 0;
}

.nstr-guide-pagination a {
    display: grid;
    gap: var(--nstr-space-2);
    min-height: 72px;
    padding: var(--nstr-space-4);
    background: var(--nstr-mkt-surface);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
    color: var(--nstr-mkt-ink);
    text-decoration: none;
    transition: var(--nstr-transition-fast);
}

.nstr-guide-pagination a:hover {
    border-color: var(--nstr-mkt-line-strong);
}

.nstr-guide-pagination a span {
    color: var(--nstr-mkt-muted-deep);
    font-size: var(--nstr-font-xs);
    font-weight: var(--nstr-font-bold);
    letter-spacing: var(--nstr-tracking-wide);
    text-transform: uppercase;
}

.nstr-guide-pagination a strong {
    font-size: var(--nstr-font-sm);
    line-height: var(--nstr-leading-snug);
}

.nstr-guide-article__cta {
    margin: 0;
    padding-right: var(--nstr-space-5);
    padding-left: var(--nstr-space-5);
    border: 1px solid var(--nstr-mkt-line);
    border-radius: var(--nstr-mkt-radius-md);
}

.nstr-guide-article__cta h2 {
    margin: 0 0 var(--nstr-space-6);
}

.nstr-guide__not-found {
    padding: var(--nstr-section-padding) 0;
}

/* Tablet */
@media (min-width: 641px) {
    .nstr-guide-quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nstr-guide-card {
        grid-template-columns: 64px minmax(0, 1fr) 32px;
        gap: var(--nstr-space-5);
        align-items: center;
        padding: var(--nstr-space-6) var(--nstr-space-2);
    }

    .nstr-guide-card__number {
        padding-top: 0;
        font-family: var(--nstr-mkt-font-serif);
        font-size: var(--nstr-font-xl);
    }

    .nstr-guide-card strong {
        font-size: var(--nstr-font-xl);
    }

    .nstr-guide-three,
    .nstr-guide-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nstr-guide-article__start {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nstr-guide-toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--nstr-space-6);
    }

    .nstr-guide-three > div:last-child {
        grid-column: 1 / -1;
    }

    .nstr-guide-pagination__next {
        text-align: right;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .nstr-guide-download {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
    .nstr-guide-hero,
    .nstr-guide-hub,
    .nstr-guide-support {
        padding: var(--nstr-space-16) 0;
    }

    .nstr-guide-quick {
        padding: var(--nstr-space-10) 0;
    }

    .nstr-guide-mobile-nav {
        display: none;
    }

    .nstr-guide-article__layout {
        display: grid;
        grid-template-columns: minmax(208px, 240px) minmax(0, 700px);
        gap: var(--nstr-space-12);
        align-items: start;
        max-width: 1040px;
        margin: 0 auto;
    }

    /* La liste des guides grandit avec le registre : collée, elle ne doit jamais
       dépasser la fenêtre (les derniers guides seraient inatteignables). Elle
       défile donc en interne ; les contours de focus restent à l'intérieur. */
    .nstr-guide-sidebar {
        position: sticky;
        top: var(--nstr-space-6);
        display: block;
        max-height: calc(100vh - (var(--nstr-space-6) * 2));
        max-height: calc(100dvh - (var(--nstr-space-6) * 2));
        margin: var(--nstr-space-8) 0 0;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .nstr-guide-sidebar a:focus-visible {
        outline-offset: -3px;
    }

    .nstr-guide-sidebar__title {
        margin: 0 0 var(--nstr-space-3);
        color: var(--nstr-mkt-muted-deep);
        font-size: var(--nstr-font-xs);
        font-weight: var(--nstr-font-bold);
        letter-spacing: var(--nstr-tracking-wider);
        text-transform: uppercase;
    }

    .nstr-guide-sidebar ol + .nstr-guide-sidebar__title {
        margin-top: var(--nstr-space-6);
    }

    .nstr-guide-sidebar ol {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--nstr-space-1);
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        counter-reset: guide-navigation;
    }

    .nstr-guide-sidebar li {
        min-width: 0;
        counter-increment: guide-navigation;
    }

    .nstr-guide-sidebar a {
        display: grid;
        gap: var(--nstr-space-2);
        align-content: center;
        min-height: 0;
        padding: var(--nstr-space-3) var(--nstr-space-4);
        border-left: 2px solid transparent;
        color: var(--nstr-mkt-muted);
        font-size: var(--nstr-font-sm);
        line-height: var(--nstr-leading-snug);
        text-decoration: none;
        transition: var(--nstr-transition-fast);
    }

    .nstr-guide-sidebar a::before {
        content: counter(guide-navigation, decimal-leading-zero);
        color: var(--nstr-mkt-muted-deep);
        font-family: var(--nstr-mkt-font-serif);
        font-size: var(--nstr-font-sm);
        font-weight: var(--nstr-font-bold);
    }

    .nstr-guide-sidebar a:hover {
        background: var(--nstr-mkt-surface);
        color: var(--nstr-mkt-ink);
    }

    .nstr-guide-sidebar a[aria-current="page"] {
        background: var(--nstr-mkt-surface);
        border-left-color: var(--nstr-mkt-accent);
        color: var(--nstr-mkt-ink);
    }

    .nstr-guide-sidebar a[aria-current="page"]::before {
        color: var(--nstr-mkt-accent);
    }

    .nstr-guide-article__content {
        width: 100%;
        max-width: 700px;
        margin: 0;
    }

    .nstr-guide-article__header {
        padding-top: var(--nstr-space-8);
        padding-bottom: var(--nstr-space-10);
    }

    .nstr-guide-article__content > section:not(.nstr-guide-article__cta) {
        padding: var(--nstr-space-16) 0 0;
    }

    .nstr-guide-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nstr-guide-three > div:last-child {
        grid-column: auto;
    }
}