/* ══════════════════════════════════════════════════════════════════════════════════
   ASTROLOGIX — SYSTÈME VISUEL              ASTROLOGIX-DESIGN-RUNTIME-MIGRATION-001

   AUTORITÉ ET GOUVERNANCE
   -----------------------
   Cette feuille est l'autorité du système visuel arbitré au laboratoire
   (`tools/design/lab/`, chantiers CREATIVE-DESIGN-CHALLENGE-001 et 002). Elle est
   chargée APRÈS `app.css` (voir `assets/app.js`) : elle gagne donc les égalités de
   spécificité par l'ordre de source, et n'a besoin d'aucun `!important`.

   RÈGLE DE COHABITATION, en trois lignes :
     1. Cette feuille possède le préfixe `--ds-*` et le préfixe de classe `ds-`.
        `app.css` garde ses noms historiques. AUCUNE règle ne lit les deux.
     2. Aucun jeton n'est dupliqué : les valeurs `--ds-*` sont celles du laboratoire,
        elles ne recopient pas `--bg`, `--ink`, `--accent` d'`app.css`.
     3. Périmètre volontairement étroit : fondations réellement consommées, chrome N1,
        hero H1. Rien d'autre. Les hubs C1/S2/U2 viendront à leur propre lot.

   DETTE DÉCLARÉE : les sélecteurs `.site-header*`, `.nav-menu`, `.nav-group`,
   `.nav-panel*`, `.nav-col*`, `.home-hero*` d'`app.css` perdent leur balisage avec ce
   chantier. Ils ne sont pas supprimés ici — ce chantier n'est pas le refactor
   d'`app.css` — mais ils rejoignent la liste de nettoyage du lot suivant.

   NIVEAUX DE PREUVE : [NORM] norme WCAG 2.2 vérifiée · [BRAND] choix de marque assumé ·
   [MESURÉ] valeur relevée sur un rendu réel.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TYPOGRAPHIE ───────────────────────────────────────────────────────────────
   UNE SEULE FAMILLE : LA SANS DU SYSTÈME. Aucune serif, nulle part — arbitrage de
   Cédric du 2026-09-17, sur la production servie : « je veux que du sans serif ».
   Instrument Serif (titrage) est retirée, ses deux fichiers avec elle. La hiérarchie
   vient désormais de la TAILLE et de la GRAISSE (les fontes système en ont plusieurs,
   vraies, pas synthétisées), de l'espace et du contraste de valeur.
   `--ds-font-display` est conservé comme jeton : il nomme un RÔLE (ce qui titre), et
   ses consommateurs n'ont pas à changer ; sa valeur est la pile de texte.          */
:root {
    /* ── SURFACES ──────────────────────────────────────────────────────────────
       Trois surfaces, pas davantage dans ce lot. Chacune porte un système « ON »
       complet : aucun texte n'hérite par accident d'une couleur d'une autre surface. */
    --ds-paper:            #f6f3ee;
    --ds-night:            #0d1118;
    --ds-identity-strong:  #4f4693;

    --ds-on-paper:         #1b1a17;   /* 15,72:1 sur PAPER  [NORM 1.4.3 AA] */
    --ds-on-paper-muted:   #5d5b54;   /*  6,14:1            [NORM]          */
    --ds-on-night:         #ece7dc;   /* 15,34:1 sur NIGHT  [NORM]          */
    --ds-on-night-muted:   #9aa0a6;   /*  7,16:1            [NORM]          */
    --ds-on-identity:      #ffffff;   /*  7,99:1            [NORM]          */

    /* ── SÉMANTIQUE DE COULEUR ─────────────────────────────────────────────────
       Une couleur = une signification. La loi de similarité fait le reste : deux
       éléments de même couleur seront lus comme liés, donc un vert non actionnable
       ment.                                                                        */
    --ds-action:           #0e6656;   /* PAPER 6,21:1 — ACTION */
    --ds-action-hover:     #084c40;
    --ds-on-action:        #fffaf0;   /* sur le vert plein 6,61:1 */
    --ds-action-night:     #148e78;   /* NIGHT 4,66:1 */
    --ds-on-action-night:  #08131a;   /* sur #148e78 : 4,62:1
        Sur NIGHT le bouton primaire s'inverse. Registre :
        VOLUNTARY_CONTRAST_REINFORCEMENT — [BRAND + A11Y_DESIGN_DECISION]. C'est une
        décision d'identité qui se trouve tenir la norme, pas l'unique sortie d'un
        système d'inéquations. */

    --ds-brand:            #4f4693;   /* PAPER 7,21:1 — OBJET ASTROLOGIQUE rendu */
    --ds-brand-night:      #b9b1e8;   /* NIGHT 9,47:1 — la valeur de la roue */

    --ds-tension:          #a8443a;   /* PAPER 5,34:1 — TENSION */
    --ds-tension-night:    #e08472;   /* NIGHT 6,95:1 */

    --ds-measured:         #9a5b0c;   /* PAPER 4,90:1 — MESURÉ, DATÉ, REMARQUABLE */
    --ds-measured-night:   #d9a441;   /* NIGHT 8,41:1
        L'ambre ne sert qu'à ce qui MESURE ou DATE : graduation, repère temporel, état
        remarquable réel. Jamais un filet doré décoratif, jamais un CTA, jamais un
        titre sans justification sémantique. */

    /* ── FILETS ────────────────────────────────────────────────────────────────
       Deux niveaux, et la distinction est normative : un filet qui PORTE une
       information doit tenir 3:1 [NORM 1.4.11] ; un filet décoratif peut être faible. */
    --ds-rule-night:       rgba(236, 231, 220, .30);
    --ds-rule-night-soft:  rgba(236, 231, 220, .14);
    --ds-rule-paper:       rgba(27, 26, 23, .16);

    /* ── GABARIT ───────────────────────────────────────────────────────────────  */
    --ds-shell:            1280px;
    --ds-gutter:           clamp(20px, 3vw, 48px);

    /* Échelle d'espacement : seulement les échelons réellement consommés par N1/H1. */
    --ds-sp-2: 8px;
    --ds-sp-3: 12px;
    --ds-sp-4: 16px;
    --ds-sp-5: 24px;
    --ds-sp-6: 32px;

    --ds-radius: 3px;

    /* ── FAMILLES ──────────────────────────────────────────────────────────────
       BODY_FONT_AUTHORITY_EXPLICIT. La pile ne nomme AUCUNE fonte qui ne serait pas
       livrée, et aucune serif. `Inter` y figurait sans qu'aucun `@font-face` ne la serve :
       mesuré, `fc-match Inter` renvoyait Noto Sans. Une pile système assumée dit la
       vérité, pèse zéro octet, et ne rouvre aucun tournoi typographique. */
    --ds-font-text: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-font-display: var(--ds-font-text);
    /* Graisses de rôle : ce qui TITRE, ce qui VAUT (une donnée rendue). Une sans à
       400 en corps de titre pèse moins que son paragraphe ; 600 est la graisse des
       titres, 500 celle des valeurs calculées. */
    --ds-display-weight: 600;
    --ds-value-weight: 500;
}

/* ── 2 · PRIMITIVES ────────────────────────────────────────────────────────────────  */
.ds-shell {
    width: min(100% - var(--ds-gutter) * 2, var(--ds-shell));
    margin-inline: auto;
}

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* [NORM 2.5.8 AA] : la cible fait au moins 24 × 24 px. 44 px relève de l'AAA et
       n'est pas imposé ici comme un gate. */
    min-height: 44px;
    padding: 0 var(--ds-sp-5);
    border: 1px solid transparent;
    border-radius: var(--ds-radius);
    font: inherit;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
}
.ds-btn--primary { background: var(--ds-action); color: var(--ds-on-action); }
.ds-btn--primary:hover { background: var(--ds-action-hover); }
.ds-night .ds-btn--primary { background: var(--ds-action-night); color: var(--ds-on-action-night); }
.ds-btn--ghost { border-color: var(--ds-rule-night); color: var(--ds-on-night); }
.ds-btn--ghost:hover { border-color: var(--ds-on-night); }

/* Focus visible partout, y compris sur NIGHT. */
.ds-night :focus-visible { outline: 2px solid var(--ds-measured-night); outline-offset: 3px; }
.ds-paper :focus-visible { outline: 2px solid var(--ds-action); outline-offset: 3px; }

/* Le glyphe astrologique : famille livrée, présentation texte, couleur d'objet. */
.ds-glyph {
    font-family: "Astrologix Glyphes", sans-serif;
    font-variant-emoji: text;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════════
   3 · N1 — LA LIGNE D'HORIZON                                    chrome global
   ----------------------------------------------------------------------------------
   Direction arbitrée : le chrome est une BANDE DE NUIT posée sur la page, fermée par
   un filet d'horizon. Il porte trois territoires — Calculer, Le ciel, Comprendre — et
   un relevé du ciel réduit. Il ne présente PAS les 21 outils : il présente des portes.

   Le MÉCANISME reste NAV-C : panneaux courts ancrés à la coquille (jamais à l'item),
   un seul panneau ouvert, aucun panneau hors du viewport, aucune barre de défilement
   interne. N1 est l'expression visuelle de ce mécanisme, pas un mécanisme nouveau.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ds-hz {
    position: relative;
    z-index: 40;
    background: var(--ds-night);
    color: var(--ds-on-night);
    font-family: var(--ds-font-text);
}
.ds-hz a { color: inherit; }

/* Étage haut : le relevé du ciel et l'état du compte. */
.ds-hz__statut { border-bottom: 1px solid var(--ds-rule-night-soft); }
.ds-hz__statut-in {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-4);
    min-height: 34px;
    font-size: .82rem;
}
.ds-hz__tick {
    display: inline-flex;
    align-items: baseline;
    /*  [NORM 2.5.8 AA] : mesuré à 21,7 px de haut, la cible était sous les 24 px.
        44 px relèverait de l'AAA et n'est pas exigé ici. */
    min-height: 24px;
    gap: .5em;
    text-decoration: none;
    color: var(--ds-on-night-muted);
    white-space: nowrap;
}
.ds-hz__tick:hover { color: var(--ds-on-night); }
.ds-hz__tick .ds-glyph { color: var(--ds-brand-night); font-size: 1rem; }
.ds-hz__tick b { color: var(--ds-on-night); font-weight: 400; }
/* Le repère temporel est de l'ambre : il DATE. C'est le seul emploi de l'ambre ici. */
.ds-hz__date { color: var(--ds-measured-night); font-variant-numeric: tabular-nums; }
.ds-hz__u { margin-left: auto; display: flex; align-items: center; gap: var(--ds-sp-4); }
.ds-hz__u a {
    text-decoration: none;
    color: var(--ds-on-night-muted);
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}
.ds-hz__u a:hover { color: var(--ds-on-night); }

/* Étage principal : marque, territoires, action produit. */
.ds-hz__in {
    position: relative;            /* ancrage des panneaux à la COQUILLE */
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 44px);
    min-height: 74px;
}
.ds-hz__mk {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: 1.72rem;
    line-height: 1;
    letter-spacing: .006em;
    text-decoration: none;
    color: var(--ds-on-night);
}
.ds-hz__nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.ds-hz__act { margin-left: auto; display: flex; align-items: center; gap: var(--ds-sp-4); }
.ds-hz__lien {
    text-decoration: none;
    color: var(--ds-on-night-muted);
    font-size: .9rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.ds-hz__lien:hover { color: var(--ds-on-night); }
/* Le filet d'horizon ferme la bande. Décoratif : il ne porte aucune information. */
.ds-hz__horizon {
    height: 1px;
    background: linear-gradient(to right, rgba(236,231,220,.06) 0%,
        rgba(236,231,220,.34) 22%, rgba(236,231,220,.34) 78%, rgba(236,231,220,.06) 100%);
}

/* ── NAV-C : le mécanisme ──────────────────────────────────────────────────────── */
.ds-ni { position: static; }        /* l'item n'ancre rien : la coquille ancre */
.ds-ni__s {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    font-size: .98rem;
    color: var(--ds-on-night);
}
.ds-ni__s::-webkit-details-marker { display: none; }
.ds-ni__c {
    width: 7px; height: 7px;
    border-right: 1.5px solid rgba(236,231,220,.62);
    border-bottom: 1.5px solid rgba(236,231,220,.62);
    transform: translateY(-2px) rotate(45deg);
}
.ds-ni[open] .ds-ni__s { color: var(--ds-action-night); }
.ds-ni[open] .ds-ni__c {
    transform: translateY(1px) rotate(-135deg);
    border-color: var(--ds-action-night);
}

.ds-pan {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 50;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--ds-cols, 3), minmax(0, 1fr));
    /* Largeur BORNÉE par le nombre de colonnes : mesuré, un panneau non borné
       débordait à 1024×768 et à 1366×768. */
    width: min(100%, calc(var(--ds-cols, 3) * 218px + 90px));
    gap: var(--ds-sp-5);
    padding: var(--ds-sp-5);
    background: var(--ds-night);
    border: 1px solid rgba(236,231,220,.28);
    border-radius: var(--ds-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ds-nc__t {
    margin: 0 0 var(--ds-sp-3);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(236,231,220,.18);
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(236,231,220,.56);
}
.ds-nl { display: block; padding: 7px 0; text-decoration: none; color: var(--ds-on-night); }
.ds-nl__t { display: block; font-size: .95rem; }
.ds-nl__d { display: block; margin-top: 1px; font-size: .8rem; color: rgba(236,231,220,.62); }
.ds-nl:hover .ds-nl__t { text-decoration: underline; text-underline-offset: .2em; }
.ds-nl--tout {
    display: block;
    margin-top: var(--ds-sp-2);
    font-size: .86rem;
    color: var(--ds-action-night);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.ds-pan__pied {
    grid-column: 1 / -1;
    margin-top: var(--ds-sp-2);
    padding-top: var(--ds-sp-4);
    border-top: 1px solid rgba(236,231,220,.18);
    display: flex;
    align-items: center;
    gap: var(--ds-sp-4);
    flex-wrap: wrap;
}
.ds-pan__pied .ds-btn--ghost { min-height: 38px; font-size: .88rem; }
/* Divination : traitement SECONDAIRE, décidé par un fait produit (0 formulaire sur
   21 pages) et non par une préférence. Elle vit au pied du panneau « Comprendre ». */
.ds-pan__second { font-size: .84rem; color: rgba(236,231,220,.62); }
.ds-pan__second a {
    display: inline-flex;
    align-items: center;
    /*  Même mesure : 18 px de haut. Ces liens bénéficieraient de l'exception « en
        ligne » de la SC 2.5.8, mais rien n'oblige à s'en servir pour 6 px. */
    min-height: 24px;
    color: var(--ds-on-night);
    text-underline-offset: .2em;
}

/* Le bouton produit. Un seul CTA commercial dans le chrome. */
.ds-hz__produit {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    min-height: 40px;
    padding: 0 var(--ds-sp-4);
    border: 1px solid var(--ds-brand-night);
    border-radius: var(--ds-radius);
    color: var(--ds-brand-night);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}
.ds-hz__produit:hover { background: rgba(185,177,232,.12); }

/* ── N1 MOBILE COMPACT ─────────────────────────────────────────────────────────────
   Direction arbitrée : la barre mobile garde la marque, l'accès à la navigation, le
   compte et UNE SEULE donnée de ciel — la Lune. Le relevé complet ne descend pas.  */
/*  Deux classes : `app.css` habille tous les `button` avec une spécificité
    supérieure à une classe seule. Mesuré au premier rendu mobile — le bouton de
    menu sortait en pavé vert plein à coins de 8 px, au milieu d'une bande de nuit. */
.ds-hz .ds-brg {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid rgba(236,231,220,.30);
    border-radius: var(--ds-radius);
    box-shadow: none;
    color: var(--ds-on-night);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transform: none;
}
.ds-hz .ds-brg:hover { background: rgba(236,231,220,.08); border-color: var(--ds-on-night); }
.ds-hz__lune { display: none; }

@media (max-width: 1099px) {
    /* Le point de bascule vient du CONTENU : mesuré, sous 1100 px les trois
       territoires, le relevé et l'action produit ne tiennent plus sur une ligne. */
    .ds-hz .ds-brg { display: inline-flex; }
    .ds-hz__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--ds-sp-4) 0 var(--ds-sp-5);
        background: var(--ds-night);
        border-top: 1px solid var(--ds-rule-night-soft);
        max-height: calc(100svh - 120px);
        overflow-y: auto;
    }
    .ds-hz__nav[data-ouvert] { display: flex; }
    .ds-ni__s { justify-content: space-between; padding: var(--ds-sp-3) 0;
                border-bottom: 1px solid var(--ds-rule-night-soft); }
    .ds-pan {
        position: static;
        width: auto;
        grid-template-columns: 1fr;
        gap: var(--ds-sp-4);
        padding: var(--ds-sp-4) 0 var(--ds-sp-5);
        background: none;
        border: 0;
        box-shadow: none;
    }
    /*  Mesuré à 390 px : la rangée d'état poussait le document à 485 px. Le relevé
        du ciel et les liens de compte ne tiennent pas ensemble. La direction compacte
        tranche : la Lune descend dans la barre principale, la rangée d'état ne garde
        que le compte. Marque + navigation + compte + Lune, c'est la spécification. */
    .ds-hz__statut .ds-hz__tick { display: none; }
    .ds-hz__statut-in { flex-wrap: wrap; row-gap: 4px; }
    .ds-hz__u { margin-left: 0; flex-wrap: wrap; }
    .ds-hz__act { display: none; }
    .ds-hz__lune {
        display: inline-flex;
        align-items: baseline;
        gap: .45em;
        margin-left: auto;
        padding-left: var(--ds-sp-4);
        font-size: .84rem;
        color: var(--ds-on-night-muted);
        text-decoration: none;
        white-space: nowrap;
    }
    .ds-hz__lune .ds-glyph { color: var(--ds-brand-night); font-size: .98rem; }
}
@media (max-width: 400px) {
    /* Mesuré à 320 px : la phase de Lune faisait déborder la barre. Le signe suffit. */
    .ds-hz__lune > span:last-child { display: none; }
    .ds-hz__mk { font-size: 1.42rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   4 · H1 — L'INSTRUMENT                                              hero d'accueil
   ----------------------------------------------------------------------------------
   Direction arbitrée : la donnée ne vit plus dans une rangée ajoutée SOUS le hero.
   Elle traverse la composition. La bande graduée est un objet structurant, pas un
   ornement — et elle porte de VRAIES positions, lues depuis l'autorité du ciel.

   HIÉRARCHIE : DATA > PRODUCT > BRAND > ATMOSPHERE. L'image est de l'ATMOSPHÈRE ;
   son crédit le dit, et c'est ce qui l'empêche d'être lue comme un relevé.

   PIÈGE MESURÉ, à ne pas refaire : une hauteur de hero pilotée en `vw` mettait le CTA
   sous le pli à TOUS les formats. `vw` ne voit pas la hauteur. D'où `100svh` ici et
   une part de `vh` dans le corps du titre.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ds-ins {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto auto;
    min-height: calc(100svh - 108px);
    overflow: hidden;
    background: var(--ds-night);
    color: var(--ds-on-night);
    font-family: var(--ds-font-text);
}
.ds-ins__fond { position: absolute; inset: 0; z-index: 0; }
.ds-ins__fond img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 72% 34%;
    opacity: .58;
}
.ds-ins__fond::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(13,17,24,.97) 0%, rgba(13,17,24,.90) 34%,
                rgba(13,17,24,.42) 62%, rgba(13,17,24,.74) 100%);
}
/* Arcs ouverts : géométrie empruntée aux rayons RÉELS de la roue. Purement
   compositionnelle, et rien n'y est posé — aucun corps, aucun degré, aucun aspect —
   pour qu'elle ne puisse pas être lue comme une donnée calculée. */
.ds-ins__arc {
    position: absolute;
    right: -38%;
    top: -42%;
    z-index: 1;
    opacity: .16;
    pointer-events: none;
    stroke: var(--ds-on-night);
    fill: none;
}
.ds-ins__haut {
    position: relative;
    z-index: 3;
    align-self: end;
    padding-block: clamp(28px, 5vh, 80px) clamp(18px, 2.4vh, 34px);
}
/*  Deux classes, pas une : `body.page-accueil main h1` d'`app.css` vaut (0,1,3) et
    l'emporterait sur une classe seule. On gagne par la SPÉCIFICITÉ, jamais par
    `!important` — un `!important` de plus serait une dette de plus.               */
.ds-ins .ds-ins__titre {
    margin: 0;
    max-width: 15ch;
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: clamp(2.5rem, .6rem + 3.8vw + 2.4vh, 6.4rem);
    line-height: .96;
    letter-spacing: -.018em;
    color: var(--ds-on-night);
}
/* Le violet est réservé aux OBJETS ASTROLOGIQUES réellement rendus. « Pas seulement
   votre signe » est de la copy : elle se distingue par le contraste de valeur, pas par
   la couleur. Le violet reste sur les glyphes du relevé. */
.ds-ins .ds-ins__titre em { font-style: normal; color: rgba(236,231,220,.62); }
.ds-ins .ds-ins__lead {
    margin: clamp(14px, 1.8vh, 28px) 0 0;
    max-width: 44ch;
    font-size: 1.06rem;
    line-height: 1.5;
    color: rgba(236,231,220,.80);
}
/* Plancher local de contraste : le titre et les actions passent au-dessus de la zone
   la plus claire de l'image. Mesuré avant/après sur les pixels rendus. */
.ds-ins__haut::before, .ds-ins__bas::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -6% -18%;
    background: linear-gradient(to right, rgba(13,17,24,.90) 0%,
                rgba(13,17,24,.76) 58%, transparent 100%);
}

.ds-ins__bande {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--ds-rule-night);
    border-bottom: 1px solid var(--ds-rule-night-soft);
}
/* Graduation : de l'AMBRE, parce qu'elle mesure. Les repères longs marquent les
   douzièmes — la même division que la roue. */
.ds-ins__grad { display: flex; height: 9px; align-items: flex-start; opacity: .5; }
.ds-ins__grad i {
    flex: 1 1 0;
    height: 4px;
    border-left: 1px solid rgba(236,231,220,.36);
}
.ds-ins__grad i:nth-child(6n+1) { height: 9px; border-color: var(--ds-measured-night); }
.ds-ins__releve {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 28px);
    padding-block: clamp(14px, 1.8vh, 22px);
}
.ds-ins__astre { display: grid; gap: 2px; }
.ds-ins__astre .ds-glyph { font-size: 1.12rem; color: var(--ds-brand-night); }
.ds-ins__n {
    font-size: .64rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(236,231,220,.56);
}
.ds-ins__v {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-value-weight);
    font-size: 1.16rem;
    line-height: 1.15;
    color: var(--ds-on-night);
    font-variant-numeric: tabular-nums;
}
.ds-ins__retro { color: var(--ds-tension-night); }

.ds-ins__bas {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding-block: clamp(18px, 2.4vh, 30px) clamp(22px, 3vh, 38px);
}
.ds-ins__micro { font-size: .88rem; color: rgba(236,231,220,.64); }
/* Le crédit dit ce que l'image EST : une archive, pas le ciel du visiteur. Il reste
   discret pour ne pas concurrencer l'action, et factuel pour ne pas se lire comme un
   endossement. */
.ds-ins__credit {
    margin-left: auto;
    font-size: .68rem;
    letter-spacing: .04em;
    color: rgba(236,231,220,.40);
}
.ds-ins__suite {
    position: relative;
    z-index: 3;
    display: flex;
    gap: .6em;
    align-items: baseline;
    padding-block: 14px;
    border-top: 1px solid var(--ds-rule-night-soft);
    font-size: .84rem;
    color: rgba(236,231,220,.62);
}
.ds-ins__suite b {
    font-weight: var(--ds-display-weight);
    font-family: var(--ds-font-display);
    font-size: 1.02rem;
    color: var(--ds-on-night);
}

@media (max-width: 900px) {
    .ds-ins__releve { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-ins__credit { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 480px) {
    .ds-ins__releve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-ins__bas .ds-btn { flex: 1 1 100%; }
}
/* IMAGES DÉSACTIVÉES : la nuit reste, le dégradé reste, le texte reste lisible. Le
   crédit, lui, deviendrait absurde s'il décrivait une image absente — il se retire. */
.ds-ins__fond img:not([src]), .ds-ins__fond img[src=""] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ds-ins, .ds-ins * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   5 · RACCORD DE LA PAGE D'ACCUEIL                                            §30
   ----------------------------------------------------------------------------------
   Le raccord pose sur la page d'accueil l'échelle de titres du système et sa mesure
   unique. Depuis le 2026-09-17, la famille de titrage EST la famille de texte : la
   hiérarchie ne vient plus d'un changement de fonte mais de la taille, de la graisse
   (`--ds-display-weight`) et de l'espace.
   ══════════════════════════════════════════════════════════════════════════════════ */
/*  HOMEPAGE-VISUAL-RHYTHM-001 — LE TITRAGE DE L'ACCUEIL, EN CLAIR.

    Jugé sur la production servie, aux sept formats du mandat : les H2 faisaient 30 px à
    côté de paragraphes de 17 à 21 px — un rapport de 1,4 qui ne fait pas une
    hiérarchie —, et les H3 faisaient 17 px, PLUS PETITS que le corps qu'ils coiffaient.

    Trois traitements testés sur les vrais titres ; le mixte retenu : l'échelle porte
    les titres MAJEURS, les sous-titres restent à l'échelle du corps (1.06rem, 650),
    comme les labels de données. Puis, le 2026-09-17, la serif de titrage a été retirée
    du site entier : la même échelle, en sans, graisse 600.

    MÉCANISME : `ds-titre` est exclu du bloc `h2:not([class*="ds-"]) { … !important }`
    d'`app.css`, donc tout ce qui suit gagne SANS `!important`. Les règles `!important`
    homepage qui existaient pour le battre ont été retirées à leur autorité.
    `.page-accueil .ds-titre` vaut (0,2,0) : au-dessus de `.home-proof h2` (0,1,1) et de
    `body.page-accueil main h2` (0,1,3), et sans dépendre de l'ordre de source.

    TROIS RÉGIMES, à 1440 : MAJEUR 59 px (le ciel, l'entrée de la page), SECTION 46 px
    (les idées propres), CALME 37 px (la queue éditoriale). Un seul saut à 390 : 40/34/29.
    GRAISSE : `--ds-display-weight` (600), une vraie graisse de la fonte système.       */
.page-accueil .ds-titre {
    margin: 0 0 .5em;
    max-width: 20ch;
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: clamp(2.1rem, 1.3rem + 1.9vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -.022em;
    color: var(--ds-on-paper);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.page-accueil .ds-titre--majeur { max-width: 17ch; font-size: clamp(2.5rem, 1.4rem + 2.6vw, 3.7rem); }
.page-accueil .ds-titre--calme  { max-width: 24ch; font-size: clamp(1.8rem, 1.2rem + 1.3vw, 2.3rem); }
.page-accueil .section-heading .ds-titre { margin-bottom: 0; }

/*  UNE SEULE MESURE. Mesuré avant : les bords gauches de la page tombaient à 80, 100,
    180 puis 340 px selon la section (coquille du hero, 1240, `--wrap`, `--wrap-tight`
    centrée). Rien ne s'alignait sur rien — c'est l'un des trois signaux de « maquette ».
    Toute section pend désormais du même bord que le chrome et le hero : la coquille du
    système. La mesure de LECTURE ne disparaît pas, elle se pose à l'intérieur (68ch pour
    la preuve, 76ch pour la FAQ, 60ch pour la note du mois) — alignée, pas centrée.    */
body.page-accueil main > .content-band,
body.page-accueil .home-band > .content-band,
body.page-accueil .home-closing > .content-band,
body.page-accueil .home-limite,
body.page-accueil .home-closing .page-faq {
    width: min(100% - var(--ds-gutter) * 2, var(--ds-shell));
    max-width: none;
    margin-inline: auto;
}
body.page-accueil .home-proof article { max-width: 68ch; }
/* La démonstration : la grille prend TOUTE la coquille. L'ancienne boîte `.home-split`
   (1 120 px centrée) la décalait de 100 px par rapport à son propre titre. */
body.page-accueil .home-demo__split { width: 100%; max-width: none; margin-inline: 0; }
body.page-accueil .home-closing > .content-band {
    padding-bottom: 0;   /* le pied porte sa propre marge haute (112 px, autorité globale) ; pas deux fois */
}

/* ── LA FAQ, EN DEUX COLONNES ────────────────────────────────────────────────────────
   Le titre à gauche, les questions à droite, sur toute la coquille : la même
   composition « titre | matière » que le ciel, la limite et le mois. Plus de cartes
   (ni bord, ni rayon, ni fond) : une liste de questions séparées par des filets, comme
   les listes d'objets du système. Le marqueur est un signe « + » qui tourne en « × »
   à l'ouverture. La question garde l'encre pleine ; la réponse est atténuée, à mesure
   de lecture. Le composant partagé (86 pages) n'est pas touché : tout est scopé.     */
body.page-accueil .page-faq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ds-sp-6) clamp(40px, 6vw, 96px);
    align-items: start;
}
body.page-accueil .page-faq > .section-heading { display: block; margin: 0; }
body.page-accueil .page-faq .ds-titre { max-width: 14ch; }
body.page-accueil .page-faq .faq-list {
    display: block;
    max-width: none;
    border-top: 1px solid var(--ds-rule-paper);
}
body.page-accueil .faq-item {
    border: 0;
    border-bottom: 1px solid var(--ds-rule-paper);
    border-radius: 0;
    background: none;
    overflow: visible;
}
body.page-accueil .faq-item > summary {
    gap: var(--ds-sp-5);
    padding: 18px 0;
    font-family: var(--ds-font-text);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ds-on-paper);
}
body.page-accueil .faq-item > summary:hover { color: var(--ds-action); }
body.page-accueil .faq-item > summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ds-rule-paper);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ds-on-paper-muted);
    transition: transform 160ms ease, color 160ms ease, border-color 160ms ease;
}
body.page-accueil .faq-item[open] > summary::after {
    content: "+";
    transform: rotate(45deg);
    color: var(--ds-on-paper);
    border-color: var(--ds-on-paper);
}
body.page-accueil .faq-item > summary:focus-visible { outline: 2px solid var(--ds-action); outline-offset: 2px; }
body.page-accueil .faq-answer { padding: 0 52px 22px 0; max-width: 64ch; }
body.page-accueil .faq-answer p { font-size: 1rem; line-height: 1.65; color: var(--ds-on-paper-muted); }
body.page-accueil .faq-answer a { color: var(--ds-action); }
@media (max-width: 860px) {
    body.page-accueil .page-faq { grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-5); }
    body.page-accueil .faq-answer { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-accueil .faq-item > summary::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   5b · LA SURFACE PRODUIT                                    HOMEPAGE-VISUAL-RHYTHM-001
   ----------------------------------------------------------------------------------
   RÔLE DE LA SURFACE : PERSONALIZED_PRODUCT_IDENTITY. Night est la surface du CIEL —
   celle du hero (le ciel d'aujourd'hui) et du panneau de la roue. Le produit mensuel
   est le ciel qui repasse sur VOTRE carte : il appartient au même univers, il en est
   la suite personnalisée. C'est pour cela qu'il est Night, et non parce qu'une bande
   sombre « fait riche ».

   Le violet garde son rôle d'identité sur ce fond : `--ds-brand-night`, la valeur
   même de la roue et du bouton produit du chrome, sur les libellés et sur l'action.
   Rien d'autre : pas de dégradé, pas de halo, pas d'étoile.

   Trois surfaces testées sur le vrai contenu, aux formats du mandat :
     V1 identité pleine (#4f4693)  — un aplat saturé, seul de son espèce sur la page :
                                     il lisait comme un encart promotionnel ;
     V2 Night + violet              — RETENUE ;
     V3 Paper + identité            — sans aplat, le produit ne se distinguait plus de
                                     la limite et de la démonstration qui le précèdent.
   Séquence de la page qui en résulte : NIGHT (hero) → PAPER (preuve, orientation,
   limite, démonstration) → NIGHT (produit) → PAPER (preuve, parcours, FAQ) → pied.
   ══════════════════════════════════════════════════════════════════════════════════ */
body.page-accueil .home-band--produit {
    background: var(--ds-night);
    color: var(--ds-on-night);
}
body.page-accueil .home-band--produit .ds-titre { color: var(--ds-on-night); }
body.page-accueil .home-band--produit p { color: rgba(236, 231, 220, .78); }
body.page-accueil .home-band--produit .hint { color: var(--ds-on-night-muted); }
body.page-accueil .home-band--produit .home-facts dt { color: var(--ds-brand-night); }
/* La valeur du fait est un OBJET calculé : elle prend la taille et la graisse de valeur,
   comme les positions du relevé du hero (`.ds-ins__v`). Sa note reste atténuée. */
body.page-accueil .home-band--produit .home-facts dd {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-value-weight);
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--ds-on-night);
}
body.page-accueil .home-band--produit .home-facts__note {
    margin-top: 8px;
    font-family: var(--ds-font-text);
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ds-on-night-muted);
}
/* L'action produit : la forme du bouton produit du chrome (`.ds-hz__produit`), bordé
   d'identité, jamais plein — le plein vert est réservé à l'action primaire du site. */
body.page-accueil .home-band--produit .action--secondaire {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--ds-sp-5);
    border: 1px solid var(--ds-brand-night);
    border-radius: var(--ds-radius);
    color: var(--ds-brand-night);
    font-weight: 400;
    text-decoration: none;
}
body.page-accueil .home-band--produit .action--secondaire:hover {
    background: rgba(185, 177, 232, .12);
    color: var(--ds-on-night);
}
@media (max-width: 640px) {
    body.page-accueil .home-band--produit .action--secondaire { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   6 · LES TROIS PORTES                              C1 · L'ATELIER (Calculer)
   ----------------------------------------------------------------------------------
   MÊME MARQUE, TROIS RÔLES. Les hubs ne sont pas trois clones : C1 est un ATELIER
   (hiérarchie d'actions), S2 un OBSERVATOIRE (état actuel), U2 une ANATOMIE
   (structure de connaissance). Ce qu'ils partagent, ce sont les fondations — pas
   une grille de cartes.

   AUCUNE CARTE PAR DÉFAUT : une destination n'est pas automatiquement une carte.
   Ici, ce sont des listes, un rail, de la typographie et de l'espace.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ds-atl {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    font-family: var(--ds-font-text);
}
/* Le rail : où l'on est dans l'atelier. Il n'est pas une navigation concurrente du
   chrome — il ne quitte jamais la page. */
.ds-atl__rail { position: sticky; top: 24px; align-self: start; display: grid; gap: 2px; }
.ds-atl__r {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .7em;
    min-height: 34px;
    padding: 4px 0;
    color: var(--ds-on-paper-muted);
    text-decoration: none;
    font-size: .92rem;
}
.ds-atl__r i {
    font-style: normal;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--ds-on-paper-muted);
}
.ds-atl__r:hover { color: var(--ds-on-paper); }
.ds-atl__flux { display: grid; gap: clamp(38px, 5vw, 76px); }

/* La tête : le thème natal domine, et il domine par la TAILLE, pas par une couleur
   ni par un badge. C'est la porte d'entrée du produit. */
.ds-atl__tete { display: grid; gap: var(--ds-sp-3); }
.ds-atl__tete a { text-decoration: none; color: inherit; }
.ds-atl__tete b {
    display: block;
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.015em;
}
.ds-atl__tete a:hover b { text-decoration: underline; text-underline-offset: .08em; }
.ds-atl__tete p { margin: 0; max-width: 42ch; color: var(--ds-on-paper-muted); font-size: 1.06rem; }
.ds-atl__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-4); margin-top: var(--ds-sp-2); }
.ds-atl__cta small { color: var(--ds-on-paper-muted); font-size: .88rem; }

.ds-atl__fam { display: grid; gap: var(--ds-sp-5); scroll-margin-top: 24px; }
.ds-atl__q {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-on-paper-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ds-rule-paper);
}
.ds-atl__reste { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--ds-sp-5) var(--ds-sp-6); }
.ds-atl__o { display: block; min-height: 44px; color: var(--ds-on-paper); text-decoration: none; font-size: 1rem; }
.ds-atl__o small { display: block; margin-top: 2px; font-size: .82rem; color: var(--ds-on-paper-muted); }
.ds-atl__o:hover { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 860px) {
    .ds-atl { grid-template-columns: 1fr; gap: var(--ds-sp-6); }
    /* Le rail devient une rangée défilante : il garde son rôle d'orientation sans
       consommer une colonne qui n'existe plus. */
    .ds-atl__rail {
        position: static;
        display: flex;
        gap: var(--ds-sp-4);
        overflow-x: auto;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--ds-rule-paper);
    }
    .ds-atl__r { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   7 · S2 · L'ÉCHELLE (Le ciel)                                    observatoire
   ----------------------------------------------------------------------------------
   LES DOUZE SIGNES SONT DES SEGMENTS CATÉGORIELS, PAS UNE ÉCHELLE DE DEGRÉS.
   L'instantané ne fournit que le signe de chaque corps, jamais sa longitude. La
   représentation n'autorise donc que `CORPS ∈ SIGNE` — ni distance angulaire, ni
   conjonction, ni ordre à l'intérieur du signe.

   Quand un segment porte plusieurs corps, ils sont EMPILÉS avec un décalage
   strictement LAYOUT_ONLY : il empêche la superposition, il n'encode aucun degré.
   Un premier jet les posait au même point ; cela suggérait une conjonction que la
   donnée ne dit pas.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ds-ech { background: var(--ds-night); color: var(--ds-on-night); font-family: var(--ds-font-text); }
.ds-ech__axe { position: relative; margin-top: clamp(24px, 3.4vh, 44px); }
.ds-ech__seg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ds-ech__s {
    border-right: 1px solid rgba(236, 231, 220, .14);
    padding: 10px 0 clamp(64px, 9vh, 104px);
    text-align: center;
}
.ds-ech__s:last-child { border-right: 0; }
.ds-ech__s .ds-glyph { font-size: 1.02rem; color: rgba(236, 231, 220, .42); }
.ds-ech__sn { display: block; margin-top: 3px; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 231, 220, .38); }
.ds-ech__s--occupe { background: rgba(185, 177, 232, .07); }
.ds-ech__s--occupe .ds-glyph { color: var(--ds-brand-night); }
.ds-ech__corps { position: absolute; left: 0; right: 0; top: 52px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); pointer-events: none; }
.ds-ech__c { display: grid; justify-items: center; gap: 2px; }
.ds-ech__c1 { display: grid; justify-items: center; }
.ds-ech__c1 .ds-glyph { font-size: 1.18rem; color: var(--ds-on-night); }
.ds-ech__cn { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 231, 220, .62); }
/* LAYOUT_ONLY — décale les corps d'un même signe pour qu'ils ne se recouvrent pas.
   N'encode NI degré, NI ordre, NI proximité. */
.ds-ech__c1:nth-child(2) { margin-left: 14px; }
.ds-ech__c1:nth-child(3) { margin-left: 28px; }
.ds-ech__c1:nth-child(n+4) { margin-left: 42px; }
.ds-ech__avert { margin: clamp(16px, 2vh, 26px) 0 0; max-width: 66ch; font-size: .84rem; line-height: 1.5; color: rgba(236, 231, 220, .62); }
.ds-ech__avert b { color: var(--ds-on-night); font-weight: 400; }
/* Équivalent textuel : mêmes données, lisibles sans interpréter le visuel. */
.ds-ech__txt { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ds-sp-3) var(--ds-sp-5); margin: clamp(20px, 3vh, 34px) 0 0; }
.ds-ech__t { display: flex; align-items: baseline; gap: .5em; font-size: .94rem; }
.ds-ech__t dt { display: flex; align-items: baseline; gap: .42em; color: rgba(236, 231, 220, .62); }
.ds-ech__t dt .ds-glyph { color: var(--ds-brand-night); font-size: 1rem; }
.ds-ech__t dd { margin: 0; font-family: var(--ds-font-display); font-weight: var(--ds-value-weight); font-size: 1.06rem;
               /* `app.css` colore tous les `dd` à l'encre sombre : sur une surface
                  de nuit il faut le dire, et une classe suffit — pas d'!important. */
               color: var(--ds-on-night); }
.ds-ech__retro { color: var(--ds-tension-night); }
/* Le relevé DATE : c'est le seul emploi de l'ambre sur cette surface. */
.ds-ech__mesure { color: var(--ds-measured-night); }

.ds-ech__dest { display: grid; gap: clamp(26px, 4vw, 52px); margin-top: clamp(30px, 5vh, 60px); }
.ds-ech__grp { display: grid; gap: var(--ds-sp-4); }
.ds-ech__q { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ds-rule-night-soft); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 231, 220, .56); }
.ds-ech__ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ds-sp-4) var(--ds-sp-6); }
.ds-ech__d { display: grid; gap: 2px; min-height: 44px; color: var(--ds-on-night); text-decoration: none; }
.ds-ech__d b { font-weight: 400; font-size: 1rem; }
.ds-ech__d span { font-size: .84rem; color: rgba(236, 231, 220, .62); }
.ds-ech__d:hover b { text-decoration: underline; text-underline-offset: .2em; }

/* Le sélecteur de signe : ce qui résout les trois destinations que le chrome ne
   pouvait pas générer. Le hub ne choisit pas un signe — il les propose tous. */
.ds-ech__signes { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: var(--ds-sp-3); }
.ds-ech__sl { display: inline-flex; align-items: center; gap: .4em; min-height: 34px; padding: 0 10px; border: 1px solid rgba(236, 231, 220, .22); border-radius: var(--ds-radius); color: var(--ds-on-night); text-decoration: none; font-size: .9rem; }
.ds-ech__sl .ds-glyph { color: var(--ds-brand-night); }
.ds-ech__sl:hover { border-color: var(--ds-on-night); }

/* Le produit payant est une PROLONGATION, pas une quatrième section ambiguë : il vit
   sur la surface d'identité, avec ce qui le distingue écrit et non seulement coloré. */
.ds-ech__offre { margin-top: clamp(30px, 5vh, 60px); padding: clamp(20px, 3vw, 34px); border-radius: var(--ds-radius); background: var(--ds-identity-strong); color: var(--ds-on-identity); display: grid; gap: var(--ds-sp-3); }
.ds-ech__offre h2 { margin: 0; font-family: var(--ds-font-display); font-weight: var(--ds-display-weight); font-size: 1.6rem; color: var(--ds-on-identity); }
.ds-ech__offre p { margin: 0; max-width: 62ch; color: var(--ds-on-identity-muted); }
.ds-ech__offre .ds-btn { align-self: start; background: var(--ds-paper); color: var(--ds-action); border-color: var(--ds-paper); }

@media (max-width: 760px) {
    /* Douze segments ne tiennent pas sur un petit écran : l'axe défile, et la
       lecture textuelle en dessous reste, elle, complète. */
    .ds-ech__axe { overflow-x: auto; }
    .ds-ech__seg, .ds-ech__corps { min-width: 640px; }
    .ds-ech__corps { position: absolute; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   8 · U2 · L'ANATOMIE (Comprendre)                                     structure
   ----------------------------------------------------------------------------------
   LA FAMILLE PRÉCÈDE LE DÉTAIL. Le titre et sa promesse occupent une colonne, les
   destinations l'autre : on comprend de quoi il s'agit avant d'avoir à lire la liste.

   AUCUN VOLUME DÉCORATIF. « 12 signes » ne dit rien que la rangée ne montre déjà ;
   ce qui aide à choisir, c'est ce que la famille PERMET. Arbitrage rendu au chantier
   CREATIVE-DESIGN-CHALLENGE-002 : les compteurs de prestige sont retirés, les
   promesses de navigation restent.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ds-ana { display: grid; gap: clamp(32px, 5vw, 64px); font-family: var(--ds-font-text); }
.ds-ana__p { display: grid; grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.ds-ana__t { margin: 0; font-family: var(--ds-font-display); font-weight: var(--ds-display-weight); font-size: 1.72rem; line-height: 1.1; }
.ds-ana__q { margin: .45em 0 0; max-width: 32ch; font-size: .9rem; line-height: 1.45; color: var(--ds-on-paper-muted); }
.ds-ana__row { display: flex; flex-wrap: wrap; gap: 2px clamp(10px, 1.4vw, 22px); }
.ds-ana__i { display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-on-paper); text-decoration: none; font-size: 1rem; }
.ds-ana__i:hover { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 760px) {
    .ds-ana__p { grid-template-columns: 1fr; gap: var(--ds-sp-4); }
}

/* Chapeau commun aux trois hubs : même marque, et c'est tout ce qu'ils partagent. */
.ds-hub__fil { margin: 0; font-size: .82rem; color: var(--ds-on-paper-muted); }
.ds-ech .ds-hub__fil { color: rgba(236, 231, 220, .58); }
.ds-hub__titre { margin: var(--ds-sp-3) 0 0; font-family: var(--ds-font-display); font-weight: var(--ds-display-weight); font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.02; letter-spacing: -.015em; }
.ds-hub__lead { margin: var(--ds-sp-4) 0 0; max-width: 62ch; font-size: 1.06rem; line-height: 1.5; color: var(--ds-on-paper-muted); }
.ds-ech .ds-hub__lead { color: rgba(236, 231, 220, .78); }
.ds-hub__corps { margin-top: clamp(30px, 5vh, 64px); }


/*  ÉCRANS COURTS — EN FIN DE FEUILLE À DESSEIN.
    Première version : ce bloc vivait dans la section du chrome, donc AVANT les règles
    `.ds-ins` de la section hero. À spécificité égale, l'ordre de source décide : il ne
    s'appliquait pas du tout et le CTA restait sous le pli. Mesuré, pas supposé.

    Ce qu'il fait : à 320×568 et 360×800 le bas du bouton tombait à 821 et 812 px. On ne
    retire ni la promesse, ni le relevé — on resserre le titre, la lecture et les
    respirations, et le hero cesse d'être pleine hauteur. L'action prime sur l'amplitude
    typographique : c'est la hiérarchie du produit, pas un renoncement graphique.      */
@media (max-width: 700px) and (max-height: 900px) {
    .ds-ins { min-height: auto; }
    .ds-ins .ds-ins__titre { font-size: clamp(1.9rem, 1rem + 4.6vw, 2.6rem); max-width: 18ch; }
    .ds-ins .ds-ins__lead { font-size: .96rem; line-height: 1.45; margin-top: 10px; }
    .ds-ins__haut { padding-block: 18px 14px; }
    .ds-ins__releve { gap: 8px 12px; padding-block: 10px; }
    .ds-ins__astre .ds-glyph { font-size: 1rem; }
    .ds-ins__v { font-size: 1rem; }
    .ds-ins__bas { padding-block: 14px 18px; gap: 10px; }
    .ds-ins__micro { flex: 1 1 100%; font-size: .82rem; }
    .ds-ins__credit { margin-left: 0; flex: 1 1 100%; }
}

/*  Le plus petit format de la liste (320×568) demandait 92 px de plus. On les prend
    sur la MISE EN PAGE du relevé, pas sur son contenu : trois colonnes au lieu de
    deux, et le crédit passe sous la ligne d'actions. Les six positions restent là. */
@media (max-width: 380px) and (max-height: 700px) {
    .ds-ins__releve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
    .ds-ins .ds-ins__titre { font-size: 1.72rem; line-height: 1.02; }
    .ds-ins .ds-ins__lead { font-size: .9rem; line-height: 1.4; }
    .ds-ins__n { font-size: .58rem; letter-spacing: .1em; }
    .ds-ins__v { font-size: .92rem; }
    .ds-ins__haut { padding-block: 12px 10px; }
    .ds-ins__bas { padding-block: 12px 14px; }
    .ds-ins__micro { font-size: .78rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · L'OUTIL — LA PLANCHE AVANT LES PARAMÈTRES            `ds-out`
   ═══════════════════════════════════════════════════════════════════════════

   PÉRIMÈTRE ASSUMÉ : cette section habille le PILOTE (thème astral), pas les
   vingt autres outils. Elle ne touche que les surfaces du lot — surtitre,
   titre, identité de la carte, clés de lecture, titres de la sauvegarde, de
   la continuation. Le corps éditorial profond (vingt-cinq `h2`, à partir de
   « Ce que raconte votre carte ») garde SCIEMMENT l'ancien régime : le
   migrer serait un autre lot, et le mandat interdit le big-bang.

   POURQUOI UNE CLASSE PAR ÉLÉMENT, ET NON UNE PORTÉE PAR PAGE. Mesuré dans
   `app.css` : les titres y portent `font-weight: 650/700 !important`. Une
   règle d'ancêtre passerait la famille mais pas la graisse, et Instrument
   Serif n'existe qu'en 400 : le navigateur aurait synthétisé un faux gras.
   L'exclusion `h1:not([class*="ds-"])` a été construite exactement pour ce
   cas — une classe `ds-` sur l'élément libère l'élément. Aucun second
   `!important` n'est introduit.                                            */

.ds-out__kicker {
    font-family: var(--ds-font-text);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-on-paper-muted);
    margin: 0 0 var(--ds-sp-3);
}

.ds-out__titre {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.3rem);
    line-height: 1.03;
    letter-spacing: -.015em;
    color: var(--ds-on-paper);
    max-width: 20ch;
    margin: 0 0 var(--ds-sp-4);
}

.ds-out__lede {
    max-width: 58ch;
    font-size: 1.04rem;
    line-height: 1.5;
    color: var(--ds-on-paper-muted);
}

/*  L'identité de la carte est une MESURE, pas un titre : elle reste sur la
    pile de texte, en petit, et cède la vedette à la planche. Les valeurs
    passent en chiffres tabulaires — six lignes de dates et de coordonnées
    qui ne doivent pas danser d'une carte à l'autre.                        */
.ds-out__id dt {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-on-paper-muted);
}
.ds-out__id dd {
    font-size: .95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/*  TITRES DE SECTION DU PÉRIMÈTRE. Même famille que le titre, une taille en
    dessous : la page gagne une hiérarchie à deux étages au lieu d'un mur de
    gras. La graisse 400 est l'unique graisse livrée.                       */
.ds-out__st {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-display-weight);
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--ds-on-paper);
}

/*  LES QUATRE CLÉS. Le nom du signe est la réponse : il passe à l'affichage.
    Le glyphe reste sur la fonte d'astronomie livrée — `Astrologix Glyphes`
    gouverne 31 points de code, et rien ici ne la remplace.                 */
.ds-out__cle {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-value-weight);
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.ds-out__cle .pc-key__glyph {
    font-family: "Astrologix Glyphes", var(--ds-font-display);
    font-size: .9em;
}

/*  RAPPROCHER LES CLÉS DE LA ROUE. Mesuré : 759 px séparaient le haut de la
    planche du haut des clés, dont une respiration de section pensée pour un
    bloc isolé — la planche et ses clés ne l'étaient plus une fois remontées.
    On ne supprime rien : on resserre la couture entre deux blocs devenus
    voisins.                                                                */
.pc-result .pc-keys {
    margin-top: var(--ds-sp-5);
}

@media (max-width: 700px) {
    .ds-out__titre { max-width: 16ch; }
    .ds-out__cle { font-size: 1.35rem; }
}

/*  LA CONTINUATION RESTE MODESTE — ET C'EST UNE DÉCISION ANTÉRIEURE, PAS UN
    OUBLI. `app.css` lui impose `font-size: 1.14rem !important` : THEME-ASTRAL
    -UX-001 a voulu qu'elle ne concurrence pas « Conserver cette carte ».
    Cette intention reste juste après le réordonnancement. Je ne la combats
    donc pas ; mais une serif d'affichage à 18 px rend maigre. La continuation
    prend la grammaire d'ÉTIQUETTE : elle ne dispute aucune taille, et elle
    annonce un rail de liens plutôt qu'un acte.                              */
.ds-out__lbl {
    font-family: var(--ds-font-text);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-on-paper-muted);
}