:root {
    color-scheme: dark;
    --bg: #080b10;
    --surface: #10151d;
    --surface-2: #151c26;
    --surface-3: #0d1218;
    --border: #27313e;
    --border-soft: rgba(255, 255, 255, 0.07);
    --text: #edf2f7;
    --muted: #9ba8b6;
    --green: #54d68a;
    --red: #ff6678;
    --orange: #f5ad52;
    --blue: #62a8ff;
    --max: 1180px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 0%, rgba(98, 168, 255, 0.08), transparent 32rem),
        radial-gradient(circle at 85% 10%, rgba(84, 214, 138, 0.06), transparent 30rem),
        var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 11, 16, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 76px;
    padding: 12px 28px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    text-decoration: none;
}

.site-brand-icon {
    font-size: 28px;
}

.site-brand strong,
.site-brand small {
    display: block;
}

.site-brand small {
    color: var(--muted);
    font-size: 11px;
}

.site-header-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}

.site-nav a,
.logout-link {
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.logout-link:hover,
.logout-link:focus-visible {
    color: var(--text);
    background: var(--surface-2);
}

.site-nav a[aria-current="page"] {
    color: var(--text);
    background: rgba(98, 168, 255, 0.08);
}

.logout-link {
    flex: 0 0 auto;
    border: 1px solid var(--border);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: var(--surface-2);
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-main {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
    padding: 70px 0;
}

.hero {
    padding: 72px 0 48px;
    max-width: 850px;
}

.hero-home {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 38px;
    align-items: center;
    max-width: none;
    padding-top: 54px;
}

.hero-copy {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

h1 {
    margin: 0 0 18px;
    font-size: clamp(44px, 8vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

h2 {
    margin-top: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h3 {
    line-height: 1.2;
}

.hero-text {
    color: var(--muted);
    font-size: clamp(19px, 2.5vw, 28px);
    max-width: 760px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.025);
}

.status-badge-blue {
    color: var(--blue);
    border-color: rgba(98, 168, 255, 0.28);
}

.status-badge-green {
    color: var(--green);
    border-color: rgba(84, 214, 138, 0.28);
}

.hero-panel {
    padding: 22px;
    background: linear-gradient(180deg, rgba(21, 28, 38, 0.96), rgba(13, 18, 24, 0.96));
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.hero-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-soft);
}

.hero-panel-row:first-child {
    padding-top: 0;
}

.hero-panel-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hero-panel-row span {
    color: var(--muted);
    font-size: 13px;
}

.hero-panel-row strong {
    text-align: right;
    font-size: 13px;
}

.page-heading {
    max-width: 850px;
    margin-bottom: 40px;
}

.page-heading h1 {
    font-size: clamp(42px, 7vw, 72px);
}

.page-heading p:last-child {
    color: var(--muted);
    font-size: 18px;
}

.section-block {
    margin-top: 82px;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 28px;
}

.section-heading h2 {
    margin-bottom: 12px;
    font-size: clamp(30px, 4vw, 46px);
}

.section-heading p:last-child {
    color: var(--muted);
    margin-bottom: 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-card,
.security-card,
.quick-link,
.info-card,
.timeline-item,
.notice,
.faq-list details,
.contact-card {
    background: rgba(16, 21, 29, 0.88);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.feature-card {
    padding: 24px;
    min-width: 0;
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border-radius: 10px;
    color: var(--blue);
    background: rgba(98, 168, 255, 0.08);
    border: 1px solid rgba(98, 168, 255, 0.16);
    font-weight: 800;
}

.feature-card h3 {
    margin: 0 0 8px;
}

.feature-card p,
.security-card p,
.quick-link span,
.info-card p,
.timeline-item p,
.notice,
.faq-list p,
.contact-card p {
    color: var(--muted);
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.security-card {
    padding: 24px;
    min-width: 0;
}

.security-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.security-card-green {
    border-color: rgba(84, 214, 138, 0.24);
}

.security-card-green .security-kicker {
    color: var(--green);
}

.security-card-orange {
    border-color: rgba(245, 173, 82, 0.24);
}

.security-card-orange .security-kicker {
    color: var(--orange);
}

.security-card-blue {
    border-color: rgba(98, 168, 255, 0.24);
}

.security-card-blue .security-kicker {
    color: var(--blue);
}

.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px;
    background: rgba(13, 18, 24, 0.7);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.flow-node {
    width: min(100%, 360px);
    padding: 16px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-weight: 750;
}

.flow-node-accent {
    border-color: rgba(98, 168, 255, 0.36);
    box-shadow: inset 0 0 0 1px rgba(98, 168, 255, 0.08);
}

.flow-node-strong {
    border-color: rgba(84, 214, 138, 0.34);
}

.flow-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 900px);
    gap: 14px;
}

.flow-columns .flow-node {
    width: 100%;
}

.flow-arrow {
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.quick-link:hover,
.quick-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(98, 168, 255, 0.34);
    background: rgba(21, 28, 38, 0.94);
}

.quick-link span {
    font-size: 12px;
}

.quick-link strong {
    font-size: 16px;
}

.contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 82px;
    padding: 28px;
}

.contact-card > div:first-child {
    max-width: 720px;
}

.contact-card h2 {
    margin-bottom: 8px;
}

.contact-card p:last-child {
    margin-bottom: 0;
}

.contact-handle {
    flex: 0 0 auto;
    padding: 14px 18px;
    border: 1px solid rgba(98, 168, 255, 0.3);
    border-radius: 12px;
    color: var(--blue);
    background: rgba(98, 168, 255, 0.08);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.info-card {
    padding: 26px;
}

.notice {
    margin-top: 20px;
    padding: 20px 22px;
}

.notice-strong {
    margin-top: 28px;
    color: var(--muted);
}

.notice-strong strong {
    color: var(--text);
}

.timeline {
    display: grid;
    gap: 18px;
}

.timeline-item {
    padding: 26px;
    border-left: 3px solid var(--blue);
}

.version {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--blue);
    font-family: ui-monospace, monospace;
    font-size: 13px;
}

.architecture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.architecture-node {
    width: min(100%, 360px);
    padding: 18px 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-weight: 700;
}

.architecture-row {
    display: flex;
    gap: 14px;
    width: 100%;
    justify-content: center;
}

.architecture-row .architecture-node {
    width: min(30%, 280px);
}

.architecture-arrow {
    color: var(--muted);
    font-size: 22px;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-list details {
    padding: 18px 20px;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 700;
}

.site-footer {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
    padding: 28px 0 50px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.site-footer p {
    margin: 4px 0;
}

@media (max-width: 980px) {
    .hero-home {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        width: min(100%, 640px);
    }

    .feature-grid,
    .security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .site-header {
        position: sticky;
    }

    .site-header-inner {
        flex-wrap: wrap;
        gap: 10px 14px;
        min-height: 70px;
        padding: 12px 18px;
    }

    .site-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-brand strong {
        font-size: 16px;
    }

    .site-brand small {
        font-size: 10px;
    }

    .site-brand-icon {
        font-size: 26px;
    }

    .menu-toggle {
        display: block;
    }

    .site-header-menu {
        width: 100%;
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 6px 0 4px;
    }

    .js-ready .site-header-menu {
        display: none;
    }

    .js-ready .site-header-menu.is-open {
        display: flex;
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .site-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 48px;
        padding: 10px 12px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.018);
        text-align: center;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .logout-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin-top: 2px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .architecture-row {
        flex-direction: column;
        align-items: center;
    }

    .architecture-row .architecture-node {
        width: min(100%, 360px);
    }
}

@media (max-width: 700px) {
    .feature-grid,
    .security-grid,
    .quick-links,
    .flow-columns {
        grid-template-columns: 1fr;
    }

    .contact-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-handle {
        width: 100%;
        text-align: center;
    }

    .hero-panel-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .hero-panel-row strong {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .site-header-inner {
        padding: 11px 14px;
    }

    .site-nav {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .site-nav a,
    .logout-link {
        min-height: 50px;
        font-size: 14px;
    }

    .site-main {
        width: min(calc(100% - 28px), var(--max));
        padding: 38px 0 48px;
    }

    .hero,
    .hero-home {
        padding: 28px 0 24px;
    }

    h1 {
        font-size: clamp(46px, 17vw, 64px);
        overflow-wrap: anywhere;
    }

    .hero-text {
        font-size: 18px;
    }

    .section-block,
    .contact-card {
        margin-top: 58px;
    }

    .section-heading h2 {
        font-size: 31px;
    }

    .feature-card,
    .security-card,
    .flow-diagram,
    .contact-card {
        padding: 20px;
    }

    .flow-diagram {
        padding-inline: 14px;
    }

    .hero-badges {
        gap: 7px;
    }

    .status-badge {
        font-size: 10px;
    }

    .site-footer {
        width: min(calc(100% - 28px), var(--max));
    }
}

@media (max-width: 380px) {
    .site-header-inner {
        padding-inline: 12px;
    }

    .site-main,
    .site-footer {
        width: min(calc(100% - 20px), var(--max));
    }

    h1 {
        font-size: 44px;
    }

    .section-heading h2 {
        font-size: 28px;
    }
}


/* =========================================================
   Installation A -> Z
   ========================================================= */

.doc-hero {
    padding: 72px 0 34px;
    max-width: 900px;
}

.doc-hero h1 {
    margin: 8px 0 18px;
}

.installation-hero {
    max-width: 980px;
}

.installation-hero h1 {
    max-width: 820px;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.doc-lead {
    max-width: 820px;
    color: var(--muted);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.6;
}

.installation-summary {
    position: sticky;
    top: 84px;
    z-index: 20;
    display: flex;
    gap: 8px;
    margin: 34px 0 64px;
    padding: 10px;
    overflow-x: auto;
    background: rgba(13, 18, 25, 0.94);
    border: 1px solid var(--border);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    scrollbar-width: thin;
}

.installation-summary a {
    flex: 0 0 auto;
    padding: 9px 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

.installation-summary a:hover,
.installation-summary a:focus-visible {
    color: var(--text);
    background: var(--surface-2);
}

.install-phase {
    margin: 78px 0;
    scroll-margin-top: 160px;
}

.phase-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.phase-number {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue);
    background: rgba(98, 168, 255, 0.08);
    border: 1px solid rgba(98, 168, 255, 0.28);
    border-radius: 14px;
    font-weight: 900;
}

.phase-heading h2 {
    margin: 4px 0 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.12;
}

.step-card {
    margin: 14px 0;
    padding: 28px;
    background: linear-gradient(180deg, rgba(21, 28, 38, 0.94), rgba(14, 19, 27, 0.96));
    border: 1px solid var(--border);
    border-radius: 16px;
}

.step-card-important {
    border-color: rgba(98, 168, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(98, 168, 255, 0.04);
}

.step-card p {
    max-width: 900px;
    color: var(--muted);
    line-height: 1.7;
}

.step-card p strong {
    color: var(--text);
}

.step-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.step-title h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.step-badge {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    flex: 0 0 auto;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
}

.external-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 10px 0;
    padding: 11px 16px;
    color: var(--bg);
    background: var(--text);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 900;
}

.external-button:hover {
    opacity: 0.9;
}

.mini-note,
.expected {
    margin-top: 14px;
    color: var(--muted);
    font-size: 14px;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.check-grid > div {
    padding: 16px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.check-grid strong,
.check-grid span {
    display: block;
}

.check-grid strong {
    margin-bottom: 5px;
    color: var(--text);
    font-size: 13px;
}

.check-grid span {
    color: var(--muted);
    font-size: 14px;
}

.compact-notice {
    margin: 18px 0 0;
}

.notice-warning {
    color: #ffd79a;
    background: rgba(255, 178, 71, 0.08);
    border-color: rgba(255, 178, 71, 0.28);
}

.notice-danger {
    color: #ffd2d7;
    background: rgba(255, 102, 120, 0.08);
    border-color: rgba(255, 102, 120, 0.28);
}

.notice-info {
    color: #cae3ff;
    background: rgba(98, 168, 255, 0.08);
    border-color: rgba(98, 168, 255, 0.25);
}

.example-box {
    display: grid;
    gap: 7px;
    margin: 16px 0;
    padding: 16px;
    background: #090d12;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.example-box span,
.example-box small {
    color: var(--muted);
    font-size: 12px;
}

.example-box code {
    color: var(--text);
    overflow-wrap: anywhere;
}

.command-box {
    margin: 16px 0;
    overflow: hidden;
    background: #080c11;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.command-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 14px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
}

.command-box > code {
    display: block;
    padding: 17px;
    overflow-x: auto;
    color: #dceaff;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

.command-box-long > code {
    font-size: 12px;
}

.copy-button {
    min-width: 72px;
    min-height: 34px;
    padding: 6px 10px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.copy-button:hover,
.copy-button:focus-visible {
    border-color: var(--blue);
}

.copy-button.is-copied {
    color: #7ee7aa;
    border-color: rgba(82, 211, 135, 0.45);
}

.checklist {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.checklist > div,
.state-preview span,
.final-check-grid > div {
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--muted);
}

.state-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0;
}

.state-preview-ok span {
    color: #a9f4c7;
    border-color: rgba(82, 211, 135, 0.22);
}

.essential-commands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.essential-commands .command-box {
    margin: 0;
}

.final-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

@media (max-width: 900px) {
    .installation-summary {
        top: 82px;
    }

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

@media (max-width: 700px) {
    .doc-hero {
        padding-top: 38px;
    }

    .installation-summary {
        position: static;
        margin: 24px 0 46px;
    }

    .install-phase {
        margin: 58px 0;
        scroll-margin-top: 90px;
    }

    .phase-heading {
        gap: 12px;
    }

    .phase-number {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .step-card {
        padding: 20px;
    }

    .step-title {
        align-items: flex-start;
    }

    .step-title h3 {
        font-size: 19px;
    }

    .check-grid,
    .state-preview,
    .essential-commands,
    .final-check-grid {
        grid-template-columns: 1fr;
    }

    .external-button {
        width: 100%;
    }

    .command-box > code {
        padding: 15px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .phase-heading h2 {
        font-size: 27px;
    }

    .step-card {
        padding: 17px;
        border-radius: 14px;
    }

    .command-box-head {
        padding-left: 11px;
    }

    .copy-button {
        min-width: 68px;
    }
}


/* =========================================================
   Installation V3 — aide grand débutant
   ========================================================= */

.beginner-rule {
    margin: 18px 0 28px;
    padding: 16px 18px;
    color: var(--muted);
    background: rgba(82, 211, 135, 0.055);
    border: 1px solid rgba(82, 211, 135, 0.2);
    border-radius: 12px;
    line-height: 1.65;
}

.beginner-rule strong {
    color: #a9f4c7;
}

.context-strip {
    margin: -4px 0 18px;
    padding: 10px 12px;
    color: var(--muted);
    background: rgba(98, 168, 255, 0.045);
    border: 1px solid rgba(98, 168, 255, 0.14);
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.55;
}

.context-strip strong {
    color: #cfe7ff;
}

@media (max-width: 700px) {
    .context-strip {
        font-size: 12px;
    }
}


/* =========================================================
   Présentation V2 — vitrine BOTillou
   ========================================================= */
.dream-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    gap: 64px;
    align-items: center;
    min-height: 720px;
    padding: 90px 0 72px;
    isolation: isolate;
}
.dream-glow { position:absolute; border-radius:50%; filter:blur(110px); opacity:.16; z-index:-1; pointer-events:none; }
.dream-glow-one { width:420px; height:420px; background:#1677ff; left:-180px; top:60px; }
.dream-glow-two { width:360px; height:360px; background:#2dd477; right:-100px; bottom:20px; }
.live-pill { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid rgba(82,211,135,.25); background:rgba(82,211,135,.06); border-radius:999px; color:#8be8af; font-size:12px; font-weight:800; letter-spacing:.08em; }
.live-pill span { width:8px; height:8px; border-radius:50%; background:#52d387; box-shadow:0 0 14px #52d387; animation:botPulse 1.8s infinite; }
@keyframes botPulse { 50% { opacity:.35; transform:scale(.75); } }
.dream-hero h1 { margin:24px 0 22px; max-width:780px; font-size:clamp(52px,6vw,86px); line-height:.98; letter-spacing:-.055em; }
.dream-hero h1 em { color:#65aaff; font-style:normal; }
.dream-lead { max-width:720px; color:var(--muted); font-size:clamp(18px,1.7vw,23px); line-height:1.65; }
.dream-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.dream-primary,.dream-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 20px; border-radius:12px; font-weight:800; text-decoration:none; transition:.2s ease; }
.dream-primary { gap:16px; background:linear-gradient(135deg,#388fff,#58aaff); color:white; box-shadow:0 16px 45px rgba(49,133,255,.18); }
.dream-primary:hover { transform:translateY(-2px); }
.dream-primary span { font-size:20px; }
.dream-secondary { color:#c9d3df; border:1px solid var(--border); background:rgba(255,255,255,.025); }
.trust-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:25px; color:#8d9aaa; font-size:13px; }
.trust-row span::first-letter { color:#52d387; }

.dream-dashboard { position:relative; overflow:hidden; padding:24px; border:1px solid rgba(106,169,255,.2); border-radius:24px; background:linear-gradient(145deg,rgba(20,30,42,.97),rgba(8,14,21,.98)); box-shadow:0 40px 100px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04); transform:perspective(1200px) rotateY(-3deg); }
.dream-dashboard::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 20%,rgba(93,166,255,.04),transparent 70%); pointer-events:none; }
.dashboard-top,.dashboard-stats>div,.dashboard-feed>div { display:flex; align-items:center; justify-content:space-between; }
.dashboard-top { padding-bottom:18px; border-bottom:1px solid var(--border); }
.dashboard-top>div { display:flex; flex-direction:column; gap:3px; }
.dashboard-label { color:#73859a; font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.dashboard-top strong { font-size:17px; }
.online-dot { color:#52d387; font-size:11px; font-weight:800; }
.dashboard-balance { padding:28px 0 6px; }
.dashboard-balance>span,.dashboard-balance small { display:block; color:#7f8e9f; }
.dashboard-balance>span { font-size:13px; }
.dashboard-balance strong { display:block; margin:4px 0; font-size:46px; letter-spacing:-.04em; }
.dashboard-balance small { font-size:12px; }
.dashboard-chart { position:relative; height:180px; margin:16px -6px 4px; overflow:hidden; }
.chart-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:100% 45px,25% 100%; }
.dashboard-chart svg { position:absolute; inset:0; width:100%; height:100%; }
.chart-area { fill:url(#areaGradient); }
.chart-line { fill:none; stroke:#52d387; stroke-width:3; filter:drop-shadow(0 0 6px rgba(82,211,135,.45)); }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 18px; }
.dashboard-stats>div { flex-direction:column; align-items:flex-start; gap:5px; padding:12px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.02); }
.dashboard-stats span { color:#718196; font-size:10px; text-transform:uppercase; }
.dashboard-stats strong { font-size:12px; }
.dashboard-stats .positive { color:#52d387; }
.dashboard-feed { display:grid; gap:8px; }
.dashboard-feed>div { gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.025); }
.feed-icon { display:grid; place-items:center; flex:0 0 30px; height:30px; border-radius:8px; font-weight:900; }
.feed-icon.buy { color:#68aaff; background:rgba(70,145,255,.12); }
.feed-icon.dca { color:#ffbf69; background:rgba(255,175,70,.1); }
.feed-icon.sell { color:#5dde91; background:rgba(82,211,135,.1); }
.dashboard-feed p { flex:1; margin:0; display:flex; flex-direction:column; }
.dashboard-feed p strong { font-size:12px; }
.dashboard-feed p small { color:#718196; font-size:10px; }
.dashboard-feed b { color:#8da0b4; font-size:10px; }

.dream-strip { display:grid; grid-template-columns:repeat(4,1fr); margin:12px 0 100px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.018); overflow:hidden; }
.dream-strip div { padding:23px 20px; text-align:center; border-right:1px solid var(--border); }
.dream-strip div:last-child { border:0; }
.dream-strip strong,.dream-strip span { display:block; }
.dream-strip strong { font-size:18px; }
.dream-strip span { margin-top:4px; color:#738295; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.dream-section { padding:68px 0; }
.dream-heading { max-width:760px; margin-bottom:34px; }
.dream-heading h2 { margin:8px 0 14px; font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-.035em; }
.dream-heading>p:last-child { color:var(--muted); font-size:17px; line-height:1.7; }
.dream-section-center .dream-heading { margin-left:auto; margin-right:auto; text-align:center; }
.wow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wow-card { position:relative; overflow:hidden; min-height:330px; padding:28px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,rgba(20,29,40,.86),rgba(10,16,23,.95)); }
.wow-card::after { content:""; position:absolute; width:180px; height:180px; right:-90px; top:-90px; border-radius:50%; background:#3288ff; filter:blur(80px); opacity:.08; }
.wow-card-large { min-height:430px; }
.wow-card-wide { min-height:360px; }
.wow-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:24px; border:1px solid rgba(101,170,255,.18); border-radius:13px; background:rgba(101,170,255,.07); font-size:22px; }
.wow-kicker { color:#65aaff; font-size:11px; font-weight:900; letter-spacing:.13em; }
.wow-card h3 { margin:8px 0 10px; font-size:28px; }
.wow-card>p { max-width:650px; color:var(--muted); line-height:1.7; }
.mini-terminal { margin-top:28px; padding:16px; border:1px solid var(--border); border-radius:12px; background:#070b10; }
.mini-terminal span { display:block; padding-bottom:10px; color:#8d9bac; border-bottom:1px solid var(--border); font-size:11px; }
.mini-terminal span i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#52d387; }
.mini-terminal code { display:block; padding-top:10px; color:#75dda0; font-size:12px; }
.phone-mock { width:min(270px,100%); margin:25px auto 0; padding:14px; border:1px solid #2a3746; border-radius:22px; background:#080d13; box-shadow:0 22px 40px rgba(0,0,0,.25); }
.phone-mock>div { display:flex; justify-content:space-between; padding:7px 5px 14px; font-size:12px; }
.phone-mock b { color:#52d387; }
.phone-mock button { width:100%; margin-top:7px; padding:11px; color:#bdc9d6; border:1px solid var(--border); border-radius:9px; background:#111923; text-align:left; }
.trade-pills { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:40px; }
.trade-pills span { padding:12px 16px; border:1px solid rgba(82,211,135,.22); border-radius:10px; color:#7ce3a5; background:rgba(82,211,135,.055); font-weight:900; }
.trade-pills i { color:#526172; font-style:normal; }
.result-demo { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.result-demo div { padding:16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); }
.result-demo span,.result-demo strong { display:block; }
.result-demo span { color:#738295; font-size:11px; }
.result-demo strong { margin-top:7px; font-size:14px; }
.demo-disclaimer { display:block; margin-top:15px; color:#687687; }

.power-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.power-grid article { min-height:170px; padding:22px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.018); }
.power-grid article>span { color:#42658d; font-size:11px; font-weight:900; }
.power-grid strong { display:block; margin:18px 0 8px; font-size:20px; }
.power-grid p { margin:0; color:#7f8d9e; font-size:13px; line-height:1.6; }

.night-card { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr .8fr; align-items:center; min-height:470px; padding:52px; border:1px solid rgba(90,157,255,.18); border-radius:28px; background:radial-gradient(circle at 80% 10%,rgba(39,111,211,.18),transparent 35%),linear-gradient(145deg,#101925,#080d13); }
.night-copy { position:relative; z-index:2; max-width:610px; }
.night-copy h2 { margin:8px 0 15px; font-size:clamp(38px,4.5vw,60px); line-height:1.05; letter-spacing:-.04em; }
.night-copy>p:not(.eyebrow) { margin-bottom:28px; color:var(--muted); line-height:1.7; }
.night-visual { position:relative; min-height:340px; }
.moon { position:absolute; width:150px; height:150px; right:20px; top:5px; border-radius:50%; background:#cbd9e8; box-shadow:0 0 70px rgba(162,203,255,.2); opacity:.9; }
.server-stack { position:absolute; left:10%; right:8%; bottom:35px; display:grid; gap:8px; padding:16px; border:1px solid #26384d; border-radius:16px; background:rgba(5,10,16,.86); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.server-stack div { display:flex; align-items:center; gap:6px; padding:13px; border:1px solid #1e2a38; border-radius:8px; background:#0e1620; }
.server-stack i { width:6px; height:6px; border-radius:50%; background:#52d387; }
.server-stack span { margin-left:auto; color:#91a0b1; font-size:11px; }
.night-status { position:absolute; right:0; bottom:5px; color:#52d387; font-size:11px; font-weight:900; }

.dream-final { position:relative; overflow:hidden; margin:70px 0; padding:90px 25px; border:1px solid rgba(101,170,255,.16); border-radius:28px; background:linear-gradient(145deg,rgba(19,31,46,.8),rgba(7,12,18,.95)); text-align:center; }
.dream-final h2 { margin:8px 0 14px; font-size:clamp(40px,5vw,68px); letter-spacing:-.045em; }
.dream-final>p { max-width:720px; margin:0 auto 28px; color:var(--muted); font-size:17px; line-height:1.7; }
.dream-primary-big { min-height:60px; padding:0 27px; }
.dream-final>small { display:block; margin-top:18px; color:#69798a; }
.final-orbit { position:absolute; width:500px; height:500px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(101,170,255,.08); border-radius:50%; box-shadow:0 0 120px rgba(40,121,255,.07); pointer-events:none; }
.dream-contact { margin-top:0; }

@media (max-width: 980px) {
    .dream-hero { grid-template-columns:1fr; gap:38px; min-height:auto; padding-top:65px; }
    .dream-dashboard { max-width:650px; transform:none; }
    .power-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
    .dream-hero { padding:52px 0 38px; }
    .dream-hero h1 { font-size:clamp(48px,15vw,68px); }
    .dream-lead { font-size:18px; }
    .dream-actions { display:grid; }
    .dream-primary,.dream-secondary { width:100%; }
    .trust-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .dream-dashboard { padding:17px; border-radius:18px; }
    .dashboard-balance strong { font-size:38px; }
    .dashboard-chart { height:145px; }
    .dashboard-stats { grid-template-columns:1fr; }
    .dream-strip { grid-template-columns:1fr 1fr; margin-bottom:55px; }
    .dream-strip div:nth-child(2) { border-right:0; }
    .dream-strip div:nth-child(-n+2) { border-bottom:1px solid var(--border); }
    .dream-section { padding:48px 0; }
    .dream-heading h2 { font-size:36px; }
    .wow-grid,.power-grid { grid-template-columns:1fr; }
    .wow-card,.wow-card-large,.wow-card-wide { min-height:0; padding:22px; }
    .result-demo { grid-template-columns:1fr; }
    .trade-pills { gap:6px; }
    .trade-pills span { padding:10px; font-size:12px; }
    .night-card { grid-template-columns:1fr; padding:30px 22px; }
    .night-visual { min-height:280px; margin-top:20px; }
    .moon { width:110px; height:110px; }
    .dream-final { margin:40px 0; padding:60px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-pill span { animation:none; }
    .dream-primary { transition:none; }
}


/* =========================================================
   Page Commandes V1
   ========================================================= */
.commands-hero { display:grid; grid-template-columns:1fr 300px; gap:50px; align-items:center; padding:80px 0 45px; }
.commands-hero h1 { margin:7px 0 15px; font-size:clamp(46px,6vw,76px); letter-spacing:-.05em; }
.commands-lead { max-width:780px; color:var(--muted); font-size:19px; line-height:1.7; }
.commands-hero-panel { display:flex; flex-direction:column; gap:9px; padding:25px; border:1px solid rgba(101,170,255,.22); border-radius:20px; background:linear-gradient(145deg,#111b27,#090f16); box-shadow:0 30px 70px rgba(0,0,0,.28); }
.commands-hero-panel .cmd-prompt { color:#73859a; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.commands-hero-panel code { color:#7ce3a5; font-size:30px; font-weight:900; }
.commands-hero-panel small { color:#6f7f91; }

.beginner-banner { display:flex; gap:17px; margin:15px 0 24px; padding:20px; border:1px solid rgba(73,151,255,.22); border-radius:16px; background:rgba(65,143,255,.055); }
.beginner-icon { font-size:25px; }
.beginner-banner strong { font-size:16px; }
.beginner-banner p { margin:5px 0 0; color:#91a0b1; line-height:1.65; }
.beginner-banner code { color:#7eb5ff; }

.command-jump { position:sticky; top:72px; z-index:8; display:flex; gap:8px; margin:0 0 70px; padding:10px; border:1px solid var(--border); border-radius:14px; background:rgba(7,12,18,.9); backdrop-filter:blur(15px); }
.command-jump a { flex:1; padding:11px; border-radius:9px; color:#91a0b1; text-align:center; text-decoration:none; font-size:13px; font-weight:800; }
.command-jump a:hover { color:#eaf2fb; background:#121b25; }

.commands-section { padding:35px 0 55px; scroll-margin-top:140px; }
.commands-heading { max-width:820px; margin-bottom:26px; }
.commands-heading h2 { margin:8px 0 12px; font-size:clamp(32px,4vw,48px); letter-spacing:-.035em; }
.commands-heading>p:last-child { color:var(--muted); line-height:1.7; }
.commands-heading code { color:#79b2ff; }

.command-card { overflow:hidden; margin:14px 0; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,rgba(18,27,38,.9),rgba(8,13,19,.96)); }
.command-card.command-safe { border-left:3px solid #48c87d; }
.command-card.command-warning { border-left:3px solid #e9a84c; }
.command-card.command-danger { border-left:3px solid #e06464; }
.command-card-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 24px 17px; }
.command-type { color:#718297; font-size:10px; font-weight:900; letter-spacing:.13em; }
.command-card h3 { margin:5px 0 0; font-size:25px; letter-spacing:-.02em; }
.risk-badge { flex:none; padding:7px 9px; border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.09em; }
.risk-low { color:#67dc96; border:1px solid rgba(82,211,135,.25); background:rgba(82,211,135,.07); }
.risk-medium { color:#f0b767; border:1px solid rgba(240,183,103,.25); background:rgba(240,183,103,.07); }
.risk-high { color:#ef8585; border:1px solid rgba(239,100,100,.27); background:rgba(239,100,100,.07); }
.command-syntax { padding:16px 24px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#070c12; overflow-x:auto; }
.command-syntax code { color:#78dda0; font-size:15px; white-space:nowrap; }
.command-button-demo span { display:inline-block; padding:10px 14px; border:1px solid #2a3a4c; border-radius:9px; color:#dbe6f2; background:#121b25; font-weight:800; }
.command-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.command-details>div { padding:20px 24px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.command-details>div:nth-child(2n) { border-right:0; }
.command-details>div:nth-last-child(-n+2) { border-bottom:0; }
.command-details strong { display:block; margin-bottom:6px; font-size:13px; }
.command-details p { margin:0; color:#8998a9; font-size:13px; line-height:1.65; }
.command-details code { color:#77adf4; }
.command-alert { padding:14px 24px; border-top:1px solid rgba(230,167,75,.16); color:#c99b5b; background:rgba(230,167,75,.045); font-size:12px; line-height:1.6; }
.command-alert-red { color:#df8585; border-top-color:rgba(224,100,100,.18); background:rgba(224,100,100,.045); }

.pending-command-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pending-command-grid div { padding:18px; border:1px dashed #2b3948; border-radius:13px; background:rgba(255,255,255,.012); }
.pending-command-grid code,.pending-command-grid span { display:block; }
.pending-command-grid code { color:#a9b8c9; font-size:14px; font-weight:800; }
.pending-command-grid span { margin-top:7px; color:#657486; font-size:11px; }
.command-source-note { margin-top:16px; padding:20px; border:1px solid rgba(73,151,255,.17); border-radius:14px; background:rgba(73,151,255,.035); }
.command-source-note p { margin:6px 0 0; color:#8393a5; line-height:1.65; }

.command-cheatsheet { overflow:hidden; border:1px solid var(--border); border-radius:17px; }
.command-cheatsheet>div { display:grid; grid-template-columns:1fr minmax(230px,.7fr); align-items:center; gap:20px; padding:16px 20px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.014); }
.command-cheatsheet>div:last-child { border-bottom:0; }
.command-cheatsheet span { color:#9aa8b8; }
.command-cheatsheet code { justify-self:start; padding:7px 10px; border-radius:7px; color:#75dda0; background:#080d13; }
.commands-final-warning { margin-top:20px; }

@media (max-width:900px) {
    .commands-hero { grid-template-columns:1fr; gap:25px; padding-top:55px; }
    .commands-hero-panel { max-width:430px; }
    .command-jump { position:static; display:grid; grid-template-columns:1fr 1fr; }
    .pending-command-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
    .commands-hero { padding:45px 0 30px; }
    .commands-hero h1 { font-size:48px; }
    .commands-lead { font-size:17px; }
    .beginner-banner { align-items:flex-start; }
    .command-jump { margin-bottom:35px; }
    .commands-section { padding:25px 0 40px; }
    .command-card-top { align-items:flex-start; padding:19px 17px 14px; }
    .command-card h3 { font-size:20px; overflow-wrap:anywhere; }
    .command-syntax { padding:14px 17px; }
    .command-details { grid-template-columns:1fr; }
    .command-details>div { padding:17px; border-right:0; border-bottom:1px solid var(--border) !important; }
    .command-details>div:last-child { border-bottom:0 !important; }
    .command-alert { padding:13px 17px; }
    .pending-command-grid { grid-template-columns:1fr; }
    .command-cheatsheet>div { grid-template-columns:1fr; gap:8px; }
}
@media (max-width:420px) {
    .command-jump { grid-template-columns:1fr; }
    .risk-badge { font-size:8px; }
}


/* =========================================================
   Commandes V2 finale — Menu utilisateur + VPS start/off
   ========================================================= */

.commands-hero-final {
    padding-bottom: 32px;
}

.commands-hero-panel-final code {
    font-size: 36px;
}

.command-jump-final {
    grid-template-columns: repeat(3, 1fr);
}

.telegram-menu-preview {
    display: flex;
    justify-content: center;
    margin: 26px 0 34px;
}

.telegram-phone {
    width: min(520px, 100%);
    padding: 18px;
    border: 1px solid #29384a;
    border-radius: 28px;
    background: linear-gradient(160deg, #101925, #080d13);
    box-shadow: 0 35px 80px rgba(0,0,0,.35);
}

.telegram-phone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 5px 15px;
    border-bottom: 1px solid var(--border);
}

.telegram-phone-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.telegram-phone-head > div > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #2b3a4c;
    border-radius: 12px;
    background: #121b25;
}

.telegram-phone-head p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.telegram-phone-head small {
    color: #6f7f91;
    font-size: 10px;
}

.telegram-phone-head b {
    color: #52d387;
}

.telegram-status-lines {
    display: grid;
    gap: 5px;
    margin: 15px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #080d13;
}

.telegram-status-lines span {
    color: #9aa8b8;
    font-size: 12px;
    line-height: 1.5;
}

.telegram-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.telegram-button {
    display: grid;
    min-height: 43px;
    place-items: center;
    padding: 8px 10px;
    border: 1px solid #2a3949;
    border-radius: 10px;
    color: #c1cddd;
    background: #111923;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.telegram-button-start {
    grid-column: 1 / -1;
    color: #9be9ba;
    border-color: rgba(82,211,135,.24);
    background: rgba(82,211,135,.065);
}

.telegram-button-update {
    grid-column: 1 / -1;
    color: #9bbbf0;
    border-color: rgba(86,145,230,.22);
    background: rgba(86,145,230,.055);
}

.menu-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 13px;
}

.menu-action-card {
    display: flex;
    gap: 16px;
    min-height: 230px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18,27,38,.86), rgba(8,13,19,.96));
}

.menu-action-card.menu-action-danger {
    border-color: rgba(224,100,100,.25);
}

.menu-action-card.menu-action-stop {
    border-color: rgba(240,170,77,.22);
}

.menu-action-card.menu-action-money {
    border-color: rgba(92,155,242,.19);
}

.menu-action-card.menu-action-update {
    grid-column: 1 / -1;
    min-height: 0;
    border-color: rgba(82,211,135,.17);
}

.menu-action-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #2b3a4b;
    border-radius: 13px;
    background: #111a24;
    font-size: 22px;
}

.menu-action-kicker {
    color: #6f99cb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.menu-action-card h3 {
    margin: 6px 0 9px;
    font-size: 23px;
}

.menu-action-card p {
    margin: 0 0 8px;
    color: #8796a7;
    font-size: 13px;
    line-height: 1.65;
}

.menu-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(231,164,72,.18);
    border-radius: 9px;
    color: #c69b61;
    background: rgba(231,164,72,.045);
    font-size: 11px;
    line-height: 1.55;
}

.menu-warning-blue {
    color: #86abd8;
    border-color: rgba(75,145,235,.18);
    background: rgba(75,145,235,.04);
}

.vps-section {
    scroll-margin-top: 120px;
}

.vps-command-supercard {
    display: grid;
    grid-template-columns: 80px 1fr;
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(145deg, #111a25, #080d13);
}

.vps-command-start {
    border-color: rgba(82,211,135,.22);
}

.vps-command-stop {
    border-color: rgba(230,93,93,.23);
}

.vps-command-number {
    display: grid;
    place-items: start center;
    padding-top: 31px;
    color: #61768d;
    border-right: 1px solid var(--border);
    font-size: 14px;
    font-weight: 900;
}

.vps-command-content {
    padding: 30px;
}

.vps-command-label {
    color: #718399;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.vps-command-line {
    margin: 10px 0 24px;
    padding: 22px;
    border: 1px solid #263646;
    border-radius: 13px;
    background: #060a0f;
}

.vps-command-line code {
    color: #75dda0;
    font-size: clamp(24px,4vw,38px);
    font-weight: 900;
}

.vps-command-stop .vps-command-line code {
    color: #ef9292;
}

.vps-explanation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}

.vps-explanation-grid > div {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.015);
}

.vps-explanation-grid strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.vps-explanation-grid p {
    margin: 0;
    color: #8392a3;
    font-size: 12px;
    line-height: 1.6;
}

.vps-explanation-grid code {
    color: #76b1f5;
}

.vps-stop-warning {
    margin-top: 17px;
    padding: 16px;
    border: 1px solid rgba(231,158,66,.21);
    border-radius: 12px;
    color: #d0a15d;
    background: rgba(231,158,66,.05);
}

.vps-stop-warning p {
    margin: 5px 0 0;
    color: #a48d70;
    line-height: 1.65;
}

.vps-beginner-flow {
    margin-top: 18px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.014);
}

.vps-beginner-flow h3 {
    margin: 0 0 18px;
}

.vps-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.vps-flow-step:last-child {
    border-bottom: 0;
}

.vps-flow-step > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #8ebdff;
    background: rgba(68,143,244,.08);
    font-size: 11px;
    font-weight: 900;
}

.vps-flow-step strong,
.vps-flow-step code,
.vps-flow-step p {
    display: block;
}

.vps-flow-step code {
    margin-top: 6px;
    color: #72dda0;
}

.vps-flow-step p {
    margin: 5px 0 0;
    color: #7f8e9f;
    font-size: 12px;
}

.compare-box {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: stretch;
    margin-top: 20px;
}

.compare-col {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.015);
}

.compare-col span,
.compare-col strong {
    display: block;
}

.compare-col span {
    color: #738599;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.compare-col strong {
    margin: 8px 0;
    font-size: 22px;
}

.compare-col p {
    margin: 0;
    color: #8493a3;
    line-height: 1.6;
}

.compare-vs {
    display: grid;
    place-items: center;
    color: #58697c;
    font-size: 26px;
    font-weight: 900;
}

.three-command-memory {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.three-command-memory > div {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(18,27,38,.8), rgba(8,13,19,.94));
    text-align: center;
}

.three-command-memory span {
    display: block;
    margin-bottom: 11px;
    font-size: 25px;
}

.three-command-memory strong {
    display: block;
    color: #d7e3ef;
    font-size: 21px;
}

.three-command-memory p {
    margin: 8px 0 0;
    color: #7f8e9f;
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .command-jump-final {
        grid-template-columns: 1fr;
    }

    .menu-actions-grid {
        grid-template-columns: 1fr;
    }

    .menu-action-card.menu-action-update {
        grid-column: auto;
    }

    .vps-command-supercard {
        grid-template-columns: 1fr;
    }

    .vps-command-number {
        display: none;
    }

    .vps-command-content {
        padding: 22px;
    }

    .vps-explanation-grid {
        grid-template-columns: 1fr;
    }

    .compare-box {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .compare-vs {
        min-height: 34px;
    }

    .three-command-memory {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .telegram-buttons {
        grid-template-columns: 1fr;
    }

    .telegram-button-start,
    .telegram-button-update {
        grid-column: auto;
    }

    .menu-action-card {
        min-height: 0;
        padding: 18px;
        flex-direction: column;
    }

    .vps-command-line {
        padding: 17px;
    }

    .vps-command-line code {
        font-size: 25px;
    }
}


/* =========================================================
   Commandes V3 — aperçu fidèle au vrai menu Telegram
   ========================================================= */
.telegram-dashboard-title {
    margin: 15px 0 0;
    padding: 0 2px;
    color: #e5edf6;
    font-size: 13px;
    font-weight: 800;
}

.telegram-status-lines-real {
    gap: 2px;
    margin-top: 10px;
}

.telegram-status-lines-real span {
    color: #d1dae5;
}

.telegram-status-lines-real .telegram-line-space {
    height: 8px;
}

.telegram-button-stop {
    color: #eef3f8;
    border-color: #344352;
    background: #303841;
}

.telegram-preview-note {
    max-width: 620px;
    margin: -18px auto 34px;
    color: #718196;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 520px) {
    .telegram-status-lines-real span {
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .telegram-preview-note {
        margin-top: -14px;
    }
}


/* =========================================================
   Commandes V4 — grille sans trou
   ========================================================= */
.menu-action-card.menu-action-reserve {
    grid-column: 1 / -1;
    min-height: 0;
}

@media (max-width: 800px) {
    .menu-action-card.menu-action-reserve {
        grid-column: auto;
    }
}


/* =========================================================
   Commandes V5 — Paramètres REAL expliqués
   ========================================================= */
.menu-action-card.menu-action-params {
    grid-column: 1 / -1;
    min-height: 0;
    border-color: rgba(92,155,242,.2);
}

.menu-action-body {
    min-width: 0;
    flex: 1;
}

.params-example {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    margin-top: 18px;
}

.params-example-title {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    color: #d7e4f2;
    font-size: 13px;
    font-weight: 900;
}

.params-group {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #080d13;
}

.params-group strong,
.params-group span {
    display: block;
}

.params-group strong {
    margin-bottom: 10px;
    color: #9fc7f7;
    font-size: 11px;
    line-height: 1.45;
}

.params-group span {
    margin-top: 6px;
    color: #8798aa;
    font-size: 11px;
    line-height: 1.5;
}

.params-group b {
    color: #dbe7f3;
}

.params-advice {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid rgba(82,211,135,.18);
    border-radius: 11px;
    background: rgba(82,211,135,.035);
}

.params-advice > strong {
    display: block;
    margin-bottom: 7px;
    color: #8fe2b0;
    font-size: 12px;
}

.params-advice p {
    margin: 5px 0;
    color: #8497a9;
    font-size: 12px;
    line-height: 1.65;
}

@media (max-width: 800px) {
    .menu-action-card.menu-action-params {
        grid-column: auto;
    }

    .params-example {
        grid-template-columns: 1fr;
    }

    .params-example-title {
        grid-column: auto;
    }
}


/* =========================================================
   Commandes V6 — configuration débutant + grille sans trou
   ========================================================= */
.menu-action-card.menu-action-profits {
    grid-column: 1 / -1;
    min-height: 0;
}

.params-example-title {
    padding: 10px 12px;
    border: 1px solid rgba(82, 211, 135, .18);
    border-radius: 9px;
    color: #a5e8bf;
    background: rgba(82, 211, 135, .04);
}

@media (max-width: 800px) {
    .menu-action-card.menu-action-profits {
        grid-column: auto;
    }
}

/* =========================================================
   Mises à jour V1 — timeline premium BOTillou
   ========================================================= */
.updates-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:28px;align-items:center;padding:46px 0 26px}.updates-hero h1{max-width:760px;margin:8px 0 14px;font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.045em}.updates-lead{max-width:760px;margin:0;color:var(--muted);font-size:clamp(16px,2vw,19px)}.updates-current{position:relative;overflow:hidden;padding:26px;border:1px solid rgba(84,214,138,.28);border-radius:22px;background:linear-gradient(145deg,rgba(84,214,138,.12),rgba(84,214,138,.055) 55%,rgba(16,21,29,.95));box-shadow:0 24px 70px rgba(0,0,0,.22)}.updates-current:after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-80px;border-radius:50%;background:rgba(84,214,138,.10);filter:blur(6px)}.updates-current small{display:block;color:#8fe2b0;font-size:11px;font-weight:800;letter-spacing:.12em}.updates-current strong{display:block;margin:4px 0;font-size:42px;letter-spacing:-.04em}.updates-current span{color:var(--muted);font-size:13px}.updates-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 34px}.updates-strip div{padding:15px;border:1px solid var(--border-soft);border-radius:13px;background:rgba(16,21,29,.72)}.updates-strip strong{display:block;font-size:20px}.updates-strip span{color:var(--muted);font-size:11px}.updates-intro{margin:34px 0 18px}.updates-intro h2{margin:5px 0 8px;font-size:clamp(26px,4vw,38px)}.updates-intro p{max-width:780px;color:var(--muted)}.release-timeline{position:relative;margin:26px 0 54px;padding-left:36px}.release-timeline:before{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:2px;background:linear-gradient(var(--green),rgba(84,214,138,.72),rgba(84,214,138,.28))}.release{position:relative;margin:0 0 18px;padding:22px 24px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(145deg,rgba(21,28,38,.92),rgba(13,18,24,.94));box-shadow:0 12px 35px rgba(0,0,0,.12)}.release:before{content:"";position:absolute;left:-31px;top:28px;width:12px;height:12px;border:3px solid var(--bg);border-radius:50%;background:var(--green);box-shadow:0 0 0 2px rgba(84,214,138,.24)}.release.major{border-color:rgba(84,214,138,.24)}.release.major:before,.release.current:before{background:var(--green);box-shadow:0 0 0 2px rgba(84,214,138,.24),0 0 20px rgba(84,214,138,.22)}.release.current{border-color:rgba(84,214,138,.38);background:linear-gradient(145deg,rgba(84,214,138,.075),rgba(13,18,24,.96) 45%)}.release.rebuilt:before{background:var(--orange);box-shadow:0 0 0 2px rgba(245,173,82,.22)}.release-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.release-version{display:inline-flex;align-items:center;gap:8px;margin-bottom:7px;color:#fff;font-size:13px;font-weight:850;letter-spacing:.06em}.release h3{margin:0;font-size:clamp(20px,3vw,27px);line-height:1.2}.release p{margin:9px 0 0;color:var(--muted);font-size:14px}.release-badge{flex:0 0 auto;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.09em}.release-badge.confirmed{color:#9be6b8;background:rgba(84,214,138,.10);border:1px solid rgba(84,214,138,.20)}.release-badge.reconstruction{color:#f5c98d;background:rgba(245,173,82,.08);border:1px solid rgba(245,173,82,.20)}.release-details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.release-detail{padding:12px;border:1px solid var(--border-soft);border-radius:11px;background:rgba(8,11,16,.34)}.release-detail strong{display:block;margin-bottom:4px;color:#cfe0ef;font-size:10px;letter-spacing:.08em}.release-detail span{display:block;color:#8798aa;font-size:12px;line-height:1.5}.release-mini{padding:16px 20px}.release-mini .release-head{align-items:center}.release-mini h3{font-size:17px}.release-mini p{font-size:13px}.updates-legend{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 28px}.updates-legend span{padding:8px 11px;border:1px solid var(--border-soft);border-radius:999px;color:var(--muted);font-size:11px}.updates-note{margin:0 0 48px;padding:20px 22px;border:1px solid rgba(84,214,138,.20);border-radius:15px;background:rgba(84,214,138,.045);color:var(--muted)}.updates-note strong{color:#9be6b8}.release-cluster{margin:0 0 18px;padding:18px 20px;border:1px dashed rgba(245,173,82,.24);border-radius:15px;background:rgba(245,173,82,.025)}.release-cluster strong{color:#f1c68d}.release-cluster p{margin:5px 0 0;color:var(--muted);font-size:13px}
@media(max-width:900px){.updates-hero{grid-template-columns:1fr}.updates-strip{grid-template-columns:repeat(2,1fr)}.release-details{grid-template-columns:1fr}}
@media(max-width:600px){.updates-hero{padding-top:28px}.updates-current{padding:20px}.updates-current strong{font-size:34px}.updates-strip{grid-template-columns:1fr 1fr}.release-timeline{padding-left:25px}.release-timeline:before{left:6px}.release{padding:18px 16px}.release:before{left:-25px;top:24px;width:10px;height:10px}.release-head{display:block}.release-badge{display:inline-block;margin-top:10px}.release-details{gap:7px}.updates-note{padding:17px}}

@media (max-width: 600px) {
    .installation-hero h1 {
        max-width: 100%;
        font-size: clamp(38px, 11vw, 48px);
        line-height: 1.04;
    }
}
/* =========================================================
   Dépôt USDC V1 — guide de financement grand débutant
   ========================================================= */
.funding-next-step{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) auto;
    gap:26px;
    align-items:center;
    margin:34px 0;
    padding:28px;
    border:1px solid rgba(82,211,135,.28);
    border-radius:20px;
    background:
        radial-gradient(circle at 92% 10%,rgba(82,211,135,.12),transparent 30%),
        linear-gradient(145deg,rgba(82,211,135,.065),rgba(12,18,24,.96) 48%);
    box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.funding-next-step h2{margin:5px 0 9px;font-size:clamp(25px,3vw,36px)}
.funding-next-step p{max-width:780px;margin:0;color:var(--muted)}
.funding-next-step-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.funding-next-step-points span{
    padding:7px 10px;border:1px solid rgba(82,211,135,.17);border-radius:999px;
    color:#9ee7bb;background:rgba(82,211,135,.04);font-size:11px;font-weight:800
}
.funding-next-step-button,.funding-primary-link{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:52px;padding:13px 18px;border:1px solid rgba(82,211,135,.38);
    border-radius:12px;background:rgba(82,211,135,.12);color:#a9efc3;
    font-weight:900;text-decoration:none;text-align:center
}
.funding-next-step-button:hover,.funding-primary-link:hover{background:rgba(82,211,135,.18);color:#c9f7da}

.funding-hero{max-width:1050px}
.funding-hero h1{max-width:900px;font-size:clamp(40px,5.2vw,66px);line-height:1.02;letter-spacing:-.045em}
.funding-roadmap{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:28px 0 38px
}
.funding-roadmap a{
    padding:12px 13px;border:1px solid rgba(82,211,135,.16);border-radius:11px;
    background:rgba(82,211,135,.035);color:#a3e9bd;text-decoration:none;
    font-size:11px;font-weight:850;text-align:center
}
.funding-roadmap a:hover{border-color:rgba(82,211,135,.36);background:rgba(82,211,135,.07)}
.funding-principle{
    display:flex;gap:18px;align-items:center;margin:0 0 40px;padding:22px 24px;
    border:1px solid rgba(82,211,135,.22);border-radius:16px;background:#0c1316
}
.funding-principle-icon{
    flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
    border:1px solid rgba(82,211,135,.35);background:rgba(82,211,135,.08);
    color:#8ce2ad;font-size:28px;font-weight:900
}
.funding-principle strong{display:block;margin-bottom:4px;color:#d8f4e3}
.funding-principle p{margin:0;color:var(--muted)}
.funding-external{
    border:1px solid rgba(82,211,135,.55)!important;
    background:rgba(82,211,135,.14)!important;
    color:#baf4cf!important;
    box-shadow:0 0 0 1px rgba(82,211,135,.05),0 10px 30px rgba(0,0,0,.18);
}
.funding-external:hover,
.funding-external:focus-visible{
    background:rgba(82,211,135,.22)!important;
    border-color:rgba(82,211,135,.8)!important;
    color:#e3ffed!important;
    opacity:1;
}
.funding-address-demo{
    margin-top:15px;padding:18px;border:1px dashed rgba(82,211,135,.24);
    border-radius:12px;background:#080d11;text-align:center
}
.funding-address-demo span,.funding-address-demo small{display:block}
.funding-address-demo span{color:#75c895;font-size:9px;font-weight:900;letter-spacing:.1em}
.funding-address-demo code{display:block;margin:8px 0;color:#edf7f1;font-size:22px}
.funding-address-demo small{color:#718194}
.network-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}
.network-choice-good,.network-choice-bad{padding:18px;border-radius:13px}
.network-choice-good{border:1px solid rgba(82,211,135,.28);background:rgba(82,211,135,.055)}
.network-choice-bad{border:1px solid rgba(245,95,95,.22);background:rgba(245,95,95,.035)}
.network-choice strong,.network-choice span{display:block}
.network-choice-good strong{color:#8fe2b0}.network-choice-bad strong{color:#ee9b9b}
.network-choice span{margin-top:7px;color:#dce5ed;font-weight:800}
.funding-final-check{
    display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0
}
.funding-final-check div{
    padding:15px;border:1px solid var(--border);border-radius:11px;background:#090e13
}
.funding-final-check strong,.funding-final-check span{display:block}
.funding-final-check strong{margin-bottom:5px;color:#78d69e;font-size:9px;letter-spacing:.1em}
.funding-final-check span{color:#d9e4ed;font-size:12px;line-height:1.45}
.reserve-target{
    margin:16px 0;padding:22px;border:1px solid rgba(82,211,135,.27);
    border-radius:14px;background:linear-gradient(145deg,rgba(82,211,135,.08),rgba(8,13,17,.92));
    text-align:center
}
.reserve-target span,.reserve-target strong,.reserve-target small{display:block}
.reserve-target span{color:#7fd6a1;font-size:10px;font-weight:900;letter-spacing:.1em}
.reserve-target strong{margin:7px 0 3px;color:#eef9f2;font-size:34px}
.reserve-target small{color:#7f9189}
.funding-balance-check{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px
}
.funding-balance-check div{
    padding:20px;border:1px solid rgba(82,211,135,.19);border-radius:13px;background:#090f12
}
.funding-balance-check span,.funding-balance-check strong,.funding-balance-check small{display:block}
.funding-balance-check span{color:#76d19a;font-size:10px;font-weight:900}
.funding-balance-check strong{margin:5px 0;color:#e6f3eb;font-size:18px}
.funding-balance-check small{color:#7d8f99}
.funding-check-grid{margin-top:15px}
.funding-launch-card{border-color:rgba(82,211,135,.29)}
.funding-live-state{grid-template-columns:repeat(4,1fr)}
.funding-finish{
    margin:38px 0 28px;padding:30px;border:1px solid rgba(82,211,135,.25);
    border-radius:20px;background:linear-gradient(145deg,rgba(82,211,135,.07),rgba(10,15,20,.97))
}
.funding-finish h2{margin:6px 0 9px;font-size:clamp(27px,4vw,42px)}
.funding-finish p{max-width:780px;color:var(--muted)}
.funding-finish-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.funding-secondary-link{
    display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 18px;
    border:1px solid var(--border);border-radius:12px;color:#aab7c5;text-decoration:none;font-weight:800
}

@media(max-width:900px){
    .funding-next-step{grid-template-columns:1fr}
    .funding-next-step-button{justify-self:start}
    .funding-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}
    .funding-final-check{grid-template-columns:repeat(2,1fr)}
    .funding-live-state{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .funding-next-step{padding:21px}
    .funding-next-step-button{width:100%}
    .funding-hero h1{font-size:clamp(38px,11vw,50px)}
    .funding-roadmap{grid-template-columns:1fr}
    .funding-principle{align-items:flex-start;padding:18px}
    .funding-principle-icon{width:44px;height:44px;font-size:23px}
    .network-choice,.funding-final-check,.funding-balance-check,.funding-live-state{grid-template-columns:1fr}
    .funding-finish{padding:22px}
    .funding-finish-actions a{width:100%}
}

/* =========================================================
   PARRAINAGE
   ========================================================= */
.referral-hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:54px;align-items:center;padding:78px 0 46px}
.referral-hero h1{max-width:830px;margin:8px 0 18px;font-size:clamp(48px,6vw,78px);line-height:1;letter-spacing:-.055em}
.referral-hero h1 em{color:#65aaff;font-style:normal}
.referral-lead{max-width:820px;color:var(--muted);font-size:18px;line-height:1.75}
.referral-hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.referral-hero-badges span{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(17,27,39,.72);color:#aebdcd;font-size:13px;font-weight:700}
.referral-hero-panel{padding:26px;border:1px solid rgba(101,170,255,.24);border-radius:22px;background:radial-gradient(circle at 90% 0,rgba(50,136,255,.14),transparent 42%),linear-gradient(145deg,#111b27,#090f16);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.referral-panel-kicker{display:block;margin-bottom:17px;color:#73859a;font-size:11px;font-weight:900;letter-spacing:.14em}
.referral-hero-panel ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.referral-hero-panel li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;color:#aebdcd;line-height:1.55}
.referral-hero-panel li b{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(101,170,255,.35);border-radius:10px;background:rgba(50,136,255,.12);color:#79b6ff}
.referral-hero-panel code,.referral-cta code{color:#7ce3a5}
.referral-jump{position:sticky;top:86px;z-index:7;display:flex;flex-wrap:wrap;gap:8px;padding:12px;margin:0 0 18px;border:1px solid var(--border);border-radius:16px;background:rgba(8,13,19,.88);backdrop-filter:blur(14px)}
.referral-jump a{padding:9px 12px;border-radius:10px;color:#8fa1b4;font-size:13px;font-weight:800;text-decoration:none}
.referral-jump a:hover,.referral-jump a:focus-visible{background:rgba(101,170,255,.1);color:#dce9f8}
.referral-section{padding:58px 0;scroll-margin-top:150px}
.referral-heading{max-width:850px;margin-bottom:28px}
.referral-heading h2,.referral-security h2,.referral-cta h2{margin:6px 0 12px;font-size:clamp(34px,4.5vw,54px);line-height:1.06;letter-spacing:-.04em}
.referral-heading>p:last-child,.referral-security-copy>p:last-child,.referral-cta>div>p:last-child{color:var(--muted);font-size:17px;line-height:1.7}
.referral-steps{display:grid;gap:12px}
.referral-step{display:grid;grid-template-columns:72px 1fr;gap:20px;padding:24px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(18,27,38,.86),rgba(8,13,19,.95))}
.referral-step-number{color:#65aaff;font-size:28px;font-weight:950;letter-spacing:-.04em}
.referral-step h3{margin:0 0 7px;font-size:22px}
.referral-step p{margin:0;color:var(--muted);line-height:1.7}
.referral-split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.referral-split-card{padding:27px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(18,27,38,.86),rgba(8,13,19,.96))}
.referral-split-card-featured{border-color:rgba(101,170,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.03),0 24px 60px rgba(0,0,0,.18)}
.referral-split-label{color:#7f90a2;font-size:11px;font-weight:900;letter-spacing:.14em}
.referral-split-total{margin:10px 0 16px;color:#f4f8fc;font-size:50px;font-weight:950;letter-spacing:-.05em}
.referral-bar{display:flex;overflow:hidden;height:9px;margin-bottom:20px;border-radius:999px;background:#101922}
.referral-bar span{display:block;background:#65aaff}
.referral-bar i{display:block;background:#7ce3a5}
.referral-bar-single span{background:#65aaff}
.referral-split-lines{display:grid;gap:8px}
.referral-split-lines p{display:flex;justify-content:space-between;gap:20px;margin:0;color:#8999aa}
.referral-split-lines strong{color:#eaf1f8}
.referral-example,.referral-note{display:flex;gap:17px;margin-top:18px;padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:rgba(14,22,31,.72)}
.referral-example-icon{font-size:28px}
.referral-example strong,.referral-note strong{color:#eaf1f8}
.referral-example p,.referral-note p{margin:5px 0 0;color:var(--muted);line-height:1.65}
.referral-note{display:block;border-left:3px solid #7ce3a5}
.referral-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.referral-rule{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(18,27,38,.78),rgba(8,13,19,.92))}
.referral-rule>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-size:22px;font-weight:900}
.referral-rule.good>span{background:rgba(72,200,125,.12);color:#7ce3a5}
.referral-rule.blocked>span{background:rgba(224,100,100,.12);color:#ee8585}
.referral-rule h3{margin:1px 0 6px;font-size:19px}
.referral-rule p{margin:0;color:var(--muted);line-height:1.6}
.referral-security{padding:35px;border:1px solid rgba(101,170,255,.2);border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(50,136,255,.13),transparent 32%),linear-gradient(145deg,#101924,#080d13)}
.referral-security-copy{max-width:820px}
.referral-security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.referral-security-grid div{padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(6,11,17,.42)}
.referral-security-grid strong{display:block;margin-bottom:6px;color:#dce9f8}
.referral-security-grid span{color:#8292a3;line-height:1.55}
.referral-faq{display:grid;gap:10px}
.referral-faq details{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:rgba(13,20,29,.75)}
.referral-faq summary{cursor:pointer;padding:19px 22px;color:#dce9f8;font-weight:850;list-style:none}
.referral-faq summary::-webkit-details-marker{display:none}
.referral-faq summary::after{content:'+';float:right;color:#65aaff;font-size:20px}
.referral-faq details[open] summary::after{content:'–'}
.referral-faq p{margin:0;padding:0 22px 20px;color:var(--muted);line-height:1.65}
.referral-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:40px 0 76px;padding:34px;border:1px solid rgba(124,227,165,.2);border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(72,200,125,.12),transparent 34%),linear-gradient(145deg,#101925,#080d13)}
.referral-cta-command{display:flex;flex-direction:column;gap:4px;min-width:210px;padding:20px;border:1px solid rgba(124,227,165,.2);border-radius:16px;background:#080e14;text-align:center}
.referral-cta-command code{font-size:28px;font-weight:950}
.referral-cta-command span{color:#8494a5;font-size:13px;font-weight:800}
@media (max-width:900px){.referral-hero{grid-template-columns:1fr;gap:28px;padding-top:56px}.referral-hero-panel{max-width:560px}.referral-split-grid,.referral-rules-grid,.referral-security-grid{grid-template-columns:1fr}.referral-jump{position:static}.referral-cta{align-items:flex-start;flex-direction:column}.referral-cta-command{width:100%}}
@media (max-width:600px){.referral-hero{padding:44px 0 30px}.referral-hero h1{font-size:46px}.referral-section{padding:40px 0}.referral-step{grid-template-columns:1fr;gap:8px;padding:20px}.referral-step-number{font-size:22px}.referral-hero-badges{align-items:flex-start;flex-direction:column}.referral-hero-badges span{border-radius:12px}.referral-security{padding:24px 19px}.referral-cta{margin-bottom:52px;padding:25px 20px}}

/* =========================================================
   FAQ V2 — navigation, recherche et parrainage
   ========================================================= */
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.faq-hero{
    position:relative;
    max-width:980px;
    padding-bottom:28px;
}

.faq-hero:after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-90px;
    top:10px;
    border-radius:50%;
    background:rgba(98,168,255,.07);
    filter:blur(10px);
    pointer-events:none;
}

.faq-hero h1{
    max-width:820px;
    font-size:clamp(42px,6vw,72px);
}

.faq-tools{
    margin:8px 0 18px;
}

.faq-search-card{
    display:grid;
    grid-template-columns:auto minmax(220px,1fr) minmax(260px,.8fr);
    align-items:center;
    gap:16px;
    padding:15px 16px;
    border:1px solid rgba(98,168,255,.22);
    border-radius:17px;
    background:linear-gradient(145deg,rgba(98,168,255,.07),rgba(16,21,29,.9) 42%);
    box-shadow:0 16px 46px rgba(0,0,0,.14);
}

.faq-search-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(98,168,255,.24);
    border-radius:12px;
    color:var(--blue);
    background:rgba(98,168,255,.08);
    font-size:24px;
    font-weight:900;
}

.faq-search-copy strong,
.faq-search-copy span{
    display:block;
}

.faq-search-copy strong{
    margin-bottom:2px;
    font-size:14px;
}

.faq-search-copy span{
    color:var(--muted);
    font-size:11px;
}

.faq-search-field input{
    width:100%;
    min-height:46px;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:11px;
    outline:none;
    color:var(--text);
    background:#090e14;
    font:inherit;
    font-size:13px;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.faq-search-field input::placeholder{color:#6f7d8d}
.faq-search-field input:focus{
    border-color:rgba(98,168,255,.48);
    box-shadow:0 0 0 3px rgba(98,168,255,.09);
    background:#0b1119;
}

.faq-search-status{
    min-height:18px;
    margin:7px 4px 0;
    color:var(--muted);
    font-size:11px;
}

.faq-featured-referral{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:17px;
    margin:18px 0 26px;
    padding:20px 22px;
    border:1px solid rgba(84,214,138,.28);
    border-radius:18px;
    color:inherit;
    background:
        radial-gradient(circle at 95% 10%,rgba(84,214,138,.13),transparent 32%),
        linear-gradient(145deg,rgba(84,214,138,.07),rgba(13,18,24,.95) 45%);
    text-decoration:none;
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

.faq-featured-referral:hover,
.faq-featured-referral:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(84,214,138,.48);
}

.faq-featured-icon{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    border:1px solid rgba(84,214,138,.22);
    border-radius:14px;
    background:rgba(84,214,138,.07);
    font-size:25px;
}

.faq-featured-copy{min-width:0}
.faq-featured-kicker{
    display:block;
    margin-bottom:3px;
    color:#91e3b1;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}
.faq-featured-copy strong{font-size:18px}
.faq-featured-copy p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}
.faq-featured-copy b{color:#a3e9bd}
.faq-featured-arrow{
    color:#9ce5b7;
    font-size:25px;
}

.faq-start{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:start;
    gap:14px;
    margin:26px 0 18px;
    padding:18px 20px;
    border:1px solid var(--border-soft);
    border-radius:15px;
    background:rgba(16,21,29,.64);
}
.faq-start-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid rgba(98,168,255,.24);
    border-radius:10px;
    color:var(--blue);
    background:rgba(98,168,255,.07);
    font-weight:900;
}
.faq-start strong{font-size:13px}
.faq-start p{margin:5px 0 0;color:var(--muted);font-size:12px}
.faq-start a{color:#b9d7fb;text-decoration:none}
.faq-start a:hover{text-decoration:underline}

.faq-jump{
    position:sticky;
    top:88px;
    z-index:18;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:18px 0 54px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(8,11,16,.92);
    backdrop-filter:blur(15px);
    box-shadow:0 12px 35px rgba(0,0,0,.16);
}

.faq-jump a{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    min-height:42px;
    padding:9px 10px;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:750;
    line-height:1.25;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.faq-jump a span{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    flex:0 0 auto;
    border:1px solid var(--border-soft);
    border-radius:7px;
    color:#8290a0;
    font-size:9px;
    font-weight:900;
}

.faq-jump a:hover,
.faq-jump a:focus-visible{
    color:var(--text);
    border-color:var(--border-soft);
    background:var(--surface-2);
}

.faq-jump .faq-jump-referral{
    color:#a4e9bd;
    border-color:rgba(84,214,138,.14);
    background:rgba(84,214,138,.035);
}
.faq-jump .faq-jump-referral span{
    color:#91e3b1;
    border-color:rgba(84,214,138,.2);
}

.faq-section{
    margin:76px 0;
    scroll-margin-top:190px;
}

.faq-section-heading{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:20px;
}

.faq-section-number{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 auto;
    border:1px solid rgba(98,168,255,.25);
    border-radius:13px;
    color:var(--blue);
    background:rgba(98,168,255,.065);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
}

.faq-section-heading .eyebrow{margin:2px 0 4px}
.faq-section-heading h2{
    margin:0;
    max-width:850px;
    font-size:clamp(27px,4vw,40px);
}
.faq-section-intro{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
}

.faq-list{
    display:grid;
    gap:10px;
}

.faq-list .faq-item{
    position:relative;
    overflow:hidden;
    padding:0;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(16,21,29,.88),rgba(12,17,23,.9));
    transition:border-color .15s ease,background .15s ease,transform .15s ease;
}

.faq-list .faq-item:hover{
    border-color:#344252;
}

.faq-list .faq-item[open]{
    border-color:rgba(98,168,255,.27);
    background:linear-gradient(145deg,rgba(98,168,255,.045),rgba(13,18,24,.94) 40%);
}

.faq-list .faq-item summary{
    position:relative;
    display:flex;
    align-items:center;
    min-height:62px;
    padding:18px 52px 18px 20px;
    cursor:pointer;
    list-style:none;
    color:#e7eef6;
    font-size:14px;
    font-weight:800;
    line-height:1.4;
    -webkit-tap-highlight-color:transparent;
}
.faq-list .faq-item summary::-webkit-details-marker{display:none}
.faq-list .faq-item summary:after{
    content:"+";
    position:absolute;
    right:18px;
    top:50%;
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    transform:translateY(-50%);
    border:1px solid var(--border);
    border-radius:8px;
    color:#9cafc0;
    background:rgba(255,255,255,.025);
    font-size:17px;
    font-weight:500;
    transition:transform .15s ease,color .15s ease,border-color .15s ease;
}
.faq-list .faq-item[open] summary:after{
    content:"−";
    color:var(--blue);
    border-color:rgba(98,168,255,.28);
}

.faq-answer{
    padding:0 20px 20px;
    border-top:1px solid var(--border-soft);
}
.faq-answer>p:first-child{margin-top:17px}
.faq-answer p{
    max-width:920px;
    margin:10px 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.72;
}
.faq-answer strong{color:#dce8f4}
.faq-answer a:not(.faq-action):not(.faq-telegram){color:#afd1fa}

.faq-simple,.faq-warning,.faq-danger{
    margin-top:14px;
    padding:13px 15px;
    border-radius:10px;
    font-size:12px;
    line-height:1.65;
}
.faq-simple{border:1px solid rgba(98,168,255,.18);background:rgba(98,168,255,.035);color:#9fb0c2}
.faq-warning{border:1px solid rgba(245,173,82,.22);background:rgba(245,173,82,.045);color:#b7a58c}
.faq-danger{border:1px solid rgba(255,102,120,.22);background:rgba(255,102,120,.045);color:#c4a0a6}
.faq-simple strong{color:#acd2ff}.faq-warning strong{color:#f0c98f}.faq-danger strong{color:#ff9daa}

.faq-action,.faq-telegram{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding:10px 13px;
    border:1px solid rgba(98,168,255,.24);
    border-radius:9px;
    color:#b8d8ff;
    background:rgba(98,168,255,.055);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}
.faq-action:hover,.faq-telegram:hover{border-color:rgba(98,168,255,.42);background:rgba(98,168,255,.09)}

.faq-definition-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-top:14px;
}
.faq-definition-grid>div{
    padding:13px;
    border:1px solid var(--border-soft);
    border-radius:10px;
    background:rgba(8,11,16,.35);
}
.faq-definition-grid strong,.faq-definition-grid span{display:block}
.faq-definition-grid strong{margin-bottom:4px;color:#cfe0ef;font-size:12px}
.faq-definition-grid span{color:#8292a3;font-size:11px;line-height:1.5}

.faq-command{
    display:inline-block;
    margin:16px 0 4px;
    padding:9px 12px;
    border:1px solid rgba(84,214,138,.2);
    border-radius:9px;
    background:rgba(84,214,138,.04);
}
.faq-command code{color:#9be6b8;font-size:14px}

.faq-network-answer{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:5px 12px;
    margin-top:16px;
    padding:14px;
    border:1px solid rgba(98,168,255,.18);
    border-radius:10px;
    background:rgba(98,168,255,.035);
}
.faq-network-answer span{color:#75869a;font-size:9px;font-weight:900;letter-spacing:.11em}
.faq-network-answer strong{color:#dce8f4;font-size:13px}

.faq-steps{margin:16px 0 0;padding-left:23px;color:var(--muted);font-size:13px}
.faq-steps li{margin:7px 0;padding-left:4px}

/* Referral section */
.faq-section-referral{
    position:relative;
    padding:28px;
    border:1px solid rgba(84,214,138,.20);
    border-radius:22px;
    background:
        radial-gradient(circle at 96% 0%,rgba(84,214,138,.095),transparent 26rem),
        rgba(12,17,23,.54);
}
.faq-section-referral .faq-section-number{
    color:#94e4b2;
    border-color:rgba(84,214,138,.28);
    background:rgba(84,214,138,.07);
}
.faq-section-referral .eyebrow{color:#7edfa5}

.faq-referral-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin:2px 0 18px;
}
.faq-referral-summary>div{
    min-width:0;
    padding:15px;
    border:1px solid rgba(84,214,138,.13);
    border-radius:12px;
    background:rgba(84,214,138,.025);
}
.faq-referral-summary span,.faq-referral-summary strong,.faq-referral-summary small{display:block}
.faq-referral-summary span{color:#70a786;font-size:8px;font-weight:900;letter-spacing:.1em}
.faq-referral-summary strong{margin:3px 0;color:#b8f0ce;font-size:20px;letter-spacing:-.025em}
.faq-referral-summary small{color:#768b80;font-size:9px;line-height:1.45}

.faq-list .faq-item-highlight{
    border-color:rgba(84,214,138,.28);
    background:linear-gradient(145deg,rgba(84,214,138,.065),rgba(13,18,24,.94) 44%);
}
.faq-list .faq-item-highlight[open]{border-color:rgba(84,214,138,.40)}
.faq-list .faq-item-highlight summary:after{color:#94e4b2;border-color:rgba(84,214,138,.24)}

.faq-referral-example{
    margin-top:16px;
    padding:16px;
    border:1px solid rgba(84,214,138,.2);
    border-radius:12px;
    background:#09110d;
}
.faq-referral-example>span,.faq-referral-example>strong,.faq-referral-example>div,.faq-referral-example>small{display:block}
.faq-referral-example>span{color:#76b78f;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.faq-referral-example>strong{margin:4px 0 10px;color:#dce9e1;font-size:14px}
.faq-referral-example>div{color:#a3b5aa;font-size:13px}
.faq-referral-example b{color:#a7edc2}
.faq-referral-example i{margin:0 7px;color:#52715e;font-style:normal}
.faq-referral-example small{margin-top:6px;color:#657c6d;font-size:10px}

.faq-referral-cta{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"small arrow" "title arrow";
    align-items:center;
    gap:2px 16px;
    margin-top:14px;
    padding:16px 18px;
    border:1px solid rgba(84,214,138,.20);
    border-radius:12px;
    color:inherit;
    background:rgba(84,214,138,.035);
    text-decoration:none;
}
.faq-referral-cta span{grid-area:small;color:#76b78f;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.faq-referral-cta strong{grid-area:title;font-size:13px}
.faq-referral-cta b{grid-area:arrow;color:#91e3b1;font-size:20px}
.faq-referral-cta:hover{border-color:rgba(84,214,138,.38);background:rgba(84,214,138,.06)}

.faq-secret-wall,.faq-support-grid,.faq-five-rules{
    display:grid;
    gap:10px;
    margin:18px 0;
}
.faq-secret-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-secret-wall>div{
    padding:13px;
    border:1px solid rgba(255,102,120,.15);
    border-radius:10px;
    color:#d197a0;
    background:rgba(255,102,120,.025);
    font-size:11px;
    font-weight:800;
}

.faq-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.faq-support-good,.faq-support-bad{
    display:grid;
    gap:8px;
    padding:18px;
    border-radius:14px;
}
.faq-support-good{border:1px solid rgba(84,214,138,.18);background:rgba(84,214,138,.03)}
.faq-support-bad{border:1px solid rgba(255,102,120,.18);background:rgba(255,102,120,.03)}
.faq-support-good strong{color:#95e5b4}.faq-support-bad strong{color:#f6a1ac}
.faq-support-good span,.faq-support-bad span{color:var(--muted);font-size:11px}

.faq-support-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:18px;
    padding:22px;
    border:1px solid rgba(98,168,255,.18);
    border-radius:16px;
    background:rgba(98,168,255,.035);
}
.faq-support-cta h2{margin:0 0 5px;font-size:23px}.faq-support-cta p:last-child{margin:0;color:var(--muted);font-size:12px}
.faq-telegram-large{flex:0 0 auto;margin:0;padding:12px 15px}

.faq-final{
    margin:82px 0 18px;
    padding-top:36px;
    border-top:1px solid var(--border);
}
.faq-final h2{margin:4px 0 20px;font-size:clamp(27px,4vw,39px)}
.faq-five-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-five-rules>div{
    position:relative;
    min-height:130px;
    padding:17px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:rgba(16,21,29,.58);
}
.faq-five-rules span{display:block;margin-bottom:10px;color:#66798b;font-size:9px;font-weight:900;letter-spacing:.12em}
.faq-five-rules strong{display:block;font-size:13px}
.faq-five-rules p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.55}

.faq-section.is-search-hidden,.faq-item.is-search-hidden{display:none!important}
.faq-no-results{
    margin:28px 0;
    padding:22px;
    border:1px dashed var(--border);
    border-radius:14px;
    color:var(--muted);
    text-align:center;
    font-size:13px;
}

@media(max-width:980px){
    .faq-search-card{grid-template-columns:auto 1fr}.faq-search-field{grid-column:1/-1}
    .faq-jump{grid-template-columns:repeat(3,minmax(0,1fr));top:80px}
    .faq-referral-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
    .faq-jump{position:relative;top:auto;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:44px}
    .faq-section{margin:58px 0;scroll-margin-top:110px}
    .faq-section-referral{padding:20px 14px}
    .faq-definition-grid,.faq-secret-wall,.faq-five-rules{grid-template-columns:1fr}
    .faq-support-grid{grid-template-columns:1fr}
    .faq-support-cta{align-items:flex-start;flex-direction:column}
    .faq-telegram-large{width:100%;justify-content:center}
}

@media(max-width:520px){
    .faq-hero h1{font-size:clamp(38px,13vw,52px)}
    .faq-search-card{grid-template-columns:auto 1fr;padding:13px}.faq-search-copy span{display:none}
    .faq-featured-referral{grid-template-columns:auto 1fr;padding:17px}.faq-featured-arrow{display:none}.faq-featured-copy strong{font-size:15px}
    .faq-start{padding:15px}
    .faq-jump{grid-template-columns:1fr;padding:8px}.faq-jump a{min-height:40px}
    .faq-section-heading{gap:11px}.faq-section-number{width:42px;height:42px}.faq-section-heading h2{font-size:27px}
    .faq-list .faq-item summary{min-height:58px;padding:16px 48px 16px 16px;font-size:13px}.faq-answer{padding:0 16px 17px}
    .faq-referral-summary{grid-template-columns:1fr 1fr}.faq-referral-summary>div{padding:12px}.faq-referral-summary strong{font-size:17px}
}
/* =========================================================
   Présentation V3 PREMIUM — vitrine + Parrainage
   ========================================================= */

.dream-hero {
    overflow: visible;
}

.dream-hero-copy {
    position: relative;
    z-index: 3;
}

.dream-hero-copy::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 1px;
    left: 0;
    top: -34px;
    background: linear-gradient(90deg, rgba(98,168,255,.75), transparent);
    opacity: .6;
}

.dream-secondary-referral {
    border-color: rgba(84,214,138,.25);
    background: rgba(84,214,138,.045);
    color: #b8f0cf;
}

.dream-secondary-referral:hover,
.dream-secondary-referral:focus-visible {
    border-color: rgba(84,214,138,.48);
    background: rgba(84,214,138,.08);
    transform: translateY(-2px);
}

.dream-dashboard {
    will-change: transform;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.dream-dashboard:hover {
    border-color: rgba(106,169,255,.34);
    box-shadow: 0 46px 110px rgba(0,0,0,.44), 0 0 60px rgba(55,132,255,.08), inset 0 1px rgba(255,255,255,.05);
}

.wow-card {
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.wow-card:hover {
    transform: translateY(-4px);
    border-color: rgba(101,170,255,.25);
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
}

.referral-showcase {
    scroll-margin-top: 110px;
    padding-top: 96px;
    padding-bottom: 96px;
}

.referral-shell {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
    gap: 54px;
    align-items: center;
    overflow: hidden;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid rgba(84,214,138,.2);
    border-radius: 32px;
    background:
        radial-gradient(circle at 8% 12%, rgba(84,214,138,.105), transparent 28rem),
        radial-gradient(circle at 93% 90%, rgba(98,168,255,.11), transparent 26rem),
        linear-gradient(145deg, rgba(15,25,33,.98), rgba(6,11,16,.99));
    box-shadow: 0 40px 120px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035);
}

.referral-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.referral-orb {
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(95px);
    opacity: .14;
    pointer-events: none;
}

.referral-orb-a {
    top: -90px;
    left: 32%;
    background: #54d68a;
}

.referral-orb-b {
    right: -100px;
    bottom: -90px;
    background: #62a8ff;
}

.referral-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 20px;
    padding: 6px 11px;
    border: 1px solid rgba(84,214,138,.3);
    border-radius: 999px;
    color: #8be8af;
    background: rgba(84,214,138,.07);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.referral-copy {
    position: relative;
    z-index: 2;
}

.referral-copy h2 {
    max-width: 680px;
    margin: 8px 0 18px;
    font-size: clamp(39px, 4.6vw, 62px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.referral-copy h2 em {
    color: #63dfa0;
    font-style: normal;
    text-shadow: 0 0 32px rgba(84,214,138,.12);
}

.referral-lead {
    max-width: 650px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.72;
}

.referral-lead strong {
    color: var(--text);
}

.referral-benefits {
    display: grid;
    gap: 10px;
    margin: 28px 0 30px;
}

.referral-benefits > div {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.referral-benefits > div:hover {
    transform: translateX(3px);
    border-color: rgba(84,214,138,.22);
    background: rgba(84,214,138,.025);
}

.referral-benefit-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(84,214,138,.22);
    border-radius: 11px;
    color: #82e7ad;
    background: rgba(84,214,138,.065);
    font-size: 10px;
    font-weight: 900;
}

.referral-benefits p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.referral-benefits strong {
    font-size: 14px;
}

.referral-benefits small {
    color: #8190a0;
    line-height: 1.45;
}

.referral-benefits b {
    color: #a9b9c9;
}

.referral-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.referral-primary {
    background: linear-gradient(135deg, #31b972, #58d992);
    box-shadow: 0 16px 45px rgba(49,185,114,.16);
}

.referral-mini-note {
    color: #708091;
    font-size: 11px;
}

.referral-demo {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 23px;
    border: 1px solid rgba(113,191,255,.18);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(17,28,39,.98), rgba(6,12,18,.99));
    box-shadow: 0 32px 80px rgba(0,0,0,.34);
}

.referral-demo::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -110px;
    border-radius: 50%;
    background: #54d68a;
    filter: blur(90px);
    opacity: .08;
    pointer-events: none;
}

.referral-demo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--border);
}

.referral-demo-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.referral-demo-top strong {
    font-size: 15px;
}

.referral-live {
    color: #66dc98;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.referral-total {
    padding: 24px 0 18px;
}

.referral-total span,
.referral-total strong,
.referral-total small {
    display: block;
}

.referral-total > span {
    color: #748599;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.referral-total > strong {
    margin-top: 5px;
    font-size: clamp(34px, 4vw, 46px);
    letter-spacing: -.045em;
}

.referral-total > small {
    margin-top: 4px;
    color: #596879;
    font-size: 10px;
}

.referral-slider-wrap {
    margin: 4px 0 19px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.016);
}

.referral-slider-wrap label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #78899b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.referral-slider-wrap output {
    color: #a6b8ca;
}

.referral-slider-wrap input[type="range"] {
    width: 100%;
    accent-color: #54d68a;
    cursor: pointer;
}

.referral-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.referral-split > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}

.referral-split-total {
    grid-column: 1 / -1;
}

.referral-split-referrer {
    border-color: rgba(84,214,138,.24) !important;
    background: rgba(84,214,138,.045) !important;
}

.referral-split span,
.referral-split strong,
.referral-split small {
    display: block;
}

.referral-split span {
    color: #708093;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.referral-split strong {
    margin: 7px 0 2px;
    font-size: 19px;
}

.referral-split small {
    color: #596879;
    font-size: 10px;
}

.referral-split-referrer strong {
    color: #63dfa0;
}

.referral-rule {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 10px;
    padding: 13px;
    border: 1px solid rgba(84,214,138,.16);
    border-radius: 13px;
    background: rgba(84,214,138,.025);
}

.referral-rule > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #69dea0;
    background: rgba(84,214,138,.08);
    font-weight: 900;
}

.referral-rule div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-rule strong {
    font-size: 12px;
}

.referral-rule small {
    color: #6f8091;
    font-size: 10px;
    line-height: 1.45;
}

.referral-safety-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.referral-safety-row span {
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    color: #708093;
    background: rgba(255,255,255,.015);
    font-size: 9px;
}

.dream-final-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dream-secondary-big {
    min-height: 60px;
    padding-inline: 25px;
}

.reveal-premium {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}

.reveal-premium.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1050px) {
    .referral-shell {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .referral-demo {
        max-width: 650px;
    }
}

@media (max-width: 700px) {
    .dream-hero-copy::before {
        display: none;
    }

    .referral-showcase {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .referral-shell {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .referral-copy h2 {
        font-size: 39px;
    }

    .referral-lead {
        font-size: 16px;
    }

    .referral-demo {
        padding: 17px;
        border-radius: 18px;
    }

    .referral-split {
        grid-template-columns: 1fr;
    }

    .referral-split-total {
        grid-column: auto;
    }

    .referral-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .referral-mini-note {
        text-align: center;
    }

    .dream-final-actions {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dream-dashboard,
    .wow-card,
    .referral-benefits > div,
    .reveal-premium {
        transition: none !important;
        transform: none !important;
    }

    .reveal-premium {
        opacity: 1;
    }
}


/* =========================================================
   Présentation — Parrainage ultra-débutant V4
   ========================================================= */
.referral-shell-beginner {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: clamp(36px, 5vw, 72px);
    padding: clamp(34px, 5vw, 68px);
}

.referral-copy-beginner h2 {
    max-width: 720px;
    font-size: clamp(40px, 4.6vw, 64px);
}

.referral-copy-beginner h2 em {
    display: block;
    margin-top: 7px;
    color: #63dfa0;
}

.referral-lead-beginner {
    max-width: 700px;
    font-size: clamp(16px, 1.45vw, 19px);
}

.referral-how-simple {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: stretch;
    margin: 30px 0 22px;
}

.referral-how-simple > div:not(.referral-how-arrow) {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
}

.referral-how-simple > div > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #72e4a4;
    background: rgba(84,214,138,.075);
    border: 1px solid rgba(84,214,138,.22);
    font-size: 11px;
    font-weight: 900;
}

.referral-how-simple p {
    display: grid;
    gap: 4px;
    margin: 0;
}

.referral-how-simple strong {
    font-size: 13px;
    line-height: 1.25;
}

.referral-how-simple small {
    color: #7f8d9b;
    font-size: 11px;
    line-height: 1.45;
}

.referral-how-simple b { color: #b7c7d6; }
.referral-how-win { border-color: rgba(84,214,138,.24) !important; background: rgba(84,214,138,.035) !important; }
.referral-how-arrow { display:grid; place-items:center; color:#536273; font-size:20px; }

.referral-beginner-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.referral-beginner-proof span {
    padding: 7px 10px;
    border-radius: 999px;
    color: #8c9baa;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.065);
    font-size: 10px;
}

.referral-demo-beginner {
    padding: 25px;
    border-color: rgba(84,214,138,.28);
    background:
        radial-gradient(circle at 80% 25%, rgba(84,214,138,.09), transparent 18rem),
        linear-gradient(160deg, rgba(15,26,34,.99), rgba(6,12,17,.99));
}

.referral-demo-top-simple {
    padding-bottom: 18px;
}

.referral-demo-top-simple strong {
    font-size: 16px;
}

.referral-story {
    display: grid;
    gap: 10px;
    padding: 22px 0 14px;
}

.referral-story-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
}

.referral-story-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(98,168,255,.075);
    border: 1px solid rgba(98,168,255,.18);
    font-size: 22px;
}

.referral-story-person div { min-width:0; }
.referral-story-person small { display:block; margin-bottom:3px; color:#718296; font-size:9px; font-weight:900; letter-spacing:.1em; }
.referral-story-person strong { display:block; font-size:clamp(19px, 2vw, 25px); line-height:1.1; }
.referral-story-person p { margin:5px 0 0; color:#718092; font-size:10px; }

.referral-story-arrow {
    display: grid;
    place-items: center;
    height: 22px;
    color: #58d992;
    font-size: 22px;
    font-weight: 900;
}

.referral-story-you {
    padding: 22px;
    text-align: center;
    border: 1px solid rgba(84,214,138,.42);
    border-radius: 19px;
    background:
        radial-gradient(circle at 50% 0%, rgba(84,214,138,.16), transparent 13rem),
        rgba(84,214,138,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 45px rgba(18,125,71,.08);
}

.referral-you-label {
    display: block;
    color: #8ce9b3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.referral-you-amount {
    display: block;
    margin: 8px 0 5px;
    color: #5ce297;
    font-size: clamp(54px, 6vw, 78px);
    line-height: .95;
    letter-spacing: -.055em;
    text-shadow: 0 0 34px rgba(84,214,138,.18);
}

.referral-you-amount small {
    font-size: .32em;
    letter-spacing: 0;
}

.referral-story-you p {
    margin: 0;
    color: #81958a;
    font-size: 12px;
}

.referral-story-you p b { color:#a8efc5; }

.referral-math-simple {
    margin: 0 0 14px;
    padding: 14px 15px;
    text-align: center;
    border: 1px solid rgba(84,214,138,.13);
    border-radius: 13px;
    background: rgba(84,214,138,.025);
}

.referral-math-simple strong {
    display: block;
    color: #d8e6df;
    font-size: 13px;
}

.referral-math-simple small {
    display: block;
    margin-top: 5px;
    color: #5f6e7a;
    font-size: 9px;
}

.referral-slider-simple {
    margin-bottom: 12px;
}

.referral-fee-explain {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.012);
}

.referral-fee-explain summary {
    position: relative;
    padding: 14px 42px 14px 15px;
    cursor: pointer;
    list-style: none;
    color: #aebbc7;
    font-size: 11px;
    font-weight: 800;
}

.referral-fee-explain summary::-webkit-details-marker { display:none; }
.referral-fee-explain summary::after { content:'+'; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#63dfa0; font-size:18px; }
.referral-fee-explain[open] summary::after { content:'−'; }
.referral-fee-explain > div { padding: 0 15px 15px; }
.referral-fee-explain p { margin: 0 0 10px; color:#7f8e9b; font-size:11px; }
.referral-fee-explain p strong { color:#dbe6ef; }

.referral-fee-split {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.018);
}

.referral-fee-split span { color:#9ba9b6; font-size:11px; }
.referral-fee-split span b { color:#e1e9ef; }
.referral-fee-split .is-green, .referral-fee-split .is-green b { color:#67dfa0; }
.referral-fee-split i { color:#536273; font-style:normal; }
.referral-fee-note { margin:9px 0 0 !important; text-align:center; color:#647381 !important; font-size:9px !important; }

@media (max-width: 1080px) {
    .referral-shell-beginner { grid-template-columns:1fr; }
    .referral-how-simple { max-width:760px; }
    .referral-demo-beginner { max-width:680px; }
}

@media (max-width: 760px) {
    .referral-how-simple { grid-template-columns:1fr; }
    .referral-how-arrow { height:16px; transform:rotate(90deg); }
    .referral-shell-beginner { padding:24px 18px; }
    .referral-copy-beginner h2 { font-size:38px; }
}

@media (max-width: 480px) {
    .referral-demo-beginner { padding:16px; }
    .referral-story-you { padding:19px 13px; }
    .referral-you-amount { font-size:56px; }
    .referral-story-person { align-items:flex-start; }
    .referral-fee-split { flex-direction:column; }
    .referral-fee-split i { transform:rotate(90deg); }
}


/* =========================================================
   Présentation — Parrainage : équilibre visuel desktop
   ========================================================= */
@media (min-width: 1051px) {
    .referral-shell-beginner { align-items: center; }

    .referral-copy-beginner {
        align-self: center;
        max-width: 610px;
        padding-block: 8px;
    }

    .referral-copy-beginner .referral-chip { margin-bottom: 14px; }
    .referral-copy-beginner .eyebrow { margin-bottom: 9px; }

    .referral-copy-beginner h2 {
        max-width: 590px;
        margin: 5px 0 14px;
        font-size: clamp(39px, 4.05vw, 54px);
        line-height: 1.01;
    }

    .referral-copy-beginner .referral-lead-beginner {
        max-width: 580px;
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.58;
    }

    .referral-copy-beginner .referral-how-simple {
        margin: 20px 0;
        gap: 7px;
    }

    .referral-copy-beginner .referral-how-simple > div:not(.referral-how-arrow) {
        min-height: 88px;
        padding: 11px 10px;
    }

    .referral-copy-beginner .referral-how-simple p { gap: 1px; }

    .referral-copy-beginner .referral-how-simple strong {
        font-size: 11px;
        line-height: 1.15;
    }

    .referral-copy-beginner .referral-how-simple small {
        font-size: 9px;
        line-height: 1.3;
    }

    .referral-copy-beginner .referral-actions { margin-top: 4px; }
}

@media (max-width: 1050px) {
    .referral-copy-beginner { max-width: 720px; }
}

/* =========================================================
   Installation — captures PREMIUM
   ========================================================= */

.install-shot {
    position: relative;
    isolation: isolate;
    margin: 26px 0 22px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(98, 168, 255, 0.24);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(98, 168, 255, 0.10), transparent 22rem),
        radial-gradient(circle at 96% 100%, rgba(84, 214, 138, 0.07), transparent 20rem),
        linear-gradient(145deg, rgba(18, 25, 35, 0.98), rgba(8, 13, 19, 0.99));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.018) inset,
        0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

.install-shot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(98, 168, 255, 0.07), transparent 32%, transparent 68%, rgba(84, 214, 138, 0.045));
}

.install-shot::after {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 13px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.08);
}

.install-shot img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 12px;
    background: #080c11;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.035);
}

.install-shot figcaption {
    position: relative;
    z-index: 2;
    margin: 10px -1px -1px;
    padding: 13px 15px 12px;
    color: #93a4b5;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006));
    border-radius: 0 0 12px 12px;
    font-size: 13px;
    line-height: 1.55;
}

.install-shot figcaption strong {
    color: #e5edf5;
    font-weight: 800;
}

.install-shot figcaption code {
    color: #d9eaff;
    background: rgba(98, 168, 255, 0.07);
    border: 1px solid rgba(98, 168, 255, 0.12);
    border-radius: 6px;
    padding: 1px 5px;
}

/* Les captures téléphone restent plus étroites, mais gardent le même rendu premium. */
.install-shot-phone {
    width: min(100%, 520px);
    margin-inline: auto;
}

/* Petit effet premium discret sur desktop. */
@media (hover: hover) and (pointer: fine) {
    .install-shot {
        transition:
            transform 0.22s ease,
            border-color 0.22s ease,
            box-shadow 0.22s ease;
    }

    .install-shot:hover {
        transform: translateY(-2px);
        border-color: rgba(98, 168, 255, 0.38);
        box-shadow:
            0 30px 72px rgba(0, 0, 0, 0.36),
            0 0 36px rgba(98, 168, 255, 0.055),
            0 0 0 1px rgba(255, 255, 255, 0.022) inset;
    }
}

@media (max-width: 700px) {
    .install-shot {
        margin: 20px 0 18px;
        padding: 7px;
        border-radius: 16px;
    }

    .install-shot::after {
        inset: 6px;
        border-radius: 10px;
    }

    .install-shot img {
        border-radius: 10px;
    }

    .install-shot figcaption {
        margin-top: 7px;
        padding: 11px 12px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .install-shot {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   Installation — captures PREMIUM : taille naturelle responsive
   ========================================================= */

/*
   Le cadre ne prend plus toute la largeur du contenu.
   Il épouse une largeur raisonnable et reste centré.
*/
.install-shot {
    width: fit-content;
    max-width: min(100%, 920px);
    margin: 26px auto 22px;
}

/*
   Une capture ne doit jamais être agrandie au-delà de sa taille native.
   width:auto + max-width:100% = taille naturelle sur desktop,
   réduction automatique si l'écran devient plus petit.
*/
.install-shot img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Captures classiques : limite confortable même si le fichier source est très grand. */
.visual-step-card .install-shot:not(.install-shot-phone) {
    max-width: min(100%, 820px);
}

/* Les captures téléphone restent nettement plus compactes. */
.install-shot-phone {
    width: fit-content;
    max-width: min(100%, 430px);
}

/*
   La légende suit exactement la largeur visuelle du cadre,
   sans forcer la capture à s'étirer.
*/
.install-shot figcaption {
    width: auto;
    max-width: 100%;
}

/* Tablette */
@media (max-width: 900px) {
    .visual-step-card .install-shot:not(.install-shot-phone) {
        max-width: min(100%, 720px);
    }

    .install-shot-phone {
        max-width: min(100%, 400px);
    }
}

/* Mobile */
@media (max-width: 700px) {
    .install-shot,
    .visual-step-card .install-shot:not(.install-shot-phone),
    .install-shot-phone {
        width: fit-content;
        max-width: 100%;
        margin: 20px auto 18px;
    }

    .install-shot img {
        width: auto;
        max-width: 100%;
        height: auto;
    }
}

/* Très petits écrans */
@media (max-width: 420px) {
    .install-shot {
        max-width: 100%;
    }
}


/* =========================================================
   Installation — captures alignées à gauche
   ========================================================= */
.install-shot,
.visual-step-card .install-shot:not(.install-shot-phone),
.install-shot-phone {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 700px) {
    .install-shot,
    .visual-step-card .install-shot:not(.install-shot-phone),
    .install-shot-phone {
        margin-left: 0;
        margin-right: auto;
        max-width: 100%;
    }
}

/* =========================================================
   INSTALLATION V4 — SECTIONS PREMIUM & PARCOURS LISIBLE
   ========================================================= */

/* Le menu d'installation devient un vrai indicateur de parcours. */
.installation-summary {
    gap: 7px;
    padding: 9px;
    border-color: rgba(98, 168, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(13, 19, 27, 0.97), rgba(9, 14, 20, 0.97));
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.installation-summary a {
    position: relative;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.installation-summary a:hover,
.installation-summary a:focus-visible {
    border-color: rgba(98, 168, 255, 0.18);
}

.installation-summary a.is-active {
    color: #eaf4ff;
    border-color: rgba(98, 168, 255, 0.34);
    background:
        linear-gradient(135deg, rgba(98, 168, 255, 0.13), rgba(98, 168, 255, 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px rgba(24, 93, 170, 0.08);
}

.installation-summary a.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), rgba(84, 214, 138, 0.8));
}

/* Chaque grande phase devient un bloc clairement identifiable. */
.install-phase {
    position: relative;
    margin: 96px 0 112px;
    padding-left: 34px;
    scroll-margin-top: 155px;
}

/* Ligne verticale de progression dans la phase. */
.install-phase::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 96px;
    bottom: 52px;
    width: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            to bottom,
            rgba(98, 168, 255, 0.54),
            rgba(98, 168, 255, 0.13) 42%,
            rgba(84, 214, 138, 0.16) 82%,
            rgba(84, 214, 138, 0.48)
        );
    box-shadow: 0 0 18px rgba(98, 168, 255, 0.08);
}

/* Fin de phase lisible pour rassurer le débutant. */
.install-phase::after {
    content: "PHASE TERMINÉE  ✓";
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 28px;
    padding: 6px 11px;
    color: #87e9b0;
    border: 1px solid rgba(84, 214, 138, 0.22);
    border-radius: 999px;
    background: rgba(84, 214, 138, 0.05);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.10em;
}

/* Grosse bannière de phase. */
.phase-heading {
    position: relative;
    isolation: isolate;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    margin: 0 0 25px;
    padding: 22px 24px;
    border: 1px solid rgba(98, 168, 255, 0.22);
    border-radius: 20px;
    background:
        radial-gradient(circle at 6% 0%, rgba(98, 168, 255, 0.11), transparent 22rem),
        linear-gradient(145deg, rgba(19, 27, 38, 0.97), rgba(9, 14, 20, 0.99));
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.phase-heading::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--blue), rgba(84, 214, 138, 0.85));
    box-shadow: 0 0 24px rgba(98, 168, 255, 0.18);
}

.phase-heading::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 190px;
    right: -65px;
    top: -95px;
    border-radius: 50%;
    background: var(--blue);
    filter: blur(85px);
    opacity: 0.08;
    pointer-events: none;
}

.phase-number {
    width: 58px;
    height: 58px;
    color: #ddecff;
    border-color: rgba(98, 168, 255, 0.38);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(98, 168, 255, 0.16), rgba(98, 168, 255, 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 28px rgba(0, 0, 0, 0.16);
    font-size: 15px;
}

.phase-heading .eyebrow {
    margin: 0 0 5px;
    font-size: 10px;
}

.phase-heading h2 {
    margin: 0;
    font-size: clamp(27px, 3.5vw, 40px);
}

/* Variations très subtiles par famille de phase. */
#vps .phase-heading,
#ssh .phase-heading,
#install .phase-heading {
    border-color: rgba(98, 168, 255, 0.24);
}

#telegram .phase-heading,
#liaison .phase-heading,
#alchemy .phase-heading,
#jupiter .phase-heading {
    border-color: rgba(125, 139, 255, 0.23);
}

#wallet .phase-heading,
#demarrage .phase-heading {
    border-color: rgba(84, 214, 138, 0.25);
}

#wallet .phase-heading::before,
#demarrage .phase-heading::before {
    background: linear-gradient(to bottom, var(--green), var(--blue));
}

/* Intro d'une phase : plus légère que la bannière principale. */
.install-visual-intro {
    margin: 0 0 18px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.017);
}

.install-visual-intro strong {
    color: #dfe9f3;
}

.install-visual-intro p {
    margin: 4px 0 0;
    color: var(--muted);
}

/* Les cartes d'étapes deviennent secondaires par rapport à la phase. */
.install-phase > .step-card {
    position: relative;
    margin: 12px 0;
    border-color: rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(180deg, rgba(17, 23, 32, 0.92), rgba(11, 16, 23, 0.96));
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

/* Petit point sur la ligne verticale pour chaque étape. */
.install-phase > .step-card::before {
    content: "";
    position: absolute;
    left: -29px;
    top: 34px;
    width: 9px;
    height: 9px;
    border: 2px solid #0c1219;
    border-radius: 50%;
    background: #6aaeff;
    box-shadow:
        0 0 0 3px rgba(98, 168, 255, 0.09),
        0 0 16px rgba(98, 168, 255, 0.16);
}

.install-phase > .step-card-important {
    border-color: rgba(98, 168, 255, 0.27);
    background:
        radial-gradient(circle at 100% 0%, rgba(98, 168, 255, 0.055), transparent 22rem),
        linear-gradient(180deg, rgba(18, 27, 38, 0.96), rgba(11, 17, 25, 0.98));
}

.install-phase > .step-card-important::before {
    background: #59dc94;
    box-shadow:
        0 0 0 3px rgba(84, 214, 138, 0.09),
        0 0 16px rgba(84, 214, 138, 0.16);
}

/* Le titre de chaque petite étape est plus facile à scanner. */
.step-title {
    margin-bottom: 13px;
}

.step-title h3 {
    font-size: 20px;
}

.step-badge {
    width: 34px;
    height: 34px;
    color: #cfe5ff;
    border-color: rgba(98, 168, 255, 0.19);
    background: rgba(98, 168, 255, 0.055);
}

/* Les anciens context-strip restants (ex. changement d'écran) deviennent des alertes fines. */
.context-strip {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin: -2px 0 13px;
    padding: 7px 10px;
    border-color: rgba(98, 168, 255, 0.12);
    border-radius: 999px;
    background: rgba(98, 168, 255, 0.035);
    font-size: 11px;
}

/* Responsive tablette/mobile : parcours clair sans ligne encombrante. */
@media (max-width: 900px) {
    .install-phase {
        margin: 78px 0 90px;
        padding-left: 24px;
    }

    .install-phase::before {
        left: 7px;
    }

    .install-phase > .step-card::before {
        left: -22px;
    }
}

@media (max-width: 700px) {
    .installation-summary {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        overflow: visible;
        margin: 24px 0 46px;
    }

    .installation-summary a {
        justify-content: flex-start;
        white-space: normal;
        min-height: 45px;
        padding: 9px 10px;
        line-height: 1.25;
    }

    .install-phase {
        margin: 64px 0 76px;
        padding-left: 0;
        scroll-margin-top: 90px;
    }

    .install-phase::before,
    .install-phase > .step-card::before {
        display: none;
    }

    .phase-heading {
        align-items: flex-start;
        padding: 18px;
        border-radius: 17px;
    }

    .phase-number {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 13px;
    }

    .phase-heading h2 {
        font-size: 27px;
    }

    .install-phase > .step-card {
        margin: 10px 0;
    }

    .install-phase::after {
        margin-top: 20px;
    }
}

@media (max-width: 470px) {
    .installation-summary {
        grid-template-columns: 1fr;
    }

    .phase-heading {
        gap: 12px;
        padding: 16px 14px;
    }

    .phase-heading .eyebrow {
        font-size: 9px;
        letter-spacing: 0.10em;
    }

    .phase-heading h2 {
        font-size: 24px;
    }
}


/* =========================================================
   DÉPÔT COINBASE — GUIDE VISUEL 55 ÉTAPES
   ========================================================= */
.coinbase-funding-hero .doc-lead{max-width:980px}
.coinbase-funding-hero strong{color:#eef7ff}
.coinbase-roadmap{grid-template-columns:repeat(4,minmax(0,1fr))}
.coinbase-principle{border-color:rgba(98,168,255,.24);background:linear-gradient(145deg,rgba(98,168,255,.055),rgba(10,16,22,.97))}
.coinbase-principle .funding-principle-icon{border-color:rgba(98,168,255,.34);background:rgba(98,168,255,.09);color:#9cc8ff}
.coinbase-principle strong{color:#e8f2ff}

.coinbase-phase .phase-heading{border-color:rgba(98,168,255,.25)}
.coinbase-phase .phase-heading::before{background:linear-gradient(to bottom,#1652f0,var(--green))}

/* Les captures Coinbase sont des écrans d'interface : garder le texte net et lisible. */
.coinbase-shot{
    max-width:min(100%,620px)!important;
    overflow:hidden;
    border:1px solid rgba(98,168,255,.16);
    border-radius:15px;
    background:#fff;
    box-shadow:0 20px 46px rgba(0,0,0,.22);
}
.coinbase-shot img{display:block;width:auto;max-width:100%;height:auto;background:#fff}
.coinbase-shot figcaption{background:linear-gradient(180deg,rgba(11,17,24,.98),rgba(8,13,18,.99))}
.coinbase-shot-wide{max-width:min(100%,820px)!important}
.coinbase-shot-selfie{max-width:min(100%,1000px)!important}

.coinbase-transfer-check{margin-top:18px}
.coinbase-transfer-check div:nth-child(2){border-color:rgba(82,211,135,.38);background:rgba(82,211,135,.065)}
.coinbase-transfer-check div:nth-child(2) strong,.coinbase-transfer-check div:nth-child(2) span{color:#a7efc2}
.coinbase-finish{border-color:rgba(98,168,255,.24);background:linear-gradient(145deg,rgba(98,168,255,.065),rgba(10,15,20,.97))}

@media(max-width:900px){
    .coinbase-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}
    .coinbase-shot-selfie{max-width:100%!important}
}
@media(max-width:600px){
    .coinbase-roadmap{grid-template-columns:1fr}
    .coinbase-shot,.coinbase-shot-wide,.coinbase-shot-selfie{max-width:100%!important;border-radius:11px}
    .coinbase-transfer-check{grid-template-columns:1fr}
}

/* =========================================================
   COMMANDES v1.1.42 — GUIDE GRAND DÉBUTANT
   Correspond à commandes-debutant-attractive-v1.1.42.php
   ========================================================= */

.commands-beginner {
    --cb-card: rgba(16, 21, 29, 0.9);
    --cb-card-soft: rgba(255, 255, 255, 0.025);
    --cb-border: rgba(255, 255, 255, 0.09);
    --cb-soft: var(--muted);
    --cb-radius: 22px;
}

.commands-beginner .cb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 24px;
    align-items: stretch;
    margin: 0 0 28px;
}

.commands-beginner .cb-panel,
.commands-beginner .cb-card,
.commands-beginner .cb-step,
.commands-beginner .cb-command,
.commands-beginner .cb-help {
    background:
        linear-gradient(145deg, rgba(20, 28, 38, 0.94), rgba(10, 15, 22, 0.97));
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.commands-beginner .cb-hero-main {
    position: relative;
    overflow: hidden;
    padding: 34px;
}

.commands-beginner .cb-hero-main::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background: var(--blue);
    filter: blur(90px);
    opacity: 0.09;
    pointer-events: none;
}

.commands-beginner .cb-hero-main h1 {
    margin: 0.25rem 0 0.75rem;
    max-width: 760px;
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1;
}

.commands-beginner .cb-hero-main p {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 18px;
}

.commands-beginner .cb-hero-menu {
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-color: rgba(98, 168, 255, 0.22);
    background:
        radial-gradient(circle at 50% 10%, rgba(98, 168, 255, 0.10), transparent 16rem),
        linear-gradient(145deg, rgba(18, 27, 39, 0.98), rgba(9, 14, 20, 0.99));
}

.commands-beginner .cb-hero-menu code {
    display: inline-flex;
    margin: 0.55rem 0;
    padding: 11px 18px;
    color: #dcecff;
    border: 1px solid rgba(98, 168, 255, 0.25);
    border-radius: 12px;
    background: rgba(98, 168, 255, 0.07);
    font-size: 2rem;
    font-weight: 900;
}

.commands-beginner .cb-hero-menu small {
    margin-top: 4px;
    color: var(--muted);
}

.commands-beginner .cb-eyebrow {
    display: inline-block;
    color: var(--blue);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.commands-beginner .cb-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 36px;
}

.commands-beginner .cb-card {
    min-width: 0;
    padding: 22px;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.commands-beginner .cb-card:hover {
    transform: translateY(-2px);
    border-color: rgba(98, 168, 255, 0.22);
}

.commands-beginner .cb-card .cb-icon,
.commands-beginner .cb-mini .cb-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border: 1px solid rgba(98, 168, 255, 0.16);
    border-radius: 13px;
    background: rgba(98, 168, 255, 0.055);
    font-size: 1.35rem;
}

.commands-beginner .cb-card h3 {
    margin: 0.2rem 0 0.5rem;
}

.commands-beginner .cb-card p {
    margin: 0;
    color: var(--cb-soft);
}

.commands-beginner .cb-nav {
    position: sticky;
    top: 88px;
    z-index: 18;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 38px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(8, 13, 19, 0.94);
    backdrop-filter: blur(14px);
}

.commands-beginner .cb-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 13px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.commands-beginner .cb-nav a:hover,
.commands-beginner .cb-nav a:focus-visible,
.commands-beginner .cb-nav a.is-active {
    color: var(--text);
    border-color: rgba(98, 168, 255, 0.24);
    background: rgba(98, 168, 255, 0.075);
}

.commands-beginner .cb-section {
    margin: 62px 0;
    scroll-margin-top: 155px;
}

.commands-beginner .cb-section-head {
    max-width: 820px;
    margin-bottom: 20px;
}

.commands-beginner .cb-section-head h2 {
    margin: 0.3rem 0 0.55rem;
    font-size: clamp(30px, 4vw, 46px);
}

.commands-beginner .cb-section-head p {
    max-width: 800px;
    margin-bottom: 0;
    color: var(--muted);
}

.commands-beginner .cb-command {
    padding: 24px;
    margin: 18px 0;
    border-color: rgba(98, 168, 255, 0.18);
}

.commands-beginner .cb-command-top {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.commands-beginner .cb-command-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(98, 168, 255, 0.19);
    background: rgba(98, 168, 255, 0.055);
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.commands-beginner .cb-command h3 {
    margin: 0.1rem 0 0.35rem;
}

.commands-beginner .cb-command p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.commands-beginner .cb-tag {
    display: inline-flex;
    margin-top: 12px;
    padding: 6px 10px;
    color: #9ceabd;
    border: 1px solid rgba(84, 214, 138, 0.23);
    border-radius: 999px;
    background: rgba(84, 214, 138, 0.055);
    font-size: 0.75rem;
    font-weight: 900;
}

.commands-beginner .cb-warning,
.commands-beginner .cb-info {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--muted);
    line-height: 1.55;
}

.commands-beginner .cb-warning strong,
.commands-beginner .cb-info strong {
    color: var(--text);
}

.commands-beginner .cb-warning {
    border: 1px solid rgba(245, 173, 82, 0.28);
    background: rgba(245, 173, 82, 0.065);
}

.commands-beginner .cb-info {
    border: 1px solid rgba(98, 168, 255, 0.23);
    background: rgba(98, 168, 255, 0.055);
}

.commands-beginner .cb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.commands-beginner .cb-mini {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--cb-border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(18, 24, 33, 0.78), rgba(10, 15, 21, 0.9));
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.commands-beginner .cb-mini:hover {
    transform: translateY(-2px);
    border-color: rgba(98, 168, 255, 0.21);
}

.commands-beginner .cb-mini h4 {
    margin: 0.15rem 0 0.45rem;
    font-size: 18px;
}

.commands-beginner .cb-mini > p {
    margin: 0;
    color: var(--muted);
}

.commands-beginner .cb-steps {
    display: grid;
    gap: 12px;
}

.commands-beginner .cb-step {
    padding: 18px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
}

.commands-beginner .cb-step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #dcecff;
    border: 1px solid rgba(98, 168, 255, 0.24);
    background: rgba(98, 168, 255, 0.065);
    font-weight: 900;
}

.commands-beginner .cb-step p {
    margin: 4px 0 0;
    color: var(--muted);
}

.commands-beginner .cb-big-code {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 12px 0 5px;
    padding: 12px 16px;
    color: #dceaff;
    border: 1px solid rgba(98, 168, 255, 0.22);
    border-radius: 12px;
    background: #080c11;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
    font-weight: 800;
    overflow-x: auto;
    cursor: copy;
    -webkit-overflow-scrolling: touch;
}

.commands-beginner .cb-big-code:hover,
.commands-beginner .cb-big-code:focus-visible {
    border-color: rgba(98, 168, 255, 0.45);
}

.commands-beginner .cb-big-code.is-copied {
    color: #8be9b1;
    border-color: rgba(84, 214, 138, 0.35);
}

.commands-beginner .cb-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
}

.commands-beginner .cb-vs {
    color: var(--muted);
    font-size: 24px;
}

.commands-beginner .cb-help {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.commands-beginner .cb-help h2 {
    margin: 5px 0 6px;
}

.commands-beginner .cb-help p {
    margin: 0;
    color: var(--muted);
}

.commands-beginner .cb-help a {
    white-space: nowrap;
}

.commands-beginner .cb-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.commands-beginner .cb-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .commands-beginner .cb-card,
    .commands-beginner .cb-mini,
    .commands-beginner .cb-reveal {
        transition: none;
        transform: none;
    }
}

@media (max-width: 900px) {
    .commands-beginner .cb-hero,
    .commands-beginner .cb-grid,
    .commands-beginner .cb-quick {
        grid-template-columns: 1fr;
    }

    .commands-beginner .cb-nav {
        top: 82px;
    }

    .commands-beginner .cb-compare {
        grid-template-columns: 1fr;
    }

    .commands-beginner .cb-compare .cb-vs {
        text-align: center;
    }

    .commands-beginner .cb-help {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .commands-beginner .cb-hero {
        gap: 12px;
    }

    .commands-beginner .cb-hero-main,
    .commands-beginner .cb-hero-menu,
    .commands-beginner .cb-command,
    .commands-beginner .cb-help {
        padding: 20px;
    }

    .commands-beginner .cb-hero-main h1 {
        font-size: clamp(38px, 12vw, 54px);
    }

    .commands-beginner .cb-nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commands-beginner .cb-nav a {
        min-height: 46px;
        text-align: center;
    }

    .commands-beginner .cb-section {
        margin: 48px 0;
        scroll-margin-top: 90px;
    }

    .commands-beginner .cb-command-top {
        gap: 13px;
    }
}

@media (max-width: 470px) {
    .commands-beginner .cb-nav {
        grid-template-columns: 1fr;
    }

    .commands-beginner .cb-step {
        grid-template-columns: 36px 1fr;
        padding: 15px;
    }

    .commands-beginner .cb-step-number {
        width: 36px;
        height: 36px;
    }

    .commands-beginner .cb-big-code {
        width: 100%;
        white-space: nowrap;
    }
}

/* =========================================================
   ACCUEIL — titre hero plus compact
   ========================================================= */
.dream-hero h1 {
    max-width: 700px;
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.01;
}

@media (max-width: 900px) {
    .dream-hero h1 {
        max-width: 680px;
        font-size: clamp(44px, 8vw, 64px);
    }
}

@media (max-width: 600px) {
    .dream-hero h1 {
        max-width: 100%;
        font-size: clamp(40px, 12vw, 54px);
        line-height: 1.02;
    }
}