:root {
    color-scheme: dark;
    --bg: #090812;
    --surface: #12101f;
    --surface-strong: #19162a;
    --ink: #f7f1df;
    --muted: #b8b0ca;
    --line: rgba(231, 214, 173, 0.18);
    --accent: #d8b45f;
    --accent-dark: #f0d98b;
    --danger: #ff8b8b;
}

* {
    box-sizing: border-box;
}

html {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 18% 8%, rgba(216, 180, 95, 0.14), transparent 28%), radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.16), transparent 28%), linear-gradient(180deg, #090812 0%, #11101c 48%, #070710 100%);
    color: var(--ink);
}

body {
    margin: 0;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(216,180,95,0.75) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(159,147,255,0.55) 0 1px, transparent 1.7px);
    background-size: 83px 83px, 137px 137px, 211px 211px;
    background-position: 0 0, 37px 71px, 91px 29px;
    opacity: 0.38;
}

.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.brand,
.site-header a,
.secondary-action {
    color: var(--ink);
    text-decoration: none;
}

.brand {
    font-weight: 800;
    font-size: 1.1rem;
}

.site-header nav a {
    color: var(--muted);
    font-size: 0.95rem;
}

.tool-hero {
    padding: 56px 0 28px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0;
}

h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.lede {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
    padding: 8px 0 36px;
}

.tool-panel {
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 750;
}

.form-row {
    display: flex;
    gap: 10px;
}

input,
button {
    min-height: 44px;
    border-radius: 6px;
    font: inherit;
}

input {
    width: 100%;
    border: 1px solid var(--line);
    padding: 0 12px;
    background: #0e0c18; color: var(--ink);
}

button,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    padding: 0 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.secondary-action {
    margin-top: 10px;
}

.hint,
.status,
.site-footer,
.result-degree {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.form-error {
    color: var(--danger);
    font-weight: 700;
}

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

.result-facts div {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
}

dt {
    color: var(--muted);
    font-size: 0.78rem;
}

dd {
    margin: 2px 0 0;
    font-weight: 800;
}

.content-band {
    padding: 24px 0 56px;
    border-top: 1px solid var(--line);
}

.content-band p {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.65;
}

.site-footer {
    padding: 24px 0 34px;
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .tool-grid,
    .result-facts {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    button,
    .secondary-action {
        width: 100%;
    }
}

.form-stack {
    display: grid;
    gap: 16px;
}

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

.form-stack button {
    width: fit-content;
}

@media (max-width: 760px) {
    .field-grid {
        grid-template-columns: 1fr;
    }

    .form-stack button {
        width: 100%;
    }
}

.data-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

th,
td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

tr:last-child td {
    border-bottom: 0;
}

.angle-facts {
    max-width: 720px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.section-heading p {
    max-width: 420px;
    margin-bottom: 0;
}

.chart-section {
    padding-bottom: 36px;
}

.chart-wheel-wrap {
    display: grid;
    place-items: center;
    overflow-x: auto;
    padding: 12px 0;
}

.chart-wheel {
    width: min(100%, 620px);
    height: auto;
    aspect-ratio: 1;
    color: var(--ink);
}

.wheel-ring {
    fill: #fffdfa;
    stroke: var(--line);
    stroke-width: 1.4;
}

.wheel-ring--outer {
    fill: #fbfaf7;
    stroke: #b7aa96;
    stroke-width: 2;
}

.wheel-ring--houses,
.wheel-ring--aspects {
    fill: transparent;
}

.wheel-sign,
.house-label,
.planet-label {
    dominant-baseline: middle;
    text-anchor: middle;
    letter-spacing: 0;
}

.wheel-sign {
    fill: #27445c;
    font-size: 22px;
}

.house-line {
    stroke: #9b8d79;
    stroke-width: 1;
    opacity: 0.82;
}

.house-line--angle {
    stroke: #0b4f4a;
    stroke-width: 2.2;
}

.house-label {
    fill: #5f646b;
    font-size: 11px;
    font-weight: 800;
}

.aspect-line {
    stroke-width: 1.2;
    opacity: 0.48;
}

.aspect-line--conjunction,
.aspect-line--trine,
.aspect-line--sextile {
    stroke: #0f766e;
}

.aspect-line--square,
.aspect-line--opposition {
    stroke: #a52828;
}

.planet-marker {
    stroke: #c9c0b2;
    stroke-width: 0.8;
    opacity: 0.55;
}

.planet-dot {
    fill: #171717;
    stroke: #fffdfa;
    stroke-width: 1.5;
}

.planet-label {
    fill: #171717;
    font-size: 19px;
    font-weight: 850;
}

@media (max-width: 760px) {
    .section-heading {
        display: block;
    }

    .chart-wheel-wrap {
        padding: 4px 0;
    }

    .wheel-sign {
        font-size: 20px;
    }

    .planet-label {
        font-size: 17px;
    }
}

.form-success {
    color: #0f766e;
    font-weight: 800;
}

.account-facts {
    grid-template-columns: 1fr;
}

.tool-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tool-link-grid a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    padding: 10px;
}

@media (max-width: 760px) {
    .tool-link-grid {
        grid-template-columns: 1fr;
    }
}

.save-chart-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.save-chart-form button {
    width: fit-content;
}

@media (max-width: 760px) {
    .save-chart-form button {
        width: 100%;
    }
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.secondary-action--light {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

@media (max-width: 760px) {
    .action-row {
        display: grid;
    }
}

.table-action {
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.synastry-form-band {
    padding-top: 8px;
}

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

.profile-fieldset {
    display: grid;
    gap: 14px;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.profile-fieldset legend {
    padding: 0 6px;
    font-weight: 850;
}

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

.score-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.score-card dd {
    font-size: 1.35rem;
}

.score-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8e2d7;
}

.score-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

@media (max-width: 1080px) {
    .synastry-grid,
    .score-grid {
        grid-template-columns: 1fr;
    }
}

.breadcrumb {
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #9b9285;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumb span {
    color: var(--ink);
    font-weight: 750;
}

.tool-link-grid--featured {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .tool-link-grid--featured {
        grid-template-columns: 1fr;
    }
}

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

.dominant-panel h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.dominant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 12px;
}

.dominant-row .score-bar {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .dominant-grid {
        grid-template-columns: 1fr;
    }
}

.angular-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.angular-row:last-child {
    border-bottom: 0;
}

.angular-row small {
    grid-column: 1 / -1;
    color: var(--muted);
}

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

.interpretation-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.interpretation-card p {
    margin-bottom: 10px;
}

@media (max-width: 760px) {
    .interpretation-grid {
        grid-template-columns: 1fr;
    }
}

.manual-coordinates {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--surface-muted);
}

.manual-coordinates summary {
    cursor: pointer;
    font-weight: 700;
}

.manual-coordinates .field-grid,
.manual-coordinates > div {
    margin-top: 0.85rem;
}

.chart-wheel-panel {
    min-height: 2.75rem;
    max-width: 620px;
    width: min(100%, 620px);
    margin: 0.75rem auto 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    text-align: center;
}

.planet-label,
.planet-dot,
.aspect-line {
    transition: opacity 160ms ease, stroke-width 160ms ease, transform 160ms ease;
}

.planet-label:hover,
.planet-label:focus,
.planet-label.is-active,
.planet-dot:hover,
.planet-dot:focus,
.planet-dot.is-active {
    fill: #0b4f4a;
    outline: none;
}

.aspect-line:hover,
.aspect-line:focus,
.aspect-line.is-active {
    opacity: 0.95;
    stroke-width: 3;
    outline: none;
}


.report-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.report-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 8px;
}

.report-section {
    break-inside: avoid;
}

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

.report-reading-stack {
    display: grid;
    gap: 14px;
}

.report-reading h3 {
    margin-top: 0;
}

.report-limit {
    padding-bottom: 24px;
}


.report-cover {
    padding-top: 8px;
}

.report-toc-list {
    display: grid;
    gap: 8px;
    max-width: 720px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.6;
}

.report-callout {
    max-width: 860px;
    margin: 0 0 18px;
    border-left: 4px solid var(--accent);
    background: #0e0c18; color: var(--ink);
    padding: 14px 16px;
}

.report-callout p {
    margin: 0;
}

.report-subsection {
    margin-top: 16px;
}

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

.report-reading p:last-child,
.report-summary-grid p:last-child,
.report-limit p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .report-hero,
    .report-actions {
        display: block;
    }

    .report-summary-grid,
    .report-angle-facts {
        grid-template-columns: 1fr;
    }
}

@media print {
    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --ink: #111111;
        --muted: #333333;
        --line: #cfcfcf;
        --accent: #111111;
        --accent-dark: #111111;
    }

    html,
    body {
        background: #ffffff;
    }

    .site-header,
    .site-footer,
    .no-print,
    .chart-wheel-panel {
        display: none !important;
    }

    .tool-hero,
    .tool-grid,
    .content-band {
        width: 100%;
        margin: 0;
    }

    .tool-hero {
        padding: 0 0 18px;
    }

    h1 {
        font-size: 32px;
        line-height: 1.1;
    }

    h2 {
        font-size: 20px;
    }

    .content-band {
        padding: 18px 0;
        border-top: 1px solid #cfcfcf;
    }

    .report-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-section:nth-of-type(4),
    .report-section:nth-of-type(6) {
        break-before: page;
        page-break-before: always;
    }

    .report-summary-grid,
    .dominant-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

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

    .report-reading-stack {
        gap: 10px;
    }

    .report-callout {
        border-left-color: #111111;
        background: #ffffff;
    }

    .tool-panel {
        box-shadow: none;
        border-color: #cfcfcf;
    }

    a {
        color: #111111;
        text-decoration: none;
    }

    table {
        font-size: 12px;
    }

    .report-toc-list {
        color: #111111;
    }

    @page {
        margin: 16mm 14mm;
    }
}


/* ASTROLOGIX_REVOLUTION_DESIGN */
:root {
    color-scheme: light;
    --bg: #f5efe3;
    --bg-2: #e7f2ed;
    --surface: rgba(255, 252, 244, 0.94);
    --surface-strong: #fffaf0;
    --surface-muted: #f0eadf;
    --ink: #11120f;
    --muted: #58605d;
    --line: #1b1d18;
    --line-soft: rgba(17, 18, 15, 0.16);
    --border: var(--line-soft);
    --accent: #006f62;
    --accent-dark: #003f39;
    --solar: #d98a21;
    --coral: #d94c3d;
    --violet: #6d5bd0;
    --danger: #b42331;
    --shadow-hard: 8px 8px 0 #11120f;
    --shadow-soft: 0 22px 60px rgba(17, 18, 15, 0.11);
}

html {
    min-height: 100%;
    background:
        linear-gradient(90deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(135deg, #fff7e8 0%, #edf6f2 42%, #f8eee9 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(217,138,33,0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(0,111,98,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 72%, rgba(217,76,61,0.12) 0 1px, transparent 2px);
    background-size: 120px 120px, 164px 164px, 140px 140px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 64%, rgba(17,18,15,0.08) 64% 64.25%, transparent 64.25%),
        linear-gradient(25deg, transparent 0 72%, rgba(0,111,98,0.10) 72% 72.35%, transparent 72.35%);
    opacity: 0.9;
}

.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band,
.breadcrumb {
    width: min(1180px, calc(100% - 36px));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 250, 240, 0.88);
    box-shadow: 5px 5px 0 rgba(17,18,15,0.96);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 1.08rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand::before {
    content: "✦";
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--ink);
    color: #fffaf0;
    font-size: 0.9rem;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.site-header nav a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 10px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 760;
    text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    border-color: var(--line);
    background: #fffaf0;
    outline: none;
}

.breadcrumb {
    margin-top: 22px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,250,240,0.72);
}

.tool-hero {
    display: grid;
    min-height: 280px;
    align-items: end;
    padding: 72px 0 34px;
}

.tool-hero > div {
    position: relative;
}

.tool-hero > div::before {
    content: "";
    position: absolute;
    top: -28px;
    left: -18px;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(17,18,15,0.32);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(17,18,15,0.34) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(17,18,15,0.34) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    opacity: 0.44;
}

h1 {
    max-width: 920px;
    font-size: clamp(2.45rem, 7.2vw, 6.8rem);
    line-height: 0.9;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

h3 {
    letter-spacing: 0;
}

.lede {
    max-width: 860px;
    color: #343936;
    font-size: clamp(1.02rem, 1.45vw, 1.28rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 0.72rem;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.tool-grid {
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 26px;
    padding-bottom: 44px;
}

.tool-panel,
.score-card,
.table-wrap,
.profile-fieldset,
.chart-wheel-panel,
.tool-link-grid a,
.result-facts div {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.tool-panel,
.table-wrap,
.profile-fieldset,
.score-card,
.tool-link-grid a {
    position: relative;
}

.tool-panel::after,
.score-card::after,
.tool-link-grid a::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-top: 2px solid rgba(17,18,15,0.28);
    border-right: 2px solid rgba(17,18,15,0.28);
    pointer-events: none;
}

.result-panel,
form.tool-panel {
    box-shadow: var(--shadow-hard);
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    background: #fffef9;
    color: var(--ink);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(217,138,33,0.28);
    outline-offset: 1px;
}

button,
.secondary-action {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--ink);
    box-shadow: 4px 4px 0 var(--solar);
    color: #fffaf0;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--solar);
    outline: none;
}

.secondary-action--light {
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(0,111,98,0.26);
}

.content-band {
    margin-top: 14px;
    border-top: 2px solid var(--line);
}

.content-band > h2,
.section-heading h2 {
    max-width: 780px;
    text-transform: none;
}

.table-wrap {
    border-width: 1px;
    box-shadow: 6px 6px 0 rgba(17,18,15,0.12);
}

th {
    color: var(--ink);
    background: #eee6d8;
    font-weight: 850;
}

td,
th {
    border-color: rgba(17,18,15,0.16);
}

.chart-wheel-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        rgba(255,250,240,0.82);
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: var(--shadow-hard);
}

.chart-wheel {
    filter: drop-shadow(0 18px 18px rgba(17,18,15,0.16));
}

.wheel-ring {
    fill: rgba(255,250,240,0.78);
    stroke: rgba(17,18,15,0.52);
}

.wheel-ring--outer {
    fill: rgba(231,242,237,0.56);
    stroke: var(--line);
}

.wheel-sign {
    fill: var(--violet);
    font-weight: 850;
}

.house-line--angle,
.aspect-line--conjunction,
.aspect-line--trine,
.aspect-line--sextile {
    stroke: var(--accent);
}

.aspect-line--square,
.aspect-line--opposition {
    stroke: var(--coral);
}

.planet-dot {
    fill: var(--ink);
    stroke: var(--solar);
}

.planet-label {
    fill: var(--ink);
}

.score-bar {
    height: 10px;
    border: 1px solid rgba(17,18,15,0.12);
    background: #dfd7c8;
}

.score-bar span {
    background: linear-gradient(90deg, var(--accent), var(--solar));
}

.interpretation-card,
.report-reading {
    border-left: 5px solid var(--accent);
}

.form-success {
    color: var(--accent-dark);
}

.form-error {
    border-left: 4px solid var(--danger);
    padding-left: 10px;
}

.site-footer {
    margin-top: 44px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    padding: 20px;
    background: rgba(255,250,240,0.72);
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer a {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1080px) {
    .site-header {
        position: static;
        display: grid;
        gap: 12px;
    }

    .site-header nav {
        justify-content: flex-start;
    }

    .tool-grid,
    .score-grid,
    .synastry-grid,
    .dominant-grid,
    .interpretation-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: clamp(2.35rem, 14vw, 4.6rem);
    }
}

@media (max-width: 560px) {
    .site-header,
    .site-footer,
    .tool-hero,
    .tool-grid,
    .content-band,
    .breadcrumb {
        width: min(100% - 22px, 1180px);
    }

    .tool-hero {
        min-height: 220px;
        padding-top: 46px;
    }

    .tool-panel,
    .score-card {
        padding: 16px;
    }

    .result-panel,
    form.tool-panel,
    .chart-wheel-wrap {
        box-shadow: 4px 4px 0 rgba(17,18,15,0.92);
    }
}

@media print {
    html,
    body {
        background: #ffffff !important;
    }

    body::before,
    .tool-hero > div::before,
    .tool-panel::after,
    .score-card::after,
    .tool-link-grid a::after {
        display: none !important;
    }

    .site-header,
    .site-footer,
    .no-print,
    .chart-wheel-panel {
        display: none !important;
    }

    .tool-panel,
    .score-card,
    .table-wrap,
    .chart-wheel-wrap,
    .result-panel,
    form.tool-panel {
        box-shadow: none !important;
    }

    button,
    .secondary-action {
        box-shadow: none !important;
    }
}


/* ASTROLOGIX_HOME_EXPERIENCE */
.home-hero,
.home-flow,
.home-split,
.home-proof {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 32px;
    align-items: center;
    min-height: clamp(560px, 76vh, 760px);
    padding: 48px 0 28px;
}

.home-hero__copy h1 {
    max-width: 820px;
    margin-bottom: 18px;
    font-size: clamp(3.7rem, 11vw, 8.8rem);
    line-height: 0.86;
    text-transform: uppercase;
}

.home-claim {
    max-width: 720px;
    color: var(--ink);
    font-size: clamp(1.12rem, 2vw, 1.55rem);
    line-height: 1.48;
    font-weight: 760;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.home-console {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
        #fffdfa;
    background-size: 26px 26px;
    box-shadow: 12px 12px 0 #f3c15f;
}

.home-console__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 2px solid var(--ink);
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 850;
    text-transform: uppercase;
}

.home-console__top strong {
    color: #0b6f68;
}

.home-orbit {
    position: relative;
    width: min(78vw, 330px);
    aspect-ratio: 1;
    margin: 42px auto 30px;
}

.home-orbit__ring,
.home-orbit__axis,
.home-orbit__node {
    position: absolute;
}

.home-orbit__ring {
    inset: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.home-orbit__ring--inner {
    inset: 21%;
    border-color: #0f766e;
}

.home-orbit__axis {
    inset: 50% -12% auto -12%;
    height: 2px;
    background: #171717;
    transform: rotate(-18deg);
}

.home-orbit__node {
    display: grid;
    place-items: center;
    width: 54px;
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 5px 5px 0 #ef6f61;
}

.home-orbit__node--sun { top: 3%; left: 42%; }
.home-orbit__node--moon { right: 0; top: 48%; box-shadow: 5px 5px 0 #6b5cff; }
.home-orbit__node--asc { left: 0; top: 48%; box-shadow: 5px 5px 0 #0f766e; }
.home-orbit__node--mc { bottom: 1%; left: 43%; box-shadow: 5px 5px 0 #f3c15f; }

.home-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 2px solid var(--ink);
}

.home-signal-grid div {
    min-height: 76px;
    padding: 14px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 255, 255, 0.74);
}

.home-signal-grid div:nth-child(even) {
    border-right: 0;
}

.home-signal-grid dt {
    color: #5f646b;
    font-weight: 850;
    text-transform: uppercase;
}

.home-signal-grid dd {
    color: var(--ink);
    font-size: 1.05rem;
}

.home-flow {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr);
    gap: 12px;
    padding: 0 0 56px;
}

.home-command {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 12px;
    min-height: 210px;
    padding: 18px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 7px 7px 0 rgba(23, 23, 23, 0.14);
}

.home-command--primary {
    background: #0f766e;
    color: #ffffff;
    box-shadow: 7px 7px 0 #171717;
}

.home-command span {
    width: fit-content;
    border-bottom: 2px solid currentColor;
    font-size: 0.86rem;
    font-weight: 900;
}

.home-command strong {
    font-size: clamp(1.12rem, 2vw, 1.55rem);
    line-height: 1.05;
}

.home-command em {
    align-self: end;
    color: inherit;
    font-style: normal;
    line-height: 1.45;
    opacity: 0.82;
}

.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: start;
}

.home-split h2,
.home-proof h2 {
    max-width: 680px;
    font-size: clamp(1.9rem, 4vw, 3.5rem);
    line-height: 0.98;
}

.home-link-stack {
    display: grid;
    gap: 10px;
}

.home-link-stack a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 0 16px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 860;
    text-decoration: none;
}

.home-link-stack a::after {
    content: '>';
    font-weight: 900;
}

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

.home-proof article {
    border-top: 3px solid var(--ink);
    padding-top: 18px;
}

@media (max-width: 920px) {
    .home-hero,
    .home-flow,
    .home-split,
    .home-proof {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: auto;
        padding-top: 34px;
    }

    .home-console {
        min-height: 410px;
        box-shadow: 8px 8px 0 #f3c15f;
    }

    .home-flow {
        padding-bottom: 34px;
    }

    .home-command {
        min-height: 150px;
    }
}

@media (max-width: 620px) {
    .home-hero__copy h1 {
        font-size: clamp(3rem, 18vw, 5.2rem);
    }

    .home-actions,
    .home-actions .secondary-action {
        width: 100%;
    }

    .home-orbit {
        width: min(76vw, 270px);
    }

    .home-orbit__node {
        width: 46px;
    }

    .home-signal-grid {
        grid-template-columns: 1fr;
    }

    .home-signal-grid div,
    .home-signal-grid div:nth-child(even) {
        border-right: 0;
    }
}


/* ASTROLOGIX_DARK_MOTION */
:root {
    color-scheme: dark;
    --bg: #090b10;
    --bg-2: #0e2522;
    --surface: rgba(18, 21, 28, 0.94);
    --surface-strong: #151923;
    --surface-muted: #1b202b;
    --ink: #f6f0df;
    --muted: #b9c0bd;
    --line: #f6f0df;
    --line-soft: rgba(246, 240, 223, 0.18);
    --border: var(--line-soft);
    --accent: #34d3bd;
    --accent-dark: #89fff0;
    --solar: #f3b34d;
    --coral: #ff7767;
    --violet: #9d8cff;
    --danger: #ff6f7d;
    --shadow-hard: 8px 8px 0 rgba(52, 211, 189, 0.74);
    --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.42);
}

@keyframes astro-drift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 68px 34px, -34px 68px, 0 0; }
}

@keyframes astro-starfield {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 120px 120px, -164px 164px, 140px -140px; }
}

@keyframes astro-scan {
    0%, 100% { transform: translateY(-18%); opacity: 0.2; }
    50% { transform: translateY(18%); opacity: 0.45; }
}

@keyframes astro-spin {
    to { transform: rotate(360deg); }
}

@keyframes astro-counter-spin {
    to { transform: rotate(-360deg); }
}

@keyframes astro-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes astro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 189, 0.0), 5px 5px 0 currentColor; }
    50% { box-shadow: 0 0 28px 5px rgba(52, 211, 189, 0.32), 5px 5px 0 currentColor; }
}

html {
    background:
        linear-gradient(90deg, rgba(246,240,223,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.045) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(52,211,189,0.18), transparent 30%),
        radial-gradient(circle at 78% 6%, rgba(157,140,255,0.15), transparent 26%),
        linear-gradient(135deg, #090b10 0%, #0d141b 48%, #120f1d 100%);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    animation: astro-drift 24s linear infinite;
}

body {
    background:
        radial-gradient(circle at 12% 16%, rgba(243,179,77,0.30) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(52,211,189,0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 72%, rgba(255,119,103,0.24) 0 1px, transparent 2px);
    background-size: 120px 120px, 164px 164px, 140px 140px;
    animation: astro-starfield 38s linear infinite;
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 64%, rgba(52,211,189,0.24) 64% 64.25%, transparent 64.25%),
        linear-gradient(25deg, transparent 0 72%, rgba(243,179,77,0.16) 72% 72.35%, transparent 72.35%),
        radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(246,240,223,0.06) 38.15%, transparent 38.45%);
}

.site-header,
.site-footer,
.breadcrumb {
    background: rgba(12, 15, 22, 0.82);
    border-color: rgba(246, 240, 223, 0.44);
    box-shadow: 5px 5px 0 rgba(52, 211, 189, 0.65);
}

.site-header {
    backdrop-filter: blur(18px) saturate(1.25);
}

.brand::before {
    background: var(--accent);
    color: #07100f;
    animation: astro-spin 18s linear infinite;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.tool-link-grid a:hover,
.home-link-stack a:hover,
.home-command:hover {
    background: rgba(52, 211, 189, 0.12);
    color: var(--ink);
}

.tool-panel,
.score-card,
.table-wrap,
.profile-fieldset,
.chart-wheel-panel,
.tool-link-grid a,
.result-facts div,
.home-command,
.home-link-stack a,
.home-console {
    background: linear-gradient(145deg, rgba(20, 24, 34, 0.96), rgba(10, 13, 20, 0.96));
    border-color: rgba(246, 240, 223, 0.52);
    color: var(--ink);
}

.tool-panel,
.score-card,
.home-command,
.home-link-stack a {
    transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.home-command:hover,
.home-link-stack a:hover {
    border-color: var(--accent);
    box-shadow: 10px 10px 0 rgba(52, 211, 189, 0.42), 0 24px 70px rgba(0, 0, 0, 0.36);
}

.tool-panel::after,
.score-card::after,
.tool-link-grid a::after {
    border-color: rgba(52, 211, 189, 0.46);
}

.lede,
.content-band p,
.hint,
.status,
.site-footer,
.result-degree,
.home-command em {
    color: var(--muted);
}

input,
select,
textarea,
.wheel-ring,
.wheel-ring--outer {
    background: #0d1118;
    color: var(--ink);
}

input,
select,
textarea {
    border-color: rgba(246, 240, 223, 0.36);
}

input:focus,
select:focus,
textarea:focus {
    outline-color: rgba(52, 211, 189, 0.34);
}

button,
.secondary-action {
    background: var(--accent);
    color: #05100e;
    box-shadow: 4px 4px 0 var(--solar);
}

.secondary-action--light {
    background: rgba(246, 240, 223, 0.08);
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(157, 140, 255, 0.72);
}

th {
    background: rgba(246, 240, 223, 0.08);
    color: var(--ink);
}

td,
th {
    border-color: rgba(246, 240, 223, 0.16);
}

.chart-wheel-wrap,
.home-console {
    background:
        linear-gradient(90deg, rgba(246,240,223,0.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.055) 1px, transparent 1px),
        linear-gradient(145deg, rgba(18, 22, 31, 0.94), rgba(7, 10, 16, 0.98));
    background-size: 28px 28px, 28px 28px, auto;
}

.home-console::after {
    content: "";
    position: absolute;
    inset: -40% 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(52, 211, 189, 0.10), transparent);
    animation: astro-scan 7s ease-in-out infinite;
}

.home-console__top {
    position: relative;
    z-index: 1;
    background: rgba(7, 10, 16, 0.9);
    border-color: rgba(246, 240, 223, 0.52);
}

.home-orbit {
    animation: astro-float 5.5s ease-in-out infinite;
}

.home-orbit__ring--outer {
    animation: astro-spin 28s linear infinite;
}

.home-orbit__ring--inner {
    animation: astro-counter-spin 20s linear infinite;
}

.home-orbit__ring {
    border-color: rgba(246, 240, 223, 0.64);
}

.home-orbit__ring--outer::before,
.home-orbit__ring--inner::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 20px rgba(52, 211, 189, 0.82);
}

.home-orbit__axis {
    background: rgba(246, 240, 223, 0.68);
}

.home-orbit__node {
    background: #101620;
    color: var(--ink);
    border-color: rgba(246, 240, 223, 0.74);
    animation: astro-pulse 4.6s ease-in-out infinite;
}

.home-orbit__node--sun { color: var(--solar); animation-delay: 0s; }
.home-orbit__node--moon { color: var(--violet); animation-delay: 0.8s; }
.home-orbit__node--asc { color: var(--accent); animation-delay: 1.4s; }
.home-orbit__node--mc { color: var(--coral); animation-delay: 2.1s; }

.home-signal-grid div {
    background: rgba(246, 240, 223, 0.055);
    border-color: rgba(246, 240, 223, 0.36);
}

.home-command--primary {
    background: linear-gradient(145deg, rgba(52, 211, 189, 0.96), rgba(10, 99, 89, 0.96));
    color: #061210;
}

.home-command--primary em {
    color: rgba(6, 18, 16, 0.74);
}

.table-action,
.breadcrumb a,
.site-footer a {
    color: var(--accent-dark);
}

.wheel-ring {
    fill: rgba(14, 18, 26, 0.82);
    stroke: rgba(246, 240, 223, 0.35);
}

.wheel-ring--outer {
    fill: rgba(52, 211, 189, 0.08);
    stroke: rgba(246, 240, 223, 0.62);
}

.planet-dot {
    fill: var(--accent);
    stroke: #07100f;
}

.planet-label,
.house-label,
.home-signal-grid dd,
dd {
    color: var(--ink);
    fill: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}


/* ASTROLOGIX_DEEP_STARFIELD
   Les keyframes de cette génération (parallaxe, dérive de constellations,
   scintillement au drop-shadow) ont été retirées : elles animaient en boucle
   des couches fixes plein écran, sur toutes les pages. Les décors qu'elles
   déplaçaient sont conservés, immobiles. */
html {
    background:
        radial-gradient(circle at 8% 18%, rgba(246,240,223,0.95) 0 1px, transparent 1.7px),
        radial-gradient(circle at 24% 72%, rgba(52,211,189,0.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 82% 26%, rgba(157,140,255,0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 86%, rgba(243,179,77,0.68) 0 1px, transparent 2px),
        linear-gradient(90deg, rgba(246,240,223,0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(52,211,189,0.18), transparent 30%),
        radial-gradient(circle at 78% 6%, rgba(157,140,255,0.15), transparent 26%),
        linear-gradient(135deg, #080a0f 0%, #0c141d 48%, #120d1e 100%);
    background-size:
        191px 157px,
        263px 211px,
        337px 281px,
        421px 347px,
        34px 34px,
        34px 34px,
        auto,
        auto,
        auto;
}

body {
    background:
        radial-gradient(circle at 14% 22%, rgba(246,240,223,0.95) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 36% 18%, rgba(52,211,189,0.75) 0 0.9px, transparent 1.7px),
        radial-gradient(circle at 64% 42%, rgba(255,119,103,0.72) 0 0.8px, transparent 1.6px),
        radial-gradient(circle at 76% 78%, rgba(243,179,77,0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 46% 88%, rgba(157,140,255,0.72) 0 0.9px, transparent 1.7px),
        linear-gradient(120deg, transparent 0 18%, rgba(52,211,189,0.035) 18.12% 18.28%, transparent 18.42% 100%),
        linear-gradient(34deg, transparent 0 63%, rgba(246,240,223,0.035) 63.08% 63.18%, transparent 63.32% 100%);
    background-size:
        143px 181px,
        229px 173px,
        311px 257px,
        419px 331px,
        547px 389px,
        620px 620px,
        760px 760px;
}

body::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(52,211,189,0.95) 0 1.5px, transparent 2.8px),
        radial-gradient(circle at 22% 28%, rgba(246,240,223,0.55) 0 1px, transparent 2px),
        linear-gradient(27deg, transparent 0 28.8%, rgba(52,211,189,0.24) 28.92% 29.02%, transparent 29.14%),
        radial-gradient(circle at 66% 18%, rgba(243,179,77,0.9) 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 70% 23%, rgba(246,240,223,0.50) 0 0.9px, transparent 2px),
        linear-gradient(148deg, transparent 0 55.3%, rgba(243,179,77,0.18) 55.42% 55.52%, transparent 55.66%),
        radial-gradient(circle at 78% 70%, rgba(157,140,255,0.88) 0 1.3px, transparent 2.5px),
        radial-gradient(circle at 74% 75%, rgba(246,240,223,0.50) 0 0.9px, transparent 1.9px),
        linear-gradient(84deg, transparent 0 76.4%, rgba(157,140,255,0.18) 76.54% 76.64%, transparent 76.78%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 11% 62%, rgba(52,211,189,0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 33%, rgba(243,179,77,0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 14%, rgba(246,240,223,0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 89% 38%, rgba(157,140,255,0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 88%, rgba(255,119,103,0.88) 0 1px, transparent 2px),
        radial-gradient(circle at 39% 78%, rgba(246,240,223,0.72) 0 1px, transparent 2px);
    background-size: 100% 100%;
}

.home-console,
.chart-wheel-wrap {
    isolation: isolate;
}

.home-console::before,
.chart-wheel-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 13% 24%, rgba(246,240,223,0.6) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 18%, rgba(52,211,189,0.65) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 76%, rgba(243,179,77,0.55) 0 1px, transparent 2px);
}


/* ASTROLOGIX_TYPE_SCALE_FIX */
h1 {
    font-size: clamp(2.15rem, 5.6vw, 5.35rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.28rem, 1.65vw, 1.75rem);
    line-height: 1.14;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.tool-hero {
    min-height: 240px;
    padding-top: 58px;
}

.home-hero__copy h1 {
    font-size: clamp(3rem, 8.4vw, 6.9rem);
    line-height: 0.9;
    max-width: 780px;
}

.home-claim {
    font-size: clamp(1.02rem, 1.45vw, 1.32rem);
    line-height: 1.52;
}

.home-command strong {
    font-size: clamp(1.03rem, 1.45vw, 1.28rem);
    line-height: 1.13;
}

.home-split h2,
.home-proof h2 {
    font-size: clamp(1.45rem, 2.7vw, 2.65rem);
    line-height: 1.04;
}

.tool-panel h2,
.score-card h2,
.report-reading h3,
.interpretation-card h3 {
    line-height: 1.18;
}

.section-heading {
    align-items: flex-start;
}

@media (max-width: 1080px) {
    h1 {
        font-size: clamp(2rem, 10.5vw, 3.9rem);
        line-height: 1.02;
    }

    .home-hero__copy h1 {
        font-size: clamp(2.85rem, 15vw, 4.9rem);
        line-height: 0.94;
    }

    .home-split h2,
    .home-proof h2 {
        font-size: clamp(1.35rem, 7vw, 2.15rem);
        line-height: 1.08;
    }
}

@media (max-width: 560px) {
    h1,
    .home-hero__copy h1 {
        font-size: clamp(2.35rem, 13vw, 3.55rem);
        line-height: 1;
    }

    h2,
    .home-split h2,
    .home-proof h2 {
        font-size: clamp(1.22rem, 6vw, 1.75rem);
        line-height: 1.12;
    }

    .tool-hero {
        min-height: 190px;
        padding-top: 36px;
    }

    .home-command {
        min-height: 132px;
    }
}


/* ASTROLOGIX_H1_FINAL_SCALE */
h1 {
    font-size: clamp(1.95rem, 4.8vw, 4.55rem);
    line-height: 1.02;
}

.home-hero__copy h1 {
    font-size: clamp(2.55rem, 7vw, 5.55rem);
    line-height: 0.96;
}

@media (max-width: 1080px) {
    h1 {
        font-size: clamp(1.85rem, 8.8vw, 3.25rem);
        line-height: 1.04;
    }

    .home-hero__copy h1 {
        font-size: clamp(2.35rem, 12vw, 4.05rem);
        line-height: 1;
    }
}

@media (max-width: 560px) {
    h1,
    .home-hero__copy h1 {
        font-size: clamp(2rem, 10.5vw, 3rem);
        line-height: 1.04;
    }
}


/* ASTROLOGIX_INTERNAL_PAGES_POLISH */
main {
    overflow-x: clip;
}

.site-header {
    align-items: flex-start;
    gap: 16px;
}

.site-header nav {
    max-width: 920px;
}

.tool-hero {
    min-height: 220px;
    padding-bottom: 26px;
}

.tool-hero .lede {
    max-width: 780px;
}

.tool-grid,
.synastry-grid,
.field-grid,
.score-grid,
.dominant-grid,
.interpretation-grid,
.report-summary-grid,
.report-angle-facts {
    min-width: 0;
}

.tool-panel,
.profile-fieldset,
.score-card,
.interpretation-card,
.report-reading,
.result-facts div {
    min-width: 0;
}

.tool-panel > *:last-child,
.profile-fieldset > *:last-child,
.content-band > *:last-child {
    margin-bottom: 0;
}

.form-stack {
    gap: 18px;
}

label,
.profile-fieldset legend {
    color: var(--ink);
}

.profile-fieldset legend {
    max-width: 100%;
    border: 1px solid rgba(246, 240, 223, 0.28);
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(52, 211, 189, 0.12);
    line-height: 1.1;
}

input,
select,
textarea {
    min-width: 0;
    min-height: 48px;
    color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
    color: rgba(246, 240, 223, 0.48);
}

button,
.secondary-action {
    max-width: 100%;
    text-align: center;
    line-height: 1.15;
}

.form-stack button {
    width: fit-content;
    min-width: min(100%, 210px);
}

.manual-coordinates {
    border-color: rgba(246, 240, 223, 0.28);
    background: rgba(246, 240, 223, 0.055);
}

.manual-coordinates summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--accent-dark);
}

.manual-coordinates summary::after {
    content: '+';
    display: grid;
    width: 24px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 900;
}

.manual-coordinates[open] summary::after {
    content: '-';
}

.result-panel {
    align-self: stretch;
}

.content-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.content-list li {
    position: relative;
    padding: 10px 12px 10px 34px;
    border: 1px solid rgba(246, 240, 223, 0.18);
    border-radius: 8px;
    background: rgba(246, 240, 223, 0.045);
    line-height: 1.45;
}

.content-list li::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 14px;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(52, 211, 189, 0.72);
}

.table-wrap {
    max-width: 100%;
    scrollbar-color: var(--accent) rgba(246, 240, 223, 0.08);
}

table {
    min-width: min(680px, 100vw);
}

.chart-wheel-wrap {
    max-width: 100%;
}

.chart-wheel {
    max-width: min(100%, 560px);
}

.chart-wheel-panel {
    max-width: min(100%, 560px);
}

.breadcrumb {
    overflow: hidden;
}

.breadcrumb ol {
    min-width: 0;
}

.breadcrumb li {
    min-width: 0;
}

.breadcrumb a,
.breadcrumb span {
    overflow-wrap: anywhere;
}

.report-actions,
.action-row {
    align-items: stretch;
}

.action-row .secondary-action,
.report-actions .secondary-action {
    margin-top: 0;
}

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

    .site-header nav {
        justify-content: flex-start;
        max-width: none;
    }

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

    .synastry-form-band .tool-panel {
        padding: 16px;
    }
}

@media (max-width: 760px) {
    .site-header nav a {
        min-height: 32px;
        padding-inline: 9px;
        font-size: 0.82rem;
    }

    .breadcrumb {
        border-radius: 8px;
    }

    .breadcrumb ol {
        display: grid;
        gap: 5px;
    }

    .breadcrumb li:not(:last-child)::after {
        content: none;
    }

    .tool-hero {
        min-height: auto;
        padding-top: 32px;
        padding-bottom: 18px;
    }

    .form-stack button,
    .secondary-action,
    button {
        width: 100%;
    }

    .profile-fieldset {
        padding: 14px;
    }

    .field-grid {
        gap: 14px;
    }

    .content-list li {
        padding-right: 10px;
    }
}

@media (max-width: 460px) {
    .site-header,
    .site-footer,
    .tool-hero,
    .tool-grid,
    .content-band,
    .breadcrumb,
    .home-hero,
    .home-flow,
    .home-split,
    .home-proof {
        width: min(100% - 18px, 1180px);
    }

    .tool-panel,
    .profile-fieldset,
    .score-card {
        padding: 14px;
    }

    .site-header nav {
        gap: 4px;
    }

    .site-header nav a {
        font-size: 0.78rem;
    }
}


/* ASTROLOGIX_NO_HOVER_SHIFT */
button,
.secondary-action,
.tool-panel,
.score-card,
.home-command,
.home-link-stack a,
.tool-link-grid a,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-wrap,
.home-console {
    transition-property: box-shadow, border-color, background-color, color, opacity;
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible,
.tool-panel:hover,
.score-card:hover,
.home-command:hover,
.home-link-stack a:hover,
.tool-link-grid a:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.home-console:hover {
    transform: none !important;
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.home-console:hover {
    border-color: rgba(246, 240, 223, 0.52);
    box-shadow: var(--shadow-soft);
}

form.tool-panel:hover,
.result-panel:hover {
    box-shadow: var(--shadow-hard);
}

.home-command:hover,
.home-link-stack a:hover,
.tool-link-grid a:hover {
    border-color: var(--accent);
    box-shadow: 7px 7px 0 rgba(52, 211, 189, 0.34);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 4px 4px 0 var(--solar);
}

.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    box-shadow: 4px 4px 0 rgba(157, 140, 255, 0.72);
}


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

.tool-category-grid--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-category,
.tool-feature-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
    box-shadow: 3px 3px 0 rgba(17,18,15,0.92);
}

.tool-category h3,
.tool-feature-card strong {
    display: block;
    margin: 0 0 8px;
    font-size: 1.04rem;
    line-height: 1.2;
}

.tool-category p,
.tool-feature-card small {
    display: block;
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.55;
}

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

.tool-category .tool-link-grid a {
    min-height: 44px;
    justify-content: flex-start;
    font-size: 0.9rem;
    text-align: left;
}

.tool-feature-card {
    color: var(--ink);
    text-decoration: none;
}

.tool-feature-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .tool-category-grid,
    .tool-category-grid--featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tool-category .tool-link-grid {
        grid-template-columns: 1fr;
    }
}

.tool-category-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-category-grid--compact .tool-feature-card {
    min-height: 132px;
}

@media (max-width: 1080px) {
    .tool-category-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .tool-category-grid--compact {
        grid-template-columns: 1fr;
    }
}

.seo-depth-section .section-heading {
    align-items: end;
}

.related-tool-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.faq-card h3 {
    margin-bottom: 8px;
}

.faq-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.65;
}

@media (max-width: 760px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ASTROLOGIX_MYSTIC_POLISH */
:root {
    --mystic-ink: #100f1b;
    --mystic-night: #171528;
    --mystic-indigo: #2f2a62;
    --mystic-violet: #6b5bd6;
    --mystic-gold: #c8953d;
    --mystic-rose: #b75f68;
    --mystic-teal: #0b746c;
    --mystic-line: rgba(31, 27, 56, 0.22);
    --mystic-glow: 0 20px 70px rgba(47, 42, 98, 0.16);
    --mystic-card: rgba(255, 252, 243, 0.9);
}

html {
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at 18% 12%, rgba(200, 149, 61, 0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(107, 91, 214, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 78%, rgba(11, 116, 108, 0.16) 0 1px, transparent 2px),
        linear-gradient(135deg, #fff8e9 0%, #eef7f4 40%, #f4edf5 100%);
    background-size: 116px 116px, 174px 174px, 142px 142px, auto;
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 20%, rgba(200, 149, 61, 0.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 56% 68%, rgba(107, 91, 214, 0.18) 0 1px, transparent 1.5px),
        linear-gradient(180deg, rgba(255, 252, 243, 0.45), rgba(243, 238, 230, 0.2));
    background-size: 88px 88px, 132px 132px, 160px 160px, auto;
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 63%, rgba(47, 42, 98, 0.12) 63% 63.18%, transparent 63.18%),
        linear-gradient(24deg, transparent 0 74%, rgba(200, 149, 61, 0.14) 74% 74.18%, transparent 74.18%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5), transparent 42%);
    opacity: 0.95;
}

body::after {
    content: "";
    position: fixed;
    inset: -18% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, rgba(107, 91, 214, 0.13), transparent 18%),
        radial-gradient(circle at 84% 14%, rgba(200, 149, 61, 0.16), transparent 16%),
        radial-gradient(circle at 78% 78%, rgba(11, 116, 108, 0.12), transparent 18%);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: min(1180px, calc(100% - 32px));
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(31, 27, 56, 0.18);
    border-radius: 8px;
    background: rgba(255, 252, 243, 0.82);
    box-shadow: 0 18px 48px rgba(31, 27, 56, 0.12);
    backdrop-filter: blur(18px);
}

.brand {
    position: relative;
    color: var(--mystic-ink);
    letter-spacing: 0;
}

.brand::before {
    content: "☉";
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border: 1px solid rgba(200, 149, 61, 0.75);
    border-radius: 50%;
    color: var(--mystic-gold);
    font-size: 0.9rem;
    box-shadow: 0 0 22px rgba(200, 149, 61, 0.28);
    vertical-align: middle;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: flex-end;
}

.site-header nav a {
    position: relative;
    padding: 6px 0;
    color: rgba(16, 15, 27, 0.72);
    transition: color 180ms ease, text-shadow 180ms ease;
}

.site-header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mystic-gold), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 180ms ease, transform 180ms ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: var(--mystic-ink);
    text-shadow: 0 0 18px rgba(200, 149, 61, 0.34);
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.tool-hero {
    position: relative;
    width: min(1180px, calc(100% - 32px));
    margin-top: 28px;
    margin-bottom: 22px;
    padding: clamp(52px, 8vw, 92px) clamp(18px, 4vw, 42px) clamp(34px, 5vw, 58px);
    border: 1px solid rgba(31, 27, 56, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 252, 243, 0.92), rgba(247, 239, 226, 0.74)),
        radial-gradient(circle at 76% 20%, rgba(107, 91, 214, 0.26), transparent 32%),
        radial-gradient(circle at 18% 72%, rgba(200, 149, 61, 0.24), transparent 30%);
    box-shadow: var(--mystic-glow), 9px 9px 0 rgba(16, 15, 27, 0.9);
}

.tool-hero::before {
    content: "✦";
    position: absolute;
    right: clamp(18px, 5vw, 62px);
    top: clamp(16px, 4vw, 46px);
    color: rgba(200, 149, 61, 0.72);
    font-size: clamp(2.4rem, 8vw, 7rem);
    line-height: 1;
    text-shadow: 0 0 34px rgba(200, 149, 61, 0.4);
    animation: star-pulse 4.8s ease-in-out infinite;
}

.tool-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: -84px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(47, 42, 98, 0.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 28px rgba(255, 252, 243, 0.26), inset 0 0 0 29px rgba(200, 149, 61, 0.18);
    opacity: 0.9;
    animation: slow-orbit 22s linear infinite;
}

.tool-hero > div,
.tool-hero .lede,
.tool-hero h1 {
    position: relative;
    z-index: 1;
}

h1 {
    max-width: 880px;
    line-height: 0.96;
    color: var(--mystic-ink);
    text-wrap: balance;
}

h2,
.interpretation-card h3,
.tool-category h3,
.tool-feature-card strong {
    color: var(--mystic-ink);
    text-wrap: balance;
}

.lede {
    max-width: 820px;
    color: rgba(16, 15, 27, 0.7);
}

.eyebrow {
    color: var(--mystic-teal);
}

.tool-grid,
.content-band {
    width: min(1180px, calc(100% - 32px));
}

.tool-grid {
    gap: 28px;
    padding-bottom: 56px;
}

.content-band {
    padding-top: 46px;
    padding-bottom: 74px;
    border-top-color: rgba(31, 27, 56, 0.13);
}

.data-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates {
    position: relative;
    border-color: rgba(31, 27, 56, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 252, 243, 0.94), rgba(250, 245, 235, 0.88));
    box-shadow: 0 18px 44px rgba(31, 27, 56, 0.1), 4px 4px 0 rgba(16, 15, 27, 0.86);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}

.tool-panel::before,
.tool-category::before,
.tool-feature-card::before,
.score-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(200, 149, 61, 0.16), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(107, 91, 214, 0.16), transparent 24%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover {
    border-color: rgba(200, 149, 61, 0.54);
    box-shadow: 0 24px 60px rgba(31, 27, 56, 0.16), 6px 6px 0 rgba(16, 15, 27, 0.92);
}

.tool-panel:hover::before,
.tool-category:hover::before,
.tool-feature-card:hover::before,
.score-card:hover::before {
    opacity: 1;
}

.interpretation-grid,
.tool-category-grid,
.dominant-grid,
.score-grid,
.faq-grid {
    gap: 22px;
}

.tool-link-grid {
    gap: 14px;
}

.tool-link-grid a,
.secondary-action,
button,
.tool-feature-card {
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease, color 200ms ease;
}

.tool-link-grid a {
    position: relative;
    overflow: hidden;
    border-color: rgba(31, 27, 56, 0.17);
    background: rgba(255, 252, 243, 0.9);
}

.tool-link-grid a::before {
    content: "";
    position: absolute;
    inset: auto 12px 8px 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 149, 61, 0.9), transparent);
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 200ms ease, transform 200ms ease;
}

.tool-link-grid a:hover,
.tool-link-grid a:focus-visible {
    color: var(--mystic-ink);
    border-color: rgba(107, 91, 214, 0.48);
    background: rgba(255, 252, 243, 0.98);
    box-shadow: 0 14px 34px rgba(47, 42, 98, 0.13), 5px 5px 0 rgba(200, 149, 61, 0.4);
}

.tool-link-grid a:hover::before,
.tool-link-grid a:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

button,
.secondary-action {
    background: linear-gradient(135deg, var(--mystic-teal), #155b83);
    box-shadow: 4px 4px 0 rgba(16, 15, 27, 0.9);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 16px 34px rgba(11, 116, 108, 0.2), 6px 6px 0 var(--mystic-gold);
}

.secondary-action--light {
    background: rgba(255, 252, 243, 0.9);
    color: var(--mystic-ink);
}

input {
    background: rgba(255, 252, 243, 0.9);
    border-color: rgba(31, 27, 56, 0.2);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

input:focus {
    outline: none;
    border-color: rgba(107, 91, 214, 0.64);
    background: #fffdf7;
    box-shadow: 0 0 0 4px rgba(107, 91, 214, 0.12), 0 0 28px rgba(200, 149, 61, 0.13);
}

.breadcrumb {
    margin-top: 26px;
}

.breadcrumb li:not(:last-child)::after {
    content: "✧";
    color: rgba(200, 149, 61, 0.78);
}

.chart-wheel {
    filter: drop-shadow(0 18px 38px rgba(47, 42, 98, 0.15));
}

.wheel-ring--outer {
    fill: rgba(255, 252, 243, 0.9);
    stroke: rgba(200, 149, 61, 0.78);
}

.wheel-sign,
.planet-label {
    filter: drop-shadow(0 0 8px rgba(200, 149, 61, 0.22));
}

.site-footer {
    margin-top: 24px;
    padding-top: 34px;
    padding-bottom: 48px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-footer a {
    color: var(--mystic-teal);
    font-weight: 800;
    text-decoration: none;
}

@keyframes star-pulse {
    0%, 100% { opacity: 0.72; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

@keyframes slow-orbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 980px) {
    .site-header {
        align-items: flex-start;
        gap: 14px;
    }

    .site-header nav {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .site-header {
        display: grid;
        position: relative;
        margin-top: 0;
        border-radius: 0 0 8px 8px;
    }

    .tool-hero {
        margin-top: 18px;
        padding: 42px 18px 34px;
        box-shadow: var(--mystic-glow), 5px 5px 0 rgba(16, 15, 27, 0.9);
    }

    .tool-hero::before {
        font-size: 3.2rem;
        opacity: 0.28;
    }

    .tool-hero::after {
        width: 180px;
        height: 180px;
    }

    .content-band {
        padding-top: 38px;
        padding-bottom: 56px;
    }
}

/* ASTROLOGIX_DARK_MYSTIC_THEME */
:root {
    color-scheme: dark;
    --bg: #090812;
    --bg-2: #111827;
    --surface: rgba(18, 17, 32, 0.9);
    --surface-strong: #171529;
    --surface-muted: #211f34;
    --ink: #f7f1df;
    --muted: #c7bdad;
    --line: #efe1b7;
    --line-soft: rgba(239, 225, 183, 0.18);
    --border: var(--line-soft);
    --accent: #49c6b6;
    --accent-dark: #9ee8dc;
    --solar: #e5b35b;
    --coral: #e66f68;
    --violet: #9d8cff;
    --danger: #ff8b8b;
    --shadow-hard: 6px 6px 0 rgba(239, 225, 183, 0.18);
    --shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.38);
    --mystic-ink: #fff6dd;
    --mystic-night: #090812;
    --mystic-indigo: #17152c;
    --mystic-violet: #a99bff;
    --mystic-gold: #e5b35b;
    --mystic-rose: #f08a92;
    --mystic-teal: #65d9ca;
    --mystic-line: rgba(239, 225, 183, 0.2);
    --mystic-glow: 0 24px 90px rgba(157, 140, 255, 0.18);
    --mystic-card: rgba(18, 17, 32, 0.9);
}

html {
    background:
        radial-gradient(circle at 16% 12%, rgba(229, 179, 91, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 18%, rgba(157, 140, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 82%, rgba(73, 198, 182, 0.14) 0 1px, transparent 2px),
        linear-gradient(135deg, #07060d 0%, #111024 44%, #0b1820 100%);
    background-size: 120px 120px, 178px 178px, 148px 148px, auto;
    color: var(--ink);
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 18%, rgba(229, 179, 91, 0.13), transparent 22%),
        radial-gradient(circle at 84% 12%, rgba(157, 140, 255, 0.16), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(73, 198, 182, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.96), rgba(12, 13, 28, 0.98));
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 63%, rgba(229, 179, 91, 0.14) 63% 63.18%, transparent 63.18%),
        linear-gradient(24deg, transparent 0 74%, rgba(157, 140, 255, 0.16) 74% 74.18%, transparent 74.18%),
        radial-gradient(circle at 50% 0%, rgba(157, 140, 255, 0.14), transparent 44%);
    opacity: 0.86;
}

body::after {
    background:
        radial-gradient(circle at 18% 28%, rgba(157, 140, 255, 0.16), transparent 18%),
        radial-gradient(circle at 84% 14%, rgba(229, 179, 91, 0.16), transparent 16%),
        radial-gradient(circle at 78% 78%, rgba(73, 198, 182, 0.13), transparent 18%);
    filter: blur(6px);
}

.site-header {
    border-color: rgba(239, 225, 183, 0.18);
    background: rgba(13, 12, 25, 0.78);
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.48);
}

.brand,
.site-header a,
.secondary-action,
.breadcrumb span,
h1,
h2,
.interpretation-card h3,
.tool-category h3,
.tool-feature-card strong,
dd,
.chart-wheel-panel {
    color: var(--ink);
}

.site-header nav a,
.breadcrumb,
.breadcrumb a,
.lede,
.content-band p,
.hint,
.status,
.site-footer,
.result-degree,
dt,
.tool-category p,
.tool-feature-card small,
.faq-card p,
.angular-row small,
.report-toc-list {
    color: var(--muted);
}

.tool-hero {
    border-color: rgba(239, 225, 183, 0.18);
    background:
        linear-gradient(135deg, rgba(18, 17, 32, 0.94), rgba(10, 18, 26, 0.82)),
        radial-gradient(circle at 76% 20%, rgba(157, 140, 255, 0.22), transparent 32%),
        radial-gradient(circle at 18% 72%, rgba(229, 179, 91, 0.18), transparent 30%);
    box-shadow: var(--mystic-glow), 8px 8px 0 rgba(229, 179, 91, 0.22);
}

.tool-hero::after {
    border-color: rgba(229, 179, 91, 0.22);
    box-shadow: inset 0 0 0 28px rgba(157, 140, 255, 0.08), inset 0 0 0 29px rgba(229, 179, 91, 0.24);
}

.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates {
    border-color: rgba(239, 225, 183, 0.16);
    background:
        linear-gradient(180deg, rgba(23, 21, 41, 0.94), rgba(15, 18, 31, 0.9));
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.34), 4px 4px 0 rgba(229, 179, 91, 0.16);
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover {
    border-color: rgba(229, 179, 91, 0.56);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), 6px 6px 0 rgba(229, 179, 91, 0.28);
}

input,
textarea,
select {
    background: rgba(8, 9, 18, 0.78);
    border-color: rgba(239, 225, 183, 0.2);
    color: var(--ink);
}

input::placeholder,
textarea::placeholder {
    color: rgba(199, 189, 173, 0.66);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(157, 140, 255, 0.72);
    background: rgba(12, 13, 27, 0.96);
    box-shadow: 0 0 0 4px rgba(157, 140, 255, 0.16), 0 0 32px rgba(229, 179, 91, 0.12);
}

.tool-link-grid a,
.secondary-action--light,
.table-wrap,
.report-callout,
.score-bar {
    background: rgba(18, 17, 32, 0.88);
    color: var(--ink);
    border-color: rgba(239, 225, 183, 0.16);
}

.tool-link-grid a:hover,
.tool-link-grid a:focus-visible,
.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    border-color: rgba(229, 179, 91, 0.54);
    background: rgba(27, 24, 45, 0.98);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 5px 5px 0 rgba(229, 179, 91, 0.28);
}

button,
.secondary-action {
    background: linear-gradient(135deg, #167c73, #4b3fb5);
    color: #fff8e6;
    box-shadow: 4px 4px 0 rgba(229, 179, 91, 0.28);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 18px 42px rgba(73, 198, 182, 0.18), 6px 6px 0 rgba(229, 179, 91, 0.44);
}

th,
td,
.angular-row,
.save-chart-form,
.content-band,
.site-footer,
.breadcrumb li:not(:last-child)::after {
    border-color: rgba(239, 225, 183, 0.15);
}

.wheel-ring {
    fill: rgba(18, 17, 32, 0.88);
    stroke: rgba(239, 225, 183, 0.22);
}

.wheel-ring--outer {
    fill: rgba(11, 10, 21, 0.95);
    stroke: rgba(229, 179, 91, 0.7);
}

.wheel-sign,
.house-label,
.planet-label,
.planet-dot {
    fill: var(--ink);
}

.planet-dot {
    stroke: #090812;
}

.planet-marker {
    stroke: rgba(239, 225, 183, 0.35);
}

.house-line {
    stroke: rgba(239, 225, 183, 0.36);
}

.house-line--angle {
    stroke: var(--mystic-teal);
}

.site-footer a,
.table-action,
.tool-feature-card span,
.eyebrow {
    color: var(--mystic-teal);
}

.form-success {
    color: var(--mystic-teal);
}

.form-error {
    color: var(--danger);
}

@media print {
    :root {
        color-scheme: light;
        --bg: #ffffff;
        --surface: #ffffff;
        --ink: #111111;
        --muted: #333333;
        --line: #cfcfcf;
        --accent: #111111;
        --accent-dark: #111111;
    }
}

/* ASTROLOGIX_DARK_ASTRAL_MOTION */
html {
    background:
        radial-gradient(circle at 9% 16%, rgba(229, 179, 91, 0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 68%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 12%, rgba(157, 140, 255, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 42%, rgba(101, 217, 202, 0.64) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 86%, rgba(255, 246, 221, 0.54) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 24%, rgba(229, 179, 91, 0.18), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(157, 140, 255, 0.18), transparent 22%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: 132px 132px, 190px 190px, 156px 156px, 214px 214px, 172px 172px, auto, auto, auto;
    animation: astral-sky-drift 46s linear infinite;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(229, 179, 91, 0.12), transparent 24%),
        radial-gradient(circle at 80% 10%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 72% 84%, rgba(101, 217, 202, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.96), rgba(12, 13, 28, 0.99));
}

body::before {
    background:
        linear-gradient(118deg, transparent 0 58%, rgba(229, 179, 91, 0.22) 58% 58.08%, transparent 58.08%),
        linear-gradient(31deg, transparent 0 68%, rgba(157, 140, 255, 0.2) 68% 68.08%, transparent 68.08%),
        linear-gradient(151deg, transparent 0 74%, rgba(101, 217, 202, 0.16) 74% 74.08%, transparent 74.08%),
        radial-gradient(circle at 28% 32%, transparent 0 86px, rgba(229, 179, 91, 0.18) 87px 88px, transparent 89px),
        radial-gradient(circle at 76% 20%, transparent 0 122px, rgba(157, 140, 255, 0.16) 123px 124px, transparent 125px),
        radial-gradient(circle at 62% 78%, transparent 0 94px, rgba(101, 217, 202, 0.12) 95px 96px, transparent 97px);
    opacity: 0.88;
    transform-origin: 50% 50%;
    animation: astral-axis-drift 38s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 13% 24%, rgba(229, 179, 91, 0.88) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 18%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 64%, rgba(157, 140, 255, 0.82) 0 2px, transparent 3px),
        radial-gradient(circle at 69% 34%, rgba(101, 217, 202, 0.74) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 72%, rgba(229, 179, 91, 0.68) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 78%, rgba(157, 140, 255, 0.12), transparent 16%),
        radial-gradient(circle at 86% 18%, rgba(229, 179, 91, 0.13), transparent 16%),
        radial-gradient(circle at 76% 82%, rgba(101, 217, 202, 0.11), transparent 18%);
    background-size: 260px 260px, 310px 310px, 360px 360px, 290px 290px, 420px 420px, auto, auto, auto;
    filter: blur(0.2px);
    opacity: 0.82;
    animation: astral-points-drift 32s ease-in-out infinite alternate, astral-twinkle 5.5s ease-in-out infinite;
}

.site-header,
.tool-hero,
.breadcrumb,
.tool-grid,
.content-band,
.data-section,
.tool-panel,
.tool-category,
.tool-feature-card,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-panel,
.faq-card {
    animation: astral-reveal 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.site-header {
    animation-delay: 40ms;
}

.tool-hero {
    animation-delay: 90ms;
}

.breadcrumb,
.tool-grid,
.content-band,
.data-section {
    animation-delay: 150ms;
}

.tool-panel:nth-child(2n),
.tool-category:nth-child(2n),
.tool-feature-card:nth-child(2n),
.score-card:nth-child(2n),
.faq-card:nth-child(2n) {
    animation-delay: 210ms;
}

.tool-panel:nth-child(3n),
.tool-category:nth-child(3n),
.tool-feature-card:nth-child(3n),
.score-card:nth-child(3n),
.faq-card:nth-child(3n) {
    animation-delay: 290ms;
}

.tool-hero::before {
    content: "✦";
    color: rgba(229, 179, 91, 0.82);
    text-shadow: 0 0 22px rgba(229, 179, 91, 0.58), 0 0 52px rgba(157, 140, 255, 0.32);
    animation: astral-star-breathe 4.8s ease-in-out infinite;
}

.tool-hero::after {
    animation: slow-orbit 24s linear infinite;
}

.tool-panel,
.tool-category,
.tool-feature-card,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-panel {
    backdrop-filter: blur(16px);
}

@keyframes astral-sky-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center, center, center; }
    100% { background-position: 132px 132px, -190px 190px, 156px -156px, -214px -214px, 172px 86px, center, center, center; }
}

@keyframes astral-axis-drift {
    0% { transform: translate3d(-1.2%, -0.8%, 0) rotate(-0.6deg) scale(1.01); }
    100% { transform: translate3d(1.2%, 0.8%, 0) rotate(0.8deg) scale(1.04); }
}

@keyframes astral-points-drift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(1.8%, -1.2%, 0) rotate(1.2deg); }
}

@keyframes astral-twinkle {
    0%, 100% { opacity: 0.62; }
    45% { opacity: 0.9; }
    70% { opacity: 0.74; }
}

@keyframes astral-reveal {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes astral-star-breathe {
    0%, 100% { opacity: 0.58; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body::before,
    body::after,
    .site-header,
    .tool-hero,
    .breadcrumb,
    .tool-grid,
    .content-band,
    .data-section,
    .tool-panel,
    .tool-category,
    .tool-feature-card,
    .score-card,
    .profile-fieldset,
    .table-wrap,
    .result-facts div,
    .chart-wheel-panel,
    .faq-card,
    .tool-hero::before,
    .tool-hero::after {
        animation: none !important;
    }
}

/* ASTROLOGIX_NO_HOVER_LIFT_AND_BODY_ASTRALS */
*:hover,
*:focus-visible {
    transform: none !important;
}

body {
    background:
        radial-gradient(circle at 8% 18%, rgba(229, 179, 91, 0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 76%, rgba(255, 246, 221, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 28%, rgba(157, 140, 255, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 82%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 22%, rgba(229, 179, 91, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 14% 34%, rgba(229, 179, 91, 0.16), transparent 18%),
        radial-gradient(circle at 82% 16%, rgba(157, 140, 255, 0.18), transparent 24%),
        radial-gradient(circle at 74% 86%, rgba(101, 217, 202, 0.13), transparent 26%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: 180px 180px, 260px 260px, 220px 220px, 310px 310px, 370px 370px, auto, auto, auto, auto;
    animation: astral-body-starfield 54s linear infinite;
}

body::before {
    background:
        radial-gradient(circle at 22% 28%, transparent 0 74px, rgba(229, 179, 91, 0.2) 75px 76px, transparent 77px),
        radial-gradient(circle at 78% 22%, transparent 0 116px, rgba(157, 140, 255, 0.18) 117px 118px, transparent 119px),
        radial-gradient(circle at 58% 76%, transparent 0 88px, rgba(101, 217, 202, 0.14) 89px 90px, transparent 91px),
        linear-gradient(118deg, transparent 0 58%, rgba(229, 179, 91, 0.2) 58% 58.08%, transparent 58.08%),
        linear-gradient(31deg, transparent 0 68%, rgba(157, 140, 255, 0.19) 68% 68.08%, transparent 68.08%),
        linear-gradient(151deg, transparent 0 74%, rgba(101, 217, 202, 0.14) 74% 74.08%, transparent 74.08%);
    animation: astral-body-axes 42s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 14% 24%, rgba(229, 179, 91, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 18%, rgba(255, 246, 221, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 62%, rgba(157, 140, 255, 0.86) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 34%, rgba(101, 217, 202, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 74%, rgba(229, 179, 91, 0.74) 0 2px, transparent 3px),
        radial-gradient(circle at 10% 72%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.06) 0.75rem 1.4rem, transparent 1.45rem),
        radial-gradient(circle at 84% 28%, rgba(157, 140, 255, 0.2) 0 0.95rem, rgba(157, 140, 255, 0.07) 1rem 1.9rem, transparent 1.95rem),
        radial-gradient(circle at 68% 86%, rgba(101, 217, 202, 0.16) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.6rem, transparent 1.65rem);
    background-size: 240px 240px, 318px 318px, 380px 380px, 292px 292px, 440px 440px, auto, auto, auto;
    animation: astral-body-points 34s ease-in-out infinite alternate, astral-body-twinkle 4.8s ease-in-out infinite;
}

@keyframes astral-body-starfield {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center, center, center, center; }
    100% { background-position: 180px 180px, -260px 260px, 220px -220px, -310px -310px, 370px 185px, center, center, center, center; }
}

@keyframes astral-body-axes {
    0% { transform: rotate(-0.8deg) scale(1.02); opacity: 0.72; }
    100% { transform: rotate(0.9deg) scale(1.05); opacity: 0.92; }
}

@keyframes astral-body-points {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1.4deg); }
}

@keyframes astral-body-twinkle {
    0%, 100% { opacity: 0.6; }
    45% { opacity: 0.9; }
    68% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    body,
    body::before,
    body::after {
        animation: none !important;
    }
}

/* ASTROLOGIX_VARIED_NON_REPEATING_SKY */
html,
body,
body::before,
body::after {
    background-repeat: no-repeat !important;
}

html {
    background:
        radial-gradient(circle at 7% 13%, rgba(229, 179, 91, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 17% 41%, rgba(255, 246, 221, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 29% 22%, rgba(157, 140, 255, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 43% 71%, rgba(101, 217, 202, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 31%, rgba(255, 246, 221, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 58%, rgba(229, 179, 91, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 19%, rgba(157, 140, 255, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 84%, rgba(101, 217, 202, 0.54) 0 1px, transparent 2px),
        radial-gradient(circle at 13% 78%, rgba(229, 179, 91, 0.13), transparent 18%),
        radial-gradient(circle at 47% 18%, rgba(157, 140, 255, 0.12), transparent 20%),
        radial-gradient(circle at 82% 34%, rgba(101, 217, 202, 0.1), transparent 18%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: auto !important;
    animation: astral-deep-sky-shift 58s ease-in-out infinite alternate;
}

body {
    background:
        radial-gradient(circle at 6% 64%, rgba(255, 246, 221, 0.44) 0 1px, transparent 2px),
        radial-gradient(circle at 21% 17%, rgba(229, 179, 91, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 36% 86%, rgba(157, 140, 255, 0.52) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 49%, rgba(101, 217, 202, 0.46) 0 1px, transparent 2px),
        radial-gradient(circle at 69% 11%, rgba(255, 246, 221, 0.56) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 73%, rgba(229, 179, 91, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 94% 52%, rgba(157, 140, 255, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: auto !important;
    animation: astral-nebula-breathe 44s ease-in-out infinite alternate;
}

body::before {
    background:
        radial-gradient(circle at 19% 26%, transparent 0 67px, rgba(229, 179, 91, 0.18) 68px 69px, transparent 70px),
        radial-gradient(circle at 72% 18%, transparent 0 143px, rgba(157, 140, 255, 0.16) 144px 145px, transparent 146px),
        radial-gradient(circle at 54% 79%, transparent 0 91px, rgba(101, 217, 202, 0.13) 92px 93px, transparent 94px),
        radial-gradient(circle at 91% 66%, transparent 0 58px, rgba(229, 179, 91, 0.12) 59px 60px, transparent 61px),
        linear-gradient(113deg, transparent 0 57%, rgba(229, 179, 91, 0.17) 57% 57.06%, transparent 57.06%),
        linear-gradient(28deg, transparent 0 66%, rgba(157, 140, 255, 0.16) 66% 66.06%, transparent 66.06%),
        linear-gradient(154deg, transparent 0 75%, rgba(101, 217, 202, 0.12) 75% 75.06%, transparent 75.06%);
    background-size: auto !important;
    animation: astral-irregular-axes 48s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 11% 19%, rgba(229, 179, 91, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 16% 83%, rgba(255, 246, 221, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 56%, rgba(157, 140, 255, 0.76) 0 1.5px, transparent 3px),
        radial-gradient(circle at 39% 13%, rgba(101, 217, 202, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 92%, rgba(229, 179, 91, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 38%, rgba(255, 246, 221, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 69%, rgba(157, 140, 255, 0.82) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 25%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 89% 47%, rgba(229, 179, 91, 0.72) 0 1.5px, transparent 3px),
        radial-gradient(circle at 95% 88%, rgba(255, 246, 221, 0.52) 0 1px, transparent 2px),
        radial-gradient(circle at 9% 71%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.05) 0.75rem 1.45rem, transparent 1.5rem),
        radial-gradient(circle at 86% 29%, rgba(157, 140, 255, 0.19) 0 0.95rem, rgba(157, 140, 255, 0.06) 1rem 1.95rem, transparent 2rem),
        radial-gradient(circle at 64% 84%, rgba(101, 217, 202, 0.15) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.55rem, transparent 1.6rem);
    background-size: auto !important;
    animation: astral-irregular-stars 37s ease-in-out infinite alternate, astral-irregular-twinkle 5.2s ease-in-out infinite;
}

@keyframes astral-deep-sky-shift {
    0% { background-position: 0 0; }
    100% { background-position: 1.4vw -1.1vh; }
}

@keyframes astral-nebula-breathe {
    0% { background-position: 0 0; }
    100% { background-position: -1vw 1.6vh; }
}

@keyframes astral-irregular-axes {
    0% { transform: rotate(-0.55deg) scale(1.01); opacity: 0.72; }
    100% { transform: rotate(0.75deg) scale(1.045); opacity: 0.9; }
}

@keyframes astral-irregular-stars {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0.9deg) scale(1.02); }
}

@keyframes astral-irregular-twinkle {
    0%, 100% { opacity: 0.56; }
    38% { opacity: 0.88; }
    64% { opacity: 0.7; }
}

/* ASTROLOGIX_DENSE_STARFIELD */
html {
    background:
        radial-gradient(circle at 3% 9%, rgba(255, 246, 221, 0.78) 0 1px, transparent 1.7px),
        radial-gradient(circle at 6% 31%, rgba(229, 179, 91, 0.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 9% 67%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 13% 18%, rgba(101, 217, 202, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 16% 52%, rgba(255, 246, 221, 0.62) 0 1px, transparent 1.7px),
        radial-gradient(circle at 20% 84%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 24% 12%, rgba(157, 140, 255, 0.76) 0 1px, transparent 1.8px),
        radial-gradient(circle at 28% 43%, rgba(255, 246, 221, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 31% 73%, rgba(101, 217, 202, 0.62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 27%, rgba(229, 179, 91, 0.72) 0 1px, transparent 1.8px),
        radial-gradient(circle at 39% 91%, rgba(255, 246, 221, 0.54) 0 1px, transparent 1.7px),
        radial-gradient(circle at 43% 8%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 47% 62%, rgba(229, 179, 91, 0.62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 51% 34%, rgba(101, 217, 202, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 55% 79%, rgba(255, 246, 221, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 59% 16%, rgba(229, 179, 91, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 63% 49%, rgba(157, 140, 255, 0.74) 0 1px, transparent 1.8px),
        radial-gradient(circle at 67% 88%, rgba(101, 217, 202, 0.54) 0 1px, transparent 1.7px),
        radial-gradient(circle at 71% 24%, rgba(255, 246, 221, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 75% 56%, rgba(229, 179, 91, 0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 79% 6%, rgba(157, 140, 255, 0.6) 0 1px, transparent 1.7px),
        radial-gradient(circle at 83% 39%, rgba(255, 246, 221, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 87% 74%, rgba(101, 217, 202, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 21%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 95% 63%, rgba(157, 140, 255, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 97% 91%, rgba(255, 246, 221, 0.52) 0 1px, transparent 1.7px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: auto !important;
    animation: astral-dense-sky 62s ease-in-out infinite alternate;
}

body {
    background:
        radial-gradient(circle at 2% 46%, rgba(255, 246, 221, 0.46) 0 1px, transparent 1.8px),
        radial-gradient(circle at 5% 88%, rgba(157, 140, 255, 0.52) 0 1px, transparent 1.8px),
        radial-gradient(circle at 11% 11%, rgba(229, 179, 91, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 14% 72%, rgba(101, 217, 202, 0.48) 0 1px, transparent 1.7px),
        radial-gradient(circle at 19% 39%, rgba(255, 246, 221, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 23% 94%, rgba(229, 179, 91, 0.52) 0 1px, transparent 1.8px),
        radial-gradient(circle at 27% 63%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 33% 17%, rgba(101, 217, 202, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 37% 51%, rgba(229, 179, 91, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 42% 81%, rgba(255, 246, 221, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 46% 23%, rgba(157, 140, 255, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 53% 58%, rgba(101, 217, 202, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 58% 93%, rgba(229, 179, 91, 0.48) 0 1px, transparent 1.8px),
        radial-gradient(circle at 62% 29%, rgba(255, 246, 221, 0.62) 0 1px, transparent 1.7px),
        radial-gradient(circle at 69% 66%, rgba(157, 140, 255, 0.6) 0 1px, transparent 1.8px),
        radial-gradient(circle at 73% 8%, rgba(101, 217, 202, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 78% 47%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 82% 82%, rgba(255, 246, 221, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 88% 14%, rgba(157, 140, 255, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 92% 57%, rgba(101, 217, 202, 0.52) 0 1px, transparent 1.7px),
        radial-gradient(circle at 96% 33%, rgba(229, 179, 91, 0.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: auto !important;
    animation: astral-dense-nebula 48s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 4% 18%, rgba(229, 179, 91, 0.9) 0 1.5px, transparent 3px),
        radial-gradient(circle at 8% 58%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 12% 91%, rgba(157, 140, 255, 0.7) 0 1.5px, transparent 3px),
        radial-gradient(circle at 18% 26%, rgba(101, 217, 202, 0.66) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 67%, rgba(229, 179, 91, 0.74) 0 1.5px, transparent 3px),
        radial-gradient(circle at 29% 8%, rgba(255, 246, 221, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 34% 45%, rgba(157, 140, 255, 0.82) 0 1.5px, transparent 3px),
        radial-gradient(circle at 41% 87%, rgba(101, 217, 202, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 49% 19%, rgba(229, 179, 91, 0.68) 0 1.5px, transparent 3px),
        radial-gradient(circle at 56% 53%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 13%, rgba(157, 140, 255, 0.76) 0 1.5px, transparent 3px),
        radial-gradient(circle at 68% 79%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 36%, rgba(229, 179, 91, 0.86) 0 1.5px, transparent 3px),
        radial-gradient(circle at 81% 94%, rgba(255, 246, 221, 0.56) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 61%, rgba(157, 140, 255, 0.78) 0 1.5px, transparent 3px),
        radial-gradient(circle at 93% 24%, rgba(101, 217, 202, 0.64) 0 1px, transparent 2px),
        radial-gradient(circle at 97% 77%, rgba(229, 179, 91, 0.72) 0 1.5px, transparent 3px),
        radial-gradient(circle at 9% 71%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.05) 0.75rem 1.45rem, transparent 1.5rem),
        radial-gradient(circle at 86% 29%, rgba(157, 140, 255, 0.19) 0 0.95rem, rgba(157, 140, 255, 0.06) 1rem 1.95rem, transparent 2rem),
        radial-gradient(circle at 64% 84%, rgba(101, 217, 202, 0.15) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.55rem, transparent 1.6rem);
    background-size: auto !important;
    animation: astral-dense-star-glide 36s ease-in-out infinite alternate, astral-dense-twinkle 4.6s ease-in-out infinite;
}

@keyframes astral-dense-sky {
    0% { background-position: 0 0; }
    100% { background-position: 1.2vw -1.4vh; }
}

@keyframes astral-dense-nebula {
    0% { background-position: 0 0; }
    100% { background-position: -0.9vw 1.3vh; }
}

@keyframes astral-dense-star-glide {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0.7deg) scale(1.015); }
}

@keyframes astral-dense-twinkle {
    0%, 100% { opacity: 0.64; }
    30% { opacity: 0.92; }
    57% { opacity: 0.74; }
    78% { opacity: 0.86; }
}

/* ASTROLOGIX_EDITORIAL_DEPTH */
.editorial-depth-panel .section-heading {
    margin-bottom: 22px;
}

.editorial-depth-panel__lead {
    margin: 0 0 22px;
}

.editorial-depth-panel__lead h3 {
    margin-bottom: 8px;
}

.editorial-depth-panel__lead p {
    max-width: 920px;
    color: var(--muted);
    line-height: 1.72;
}

.editorial-depth-panel .related-tool-strip {
    margin-top: 24px;
}

/* ASTROLOGIX_INLINE_GLOSSARY_LINKS */
.inline-glossary-link {
    color: var(--mystic-gold);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(229, 179, 91, 0.42);
    text-underline-offset: 0.18em;
}

.inline-glossary-link:hover,
.inline-glossary-link:focus-visible {
    color: var(--mystic-teal);
    text-decoration-color: rgba(101, 217, 202, 0.6);
}


.primary-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.primary-nav > a,
.nav-group > summary {
    color: var(--muted);
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-group {
    position: relative;
}

.nav-group > summary {
    list-style: none;
    cursor: pointer;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    rotate: 45deg;
    margin-top: -4px;
}

.nav-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    min-width: 250px;
    display: grid;
    gap: 4px;
    padding: 14px;
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(20, 16, 10, 0.18);
}

.nav-panel--wide {
    width: min(720px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.nav-panel h2 {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.nav-panel section,
.nav-panel a {
    display: grid;
    gap: 4px;
}

.nav-panel a {
    min-height: 32px;
    align-items: center;
    color: var(--ink);
    border-radius: 6px;
    padding: 5px 7px;
    text-decoration: none;
    font-size: 0.92rem;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-dark);
}

.editorial-hero .action-row,
.product-hero .action-row {
    margin-top: 18px;
}

.editorial-grid .result-facts--single {
    grid-template-columns: 1fr;
}

.editorial-section p {
    font-size: 1.02rem;
}

@media (max-width: 980px) {
    .site-header {
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
    }

    .primary-nav {
        justify-content: flex-start;
        width: 100%;
    }

    .nav-group {
        position: static;
    }

    .nav-panel,
    .nav-panel--wide {
        position: static;
        width: 100%;
        min-width: 100%;
        grid-template-columns: 1fr;
        margin: 4px 0 10px;
    }
}


.editorial-menu-map .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}

.editorial-category-grid--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-feature-card small {
    color: var(--muted);
    line-height: 1.5;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
}

.brand::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent);
}

@media (max-width: 1080px) {
    .editorial-menu-map .section-heading,
    .editorial-category-grid--dense {
        grid-template-columns: 1fr;
    }
}


/* Primary navigation: compact desktop bar + burger drawer on mobile */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 64px;
    padding: 10px clamp(16px, 3vw, 42px);
    border-bottom: 1px solid rgba(216, 180, 95, 0.14);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(18px);
}

.brand {
    flex: 0 0 auto;
    color: var(--ink);
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

#primary-nav-list,
.primary-nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__link,
.primary-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
    background: rgba(216, 180, 95, 0.1);
    color: var(--ink);
    outline: 0;
}

.primary-nav__cta {
    border: 1px solid rgba(216, 180, 95, 0.32);
    background: rgba(216, 180, 95, 0.16);
    color: var(--accent-dark);
}

.primary-nav__cta:hover,
.primary-nav__cta:focus-visible {
    background: rgba(216, 180, 95, 0.24);
    color: var(--ink);
    outline: 0;
}

.primary-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 38px;
    border: 1px solid rgba(216, 180, 95, 0.28);
    border-radius: 6px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    cursor: pointer;
}

.primary-nav__toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

@media (max-width: 1120px) {
    .site-header {
        gap: 14px;
        padding-inline: clamp(14px, 2vw, 28px);
    }

    .primary-nav__link,
    .primary-nav__cta {
        padding-inline: 7px;
        font-size: 0.78rem;
    }
}

@media (max-width: 1080px) {
    .site-header {
        min-height: 60px;
        padding-block: 9px;
    }

    .primary-nav__toggle {
        display: inline-flex;
    }

    #primary-nav-list,
    .primary-nav__list {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        z-index: 100;
        display: none;
        width: min(320px, calc(100vw - 28px));
        max-height: calc(100vh - 86px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 8px;
        border: 1px solid rgba(216, 180, 95, 0.2);
        border-radius: 8px;
        background: rgba(18, 16, 31, 0.98);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
        list-style: none;
    }

    .primary-nav.primary-nav--open #primary-nav-list,
    .primary-nav.primary-nav--open .primary-nav__list {
        display: flex;
    }

    .primary-nav__item {
        display: block;
        width: 100%;
    }

    .primary-nav__link,
    .primary-nav__cta {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 0 11px;
        font-size: 0.94rem;
    }
}

@media (max-width: 420px) {
    .brand {
        font-size: 0.96rem;
    }

    #primary-nav-list,
    .primary-nav__list {
        right: -4px;
        width: min(300px, calc(100vw - 24px));
    }
}


/* =====================================================================
   HEADER NAV — SOURCE UNIQUE DE VÉRITÉ
   Ce bloc, placé en dernier, l'emporte sur toutes les règles
   .site-header / .primary-nav plus haut dans le fichier.
   Pour modifier le menu : éditer ICI, ne rien rajouter ailleurs.
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 30px);
    min-height: 64px;
    margin: 0;
    padding: 8px clamp(16px, 3vw, 42px);
    border-bottom: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    background: color-mix(in srgb, var(--bg, #090812) 90%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.site-header .brand {
    flex: 0 0 auto;
    color: var(--ink, #f7f1df);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .brand::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent, #49c6b6);
}

/* Burger : masqué sur desktop */
.site-header .nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 44px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.24));
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
    color: var(--ink, #f7f1df);
    cursor: pointer;
}
.site-header .nav-burger__line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

/* Barre de navigation */
.site-header .primary-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.site-header .nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header .nav-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Neutralise l'underline ::after parasite hérité de vieilles règles .site-header nav a */
.site-header .nav-link::after,
.site-header .nav-cta::after,
.site-header .nav-panel a::after {
    content: none;
}

/* Éléments cliquables du 1er niveau */
.site-header .nav-link,
.site-header .nav-trigger,
.site-header .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: var(--muted, #c7bdad);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-trigger:hover,
.site-header .nav-trigger:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 15%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}

/* Groupe déroulant (details/summary) */
.site-header .nav-group {
    position: relative;
}
.site-header .nav-trigger {
    list-style: none;
}
.site-header .nav-trigger::-webkit-details-marker {
    display: none;
}
.site-header .nav-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease, margin-top .18s ease;
}
.site-header .nav-group[open] > .nav-trigger {
    background: color-mix(in srgb, var(--accent, #49c6b6) 15%, transparent);
    color: var(--ink, #f7f1df);
}
.site-header .nav-group[open] > .nav-trigger::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* Bouton d'appel à l'action */
.site-header .nav-cta {
    margin-left: 6px;
    color: var(--bg, #090812);
    background: var(--accent, #49c6b6);
    font-weight: 800;
}
.site-header .nav-cta:hover,
.site-header .nav-cta:focus-visible {
    background: var(--accent-dark, #9ee8dc);
    color: var(--bg, #090812);
    outline: 0;
}

/* Panneau déroulant (desktop) — ancré à gauche du déclencheur */
.site-header .nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    z-index: 120;
    display: flex;
    gap: 26px;
    max-width: min(760px, calc(100vw - 32px));
    padding: 18px 20px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    border-radius: 12px;
    background: var(--surface-strong, #171529);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}
.site-header .nav-col {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 178px;
}
.site-header .nav-panel h2 {
    margin: 0 0 6px;
    color: var(--accent-dark, #9ee8dc);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.site-header .nav-panel a {
    display: block;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--ink, #f7f1df);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .nav-panel a:hover,
.site-header .nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 16%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}

/* ------------------------- MOBILE : drawer ------------------------- */
@media (max-width: 1023px) {
    .site-header {
        flex-wrap: wrap;
    }
    .site-header .nav-burger {
        display: inline-flex;
    }
    .site-header .primary-nav {
        position: static;
    }
    .site-header .nav-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: 10px clamp(16px, 3vw, 42px) 20px;
        border-bottom: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
        background: var(--bg, #090812);
        box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
    }
    .site-header .primary-nav.primary-nav--open .nav-menu {
        display: flex;
    }
    .site-header .nav-item,
    .site-header .nav-group {
        width: 100%;
    }
    .site-header .nav-link,
    .site-header .nav-trigger,
    .site-header .nav-cta {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
    }
    .site-header .nav-trigger {
        justify-content: space-between;
    }
    .site-header .nav-cta {
        margin-left: 0;
        margin-top: 6px;
        justify-content: center;
    }
    .site-header .nav-panel {
        position: static;
        display: block;
        max-width: none;
        margin: 2px 0 8px;
        padding: 6px 8px 8px;
        border: 0;
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface-strong, #171529) 55%, transparent);
        box-shadow: none;
    }
    .site-header .nav-col {
        min-width: 0;
        margin-bottom: 10px;
    }
}


/* =====================================================================
   FOND ÉTOILÉ FIXE — couche derrière tout le contenu (aucun JS)
   2 nappes d'étoiles, sans mouvement.
   Le scintillement, la dérive et l'étoile filante ont été retirés : ces
   animations tournaient en boucle sur toutes les pages et saccadaient le
   défilement sur les téléphones d'entrée de gamme. Si un décor animé revient
   un jour, le mesurer sur un mobile bas de gamme avant de le poser ici, et
   ne jamais empiler une nouvelle couche sans retirer l'ancienne.
   ===================================================================== */
.starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}

/* Nappe 1 : petites étoiles denses.
   inset: 0 et non -20% : le débord ne servait qu'à masquer les bords pendant la
   dérive, qui a été retirée. Pas de will-change : réserver une couche GPU pour
   une nappe désormais fixe ne coûterait que de la mémoire vidéo. */
.starfield::before,
.starfield::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
}

.starfield::before {
    background-image:
        radial-gradient(1px 1px at 25px 20px, #ffffff, transparent),
        radial-gradient(1px 1px at 80px 60px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 150px 35px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 210px 90px, #ffffff, transparent),
        radial-gradient(1px 1px at 45px 130px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 120px 170px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 190px 205px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 30px 220px, #ffffff, transparent),
        radial-gradient(1px 1px at 232px 150px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 100px 100px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 250px 250px;
    /* Le scintillement oscillait entre 0.5 et 1 : on fige à la moyenne pour que
       la densité perçue du ciel ne change pas. */
    opacity: 0.75;
}

/* Nappe 2 : étoiles moyennes teintées (teal/or) avec léger halo */
.starfield::after {
    background-image:
        radial-gradient(1.6px 1.6px at 60px 40px, rgba(158, 232, 220, 0.95), transparent),
        radial-gradient(1.4px 1.4px at 180px 110px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.6px 1.6px at 300px 70px, rgba(229, 179, 91, 0.85), transparent),
        radial-gradient(1.4px 1.4px at 90px 210px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.8px 1.8px at 260px 260px, rgba(158, 232, 220, 0.8), transparent),
        radial-gradient(1.4px 1.4px at 350px 180px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.6px 1.6px at 150px 320px, rgba(229, 179, 91, 0.7), transparent),
        radial-gradient(1.4px 1.4px at 40px 300px, rgba(255, 255, 255, 0.75), transparent);
    background-size: 400px 400px;
    /* Idem nappe 1 : oscillait entre 1 et 0.45, figé à la moyenne. */
    opacity: 0.72;
}


/* Fond étoilé : garantir que body est un contexte d'empilement pour que les
   couches z-index:-1 (halos + starfield) passent au-dessus du fond du body. */
body {
    position: relative;
    z-index: 0;
}


/* Abonnement : badge d'état + formulaire en ligne dans une action-row */
.inline-form {
    display: inline-flex;
    margin: 0;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.badge--active {
    color: var(--bg, #090812);
    background: var(--accent, #49c6b6);
}
.badge--active::before {
    content: "✓";
}


/* =====================================================================
   PIED DE PAGE — SOURCE UNIQUE DE VÉRITÉ
   Placé en dernier : l'emporte sur les anciennes règles .site-footer.
   ===================================================================== */
.site-footer {
    margin-top: 72px;
    padding: 48px clamp(16px, 3vw, 42px) 28px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    background: color-mix(in srgb, var(--surface-strong, #171529) 55%, transparent);
    color: var(--muted, #c7bdad);
    font-size: 0.92rem;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
    gap: clamp(28px, 5vw, 72px);
    max-width: 1180px;
    margin: 0 auto;
}

.site-footer__brand {
    display: grid;
    align-content: start;
    gap: 12px;
}
.site-footer__logo {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ink, #f7f1df);
    text-decoration: none;
}
.site-footer__logo::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent, #49c6b6);
}
.site-footer__tagline {
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
    color: var(--muted, #c7bdad);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 24px 28px;
}
.site-footer__col h2 {
    margin: 0 0 12px;
    color: var(--accent-dark, #9ee8dc);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.site-footer__col ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__col a {
    color: var(--muted, #c7bdad);
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: var(--ink, #f7f1df);
    outline: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 28px;
    max-width: 1180px;
    margin: 36px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.14));
}
.site-footer__disclaimer {
    margin: 0;
    max-width: 68ch;
    font-size: 0.82rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--muted, #c7bdad) 85%, transparent);
}
.site-footer__legal {
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--muted, #c7bdad);
}
.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 0.82rem;
    order: 3;
    flex-basis: 100%;
}
.site-footer__legal-links a {
    color: color-mix(in srgb, var(--muted, #c7bdad) 88%, transparent);
    text-decoration: none;
}
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--accent, #e7d6ad);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* Autocomplétion du lieu de naissance */
.city-field {
    position: relative;
}
.city-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.2));
    border-radius: 10px;
    background: var(--surface-strong, #171529);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.city-suggestions[hidden] {
    display: none;
}
.city-suggestions__item {
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--ink, #f7f1df);
    font-size: 0.92rem;
    cursor: pointer;
}
.city-suggestions__item:hover,
.city-suggestions__item.is-active {
    background: color-mix(in srgb, var(--accent, #49c6b6) 16%, transparent);
}

/* ---- Pages « ciel » fraîches (éphémérides, semaine, calendrier, rétrogrades, horoscope) ---- */
.sky-updated {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.35rem;
}
.sky-note {
    opacity: 0.75;
    font-style: italic;
}
.sky-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.75rem;
}
.sky-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.sky-table th,
.sky-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 14%, transparent);
    white-space: nowrap;
}
.sky-table th {
    font-weight: 600;
    opacity: 0.85;
}
.sky-table tbody tr:hover {
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
}
.site-footer__signs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    max-width: 1180px;
    margin: 1.25rem auto 0;
    font-size: 0.9rem;
    opacity: 0.85;
}
.site-footer__signs span {
    opacity: 0.7;
}

/* ---- Guides : sommaire ancré + FAQ ---- */
.editorial-toc {
    margin: 1.5rem auto;
    max-width: 68rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 14%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 4%, transparent);
}
.editorial-toc ol {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    columns: 2;
    column-gap: 2rem;
    font-size: 0.95rem;
}
@media (max-width: 640px) {
    .editorial-toc ol { columns: 1; }
}
.editorial-toc li { margin: 0.2rem 0; break-inside: avoid; }
.editorial-faq__item {
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 12%, transparent);
    padding: 0.65rem 0;
}
.editorial-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}
.editorial-faq__item p {
    margin: 0.6rem 0 0.2rem;
    opacity: 0.9;
}


/* Liste d'attente horoscope (teaser) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.waitlist-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.waitlist-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.28));
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
    color: var(--ink, #f7f1df);
    font-size: 0.95rem;
}
.waitlist-form input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--muted, #c7bdad) 80%, transparent);
}
.waitlist-form button {
    flex: 0 0 auto;
}


/* Détail d'interprétation : forces / points de vigilance / nuance */
.interpretation-facets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.interpretation-facet h4 {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.interpretation-facet--strength h4 { color: var(--accent-dark, #9ee8dc); }
.interpretation-facet--challenge h4 { color: var(--solar, #e5b35b); }
.interpretation-facet ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
}
.interpretation-facet li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}
.interpretation-nuance {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.16));
    font-size: 0.85rem;
    font-style: italic;
    color: color-mix(in srgb, var(--muted, #c7bdad) 85%, transparent);
}

/* Mini-strip « ciel du jour » (index outils) */
.sky-strip {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 0.86rem;
}
.sky-strip > span {
    padding: 3px 10px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.16));
    border-radius: 999px;
    color: var(--muted, #c7bdad);
    white-space: nowrap;
}
.sky-strip > span:first-child {
    border: 0;
    padding-left: 0;
    color: var(--ink, #f5f0e6);
}

/* Lien d'évitement (accessibilité clavier — WCAG 2.4.1) */
.skip-link {
    position: absolute;
    left: 8px;
    top: -64px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--surface-strong, #171529);
    color: var(--ink, #f7f1df);
    border: 1px solid var(--accent, #49c6b6);
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* Focus clavier visible et distinct du survol (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #49c6b6);
    outline-offset: 2px;
}

/* Header : barre pleine largeur (fond/bordure), contenu centré dans un conteneur */
.site-header {
    justify-content: center;
    padding-inline: 0;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 30px);
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding: 0 clamp(16px, 3vw, 42px);
    position: relative;
}
@media (max-width: 1023px) {
    .site-header__inner { flex-wrap: wrap; }
}

/* ============================================================
   REFONTE 2026-07 — moins brutaliste, plus de confiance
   (bloc final : gagne la cascade sur l'empilement précédent)
   Objectifs : ombres douces au lieu des décalés durs,
   prose = texte et non plus cartes, contenu plus large.
   ============================================================ */

/* --- 1. Largeur : le contenu respire davantage --- */
.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band {
    width: min(1280px, calc(100% - 40px));
}
.site-header__inner { max-width: 1280px; }
.content-band > h2,
.section-heading h2 { max-width: none; }
.content-band p,
.tool-hero .lede { max-width: 74ch; }

/* --- 2. Adoucir les ombres dures décalées (signature brutaliste) ---
   On remplace tous les `Npx Npx 0` par une profondeur douce et diffuse. */
.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates,
.result-panel,
.faq-card,
.tool-hero,
.home-console,
.home-command,
.tool-link-grid a,
.secondary-action--light {
    box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.85);
}
.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover,
.result-panel:hover,
.tool-link-grid a:hover,
.tool-link-grid a:focus-visible,
.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    box-shadow: 0 28px 62px -32px rgba(0, 0, 0, 0.92);
    border-color: rgba(229, 179, 91, 0.42);
}
.tool-hero {
    box-shadow: var(--mystic-glow), 0 26px 60px -34px rgba(0, 0, 0, 0.8);
}
button,
.secondary-action {
    box-shadow: 0 10px 26px -14px rgba(11, 116, 108, 0.6);
}
button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 16px 32px -14px rgba(11, 116, 108, 0.7);
}

/* --- 3. Prose = texte, pas carte ---
   Une carte n'est justifiée que si elle contient un lien ou une donnée
   résumée (<dl>). Les blocs d'interprétation qui ne sont que du texte
   (titre + paragraphes) perdent la boîte : fine règle supérieure + titre
   solaire, pour une lecture éditoriale plutôt qu'une grille de blocs.
   `:has()` distingue précisément prose vs carte à lien/donnée. */
.interpretation-card:not(:has(a)):not(:has(dl)) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.interpretation-card:not(:has(a)):not(:has(dl))::before { display: none; }
.interpretation-card:not(:has(a)):not(:has(dl)):hover {
    border-color: transparent;
    box-shadow: none;
}
.interpretation-card:not(:has(a)):not(:has(dl)) h3 {
    color: var(--solar);
    letter-spacing: 0.01em;
}
/* La séparation se fait par l'espace, pas par des traits */
.interpretation-grid {
    gap: clamp(26px, 3vw, 44px) clamp(32px, 4vw, 56px);
}

/* --- 5. Plus d'air entre les sections, moins de barres de séparation --- */
.content-band,
.data-section,
.tool-grid,
.seo-depth-section,
.home-flow,
.home-split,
.home-proof,
.editorial-depth-panel,
.tool-seo-panel {
    border-top: 0;
}
main > .content-band,
main > .data-section,
main > .tool-grid,
main > .seo-depth-section,
main > .home-flow,
main > .home-split,
main > .home-proof,
main > .editorial-depth-panel,
main > .tool-seo-panel,
main > section + section {
    margin-top: clamp(64px, 7vw, 108px);
}
/* on retire le padding-haut qui doublait l'espace sous l'ancienne barre */
.content-band { padding-top: 0; }
.data-section { padding-top: 0; }

/* --- 6. Interdit : carte dans une carte ---
   Une .content-list a déjà chaque <li> stylé en carte. Toute carte qui
   l'enveloppe crée un doublon de carte : on neutralise la boîte externe
   (le titre/eyebrow subsistent, la liste porte la structure). */
.tool-panel:has(.content-list),
.interpretation-card:has(.content-list),
.result-panel:has(.content-list),
.score-card:has(.content-list) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.tool-panel:has(.content-list)::before,
.interpretation-card:has(.content-list)::before,
.result-panel:has(.content-list)::before,
.score-card:has(.content-list)::before { display: none; }
.tool-panel:has(.content-list):hover,
.interpretation-card:has(.content-list):hover,
.result-panel:has(.content-list):hover,
.score-card:has(.content-list):hover {
    border-color: transparent;
    box-shadow: none;
}

/* --- 4. Données résumées : liste claire plutôt que grille de boîtes --- */
.result-facts div {
    box-shadow: none;
    background: rgba(239, 225, 183, 0.03);
    border-color: rgba(239, 225, 183, 0.14);
}
.result-facts div:hover {
    box-shadow: none;
    border-color: rgba(229, 179, 91, 0.4);
}

/* =====================================================================
   REFONTE HEADER + FOOTER 2026-07 — double étage, duo teal + or solaire
   Bloc final : l'emporte sur les blocs .site-header / .site-footer
   précédents. Barres pleine largeur, contenu centré à 1280px.
   ===================================================================== */

/* Barres pleine largeur (corrige la contrainte 1280 héritée de la refonte
   contenu : le fond/bordure doivent couvrir toute la largeur). */
.site-header,
.site-footer {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* -------------------- HEADER : conteneur à deux étages -------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    background: color-mix(in srgb, var(--bg, #090812) 86%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Étage 1 — bandeau utilitaire : ciel en direct + accès compte */
.site-header__utility {
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 55%, transparent);
    background: color-mix(in srgb, var(--surface-strong, #171529) 32%, transparent);
}
.site-header__utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 24px;
    max-width: 1280px;
    margin-inline: auto;
    padding: 5px clamp(16px, 3vw, 42px);
    font-size: 0.78rem;
    line-height: 1.2;
}
.sky-ticker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted, #c7bdad);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.sky-ticker:hover,
.sky-ticker:focus-visible { color: var(--ink, #f7f1df); outline: 0; }
.sky-ticker__glyph { color: var(--solar, #e5b35b); font-size: 0.98rem; line-height: 1; }
.sky-ticker__label { color: color-mix(in srgb, var(--ink, #f7f1df) 82%, transparent); }
.sky-ticker__retro { color: var(--solar, #e5b35b); font-weight: 800; }
.sky-ticker__phase { color: color-mix(in srgb, var(--muted, #c7bdad) 88%, transparent); font-weight: 500; }
.sky-ticker__date { color: color-mix(in srgb, var(--muted, #c7bdad) 70%, transparent); }
.site-header__utility-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
}
.site-header__utility-links a {
    color: var(--muted, #c7bdad);
    font-weight: 600;
    text-decoration: none;
}
.site-header__utility-links a:hover,
.site-header__utility-links a:focus-visible {
    color: var(--accent-dark, #9ee8dc);
    outline: 0;
}
.site-header__utility-links a.site-header__utility-cta { color: var(--solar, #e5b35b); }

/* Étage 2 — barre principale : marque + navigation */
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 34px);
    max-width: 1280px;
    margin-inline: auto;
    min-height: 60px;
    padding: 8px clamp(16px, 3vw, 42px);
}
.site-header .brand::before { color: var(--solar, #e5b35b); }

/* Compte hors du menu principal en desktop (il vit dans le bandeau) ;
   présent dans le drawer en mobile où le bandeau est masqué. */
@media (min-width: 1024px) {
    .site-header .nav-item--account { display: none; }
}
@media (max-width: 1023px) {
    .site-header__utility { display: none; }
    .site-header__inner { flex-wrap: wrap; }
}

/* -------------------- FOOTER : cosmique restructuré -------------------- */
.site-footer {
    position: relative;
    margin-top: clamp(72px, 9vw, 120px);
    padding: 54px clamp(16px, 3vw, 42px) 30px;
    border-top: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    background: color-mix(in srgb, var(--surface-strong, #171529) 50%, transparent);
    color: var(--muted, #c7bdad);
}
/* Ornement : fine ligne dorée centrée, comme un horizon */
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 62%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--solar, #e5b35b), transparent);
    opacity: 0.7;
}
.site-footer__top { max-width: 1280px; }
.site-footer__bottom { max-width: 1280px; }

/* Strip zodiaque des 12 signes */
.site-footer__signs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 1280px;
    margin: 30px auto 0;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 55%, transparent);
    opacity: 1;
    font-size: 0.9rem;
}
.site-footer__signs span { opacity: 1; }
.site-footer__signs-label {
    color: var(--solar, #e5b35b);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.site-footer__zodiac {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.site-footer__zodiac a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 999px;
    color: var(--muted, #c7bdad);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.site-footer__zodiac a:hover,
.site-footer__zodiac a:focus-visible {
    border-color: color-mix(in srgb, var(--solar, #e5b35b) 58%, transparent);
    background: color-mix(in srgb, var(--solar, #e5b35b) 10%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}
.site-footer__zodiac-glyph { color: var(--solar, #e5b35b); font-size: 1rem; line-height: 1; }

/* =====================================================================
   MEGA-MENU 2026-07 — panneaux « larges » sur 2 lignes, redesign
   Le panneau Astrologie (5 rubriques) débordait en une seule rangée.
   On passe en flex-wrap borné à ~3 colonnes : 5 rubriques → 3 + 2.
   Bloc final : l'emporte sur .site-header .nav-panel (4605).
   ===================================================================== */
.site-header .nav-panel {
    padding: 20px 22px;
    border-color: color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 90%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--solar, #e5b35b) 6%, transparent), transparent 42%),
        var(--surface-strong, #171529);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .62);
}
/* Fin liseré doré en haut du panneau (rappel du duo teal + or) */
.site-header .nav-panel {
    position: absolute;
}
.site-header .nav-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--solar, #e5b35b) 70%, transparent), transparent);
}

/* Panneau ancré sous la marque (bord gauche du conteneur), pas sous le
   déclencheur : évite le décalage vers la droite quand la nav est à droite. */
.site-header__inner { position: relative; }
.site-header .nav-group { position: static; }
.site-header .nav-panel {
    left: clamp(16px, 3vw, 42px);
    right: auto;
}

/* Panneaux larges : grille de 3 colonnes exactement (Astrologie → 3 + 2) */
.site-header .nav-panel--wide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 30px;
    max-width: min(720px, calc(100vw - 32px));
}
.site-header .nav-panel--wide .nav-col {
    min-width: 0;
}

/* Rubriques : titre teal souligné d'un court trait doré */
.site-header .nav-panel h2 {
    position: relative;
    margin: 0 0 8px;
    padding-bottom: 7px;
    color: var(--accent-dark, #9ee8dc);
}
.site-header .nav-panel h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--solar, #e5b35b);
    opacity: .8;
}
.site-header .nav-panel a {
    padding: 6px 8px;
    font-size: .9rem;
    color: color-mix(in srgb, var(--ink, #f7f1df) 88%, transparent);
}
.site-header .nav-panel a:hover,
.site-header .nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 14%, transparent);
    color: var(--ink, #f7f1df);
}

/* En mobile, le panneau reste empilé pleine largeur (pas de grille bornée) */
@media (max-width: 1023px) {
    .site-header .nav-panel--wide {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 6px;
    }
    .site-header .nav-panel::before { display: none; }
}

/* =====================================================================
   PAGES ÉDITORIALES — flux d'article resserré (2026-07)
   Les pages tarot/guides empilent beaucoup de sections de prose ; le grand
   interligne inter-sections (réservé à l'accueil) y crée trop de vide entre
   blocs rédactionnels. On resserre le rythme, scopé à .editorial-section.
   ===================================================================== */
main > .editorial-section {
    margin-top: clamp(22px, 2.6vw, 38px);
}
/* Grilles de blocs de prose (« Erreurs fréquentes », interprétations) :
   séparation plus discrète entre les blocs. */
.editorial-section .interpretation-grid,
.interpretation-grid {
    gap: clamp(18px, 2.2vw, 30px);
}
/* Titre solaire des points de vigilance (désormais uniques par carte) */
.interpretation-card:not(:has(a)):not(:has(dl)) h3 {
    margin-bottom: 6px;
}

/* =====================================================================
   ÉDITORIAL — réponse directe (GEO) + tirage d'exemple (2026-07)
   ===================================================================== */
/* Réponse directe citable, en tête de page, accent solaire */
.editorial-answer {
    margin-top: clamp(18px, 2.4vw, 30px);
    padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.6vw, 28px);
    border: 1px solid color-mix(in srgb, var(--solar, #e5b35b) 34%, transparent);
    border-left: 3px solid var(--solar, #e5b35b);
    border-radius: 12px;
    background: color-mix(in srgb, var(--solar, #e5b35b) 8%, transparent);
}
.editorial-answer .eyebrow { color: var(--solar, #e5b35b); }
.editorial-answer__text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink, #f7f1df);
}

/* Tirage d'exemple : positions -> cartes, lisible d'un coup d'œil */
.tarot-draw {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 16px 0 18px;
    padding: 0;
}
.tarot-draw > div {
    display: grid;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
}
.tarot-draw dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted, #c7bdad) 90%, transparent);
}
.tarot-draw dd {
    margin: 0;
    font-weight: 700;
    color: var(--solar, #e5b35b);
}

/* =====================================================================
   NUMÉROLOGIE — calcul déroulé + tuiles de nombres (2026-07)
   Variation de présentation : pas de tableau, un calcul en étapes et
   une base de connaissances en tuiles.
   ===================================================================== */
/* Exemple de calcul : réduction pas à pas */
.calc-steps {
    margin: 16px 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: calc;
    display: grid;
    gap: 8px;
    max-width: 560px;
}
.calc-steps li {
    counter-increment: calc;
    position: relative;
    padding: 10px 14px 10px 44px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-left: 3px solid color-mix(in srgb, var(--accent, #49c6b6) 55%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
    font-variant-numeric: tabular-nums;
}
.calc-steps li::before {
    content: counter(calc);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #49c6b6) 22%, transparent);
    color: var(--accent-dark, #9ee8dc);
    font-size: 0.75rem;
    font-weight: 800;
}
.calc-result {
    margin: 6px 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--solar, #e5b35b);
}

/* Base des nombres : tuiles (pas un tableau) */
.number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.number-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: baseline;
    padding: 14px 16px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 42%, transparent);
}
.number-tile__n {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--solar, #e5b35b);
    font-variant-numeric: tabular-nums;
}
.number-tile__key {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.number-tile p {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}

/* =====================================================================
   RUNES — lecture par position + base groupée par ættir (2026-07)
   Troisième variation de présentation (ni tableau, ni tuiles/calcul).
   ===================================================================== */
/* Exemple : lecture par position, le glyphe runique en vedette */
.rune-spread {
    display: grid;
    gap: 12px;
    margin: 16px 0 12px;
    max-width: 620px;
}
.rune-spread__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
}
.rune-spread__glyph {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--solar, #e5b35b);
}
.rune-spread__pos {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.rune-spread__name { color: var(--ink, #f7f1df); }
.rune-spread__body p {
    margin: 3px 0 0;
    font-size: 0.9rem;
    color: var(--muted, #c7bdad);
}

/* Base des 24 runes, groupée par famille (ætt) */
.rune-aett {
    margin: 24px 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.rune-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.rune-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 40%, transparent);
}
.rune-list__glyph {
    align-self: start;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--solar, #e5b35b);
}
.rune-list__name { color: var(--ink, #f7f1df); }
.rune-list__key {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent, #49c6b6) 85%, transparent);
}
.rune-list__body p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}

/* ============================================================
   Lecture simplifiée + maillage glossaire (ajout 2026-07-15)
   Classes partagées, placées en fin de fichier pour dominer la
   cascade dupliquée. Tout est en var() : bascule clair/sombre auto.
   ============================================================ */
.simple-reading {
    /* Simple bandeau d'introduction : aucun encadré (ni fond, ni bordure, ni ombre),
       seulement la largeur/centrage de la colonne, comme .content-band. */
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto clamp(24px, 4vw, 40px);
}
.simple-reading > p {
    margin: 0 0 12px;
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--ink, #f7f1df);
}
.simple-reading > p:last-child { margin-bottom: 0; }
.simple-reading strong { color: var(--ink, #f7f1df); font-weight: 700; }

/* Date de fraîcheur discrète, sous le fil d'Ariane */
.content-freshness {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto clamp(8px, 1.5vw, 16px);
    font-size: 0.82rem;
    color: var(--muted, #b8b0ca);
}
.content-freshness time { font-variant-numeric: tabular-nums; }

/* Terme de jargon relié à sa définition dans le glossaire */
.glossary-term {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent, #d8b45f) 70%, transparent);
    cursor: help;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.glossary-term:hover,
.glossary-term:focus-visible {
    color: var(--accent-dark, #f0d98b);
    border-bottom-style: solid;
    border-bottom-color: var(--accent, #d8b45f);
}

/* FAQ par page (accordéon + JSON-LD FAQPage) */
.page-faq .faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}
.faq-item {
    border: 1px solid var(--line, rgba(231, 214, 173, 0.18));
    border-radius: 12px;
    background: var(--surface, #12101f);
    overflow: hidden;
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    padding-right: 44px;
    position: relative;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink, #f7f1df);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--accent, #d8b45f);
}
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item > summary:focus-visible {
    outline: 2px solid var(--accent, #d8b45f);
    outline-offset: -2px;
}
.faq-answer {
    padding: 0 20px 18px;
}
.faq-answer p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--muted, #b8b0ca);
}
.faq-answer a { color: var(--accent-dark, #f0d98b); }

/* Interprétations à deux registres : « En clair » (moldu) + « Pour les initiés » (expert) */
.interpretation-simple {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #d8b45f) 10%, transparent);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ink, #f7f1df);
}
.interpretation-simple__tag {
    display: inline-block;
    margin-right: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark, #f0d98b);
}
.interpretation-expert {
    margin-top: 14px;
    border-top: 1px dashed var(--line, rgba(231, 214, 173, 0.18));
    padding-top: 10px;
}
.interpretation-expert > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent, #d8b45f);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.interpretation-expert > summary::-webkit-details-marker { display: none; }
.interpretation-expert > summary::before {
    content: "\25B8";
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.interpretation-expert[open] > summary::before { transform: rotate(90deg); }
.interpretation-expert > summary:focus-visible {
    outline: 2px solid var(--accent, #d8b45f);
    outline-offset: 2px;
}
.interpretation-expert__body {
    margin-top: 10px;
}
.interpretation-expert__body p {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.66;
    color: var(--muted, #b8b0ca);
}
.interpretation-expert__notes {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.interpretation-expert__notes li {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted, #b8b0ca);
}

/* Dépliants de section (divulgation progressive) : « afficher les autres planètes »
   et contexte pédagogique. Le contenu reste dans le DOM, replié par défaut, donc
   indexable et sans perte SEO ; seul le mur visuel disparaît. */
.more-planets,
.tool-context-panel {
    margin-top: 18px;
}
.more-planets > summary,
.tool-context-panel > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid var(--line, rgba(231, 214, 173, 0.22));
    border-radius: 10px;
    background: var(--panel, rgba(255, 255, 255, 0.03));
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent, #d8b45f);
    text-align: center;
}
.more-planets > summary::-webkit-details-marker,
.tool-context-panel > summary::-webkit-details-marker { display: none; }
.more-planets > summary::after,
.tool-context-panel > summary::after {
    content: "\25BE";
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}
.more-planets[open] > summary::after,
.tool-context-panel[open] > summary::after { transform: rotate(180deg); }
.more-planets > summary:hover,
.tool-context-panel > summary:hover { border-color: var(--accent, #d8b45f); }
.more-planets > summary:focus-visible,
.tool-context-panel > summary:focus-visible {
    outline: 2px solid var(--accent, #d8b45f);
    outline-offset: 2px;
}
.more-planets[open] > summary { margin-bottom: 18px; }
.interpretation-expert--standalone {
    border-top: none;
    padding-top: 0;
}
.interpretation-expert--standalone > summary {
    font-size: 0.9rem;
    padding: 4px 0;
}

/* Portrait de synthèse du thème astral (bloc phare) */
.portrait-card {
    padding: clamp(20px, 3.4vw, 34px);
    border: 1px solid var(--line, rgba(231, 214, 173, 0.18));
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent, #d8b45f) 12%, transparent), transparent 60%),
        var(--surface, #12101f);
}
.portrait-lead {
    margin: 0;
    font-size: clamp(1.08rem, 1.05rem + 0.4vw, 1.28rem);
    line-height: 1.75;
    color: var(--ink, #f7f1df);
}
.portrait-card .interpretation-expert {
    margin-top: 18px;
    border-top: 1px dashed var(--line, rgba(231, 214, 173, 0.18));
    padding-top: 14px;
}
.portrait-card .simple-reading__hint {
    margin: 16px 0 0;
    font-size: 0.9rem;
    color: var(--muted, #b8b0ca);
}

/* Barre d'action « Imprimer / Enregistrer en PDF » (ajout 2026-07-16) */
.chart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 clamp(20px, 3vw, 32px);
}
.print-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--accent, #d8b45f);
    border-radius: 10px;
    background: transparent;
    color: var(--accent-dark, #f0d98b);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.print-button:hover,
.print-button:focus-visible {
    background: var(--accent, #d8b45f);
    color: var(--bg, #090812);
}
.print-button::before { content: "\1F5A8"; }
.print-button.is-download::before { content: "\1F5BC"; }

/* Impression : masquer le chrome et les saisies pour un thème propre en PDF */
@media print {
    .chart-actions,
    .print-button,
    .form-stack,
    .save-chart-form,
    .city-suggestions,
    .house-system-field,
    .related-tool-strip,
    .starfield,
    .sky-ticker {
        display: none !important;
    }
    .tool-grid { display: block !important; }
    .content-band,
    .interpretation-card,
    .portrait-card,
    .simple-reading {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Synthèse « Ce qui ressort du thème » (croisement des facteurs, ajout 2026-07-21).
   Chaque carte est un constat court : le liseré de gauche encode la tonalité
   (appui / tension / fond) pour un repérage visuel immédiat. */
.synthesis-intro {
    margin: 0 0 clamp(16px, 2.4vw, 24px);
    max-width: 68ch;
    color: var(--muted, #b8b0ca);
    line-height: 1.7;
}
.synthesis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(14px, 2vw, 20px);
}
.synthesis-card {
    padding: clamp(16px, 2.4vw, 22px);
    border: 1px solid var(--line, rgba(231, 214, 173, 0.18));
    border-left: 4px solid var(--synthesis-accent, var(--accent, #d8b45f));
    border-radius: 12px;
    background: var(--surface, #12101f);
}
.synthesis-card h3 {
    margin: 0 0 8px;
    font-size: clamp(1rem, 0.98rem + 0.3vw, 1.14rem);
    color: var(--ink, #f7f1df);
}
.synthesis-card p {
    margin: 0;
    line-height: 1.72;
    color: var(--ink, #f7f1df);
}
.synthesis-card--appui { --synthesis-accent: #3f9d7a; }
.synthesis-card--tension { --synthesis-accent: #d08a3a; }
.synthesis-card--fond { --synthesis-accent: var(--accent, #d8b45f); }

@media print {
    .synthesis-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Pondération par placement (ajout 2026-07-21) : badge de prééminence + note
   chart-aware sur chaque carte d'interprétation, pour hiérarchiser au lieu de
   présenter une liste plate. */
.prominence-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    border: 1px solid var(--line, rgba(231, 214, 173, 0.25));
    color: var(--muted, #b8b0ca);
    background: transparent;
}
.prominence-badge--majeure {
    border-color: var(--accent, #d8b45f);
    color: var(--accent-dark, #f0d98b);
    background: color-mix(in srgb, var(--accent, #d8b45f) 14%, transparent);
}
.prominence-badge--notable {
    color: var(--ink, #f7f1df);
    border-color: color-mix(in srgb, var(--ink, #f7f1df) 30%, transparent);
}
.weight-note {
    margin: 0 0 12px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--muted, #b8b0ca);
    font-style: italic;
}
.interpretation-card--majeure {
    border-left: 3px solid var(--accent, #d8b45f);
}
.interpretation-card--discrete {
    opacity: 0.94;
}
.aspect-orb-tag,
.aspect-minor-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted, #b8b0ca);
    letter-spacing: 0.02em;
}
.cusp-flag {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ink, #f7f1df);
    background: color-mix(in srgb, #d08a3a 12%, transparent);
    border: 1px solid color-mix(in srgb, #d08a3a 32%, transparent);
}
.dominant-planet-lead {
    margin: 0 0 clamp(16px, 2.4vw, 22px);
    max-width: 68ch;
    line-height: 1.7;
    color: var(--ink, #f7f1df);
}
.dominant-planet-lead strong {
    color: var(--accent-dark, #f0d98b);
}
.dominant-planet-why {
    color: var(--muted, #b8b0ca);
    font-size: 0.92em;
}
.combined-reading {
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--accent, #d8b45f) 40%, transparent);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink, #f7f1df);
}
.reading-guide {
    margin: 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 74ch;
}
.reading-guide li {
    line-height: 1.7;
    color: var(--ink, #f7f1df);
}
.reading-guide strong {
    color: var(--accent-dark, #f0d98b);
}
.star-nature {
    color: var(--muted, #b8b0ca);
    font-size: 0.9em;
}

/* Bloc « Sur quoi repose cette lecture » : attribution des sources sous une
   interprétation. Replié par défaut, discret, mais toujours présent dans le HTML. */
.interpretation-sources {
    margin-top: 12px;
    border-top: 1px dashed var(--line, rgba(231, 214, 173, 0.18));
    padding-top: 10px;
}
.interpretation-sources > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #b8b0ca);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.interpretation-sources > summary::-webkit-details-marker { display: none; }
.interpretation-sources > summary::before {
    content: "\25B8";
    font-size: 0.68rem;
    transition: transform 0.15s ease;
}
.interpretation-sources[open] > summary::before { transform: rotate(90deg); }
.interpretation-sources > summary:hover { color: var(--accent, #d8b45f); }
.interpretation-sources > summary:focus-visible {
    outline: 2px solid var(--accent, #d8b45f);
    outline-offset: 2px;
}
.interpretation-sources__body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.interpretation-sources__body p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--muted, #b8b0ca);
}
.interpretation-sources__body cite {
    font-style: italic;
}
.interpretation-sources__links a {
    white-space: nowrap;
}

/* Dignité essentielle complète (termes et faces compris) et secte, affichées
   sous chaque planète du thème. */
.dignity-line {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted, #b8b0ca);
}
.dignity-badge,
.sect-badge {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.dignity-badge--domicile,
.dignity-badge--exaltation { color: var(--accent-dark, #f0d98b); }
.dignity-badge--terme,
.dignity-badge--face { color: var(--accent, #d8b45f); }
.dignity-badge--exil,
.dignity-badge--chute { color: #e29a9a; }
.dignity-badge--peregrin { color: var(--muted, #b8b0ca); }
.sect-badge { margin-left: 6px; }
.sect-badge--in { color: var(--accent-dark, #f0d98b); }
.sect-badge--out { color: var(--muted, #b8b0ca); }

/* Schémas explicatifs en SVG inline : aucune image externe, aucune requête
   supplémentaire, et un texte alternatif porté par title + desc. */
.astro-diagram {
    margin: 20px 0;
    max-width: 460px;
}
.astro-diagram--wide { max-width: 720px; }
.astro-diagram__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.astro-diagram figcaption,
.astro-diagram__caption {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--muted, #b8b0ca);
}
.astro-diagram__ring {
    fill: none;
    stroke: var(--line, rgba(231, 214, 173, 0.28));
    stroke-width: 1.5;
}
.astro-diagram__sky {
    fill: var(--accent, #d8b45f);
    opacity: 0.07;
}
.astro-diagram__axis {
    stroke: var(--accent, #d8b45f);
    stroke-width: 1.5;
    opacity: 0.75;
}
.astro-diagram__axis--dashed { stroke-dasharray: 4 5; opacity: 0.45; }
.astro-diagram__ray { stroke-width: 1.5; opacity: 0.85; }
.astro-diagram__ray--soft { stroke: var(--accent-dark, #f0d98b); }
.astro-diagram__ray--hard { stroke: #e29a9a; }
.astro-diagram__ray--start { stroke: var(--accent, #d8b45f); stroke-width: 2; }
.astro-diagram__dot { fill: var(--accent-dark, #f0d98b); }
.astro-diagram__dot--start { fill: var(--accent, #d8b45f); }
.astro-diagram__moon-dark {
    fill: none;
    stroke: var(--line, rgba(231, 214, 173, 0.35));
    stroke-width: 1.2;
}
.astro-diagram__moon-lit { fill: var(--accent, #d8b45f); opacity: 0.85; }
.astro-diagram__label {
    fill: var(--accent-dark, #f0d98b);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.astro-diagram__label--left { text-anchor: end; }
.astro-diagram__label--mid { text-anchor: middle; }
.astro-diagram__note {
    fill: var(--muted, #b8b0ca);
    font-size: 11px;
}
.astro-diagram__micro {
    fill: var(--muted, #b8b0ca);
    font-size: 9.5px;
}

/* Note de méthode par pilier dans le tableau Ba Zi (jieqi calculé vs secours). */
.pillar-note {
    font-size: 0.82rem;
    color: var(--muted, #b8b0ca);
    line-height: 1.45;
}

/* Lecture modulée par la dignité : prose interprétative (distincte du badge factuel). */
.dignity-reading {
    margin: 6px 0 0;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--ink, #f7f1df);
    border-left: 2px solid var(--accent, #d8b45f);
    padding-left: 12px;
}

/* Colonne vertébrale du thème : les 3-5 facteurs structurants, en tête de lecture. */
.backbone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: none;
}
.backbone-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--panel, rgba(24, 20, 38, 0.55));
    border: 1px solid var(--line, rgba(231, 214, 173, 0.18));
    border-left: 3px solid var(--accent, #d8b45f);
    border-radius: 10px;
}
.backbone-rank {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent, #d8b45f);
    color: #241c0a;
    font-weight: 800;
    font-size: 1rem;
}
.backbone-body { flex: 1 1 auto; }
.backbone-label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent, #d8b45f);
}
.backbone-title {
    margin: 2px 0 6px;
    font-size: 1.12rem;
    color: var(--ink, #f7f1df);
}
.backbone-detail {
    margin: 0;
    line-height: 1.62;
    color: var(--muted, #b8b0ca);
}

/* Récit de thème entier : la lecture continue, en tête du thème. */
.narrative-body {
    max-width: 72ch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.narrative-body p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--ink, #f7f1df);
}
.narrative-body p:first-child::first-letter {
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 700;
    float: left;
    margin: 4px 10px 0 0;
    color: var(--accent, #d8b45f);
}
.narrative-band .interpretation-expert--standalone { margin-top: 18px; }

/* Calendrier prévisionnel des transits lents. */
.forecast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.forecast-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--line, rgba(231, 214, 173, 0.16));
    border-left: 3px solid var(--muted, #8b84a0);
    border-radius: 10px;
    background: var(--panel, rgba(24, 20, 38, 0.5));
}
.forecast-item--retro { border-left-color: var(--accent, #d8b45f); }
.forecast-when {
    flex: 0 0 auto;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.forecast-when time { font-weight: 700; color: var(--accent-dark, #f0d98b); }
.forecast-passes {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent, #d8b45f);
}
.forecast-body { flex: 1 1 auto; }
.forecast-body h3 { margin: 0 0 6px; font-size: 1.06rem; color: var(--ink, #f7f1df); }
.forecast-body p { margin: 0 0 6px; line-height: 1.6; color: var(--muted, #b8b0ca); }

/* --- Confort des formulaires d'outils (2026-07-26) ---------------------------
   Ajouté en fin de fichier à dessein : les blocs précédents se sont empilés au
   fil des générations, et une règle posée plus haut se ferait écraser. */

/* Case « je ne connais pas mon heure » : la cible cliquable inclut le libellé. */
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 0;
    cursor: pointer;
    line-height: 1.4;
    color: var(--muted, #b8b0ca);
}
/* Les champs du site héritent de `width: 100%`, `min-height: 48px` et d'un
   padding : appliqués à une case à cocher, ils produisaient un rectangle géant
   qui poussait son libellé à la ligne. On rend ici la case à sa taille. */
.checkbox-field input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--accent, #d8b45f);
    cursor: pointer;
}

/* Avis factuel dans un résultat (heure inconnue, système de maisons de repli…). */
.notice {
    margin: 10px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--accent, #d8b45f);
    border-radius: 0 8px 8px 0;
    background: var(--panel, rgba(24, 20, 38, 0.5));
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--muted, #b8b0ca);
}

/* Bouton qui se comporte comme un lien (« oublier mes données »). */
.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent, #d8b45f);
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover { color: var(--accent-dark, #f0d98b); }

.restored-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px dashed var(--line, rgba(231, 214, 173, 0.16));
    border-radius: 10px;
}

/* Bande « poursuivre avec ces données » sous un résultat. */
.continue-strip .related-tool-strip {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Le panneau de résultat reçoit le focus après un calcul : pas de contour
   permanent, mais un repère visible pour qui navigue au clavier. */
#resultat:focus { outline: none; }
#resultat:focus-visible { outline: 2px solid var(--accent, #d8b45f); outline-offset: 4px; }

/* Recherche interne (2026-07-26). */
.search-form__row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.search-form__row input[type="search"] {
    flex: 1 1 260px;
    min-width: 0;
}
.search-result__kind {
    margin-left: 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #8b84a0);
}


/* =====================================================================
   FONDS ANIMÉS — NEUTRALISATION (2026-07-29)

   Cinq générations de décor s'étaient empilées dans ce fichier, chacune
   animant à nouveau html, body, body::before et body::after sans retirer la
   précédente. Résultat : quatre couches fixes plein écran animées en boucle
   sur TOUTES les pages, en permanence. Les deux pires animaient
   `background-position` sur html et body, ce qu'aucun GPU ne compose : c'est
   un repaint du viewport entier à chaque image, d'où les saccades au
   défilement sur les téléphones d'entrée de gamme.

   Pourquoi un bloc en fin de fichier plutôt que la suppression des règles :
   les déclarations `animation` de ces quatre sélecteurs sont réparties sur
   14 endroits (l. 1799 à 3947). N'en retirer que les dernières ferait
   remonter les précédentes dans la cascade, et le décor repartirait. Un
   point de vérité unique, en dernier, est le seul geste sûr ici.

   Pourquoi !important : une génération intermédiaire (l. 3772) porte déjà un
   `animation: none !important` sur body::after ; sans !important ici, ce
   sont les générations suivantes qui gagneraient.

   Les décors eux-mêmes sont conservés : le ciel étoilé reste, il ne bouge
   plus. Les opacités déclarées (0.88 et 0.82) sont à 0.07 près des moyennes
   que les animations imposaient (0.81 et 0.79), donc rien à réajuster.

   Si un décor animé revient un jour : le mesurer sur un mobile bas de gamme,
   n'animer que `transform`/`opacity`, et retirer l'ancienne couche.
   ===================================================================== */
html,
body,
body::before,
body::after {
    animation: none !important;
}