: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;
}

.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-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-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%;
    }}


/* 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 {
    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 {
    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-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,
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%;
}

.chart-wheel-wrap {
    isolation: isolate;
}

.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 {
    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 {
    transform: none !important;
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap: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;
    }
}

/* =====================================================================
   PALETTE — AUTORITÉ UNIQUE (CLARTÉ 2026-08)
   ---------------------------------------------------------------------
   Ce bloc remplace l'ancien ASTROLOGIX_DARK_MYSTIC_THEME. C'est le
   DERNIER `:root` du fichier : six générations en avaient déclaré un
   (l. 1, 943, 1745, 2782, ici, 3498-print), et seul le dernier gagne.
   Plutôt que d'en ajouter un septième en fin de fichier, on réécrit
   celui qui gagnait déjà : un seul point de vérité pour la couleur.

   Direction : fond clair légèrement chaud (papier), encre très foncée,
   UNE couleur d'accent (vert-bleu profond) et UNE seconde couleur
   fonctionnelle très limitée (ambre, réservée aux repères de donnée).
   Le violet et le corail ne servent plus l'interface : ils ne restent
   que comme teintes de DONNÉE (légende de roue, aspects).

   Les 442 `var(--…)` du fichier basculent donc d'un seul geste. Les
   couleurs écrites en dur dans les générations antérieures sont
   traitées par le bloc CLARTÉ, en fin de fichier.
   ===================================================================== */
:root {
    color-scheme: light;
    /* BODY-COLOR-001. Mesuré : le fond n'était pas trop proche du blanc en
       teinte — il en était déjà à 4,21 de ΔE — il en était trop proche en
       CLARTÉ, à L* 97,31 contre 100. #f6f3ee descend à L* 95,94, ce qui porte
       l'écart au blanc des surfaces à 4,91 de ΔE (+17 %), en restant dans la
       famille chaude (b* 3,22 → 2,75) et sans virer au gris (a* +0,14).
       Une variante plus neutre (#f5f4f0) ne gagnait que 0,15 de ΔE, et une
       variante végétale (#f4f5f2) FAISAIT BAISSER l'écart à 3,94 tout en
       refroidissant le site. Le token suffit : les quatre essais se sont
       propagés entièrement par lui, sans laisser un seul fond en arrière. */
    --bg: #f6f3ee;
    --bg-2: #f2eee5;
    /* CHROME-FIX-001. Le pied n'avait aucune couleur propre : il se confondait
       avec la toile et rien ne disait que la page finissait. Une teinte à
       peine distincte suffit à le lire comme une zone de fin — pas une nappe,
       pas une carte, pas d'ombre. Trois valeurs confrontées : `--bg-2`
       (#f2eee5, deja au dossier) separait le mieux mais virait au beige
       (b* 4,81 contre 2,75 pour le body) ; #f1efe9 restait sous le seuil de
       perception (ΔE 1,62) ; #efeeea separe a ΔE 2,06 EN allant un cran vers
       le neutre (b* 2,04), ce qui se lit comme une autre zone et non comme
       le meme papier en plus terne. */
    --bg-footer: #efeeea;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-muted: #f4f1ea;
    --ink: #1b1a17;
    --muted: #5d5b54;
    --line: #ddd7ca;
    --line-soft: #e7e2d6;
    --border: var(--line-soft);
    --accent: #0e6656;
    --accent-dark: #084c40;
    --solar: #9a5b0c;
    --coral: #a8443a;
    --violet: #4f4693;
    --danger: #a3262f;
    /* Les ombres portées « dures » de la génération brutaliste sont
       neutralisées à la source : une interface claire n'en a pas besoin. */
    --shadow-hard: none;
    --shadow-soft: none;
    /* Alias hérités : on les fait pointer vers la même palette au lieu
       de laisser vivre un second système de couleurs en parallèle. */
    --mystic-ink: #1b1a17;
    --mystic-night: #faf7f1;
    --mystic-indigo: #f4f1ea;
    --mystic-violet: #4f4693;
    --mystic-gold: #9a5b0c;
    --mystic-rose: #a8443a;
    --mystic-teal: #0e6656;
    --mystic-line: #ddd7ca;
    --mystic-glow: none;
    --mystic-card: #ffffff;
    /* Texte posé SUR l'accent (barre de contexte du header). Déclaré ici
       avec le reste de la palette : aucune couleur n'est écrite dans un
       composant. Contraste mesuré contre --accent dans la section 22. */
    --sur-accent: #f6faf8;

    /* =================================================================
       UI-VISUAL-DIFFERENTIATION-001 — QUATRE DOMAINES CHROMATIQUES
       -----------------------------------------------------------------
       Ces jetons entrent dans le `:root` d'autorité, pas dans un septième.

         VERT    --accent   = INTERACTION : lien, bouton, focus, état actif.
         VIOLET  --symbol   = SYMBOLIQUE  : glyphe, signe, figure, identité.
         CORAIL  --tension  = TENSION portant une information.
         AMBRE   --marker   = REPÈRE MESURÉ, DATÉ OU REMARQUABLE :
                              degré, arc, quantité, date, période,
                              rétrogradation, exaltation comme repère
                              catégoriel.

       Règle : une couleur qui ne porte aucune de ces informations ne
       s'emploie pas. Le violet n'est pas une seconde couleur d'interface :
       aucun lien, aucun bouton, aucun fond général ne le prend.

       Le violet n'est pas inventé — il existait déjà comme jeton LOCAL de
       la roue (`--wheel-sign`, section 13), où il signifie « signe » depuis
       le début. Il sort de la roue avec le sens qu'il y portait.

       Contrastes mesurés sur --bg #f6f3ee :
         --symbol 7,21   --symbol-deep 10,10   --tension 5,34   --marker 4,90
       20 couples réellement employés vérifiés, 0 sous 4,5:1.
       ================================================================= */
    --symbol: #4f4693;
    --symbol-deep: #3a3272;
    --symbol-line: #c9c4e4;
    --symbol-wash: #f1eff8;
    /* --symbol-on-dark existe déjà sous le nom --wheel-sign (section 13) */
    --tension: #a8443a;
    --tension-line: #e6c4bd;
    --marker: #9a5b0c;
    --marker-deep: #7d4a09;
    --marker-line: #e8d9be;
    /* Surface de ZONE, sourde. --surface-muted existe déjà plus haut. */

    /* ---- RYTHME : trois intervalles NOMMÉS (voir section 24) ---- */
    --flow-tight: 28px;
    --flow: 56px;
    --flow-break: 104px;
    /* ---- GOUTTIÈRES : ratio >= 0,09 de la largeur de colonne ---- */
    --gut-2: 56px;
    --gut-3: 40px;
    --gut-4: 30px;
}

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-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;
}

/* =====================================================================
   Orientation éditoriale des pages sans promotion d'outil
   ---------------------------------------------------------------------
   Rendu sur les seules pages dont la décision produit est « aucun outil
   pertinent » (cf. ToolPromotionResolver). Le lien y remplace l'`action-row` :
   il oriente vers d'autres lectures, il n'appelle pas à une action.

   Classe NEUVE et unique, posée en fin de fichier comme le reste des
   correctifs : `.secondary-action--light` est écrasé plus haut par une
   déclaration tardive de `.secondary-action`, et réutiliser ces classes
   redonnerait au lien l'apparence d'un bouton plein — l'inverse de l'intention.
   Ce défaut de cascade est global (174 usages) et reste à traiter à part ;
   on ne le contourne pas ici par une nouvelle variante de bouton.
   ===================================================================== */
.editorial-hero__guides-link {
    margin-top: 18px;
    font-size: 1rem;
}

.editorial-hero__guides-link a {
    color: var(--accent-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    font-weight: 600;
}

.editorial-hero__guides-link a::after {
    /* Flèche décorative : le libellé se suffit aux lecteurs d'écran. */
    content: " \2192";
    text-decoration: none;
}

.editorial-hero__guides-link a:hover,
.editorial-hero__guides-link a:focus-visible {
    color: var(--ink);
}

/* PRODUCT-LED-SEO-001 (contrat B) : bannière-réponse du focus + carte visée. */
.chart-focus-banner {
    border-left: 3px solid var(--accent, #b8860b);
}

.interpretation-card--focused {
    outline: 2px solid var(--accent, #b8860b);
    outline-offset: 2px;
}

/* =====================================================================
   ═══ CLARTÉ 2026-08 ═══  couche de SIMPLIFICATION (dernier bloc)
   ---------------------------------------------------------------------
   POURQUOI UNE COUCHE FINALE, ET POURQUOI CELLE-CI DOIT RESTER LA SEULE
   ---------------------------------------------------------------------
   Ce fichier porte quinze générations de styles empilées : `.tool-panel`
   est déclaré vingt fois, `.content-band` vingt-et-une fois, `.secondary-
   action` seize fois. Supprimer les règles anciennes une à une ferait
   remonter la génération d'avant, qui est en général PIRE (le décor
   revient). C'est exactement l'erreur documentée dans le bloc « fonds
   animés » plus haut.

   La couche ci-dessous n'est donc pas « une génération de plus » : c'est
   un point de vérité unique pour la PRÉSENTATION, appuyé sur un point de
   vérité unique pour la COULEUR (le `:root` réécrit plus haut, l. ~3238).
   Les deux ensemble gouvernent l'apparence ; tout le reste du fichier est
   désormais du legacy dont on ne dépend plus pour l'aspect général.

   GOUVERNANCE — quatre règles, à respecter pour toute retouche future :
     1. La couleur ne s'écrit PAS ici : elle vient de `var(--…)`. Une
        couleur en dur dans ce bloc est un bug.
     2. `!important` est réservé à la défaite d'une génération antérieure
        et à rien d'autre. Sur une propriété qu'aucune ancienne règle ne
        déclare, il est interdit.
     3. On RETIRE (background/border/shadow/radius) plutôt qu'on ajoute.
        Ajouter un ornement ici, c'est rouvrir le cycle.
     4. Toute règle nouvelle entre dans une des sections numérotées
        ci-dessous. Pas de règle orpheline en fin de bloc.

   DOCTRINE VISUELLE
     Moins de conteneurs, moins de bordures, moins de couleurs, moins
     d'effets ; plus de hiérarchie, plus d'espace.
     Une carte n'existe que si le bloc est un OBJET (lien cliquable,
     action, saisie, résultat isolé). Une section de contenu n'est pas
     un objet : elle vit dans l'espace et la typographie.

   ---------------------------------------------------------------------
   BASELINE ÉTENDUE — UI-VISUAL-DIFFERENTIATION-001, phases A à C.1.
   Neuf règles démontrées sur trois pilotes mesurés : `projets/UI_BASELINE_001.md`.
   Implémentation : section 24. Le texte n'est PAS recopié ici — ce fichier
   est servi au navigateur, et 1,9 Ko de doctrine gzippée sortirait du budget
   de poids fixé au chantier (45 Ko). La règle se lit dans le dépôt, pas dans
   le réseau.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DÉCOR — dépose
   Quatre couches plein écran (ciel étoilé, dégradés, obliques
   décoratives) se superposaient sur toutes les pages. Elles partent.
   Le fond est une seule surface claire, sans texture.
   --------------------------------------------------------------------- */
html {
    background: var(--bg) !important;
    background-image: none !important;
    animation: none !important;
}

body {
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--ink);
}

html::before,
html::after,
body::before,
body::after,
.starfield,
.tool-hero::before,
.tool-hero::after,
.tool-hero > div::before,
.tool-panel::before,
.tool-panel::after,
.eyebrow::before,
.site-footer::before,
.site-footer::after,
.editorial-hero::before,
.editorial-hero::after,
.product-hero::before,
.product-hero::after {
    display: none !important;
    content: none !important;
}

/* Halos et ombres portées : une interface claire ne s'empile pas en
   profondeur. Ne survivent que les deux surfaces qui doivent flotter
   au-dessus du contenu (menu déroulant, suggestions de ville). */
*:not(.nav-panel):not(.city-suggestions) {
    text-shadow: none;
}

.tool-hero,
.tool-panel,
.result-panel,
.interpretation-card,
.tool-category,
.tool-feature-card,
.faq-card,
.score-card,
.table-wrap,
.home-command,
.tool-link-grid a,
.profile-fieldset,
.manual-coordinates,
.chart-wheel-panel,
.secondary-action,
.secondary-action--light,
button,
.data-section,
.content-band,
.dominant-panel,
.editorial-depth-panel,
.tool-seo-panel,
.seo-depth-section {
    box-shadow: none !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------
   2. CONTENEURS ET RYTHME
   Une seule largeur de page, une seule mesure de lecture, un seul
   intervalle entre sections. C'est le rythme qui sépare, pas les traits.
   --------------------------------------------------------------------- */
:root {
    --wrap: 1080px;
    /* CHROME-FIX-001. Le chrome partageait la mesure de lecture : header,
       barre de contexte et pied s'arrêtaient exactement là où s'arrête un
       paragraphe. Le chrome encadre la page, il n'en est pas une colonne :
       il lui faut sa propre autorité, un cran plus large, et une seule pour
       le haut et le bas. Le contenu, lui, ne bouge pas. */
    --wrap-chrome: 1280px;
    --wrap-tight: 760px;
    --gap-section: clamp(48px, 6vw, 88px);
}

/* Le chrome : quatre conteneurs, une seule largeur, la même en haut et en bas. */
.site-header__inner,
.site-header__utility-inner,
.site-footer__top,
.site-footer__bottom {
    width: min(var(--wrap-chrome), calc(100% - 40px));
    max-width: none;
    margin-inline: auto;
}

.tool-hero,
.tool-grid,
.content-band,
.data-section,
.home-hero,
.home-flow,
.home-split,
.home-proof,
.simple-reading,
.seo-depth-section,
.editorial-depth-panel,
.tool-seo-panel,
.editorial-hero,
.product-hero,
.breadcrumb,
.editorial-section,
.report-section {
    width: min(var(--wrap), calc(100% - 40px));
    max-width: none;
    margin-inline: auto;
}

/* FILET DE SÉCURITÉ : une `<section>` de premier niveau SANS AUCUNE classe
   n'est couverte par aucune des largeurs nommées ci-dessus et se retrouve
   collée aux deux bords de la fenêtre. Constaté en production sur les
   pages d'erreur (404, 405, 500) et sur « éphéméride indisponible », qui
   composent en HTML nu.

   Le sélecteur vise `:not([class])` — l'absence TOTALE de classe — et
   jamais un conteneur volontairement pleine largeur : ceux-là en portent
   toujours une. Il protège aussi les gabarits futurs écrits de la même
   façon, ce qu'une correction page par page n'aurait pas fait. */
main > section:not([class]),
main > article:not([class]) {
    width: min(var(--wrap), calc(100% - 40px));
    margin-inline: auto;
}

@media (max-width: 640px) {
    main > section:not([class]),
    main > article:not([class]) {
        width: calc(100% - 32px);
    }
}

/* Mesure de lecture : le texte courant ne dépasse jamais ~68 caractères,
   même quand son conteneur est large. */
.content-band > p,
.data-section > p,
.simple-reading p,
.section-heading p,
.lede,
.home-claim,
.interpretation-card p,
.editorial-section > p,
.seo-depth-section > p {
    max-width: 68ch;
}

/* UI-VISUAL-DIFFERENTIATION-001 — LE `!important` EST RETIRÉ.
   -----------------------------------------------------------------------
   Cette règle était la cause n° 1 de l'uniformité mesurée en Phase A :
   un intervalle UNIQUE (86 px desktop, 44 px mobile) séparait tous les
   blocs de premier niveau de TOUTES les pages, et le `!important`
   interdisait à une page d'avoir son rythme propre. Mesuré : écart médian
   86 px avec un écart-type de 0 à 10 dans les onze familles éditoriales ;
   seul l'accueil, qui portait ses propres règles, s'en échappait.

   Le défaut par défaut est CONSERVÉ à l'identique pour les ~1 200 pages
   non pilotes : elles ne bougent pas d'un pixel. Ce qui change, c'est
   qu'une page peut désormais le redéfinir sans surenchérir en
   `!important`. Les trois rythmes gouvernés sont en section 24.

   Portée du retrait : CETTE règle et elle seule. Aucun nettoyage du
   legacy n'est entrepris — retirer une neutralisation ferait remonter la
   génération d'avant, qui est en général pire. */
/* AUTORITÉ DU RYTHME — sans `!important`, mais avec la spécificité qu'il faut.
   -----------------------------------------------------------------------
   Le `!important` retiré, deux générations antérieures reprenaient la main :
   `main > .content-band` (0,1,1) déclare `clamp(64px, 7vw, 108px)` à la
   ligne ~5153, et `.content-band` (0,1,0) déclare `14px` à la ligne ~1228.
   Mesuré sur les 52 URL : l'écart médian passait de 88 à 101 px en desktop,
   et les pages perdaient ~209 px de hauteur. Ce n'était pas voulu.

   On ne touche à AUCUNE règle ancienne — les retirer ferait remonter celle
   d'avant. On leur oppose une spécificité supérieure depuis la couche
   d'autorité : les deux `:not()` portent chacun le poids d'une classe, donc
   le sélecteur pèse 0,2,1 et gagne partout sans `!important`.

   `.vd-band` est exclue parce qu'une bande gère son propre intervalle
   (section 24.3) : elle EST la rupture, elle ne s'y ajoute pas.

   Les pages non pilotes retrouvent ainsi leur rythme au pixel près ; seules
   les grammaires le redéfinissent, avec une spécificité encore supérieure. */
main > *:not(:first-child):not(.vd-band) {
    margin-top: var(--gap-section);
}

.content-band,
.data-section,
.tool-hero,
.seo-depth-section,
.tool-seo-panel,
.editorial-depth-panel {
    padding-block: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHIE — la hiérarchie remplace les boîtes
   Trois niveaux réellement distincts (h1 / h2 / h3) et un corps de texte
   confortable. Aucune police ajoutée : la pile système déjà déclarée
   suffit, on ne travaille que l'échelle, la graisse et l'interlignage.
   --------------------------------------------------------------------- */
body {
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* GLYPHES ASTROLOGIQUES EN PRÉSENTATION TEXTE
   ------------------------------------------------------------------
   Les signes et les planètes sont écrits en caractères Unicode dans le
   contenu (« ♃ Jupiter en ♎ Balance »). La plupart des systèmes leur
   donnent une présentation EMOJI par défaut : le ♎ du titre devenait un
   médaillon vert plein, hors palette, plus voyant que le titre lui-même.

   On ne touche pas au texte. On force la présentation texte, de deux
   façons complémentaires : `font-variant-emoji` sur les navigateurs
   récents, et une famille de secours restreinte par `unicode-range` aux
   blocs de symboles — elle ne capte QUE ces caractères, tout le reste du
   texte continue d'être rendu par la pile habituelle. Si aucune de ces
   polices n'est installée, on retombe sur le comportement actuel : pas
   de regression possible.

   Effet : le glyphe prend la couleur de l'encre, donc l'identite
   astrologique reste — elle passe simplement du medaillon a la lettre. */
@font-face {
    font-family: "Astro Glyphs";
    src: local("Noto Sans Symbols2"), local("Noto Sans Symbols 2"),
         local("Segoe UI Symbol"), local("Apple Symbols"),
         local("DejaVu Sans"), local("Arial Unicode MS");
    unicode-range: U+2190-21FF, U+2600-26FF, U+2700-27BF, U+2B00-2BFF;
    font-display: swap;
}

html,
body {
    font-family: "Astro Glyphs", Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-emoji: text;
}

h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.022em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--ink) !important;
    margin: 0 0 0.5em !important;
    max-width: 22ch;
}

h2 {
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.014em !important;
    font-weight: 650 !important;
    text-transform: none !important;
    color: var(--ink) !important;
    margin: 0 0 0.6em !important;
    max-width: 34ch;
}

h3 {
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
    text-transform: none !important;
    color: var(--ink) !important;
    margin: 0 0 0.4em !important;
}

p,
li {
    color: var(--ink);
}

.muted,
.hint,
.source-note,
.sky-updated,
.freshness-note {
    color: var(--muted) !important;
}

/* Sur-titre : c'est une étiquette, pas un titre. Discrète et sans trait. */
.eyebrow {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin: 0 0 0.6em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* Chapeau : plus grand que le corps, jamais aussi fort qu'un titre. */
.lede,
.home-claim {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem) !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
}

/* Liens de contenu : soulignés, à l'encre, sans effet. Le glossaire ne
   se distingue plus par une couleur mais par un souligné pointillé. */
main a {
    color: var(--accent);
    text-underline-offset: 3px;
}

main a:hover {
    color: var(--accent-dark);
}

.glossary-term {
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-decoration-color: var(--line) !important;
    text-decoration-thickness: 1px !important;
    background: none !important;
    border: 0 !important;
}

.glossary-term:hover {
    text-decoration-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------
   4. DÉCARTONNAGE — la règle centrale du chantier
   Ces blocs sont des SECTIONS de contenu, pas des objets. Ils perdent
   fond, bordure, rayon, ombre et rembourrage. Ce qui les sépare : le
   rythme vertical défini en 2.
   --------------------------------------------------------------------- */
.tool-hero,
.tool-hero > div,
.editorial-hero,
.product-hero,
.content-band,
.data-section,
.section-heading,
.simple-reading,
.home-hero,
.home-split,
.home-proof,
.home-proof article,
.seo-depth-section,
.tool-seo-panel,
.editorial-depth-panel,
.editorial-section,
.report-section,
.dominant-panel,
.interpretation-simple,
.interpretation-expert,
.breadcrumb,
.result-facts,
.result-facts div,
.notice,
.restored-note,
.source-note,
.continue-strip,
.related-tool-strip,
.action-row,
.form-stack,
.field-grid,
.simple-reading p {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tool-hero,
.editorial-hero,
.product-hero,
.home-hero,
.section-heading,
.simple-reading,
.breadcrumb,
.dominant-panel,
.interpretation-simple,
.interpretation-expert,
.seo-depth-section,
.tool-seo-panel,
.editorial-depth-panel {
    padding: 0 !important;
}

/* Un bloc d'interprétation est de la prose : jamais une carte. La règle
   `:has()` de 2026-07 ne couvrait que les blocs sans lien ni <dl> ; ici
   elle s'applique à tous, y compris ceux qui contiennent un lien
   contextuel — un lien dans un paragraphe n'en fait pas un objet. */
.interpretation-card,
.tool-panel:not(form):not(:has(form)),
.result-panel {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.interpretation-card::before,
.interpretation-card::after,
.result-panel::before,
.result-panel::after {
    display: none !important;
}

.interpretation-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 56px) !important;
}

/* Séparateur : une seule règle horizontale fine, jamais un cadre.
   Réservée aux ruptures réelles à l'intérieur d'une longue lecture. */
hr,
.section-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: clamp(32px, 4vw, 56px);
}

/* Dépliants (divulgation progressive) : un titre cliquable, pas un
   panneau. Le triangle natif suffit comme affordance. */
details.section-disclosure,
details.editorial-faq__item,
.tool-panel details,
.content-band details {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* La navigation utilise elle aussi details/summary : elle est exclue,
   sinon les déclencheurs du menu perdent leur zone cliquable. */
details:not(.nav-group) > summary {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* 8 px, pas 12 : la page du theme astral porte une cinquantaine de
       depliants ; le rembourrage du seul `summary` y pesait 1 176 px. */
    padding: 8px 0 !important;
    min-height: 40px;
    display: flex;
    align-items: center;
    color: var(--accent) !important;
    font-weight: 600;
    cursor: pointer;
}

/* Sommaire d'un long article : c'est une liste de liens, deja distincte
   par sa forme. Le cadre arrondi teinte n'ajoute rien — un filet en tete
   suffit a marquer qu'on peut sauter ce bloc. */
.editorial-toc {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 0 !important;
}

.editorial-faq__item {
    border-bottom: 1px solid var(--line) !important;
}

.editorial-faq__item > summary {
    color: var(--ink) !important;
}

/* ---------------------------------------------------------------------
   5. CE QUI RESTE UNE CARTE
   Uniquement les objets : tuiles de lien, catégories d'outil, formulaire
   de saisie. Une carte = fond blanc, une hairline, un rayon modéré.
   Aucune ombre, aucun mouvement au survol (seule la bordure répond).
   --------------------------------------------------------------------- */
.tool-link-grid a,
.home-command,
.tool-category,
.tool-feature-card,
.content-list li,
.faq-card,
form.tool-panel,
.tool-panel:has(> form) {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
}

.tool-link-grid a:hover,
.tool-link-grid a:focus-visible,
.home-command:hover,
.home-command:focus-visible,
.tool-category:hover,
.tool-feature-card:hover,
.content-list li:hover {
    border-color: var(--accent) !important;
    transform: none !important;
    box-shadow: none !important;
}

.content-list li {
    padding: 12px 14px 12px 34px !important;
}

/* Certaines `.content-list` enveloppent un `<ul>` : le `<li>` heritait alors
   d'une puce native EN PLUS de la pastille `::before` de la liste. Deux
   marqueurs pour un seul element. La puce native part, la pastille reste. */
.content-list ul,
.content-list ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

/* ---------------------------------------------------------------------
   6. BOUTONS — trois rangs, visuellement hiérarchisés
     primaire   `.secondary-action`            plein, accent   1 par zone
     secondaire `.secondary-action--light`     contour discret
     lien       `.table-action`, `.link-button`  souligné simple
   Le rang « secondaire » était rendu identique au primaire par une
   déclaration tardive (défaut documenté en 2026-07, 178 usages) : il est
   réparé ici, ce qui suffit à casser l'effet « quatre CTA équivalents ».
   --------------------------------------------------------------------- */
/* Sélecteur volontairement de FAIBLE spécificité (un élément) : toute
   variante nommée (`.print-button`, `.link-button`, `.nav-burger`…) doit
   pouvoir le corriger avec une simple classe. */
button,
.secondary-action,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px !important;
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
    background: var(--accent) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 0.97rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
}

button:hover,
button:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Le burger n'est pas un bouton d'action : il reprend son rôle d'icône. */
.nav-burger,
.nav-burger:hover,
.nav-burger:focus-visible {
    background: none !important;
    border: 1px solid var(--line) !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
}

.secondary-action--light,
button.is-quiet {
    background: none !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-weight: 500 !important;
}

.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    background: var(--surface-muted) !important;
    border-color: var(--muted) !important;
    color: var(--ink) !important;
}

.table-action,
.link-button {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
}

.table-action:hover,
.link-button:hover {
    color: var(--accent-dark) !important;
    background: none !important;
}

/* Bandes de liens sous un résultat : ce sont des liens, pas des CTA.
   Sans cela, huit boutons pleins se disputaient la même page. */
.related-tool-strip .secondary-action,
.continue-strip .secondary-action,
.tool-seo-panel .secondary-action,
.editorial-depth-panel .secondary-action,
.seo-depth-section .secondary-action {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--accent) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

.related-tool-strip,
.continue-strip .related-tool-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 28px !important;
}

.action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 22px !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------
   7. FORMULAIRES — un seul niveau de surface
   Le champ est posé sur la page (ou sur la carte du formulaire), jamais
   dans une boîte dans une boîte dans une boîte.
   --------------------------------------------------------------------- */
form.tool-panel,
.tool-panel:has(> form) {
    padding: clamp(20px, 3vw, 30px) !important;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink) !important;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    background-image: none !important;
    color: var(--ink) !important;
    font: inherit !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 1px;
    border-color: var(--accent) !important;
}

::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.field-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px 20px !important;
}

.form-stack {
    display: grid !important;
    gap: 18px !important;
}

/* Groupe de champs (« Personne A » / « Personne B » de la synastrie et du
   composite). C'etait une carte sombre DANS la carte du formulaire : deux
   niveaux de surface, et des libelles fonces sur fond fonce apres le
   passage en clair. Le groupe n'est pas un objet — c'est un intertitre
   suivi de ses champs. Il perd sa boite ; sa legende devient l'etiquette. */
fieldset,
.profile-fieldset {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 16px !important;
}

legend,
.profile-fieldset legend {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}

.hint {
    font-size: 0.86rem !important;
    margin-top: 6px !important;
}

/* ---------------------------------------------------------------------
   8. HEADER — plus bas, plus calme
   Deux étages conservés (le bandeau porte le ciel du jour et le compte),
   mais sans fond distinct, sans dégradé, sans pastille de marque, et
   nettement moins hauts.
   --------------------------------------------------------------------- */
.site-header {
    background: var(--bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}

.site-header::before,
.site-header::after,
.site-header__utility::before,
.site-header__utility::after,
.brand::before,
.brand::after {
    display: none !important;
    content: none !important;
}

.site-header__utility {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 0 !important;
}

.site-header__utility-inner {
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
}

.site-header__utility a,
.sky-ticker {
    color: var(--muted) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.site-header__utility a:hover {
    color: var(--ink) !important;
}

.site-header__utility-cta {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

.site-header__inner {
    min-height: 58px !important;
    padding: 0 !important;
    gap: 24px;
}

.brand {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--ink) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

/* Uniquement au-dessus du seuil du tiroir mobile : en dessous,
   `.nav-menu` est le tiroir lui-même, masqué par défaut. */
@media (min-width: 1024px) {
    .nav-menu {
        display: flex !important;
        align-items: center !important;
        gap: 4px 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

.nav-trigger,
.nav-link {
    color: var(--ink) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    background: none !important;
    border: 0 !important;
    padding: 6px 0 !important;
    list-style: none;
}

/* Le chevron de dépliement existe déjà (`.site-header .nav-trigger::after`) :
   on l'atténue seulement, sans en redéclarer un second. */
.site-header .nav-trigger::after {
    opacity: 0.5;
}

.site-header .nav-group[open] > .nav-trigger {
    background: none !important;
    color: var(--accent) !important;
}

.nav-trigger:hover,
.nav-link:hover {
    color: var(--accent) !important;
}

/* Un seul appel à l'action dans la barre, et il reste discret : la
   navigation n'est pas l'endroit d'un bouton plein. */
.nav-cta {
    background: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
}

.nav-cta:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.nav-panel {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -20px rgba(27, 26, 23, 0.5) !important;
}

.nav-panel a {
    color: var(--ink) !important;
}

.nav-panel a:hover {
    color: var(--accent) !important;
}

.nav-col h2 {
    font-size: 0.74rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    border: 0 !important;
    margin-bottom: 0.7em !important;
}

.nav-burger__line {
    background: var(--ink) !important;
}

/* Fil d'Ariane : une ligne de texte, pas une pilule bordée. */
.breadcrumb {
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb span {
    color: var(--muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.breadcrumb a:hover {
    color: var(--accent) !important;
}

/* ---------------------------------------------------------------------
   9. FOOTER — un plan du site, à plat
   --------------------------------------------------------------------- */
.site-footer {
    /* CHROME-FIX-001 : ce `background: none` était l'autorité réelle du fond
       du pied — c'est lui qui le fondait dans la toile. Il prend la teinte de
       fin de page plutôt que d'être neutralisé plus bas par un override. */
    background: var(--bg-footer) !important;
    background-image: none !important;
    /* Le filet supérieur séparait le pied quand il n'avait aucune couleur
       propre. La teinte le fait maintenant : deux séparateurs pour une seule
       frontière, c'est le trait en trop que la doctrine refuse. Rien ne le
       remplace — ni ombre, ni seconde bordure. */
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: clamp(64px, 8vw, 112px) !important;
    padding-block: clamp(36px, 4vw, 56px) 28px !important;
    /* CHROME-FIX-001 : une génération antérieure posait `padding: 54px
       clamp(16px, 3vw, 42px) 30px` ; seul le padding VERTICAL était repris
       ici, et le retrait horizontal survivait. Mesuré à 1024 px, il rétrécissait
       le pied à 921 px quand le header en faisait 982, et à 390 px à 324 px
       quand le contenu en fait 358. Le pied n'a pas de retrait propre : ce
       sont ses conteneurs qui portent la largeur, exactement comme en haut. */
    padding-inline: 0 !important;
}

.site-footer__top,
.site-footer__bottom,
.site-footer__brand,
.site-footer__col,
.site-footer__signs,
.site-footer__zodiac a {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-footer__bottom {
    border-top: 1px solid var(--line) !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
}

.site-footer__logo {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    text-transform: none !important;
}

.site-footer__col h2 {
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin-bottom: 0.8em !important;
}

/* Les liens du pied heritaient d'un `font-weight: 800` d'une generation
   anterieure : un plan de site entier en gras crie plus fort que le
   contenu qu'il accompagne. */
.site-footer a,
.site-footer p {
    color: var(--muted) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.site-footer a:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
}

.site-footer__zodiac a {
    padding: 4px 0 !important;
}

/* Les six colonnes se repliaient sur deux rangees de cinq, et la rangee
   du bas heritait de la hauteur de la plus haute colonne du haut : ~150 px
   de vide au milieu du pied. Une grille qui s'adapte les remet sur une
   seule ligne. */
.site-footer__cols {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
    align-items: start !important;
    gap: 26px 28px !important;
}

/* Le ruban des douze signes est un plan de site, pas une decoration : les
   glyphes prennent la couleur du texte qu'ils accompagnent. */
.site-footer__signs-label,
.site-footer__zodiac-glyph {
    color: var(--muted) !important;
}

/* ---------------------------------------------------------------------
   10. DONNÉES ASTROLOGIQUES
   Là seulement, une structure plus dense est justifiée : ce sont des
   valeurs à comparer, pas de la prose. Tableaux à filets horizontaux,
   listes de faits en colonnes, aucune boîte.
   --------------------------------------------------------------------- */
.table-wrap {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

/* Le rembourrage des cellules est le premier poste de hauteur artificielle
   du site : sur la page du theme astral, 220 cellules a 10 px en haut et en
   bas font a elles seules 4 400 px. A 7 px, la densite reste confortable et
   la page perd ~1 300 px sans qu'une seule information disparaisse. */
th,
td {
    padding: 7px 14px 7px 0 !important;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: none !important;
    color: var(--ink) !important;
}

th {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

/* Faits d'un résultat (instant, fuseau, lieu, système de maisons…) :
   une ligne de définitions, pas six cases bordées. */
.result-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 36px !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
}

.result-facts div {
    padding: 0 !important;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.result-facts dt {
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

.result-facts dd {
    margin: 0 !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
}

/* La roue est le seul objet qui garde une surface sombre : le contraste
   des glyphes et des lignes d'aspect y gagne réellement. Elle est posée
   sur la page claire, sans cadre supplémentaire. */
.chart-wheel-wrap {
    background: #14161a !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: clamp(12px, 2vw, 22px) !important;
    box-shadow: none !important;
}

.chart-wheel-panel {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #d8d4cc !important;
    font-size: 0.9rem !important;
    padding: 10px 4px 0 !important;
    text-align: center;
}

/* ---------------------------------------------------------------------
   11. MOUVEMENT
   Aucune transformation au survol nulle part, et rien qui bouge pour qui
   demande moins d'animation.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   12. MOBILE 390 px
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --gap-section: 44px;
    }

    body {
        font-size: 16px;
    }

    .site-header__inner,
    .site-header__utility-inner,
    .site-footer__top,
    .site-footer__bottom,
    .tool-hero,
    .tool-grid,
    .content-band,
    .data-section,
    .home-hero,
    .home-flow,
    .home-split,
    .home-proof,
    .simple-reading,
    .seo-depth-section,
    .editorial-depth-panel,
    .tool-seo-panel,
    .editorial-hero,
    .product-hero,
    .breadcrumb,
    .editorial-section,
    .report-section {
        width: calc(100% - 32px);
    }

    .site-header__utility-inner {
        min-height: 30px !important;
    }

    .sky-ticker__phase,
    .sky-ticker__date {
        display: none;
    }

    .interpretation-grid {
        grid-template-columns: 1fr !important;
    }

    .result-facts {
        gap: 2px 24px !important;
    }

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

/* ---------------------------------------------------------------------
   13. ROUE — jeu de couleurs propre à l'objet
   La roue est le seul élément posé sur une surface sombre. Ses couleurs
   ne peuvent donc pas venir de `--ink`/`--line`, qui sont maintenant
   foncés. Elles sont déclarées ici comme un jeu de jetons LOCAL à la
   roue : la règle « pas de couleur en dur » est respectée, et rien de
   ceci ne fuit vers le reste de l'interface.
   --------------------------------------------------------------------- */
:root {
    --wheel-bg: #14161a;
    --wheel-plate: #191c21;
    --wheel-ink: #ece7dc;
    --wheel-line: rgba(236, 231, 220, 0.26);
    --wheel-axis: #4fb9a5;
    --wheel-harmonic: #4fb9a5;
    --wheel-tension: #e08472;
    --wheel-sign: #b9b1e8;
}

.chart-wheel {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin-inline: auto;
}

.wheel-ring {
    fill: var(--wheel-plate) !important;
    stroke: var(--wheel-line) !important;
}

.wheel-ring--outer {
    fill: var(--wheel-bg) !important;
    stroke: var(--wheel-line) !important;
}

.wheel-sign {
    fill: var(--wheel-sign) !important;
}

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

.planet-dot {
    fill: var(--wheel-ink) !important;
    stroke: var(--wheel-bg) !important;
}

.planet-marker,
.house-line {
    stroke: var(--wheel-line) !important;
}

.house-line--angle {
    stroke: var(--wheel-axis) !important;
}

.aspect-line--conjunction,
.aspect-line--trine,
.aspect-line--sextile {
    stroke: var(--wheel-harmonic) !important;
}

.aspect-line--square,
.aspect-line--opposition {
    stroke: var(--wheel-tension) !important;
}

.planet-label:hover,
.planet-label:focus,
.planet-label.is-active,
.planet-dot:hover,
.planet-dot:focus,
.planet-dot.is-active {
    fill: var(--wheel-axis) !important;
}

/* ---------------------------------------------------------------------
   14. THÈME ASTRAL — la page de résultat
   L'ordre de révélation retenu au prototype est conservé, car il est
   juste : identité de la carte → roue → clés essentielles → lecture →
   détail. Ce qui est abandonné, c'est son esthétique (planche technique
   sépia, grille imprimée, monospace partout, cadres imbriqués).

   Namespace `pc-` = « planche du ciel ». Il ne sert que ce gabarit.
   --------------------------------------------------------------------- */
.chart-page > * + * {
    margin-top: var(--gap-section);
}

.pc-masthead,
.pc-console,
.pc-result,
.pc-keep {
    width: min(var(--wrap), calc(100% - 40px));
    margin-inline: auto;
}

.pc-masthead {
    background: none;
    border: 0;
    padding: 0;
}

.pc-masthead__kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.6em;
}

.pc-masthead__lede {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 68ch;
}

/* Identité de la carte : six faits, une seule ligne de définitions.
   L'ancienne version en faisait six cases bordées côte à côte. */
.pc-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 36px;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}

.pc-identity > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
}

.pc-identity dt {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.pc-identity dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

/* Avant calcul : le formulaire est l'objet principal, à gauche ; ce que
   la carte contiendra reste du texte, à droite. Après calcul, le
   formulaire se replie derrière un simple lien et la colonne disparaît. */
/* `!important` requis : l'élément porte aussi `.tool-grid`, dont la
   déclaration de grille est elle-même en !important (section 15). */
.pc-console {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: clamp(28px, 4vw, 56px) !important;
    align-items: start;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Après calcul, le formulaire n'est plus qu'un repli : la page passe
   sur une seule colonne et la synthèse prend toute la largeur. */
.pc-console.pc-console--done {
    display: block !important;
}

.pc-revise {
    margin-bottom: 8px;
}

.pc-revise > summary {
    display: inline-flex;
    padding: 0 !important;
    color: var(--accent) !important;
    font-weight: 500 !important;
    font-size: 0.95rem;
}

.pc-form {
    display: grid;
    gap: 18px;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: clamp(20px, 3vw, 28px) !important;
}

.pc-console--done .pc-form {
    margin-bottom: 8px;
}

.pc-unknown-time .checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
}

.pc-unknown-time input[type="checkbox"] {
    width: auto;
    min-height: 0;
    margin-top: 4px;
}

.pc-consequence {
    margin-top: 6px;
}

.pc-await {
    background: none;
    border: 0;
    padding: 0;
}

.pc-await ol {
    margin: 0 0 16px;
    padding-left: 1.15em;
    display: grid;
    gap: 8px;
    color: var(--muted);
}

.pc-await .status,
.pc-cartouche .status {
    font-size: 0.86rem;
    color: var(--muted);
}

/* Bloc de résultat immédiat (synthèse) : du texte, pas un panneau. */
.pc-console__aside {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* --- La planche : roue + clés ------------------------------------- */
.pc-result {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
}

.pc-plate {
    display: grid;
    gap: 16px;
}

.pc-plate__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 0;
    border: 0;
}

.pc-plate__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.pc-plate__scale {
    display: block;
    font-size: 0.86rem;
    color: var(--muted);
}

/* Légende : cinq repères de lecture de la roue. Elle appartient à la
   planche sombre, donc elle en emprunte les jetons. */
.pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--wheel-ink);
}

.pc-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wheel-ink);
}

.pc-legend i {
    width: 18px;
    height: 2px;
    background: var(--wheel-line);
}

.pc-legend .is-axis i { background: var(--wheel-axis); height: 3px; }
.pc-legend .is-conj i { background: var(--wheel-harmonic); }
.pc-legend .is-harm i { background: var(--wheel-harmonic); }
.pc-legend .is-tens i { background: var(--wheel-tension); }

/* Clés de lecture : quatre valeurs à comparer. Structure justifiée par
   la nature de la donnée, mais sans boîtes : un filet supérieur suffit. */
.pc-keys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-key {
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    background: none;
}

.pc-key__role {
    margin: 0 0 6px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.pc-key__value {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--ink);
}

.pc-key__glyph {
    margin-right: 4px;
}

.pc-key__detail {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.pc-key--absent .pc-key__value {
    color: var(--muted);
    font-weight: 500;
}

/* --- THEME-ASTRAL-UX-001 : roue et positions en regard --------------
   Sur grand écran, la roue occupait une colonne et laissait l'autre vide,
   pendant que les positions chiffrées vivaient 12 000 px plus bas dans un
   tableau replié. Les deux se répondent maintenant côte à côte.
   Sous 1100 px, une seule colonne : la roue pleine largeur, la liste
   ensuite. Aucun tableau de bord en deux colonnes sur téléphone. */
.pc-result {
    display: grid;
    gap: clamp(20px, 2.5vw, 34px);
    align-items: start;
    grid-template-areas:
        "planche"
        "cles"
        "positions";
}

.pc-plate            { grid-area: planche; }
.pc-keys             { grid-area: cles; }
.pc-positions-fold   { grid-area: positions; }

/* Grand écran : la roue et son relevé chiffré se répondent, les clés
   passent dessous sur toute la largeur. Sous 1100 px, une seule colonne,
   et l'ordre change : roue, puis les QUATRE clés essentielles, puis les
   dix lignes de positions. Mesuré : sans cette inversion, la liste
   repoussait les clés de 1 325 à 2 257 px sur téléphone. */
@media (min-width: 1100px) {
    .pc-result {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        grid-template-areas:
            "planche positions"
            "cles    cles";
    }
}

/* ÉTAT PAR DÉFAUT DIFFÉRENT SELON LA LARGEUR — la seule difficulté de ce
   lot. `open` est un attribut HTML : le serveur ne connaît pas le viewport,
   et aucune propriété CSS ne « ferme » un <details> ouvert. On part donc
   du repli (état voulu sur téléphone) et on force l'ouverture au-dessus de
   1100 px, là où la colonne de droite existe.

   Vérifié sur Chromium ET Firefox. Le sommaire n'est PAS masqué en grand
   écran, seulement rendu discret : si un moteur ignorait
   `::details-content`, l'utilisateur garderait un dépliant natif qui
   fonctionne — dégradation, pas perte d'accès. WebKit n'a pas pu être
   testé ici (dépendances système absentes). Aucun JavaScript. */
.pc-positions-fold > summary {
    padding: 10px 0 !important;
    color: var(--accent) !important;
    font-size: 0.9rem;
}

@media (min-width: 1100px) {
    .pc-positions-fold::details-content {
        content-visibility: visible;
        block-size: auto;
    }

    .pc-positions-fold > .pc-positions {
        display: block !important;
    }

    .pc-positions-fold > summary {
        list-style: none;
        cursor: default;
        padding: 0 0 8px !important;
        color: var(--muted) !important;
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--line);
        margin-bottom: 4px;
    }

    .pc-positions-fold > summary::-webkit-details-marker { display: none; }
}

/* Positions : une donnée par ligne, alignée en colonnes. Pas un tableau
   (rien à trier, rien à croiser), pas des cartes (ce ne sont pas des
   objets) — des lignes séparées par un filet, comme un relevé. */
.pc-positions {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pc-position {
    display: grid;
    grid-template-columns: 1.4em minmax(0, 1fr) minmax(0, 1.15fr) 3.6em;
    grid-template-areas: "glyphe nom signe deg" ". maison maison maison";
    align-items: baseline;
    gap: 1px 10px;
    padding: 9px 2px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.pc-position:first-child {
    border-top: 0;
}

.pc-position__glyph { grid-area: glyphe; color: var(--muted); }
.pc-position__name  { grid-area: nom; font-weight: 600; }
.pc-position__sign  { grid-area: signe; }
.pc-position__deg   { grid-area: deg; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pc-position__house { grid-area: maison; font-size: 0.82rem; color: var(--muted); }

.pc-position abbr {
    text-decoration: none;
    color: var(--solar);
}

/* --- Relation roue <-> donnée ---------------------------------------
   Le contrôleur `chart-link` pose `.is-linked` sur les marques SVG déjà
   rendues, à partir du `data-chart-label` qu'elles portent. Ces règles
   avaient disparu avec la feuille du prototype : le JavaScript tournait,
   la classe était posée, et rien ne se voyait. Elles reviennent ici.
   Sans JavaScript, aucune information n'est perdue — seule la mise en
   relation l'est. */
.pc-position:hover,
.pc-position:focus-visible,
.pc-key[data-body]:hover,
.pc-key[data-body]:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.pc-position:focus-visible,
.pc-key[data-body]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* L'etat actif doit etre PLUS lumineux que le repos, pas moins. Mesure de
   la premiere version : la pastille passait de #ece7dc (blanc casse) a
   #4fb9a5 (teal), soit 1,93:1 entre les deux etats — un changement de
   teinte vers du plus sombre, donc peu percu sur un plateau nuit.
   Elle garde maintenant sa clarte et gagne un anneau teal + du diametre :
   la difference se lit a la taille et au cerne, pas a un assombrissement. */
.planet-dot.is-linked {
    fill: var(--wheel-ink) !important;
    stroke: var(--wheel-axis) !important;
    stroke-width: 3;
    r: 7;
}

.planet-label.is-linked {
    fill: var(--wheel-axis) !important;
    font-weight: 700;
}

.planet-marker.is-linked {
    stroke: var(--wheel-axis) !important;
    stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .planet-dot,
    .planet-label,
    .planet-marker {
        transition: fill 120ms ease, stroke 120ms ease, r 120ms ease;
    }
}

/* --- Conserver cette carte ------------------------------------------
   Posée juste après la roue et les clés : le résultat vient d'être vu,
   c'est le moment où le conserver a un sens. Pas une carte de plus —
   un titre, une phrase, le formulaire (lui, est un objet de saisie). */
.pc-keep {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width: 900px) {
    .pc-keep {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .pc-keep .chart-actions {
        grid-column: 1 / -1;
    }
}

.pc-keep__text > * {
    max-width: 46ch;
}

.pc-keep .save-chart-form {
    margin-top: 0;
    max-width: none;
}

/* Sous 640 px, la ligne passe de trois hauteurs de texte à deux : le signe
   et la maison partagent la seconde. Mesuré : la liste tombe de 911 px à
   environ la moitié, sans qu'une seule donnée disparaisse. */
@media (max-width: 640px) {
    .pc-position {
        grid-template-columns: 1.4em minmax(0, 1fr) 4em;
        grid-template-areas:
            "glyphe nom   deg"
            ".      signe signe";
        padding: 7px 2px;
        row-gap: 0;
    }

    .pc-position__house {
        grid-area: signe;
        justify-self: end;
        align-self: baseline;
    }

    .pc-position__sign {
        font-size: 0.86rem;
        color: var(--muted);
    }
}

/* Actions de la planche : télécharger et imprimer sont des actions
   SECONDAIRES. L'action primaire de la page, c'est « dresser la carte ». */
.print-button,
.pc-plate__head .print-button,
.chart-actions .print-button {
    background: none !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-weight: 500 !important;
}

.print-button:hover,
.print-button:focus-visible {
    background: var(--surface-muted) !important;
    border-color: var(--muted) !important;
    color: var(--ink) !important;
}

.chart-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.save-chart-form {
    display: grid;
    gap: 14px;
    max-width: 34rem;
    margin-top: 16px;
    padding: clamp(18px, 2.5vw, 24px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

@media (max-width: 860px) {
    .pc-console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pc-masthead,
    .pc-console,
    .pc-result,
    .pc-keep {
        width: calc(100% - 32px);
    }

    .pc-keys {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------------------
   15. ACCUEIL
   Le hero portait deux boutons de même poids et une « console » sombre
   imitant un tableau de bord. Il reste : un titre, une phrase, UNE
   action principale, et un schéma d'orbite discret qui dit ce que fait
   le site sans prétendre être une interface.
   --------------------------------------------------------------------- */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(24px, 4vw, 56px) 0 !important;
}

.home-hero__copy {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 28px;
}

/* Les quatre « commandes » sont de vrais objets cliquables : elles
   gardent leur carte, mais toutes du même poids — aucune n'est mise en
   avant par une couleur, la première l'est par son ordre. */
.home-flow {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}

.home-command {
    display: grid !important;
    gap: 6px !important;
    padding: 20px !important;
    text-decoration: none !important;
    color: var(--ink) !important;
}

.home-command span {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted) !important;
}

.home-command strong {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--ink) !important;
}

.home-command em {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--muted) !important;
}

.home-command--primary {
    border-color: var(--muted) !important;
}

.home-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
    gap: clamp(28px, 4vw, 64px) !important;
    align-items: start !important;
}

.home-link-stack {
    display: grid !important;
    gap: 12px !important;
}

.home-link-stack a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.home-proof {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: clamp(28px, 3.5vw, 48px) !important;
}

.home-proof article > * + * {
    margin-top: 10px;
}

.simple-reading p {
    font-size: 1.05rem;
    color: var(--muted) !important;
    max-width: 68ch;
}

/* Index des outils : la grille de tuiles est justifiée (ce sont des
   liens vers des objets distincts), la section qui l'entoure ne l'est
   pas. `.tool-grid` redevient une simple grille. */
.tool-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 16px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.tool-link-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
}

.tool-link-grid a {
    padding: 12px 14px !important;
    text-align: center;
    text-decoration: none !important;
    color: var(--ink) !important;
    font-size: 0.94rem;
}

.tool-category,
.tool-feature-card {
    padding: 20px !important;
}

.tool-category a,
.tool-feature-card a {
    text-decoration: none !important;
}

/* --- HOME-UX-001 : la hiérarchie par la composition -------------------
   Mesuré avant : 17 surfaces blanches, dix bandes de même forme, le seul
   contenu daté du site enterré à 2,45 écran en mobile, et deux actions de
   hero de poids identique. Rien de ce qui suit n'invente de composant :
   on retire des surfaces, on change des largeurs, on resserre. */

/* L'action secondaire du hero cesse d'être un bouton. */
.home-actions__text {
    align-self: center;
    color: var(--accent) !important;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Les trois directions restent de vrais liens cliquables, mais cessent d'être
   trois cartes dominantes : la zone cliquable couvre toute la largeur de la
   colonne, le focus reste visible, la surface disparaît. */
/* `min-height: 210px` vient d'une génération où ces items étaient des tuiles
   de même gabarit : sans surface, il écartait le libellé de sa description de
   130 px. Un lien fort se compose sur sa hauteur de texte. */
.home-discovery .home-command {
    align-content: start;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 2px !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
}

/* Prototypé avant d'être gravé. Sans les numéros, les trois intitulés ne se
   distinguaient plus d'un texte gras — pendant que les quatre calculs rapides,
   EN DESSOUS, étaient soulignés, colorés et plus gras (17 px / 860 contre
   16,32 px / 650). La hiérarchie se lisait à l'envers, et elle se lisait déjà
   à l'envers AVEC les numéros : ceux-ci donnaient un statut d'objet, pas une
   force typographique.

   Les directions prennent donc l'idiome de lien fort du site — celui de
   `.table-action` : accent, souligné 1 px, offset 4 px — monté d'un cran en
   taille et en graisse. Rien de plus : ni flèche (les calculs rapides portent
   déjà un chevron), ni surface, ni badge. Le reste de la hiérarchie vient de la
   composition : titre + description, puis filet, puis liste compacte. */
.home-discovery .home-command strong {
    color: var(--accent) !important;
    font-size: 1.14rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
}

/* Retirer la surface avait emporté le seul retour de survol : un bloc
   entièrement cliquable recevait un focus clavier visible et rien au pointeur.
   Le survol reprend celui de `.table-action`. */
.home-discovery .home-command:hover strong {
    color: var(--accent-dark) !important;
    text-decoration-thickness: 2px !important;
}

.home-discovery .home-command em {
    color: var(--muted) !important;
}

/* Les calculs rapides sont le second niveau de poids de la même section. */
.home-discovery .home-link-stack {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 4px;
}

/* Le ciel du jour et les signes se lisent comme une seule séquence. */
.home-signs {
    margin-top: 12px !important;
}

.home-signs h2 {
    font-size: 1.24rem !important;
    margin-bottom: 2px !important;
}

/* Douze signes ne sont pas douze objets : c'est une rangée de liens, comme le
   ruban du pied. La cible tactile reste entière. */
.home-signs .tool-link-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 26px !important;
}

.home-signs .tool-link-grid a {
    align-items: center;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    min-height: 44px;
    padding: 0 !important;
    text-align: left;
}

/* La preuve passe en mesure de lecture : trois volets qui se suivent plutôt
   que trois colonnes de même poids, et 625 px de moins en mobile. */
.home-proof {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(var(--wrap-tight), calc(100% - 40px));
}

.home-proof article {
    display: grid;
    gap: 2px;
}

/* La FAQ suit : la page se resserre à mesure qu'elle passe du produit au texte.
   Les deux sections éditoriales de fin gardent `--wrap` — mesuré, en dessous
   leur composition à deux colonnes casse le titre sur six lignes. */
.home-closing .page-faq {
    width: min(var(--wrap-tight), calc(100% - 40px));
}

@media (max-width: 860px) {
    .home-hero__copy {
        gap: 12px !important;
    }
}

/* --- VISUAL-HIERARCHY-001 : le relief à l'échelle des sections ---------
   Mesuré : l'écart de luminance ENTRE les familles de la page valait 0,019
   quand le bruit À L'INTÉRIEUR d'une section valait 0,081. Au sens du signal,
   la page n'avait aucune structure à l'échelle où on la balaie : floutée à
   25 %, on ne distinguait que le hero et le pied.

   Le relief vient de quatre leviers déjà disponibles — l'échelle, la largeur,
   le rythme, le fond de section — et d'aucun composant nouveau. Confronté :
   ces leviers portent l'écart inter-familles à 0,054 sans toucher au bruit
   interne, et sans qu'aucune carte, bordure ou ombre ne réapparaisse.

   Le sanity-check a montré que rien de tout cela ne se généralise : un guide
   dont les neuf chapitres sont de rang égal n'a pas de familles à séparer, et
   le résultat natal a déjà une amplitude six fois supérieure grâce à sa roue.
   Ces règles restent donc strictement locales à l'accueil. */

/* Une bande est un CONTENEUR pleine largeur qui porte un fond. Ce n'est pas
   une carte : ni bordure, ni rayon, ni ombre, et le contenu garde ses propres
   largeurs à l'intérieur. */
/* MONTHLY-OFFER-CONVERSION-FIX-001 — la bande cesse d'être un objet d'accueil.
   La primitive n'avait rien de spécifique à la page d'accueil : c'est un
   conteneur qui porte un fond, et le seul besoin d'une autre page était le
   même — distinguer une section de ce qui l'entoure sans lui donner de carte.
   Le nom se généralise ; la déclaration ne change pas d'un pixel, et l'accueil
   continue de passer par ses propres classes. */
.home-band,
.section-band {
    position: relative;
    isolation: isolate;
}

.home-band--vivant {
    background: var(--bg-footer);
    padding-block: 48px 52px;
}

/* Le conteneur et son motif existent même sans instantané du ciel : c'est la
   condition pour que le hash éditorial de l'accueil ne dépende pas de la
   disponibilité du snapshot (VolatileSurfacesGovernanceTest). Dans cet état
   dégradé, la bande n'a plus de contenu — elle cesse alors de se peindre
   plutôt que de laisser une écharpe teintée en travers de la page. */
.home-band--vivant:not(:has(.content-band)) {
    background: none;
    margin-top: 0;
    padding-block: 0;
}

.home-band--vivant:not(:has(.content-band)) .home-motif {
    display: none;
}

.home-band--confiance,
.section-band--surface {
    background: var(--surface);
    padding-block: 52px;
}

/* Les sections qui viennent d'entrer dans une bande n'ont plus à porter la
   respiration : c'est la bande qui la donne. */
.home-band > .content-band:first-child,
.section-band > .content-band:first-child {
    margin-top: 0 !important;
}

/* Une section entrée dans une bande n'a plus besoin du filet qui la séparait de
   la précédente : c'est le changement de fond qui fait la séparation, et deux
   marqueurs pour une seule frontière en font un de trop. */
.section-band > .content-band:first-child {
    border-top: 0;
}

/* ÉCHELLE — trois régimes, pas dix. Majeur pour ce qui porte le produit,
   courant pour la suite d'une séquence, calme pour la queue éditoriale. */
.home-sky h2,
.home-discovery h2 {
    font-size: 2.5rem !important;
    line-height: 1.08 !important;
}

.home-proof h2 {
    font-size: 1.85rem !important;
    line-height: 1.12 !important;
}

.home-closing h2,
.seo-depth-section h2 {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
}

/* LARGEUR — les trois mesures existaient et ne servaient pas. Le contenu
   vivant et la découverte respirent plus large que la mesure de lecture. */
.home-sky,
.home-signs,
.home-discovery {
    width: min(1240px, calc(100% - 40px));
}

/* RYTHME — serré à l'intérieur d'une séquence, ample entre deux familles.
   Mesuré avant : 86,4 px partout, sans exception. */
.home-band--vivant {
    margin-top: 64px;
}

.home-band--confiance,
.seo-depth-section {
    margin-top: 116px !important;
}

.seo-depth-section + .seo-depth-section {
    margin-top: 52px !important;
}

.home-discovery {
    margin-top: 116px !important;
}

/* Mobile : la couleur des bandes sépare déjà les familles, les grandes
   respirations deviennent redondantes — et un titre majeur à 40 px sur 358 px
   de large se brise sur quatre lignes. Mesuré : sans cet ajustement, la page
   gagnait 668 px, dont 168 de rythme et 128 sur le seul titre de la
   découverte. Le rapport entre les trois régimes est conservé. */
@media (max-width: 860px) {
    .home-sky h2,
    .home-discovery h2 {
        font-size: 1.9rem !important;
    }

    .home-proof h2 {
        font-size: 1.5rem !important;
    }

    .home-band--vivant {
        padding-block: 34px 38px;
    }

    .home-band--confiance,
    .section-band--surface {
        padding-block: 38px;
    }

    .home-band--confiance,
    .home-discovery,
    .seo-depth-section {
        margin-top: 64px !important;
    }

    .seo-depth-section + .seo-depth-section {
        margin-top: 44px !important;
    }
}

/* MOTIF — UN seul. Au trait, dans la couleur des filets, sans remplissage,
   sans halo, sans animation, sans interaction. Il doit DISPARAÎTRE quand on
   plisse les yeux : son rôle est de signer la page, pas d'entrer dans la
   hiérarchie des masses. Masqué sous 1024 px, où il n'y a pas la place de le
   poser sans qu'il devienne un décor.

   Un second motif — un repère orbital dans la zone éditoriale — a été
   prototypé puis retiré : trop discret pour porter une fonction, il n'ajoutait
   pas d'identité mais du décor faible, et le renforcer aurait été contraire à
   la direction. Deux motifs commencent une grammaire décorative ; un seul est
   une signature. L'arc gradué reste parce qu'il DIT quelque chose : il raccorde
   la zone du ciel à l'idée de mesure. */
.home-motif {
    color: var(--line);
    display: none;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.home-motif svg {
    display: block;
}

@media (min-width: 1024px) {
    .home-motif {
        display: block;
    }
}

.home-motif--gradue {
    right: -140px;
    top: -40px;
}

@media (max-width: 860px) {
    .home-hero,
    .home-split {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .home-actions .secondary-action {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   16. GARDE-FOU « CARTE DANS CARTE »
   Une carte dont le contenu est LUI-MÊME une grille de cartes n'est pas
   un objet : c'est un regroupement. Elle perd sa boîte, son titre suffit
   à regrouper. Prolonge la garde `:has(.content-list)` de 2026-07 aux
   deux autres grilles d'objets du site.
   --------------------------------------------------------------------- */
.tool-category:has(.tool-link-grid),
.tool-category:has(.tool-grid),
.tool-panel:has(.tool-link-grid),
.content-band:has(> .tool-category-grid),
.faq-card:has(.content-list) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.tool-category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: clamp(28px, 3.5vw, 48px) !important;
}

.tool-category-grid--featured {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

.tool-feature-card {
    display: grid !important;
    gap: 5px !important;
    text-decoration: none !important;
}

.tool-feature-card span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

.tool-feature-card strong {
    font-size: 1rem;
    color: var(--ink) !important;
}

.tool-feature-card small {
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--muted) !important;
}

.tool-category > p {
    color: var(--muted);
    max-width: 60ch;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   17. CASES À COCHER ET BOUTONS RADIO
   Une génération antérieure les rendait en carrés pleins sans marque de
   sélection lisible sur fond clair. On revient au contrôle natif.
   --------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    accent-color: var(--accent);
}

.checkbox-field {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-weight: 500 !important;
}

/* ---------------------------------------------------------------------
   18. RESTES DE SURFACE SOMBRE
   Relevés par `scratchpad/ui-baseline/audit.py`, qui parcourt les six
   surfaces et signale tout fond sombre, texte trop pâle, ombre ou
   dégradé survivant. Cette liste doit rester COURTE : si elle s'allonge,
   c'est qu'une nouvelle génération de styles s'est glissée dessous.
   --------------------------------------------------------------------- */

/* Colonne vertébrale du thème : trois à cinq facteurs structurants.
   C'est une liste ordonnée de faits, pas une pile de panneaux. */
.backbone-item {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 0 !important;
}

.backbone-rank {
    background: none !important;
    border: 0 !important;
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

/* Jauges de dominante : le rail est un creux clair, la barre l'accent.
   Aucun dégradé — la valeur se lit à la longueur, pas à la couleur. */
.score-bar {
    background: var(--surface-muted) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.score-bar span {
    background: var(--accent) !important;
    background-image: none !important;
    border-radius: 999px !important;
}

/* Badges de dignité, de secte et de prééminence : ce sont des repères de
   donnée. Ils gardent leur filet, jamais un fond teinté. */
.dignity-badge,
.sect-badge,
.prominence-badge {
    background: none !important;
    border-radius: 999px !important;
    padding: 2px 9px !important;
    font-size: 0.76rem !important;
    box-shadow: none !important;
}

/* Champs restants (dont ceux des formulaires de compte) : aucun champ ne
   doit conserver un fond sombre hérité. */
input,
select,
textarea {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
}

input[type="checkbox"],
input[type="radio"] {
    background-color: transparent !important;
}

/* Encart de tête du rapport imprimable : fond nuit + texte gris, soit un
   contraste mesuré à 2,74 après le passage en clair. C'est une note, pas
   un panneau : filet d'accent à gauche, comme `.notice`. */
.report-callout {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0 2px 16px !important;
}

.report-callout p {
    color: var(--ink) !important;
}

/* Tiroir de navigation mobile. Il portait l'ombre noire de l'ancien thème
   sombre ; mesuré à 390 px, le supprimer entièrement était pire : le
   tiroir ne fait que 323 px de haut et le contenu de la page reprenait
   juste dessous, sans frontière lisible. Il garde donc la MÊME ombre
   discrète que le menu déroulant du bureau — c'est une surface flottante,
   et c'est la seule exception admise par la section 1.

   CHROME-FIX-001 : cette règle décrivait le TIROIR mais n'était bornée à
   aucune largeur. En desktop, `.nav-menu` n'est plus un tiroir flottant,
   c'est la simple liste des rubriques dans la barre : elle héritait donc
   d'un filet sous le menu, d'une ombre portée et d'un fond opaque dont
   rien ne justifiait la présence. La règle est ramenée à son domaine réel
   plutôt que neutralisée plus bas par un override. */
@media (max-width: 1023px) {
    .site-header .nav-menu {
        background: var(--bg) !important;
        border-bottom: 1px solid var(--line) !important;
        box-shadow: 0 18px 36px -24px rgba(27, 26, 23, 0.55) !important;
    }
}

/* Cibles tactiles : chaque entree du tiroir occupe une ligne pleine. */
@media (max-width: 1023px) {
    .site-header .nav-menu > .nav-item {
        border-bottom: 1px solid var(--line-soft);
    }

    .site-header .nav-link,
    .site-header .nav-trigger {
        min-height: 48px !important;
        padding: 10px 0 !important;
    }

    /* `position: static` est indispensable : une generation posterieure
       au bloc « drawer » d'origine remettait le panneau en `absolute`, si
       bien qu'ouvrir « Astrologie » sur telephone n'affichait RIEN — le
       panneau, haut de 1 517 px, se posait hors du tiroir. */
    .site-header .nav-panel {
        position: static !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 12px 12px !important;
    }

    .site-header .nav-panel .nav-col {
        margin-bottom: 14px;
    }

    .site-header .nav-panel a {
        min-height: 42px;
        display: flex !important;
        align-items: center;
        white-space: normal !important;
    }
}

/* Suggestions de ville : la seule autre surface flottante du site avec
   le menu. Même traitement que lui — filet net, ombre à peine posée. */
.city-suggestions {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -20px rgba(27, 26, 23, 0.5) !important;
}

.city-suggestions li {
    color: var(--ink) !important;
}

/* ---------------------------------------------------------------------
   19. DÉBORDEMENTS HORIZONTAUX (390 px)
   Relevés en mesurant les rectangles des éléments contre la largeur du
   viewport, pas à l'œil. Un seul coupable réel : la ligne légale du
   pied de page, en `white-space: nowrap`, qui élargissait le document
   entier de 390 à 471 px sur toutes les pages.
   --------------------------------------------------------------------- */
.site-footer__legal {
    white-space: normal !important;
}

/* Tout tableau de données déborde horizontalement DANS son conteneur,
   jamais dans la page. */
.table-wrap,
.sky-table-scroll {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Le fil d'Ariane reste sur une ligne qui se replie, jamais un item par
   ligne. Attention : ne PAS remettre `margin: 0` ici — il ecrase le
   `margin-inline: auto` de la section 2 et le fil part se coller au bord
   gauche de la fenetre sur toutes les pages ou il est de premier niveau. */
.breadcrumb,
.breadcrumb ol,
.breadcrumb > * {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
    list-style: none !important;
    margin-block: 0 !important;
    padding: 0 !important;
}

.breadcrumb ol,
.breadcrumb > * {
    margin-inline: 0 !important;
}

.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
}

/* ---------------------------------------------------------------------
   20. DÉCOUVRABILITÉ DES OUTILS (OUTILS-DISCOVERY-UX-001)
   Tout se règle par l'ordre, la hiérarchie et l'espace. Aucune nouvelle
   sorte de carte, aucun panneau, aucun dégradé : la doctrine CLARTÉ vaut
   ici comme ailleurs.
   --------------------------------------------------------------------- */

/* Point de départ de l'index des outils. Ce n'est PAS une carte : un
   sur-titre, un titre cliquable, une phrase, une action. Ce qui le
   distingue des cinq intentions qui suivent, c'est sa place et le fait
   qu'il porte la seule action pleine de la page. */
.tool-start {
    background: none !important;
    border: 0 !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 20px !important;
}

.tool-start h2 {
    margin-bottom: 0.35em !important;
}

.tool-start h2 a {
    color: var(--ink) !important;
    text-decoration: none !important;
}

.tool-start h2 a:hover {
    color: var(--accent) !important;
}

.tool-start p {
    max-width: 62ch;
}

.tool-start .action-row {
    margin-top: 18px !important;
}

/* Les cinq intentions. Le titre de chaque groupe porte le sens ; les
   tuiles restent celles de la baseline. */
.tool-intents .tool-category > h3 {
    font-size: 1.06rem !important;
    margin-bottom: 0.25em !important;
}

.tool-intents .tool-category > p {
    color: var(--muted);
    margin-bottom: 14px;
}

/* « Explorer plus loin » : techniques spécialisées. Elles restent
   entièrement visibles, mais en liste de liens plutôt qu'en tuiles
   encadrées — moins de cadre, pas moins d'information. C'est la façon
   CLARTÉ de casser l'égalité des 21 tuiles sans inventer une notation
   débutant / expert que rien dans les données ne fonde. */
.tool-category--further .tool-link-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 8px 24px !important;
}

.tool-category--further .tool-link-grid a {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    font-size: 0.94rem;
}

.tool-category--further .tool-link-grid a:hover {
    color: var(--accent-dark) !important;
}

/* Cible d'ancre : les cinq intentions sont atteintes depuis le menu.
   Sans décalage, le titre se glisse sous l'en-tête collant. */
.tool-category[id],
.tool-intents[id] {
    scroll-margin-top: 110px;
}

/* ---------------------------------------------------------------------
   21. CONTINUER AVEC SON THÈME
   Cinq destinations qui reprennent les données de naissance. Rendues en
   LIENS et non en boutons : dans cette zone, l'action dominante reste la
   conservation, juste au-dessus.
   --------------------------------------------------------------------- */
.pc-continue {
    width: min(var(--wrap), calc(100% - 40px));
    margin-inline: auto;
}

.pc-continue h2 {
    font-size: 1.14rem !important;
    margin-bottom: 0.3em !important;
}

.pc-continue > p {
    color: var(--muted);
    margin-bottom: 14px;
}

.pc-continue__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-continue__list a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .pc-continue {
        width: calc(100% - 32px);
    }

    .pc-continue__list {
        display: grid;
        gap: 10px;
    }

    .tool-start {
        padding-left: 14px !important;
    }
}

/* ---------------------------------------------------------------------
   22. NAVIGATION (NAVIGATION-UX-001)
   Deux étages assumés : une barre de contexte à l'accent du thème, puis
   une navigation claire. Le reste se règle par la géométrie.
   --------------------------------------------------------------------- */

/* --- ÉTAGE 1 : barre de contexte ------------------------------------
   Fond pris au token d'accent, jamais une couleur écrite ici. C'est la
   seule concession d'identité d'un header devenu clair. */
.site-header__utility {
    background: var(--accent) !important;
    border-bottom: 0 !important;
}

.site-header__utility-inner {
    min-height: 34px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    font-size: 0.8rem !important;
}

.site-header__utility a,
.site-header__utility .sky-ticker,
.site-header__utility span {
    color: var(--sur-accent) !important;
}

.site-header__utility a {
    text-decoration: none !important;
    border-radius: 3px;
}

.site-header__utility a:hover {
    color: var(--sur-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.site-header__utility-links {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
}

/* « Créer un compte » reste l'action de cet étage : une graisse suffit,
   aucun bouton plein sur une barre déjà colorée. */
.site-header__utility-cta {
    color: var(--sur-accent) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* --- ÉTAGE 2 : navigation claire ------------------------------------
   Distribution : marque, puis navigation immédiatement à sa suite, puis
   l'espace flexible, puis l'accès à l'offre. Mesuré avant : 387 px de
   vide entre la marque et le menu, à 1440 comme à 1920. */
.site-header__inner {
    display: flex !important;
    align-items: center !important;
    gap: 0 32px !important;
    min-height: 60px !important;
}

/* La navigation était étirée (`flex: 1 1 auto`) et son contenu poussé à
   droite (`justify-content: flex-end`) par une génération antérieure : d'où
   les 387 px de vide mesurés entre la marque et la première rubrique. Elle
   se réduit maintenant à son contenu et suit la marque ; c'est l'espace
   flexible qui repousse l'accès à l'offre tout à droite. */
.site-header__inner .primary-nav {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    margin-right: auto !important;
}

.site-header__offer {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink) !important;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.site-header__offer:hover,
.site-header__offer:focus-visible {
    color: var(--accent) !important;
    border-bottom-color: var(--accent);
}

/* --- ANCRAGE DES PANNEAUX -------------------------------------------
   LE défaut structurel du header. Mesuré avant correction : les trois
   panneaux s'ouvraient au MÊME endroit, `left: 42px` relatif à
   `nav.primary-nav`, soit 321 à 505 px à gauche de leur déclencheur —
   et pour « Divination », un panneau qui ne recouvrait pas du tout le
   mot cliqué.

   Le contexte de positionnement descend donc sur l'item : chaque panneau
   s'ouvre à `left: 0` de SON `<li>`, c'est-à-dire sous son déclencheur.
   Aucune flèche, aucun triangle : la géométrie porte l'appartenance. */
@media (min-width: 1024px) {
    .site-header .nav-item--group {
        position: relative;
    }

    .site-header .nav-panel {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 !important;
    }

    /* Largeur dictée par le contenu, jamais par l'uniformité — mais la
       mesure a REFUSÉ l'hypothèse d'un panneau « Outils » plus étroit :
       à 580 px ses libellés débordaient de 42 px, et il faut 720 px pour
       obtenir ne serait-ce que 5 px de marge, « Ce qui se passe en ce
       moment » étant le libellé le plus long de toute la navigation.
       Les deux panneaux à colonnes partagent donc la même largeur ; ce qui
       les distingue est leur hauteur (678 px contre 254) et leur nombre de
       sections, pas une largeur décidée d'avance.

       Divination, lui, reste un dropdown : 3 liens, 228 px. */
    .site-header .nav-panel--wide {
        width: 740px !important;
    }

    .site-header .nav-panel:not(.nav-panel--wide) {
        width: max-content !important;
        min-width: 220px !important;
        max-width: 300px !important;
    }

    /* Débordement : plus de basculement à droite. Une fois la navigation
       ramenée contre la marque, le déclencheur le plus à droite commence à
       486 px en 1024 et le panneau le plus large fait 720 px — tout tient à
       gauche à toutes les largeurs mesurées (1024, 1440, 1920). Reste un
       simple garde-fou de viewport, qui ne devrait jamais mordre. */
    .site-header .nav-panel {
        max-width: calc(100vw - 40px) !important;
    }
}

/* --- Colonnes du panneau : dépliables sur téléphone -------------------
   Mesuré : le panneau « Astrologie » fait 1 642 px pour 31 liens dans un
   tiroir de 780 px. Ses sections deviennent des `<details>` natifs, donc
   repliés sur mobile : l'utilisateur voit les six groupes et n'ouvre que
   celui qui l'intéresse.

   Au-dessus de 1024 px ils sont forcés ouverts par `::details-content` —
   même mécanique que la liste des positions du thème astral, vérifiée sur
   Chromium et Firefox. Le `summary` n'est jamais masqué : si un moteur
   ignorait la propriété, il resterait un dépliant natif fonctionnel. */
/* Le titre statique n'existe qu'en desktop : sous 1024 px c'est le
   `<summary>` qui porte le titre ET le contrôle. Un seul des deux est rendu
   à la fois, donc un seul `<h2>` est exposé aux technologies d'assistance. */
.site-header .nav-col__title {
    display: none;
}

.site-header .nav-col > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 !important;
    color: var(--ink) !important;
}

.site-header .nav-col > summary::-webkit-details-marker {
    display: none;
}

.site-header .nav-col > summary h2 {
    margin: 0 !important;
}

.site-header .nav-col > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    flex: none;
}

.site-header .nav-col[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

@media (min-width: 1024px) {
    .site-header .nav-col::details-content {
        content-visibility: visible;
        block-size: auto;
    }

    /* Les sections sont forcées ouvertes : leur `<summary>` ne commande plus
       rien. Le laisser rendu en faisait six arrêts de tabulation inutiles et
       le faisait annoncer comme un dépliant alors qu'il ne se replie pas.
       `display: none` le retire du parcours clavier ET de l'arbre
       d'accessibilité ; le titre statique prend le relais. Aucun lien n'est
       dupliqué : seuls six intitulés courts existent en double, et un seul
       des deux est rendu à chaque largeur. */
    .site-header .nav-col > summary {
        display: none !important;
    }

    .site-header .nav-col__title {
        display: block;
    }
}

/* Sous 1024 px, l'accès à l'offre rejoint le tiroir avec les autres
   entrées utilitaires : laissé dans la barre, il flottait au-dessus du
   tiroir et faisait passer le header de 66 à 80 px. */
@media (max-width: 1023px) {
    .site-header__offer {
        display: none !important;
    }
}

/* Les entrées utilitaires ne servent que le tiroir : en desktop, l'étage
   de contexte les porte déjà. */
@media (min-width: 1024px) {
    .site-header .nav-item--utility {
        display: none !important;
    }
}

/* --- FOCUS CLAVIER ---------------------------------------------------
   Mesuré avant : `outline-width: 0px` sur les cinq entrées du header,
   quand les liens de contenu en ont deux. Au clavier, la navigation
   était invisible. Même principe de focus que partout ailleurs. */
.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}

.site-header__utility a:focus-visible {
    outline: 2px solid var(--sur-accent) !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   23. PIED DE PAGE (FOOTER-UX-001)

   Mesuré avant : 1 065 px de haut en desktop, 1 532 px à 390 px (1,82
   écran), 48 liens identiques sur toutes les pages, dont 26 menant à une
   URL que le header sert déjà. Six groupes rangés dans une grille de
   quatre colonnes, donc deux cellules vides et un groupe de cinq liens
   relégué sous un groupe de trois. Les seules pages dont le pied était
   l'unique accès universel — méthodologie, sources, auteurs, études,
   contact — étaient les moins visibles de l'ensemble.

   Le Twig a retiré la duplication ; il reste ici à composer ce qui a
   survécu. Deux zones, pas quatre colonnes de force : l'identité et sa
   preuve à gauche, les portes d'entrée à droite.
   --------------------------------------------------------------------- */
.site-footer__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
    gap: 36px 64px;
}

.site-footer__brand {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__group--explore {
    grid-column: 2;
}

/* Le ruban des signes reste pleine largeur : c'est un plan, pas une colonne. */
.site-footer__signs {
    grid-column: 1 / -1;
}

.site-footer__tagline {
    max-width: 52ch;
}

/* Les intitulés de groupe ne sont plus des <h2>. L'ancien sélecteur
   `.site-footer__col h2` les passait en capitales : mesuré, Chromium reporte
   la transformation dans le NOM ACCESSIBLE, et le <nav> s'annonçait
   « COMMENT CE SITE TRAVAILLE ». Une étiquette se distingue par sa taille et
   sa couleur, pas en criant. */
/* Spécificité : `.site-footer p` d'une génération antérieure est déjà en
   !important et l'emporterait sur une classe seule ; l'intitulé de groupe
   est un <p>, il doit donc être qualifié pour rendre la même taille que
   les deux autres étiquettes, qui sont des <span>. */
.site-footer .site-footer__group-title,
.site-footer .site-footer__signs-label,
.site-footer .site-footer__account-title {
    font-size: 0.8rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
    margin: 0 0 0.7em !important;
}

/* Les <nav> du pied heritaient d'un `display: flex` en RANGEE : l'intitule
   se posait a cote de sa liste au lieu de la nommer, et « Explorer » ouvrait
   un vide de 70 px entre son etiquette et ses quatre liens. */
.site-footer__group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.site-footer__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Les cinq pages de confiance étaient une colonne étroite parmi six. En
   ligne sous l'accroche, elles occupent la largeur de la marque et se
   lisent comme ce qu'elles sont : la preuve de ce que l'accroche affirme. */
.site-footer__group--trust ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
}

.site-footer__group--explore ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Le compte n'ouvre aucune destination que l'étage de contexte du header ne
   serve déjà : il descend en ligne, au-dessus du légal, sans titre de groupe
   de même poids que la confiance. */
.site-footer__account {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
}

.site-footer__account-title {
    margin: 0 !important;
}

/* Le zodiaque garde ses douze liens et son ordre ; seule sa densité change. */
.site-footer__zodiac {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
}

/* Le bas etait centre quand tout le reste du pied est aligne a gauche :
   deux axes de lecture dans le meme bloc. Mesure sur le rendu, la
   difference venait de `align-items: center` herite, pas d'un choix. */
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 14px;
}

.site-footer__bottom > * {
    text-align: left !important;
}

/* Une generation anterieure posait `order: 3` sur la barre legale pour la
   renvoyer en fin de rangee. Dans une colonne, cette regle la faisait passer
   SOUS le copyright : l'ordre lu ne suivait plus l'ordre du document. */
.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    order: 0 !important;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}

/* Mobile : mesuré avant, les 48 liens faisaient 19 px de haut, en deux
   colonnes de 148 px qui cassaient deux libellés sur deux lignes. La
   hauteur gagnée sur la duplication est rendue aux cibles tactiles. */
@media (max-width: 1023px) {
    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .site-footer__brand,
    .site-footer__group--explore,
    .site-footer__signs {
        grid-column: 1;
    }

    .site-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .site-footer__group--trust ul,
    .site-footer__legal-links,
    .site-footer__account {
        gap: 0 22px;
    }

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

    .site-footer__zodiac a {
        padding: 0 !important;
    }

}

/* Le ruban des signes heritait d'une marge et d'un retrait hauts d'une
   generation ou il fermait une grille de six colonnes : deux espacements
   se cumulaient avec celui du conteneur. L'ecart de la grille suffit. */
.site-footer__signs {
    margin-top: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1023px) {
    .site-footer__top {
        gap: 20px;
    }

    .site-footer__bottom {
        gap: 10px;
    }
}

/* DAILY-FRONT-CLOSURE-001 — DÉBORDEMENT DES TABLEAUX DU CIEL, RENDU PERCEPTIBLE
   ------------------------------------------------------------------
   Mesuré sur les captures mobiles : 6 tableaux dépassent leur conteneur, dont
   les éphémérides (658 px de contenu pour 358 px visibles, soit 46 % hors
   champ — toute la colonne « ce que l'astre met en mouvement »). Le
   défilement horizontal fonctionnait déjà ; rien ne l'annoncait, et un
   tableau coupé net se lit comme un tableau cassé.

   Les données ne bougent pas : ni carte, ni repli, ni colonne retirée. Seul
   un voile de bord et une ligne d'indication sont ajoutés, et UNIQUEMENT
   quand le débordement est réel — c'est la classe .is-scrollable, posée par
   le script après mesure. Un tableau qui tient dans sa colonne n'affiche
   rien du tout, sur mobile comme sur desktop.

   Le voile s'efface quand la fin est atteinte (.is-at-end) : le signal
   disparaît lorsqu'il n'a plus rien à signaler. */
.sky-table-frame {
    display: grid;
    grid-template-rows: auto auto;
}

.sky-table-frame > .sky-table-scroll {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
}

.sky-table-frame.is-scrollable::after {
    content: "";
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    justify-self: end;
    width: 48px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(246, 243, 238, 0), var(--bg, #f6f3ee) 88%);
    opacity: 1;
    transition: opacity 0.15s linear;
}

.sky-table-frame.is-scrollable.is-at-end::after {
    opacity: 0;
}

/* Réservée en hauteur dès que le tableau déborde : on module l'opacité, jamais
   l'occupation, pour qu'un défilement horizontal ne fasse pas sauter la page. */
.sky-table-hint {
    grid-row: 2;
    margin: 8px 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--muted, #5d5b54);
    display: none;
}

.sky-table-frame.is-scrollable .sky-table-hint {
    display: block;
    transition: opacity 0.15s linear;
}

.sky-table-frame.is-scrollable.is-at-end .sky-table-hint {
    opacity: 0;
}

/* Le script rend le conteneur focusable au clavier quand il déborde : il lui
   faut donc un focus VISIBLE, sans quoi on créerait une étape de tabulation
   muette. */
.sky-table-frame.is-scrollable > .sky-table-scroll:focus-visible {
    outline: 2px solid var(--accent, #0e6656);
    outline-offset: 3px;
}
/* =====================================================================
   FICHE-FACTUELLE-001 — le régime PROSE de `.result-facts`
   ---------------------------------------------------------------------
   `.result-facts` a été dessiné (CLARTÉ) pour des valeurs COURTES : une
   ligne de définitions qui se replie, plusieurs paires par ligne. Mesuré
   sur la production, ce régime tient partout où les valeurs font 7 à 44
   caractères (maisons, signes, décans, placements : 0 valeur sur deux
   lignes). Il s'effondre là où la valeur est une PHRASE : sur les 100
   pages de points sensibles, les valeurs font 63 à 81 caractères, 4 à 5
   d'entre elles passent à la ligne, et les 6 valeurs démarrent à 6
   abscisses différentes — il n'y a aucune colonne, seulement des paires
   posées les unes sous les autres. Le `font-weight: 600` du régime court,
   appliqué à des phrases, met la fiche en gras au-dessus de la lecture
   qu'elle est censée servir.

   Ce bloc n'ajoute pas une exception : il nomme le second régime.
   `.result-facts--sheet` est une FICHE — une colonne de libellés, des
   filets, des valeurs en romain — et le régime court n'est pas touché.

   Deux partis de fond :
   1. `Nature` répond au titre (« Ce que ce point est, précisément ») :
      elle sort du tableau et redevient une phrase. Une définition n'est
      pas une cellule.
   2. `Calcul Astrologix` n'est pas un fait du ciel, c'est notre
      convention. Elle ouvre un second groupe, séparé par un filet net.

   La disposition par défaut est EMPILÉE (libellé au-dessus). Les deux
   colonnes sont un enrichissement, déclenché par la largeur du panneau
   et non par celle de la fenêtre : le même panneau vit à 532 px dans une
   grille à deux colonnes et à 358 px sur mobile.
   ===================================================================== */
.fact-definition {
    margin: 2px 0 22px !important;
    max-width: 46ch;
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--ink);
}

.tool-panel:has(> .result-facts--sheet) {
    container-type: inline-size;
    container-name: fiche;
}

.result-facts--sheet {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 0 6px !important;
}

.result-facts--sheet > div {
    display: contents !important;
}

.result-facts--sheet dt {
    grid-column: 1;
    padding: 13px 0 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

.result-facts--sheet dd {
    grid-column: 1;
    margin: 0 !important;
    padding: 3px 0 13px !important;
    border-top: 0 !important;
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--ink) !important;
}

/* Le second groupe : ce que NOUS calculons, puis ce que CETTE page lit. */
.result-facts--sheet > .fact-row--convention dt {
    border-top: 1px solid var(--line) !important;
    padding-top: 16px !important;
}

@container fiche (min-width: 30rem) {
    .result-facts--sheet {
        grid-template-columns: max-content minmax(0, 1fr) !important;
    }

    .result-facts--sheet dt {
        padding: 11px 24px 11px 0 !important;
        /* Hauteur de ligne posée en longueur, égale à celle de la valeur :
           sans cela le libellé, plus petit, ne partage pas sa ligne. */
        line-height: 1.52rem !important;
    }

    .result-facts--sheet dd {
        grid-column: 2;
        padding: 11px 0 !important;
        border-top: 1px solid var(--line-soft) !important;
    }

    .result-facts--sheet > .fact-row--convention dd {
        border-top: 1px solid var(--line) !important;
        padding-top: 14px !important;
    }

    .result-facts--sheet > .fact-row--convention dt {
        padding-top: 14px !important;
    }
}

/* TRANSIT-VALENCE-PRESENTATION-001 — la dynamique sourcée, repérable sans être hiérarchisante.
   Une ligne sur deux environ la porte : l'objectif est qu'on la REPÈRE d'un coup d'œil, jamais
   qu'elle paraisse plus importante qu'un aspect plus serré. L'orbe gouverne l'ordre, cette
   qualification ne gouverne que le sens. D'où : pas de badge, pas de fond, pas de couleur
   d'alerte — un simple contraste de graisse sur la même ligne que l'orbe. */
.transit-dynamique {
    font-weight: 600;
    margin-left: 0.35rem;
}

/* --- FOCUS CLAVIER DE .secondary-action (ACCESSIBILITY-FIX-001) -------------
   Mesuré au style calculé, sous focus clavier RÉEL (Tab, donc :focus-visible
   effectivement apparié) sur quatre familles de pages : le focus n'était pas
   discret, il était ABSENT — `outline-style: none`, `outline-width: 0px`,
   `box-shadow: none` — et le repli natif du navigateur l'était aussi.

   Deux suppressions antérieures se cumulaient :

     l. 1220  `.secondary-action:focus-visible { outline: none }`
              Spécificité (0,2,0) : l'emporte sur la règle générique
              `a:focus-visible` de la l. 5182, dont seul l'`outline-offset: 2px`
              survivait. Un décalage appliqué à un contour inexistant, donc
              une différence mesurable entre repos et focus, mais invisible.

     l. 1434  `.secondary-action { box-shadow: none !important }`
              L'`!important` sur la classe de base annule les huit `box-shadow`
              de focus déclarées plus bas dans la feuille.

   On rétablit l'idiome DÉJÀ en place ailleurs (règle générique l. 5182, header
   l. 9840) au lieu d'en inventer un. Rien d'autre n'est touché : ni la couleur
   au repos, ni le survol, ni la hiérarchie des trois rangs de bouton. Le focus
   est un état fonctionnel, pas une décoration.

   La variante `--light` porte toujours la classe de base (vérifié sur les 419
   usages des 66 gabarits) : un seul sélecteur suffit. */
.secondary-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =====================================================================
   THEMES-MOBILE-ACTIONS-001 — la liste des thèmes se replie en fiches
   ---------------------------------------------------------------------
   Défaut mesuré (UX-CONVERSION-JOURNEY-001, P1) sur `/compte/themes/`,
   avec trois thèmes enregistrés :

     viewport 390 → .table-wrap 358 px pour une table de 684 px
     viewport 360 → 328 px          viewport 320 → 288 px
     les NEUF actions commencent à x = 489, 552 et 625 : toutes hors écran.

   `overflow-x: auto` était DÉJÀ posé sur `.table-wrap` : le défaut n'est
   donc pas que la table ne défile pas, c'est que rien n'indique qu'il y a
   quelque chose à droite. Un utilisateur voyait mieux « Calculer un
   nouveau thème » que les trois actions de ses propres thèmes.

   POURQUOI PAS L'INDICE DE DÉFILEMENT DÉJÀ EN PLACE. Le dépôt possède le
   couple `.sky-table-frame` / `.sky-table-hint`, qui signale un débordement
   au lieu de le supprimer. Il convient à une table de DONNÉES qu'on lit de
   gauche à droite. Ici ce qui déborde n'est pas de la donnée : ce sont les
   ACTIONS. Les annoncer ne suffit pas, il faut les rendre.

   La table reste une table : le desktop n'est pas touché, il n'était pas
   défectueux. Sous 760 px — la mesure `--wrap-tight`, déjà la plus utilisée
   de la feuille, et le seuil sous lequel le conteneur passe effectivement
   sous les 684 px intrinsèques — chaque ligne devient une fiche empilée.

   Le `!important` de ce bloc n'est pas un ornement : `.table-action` est
   déclarée `display: inline !important; min-height: 0 !important;
   padding: 0 !important; border: 0 !important` par la couche CLARTÉ, qui
   l'a volontairement ramenée à un lien. On ne défait cette déclaration que
   dans ce contexte-ci, sous ce seuil-ci, et pour une raison nommée : trois
   liens de 20 px de haut, côte à côte, ne sont pas des cibles tactiles.
   Ailleurs, `.table-action` reste exactement ce qu'elle est.
   ===================================================================== */

/* Les libellés de colonne ne servent qu'à la disposition repliée : sur
   ordinateur c'est l'en-tête de table qui les porte. */
.cell-label {
    display: none;
}

@media (max-width: 760px) {
    .chart-table,
    .chart-table tbody,
    .chart-table tr,
    .chart-table td {
        display: block;
        width: auto;
    }

    /* Deux générations antérieures posent une largeur PLANCHER sur toute
       table : `min-width: 620px` (l. 283) puis `min-width: min(680px, 100vw)`
       (l. 2449). La seconde vaut 390 px à 390 px de fenêtre, et elle suffisait
       à faire déborder la fiche repliée de 32 px dans son conteneur — mesuré :
       `.table-wrap` clientWidth 358, scrollWidth 390. Un plancher de largeur
       n'a plus d'objet quand la table n'est plus une table. */
    .chart-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* L'en-tête disparaît AVEC ses cellules : chaque valeur porte désormais
       son propre libellé, en texte réel. */
    .chart-table thead {
        display: none;
    }

    /* Un filet sépare les fiches. Pas de carte, pas de fond, pas d'ombre :
       le groupement vient de l'espace et du trait (doctrine CLARTÉ). */
    .chart-table tr {
        border-top: 1px solid var(--line-soft);
        padding: 20px 0 4px;
    }

    .chart-table tr:first-child {
        border-top: 0;
        padding-top: 4px;
    }

    .chart-table td {
        border: 0 !important;
        padding: 0 0 6px !important;
    }

    /* Le libellé du thème est le titre de sa fiche. */
    .chart-table__name {
        color: var(--ink);
        font-size: 1.06rem;
        font-weight: 650;
        line-height: 1.3;
        padding-bottom: 10px !important;
    }

    .chart-table .cell-label {
        display: inline;
        margin-right: 8px;
        color: var(--muted);
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Les trois actions passent sur une ligne, sous les données de la fiche
       à laquelle elles appartiennent. */
    /* Le sélecteur porte `td` : sans lui, `.chart-table td` (0,1,1) l'emporte
       sur `.chart-table__do` (0,1,0) et le rembourrage des actions est mangé —
       mesuré, l'écart entre deux cibles tombait à 4 px, la largeur d'une
       espace. Deux `!important` de même poids se départagent à la spécificité,
       pas à l'ordre. */
    .chart-table td.chart-table__do {
        display: inline-block !important;
        padding: 14px 10px 0 0 !important;
    }

    .chart-table__do .table-action {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px !important;
        padding: 0 16px !important;
        border: 1px solid var(--line-soft) !important;
        border-radius: 8px !important;
        color: var(--accent) !important;
        text-decoration: none !important;
    }

    .chart-table__do .table-action:hover {
        border-color: var(--accent) !important;
    }
}

/* =====================================================================
   HOME-VISUAL-RHYTHM-001 — le hero après le retrait du schéma
   ---------------------------------------------------------------------
   La carte « Astrologix core » a été retirée du gabarit : 454 × 626 px
   (284 204 px²), zéro lien, zéro bouton, zéro valeur calculée, une roue
   `aria-hidden` faite de quatre repères figés, et cinq de ses six paires
   redites en toutes lettres à moins de 1 000 px. Elle valait 32 fois
   l'aire du bouton principal et coûtait 516 px du premier écran mobile.

   Deux réglages la SURVIVAIENT, et c'est tout l'objet de ce bloc :

   1. `min-height: clamp(560px, 76vh, 760px)` (l. 1453) réservait la
      hauteur d'un écran pour loger la carte. Sans elle, cette réserve
      devient un vide : 684 px de hero pour 336 px de contenu, mesuré.
   2. `grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr)` gardait
      une seconde colonne qui n'a plus d'occupant. La copie s'étalait
      alors sur 1 080 px, très au-delà d'une mesure de lecture.

   On ne comble pas le vide, on le RETIRE : une colonne, une mesure de
   lecture, une respiration franche. Le gain n'est pas décoratif, il est
   mesurable — la première donnée réelle du site remonte.
   ===================================================================== */
.home-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding-block: clamp(40px, 6vw, 88px) !important;
}

/* La copie garde sa mesure de lecture au lieu de suivre la colonne. */
.home-hero__copy {
    max-width: 34rem;
}

/* ---------------------------------------------------------------------
   HOME-VISUAL-RHYTHM-001 — la bande du ciel dit qu'elle porte une DONNÉE
   ---------------------------------------------------------------------
   C'est la seule matière datée et vivante de l'accueil, et elle était
   typographiée comme une légende : la ligne de la Lune — le seul fait
   d'aujourd'hui — sortait en 17 px gris, plus faible que les six lignes
   de planètes posées dessous.

   Rien n'est ajouté : ni fond, ni carte, ni couleur supplémentaire. On
   déplace du POIDS, à l'échelle et à l'encre. La donnée passe devant son
   commentaire, ce que la doctrine demande depuis VISUAL-HIERARCHY-001.
   --------------------------------------------------------------------- */
.home-sky__lead {
    max-width: 34rem;
    color: var(--ink) !important;
    font-size: clamp(1.12rem, 1.5vw, 1.32rem) !important;
    line-height: 1.42 !important;
}

/* Le relevé des rétrogrades et le prochain temps fort suivaient la grille
   sans respiration : la phrase se lisait comme la suite de la dernière
   planète. Elle reprend sa ligne. */
.home-sky > p {
    margin-top: 22px;
}

/* Le resserrement des deux sous-sections de la bande (`.home-signs`,
   `margin-top: 12px !important`) a été TENTÉ puis abandonné : il est
   délibéré depuis VISUAL-HIERARCHY-001 — « le ciel du jour et les signes se
   lisent comme une seule séquence ». Ce qui manquait n'était pas de l'espace,
   c'était le surtitre que ce chantier avait d'abord retiré. Il est revenu ;
   aucune règle n'est ajoutée ici. */

/* =====================================================================
   24. GRAMMAIRES DE COMPOSITION — UI-VISUAL-DIFFERENTIATION-001
   ---------------------------------------------------------------------
   PORTÉE. Cette section introduit trois choses de niveau SYSTÈME (la fonte
   de titrage, l'échelle typographique, six primitives de forme) et les
   ACTIVE uniquement sur les pages qui portent la classe `.grammaire`.
   Au 2026-08-23 ce sont trois pages pilotes, et elles seules :

       .g-reponse      /placements/mars-en-belier/
       .g-portrait     /signes/belier/
       .g-orientation  /placements/

   Les ~1 208 autres pages ne voient RIEN de cette section : elles n'ont pas
   la classe, elles ne téléchargent même pas la fonte (une police n'est
   chargée que si elle est réellement employée). C'est délibéré : la Phase C
   est une preuve par trois surfaces, pas une propagation.

   GOUVERNANCE — les quatre règles de la couche CLARTÉ s'appliquent ici :
     1. Aucune couleur en dur : tout vient de `var(--…)`.
     2. `!important` uniquement pour défaire la section 3, qui déclare
        `font-size`, `line-height`, `letter-spacing`, `font-weight`, `color`
        et `margin` des titres en `!important`. Sur toute autre propriété,
        il est interdit.
     3. On préfère retirer. Les formes ci-dessous en REMPLACENT d'autres
        (la carte devient un filet), elles ne s'y ajoutent pas.
     4. Rien d'orphelin : tout est sous un des huit intertitres numérotés.

   DOCTRINE TYPOGRAPHIQUE
     Le SERIF est la voix éditoriale : ce qui est écrit et pensé.
     Le SANS est la voix de la machine : ce qui est calculé, daté,
     étiqueté, cliquable. Le lecteur distingue les deux registres à la
     TEXTURE, pas seulement à la taille — ce qui règle le `h3` mesuré en
     Phase A à 0,883 fois la taille du corps.
   ===================================================================== */

/* ---------------------------------------------------------------------
   24.1 · LA FONTE DE TITRAGE
   Newsreader, retenue sur mesure et non sur goût : à hauteur d'x égale
   elle est la plus économique en place des trois confrontées (encombrement
   100 contre 106 pour Source Serif 4 et 121 pour Fraunces) et 9,8 % plus
   économique que la pile système. Le titre de section le plus long du site
   y tient en 2 lignes contre 3.

   Un seul fichier auto-hébergé, 34 Ko, axe `wght` 400-600 conservé et
   `opsz` figé : deux graisses utiles pour une requête. Aucune requête
   tierce ; `font-src 'self'` de la CSP suffit, rien à changer.
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Astrologix Titrage";
    src: url("../fonts/newsreader-titrage-vtt3D9s.woff2") format("woff2-variations");
    font-weight: 400 600;
    font-display: swap;
    /* Les glyphes astrologiques ne passent PAS par la fonte de titrage :
       `Astro Glyphs` (section 3) les capte avant grâce à son unicode-range,
       et ils prennent la couleur `--symbol`. Cette borne haute évite que
       Newsreader ne réclame des caractères qu'elle n'a pas. */
    unicode-range: U+0000-2189;
}

/* Repli à métriques calées. Ce qui provoque le décalage de mise en page
   pendant le `swap`, c'est l'écart d'ascendante et de descendante entre la
   fonte de repli et la fonte finale. Ces deux valeurs sont EXACTEMENT
   celles de Newsreader (hhea 1470 / -530 sur 2000 unités par em), donc la
   boîte de ligne est identique avant et après l'arrivée du fichier.
   `size-adjust` n'est PAS calé : la fonte de repli diffère selon le système
   (Georgia, Times, DejaVu Serif) et aucune valeur unique ne conviendrait.
   Le critère qui tranche est le CLS mesuré, pas la valeur théorique. */
@font-face {
    font-family: "Astrologix Titrage Repli";
    src: local("Georgia"), local("Times New Roman"), local("DejaVu Serif"), local("Liberation Serif");
    ascent-override: 73.5%;
    descent-override: 26.5%;
    line-gap-override: 0%;
    font-display: swap;
    unicode-range: U+0000-2189;
}

.grammaire {
    --titre: "Astro Glyphs", "Astrologix Titrage", "Astrologix Titrage Repli", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------------
   24.2 · L'ÉCHELLE — serif pour la voix éditoriale, sans pour la machine
   Les `!important` de ce bloc défont ceux de la section 3, et rien d'autre.
   --------------------------------------------------------------------- */
.grammaire h1,
.grammaire .vd-idee,
.grammaire h2,
.grammaire h3,
.grammaire .vd-cite {
    font-family: var(--titre);
}

.grammaire h1 {
    font-size: clamp(2.1rem, 1.35rem + 2.4vw, 3.25rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.018em !important;
    font-weight: 400 !important;
    max-width: 20ch;
    text-wrap: balance;
}

/* GRANDE IDÉE — le rang qui manquait entre le titre de section (30 px) et
   le corps (17 px). Serif, graisse 400 : elle se distingue du `h2` par la
   graisse et du corps par la texture. */
.grammaire .vd-idee {
    font-size: clamp(1.35rem, 1.05rem + 0.95vw, 1.7rem);
    line-height: 1.34;
    letter-spacing: -0.004em;
    font-weight: 400;
    color: var(--ink);
    max-width: 34ch;
    margin: 0;
    text-wrap: balance;
}

.grammaire h2 {
    font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.011em !important;
    font-weight: 600 !important;
    max-width: 24ch;
    text-wrap: balance;
}

/* Le `h3` passe en serif à 1,2 rem. En Phase A il valait 17 px pour un
   corps à 17 px : il ne se distinguait que par la graisse. */
.grammaire h3 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.004em !important;
    font-weight: 600 !important;
}

/* Étiquette, donnée, note : SANS, toujours. C'est la voix de la machine. */
.grammaire .vd-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}
.grammaire .vd-label--sym { color: var(--symbol); }
.grammaire .vd-label--mark { color: var(--marker); }
.grammaire .vd-label--tens { color: var(--tension); }

.grammaire .vd-data {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.grammaire .vd-note {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 64ch;
}

/* Citation et source : serif, sur une réglure symbolique — c'est un propos
   rapporté, donc de l'interprétation, donc le domaine du violet. */
.grammaire .vd-cite {
    margin: 0;
    padding-left: 18px;
    border-left: 2px solid var(--symbol-line);
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    max-width: 52ch;
}

/* ---------------------------------------------------------------------
   24.3 · RYTHME ET LARGEUR
   Trois intervalles nommés au lieu d'un seul, et UN SEUL AXE GAUCHE : la
   mesure de lecture ne se centre pas, elle s'aligne sur le bord gauche de
   la mesure large. Le changement de largeur devient alors un signal de
   registre au lieu d'un flottement.
   --------------------------------------------------------------------- */
.grammaire main > *:not(:first-child):not(.vd-band) { margin-top: var(--flow); }
.grammaire .vd-tight > * + * { margin-top: var(--flow-tight); }
.grammaire .vd-flow > * + * { margin-top: var(--flow); }
/* LA RUPTURE DOIT PESER PLUS LOURD QUE LE COURANT. À (0,2,0) contre (0,3,1)
   pour la règle de flux ci-dessus, `.vd-break` perdait en silence et les trois
   rythmes gouvernés se rendaient tous à 56 px. Réécrit à (0,3,1), et placé
   APRÈS la règle de flux : à spécificité égale, le dernier gagne. Ne pas
   réordonner ces deux règles. Mesures : PHASE_C.md §4. */
.grammaire main > .vd-break:not(:first-child) { margin-top: var(--flow-break); }

.grammaire .vd-read {
    width: min(var(--wrap), calc(100% - 40px));
    margin-inline: auto;
}
.grammaire .vd-read > * { max-width: var(--wrap-tight); }

/* Une BANDE est un conteneur pleine largeur, jamais une carte : ni bordure,
   ni rayon, ni ombre. Elle est elle-même la rupture, donc son intervalle
   amont est le rythme courant et non la rupture — sinon la séparation est
   comptée deux fois. */
.grammaire .vd-band {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: var(--flow);
    margin-top: var(--flow);
}
/* LA SURFACE DE BANDE EST UN JETON À ELLE, sous `.grammaire` et NON dans le
   `:root` : elle ne touche ni `--surface-muted` ni `--symbol-wash`, qui servent
   ailleurs. Règle : une bande doit être VISIBLE pour exister — deux points sur
   255 ne sont pas un changement de zone. Contraste le plus serré vérifié :
   `--muted` #5d5b54 sur `--band-muted` = 5,51:1. Mesures : PHASE_C.md §4. */
.grammaire { --band-muted: #ece7dc; --band-sym: #eae6f6; }
.grammaire .vd-band--muted { background: var(--band-muted); }
.grammaire .vd-band--sym { background: var(--band-sym); }

/* ---------------------------------------------------------------------
   24.4 · LES SIX FORMES AUTORISÉES
   Catalogue fermé. Pas de rayon au-delà de 3 px, pas d'ombre, pas de
   dégradé, pas de carte décorative. Une fonction n'est PAS une carte.
   --------------------------------------------------------------------- */

/* 1 · FICHE FACTUELLE — étiquette en petites capitales, valeur en gras, en
      ligne. Reprise du résultat natal, seule signature typographique que
      le produit possédait déjà. */
.grammaire .vd-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 30px;
    margin: 0;
    padding: 0;
}
.grammaire .vd-facts > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.grammaire .vd-facts dt {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.grammaire .vd-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.grammaire .vd-facts dd.is-sym { color: var(--symbol); }
.grammaire .vd-facts dd.is-mark { color: var(--marker); }
.grammaire .vd-facts dd.is-tens { color: var(--tension); }

/* 2 · FILET — un trait supérieur et une étiquette. Remplace la carte. */
.grammaire .vd-rule {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.grammaire .vd-rule--sym { border-top-color: var(--symbol-line); }
.grammaire .vd-rule--mark { border-top-color: var(--marker-line); }
.grammaire .vd-rule--tens { border-top-color: var(--tension-line); }

/* 3 · RÉGLURE SYMBOLIQUE — un filet vertical violet. Marque ce qui est
      INTERPRÉTÉ, par opposition à ce qui est calculé. */
.grammaire .vd-rail {
    border-left: 2px solid var(--symbol-line);
    padding-left: 22px;
}

/* 4 · SURFACE BLANCHE — objets fonctionnels uniquement : saisie, action,
      résultat isolé. Et rien d'autre. */
.grammaire .vd-object {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 3px;
    padding: 22px 24px;
}

/* 5 · FIGURE — SVG informationnel au trait. */
.grammaire .vd-figure { margin: 0; }
.grammaire .vd-figure svg { display: block; width: 100%; height: auto; }
.grammaire .vd-figure figcaption {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

/* 6 · RANG DE NAVIGATION — remplace la grille de cartes. */
.grammaire .vd-navrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}
.grammaire .vd-navrow:hover { border-bottom-color: var(--accent); }
.grammaire .vd-navrow__g {
    flex: none;
    width: 1.5em;
    font-size: 1.15rem;
    color: var(--symbol);
}
.grammaire .vd-navrow__n {
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.grammaire .vd-navrow:hover .vd-navrow__n {
    color: var(--accent-dark);
    text-decoration-thickness: 2px;
}
.grammaire .vd-navrow__m {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   24.5 · GRILLES GOUVERNÉES
   La gouttière vaut au moins 0,09 de la largeur de colonne et vient
   toujours d'un jeton. En Phase A, 50 grilles sur 148 étaient sous 0,05 :
   `.dominant-row` séparait deux colonnes de 506 px par 12 px.
   --------------------------------------------------------------------- */
.grammaire .vd-cols-2,
.grammaire .vd-cols-3,
.grammaire .vd-cols-4 { display: grid; }
.grammaire .vd-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--flow-tight) var(--gut-2); }
.grammaire .vd-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--flow-tight) var(--gut-3); }
.grammaire .vd-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--flow-tight) var(--gut-4); }
.grammaire .vd-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--gut-2);
    align-items: start;
}

/* ---------------------------------------------------------------------
   24.6 · MOBILE
   Une règle écrite pour le mobile se borne au mobile (règle 5 de CLARTÉ).
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .grammaire .vd-cols-2,
    .grammaire .vd-cols-3,
    .grammaire .vd-cols-4,
    .grammaire .vd-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .grammaire {
        --flow-tight: 22px;
        --flow: 40px;
        --flow-break: 68px;
        --gut-2: 24px;
        --gut-3: 24px;
        --gut-4: 20px;
    }
}

/* ---------------------------------------------------------------------
   24.7 · GRAMMAIRE « RÉPONSE » — /placements/{planète}-en-{signe}/
   Ouverture : titre + verdict + faits, en regard du cadran. La réponse est
   au-dessus de la ligne de flottaison. Rythme très serré en tête, puis il
   s'ouvre. Cinq fonctions distinctes, séparées par le rythme, la largeur
   et la bande — jamais par une succession de boîtes.
   --------------------------------------------------------------------- */
.g-reponse .vd-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--gut-2);
    align-items: start;
    margin-top: 18px;
}
.g-reponse .vd-open__aside { width: 260px; }
.g-reponse .vd-open .eyebrow { margin-bottom: 6px !important; }
.g-reponse .vd-open h1 { margin-bottom: 14px !important; }

/* Le VERDICT : la dignité, dite une fois, en grand, dans le domaine
   symbolique. C'est la réponse à « et alors ? ». */
.g-reponse .vd-verdict {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
}
.g-reponse .vd-verdict__v {
    font-family: var(--titre);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--symbol);
}
.g-reponse .vd-open .vd-facts { padding-top: 14px; }
.g-reponse .vd-open .vd-idee { margin-top: 22px; }
.g-reponse .vd-open .vd-note { margin-top: 10px; }
.g-reponse .vd-open .freshness-note { margin-top: 18px; }

/* La phrase « en clair » n'est plus un bandeau : c'est une note en fin de
   section, à sa vraie importance. */
.g-reponse .vd-simple {
    margin-top: var(--flow-tight);
    max-width: 68ch;
    color: var(--muted);
    font-size: 0.94rem;
}

.g-reponse .vd-mt { margin-top: var(--flow-tight); }

/* Listes de lecture : un filet par item plutôt qu'une boîte par item. */
.g-reponse .vd-list { list-style: none; margin: 0; padding: 0; }
.g-reponse .vd-list li {
    border-top: 1px solid var(--line-soft);
    padding: 12px 0 0;
    margin: 0 0 12px;
    max-width: 68ch;
}
.g-reponse .vd-list--sym li { border-top-color: var(--symbol-line); }
.g-reponse .vd-list--tens li { border-top-color: var(--tension-line); }

.g-reponse .vd-live { margin-top: var(--flow); }

@media (max-width: 860px) {
    .g-reponse .vd-open { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .g-reponse .vd-open__aside { width: min(220px, 62%); margin-inline: auto; }
    .g-reponse .vd-verdict { flex-wrap: wrap; gap: 4px 12px; }
}
.g-reponse .vd-answer-rest { margin-top: 14px; max-width: 62ch; }
.g-reponse .vd-aside-meta {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------------------
   24.7 bis · RÉPONSE / COURTE — la variante des familles brèves
   UI-GRAMMAR-RESPONSE-ROLLDOWN-001, vague 2.

   Trois modificateurs, et rien d'autre. Une variante courte ne mérite pas un
   jeu de règles à elle : elle emploie MOINS de primitives que RÉPONSE, elle
   n'en invente pas de nouvelles. Ces trois classes n'existent que là où le
   gabarit court les pose — aucune page planète × signe ne les porte.
   --------------------------------------------------------------------- */

/* 1 · OUVERTURE SANS COLONNE LATÉRALE. `.vd-open` est une grille à deux
      colonnes dont la seconde porte la figure. Quand la grammaire ne
      justifie aucune figure, cette colonne n'a rien à porter : l'ouverture
      redevient une colonne unique, à la mesure de lecture, plutôt que de
      laisser 260 px de vide en regard du titre. */
.g-reponse .vd-open--seule {
    display: block;
    max-width: var(--wrap-tight, 760px);
}
.g-reponse .vd-open--seule .vd-idee { max-width: 100%; }

/* 2 · VERDICT À DEUX AUTORITÉS. Quand deux systèmes doctrinaux donnent des
      valeurs différentes, ils sont affichés l'un sous l'autre, au MÊME rang
      typographique : aucun ne corrige l'autre, la divergence est une donnée.
      L'intervalle se resserre entre deux lignes de verdict, pour qu'elles se
      lisent comme un couple et non comme deux réponses concurrentes. */
.g-reponse .vd-verdict--paire { margin-bottom: 6px; }
.g-reponse .vd-verdict--paire + .vd-verdict--paire { margin-bottom: 18px; }
.g-reponse .vd-verdict--paire .vd-verdict__v { font-size: 1.3rem; }

/* 3 · RANG DE NAVIGATION NON CLIQUABLE — la page en cours dans sa propre
      liste de voisins. Elle garde le rang, perd l'affordance. */
.grammaire .vd-navrow--courant {
    color: var(--muted);
    cursor: default;
}

/* ---------------------------------------------------------------------
   24.8 · GRAMMAIRE « PORTRAIT » — /signes/{signe}/
   Ouverture : la FIGURE ouvre, le titre s'y adosse — l'inverse de RÉPONSE.
   Corps long, chapitré, NUMÉROTÉ, en mesure de lecture : sur une page de
   plus de 8 000 px, le lecteur n'avait aucun repère de progression.
   Peu de colonnes : c'est un texte, pas un tableau de bord.
   --------------------------------------------------------------------- */
.g-portrait .vd-open { margin-top: 14px; }
.g-portrait .vd-open .eyebrow { margin-bottom: 12px !important; }
.g-portrait .vd-strip { margin-bottom: 26px; }

.g-portrait .vd-open__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--gut-2);
    align-items: end;
}
.g-portrait .vd-open__title h1 { margin-bottom: 0 !important; }
.g-portrait .vd-open .lede { margin-top: 22px; max-width: 58ch; }
.g-portrait .vd-open .vd-idee { margin-top: 14px; }
.g-portrait .vd-aside-meta {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

/* Chapitres numérotés : le repère de progression qui manquait. Le compteur
   ne s'applique QU'aux chapitres en mesure de lecture — les sections larges
   ne sont pas des chapitres, ce sont des annexes. */
.g-portrait main { counter-reset: vd-chap; }
.g-portrait .vd-chapter { counter-increment: vd-chap; }
.g-portrait .vd-chapter > h2::before {
    content: counter(vd-chap, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: var(--sys, inherit);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--symbol);
}
.g-portrait .vd-mt { margin-top: var(--flow-tight); }

@media (max-width: 860px) {
    .g-portrait .vd-open__title { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
}
/* Le bandeau de fraîcheur est centré par une génération antérieure ; dans
   les grammaires il vit dans une colonne et suit son axe. */
.grammaire .vd-aside-meta .content-freshness,
.grammaire .vd-aside-meta > * {
    text-align: left;
    margin-inline: 0;
    width: auto;
}

/* ---------------------------------------------------------------------
   24.9 · GRAMMAIRE « ORIENTATION » — /placements/
   Ouverture : le VOLUME est la promesse. Dominante : la MATRICE — la figure
   EST la navigation, et elle enseigne les dignités en même temps qu'elle
   oriente. Rythme large et aéré, très peu de prose.
   --------------------------------------------------------------------- */
.g-orientation .vd-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gut-2);
    align-items: end;
    margin-top: 14px;
}
.g-orientation .vd-open .lede { margin-bottom: 0; }
.g-orientation .vd-volume {
    display: flex;
    gap: 34px;
    margin: 0;
}
.g-orientation .vd-volume span { text-align: right; }
.g-orientation .vd-volume b {
    display: block;
    font-family: var(--titre);
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--symbol);
    font-variant-numeric: tabular-nums;
}
.g-orientation .vd-volume span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}
.g-orientation .vd-volume b + * { margin-top: 6px; }

.g-orientation .vd-matrix-wrap { margin-top: var(--flow); }
.g-orientation .vd-matrix-scroll { overflow-x: auto; margin-top: var(--flow-tight); }
.g-orientation .vd-matrix {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.g-orientation .vd-matrix th,
.g-orientation .vd-matrix td { padding: 0; text-align: center; }
.g-orientation .vd-matrix thead th {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--symbol);
}
.g-orientation .vd-matrix tbody th {
    text-align: left;
    padding-right: 14px;
    white-space: nowrap;
    border-right: 1px solid var(--line);
    font-size: 0.86rem;
    font-weight: 600;
}
.g-orientation .vd-matrix__g { color: var(--symbol); font-weight: 400; margin-right: 6px; }
.g-orientation .vd-cell {
    display: block;
    height: 38px;
    line-height: 38px;
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
}
.g-orientation .vd-cell:hover { background: var(--symbol-wash); color: var(--symbol-deep); }
.g-orientation .vd-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* L'ÉTAT COLORE LA MARQUE, JAMAIS LE LIEN.
   Première version : `color` était posé sur le `<a>` lui-même. La garde de
   palette l'a relevé en production — quinze liens `.is-domicile` rendus en
   violet — et la baseline est explicite : « le violet n'est pas une seconde
   couleur d'interface ; un violet sur un `a` est un bug » (UI_BASELINE_001 §3).

   Le défaut n'est pas le violet, c'est que L'ÉTAT COLORE LE LIEN : le corail de
   `exil`/`chute` et l'ambre de `exaltation` le faisaient tout autant, sans que
   la garde puisse les voir. Une seule correction, appliquée aux quatre états.

   Ce qui est peint est désormais la MARQUE que la cellule contient — le mot en
   desktop (`.vd-cell__w`), la forme en mobile (`::after`) — et le lien garde la
   couleur d'un lien. Le rendu est inchangé au pixel : la marque est le seul
   contenu visible de la cellule. La graisse reste sur le lien, elle ne dit rien
   de l'interaction. */
.g-orientation .vd-cell.is-domicile { font-weight: 600; }
.g-orientation .vd-cell.is-exaltation { font-weight: 600; }
.g-orientation .vd-cell.is-domicile .vd-cell__w,
.g-orientation .vd-cell.is-domicile::after { color: var(--symbol); }
.g-orientation .vd-cell.is-exaltation .vd-cell__w,
.g-orientation .vd-cell.is-exaltation::after { color: var(--marker-deep); }
.g-orientation .vd-cell.is-exil .vd-cell__w,
.g-orientation .vd-cell.is-chute .vd-cell__w,
.g-orientation .vd-cell.is-exil::after,
.g-orientation .vd-cell.is-chute::after { color: var(--tension); }

.g-orientation .vd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--muted);
}
.g-orientation .vd-legend .is-domicile { color: var(--symbol); }
.g-orientation .vd-legend .is-exaltation { color: var(--marker-deep); }
.g-orientation .vd-legend .is-exil { color: var(--tension); }

.g-orientation .vd-planet-signs { margin-top: 8px; }
.g-orientation .vd-planet-signs a { white-space: nowrap; }
.g-orientation .vd-mt { margin-top: var(--flow-tight); }

/* MOBILE — la matrice ne rétrécit pas, elle CHANGE DE NOTATION.
   Le mot cède la place à une forme, le nom de planète à son glyphe. La grille
   tient dans la largeur, les libellés complets restent lus par les lecteurs
   d'écran, et le statut est porté par la FORME autant que par la couleur.
   Cible tactile mesurée : 25 x 44 px, au-dessus du minimum WCAG 2.2 AA. */
@media (max-width: 700px) {
    .g-orientation .vd-matrix tbody th { padding-right: 8px; font-size: 0.78rem; }
    .g-orientation .vd-matrix__n { display: none; }
    .g-orientation .vd-matrix thead th { font-size: 0.9rem; }
    .g-orientation .vd-cell { height: 44px; line-height: 44px; font-size: 0.95rem; }
    .g-orientation .vd-cell__w {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .g-orientation .vd-cell::after { content: "·"; color: var(--line); }
    .g-orientation .vd-cell.is-domicile::after { content: "\25CF"; }
    .g-orientation .vd-cell.is-exaltation::after { content: "\25C6"; }
    .g-orientation .vd-cell.is-exil::after,
    .g-orientation .vd-cell.is-chute::after { content: "\25CB"; }
    .g-orientation .vd-legend .is-domicile::before { content: "\25CF  "; }
    .g-orientation .vd-legend .is-exaltation::before { content: "\25C6  "; }
    .g-orientation .vd-legend .is-exil::before { content: "\25CB  "; }
}
@media (max-width: 860px) {
    .g-orientation .vd-open { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
    .g-orientation .vd-volume span { text-align: left; }
    .g-orientation .vd-volume b { font-size: 2rem; }
}
/* Le `th` de la section 10 met TOUS les en-têtes de tableau en capitales : juste
   pour un en-tête de colonne de données, faux pour l'en-tête de LIGNE de la
   matrice, qui porte un nom propre de planète. `!important` défait ici une
   génération antérieure — c'est son seul usage autorisé. */
.g-orientation .vd-matrix tbody th {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.86rem !important;
    color: var(--ink) !important;
}
.g-orientation .vd-matrix thead th {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: var(--symbol) !important;
}

/* ---------------------------------------------------------------------
   24.10 · CORRECTIFS ISSUS DE LA MESURE DES PAGES RÉELLES
   Deux défauts que seules les pages complètes ont révélés, et que les
   maquettes abrégées de la Phase B ne pouvaient pas montrer.
   --------------------------------------------------------------------- */

/* 1 · Les 120 liens de signes de « Ce que chaque planète observe » étaient
      des liens en ligne de 19 px de haut. L'exception « cible en ligne dans
      un bloc de texte » de WCAG 2.5.8 les couvrirait, mais l'ancienne grille
      offrait des cibles pleines : on ne régresse pas sur ce point. */
.g-orientation .vd-planet-signs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    line-height: 1;
}
.g-orientation .vd-planet-signs a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px 0 0;
    margin-right: 8px;
    border-right: 1px solid var(--line-soft);
}
.g-orientation .vd-planet-signs a:last-child { border-right: 0; margin-right: 0; }

.g-orientation .vd-scroll-hint { display: none; }

/* 3 · L'ÉTIQUETTE DE FONCTION SE COLLE À CE QUI PRÉCÈDE. `.vd-label` naît sans
      marge parce qu'elle vit d'ordinaire en tête d'un filet, qui porte déjà son
      retrait. Posée dans le fil de l'ouverture, elle touchait la fiche
      factuelle. L'étiquette appartient à ce qui SUIT : marge large au-dessus,
      étroite en dessous. */
.grammaire .vd-open__main > .vd-label { margin-top: 26px; }
.grammaire .vd-open__main > .vd-label + .vd-idee { margin-top: 6px; }

/* 4 · LA BANDE ZODIACALE EN MOBILE — voir le commentaire du composant. Sous
      700 px la couche fine (douze glyphes, bornes en degrés) tombe à 4-6 px de
      haut : elle est retirée, et la bande garde ce qui se lit — la règle des
      douze arcs et celui qui est occupé. */
@media (max-width: 700px) {
    .grammaire .vd-strip__fine { display: none; }
    .grammaire .vd-strip svg { min-height: 26px; }
}

/* 2 · LA MATRICE EN MOBILE. Règle : la cellule ne descend jamais sous
      24 x 24 (WCAG 2.2 AA) ; si la grille ne tient pas, c'est le CONTENEUR
      qui défile, jamais le document — motif déjà employé par `.table-wrap`
      et `.sky-table-scroll`. Arbitrage et mesures : PHASE_C.md §4. */
/* 2 bis · Un `th, td` NU (cf. « rembourrage des cellules », plus haut) déclare
      `padding: … !important` et battait le `padding: 0` de la matrice, plus
      spécifique mais sans `!important` : cellule mesurée à 16 x 44 au lieu de
      43 x 44. On ne touche pas à la règle ancienne — la retirer changerait
      toutes les tables du site — on la défait sur la SEULE matrice. */
.g-orientation .vd-matrix th,
.g-orientation .vd-matrix td {
    padding: 0 !important;
    border-bottom: 0 !important;
}
.g-orientation .vd-matrix tbody th {
    padding-right: 14px !important;
}

@media (max-width: 700px) {
    /* La grille tient alors dans la largeur SANS rétrécir la cible : la table
       est en `fixed`, et sa largeur minimale est calée pour que la grille
       ENTIÈRE tienne dans 390 px — la largeur de référence — sans rien couper :
       27 x 44 par cellule, au-dessus du minimum WCAG 2.2 AA de 24 x 24. Sous
       390 px le conteneur défile, et c'est seulement là que l'indication de
       défilement s'affiche : une indication fausse serait pire que pas
       d'indication. Mesuré : `document.scrollWidth == clientWidth`. */
    .g-orientation .vd-matrix {
        table-layout: fixed;
        min-width: 356px;
    }
    .g-orientation .vd-matrix tbody th {
        width: 30px;
        padding-right: 4px !important;
    }
    .g-orientation .vd-matrix thead th:first-child { width: 30px; }
    .g-orientation .vd-matrix-scroll {
        position: relative;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .g-orientation .vd-matrix-scroll::after {
        content: "";
        position: sticky;
        right: 0;
        top: 0;
        float: right;
        width: 26px;
        height: 100%;
        margin-left: -26px;
        background: linear-gradient(to right, rgba(246, 243, 238, 0), var(--bg));
        pointer-events: none;
    }
    .g-orientation .vd-matrix thead th { scroll-snap-align: start; }
}
@media (max-width: 385px) {
    .g-orientation .vd-scroll-hint { display: block; }
}


/* ══ OFFRE MENSUELLE — VALEUR-PERCUE-001 §16, §24, §33 ══════════════════════════════
   Le prix et l'action montent dans le premier écran. Rien d'autre ne bouge : ni
   couleur, ni cadre, ni figure. §33 interdit d'en faire un tableau de bord SaaS —
   pas de carte de métrique, pas de jauge, pas de cercle 0-100. LA DONNÉE EST LA
   FIGURE, et elle se lit comme du texte.                                            */

.offer-price {
    margin: 14px 0 0;
    max-width: 62ch;
}

.product-hero .action-pair {
    margin-top: 16px;
}

/* §24 · PLAFOND DE VITRINE. Le troisième jour marqué est un choix d'EXPOSITION,
   pas un retrait de produit : sous 640 px la colonne est trop étroite pour trois
   entrées et leur motif sans que la section cesse d'être lisible d'un coup d'œil. */
@media (max-width: 640px) {
    .demo-jours .demo-jour--desktop { display: none; }
}



/* ══ HOMEPAGE 1C — UI-SPECIAL-SURFACES-001 ══════════════════════════════════════════
   SEPT CLASSES, ET CHACUNE PORTE UNE STRUCTURE, pas une décoration.

   `vd-facts` / `vd-label` / `vd-data` / `vd-read` n'ont PAS été réutilisés : ils sont
   tous définis sous `.grammaire`, la grammaire scopée à deux outils pilotes. Posés nus
   sur l'accueil, ils ne feraient rien — c'est exactement la classe fantôme que le canari
   a fait payer 41 px. (Le canari lui-même en pose un ; dette consignée, non traitée ici.)

   Aucune palette nouvelle, aucun fond coloré ajouté : les deux bandes de la page
   préexistent, et la donnée reste ce qui domine.                                       */

/* La liste de faits : un terme, sa valeur, et une note qui explique sans occuper le rang
   de la valeur. C'est la forme de donnée de toute la page — ciel, limite, mois.         */
.home-facts {
    display: grid;
    gap: 4px 18px;
    margin: 18px 0 0;
    padding: 0;
}

.home-facts dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-facts dd {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.45;
}

.home-facts__note {
    display: block;
    margin-top: 2px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--muted);
    max-width: 62ch;
}

/* Le ciel : six positions. En colonnes tant qu'elles tiennent, sans jamais tronquer ni
   demander un défilement horizontal. La note descend sous la valeur, pas à côté.

   L'interligne y est plus serré qu'ailleurs, et c'est mesuré : à six entrées, chaque
   pixel de gouttière est payé six fois. Aucune information n'est retirée pour autant —
   les six positions ET leurs thèmes sont ceux que la page servait déjà.                 */
.home-facts--ciel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 24px;
}

.home-facts--ciel dd {
    margin-bottom: 10px;
    font-size: 1rem;
}

.home-facts--ciel .home-facts__note {
    font-size: 0.85rem;
    line-height: 1.45;
}

/* La limite du signe se lit, elle ne se balaie pas : mesure de lecture, comme la FAQ. */
.home-limite {
    max-width: var(--wrap-tight);
}

/* La démonstration natale : la roue et sa lecture chiffrée en regard. Sous 860 px, la
   roue passe AU-DESSUS du texte — une roue à 45 % de largeur n'est plus lisible.        */
.home-demo__figure {
    margin: 0;
}

.home-demo__figure figcaption {
    margin-top: 10px;
}

.home-sky__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 16px;
}

@media (max-width: 860px) {
    /* §12 et §46 : six valeurs en 2 × 3, visibles sans six lignes pleines. */
    .home-facts--ciel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* §46 : la roue au-dessus des données, jamais côte à côte. */
    .home-demo__split { display: block; }
    .home-demo__figure { margin-bottom: 22px; }
}


/* ══ CONTRAT D'ACTION — UI-SPECIAL-SURFACES-001 §3 ═══════════════════════════════════
   COUCHE COMPATIBLE, PAS UNE MIGRATION. `.secondary-action` reste en place et continue
   de fonctionner partout : cette vague éprouve un contrat sur UNE page, elle ne
   refactorise pas soixante-six blocs.

   CE QUE LA MESURE A MONTRÉ, et qui justifie de renommer plutôt que de corriger.
   La même classe rend trois choses selon la surface, relevé au navigateur sur cinq pages :

     canari, placements   `.secondary-action` bouton PLEIN vert, gras 600
                          `--light` bouton BORDÉ, texte sombre
     outil                `.secondary-action` LIEN SOULIGNÉ, sans fond ni bord
     accueil              `.secondary-action` bouton plein
                          `--light` LIEN SOULIGNÉ

   Deux faits en découlent. `.secondary-action` est le PRIMAIRE de fait — son nom ment.
   Et `--light` ne désigne pas la même chose d'une page à l'autre : bouton bordé ici,
   lien souligné là. Ces doublons portent donc une différence de contexte RÉELLE, et le
   §4 interdit de les fusionner à l'aveugle. Ils ne sont pas touchés.

   LE FOCUS EST RESTAURÉ (§5). L'ancien contrat pose `outline: none` et le remplace par
   une ombre — la MÊME ombre que `:hover` sur plusieurs surfaces. Au clavier, le focus y
   est donc indistinguable d'un survol à la souris. Ici, un vrai `:focus-visible`, avec
   un anneau qui tient sur les deux fonds du site : le fond pâle de la page et le vert
   plein du bouton primaire.                                                            */

.action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 0.97rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    /* Cible tactile : 44 px de haut minimum, sans dépendre de la longueur du libellé. */
    min-height: 44px;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* UN SEUL par écran. C'est la seule action que la page recommande vraiment. */
.action--primaire {
    padding: 11px 20px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #fffaf0;
    font-weight: 600;
}

.action--primaire:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* §6 : le secondaire ne doit PAS peser autant que le primaire. Un bouton bordé de même
   taille pèse presque autant — c'était le défaut du `--light` actuel. Ici, une action
   textuelle : pas de fond, pas de bordure, pas de rayon. Le poids visuel est franchement
   moindre, et la hiérarchie se lit sans avoir à comparer deux nuances. */
.action--secondaire {
    padding: 11px 2px;
    border: 0;
    background: none;
    color: var(--accent-dark);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.action--secondaire:hover {
    color: var(--ink);
}

/* §5 : un anneau RÉEL, pas une ombre. `outline` se dessine par-dessus le fond quel qu'il
   soit, et l'offset le décolle du bouton plein pour qu'il reste lisible dessus. La couleur
   solaire tranche à la fois sur le beige de la page et sur le vert du primaire. */
.action:focus-visible {
    outline: 3px solid var(--solar);
    outline-offset: 3px;
    border-radius: 8px;
}

/* Rien ne change hors focus : pas de décalage, pas de saut de mise en page. */
.action:focus:not(:focus-visible) {
    outline: none;
}

/* Une rangée d'actions : le primaire d'abord, et de l'air entre les deux poids. */
.action-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: 18px;
}

@media (max-width: 640px) {
    /* Mobile : le primaire prend la largeur, le secondaire reste une ligne de texte. */
    .action-pair { gap: 4px 0; }
    .action-pair .action--primaire { width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------
   24.9 · GRAMMAIRE INSTRUMENT — PILOTE
   UI-VISUAL-IMPACT-PRIORITY-001. Deux surfaces, et elles seules :

       .g-instrument   /outils/transits-personnalises/
       .g-instrument   /outils/dominantes-astrologiques/

   CE QUE CETTE GRAMMAIRE AFFIRME. Sur un instrument, la DONNÉE CALCULÉE est
   le matériau visuel principal. Elle n'est pas décorée : elle est montrée
   tôt, en tabulaire, à sa propre échelle. Tout ce qui est ici existait déjà
   dans le résultat et n'était pas visible avant plusieurs écrans.

   AUCUNE FORME NOUVELLE. La fiche (`.vd-facts`), la matrice (`.vd-matrix`)
   et le volume (`.vd-volume`) appartiennent au catalogue fermé de la Phase B.
   Pas de rayon au-delà de 3 px, pas d'ombre, pas de dégradé, pas de carte.

   COULEUR. L'ambre `--marker` ne porte QUE des repères mesurés — un orbe, un
   compte. Il ne qualifie pas : un orbe de 0,10° n'est ni bon ni mauvais. Le
   vert reste l'action, le violet l'identité symbolique.
   --------------------------------------------------------------------- */

/* L'ARRIVÉE DU DÉFILEMENT MOBILE, SOUS L'EN-TÊTE COLLANT.
   `tool_form.js` amène le visiteur à `#resultat`. Mesuré : le haut de la zone
   arrivait 13 à 21 px AU-DESSUS du viewport, et l'en-tête collant de 64 px
   recouvrait la première ligne de la matrice. Ce n'est pas un défaut introduit
   par le canari — les outils antérieurs arrivent à −61 et −67 px — mais rendre
   la donnée visible n'a aucun sens si son premier rang est masqué.
   La marge vaut la hauteur de l'en-tête, plus une respiration. */
.g-instrument #resultat {
    scroll-margin-top: 96px;
}

.g-instrument .vd-matrix {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.g-instrument .vd-matrix caption {
    text-align: left;
    padding-bottom: 10px;
}

.g-instrument .vd-matrix th,
.g-instrument .vd-matrix td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: baseline;
}

.g-instrument .vd-matrix thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.g-instrument .vd-matrix tbody th {
    font-weight: 500;
}

/* La dernière colonne porte la mesure : elle s'aligne à droite pour que les
   chiffres se comparent d'un coup d'œil, ce qu'un alignement à gauche
   interdit dès que les orbes n'ont pas le même nombre de chiffres. */
.g-instrument .vd-matrix td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* VOLUME — une liste de comptes, SANS BARRE.
   La barre a été construite puis RETIRÉE : au test « enlever l'élément », sa
   disparition ne faisait perdre aucune information. Le nombre exact était à
   côté d'elle, et comparer quatre entiers ne demande pas de graphique. Une
   forme qui ne porte rien de propre donne au chiffre l'air d'une mesure sans
   rien mesurer de plus. */
.g-instrument .vd-volume {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.g-instrument .vd-volume li {
    display: grid;
    grid-template-columns: 8.5rem 2.2rem 3.4rem;
    align-items: center;
    gap: 12px;
}

.g-instrument .vd-volume__label {
    font-size: 0.86rem;
    color: var(--muted);
}

.g-instrument .vd-volume__part {
    font-variant-numeric: tabular-nums;
    color: var(--marker);
    text-align: right;
}

.g-instrument .vd-volume .vd-data {
    text-align: right;
}

.g-instrument .vd-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px 48px;
}

@media (max-width: 640px) {
    .g-instrument .vd-volume li { grid-template-columns: 6.5rem 2rem 3.2rem; }
    .g-instrument .vd-matrix th,
    .g-instrument .vd-matrix td { padding: 8px 8px 8px 0; }
}