/* verre.css · Lisibilité et verre dépoli, tout le site · 16/10/2026 (révision 2, menus et listes opaques)
   ------------------------------------------------------------------------
   Une seule feuille, chargée après toutes les autres (distribuée avec le menu,
   comme mega-menu.css). Elle ne touche à aucun texte : elle change la lumière
   derrière les panneaux, la matière des panneaux, la graisse et la taille du
   texte courant, la largeur des colonnes de lecture.
   Deux ambiances : nuit (data-theme="dark") avec le verre B, crème
   (data-theme="light") avec le verre blanc. Même recette, mêmes rayons.
   Servie sans cache long (règle dédiée dans _headers) : on corrige le fichier, pas le nom.
   Pour la retirer : enlever le <link> dans tools/build_nav.py, relancer build_chrome.py + sync_nav.py,
   puis python3 tools/verre_series.py --retirer sur les pages en série.
   ------------------------------------------------------------------------ */

/* ======================= 1. Réglages ======================= */
:root{
  --v-radius: 18px;
  --v-radius-s: 14px;
  --v-blur: 24px;
  --v-sat: 150%;
  --v-measure: 68ch;
}
[data-theme="dark"]{
  --v-fill: linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 42%, rgba(255,255,255,.07) 100%);
  --v-fill-flat: rgba(255,255,255,.055);
  --v-fill-hover: rgba(255,255,255,.11);
  --v-edge: rgba(255,255,255,.14);
  --v-edge-strong: rgba(223,197,138,.38);
  --v-sheen: rgba(255,255,255,.22);
  --v-shadow: 0 30px 70px rgba(0,0,0,.42);
  --v-solid: #1b2038;
  /* jetons du site : les filets et surfaces suivent le verre */
  --line: rgba(255,255,255,.14);
  --line-2: rgba(255,255,255,.2);
  --surface: rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.09);
  --surface-3: rgba(255,255,255,.12);
}
[data-theme="light"]{
  --v-fill: linear-gradient(112deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.56) 45%, rgba(255,255,255,.66) 100%);
  --v-fill-flat: rgba(255,255,255,.55);
  --v-fill-hover: rgba(255,255,255,.82);
  --v-edge: rgba(122,90,24,.14);
  --v-edge-strong: rgba(122,90,24,.32);
  --v-sheen: rgba(255,255,255,.95);
  --v-shadow: 0 18px 50px rgba(60,40,10,.10);
  --v-solid: #fffdf9;
  --line: rgba(122,90,24,.16);
  --line-2: rgba(122,90,24,.26);
  --surface: rgba(255,255,255,.62);
  --surface-2: rgba(255,255,255,.5);
}

/* ======================= 2. Texte courant ======================= */
html{ font-size: 17px; }
body{ font-weight: 400; }
p, li, dd, td, th, label, figcaption, summary, blockquote{ font-weight: 400; }
main p{ line-height: 1.68; text-wrap: pretty; }
h1, h2, h3{ text-wrap: balance; }

/* Colonnes de lecture : jamais plus de 68 caractères par ligne */
.article-body p, .article-body li,
.crois-body p, .crois-body li,
.planet-detail-text p,
.grimoire-detail-body p, .grimoire-detail-body li,
.interp-block p,
.bsm-chapter p,
.parchemin-card p,
.aspect-detail p,
.cn-result-card p,
.rs-card p, .tla-card p, .ra-card p, .fam-card p, .cma-archetype-card p, .syn-panel p{
  max-width: var(--v-measure);
  font-size: 1.0625rem;
  line-height: 1.72;
}
.article-body p:first-of-type,
.crois-body > p:first-of-type,
.grimoire-detail-body > p:first-of-type{
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* ======================= 3. La lumière derrière le verre ======================= */
html[data-theme="dark"] body:not(.home-cine)::before,
html[data-theme="light"] body::before{
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
html[data-theme="dark"] body:not(.home-cine)::before{
  background-image:
    radial-gradient(640px 640px at 8% 12%, rgba(72,92,205,.30) 0%, rgba(72,92,205,0) 70%),
    radial-gradient(700px 700px at 96% 48%, rgba(38,112,150,.24) 0%, rgba(38,112,150,0) 70%),
    radial-gradient(560px 560px at 56% -6%, rgba(205,165,95,.20) 0%, rgba(205,165,95,0) 70%),
    radial-gradient(640px 520px at 40% 108%, rgba(96,74,168,.18) 0%, rgba(96,74,168,0) 70%);
}
html[data-theme="light"] body{ background: transparent; }
html[data-theme="light"] body::before{
  background-image:
    radial-gradient(640px 640px at 4% 8%, rgba(200,162,92,.24) 0%, rgba(200,162,92,0) 70%),
    radial-gradient(760px 760px at 100% 42%, rgba(88,110,200,.14) 0%, rgba(88,110,200,0) 70%),
    radial-gradient(640px 560px at 48% 106%, rgba(215,175,110,.20) 0%, rgba(215,175,110,0) 70%);
}

/* ======================= 4. Les panneaux de verre ======================= */
.v-glass,
#packs-preview, #planet-detail .planet-detail-text, #testimonials, #three-results .r-dom-card, #three-results .r-planet,
.aff-block-top3, .aff-card, .affinites-wrap, .approche-v6 .approche-card, .article-card, .articles-sidebar,
.aspect-detail, .auth-aside, .auth-banner, .auth-card, .auth-form, .auth-reset-card, .auth-reset-modal,
.birth-form, .booking-fallback, .bsm-chapter, .bsm-chapter-conseil, .bsm-chapter-touche, .bsm-empty, .bsm-form,
.bsm-period-peak, .bsm-share-card, .bsm-upsell-card, .cap-card, .card, .cdj-panel, .cdj-picker, .celeb-card,
.chart-card, .chart-table, .ciel-hero, .ciel-hero-compact, .cine-unlock-inner, .cma-archetype-card,
.cma-force-item, .cma-forces-empty, .cma-form, .cma-ombre-box, .cma-person-card, .cma-score-card, .cma-share-card,
.cma-solar-warning, .cn-card, .cn-card-flat-gold, .cn-liquid-glass, .cn-liquid-glass-card, .cn-liquid-glass-strong,
.cn-modal, .cn-result-card, .commande-card, .compte-accordion, .compte-zone .empty-state, .contact-card, .cplan,
.crois-block, .cta-after-chart, .cta-mode-3d, .demo-banner, .dominantes-card, .dominantes-card-strong,
.dominantes-panel, .email-gate, .empty-editorial, .fam-card, .fam-form, .fam-link-card, .fam-person-card,
.fam-score-card, .fam-share-card, .fam-signed-note, .fam-solar-warning, .faq-item, .form-success, .glass,
.google-map-wrap, .google-review-card, .gr-card, .gr-head, .grimoire-aspect-pair, .grimoire-card,
.grimoire-pm-card, .grimoire-subcard, .hb-card, .hero-v2-unified, .home-analysis-card, .home-birth-form,
.home-faq-item, .home-sky-block, .home-toc, .interp-block, .lineage-card, .liquid-glass, .liquid-glass-card,
.lunation-card, .manifesto-band, .metrics, .modal-card, .next-card, .nv-liquid-glass, .nv-liquid-glass-card,
.of-booking-alt, .of-calendly, .of-contact, .of-door, .of-end, .of-format, .of-plan, .of-tip, .pa-axis-card,
.pack-card, .palazzo-bloc-card, .palazzo-card, .palazzo-gate-card, .palazzo-profile-banner, .palazzo-quota,
.palazzo-thinking-card, .panel, .parchemin-card, .parcours-card, .pdf-download-box, .pl-details, .planet-detail,
.planet-detail-text, .portrait-band, .portrait-frame, .pr-card, .profil-card, .ra-card, .ra-form, .ra-mantra,
.ra-share-card, .reload-saved-chart, .result-preview-wrap, .review-card, .rs-card, .rs-fieldset, .rs-head,
.rs-upsell-card, .sabian-card, .sabians-sign, .save-chart-box, .section-card, .settings-card, .sg-delete-card,
.sg-push-card, .share-box, .share-modal-content, .share-sheet-content, .sky-context, .sky-zone, .solar-chart-banner,
.surface, .syn-form, .syn-key-item, .syn-keys-empty, .syn-panel, .syn-person-card, .syn-score-card,
.syn-solar-warning, .syn-wheel-container, .t-card, .tarif, .tarif-card, .testi-card, .testimonial-card, .tfc,
.theme-actions-bar, .theme-form-card, .three-d-cta, .three-sheet, .three-sidebar, .tla-card, .tla-crosssell,
.tla-form, .tla-share-card, .transit-card, .trinite-card, .trinite-form, .trinite-share-card, .wheel-birth-info,
.wheel-params,
.calc-split-form, .cn-form,
.sa-card, .sa-offer, .sa-chat, .sa-symbol-panel, .hp-wl,
#calculator-block .big-3, #calculator-block .profile-loader .pl-details, #calculator-block .tw-tabs,
#calculator-block .tw-planet-palette, #calculator-block .tw-explorer-body, #calculator-block .tw-shell .natal-portrait,
#calculator-block .tw-shell .dominantes-card, #calculator-block .tw-shell .wheel-params-details,
#calculator-block .tw-save #save-chart-box, #calculator-block .tw-consultation{
  background: var(--v-fill);
  border: 1px solid var(--v-edge);
  border-radius: var(--v-radius);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
/* Du verre dans du verre : la pièce intérieure devient une surface plate, sans flou (lisible et légère). */
:is(.card, .cn-liquid-glass-card, .cn-result-card, .panel, .parchemin-card, .glass, .liquid-glass-card, .nv-liquid-glass-card,
    .trinite-card, .rs-card, .tla-card, .ra-card, .fam-card, .cma-archetype-card, .syn-panel, .bsm-chapter, .dominantes-panel,
    .result-preview-wrap, .tfc, .pack-card, .of-plan, .of-contact, .gr-head, .grimoire-aspect-pair, .planet-detail, .aspect-detail,
    .theme-form-card, .email-gate, .auth-card, .modal-card, .cn-modal, .share-modal-content, .three-sidebar, .three-sheet,
    .tw-explorer-body, .natal-portrait)
:is(.card, .cn-card, .dominantes-card, .dominantes-card-strong, .sabian-card, .grimoire-subcard, .grimoire-pm-card, .crois-block,
    .interp-block, .cma-force-item, .syn-key-item, .fam-link-card, .commande-card, .palazzo-bloc-card, .planet-detail-text,
    .planet-detail, .aspect-detail, .pl-details, .cn-liquid-glass-card, .liquid-glass-card, .bsm-chapter-conseil,
    .bsm-chapter-touche, .of-tip, .chart-table, .t-card, .transit-card, .next-card, .metrics, .cn-result-card, .section-card){
  background: var(--v-fill-flat);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: var(--v-radius-s);
}
[data-theme="light"] :is(.card, .cn-liquid-glass-card, .parchemin-card, .pack-card, .of-plan, .gr-head, .dominantes-panel, .result-preview-wrap, .theme-form-card)
:is(.card, .cn-card, .dominantes-card, .dominantes-card-strong, .sabian-card, .grimoire-subcard, .crois-block, .interp-block, .chart-table, .section-card){
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(122,90,24,.10);
}
/* Les cartes-liens respirent au survol. */
a.grimoire-card, a.sabian-card, a.celeb-card, a.article-card, a.of-door, a.sa-card, a.sa-offer, a.pack-card, a.cn-card, a.hb-card{
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s, box-shadow .35s;
}
a.grimoire-card:hover, a.sabian-card:hover, a.celeb-card:hover, a.article-card:hover, a.of-door:hover, a.sa-card:hover, a.sa-offer:hover, a.pack-card:hover, a.cn-card:hover, a.hb-card:hover{
  background: var(--v-fill-hover);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 var(--v-sheen), 0 22px 48px rgba(0,0,0,.28);
}
[data-theme="light"] a.grimoire-card:hover, [data-theme="light"] a.sabian-card:hover, [data-theme="light"] a.celeb-card:hover,
[data-theme="light"] a.article-card:hover, [data-theme="light"] a.of-door:hover, [data-theme="light"] a.pack-card:hover{
  box-shadow: inset 0 1px 0 var(--v-sheen), 0 22px 48px rgba(60,40,10,.14);
}
/* Les formulaires et tableaux gardent leurs champs lisibles sur le verre. */
[data-theme="dark"] :is(.v-glass, .cn-form, .calc-split-form, .trinite-form, .syn-form, .fam-form, .cma-form, .bsm-form, .ra-form, .tla-form, .birth-form, .theme-form-card, .home-birth-form, .auth-form)
:is(input[type="text"], input[type="date"], input[type="time"], input[type="email"], input[type="number"], input[type="password"], select, textarea){
  background-color: rgba(8,10,22,.55);
  border-color: rgba(255,255,255,.16);
}
[data-theme="light"] :is(.cn-form, .calc-split-form, .trinite-form, .syn-form, .fam-form, .cma-form, .bsm-form, .ra-form, .tla-form, .birth-form, .theme-form-card, .auth-form)
:is(input[type="text"], input[type="date"], input[type="time"], input[type="email"], input[type="number"], input[type="password"], select, textarea){
  background-color: rgba(255,255,255,.9);
}
[data-theme="light"] .chart-table{ background: rgba(255,255,255,.72); }


/* ======================= 4 bis. Ce qui flotte au-dessus de la page est opaque ======================= */
/* Menus, listes déroulantes, modales, feuilles : surface pleine, sans flou. Le verre dépoli laisse passer
   une ombre de ce qui est derrière (un grand titre, par exemple), et un menu doit se lire d'un seul coup. */
[data-theme="dark"]{ --v-fill-opaque: #101428; }
[data-theme="light"]{ --v-fill-opaque: #fffdf9; }
html .v5-nav-submenu, html .v5-nav-submenu.v5-mega,
html .place-suggestions, html .ca-suggestions,
html .cn-modal, html .modal-card, html .auth-reset-modal, html .share-modal-content, html .share-sheet-content, html .three-sheet, html .toast{
  --v-fill: var(--v-fill-opaque);
  background: var(--v-fill-opaque);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .v5-nav-submenu.v5-mega{ border-radius: 0; border-bottom: 1px solid var(--v-edge); box-shadow: 0 30px 70px rgba(0,0,0,.35); }
html[data-theme="light"] .v5-nav-submenu.v5-mega{ box-shadow: 0 24px 60px rgba(60,40,10,.14); }
html .place-suggestions{ border-radius: var(--v-radius-s); box-shadow: 0 18px 50px rgba(0,0,0,.35); }

/* Listes de lieux : elles flottent au-dessus du formulaire et doivent rester
   lisibles sur grand écran comme sur mobile, sans recouvrir les champs voisins. */
html #birth-form .place-autocomplete{ position: relative; }
html #birth-form #place-suggestions.place-suggestions{
  position: absolute;
  inset: calc(100% + .45rem) 0 auto;
  z-index: 1200;
  width: 100%;
  max-height: min(18rem, 40vh);
  overflow-y: auto;
  margin: 0;
  padding: .35rem;
  box-sizing: border-box;
  background: var(--v-fill-opaque);
  border: 1px solid var(--v-edge);
  border-radius: var(--v-radius-s);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
html #birth-form #place-suggestions.place-suggestions li{
  display: block;
  min-height: 0;
  margin: 0;
  padding: .8rem 1rem;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
html #birth-form #place-suggestions.place-suggestions li + li{ border-top: 1px solid var(--line); }
html #birth-form #place-suggestions.place-suggestions li:hover,
html #birth-form #place-suggestions.place-suggestions li[aria-selected="true"]{
  background: var(--gold-tint);
  color: var(--gold-2);
}
/* Les listes natives (select) suivent le thème, options comprises. */
[data-theme="dark"] select, [data-theme="dark"] option{ color-scheme: dark; }
[data-theme="dark"] option{ background: #141a30; color: #f3ebd9; }
[data-theme="light"] option{ background: #ffffff; color: #16130e; }

/* ======================= 4 ter. Les cartes des dominantes ======================= */
.dominantes-panel .dominantes-card, .dominantes-panel .dominantes-card-strong{
  gap: .55rem; padding: 1.4rem 1rem 1.2rem; border: 0; border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="light"] .dominantes-panel .dominantes-card, [data-theme="light"] .dominantes-panel .dominantes-card-strong{
  background: rgba(255,255,255,.6);
  box-shadow: inset 0 0 0 1px rgba(122,90,24,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.dominantes-panel .dominantes-card-clickable:hover{ background: rgba(255,255,255,.1); transform: translateY(-2px); }
[data-theme="light"] .dominantes-panel .dominantes-card-clickable:hover{ background: rgba(255,255,255,.85); }
.dominantes-panel .dominantes-card-label{ font-size: .84rem; margin-bottom: .1rem; }
.dominantes-panel .dominantes-card-glyph{ font-size: 2.6rem; }
.dominantes-panel .dominantes-card-value{ font-size: 1.55rem; }
.dominantes-panel .dominantes-card-sub{ font-size: .92rem; line-height: 1.45; max-width: 28ch; }
.dominantes-panel .dominantes-card-link{ font-size: .8rem; padding-top: .7rem; margin-top: .8rem; }
.dominantes-panel > p, .dominantes-suite{ font-size: 1rem; line-height: 1.6; }

/* ======================= 5. L'espace Mon thème (#calculator-block) ======================= */
#calculator-block .tw-shell{
  --tw-glass: rgba(255,255,255,.065);
  --tw-line: rgba(255,255,255,.14);
  --tw-hover: rgba(255,255,255,.11);
}
/* La palette : des tuiles de verre, plus de filets. */
#calculator-block .tw-planet-palette{ padding: 30px 32px 28px; }
#calculator-block .tw-planet-palette > p{ font-size: 1rem; line-height: 1.5; color: #d8d0c0; margin-bottom: 22px; }
#calculator-block .tw-planet-buttons{ gap: 10px; }
#calculator-block .tw-planet-buttons .tw-planet-button{
  min-height: 60px; padding: 12px 16px; gap: 14px;
  border: 0; border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);
  color: #f0e4c6; font-size: 1rem; font-weight: 500;
  transition: background .25s, box-shadow .25s, transform .25s;
}
#calculator-block .tw-planet-buttons .tw-planet-button .tw-planet-glyph{ width: 28px; height: 28px; color: #e6c98a; filter: drop-shadow(0 0 6px rgba(223,197,138,.25)); }
#calculator-block .tw-planet-buttons .tw-planet-button:hover,
#calculator-block .tw-planet-buttons .tw-planet-button:focus-visible,
#calculator-block .tw-planet-buttons .tw-planet-button[aria-pressed="true"],
#calculator-block .tw-planet-buttons .tw-planet-button.is-active{
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 0 0 1px rgba(223,197,138,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.25);
}
#calculator-block .tw-angle-buttons{ margin-top: 10px; padding-top: 0; border-top: 0; gap: 10px; }
#calculator-block .tw-angle-buttons button{
  min-height: 54px; padding: 10px 16px; gap: 12px;
  border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);
  color: #f0e4c6; font-size: .95rem; font-weight: 500;
}
#calculator-block .tw-angle-buttons button:hover,
#calculator-block .tw-angle-buttons button:focus-visible{ background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(223,197,138,.35); }
#calculator-block .tw-angle-buttons .tw-angle-glyph{
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: .72rem; font-weight: 600; color: #e6c98a; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(223,197,138,.45);
}
/* Le bloc consultation devient un panneau à part entière. */
#calculator-block .tw-consultation{ padding: 32px 34px 30px; margin-top: 24px; border-top: 1px solid var(--v-edge); }
#calculator-block .tw-consultation p{ font-size: 1.0625rem; line-height: 1.65; max-width: 58ch; }
#calculator-block .tw-consultation .btn{
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.07); color: #f1e3bd; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
#calculator-block .tw-consultation .btn-primary{
  color: #1a1b2e; background: linear-gradient(110deg,#fae5ac,#e6b660 65%,#ca8f45);
  box-shadow: 0 8px 28px rgba(226,175,78,.25), inset 0 1px 0 rgba(255,255,255,.55);
}
/* La fenêtre de lecture : colonne de 62 caractères, chapeau, identité regroupée, verre B. */
#calculator-block .tw-reading-dialog{
  width: min(680px, calc(100vw - 32px));
  padding: 0 44px 40px;
  border-radius: 22px;
  border: 1px solid rgba(223,197,138,.26);
  background: linear-gradient(180deg, rgba(40,46,74,.82) 0%, rgba(24,29,48,.92) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  backdrop-filter: blur(26px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 36px 90px rgba(0,0,0,.55);
}
#calculator-block .tw-reading-dialog::backdrop{ background: rgba(3,6,15,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#calculator-block .tw-dialog-head{
  margin: 0 -44px 26px; padding: 14px 16px 14px 44px;
  background: rgba(24,29,48,.72); border-bottom: 1px solid rgba(223,197,138,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: .875rem; font-weight: 500; color: #cfb77c;
}
#calculator-block .tw-reading-dialog .tw-dialog-close{
  width: 40px; height: 40px; min-height: 40px; font-size: 22px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(223,197,138,.18);
}
#calculator-block .tw-reading-dialog .planet-detail-head{ align-items: center; gap: 18px; padding-bottom: 0; border-bottom: 0; }
#calculator-block .tw-reading-dialog .planet-detail-sym{
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-size: 24px; color: #f1d99f;
  background: radial-gradient(circle at 35% 30%, rgba(255,236,190,.22), rgba(223,197,138,.06));
  border: 1px solid rgba(223,197,138,.4);
}
#calculator-block .tw-reading-dialog .planet-detail-head h4,
#calculator-block .tw-reading-dialog .planet-detail-title{ margin: 0 0 7px; font-size: 1.55rem; line-height: 1.1; color: #f6ecd5; }
#calculator-block .tw-reading-dialog .planet-detail-pos{
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(223,197,138,.26); background: rgba(255,255,255,.04);
  font-size: .9rem; color: #d9d0c0;
}
#calculator-block .tw-reading-dialog #planet-detail-text,
#calculator-block .tw-reading-dialog .planet-detail-text,
#calculator-block .tw-reading-dialog .crois-block,
#calculator-block .tw-reading-dialog .crois-body{ border: 0; padding-left: 0; margin-top: 30px; max-width: 62ch; }
#calculator-block .tw-reading-dialog h4, #calculator-block .tw-reading-dialog .crois-title{ font-size: 1.8rem; line-height: 1.15; color: #dfc58a; margin-bottom: 16px; }
#calculator-block .tw-reading-dialog p, #calculator-block .tw-reading-dialog li{ font-size: 1.0875rem; line-height: 1.7; color: #efe7d6; margin-bottom: 1.05em; }
#calculator-block .tw-reading-dialog .crois-body > p:first-of-type,
#calculator-block .tw-reading-dialog #planet-detail-text > p:first-of-type{ font-size: 1.2rem; line-height: 1.6; color: #fbf5e8; }
#calculator-block .tw-reading-dialog .crois-section{ padding: 18px 0; border: 0; }
#calculator-block .tw-reading-dialog .planet-detail-aspect,
#calculator-block .tw-reading-dialog .planet-detail-aspects-empty,
#calculator-block .tw-reading-dialog .aspects-empty{
  margin-top: 22px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(223,197,138,.14);
  background: rgba(255,255,255,.045); font-size: .92rem; line-height: 1.5; color: #cfc6b4;
}
#calculator-block .tw-reading-dialog .planet-detail-aspect{ color: #e6c98a; cursor: pointer; }
#calculator-block .tw-reading-dialog .planet-detail-aspect:hover{ background: rgba(255,255,255,.09); }


/* Dans la fenêtre de lecture, les blocs intérieurs sont nus : un seul verre, celui de la fenêtre. */
#calculator-block .tw-reading-dialog :is(.planet-detail, .planet-detail-text, #planet-detail-text, .aspect-detail, .crois-block, .crois-body, .crois-section){
  background: transparent; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}
#calculator-block .tw-reading-dialog .planet-detail-meta{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#calculator-block .tw-reading-dialog .planet-detail-pos{ align-self: flex-start; width: max-content; max-width: 100%; }
#calculator-block .tw-reading-dialog .planet-detail-aspects{ border-top: 0; margin-top: 26px; padding-top: 0; }
#calculator-block .tw-reading-dialog .planet-detail-aspects-title{ font-size: 1rem; color: #cfb77c; margin: 0 0 10px; }
#calculator-block .tw-reading-dialog .planet-detail-none{
  margin: 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(223,197,138,.14);
  background: rgba(255,255,255,.045); font-size: .92rem; line-height: 1.5; color: #cfc6b4;
}

/* ======================= 6. Accueil (déjà en nuit, atmosphère propre) ======================= */
.sa-home .sa-card{ background: var(--v-fill); border-color: var(--v-edge); }
.sa-home .sa-card:hover{ background: var(--v-fill-hover); }
.sa-home .sa-offer, .sa-home .sa-chat, .sa-home .sa-symbol-panel, .sa-home .hp-wl{ border-radius: var(--v-radius); }

/* ======================= 7. Mobile et tablette ======================= */
@media (max-width: 760px){
  :root{ --v-blur: 16px; --v-radius: 16px; --v-radius-s: 12px; }
  html{ font-size: 16.5px; }
  html[data-theme="dark"] body:not(.home-cine)::before{
    background-image:
      radial-gradient(420px 420px at 0% 6%, rgba(72,92,205,.30) 0%, rgba(72,92,205,0) 70%),
      radial-gradient(460px 460px at 100% 46%, rgba(38,112,150,.22) 0%, rgba(38,112,150,0) 70%),
      radial-gradient(380px 380px at 60% -4%, rgba(205,165,95,.18) 0%, rgba(205,165,95,0) 70%);
  }
  html[data-theme="light"] body::before{
    background-image:
      radial-gradient(420px 420px at 0% 4%, rgba(200,162,92,.22) 0%, rgba(200,162,92,0) 70%),
      radial-gradient(480px 480px at 100% 44%, rgba(88,110,200,.12) 0%, rgba(88,110,200,0) 70%);
  }
  /* Les grilles de petites cartes : surface plate, le flou est réservé aux grands panneaux. */
  .grimoire-card, .sabian-card, .celeb-card, .article-card, .dominantes-card, .cma-force-item, .syn-key-item, .fam-link-card, .t-card, .transit-card{
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--v-fill-flat);
  }
  [data-theme="light"] :is(.grimoire-card, .sabian-card, .celeb-card, .article-card, .dominantes-card){ background: rgba(255,255,255,.78); }
  /* La fenêtre de lecture devient une feuille qui monte du bas de l'écran. */
  #calculator-block .tw-reading-dialog{
    inset: auto 0 0 0; margin: 0; width: 100vw; max-width: none;
    max-height: 92dvh; padding: 0 20px 32px;
    border-radius: 22px 22px 0 0; border-bottom: 0;
  }
  #calculator-block .tw-dialog-head{ margin: 0 -20px 20px; padding: 12px 10px 12px 20px; }
  #calculator-block .tw-dialog-head::before{
    content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: rgba(255,255,255,.22);
  }
  #calculator-block .tw-reading-dialog p, #calculator-block .tw-reading-dialog li{ font-size: 1.03rem; line-height: 1.65; }
  #calculator-block .tw-reading-dialog h4, #calculator-block .tw-reading-dialog .crois-title{ font-size: 1.5rem; }
  #calculator-block .tw-reading-dialog .crois-body > p:first-of-type,
  #calculator-block .tw-reading-dialog #planet-detail-text > p:first-of-type{ font-size: 1.1rem; line-height: 1.6; }
  #calculator-block .tw-reading-dialog #planet-detail-text, #calculator-block .tw-reading-dialog .crois-block{ margin-top: 22px; }
  #calculator-block .tw-planet-palette{ padding: 22px 16px 20px; }
  #calculator-block .tw-planet-buttons .tw-planet-button{ min-height: 54px; padding: 10px 12px; font-size: .95rem; }
  #calculator-block .tw-consultation{ padding: 24px 20px 22px; }
}

/* ======================= 8. Garde-fous ======================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  [data-theme="dark"]{ --v-fill: rgba(27,32,56,.96); --v-fill-flat: rgba(36,42,68,.96); }
  [data-theme="light"]{ --v-fill: rgba(255,253,249,.97); --v-fill-flat: rgba(255,255,255,.98); }
  #calculator-block .tw-reading-dialog{ background: #1b2038; }
  #calculator-block .tw-shell{ --tw-glass: rgba(27,32,56,.96); }
}
@media (prefers-reduced-motion: reduce){
  a.grimoire-card, a.sabian-card, a.celeb-card, a.article-card, a.of-door, a.sa-card, a.sa-offer, a.pack-card, a.cn-card, a.hb-card{ transition: none; }
  a.grimoire-card:hover, a.sabian-card:hover, a.celeb-card:hover, a.article-card:hover, a.of-door:hover, a.sa-card:hover, a.sa-offer:hover, a.pack-card:hover, a.cn-card:hover, a.hb-card:hover{ transform: none; }
}
@media print{
  html[data-theme] body::before{ display: none; }
  .v-glass, .card, .parchemin-card, .cn-liquid-glass-card{ -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; box-shadow: none; }
}

/* ======================= 9. Roues, scores, sélecteurs, formulaires à deux ======================= */
/* Aspects au clic : seuls ceux de la planète choisie restent, les autres disparaissent. */
.natal-wheel.is-filtered .aspect-group:not(.matches-selected){ opacity: 0 !important; pointer-events: none; }
.natal-wheel.is-filtered .aspect-group:not(.matches-selected) .aspect-line{ opacity: 0; }
.bi-wheel-svg.is-filtered .bi-aspect:not(.matches-selected){ opacity: 0 !important; pointer-events: none; }
.bi-wheel-svg.is-filtered .aspect-group:not(.matches-selected){ opacity: 0 !important; pointer-events: none; }
.natal-wheel.is-filtered .planet-group:not(.is-selected),
.bi-wheel-svg.is-filtered .bi-planet-natal:not(.is-selected),
.bi-wheel-svg.is-filtered .bi-planet-transit:not(.is-selected),
.bi-wheel-svg.is-filtered .transit-planet:not(.is-selected){ opacity: .4; }
/* La roue est la pièce principale : pas de cadre autour, toute la largeur disponible. */
.syn-wheel-container{ padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.syn-wheel-container svg{ width: 100%; height: auto; max-width: 940px; display: block; margin: 0 auto; }
/* Anneau du score : le nombre au centre optique du cercle. */
.syn-score-ring, .cma-score-ring, .fam-score-ring, .score-ring{
  display: grid; grid-auto-flow: column; align-content: center; justify-content: center; align-items: baseline; gap: .15rem;
  width: 220px; height: 220px; margin: 0 auto 1rem; border-radius: 50%; padding: 0;
}
.syn-score-num, .cma-score-num, .fam-score-num, .score-num{ font-family: var(--font-serif, 'Fraunces', serif); font-size: 5rem; font-weight: 500; line-height: 1; }
.syn-score-unit, .cma-score-unit, .fam-score-unit, .score-unit{ font-size: 1.3rem; margin: 0; line-height: 1; }
/* L'esperluette entre les deux personnes. */
.syn-amp{ font-family: var(--font-serif, 'Fraunces', serif); font-weight: 300; font-size: 3.4rem; color: var(--gold); opacity: .9; }
/* Sélecteurs : la matière des champs du formulaire, un chevron doré, jamais la taille du système.
   (html en tête pour passer devant « .cn-form select » de layout.css, qui impose 1,25 rem.) */
html select, html .pl-select{
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--ink);
  min-height: 48px; width: 100%; max-width: 100%; padding: .65rem 2.8rem .65rem 1rem;
  border: 1px solid var(--line-2); border-radius: var(--v-radius-s);
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%23D4B87A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"] select, html[data-theme="dark"] .pl-select{ background-color: rgba(8,10,22,.55); color: #f3ebd9; border-color: rgba(255,255,255,.16); }
html[data-theme="light"] select, html[data-theme="light"] .pl-select{ background-color: rgba(255,255,255,.9); color: #16130e; }
html select:focus-visible, html .pl-select:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
/* Les petits sélecteurs de réglage (roue, filtres) gardent une taille compacte. */
html .wheel-params select, html .chart-select, html .cdj-select, html .pl-select-compact{ min-height: 40px; padding: .4rem 2.4rem .4rem .8rem; font-size: .95rem; width: auto; }
/* Le bloc « Charger un profil » : une surface plate dans la carte, un seul chevron. */
.profile-loader .pl-details{
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; /* visible : la liste de verre dépasse du bloc */
}
[data-theme="light"] .profile-loader .pl-details{ background: rgba(255,255,255,.45); }
.profile-loader .pl-body, .profile-loader .pl-state, .syn-person-card, .cma-person-card, .fam-person-card{ overflow: visible; }
.profile-loader .pl-summary{ list-style: none; padding: .9rem 1rem; gap: .8rem; font-size: .95rem; font-weight: 500; color: var(--ink); }
.profile-loader .pl-summary::marker, .profile-loader .pl-summary::-webkit-details-marker{ content: ''; display: none; }
.profile-loader .pl-summary-glyph{ display: none; }
.profile-loader .pl-summary::before, .profile-loader .pl-summary::after{ content: none; display: none; }
.profile-loader .pl-summary-arrow{ color: var(--gold); font-size: .9rem; }
.profile-loader .pl-body{ padding: .2rem 1rem 1rem; border-top: 1px solid var(--line); }
.profile-loader .pl-select-label{ font-size: .9rem; color: var(--ink-3); margin: .5rem 0 .45rem; }
.profile-loader .pl-feedback{ font-size: .9rem; }
.profile-loader .pl-feedback:empty{ display: none; }
@media (max-width: 700px){
  .syn-score-ring, .cma-score-ring, .fam-score-ring, .score-ring{ width: 180px; height: 180px; }
  .syn-score-num, .cma-score-num, .fam-score-num, .score-num{ font-size: 4.2rem; }
  .syn-wheel-container svg{ max-width: none; }
  .natal-wheel .planet-deg{ display: none; }
}

/* ======================= 10. Structure des pages à deux thèmes, largeur des lectures ======================= */
/* Les cartes Personne A / Personne B : la légende devient un titre de carte, le bord reste continu. */
.syn-person-card, .cma-person-card, .fam-person-card{ min-inline-size: auto; padding: 1.4rem 1.3rem 1.5rem; }
.syn-person-card > legend, .cma-person-card > legend, .fam-person-card > legend,
.syn-person-label, .cma-person-label, .fam-person-label{
  float: left; width: 100%; box-sizing: border-box; display: block;
  margin: 0 0 1.1rem; padding: 0 0 .7rem; border-bottom: 1px solid var(--line);
  background: transparent; opacity: 1;
  font-family: var(--font-serif, 'Fraunces', serif); font-size: 1.35rem; font-weight: 500; line-height: 1.2; color: var(--gold);
}
/* Le bouton de comparaison rentre dans le panneau, à distance égale des cartes et du bord. */
.syn-form.cn-form, .cma-form.cn-form, .fam-form.cn-form{ padding: clamp(22px, 3vw, 36px); }
.syn-form-actions, .cma-form-actions, .fam-form-actions{ margin: 1.6rem 0 0; }
.syn-amp, .cma-amp, .fam-amp{ font-family: var(--font-serif, 'Fraunces', serif); font-weight: 300; font-size: 3.4rem; color: var(--gold); opacity: .9; }
/* L'en-tête du résultat tient dans un panneau ; un onglet seul n'est pas une barre d'onglets. */
.syn-result-head, .cma-result-head, .fam-result-head{
  max-width: 860px; margin: 0 auto 1.4rem; padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.syn-result-head > *:last-child, .cma-result-head > *:last-child, .fam-result-head > *:last-child{ margin-bottom: 0; }
.syn-tabs:has(> .syn-tab:only-child){ display: none; }
.syn-xref{ max-width: 860px; margin: 0 auto 2.6rem; font-size: .95rem; color: var(--ink-3); }
/* La roue : son titre, sa légende en deux pastilles, puis la roue elle-même. */
.syn-wheel-head, .cma-wheel-head, .fam-wheel-head, .pa-wheel-head{ margin-bottom: 1.1rem; }
.syn-wheel-legend{ gap: .8rem; margin-bottom: 1.4rem; }
.syn-wheel-legend-item{
  padding: .55rem 1rem .55rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="light"] .syn-wheel-legend-item{ background: rgba(255,255,255,.6); }
.syn-wheel-legend-item em{ color: var(--gold); }
/* La fin de page : les deux boutons, puis la note dans une carte discrète. */
.syn-actions, .cma-actions, .fam-actions, .tla-actions, .ra-actions, .bsm-actions{ margin: 2.6rem auto 1.1rem; }
.syn-disclaimer, .cma-disclaimer, .fam-disclaimer{
  max-width: 720px; margin: 0 auto 3.5rem; padding: 1rem 1.3rem; border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .95rem; line-height: 1.6; color: var(--ink-2); text-align: center;
}
[data-theme="light"] .syn-disclaimer, [data-theme="light"] .cma-disclaimer, [data-theme="light"] .fam-disclaimer{ background: rgba(255,255,255,.55); }
/* Largeur de lecture : la colonne de journal sur un drap blanc, c'est fini. */
.container.narrow{ max-width: 1080px; }
.parchemin-card, .grimoire-detail-body.parchemin-card{ max-width: 880px; }
.page-body, .article-full{ max-width: 880px; margin-inline: auto; }
.parchemin-card .crois-body, .parchemin-card > .grimoire-detail-text, .page-body > *, .article-full .article-body{ max-width: none; }
.parchemin-card p, .page-body p, .article-body p, .grimoire-detail-body p{ max-width: 72ch; font-size: 1.0625rem; line-height: 1.72; }
.parchemin-card > p:first-of-type, .page-body > p:first-of-type, .article-body > p:first-of-type{ font-size: 1.2rem; line-height: 1.6; }
@media (min-width: 1500px){
  .parchemin-card, .grimoire-detail-body.parchemin-card, .page-body, .article-full{ max-width: 960px; }
  .parchemin-card p, .page-body p, .article-body p, .grimoire-detail-body p{ font-size: 1.125rem; }
}
/* Révolution solaire : les résultats prennent la largeur, la roue reste centrée. */
.rs-results .container.narrow{ max-width: 1120px; }
.rs-head{ max-width: 860px; margin-inline: auto; }
.rs-wheel{ max-width: 820px; }
@media (max-width: 760px){
  .syn-person-card, .cma-person-card, .fam-person-card{ padding: 1.1rem 1rem 1.2rem; }
  .syn-result-head, .cma-result-head, .fam-result-head{ padding: 22px 18px; }
}

/* Compatibilité familiale : quand la règle éditoriale retire le texte de la note signée, la carte ne doit pas
   rester vide avec la seule signature « , Stéphane ». */
.fam-signed-note:has(> #fam-signed-text[hidden]), .fam-signed-note:has(> [data-editorial-removed]){ display: none; }

/* ======================= 11. La liste de verre (js/verre-select) ======================= */
/* La grille minmax(0,1fr) empêche un long libellé d'élargir la carte : il se coupe en « … ». */
.vs{ position: relative; width: 100%; min-width: 0; max-width: 100%; }
.vs .vs-native{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }
.vs-btn{
  -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: minmax(0,1fr) 14px; align-items: center; gap: .8rem;
  width: 100%; min-width: 0; min-height: 48px; padding: .65rem 1rem .65rem 1rem; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--v-radius-s); background: rgba(8,10,22,.55);
  transition: border-color .2s, background .2s;
}
[data-theme="light"] .vs-btn{ background: rgba(255,255,255,.9); color: #16130e; }
.vs-btn:hover{ border-color: var(--gold); }
.vs-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.vs-btn.is-placeholder .vs-label{ color: var(--ink-3); }
.vs-label{ display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-chevron{ width: 14px; height: 14px; background: no-repeat center / 14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%23D4B87A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); transition: transform .25s; }
.vs.is-open .vs-chevron{ transform: rotate(180deg); }
/* La carte qui tient la liste ouverte passe au-dessus de ses voisines (le verre crée un contexte d'empilement). */
.profile-loader:has(.vs.is-open), .pl-details:has(.vs.is-open), .pl-body:has(.vs.is-open), .pl-state:has(.vs.is-open),
.syn-person-card:has(.vs.is-open), .cma-person-card:has(.vs.is-open), .fam-person-card:has(.vs.is-open),
.form-group:has(.vs.is-open), .cn-field:has(.vs.is-open){ position: relative; z-index: 30; }
.vs-panel{
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 100%; width: max-content; max-width: min(380px, calc(100vw - 40px));
  padding: 8px; border-radius: var(--v-radius-s); border: 1px solid var(--v-edge);
  background: var(--v-fill-opaque); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 var(--v-sheen);
}
[data-theme="light"] .vs-panel{ box-shadow: 0 24px 60px rgba(60,40,10,.16), inset 0 1px 0 var(--v-sheen); }
.vs-list{ list-style: none; margin: 0; padding: 0; max-height: min(52vh, 380px); overflow: auto; overscroll-behavior: contain; display: grid; gap: 4px; }
.vs-option{
  padding: .7rem .9rem; border-radius: 10px; cursor: pointer; font-size: 1rem; line-height: 1.3; color: var(--ink);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
[data-theme="light"] .vs-option{ background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(122,90,24,.1); }
.vs-option:hover, .vs-option.is-active{ background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(223,197,138,.35); }
[data-theme="light"] .vs-option:hover, [data-theme="light"] .vs-option.is-active{ background: rgba(255,255,255,.95); }
.vs-option.is-selected{ color: var(--gold); box-shadow: inset 0 0 0 1px rgba(223,197,138,.45); }
.vs-option.is-placeholder{ color: var(--ink-3); }
.vs-option.is-disabled{ opacity: .45; cursor: default; }
.vs-list::-webkit-scrollbar{ width: 6px; } .vs-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 3px; }
@media (max-width: 760px){ .vs-list{ max-height: 46vh; } .vs-option{ padding: .8rem .9rem; } }

/* ======================= 12. Page éditoriale simple (Ma méthode) ======================= */
/* Seule page à garder la structure .page-hero + .page-body (le Manifeste est retiré le 16/10). Elle reçoit le même
   habit que À propos : titre et chapeau centrés, puis une carte de verre blanc de 880 px qui tient tout le texte,
   des filets entre les chapitres, les quatre outils en tuiles plates, et une vraie respiration avant le pied de page. */
.page-hero{ padding: clamp(3rem, 6vw, 4.6rem) 0 clamp(1.8rem, 3vw, 2.6rem); border-bottom: 0; text-align: center; }
.page-hero .container.narrow{ max-width: 880px; }
.page-hero .page-title{ margin: 0 auto 1rem; text-wrap: balance; }
.page-hero .page-lead{ max-width: 54ch; margin: 0 auto; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.page-body{ max-width: none; padding: 0 0 clamp(4.5rem, 9vw, 8rem); }
.page-body > .container.narrow{
  max-width: 880px; padding: clamp(28px, 4vw, 56px) clamp(22px, 5vw, 72px) clamp(32px, 4.5vw, 60px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.page-body p, .page-body li{ font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); max-width: 72ch; }
.page-body p{ margin: 0 0 1.1rem; }
.page-body > .container > p:first-child{ font-size: 1.2rem; line-height: 1.6; color: var(--ink); }
.page-body h2{
  font-size: clamp(1.55rem, 2.3vw, 1.95rem); line-height: 1.15; margin: 2.4rem 0 .9rem; padding-top: 1.7rem;
  border-top: 1px solid var(--line); text-wrap: balance;
}
.page-body h2 + p{ margin-top: 0; }
.page-body > .container > *:last-child{ margin-bottom: 0; }
/* Les outils : quatre tuiles plates dans la carte (pas de second flou, règle « verre dans verre »). */
.page-body ul{ list-style: none; margin: 1.3rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; }
.page-body ul li{
  max-width: none; margin: 0; padding: 1.1rem 1.25rem 1.2rem; border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(122,90,24,.10);
  font-size: 1rem; line-height: 1.62;
}
[data-theme="dark"] .page-body ul li{ background: var(--v-fill-flat); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.page-body ul li strong{ display: block; margin-bottom: .35rem; font-family: var(--font-serif, 'Fraunces', serif); font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
@media (min-width: 1500px){
  .page-hero .container.narrow, .page-body > .container.narrow{ max-width: 960px; }
  .page-body p, .page-body li{ font-size: 1.125rem; }
}
@media (max-width: 760px){
  .page-hero{ padding: 2.2rem 0 1.4rem; }
  .page-hero .page-lead{ font-size: 1.05rem; }
  .page-body{ padding-bottom: 3.5rem; }
  .page-body > .container.narrow{ width: calc(100% - 24px); margin-inline: auto; padding: 24px 18px 28px; border-radius: var(--v-radius); }
  .page-body > .container > p:first-child{ font-size: 1.1rem; }
  .page-body h2{ margin-top: 2rem; padding-top: 1.4rem; }
  .page-body ul{ grid-template-columns: 1fr; }
}

/* ======================= 13. Encart d'inscription sous le thème gratuit (#signup-cta) ======================= */
/* Les styles d'origine dépendaient de body.cine-calc, que Mon thème ne porte plus depuis le 13/10 : le bouton
   « Créer mon compte gratuit » s'affichait comme un simple lien de 22 px. Ici, sans dépendance au body. */
.cine-unlock{ max-width: 680px; margin: 2.2rem auto 0; }
.cine-unlock[hidden]{ display: none; }
.cine-unlock-inner{
  position: relative; text-align: center; padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 3vw, 2.2rem);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid rgba(223,197,138,.26);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.cine-unlock-icon{ font-size: 1.6rem; color: var(--gold); margin-bottom: .5rem; }
.cine-unlock-title{ font-family: var(--font-serif, 'Fraunces', serif); font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.3; margin: 0 auto 1.5rem; max-width: 34ch; text-wrap: balance; }
.cine-unlock-btn, a.cine-unlock-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 1.9rem;
  border-radius: 999px; font-weight: 600; font-size: 1.02rem; text-decoration: none; color: #1a1b2e;
  background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45);
  box-shadow: 0 8px 28px rgba(226,175,78,.25), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .2s, box-shadow .25s;
}
.cine-unlock-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 34px rgba(226,175,78,.35), inset 0 1px 0 rgba(255,255,255,.55); }
.cine-unlock-btn span{ color: inherit; }
.cine-unlock-note{ margin: 1.1rem auto 0; font-size: .92rem; line-height: 1.5; color: var(--ink-3); max-width: 48ch; }

/* ======================= 14. Garde-fous relevés à l'audit du 16/10 ======================= */
/* Fiches célébrités : l'image de la photo est posée vide et [hidden] tant qu'aucune photo n'existe, mais
   `.celeb-photo-wrap img{display:block}` (style de la page) l'emportait : l'image cassée et son texte de
   remplacement « Photo de … » s'affichaient par-dessus l'initiale. */
.celeb-photo-wrap img[hidden]{ display: none !important; }
/* Zéro eyebrow : deux étiquettes que layout.css réaffichait au-dessus de titres (À propos « 04 / Mon parcours », cartes Palazzo). */
.parcours-card .meta-label, .palazzo-card-body .meta-label{ display: none; }

/* ======================= 15. Cartes éditoriales et fins de page (audit du 16/10) ======================= */
/* Un seul habit pour les pages de lecture restées nues : la carte de Ma méthode (880 px, 960 au-delà de 1500 px,
   72 caractères, filets entre chapitres) et une vraie clôture avant le pied de page. Aucun texte touché. */
.v-carte-edito, article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body,
main#main > article.container.narrow, .checkout-section > .container.narrow, .pa-edito > .container.narrow{
  box-sizing: border-box; max-width: 880px !important; margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 5vw, 72px) clamp(32px, 4.5vw, 60px) !important;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
@media (min-width: 1500px){
  article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body,
  main#main > article.container.narrow, .pa-edito > .container.narrow{ max-width: 960px !important; }
}
/* Le texte dans ces cartes : 17 px, 72 caractères, chapitres séparés d'un filet. */
:is(article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body, main#main > article.container.narrow, .pa-edito > .container.narrow) :is(p, li){
  font-size: 1.0625rem; line-height: 1.72; max-width: 72ch;
}
:is(article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body, main#main > article.container.narrow) h2{
  font-size: clamp(1.55rem, 2.3vw, 1.95rem) !important; line-height: 1.15; margin: 2.4rem 0 .9rem !important; padding-top: 1.7rem;
  border-top: 1px solid var(--line); text-wrap: balance;
}
:is(article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body, main#main > article.container.narrow) h2:first-child,
:is(article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body) > *:first-child h2{ margin-top: 0 !important; padding-top: 0; border-top: 0; }
:is(article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body, main#main > article.container.narrow) h3{ font-size: 1.3rem; margin: 1.8rem 0 .5rem; }
/* Transits 2026 : l'article porte lui-même ses marges, on les remplace par les nôtres ; ses sections respirent. */
main#main > article.container.narrow{ margin-top: clamp(2rem, 4vw, 3.5rem) !important; margin-bottom: clamp(4.5rem, 9vw, 8rem) !important; }
main#main > article.container.narrow > section{ margin-bottom: 0 !important; }
main#main > article.container.narrow > section > h2{ font-size: clamp(1.55rem, 2.3vw, 1.95rem) !important; }
main#main > article.container.narrow > section:last-child{ margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
/* Pages juridiques : l'en-tête se centre, sans le filet pleine largeur ; la carte suit. */
.page-header{ border-bottom: 0; text-align: center; padding: clamp(3rem, 6vw, 4.6rem) 0 clamp(1.4rem, 2.6vw, 2.2rem); }
.page-header .container{ max-width: 880px; }
.page-header h1{ margin: 0 auto 1rem; text-wrap: balance; }
.page-header p{ max-width: 54ch; margin: 0 auto; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
main > .page-header ~ section > .container.narrow{ max-width: 1080px; }
main > .page-header ~ section:last-of-type{ padding-bottom: clamp(4.5rem, 9vw, 8rem); }
/* Calcul de thème astral et articles : la section d'appel finale devient une carte centrée, loin du pied de page. */
section#cta, section#article-cta{ padding-bottom: clamp(4.5rem, 9vw, 8rem) !important; border-top: 0 !important; }
section#cta > .container.narrow, section#article-cta > .container.narrow{
  box-sizing: border-box; max-width: 760px; text-align: center; padding: clamp(28px, 4vw, 48px) clamp(22px, 5vw, 56px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
section#cta .section-head, section#article-cta .section-head{ display: block; margin-bottom: .6rem; }
section#cta h2, section#article-cta h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 .8rem; text-wrap: balance; }
section#cta .lead, section#article-cta .lead{ max-width: 52ch; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }
section#cta .article-cta-row, section#article-cta .article-cta-row{ justify-content: center !important; margin-top: 1.6rem !important; }
.article-full + * , #article-cta{ margin-top: clamp(2rem, 4vw, 3rem); }
.article-full .article-back, .article-back{ margin-top: 1.4rem; }
/* Potentiel amoureux : le bloc « Comprendre ce calcul » en carte, loin du pied de page. */
.pa-edito{ padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(4.5rem, 9vw, 8rem) !important; }
.pa-edito-title{ font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0 0 1.4rem; text-align: center; text-wrap: balance; }
.pa-edito-block{ padding: 1.5rem 0 0; margin: 1.4rem 0 0; border-top: 1px solid var(--line); background: transparent; box-shadow: none; }
.pa-edito-block h3{ font-size: 1.3rem; margin: 0 0 .5rem; }
.pa-edito-cta{ margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.7; max-width: 72ch; }
/* Rangées de boutons de fin de résultat : même respiration partout, et le résultat garde de l'air avant le pied. */
.trinite-actions, .pa-result-actions{ margin: 2.6rem auto 1.1rem; }
.trinite-results, .ra-results, .tla-results, .bsm-results, .syn-result, .fam-result, .cma-result, .rs-results{ padding-bottom: clamp(3.5rem, 7vw, 6rem) !important; }
/* Rapport à l'argent : le bandeau mantra ne garde que la ligne d'élément quand le texte est retiré ; qu'elle soit lisible. */
.ra-mantra-element{ font-size: 1rem !important; line-height: 1.5; }
.ra-mantra:has(> #ra-mantra-text[hidden]){ padding: 1rem 1.3rem; }
/* Index des Sabians : les 360 rangées deviennent des tuiles, et la page respire avant le pied. */
#sb-root .grp{ margin-bottom: 1.6rem; }
#sb-root .grp h3{ font-family: var(--font-serif, 'Fraunces', serif); font-size: 1.35rem; margin: 1.6rem 0 .7rem; }
#sb-root .sym-row{
  grid-template-columns: 56px 1fr; gap: .8rem; align-items: baseline; padding: .75rem 1rem; margin-bottom: 6px; border: 0 !important; border-radius: 12px;
  background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(122,90,24,.10);
  transition: background .2s, box-shadow .2s;
}
#sb-root .sym-row:hover{ background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(122,90,24,.22); }
#sb-root .sym-row .d{ font-size: .95rem; color: var(--gold); padding-top: 0; }
#sb-root .sym-row .t{ font-size: 1.0625rem; line-height: 1.5; }
#sb-root .wrap{ padding-bottom: clamp(4rem, 8vw, 7rem); }
#sb-root .back{ margin: 2rem 0 0; }
/* Liste des Écrits : chaque rangée devient une tuile, les métadonnées redeviennent lisibles. */
.articles-list .article-row{
  padding: 1.4rem 1.5rem !important; margin-bottom: 12px; border: 0 !important; border-radius: 16px;
  background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(122,90,24,.10);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.articles-list .article-row:hover{ background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(122,90,24,.22); transform: translateY(-2px); }
.articles-list .article-row .article-num, .articles-list .article-row .article-tag, .articles-list .article-row .article-date{ font-size: .88rem; letter-spacing: 0; text-transform: none; }
.articles-list .article-row .article-body h3{ font-weight: 400; font-size: 1.45rem; }
.articles-list .article-row .article-body p{ font-size: 1rem; line-height: 1.6; }
.articles-main{ padding-bottom: clamp(3rem, 6vw, 5rem); }
/* Palazzo Premium : le parcours d'essai dans une carte. */
.checkout-section{ padding-bottom: clamp(4rem, 8vw, 7rem); }
.checkout-section > .container.narrow{ max-width: 720px !important; }
@media (max-width: 760px){
  article.grimoire-detail-body[style], .article-full, main > section > .container.narrow > .article-body,
  main#main > article.container.narrow, .checkout-section > .container.narrow, .pa-edito > .container.narrow,
  section#cta > .container.narrow, section#article-cta > .container.narrow{ width: calc(100% - 24px); padding: 24px 18px 28px !important; }
  .page-header{ padding: 2.2rem 0 1.2rem; }
  .articles-list .article-row{ padding: 1.1rem 1.1rem !important; }
}

/* ======================= 16. Le lecteur du Grimoire (#ga2 .reader) ======================= */
/* La vue « Votre sélection » de grimoire.html : coffre en verre B de 1 040 px, phrase clé en pierre de verre, chapitres
   avec glyphe, question en tuile plate, synthèse dorée ; même dessin en verre blanc pour la lecture ivoire. Les règles
   sont préfixées de `html` pour passer devant les feuilles inscrites dans le corps de la page. Aucun texte touché. */
html #main #ga2 .reader{background: transparent; padding-top: 10px; }
html #main #ga2 .reader-toolbar{max-width: 1040px; margin: 0 auto 6px; display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; }
html #main #ga2 .reader-toolbar button{min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: .95rem; font-weight: 500; color: #f1e3bd; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.1); transition: background .25s, box-shadow .25s; }
html #main #ga2 .reader-toolbar button:hover{background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(223,197,138,.4); }
html #main #ga2 .reader-inner{max-width: 1040px; margin: 10px auto 40px; padding: clamp(28px,4vw,56px) clamp(22px,5vw,72px) clamp(32px,4.5vw,60px); border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045)); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 70px rgba(0,0,0,.45); }
html #main #ga2 .reader .eyebrow{display: none; }
html #main #ga2 .reader #g-reading-title{font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; color: #f6ecd5; margin: 0 0 14px; outline: none; text-wrap: balance; }
html #main #ga2 .reader .reader-inner > .note{font-size: 1.05rem; line-height: 1.6; color: #cfc6b4; max-width: 60ch; margin: 0 0 22px; }
html #main #ga2 .reader #g-chapters{display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
html #main #ga2 .reader #g-chapters button{min-height: 46px; padding: 0 18px; border-radius: 12px; font-size: 1rem; font-weight: 500; color: #f0e4c6; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.08); transition: background .25s, box-shadow .25s, transform .25s; }
html #main #ga2 .reader #g-chapters button:hover{background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(223,197,138,.4), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(-1px); }
html #main #ga2 .reader #g-text > article{padding: 34px 0 30px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
html #main #ga2 .reader #g-text > article:first-child{padding-top: 6px; border-top: 0; }
html #main #ga2 .reader #g-text > article > h2{font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1.15; color: #f6ecd5; margin: 0 0 18px; }
html #main #ga2 .reader #g-text > article > blockquote{position: relative; max-width: none; margin: 4px 0 30px; padding: 28px 34px 28px 34px; border: 0; border-radius: 18px; background: linear-gradient(120deg, rgba(223,197,138,.16) 0%, rgba(255,255,255,.05) 48%, rgba(72,92,205,.14) 100%); box-shadow: inset 0 0 0 1px rgba(223,197,138,.30), inset 0 1px 0 rgba(255,255,255,.16), 0 18px 48px rgba(0,0,0,.26); font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.42; letter-spacing: -.004em; color: #fbf3df; text-wrap: pretty; }
html #main #ga2 .reader #g-text > article > blockquote::before{content: ''; position: absolute; left: 34px; top: 0; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #e6c98a, rgba(230,201,138,0)); }
html #main #ga2 .reader #g-text > article > blockquote::after{content: ''; position: absolute; right: 22px; bottom: 18px; width: 10px; height: 10px; transform: rotate(45deg); background: rgba(223,197,138,.55); box-shadow: 0 0 10px rgba(223,197,138,.4); }
html #main #ga2 .reader .lecture-prose{font-size: 1.0625rem !important; line-height: 1.72 !important; max-width: 68ch; margin: 0; }
html #main #ga2 .reader .lecture-prose p, html #main #ga2 .reader .reading-development p{font-size: 1.0625rem; line-height: 1.72 !important; color: #e9e1d1; margin: 0 0 1.1em !important; max-width: 68ch; }
html #main #ga2 .reader .lecture-prose h3, html #main #ga2 .reader .reading-development > h3{font-family: 'Fraunces', serif !important; font-weight: 500; font-size: 1.32rem !important; line-height: 1.3 !important; color: #f6ecd5; margin: 2rem 0 .55rem !important; }
html #main #ga2 .reader .lecture-prose h3:first-child{margin-top: .2rem !important; }
html #main #ga2 .reader .reading-development{margin-top: 10px; }
html #main #ga2 .reader aside.reading-question{margin: 26px 0 6px; padding: 20px 24px 22px; border-radius: 14px; max-width: 68ch; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.08); }
html #main #ga2 .reader aside.reading-question h3{font-family: 'Hanken Grotesk', system-ui, sans-serif !important; font-weight: 500; font-size: .98rem !important; color: #cfb77c; margin: 0 0 8px !important; }
html #main #ga2 .reader aside.reading-question p{font-family: 'Fraunces', serif; font-size: 1.28rem; line-height: 1.45; color: #f6ecd5; margin: 0 !important; }
html #main #ga2 .reader .reading-synthesis{margin: 34px 0 10px; padding: 30px 34px 32px; border-radius: 18px; background: linear-gradient(135deg, rgba(223,197,138,.12), rgba(223,197,138,.04) 60%); box-shadow: inset 0 0 0 1px rgba(223,197,138,.34), inset 0 1px 0 rgba(255,255,255,.14); }
html #main #ga2 .reader .reading-synthesis h2{font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.7rem; color: #e6c98a; margin: 0 0 12px; }
html #main #ga2 .reader .reading-synthesis p{font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(1.2rem,1.6vw,1.4rem); line-height: 1.5; color: #fbf3df; max-width: 60ch; margin: 0; }
html #main #ga2 .reader .suite-next{display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
html #main #ga2 .reader .suite-next button{min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 1rem; color: #f1e3bd; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12); }
html #main #ga2 .reader .suite-next button:first-child{color: #1a1b2e; background: linear-gradient(110deg,#fae5ac,#e6b660 65%,#ca8f45); box-shadow: 0 8px 28px rgba(226,175,78,.25), inset 0 1px 0 rgba(255,255,255,.55); }
html #main #ga2 .reader.night .reader-inner{background: rgba(255,255,255,.62); border-color: rgba(122,90,24,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 50px rgba(60,40,10,.10); }
html #main #ga2 .reader.night .reader-toolbar button, html #main #ga2 .reader.night #g-chapters button{color: #2a2014; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(122,90,24,.16); }
html #main #ga2 .reader.night #g-reading-title, html #main #ga2 .reader.night #g-text > article > h2, html #main #ga2 .reader.night .lecture-prose h3, html #main #ga2 .reader.night .reading-development > h3, html #main #ga2 .reader.night aside.reading-question p{color: #1f1a12; }
html #main #ga2 .reader.night .reader-inner > .note, html #main #ga2 .reader.night .lecture-prose p, html #main #ga2 .reader.night .reading-development p{color: #4a4336; }
html #main #ga2 .reader.night #g-text > article{border-top-color: rgba(122,90,24,.14); }
html #main #ga2 .reader.night #g-text > article > blockquote{color: #2a2014; background: linear-gradient(120deg, rgba(200,162,92,.18), rgba(255,255,255,.55) 50%, rgba(88,110,200,.10)); box-shadow: inset 0 0 0 1px rgba(122,90,24,.22), inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(60,40,10,.08); }
html #main #ga2 .reader.night aside.reading-question{background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(122,90,24,.12), inset 0 1px 0 rgba(255,255,255,.9); }
html #main #ga2 .reader.night aside.reading-question h3, html #main #ga2 .reader.night .reading-synthesis h2{color: #7a5a18; }
html #main #ga2 .reader.night .reading-synthesis{background: linear-gradient(135deg, rgba(200,162,92,.16), rgba(255,255,255,.4)); box-shadow: inset 0 0 0 1px rgba(122,90,24,.22), inset 0 1px 0 rgba(255,255,255,.9); }
html #main #ga2 .reader.night .reading-synthesis p{color: #1f1a12; }
html #main #ga2 .reader.night .suite-next button{color: #2a2014; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(122,90,24,.16); }
@media (max-width: 760px){
  html #main #ga2 .reader-inner{margin: 8px 0 24px; padding: 22px 16px 26px; border-radius: 18px; }
  html #main #ga2 .reader #g-reading-title{font-size: 1.9rem; }
  html #main #ga2 .reader #g-text > article > blockquote{padding: 22px 18px 24px; font-size: 1.28rem; border-radius: 16px; }
  html #main #ga2 .reader #g-text > article > blockquote::before{left: 18px; }
  html #main #ga2 .reader #g-chapters button{min-height: 42px; padding: 0 14px; font-size: .95rem; }
  html #main #ga2 .reader .reading-synthesis{padding: 22px 18px 24px; }
  html #main #ga2 .reader aside.reading-question{padding: 16px 16px 18px; }
}

/* Glyphe de chapitre et séparateurs du titre : posés par js/verre-grimoire-20261016.js */
html #main #ga2 .reader #g-text > article > h2{ display: flex; align-items: center; gap: 14px; }
html #main #ga2 .reader #g-text > article > h2[data-glyph]::before{
  content: attr(data-glyph); flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-family: 'DejaVu Sans', 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', var(--font-serif, serif); font-weight: 500; font-size: 1.4rem; line-height: 1;
  color: #f1d99f; background: radial-gradient(circle at 35% 30%, rgba(255,236,190,.22), rgba(223,197,138,.06)); box-shadow: inset 0 0 0 1px rgba(223,197,138,.42);
}
html #main #ga2 .reader #g-text > article > h2[data-glyph-kind="maison"]::before{ font-family: var(--font-serif, 'Fraunces', serif); font-size: .95rem; letter-spacing: .02em; }
html #main #ga2 .reader.night #g-text > article > h2[data-glyph]::before{ color: #7a5a18; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(122,90,24,.3); }
html #main #ga2 .reader #g-reading-title .g-part{ white-space: nowrap; }
html #main #ga2 .reader #g-reading-title .g-sep{ color: var(--gold, #e4c07e); margin: 0 .18em; font-weight: 300; }
html #main #ga2 .reader #g-reading-title:focus-visible{ outline: 2px solid rgba(223,197,138,.6); outline-offset: 6px; border-radius: 6px; }

/* ======================= 17. Pages de degré sabian (/sabian/<signe>-<degré>, 360 pages) ======================= */
/* Même gabarit que les pages du Grimoire : la page devient une carte de verre blanc, la citation une pierre de verre,
   la barre résiduelle « Stephane ASTRO » et le mini pied de page disparaissent (le pied commun suit). */
html nav.nv-navbar{ display: none; }
html main.sabian-page + footer[style]{ display: none; }
html main.sabian-page{
  box-sizing: border-box; max-width: 880px; margin: clamp(2rem, 4vw, 3.5rem) auto clamp(4.5rem, 9vw, 8rem);
  padding: clamp(28px, 4vw, 56px) clamp(22px, 5vw, 72px) clamp(32px, 4.5vw, 60px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
@media (min-width: 1500px){ html main.sabian-page{ max-width: 960px; } }
html .sabian-breadcrumb{ font-size: .92rem; margin-bottom: 1.4rem; }
html .sabian-degre{ font-size: 1rem; color: var(--ink-3); margin-bottom: .6rem; }
html .sabian-glyph{ font-size: 3.2rem; color: var(--gold); margin-bottom: .4rem; }
html .sabian-title{ margin: 0 0 1.4rem; }
html .sabian-symbole{
  position: relative; margin: 0 0 1.8rem; padding: 26px 30px; border: 0; border-radius: 18px;
  background: linear-gradient(120deg, rgba(200,162,92,.18), rgba(255,255,255,.6) 50%, rgba(88,110,200,.10));
  box-shadow: inset 0 0 0 1px rgba(122,90,24,.22), inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(60,40,10,.08);
  font-family: var(--font-serif, 'Fraunces', serif); font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.42; color: #2a2014; text-wrap: pretty;
}
html .sabian-symbole::after{ content: ''; position: absolute; right: 20px; bottom: 16px; width: 10px; height: 10px; transform: rotate(45deg); background: rgba(184,146,63,.6); }
html .sabian-meta{ font-size: .95rem; gap: 12px 24px; padding: 14px 0; margin-bottom: 1.8rem; }
html .sabian-body p{ font-size: 1.0625rem; line-height: 1.72; max-width: 72ch; }
html .sabian-body h2{ font-size: clamp(1.45rem, 2.1vw, 1.8rem); margin: 2.2rem 0 .7rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
html .sabian-nav{ margin-top: 2.6rem; padding-top: 1.6rem; font-size: .92rem; }
html .sabian-nav span{ font-size: .85rem; }
html .sabian-nav strong{ font-size: 1.1rem; }
@media (max-width: 760px){
  html main.sabian-page{ width: calc(100% - 24px); margin: 1.2rem auto 3.5rem; padding: 24px 18px 28px; }
  html .sabian-symbole{ padding: 20px 18px 24px; font-size: 1.28rem; }
}

/* ======================= 18. Détails relevés à l'audit : tailles minimales, filets latéraux, tableau mobile ======================= */
/* Aucun texte courant sous 15 px : les notes, indications et accroches remontent à .92 rem. */
.celeb-card-tagline, .wheel-params-hint, .hz-form-hint, .ra-form-note, .input-hint, .pr-price-legal, .cn-hero-foot,
.fam-result-sub, .syn-result-sub, .cma-result-sub, .pl-select-label, .form-hint, .tfc-split-field small{ font-size: .92rem !important; line-height: 1.5; }
.theme-page .wheel-params-hint{ font-size: 1.05rem !important; font-weight: 500; }
/* Fiches célébrités : texte courant à 17 px, tableau des positions et cartes sabians lisibles. */
.chart-table.positions-table{ font-size: 1rem; }
.celeb-birth-strip{ border-left: 0 !important; padding: .9rem 1.1rem; border-radius: var(--v-radius-s); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(122,90,24,.10); }
/* Boussole : les notes d'aspect en tuile plate plutôt qu'en filet latéral. */
.bsm-chapter-aspect-note{ border-left: 0 !important; padding: .9rem 1.1rem; border-radius: var(--v-radius-s); background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="light"] .bsm-chapter-aspect-note{ background: rgba(255,255,255,.55); }
/* Tableaux larges sur mobile : on serre, et le bord droit s'estompe pour dire qu'il y a une suite. */
@media (max-width: 480px){
  .table-scroll{ -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
  .table-scroll table{ font-size: .9rem; }
  .table-scroll th, .table-scroll td{ padding: .45rem .4rem; }
}

/* ======================= 19. Symboles sabians : la carte de la Terre (17/10/2026) ======================= */
.sabian-card-note{ margin: 0 0 .8rem; font-size: .98rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.sabian-card.sabian-card-terre{ box-shadow: inset 0 0 0 1px rgba(223,197,138,.34), inset 0 1px 0 rgba(255,255,255,.1); }
[data-theme="light"] .sabian-card.sabian-card-terre{ box-shadow: inset 0 0 0 1px rgba(122,90,24,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.sabian-card-terre .sabian-card-sym{ color: #7fb06a; }

/* ======================= 20. Mon thème, espace connecté : en-tête du thème (17/10/2026) ======================= */
/* L'espace de travail (theme-workspace.js, 14/10) datait d'avant le verre : titre nu, actions en liens soulignés,
   trinité restée sous le formulaire. Ici : carte d'identité en verre (nom, date · heure · lieu, trinité), puis les
   quatre actions en boutons séparés et centrés. Aucun texte modifié. */
#result-full{ scroll-margin-top: 84px; }
#result-section:has(#result-full .tw-shell) .result-preview-wrap{ display: none; }
#calculator-block .tw-shell .tw-identity{
  margin: 0 0 18px; padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px); text-align: center;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
#calculator-block .tw-shell .tw-identity h2{ text-align: center; margin: 0 0 10px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); text-wrap: balance; }
#calculator-block .tw-shell .tw-identity > p{ max-width: 62ch; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
#calculator-block .tw-shell .tw-identity .solar-chart-banner{ margin: 18px auto 0; max-width: 62ch; text-align: left; }
#calculator-block .tw-shell .tw-trinity{ margin: 22px auto 0; max-width: 760px; }
#calculator-block .tw-shell .tw-trinity .big-3{
  margin: 0; border: 0; gap: 10px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#calculator-block .tw-shell .tw-trinity .big-3-item{
  border: 0; padding: 18px 12px 16px; gap: .35rem; border-radius: var(--v-radius-s);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="light"] #calculator-block .tw-shell .tw-trinity .big-3-item{ background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(122,90,24,.12); }
#calculator-block .tw-shell .tw-trinity .big-3-symbol{ font-size: 1.9rem; margin-bottom: .2rem; }
#calculator-block .tw-shell .tw-trinity .big-3-label{ font-size: .82rem; }
#calculator-block .tw-shell .tw-trinity .big-3-value{ font-size: 1.3rem; }
#calculator-block .tw-shell .tw-trinity .big-3-house{ font-size: .9rem; color: var(--ink-3); }
/* Les quatre actions : boutons séparés, centrés ; la synthèse en or */
#calculator-block .tw-shell .tw-actions{ justify-content: center; gap: 12px; padding: 0 0 28px; }
#calculator-block .tw-shell .tw-actions > button, #calculator-block .tw-shell .tw-actions > a, #calculator-block .tw-shell .tw-save > summary{
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; margin: 0;
  border-radius: 999px; border: 1px solid var(--v-edge); background: rgba(255,255,255,.05); color: var(--ink);
  font: 500 .98rem/1.2 var(--font-body); text-decoration: none; letter-spacing: 0; cursor: pointer; list-style: none;
  transition: background .2s, border-color .2s, transform .2s;
}
#calculator-block .tw-shell .tw-actions > button:hover, #calculator-block .tw-shell .tw-actions > a:hover, #calculator-block .tw-shell .tw-save > summary:hover{ background: rgba(255,255,255,.1); border-color: rgba(223,197,138,.45); transform: translateY(-1px); }
[data-theme="light"] #calculator-block .tw-shell .tw-actions > button, [data-theme="light"] #calculator-block .tw-shell .tw-actions > a, [data-theme="light"] #calculator-block .tw-shell .tw-save > summary{ background: rgba(255,255,255,.6); }
#calculator-block .tw-shell .tw-save > summary::before, #calculator-block .tw-shell .tw-save > summary::after{ content: none; display: none; }
#calculator-block .tw-shell .tw-save > summary::-webkit-details-marker{ display: none; }
#calculator-block .tw-shell .tw-save{ display: contents; }
#calculator-block .tw-shell .tw-save[open]{ display: flex; flex-direction: column; align-items: center; width: 100%; order: 9; }
#calculator-block .tw-shell .tw-save[open] > summary{ margin: 4px auto 0; }
#calculator-block .tw-shell .tw-save[open] #save-chart-box{ width: 100%; }
#calculator-block .tw-shell .tw-actions #btn-download-synthese{
  border-color: transparent; color: #1a1b2e; font-weight: 600;
  background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45);
  box-shadow: 0 8px 24px rgba(226,175,78,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
#calculator-block .tw-shell .tw-actions #btn-download-synthese:hover{ background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45); box-shadow: 0 12px 30px rgba(226,175,78,.32), inset 0 1px 0 rgba(255,255,255,.55); }
#calculator-block .tw-shell .tw-actions #btn-download-synthese *{ color: inherit; }
@media (max-width: 640px){
  #calculator-block .tw-shell .tw-trinity .big-3{ grid-template-columns: 1fr; }
  #calculator-block .tw-shell .tw-trinity .big-3-item{ flex-direction: row; justify-content: space-between; text-align: left; padding: 12px 16px; }
  #calculator-block .tw-shell .tw-trinity .big-3-symbol{ margin: 0; font-size: 1.5rem; }
  #calculator-block .tw-shell .tw-actions > button, #calculator-block .tw-shell .tw-actions > a, #calculator-block .tw-shell .tw-save > summary{ flex: 1 1 calc(50% - 6px); }
}

/* ======================= 21. Mon thème : réglages d'affichage et transits du jour (17/10/2026) ======================= */
/* Réglages groupés par sujet : nœuds (affichage + aspects), Lilith (trois variantes + aspects), aspects mineurs.
   Réglage coché : le même or que le bouton « Télécharger la synthèse », encre sombre (astro.css force déjà l'encre
   sombre sur une pastille cochée ; l'espace du thème lui donnait un fond à peine teinté, d'où un texte noir sur sombre). */
#calculator-block .wheel-params-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
#calculator-block .param-group{ display: grid; gap: 8px; align-content: stretch; min-width: 0; }
#calculator-block .param-group-lilith{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#calculator-block .param-toggle-stack{ display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; min-width: 0; }
#calculator-block .tw-shell .param-toggle, #calculator-block .wheel-params .param-toggle{
  display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--v-edge); background: rgba(255,255,255,.04); color: var(--ink); font-size: .95rem; line-height: 1.35;
  transition: background .2s, border-color .2s;
}
#calculator-block .wheel-params .param-toggle.param-toggle-tall{ align-items: flex-start; padding-top: 12px; }
#calculator-block .wheel-params .param-toggle:hover{ background: rgba(255,255,255,.08); border-color: rgba(223,197,138,.4); }
#calculator-block .wheel-params .param-toggle input{ width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--gold); }
#calculator-block .wheel-params .param-toggle.param-toggle-tall input{ margin-top: 2px; }
#calculator-block .wheel-params .param-toggle:has(input:checked){
  background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45); border-color: transparent; color: #1a1b2e;
  box-shadow: 0 6px 18px rgba(226,175,78,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
#calculator-block .wheel-params .param-toggle:has(input:checked) *{ color: #1a1b2e; }
#calculator-block .wheel-params .param-toggle:has(input:checked) input{ accent-color: #1a1b2e; }
[data-theme="light"] #calculator-block .wheel-params .param-toggle{ background: rgba(255,255,255,.55); }
@media (max-width: 900px){
  #calculator-block .wheel-params-grid{ grid-template-columns: 1fr; }
  #calculator-block .param-group-lilith{ grid-template-columns: 1fr; }
  #calculator-block .param-toggle-stack{ grid-template-rows: none; }
}
/* Dominantes : en-tête centré, le lien de méthode sous la phrase */
#calculator-block .tw-shell .dominantes-head{ align-items: center; text-align: center; max-width: none; }
#calculator-block .tw-shell .dominantes-head h3{ text-align: center; }
#calculator-block .tw-shell .dominantes-head p, #calculator-block .tw-shell .dominantes-method{ max-width: none; text-align: center; text-wrap: balance; margin: 0 auto; }
#calculator-block .tw-shell .dominantes-method{ font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
#calculator-block .tw-shell .dominantes-method a{ display: block; margin-top: .45rem; }
/* Transits du jour : toujours visibles, en carte de verre */
#calculator-block .tw-shell .tw-transits-card{
  margin: 28px 0; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
#calculator-block .tw-shell .tw-transits-card .transits-toggle-box{ margin: 0; padding: 0; border: 0; background: none; max-width: none; }
#calculator-block .tw-shell .tw-transits-card .transits-toggle-head h3{ margin: 0 0 .4rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
#calculator-block .tw-shell .tw-transits-card .transits-toggle-desc{ margin: 0; max-width: 60ch; color: var(--ink-2); }
#calculator-block .tw-shell .tw-transits-card .transits-toggle-btn{ border-radius: 999px; min-height: 46px; padding: 0 20px; }
#calculator-block .tw-shell .tw-transits-card .transits-active{ border-top: 1px solid var(--line); }
/* Dominantes : le filet d'ouverture du bloc passait dans le titre, le bloc étant désormais collé à la carte des transits. */
#calculator-block .tw-shell .dominantes-panel{ padding-top: 22px; }
/* Thème calculé ou profil chargé : le titre « Calculez votre thème de naissance », son chapeau et l'encart d'inscription
   (session connectée, espace monté) s'effacent ; la page commence sur le thème. Le formulaire revient par « Calculer un nouveau thème ». */
#calculator-block:has(> #form-section.is-computed) > h1, #calculator-block:has(> #form-section.is-computed) > .lead{ display: none; }
#result-section:has(#result-full .tw-shell) #signup-cta{ display: none; }

/* ======================= 22. Astrologie médicale : le panneau de lecture en verre (17/10/2026) ======================= */
/* La page du 24/09 posait ses blocs nus avec sa propre feuille (homme-zodiacal.css). Ici : formulaire, lectures et
   dépliants dans la grammaire du site (verre blanc sur la crème, verre B en nuit), un seul « + » sur les dépliants,
   méta des dépliants sous le titre et non sur une ligne orpheline. Aucun texte modifié. */
.hz-panel .hz-form, .hz-panel .hz-card, .hz-panel .hz-lecture-corps.is-vide{
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.hz-panel .hz-form{ padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px); }
.hz-panel .hz-card{ padding: clamp(22px, 3vw, 36px) clamp(20px, 3.2vw, 40px); margin: 0 0 18px; }
.hz-panel .hz-card > :last-child{ margin-bottom: 0; }
.hz-panel .hz-card .hz-lecture-h3{ margin-top: 0; }
.hz-panel .hz-card-head .hz-lecture-h2{ margin-bottom: .8rem; }
.hz-panel .hz-card-head .hz-lecture-meta{ margin: 0 0 1rem; }
.hz-panel .hz-lecture-corps.is-vide{ padding: clamp(22px, 3vw, 36px); }
.hz-panel .hz-lecture-corps p{ max-width: 72ch; margin-left: auto; margin-right: auto; }
.hz-panel .hz-lecture-ouverture p:first-child{ font-size: 1.12rem; }
/* la synthèse : tuile plate dans la carte d'en-tête ; absente, rien ne reste (les règles éditoriales peuvent la vider) */
.hz-panel .hz-synthese{ margin: 0; padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.4vw, 26px); border: 0; border-radius: var(--v-radius-s); background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(122,90,24,.10); }
[data-theme="dark"] .hz-panel .hz-synthese{ background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
.hz-panel .hz-synthese:not(:has(p:not([hidden]))){ display: none; }
.hz-panel .hz-memo{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 1.2rem; }
/* dépliants en tuiles : glyphe, titre, méta dessous, un seul signe à droite */
.hz-panel .hz-dets{ display: grid; gap: 8px; }
.hz-panel .hz-det{ border: 0; padding: 0; border-radius: var(--v-radius-s); background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(122,90,24,.10); }
[data-theme="dark"] .hz-panel .hz-det{ background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
.hz-panel .hz-dets .hz-det:last-child{ border-bottom: 0; }
.hz-panel .hz-det > summary{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; align-items: center;
  padding: .85rem 1rem; font-size: 1rem; color: var(--ink); list-style: none;
}
.hz-panel .hz-det > summary::before{ content: none; display: none; }
.hz-panel .hz-det > summary::after{ grid-column: 3; grid-row: 1 / span 2; font-size: 1.4rem; }
.hz-panel .hz-det > summary .hz-det-g{ grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 1.25rem; }
.hz-panel .hz-det > summary .hz-det-meta{ grid-column: 2; grid-row: 2; margin: 2px 0 0; flex: none; font-size: .86rem; }
.hz-panel .hz-det > summary:not(:has(.hz-det-g)) .hz-det-meta{ grid-column: 1 / 3; }
.hz-panel .hz-det[open] > summary{ color: var(--gold); }
.hz-panel .hz-det-body{ padding: 0 1rem 1rem; }
.hz-panel .hz-det-body p{ margin-left: 0; margin-right: 0; }
.hz-panel .hz-det > p{ margin: 0; padding: 0 1rem 1rem; }
/* zones et boutons : même tuile */
.hz-panel .hz-zone-btn{ border: 0; border-radius: var(--v-radius-s); background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(122,90,24,.10); }
[data-theme="dark"] .hz-panel .hz-zone-btn{ background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
.hz-panel .hz-zone-btn:hover, .hz-panel .hz-zone-btn:focus-visible{ box-shadow: inset 0 0 0 1px var(--gold); background: rgba(255,255,255,.6); }
.hz-panel .hz-zone-btn-t small{ font-size: .86rem; }
.hz-panel .hz-lecture-meta, .hz-panel .hz-centre-note, .hz-panel .hz-note, .hz-panel .hz-temp-note{ font-size: .95rem; }
.hz-panel .hz-note{ margin: 0 auto 1.2rem; max-width: 62ch; }
.hz-panel .hz-avert{ border-top: 0; max-width: 72ch; margin: 1.6rem auto 0; text-align: center; font-size: .95rem; }
.hz-panel .hz-actions{ margin: 1.6rem 0 0; }
.hz-panel .hz-btn{ min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; font-size: .95rem; }
.hz-panel .hz-btn:not(.hz-btn-quiet){ background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45); border-color: transparent; color: #1a1b2e; font-weight: 600; box-shadow: 0 8px 24px rgba(226,175,78,.22), inset 0 1px 0 rgba(255,255,255,.55); }
.hz-panel .hz-btn-quiet{ border-color: var(--v-edge); }
.hz-panel .hz-lecture-suite{ margin: 1.2rem 0 0; }
.hz-panel, main#main > section.hz-panel{ padding-bottom: clamp(3.5rem, 7vw, 6rem); }
@media (max-width: 640px){
  .hz-panel .hz-card{ padding: 18px 16px; }
  .hz-panel .hz-det > summary{ padding: .75rem .85rem; }
}
/* badges des planètes sur le corps : fondu seul, l'échelle CSS écraserait leur translation SVG dans certains navigateurs */
.hz-badge{ transform: none !important; }

/* ======================= 23. Mon thème : aide en tête de « Mon portrait » (17/10/2026) ======================= */
#calculator-block .tw-shell .tw-portrait-help{
  margin: 0 0 18px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.8vw, 32px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
#calculator-block .tw-shell .tw-portrait-help h3{ margin: 0 0 .5rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; text-align: left; }
#calculator-block .tw-shell .tw-portrait-help p{ margin: 0; max-width: 72ch; font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); }

/* ======================= 24. Accueil : tailles minimales de lecture (17/10/2026) ======================= */
/* Douze textes de l'accueil restaient sous 15 px (boutons, cartes, prix, puces de choix). Plancher .95 rem. */
.sa-home .sa-btn{ font-size: .95rem; }
.sa-home .sa-card p, .sa-home .sa-cards-outils .sa-card p, .sa-home .sa-reply p{ font-size: .95rem; line-height: 1.6; }
.sa-home .sa-tabs button, .sa-home .sa-chat-choices button{ font-size: .92rem; }
.sa-home .sa-price span{ font-size: .95rem; }
.sa-home .sa-example{ font-size: .82rem; }
.sa-home .fine, .sa-home p.fine, .hp-wl .fine, .hp-wl .fine a{ font-size: .9rem; }
/* Tableau des positions sous 480 px (fiches célébrités, Mon thème) : sans la colonne du glyphe, le nom suffit ; six colonnes tiennent alors dans l'écran. */
@media (max-width: 480px){
  .positions-table .col-sym{ display: none; }
  .positions-table th, .positions-table td{ padding: .4rem .3rem; font-size: .88rem; white-space: nowrap; }
  .positions-table .col-retro{ width: 1.1em; padding-left: 0; padding-right: 0; }
}

/* ======================= 25. Accueil, section finale : le parcours en trois étapes (17/10/2026) ======================= */
.sa-finale .sa-parcours{
  list-style: none; counter-reset: etape; margin: clamp(22px, 3vw, 34px) auto clamp(26px, 3.4vw, 40px); padding: 0; max-width: 980px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left;
}
.sa-finale .sa-parcours li{
  counter-increment: etape; position: relative; margin: 0; padding: 20px 20px 20px 58px;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.sa-finale .sa-parcours li::before{
  content: counter(etape); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-serif); font-size: 1rem; color: #1a1b2e;
  background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45);
}
.sa-finale .sa-parcours h3{ margin: 0 0 .4rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.25; text-align: left; }
.sa-finale .sa-parcours p{ margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink-2); text-align: left; }
.sa-finale .sa-parcours a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px){ .sa-finale .sa-parcours{ grid-template-columns: 1fr; } }

/* ======================= 26. Consultations et tarifs : exemple de synthèse et usages Premium (17/10/2026) ======================= */
.of-exemple{
  margin: clamp(26px, 3.4vw, 44px) auto 0; padding: 0; max-width: 920px;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
.of-exemple > summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.6vw, 30px); font-family: var(--font-sans); font-weight: 500; font-size: 1.02rem; color: var(--gold);
}
.of-exemple > summary::-webkit-details-marker{ display: none; }
.of-exemple > summary::before{ content: none; display: none; }
.of-exemple > summary::after{ content: "+"; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--gold); }
.of-exemple[open] > summary::after{ content: "–"; }
.of-exemple-body{ padding: 0 clamp(18px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px); }
.of-exemple-body h3{ margin: 0 0 .8rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.of-exemple-body p{ max-width: 72ch; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.of-exemple-body p:last-child{ margin-bottom: 0; }
.of-exemple-mention{ padding: .8rem 1rem; border-radius: var(--v-radius-s); background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(122,90,24,.14); color: var(--ink) !important; }
[data-theme="dark"] .of-exemple-mention{ background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.of-exemple-question, .of-exemple-reprendre{ font-family: var(--font-serif); font-size: 1.25rem !important; line-height: 1.45 !important; color: var(--ink) !important; }
.of-exemple-repere{ color: var(--ink-3) !important; font-size: .98rem !important; }
.of-usages{ margin: clamp(22px, 3vw, 36px) 0 clamp(26px, 3.4vw, 40px); }
.of-usages h3{ margin: 0 0 14px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.5rem); text-align: center; }
.of-usages-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.of-usage{ padding: 18px 20px; border-radius: var(--v-radius-s); background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(122,90,24,.12); }
[data-theme="dark"] .of-usage{ background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
.of-usage h4{ margin: 0 0 .4rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.of-usage p{ margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px){ .of-usages-grid{ grid-template-columns: 1fr; } }

/* ======================= 27. Astrologie médicale : tuiles illustrées et fond de page (17/10/2026) ======================= */
/* Quatorze visuels générés dans le style des tuiles de l'accueil (images/grimoire/am), page en thème nuit, fond
   « homme-constellation » très sombre sous la scène. Le texte reste sous l'image, jamais par-dessus. */
html[data-theme="dark"] body:has(.hz-scene) main#main{
  /* la terrasse italienne de l'accueil, de nuit : voile sombre dégradé par-dessus pour que les cartes restent lisibles, balustrade en bas de l'écran */
  background: linear-gradient(180deg, rgba(5,4,13,.9) 0, rgba(5,4,13,.62) 45%, rgba(5,4,13,.3) 100%), url("/images/grimoire/am/fond-terrasse.webp") center bottom / cover no-repeat fixed, #06071a;
}
html[data-theme="dark"] body:has(.hz-scene) .hz-panel, html[data-theme="dark"] body:has(.hz-scene) .grimoire-index-section{ background: transparent; }
html[data-theme="dark"] body:has(.hz-scene) .hz-panel{ background: linear-gradient(180deg, #05040d 0, rgba(5,4,13,0) 240px); }
@media (max-width: 900px){ html[data-theme="dark"] body:has(.hz-scene) main#main{ background-attachment: scroll; } }
body:has(.hz-scene) .grimoire-grid-signes{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; gap: 16px; }
@media (max-width: 1000px){ body:has(.hz-scene) .grimoire-grid-signes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ body:has(.hz-scene) .grimoire-grid-signes{ grid-template-columns: 1fr; } }
.grimoire-card.grimoire-card-visuel{
  padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: center; width: auto; max-width: none; flex: none; min-width: 0;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.grimoire-card.grimoire-card-visuel:hover{ transform: translateY(-3px); border-color: rgba(223,197,138,.5); box-shadow: inset 0 1px 0 var(--v-sheen), 0 18px 40px rgba(0,0,0,.35); }
.grimoire-card-img{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #05040d; }
.grimoire-card-img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.grimoire-card.grimoire-card-visuel:hover .grimoire-card-img img{ transform: scale(1.04); }
.grimoire-card.grimoire-card-visuel .grimoire-card-glyph{ margin: -1.25rem auto 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.35rem; border-radius: 50%; background: rgba(5,4,13,.85); box-shadow: inset 0 0 0 1px rgba(223,197,138,.55); color: var(--gold); position: relative; }
.grimoire-card.grimoire-card-visuel .grimoire-card-name{ margin: .6rem 1rem .3rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.grimoire-card.grimoire-card-visuel .grimoire-card-meta{ margin: 0 1rem .25rem; font-size: .92rem; color: var(--ink-3); }
.grimoire-card.grimoire-card-visuel .grimoire-card-dates{ margin: 0 1rem 1.2rem; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.grimoire-card.grimoire-card-visuel.grimoire-am-card-chapitre .grimoire-card-dates{ padding: 0 .4rem; }
@media (max-width: 460px){ .grimoire-card.grimoire-card-visuel .grimoire-card-name{ font-size: 1.15rem; } }

/* ======================= 28. Astrologie médicale : les treize articles, visuel en ouverture et terrasse en fond (17/10/2026) ======================= */
html[data-am-visuel] main#main{
  background: linear-gradient(180deg, rgba(5,4,13,.92) 0, rgba(5,4,13,.66) 45%, rgba(5,4,13,.32) 100%), url("/images/grimoire/am/fond-terrasse.webp") center bottom / cover no-repeat fixed, #06071a;
}
@media (max-width: 900px){ html[data-am-visuel] main#main{ background-attachment: scroll; } }
html[data-am-visuel] .am-hero{
  position: relative; margin: 0; height: clamp(300px, 54vh, 620px); overflow: hidden; background: #05040d;
}
html[data-am-visuel] .am-hero img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
html[data-am-visuel] .am-hero::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,13,.35) 0, rgba(5,4,13,0) 30%, rgba(5,4,13,0) 55%, rgba(6,7,26,.92) 100%);
}
html[data-am-visuel] .grimoire-detail-section{ position: relative; padding-top: 0; }
html[data-am-visuel] .grimoire-detail-section > .container{ margin-top: clamp(-120px, -12vh, -60px); position: relative; z-index: 1; }
html[data-am-visuel] .grimoire-breadcrumb{ display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 14px; padding: .4rem 1rem; border-radius: 999px; background: rgba(5,4,13,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(223,197,138,.22); font-size: .9rem; }
html[data-am-visuel] .grimoire-detail-head{
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px); margin: 0 auto 18px; max-width: 880px; text-align: center;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
html[data-am-visuel] .grimoire-detail-glyph{ color: var(--gold); }
html[data-am-visuel] .grimoire-detail-meta{ justify-content: center; }
html[data-am-visuel] .grimoire-detail-nav{ margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1500px){ html[data-am-visuel] .grimoire-detail-head{ max-width: 960px; } }
/* articles médicaux : « Pour lire ce texte » et la navigation précédent / suivant en cartes, comme le reste */
html[data-am-visuel] .grimoire-detail-related{
  max-width: 880px; margin: 18px auto 0; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow);
}
html[data-am-visuel] .grimoire-detail-related h2{ margin: 0 0 .8rem; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
html[data-am-visuel] .grimoire-related-list{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html[data-am-visuel] .grimoire-related-list li{ margin: 0; padding: .75rem 1rem; border-radius: var(--v-radius-s); background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; }
html[data-am-visuel] .grimoire-related-list a{ color: var(--ink); text-decoration: none; }
html[data-am-visuel] .grimoire-related-list a:hover{ color: var(--gold); }
html[data-am-visuel] .grimoire-detail-nav{
  max-width: 880px; margin: 18px auto clamp(3rem, 6vw, 5rem); padding: 10px; border-top: 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
}
html[data-am-visuel] .grimoire-detail-nav a{ display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .95rem; }
html[data-am-visuel] .grimoire-detail-nav a:hover{ background: rgba(255,255,255,.08); color: var(--gold); }
@media (min-width: 1500px){ html[data-am-visuel] .grimoire-detail-related, html[data-am-visuel] .grimoire-detail-nav{ max-width: 960px; } }
html[data-am-visuel] .am-hero img{ object-position: center 36%; }
html[data-am-visuel] .grimoire-breadcrumb{ flex-wrap: wrap; gap: .25rem .45rem; text-align: center; }
html[data-am-visuel] .grimoire-breadcrumb > *{ white-space: nowrap; }
@media (max-width: 640px){
  html[data-am-visuel] .am-hero{ height: clamp(240px, 46vh, 420px); }
  html[data-am-visuel] .am-hero img{ object-position: center 28%; }
  html[data-am-visuel] .grimoire-detail-section > .container{ margin-top: -48px; }
  html[data-am-visuel] .grimoire-breadcrumb{ font-size: .82rem; padding: .3rem .8rem; }
  html[data-am-visuel] .grimoire-breadcrumb > *{ white-space: normal; }
}
@media (max-width: 640px){
  html[data-am-visuel] .grimoire-breadcrumb{ flex-direction: column; align-items: center; gap: .15rem; border-radius: 16px; padding: .5rem .9rem; }
  html[data-am-visuel] .grimoire-breadcrumb-sep{ display: none; }
}
/* L'avertissement des articles médicaux : il était le premier paragraphe nu de la carte (sans la marge des sections,
   en taille de chapeau, avec un filet). Tuile plate dans la marge de la carte, taille courante, sans filet. */
.grimoire-detail-body > .grimoire-am-avert, .parchemin-card > p.grimoire-am-avert{
  margin: clamp(18px, 2.6vw, 28px) clamp(20px, 2.8vw, 36px) 0; padding: .9rem 1.1rem; max-width: none;
  font-style: normal; font-size: .98rem; line-height: 1.6; color: var(--ink-2);
  border: 0; border-radius: var(--v-radius-s); background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="light"] .grimoire-detail-body > .grimoire-am-avert{ background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(122,90,24,.12); }
@media (max-width: 720px){ .grimoire-detail-body > .grimoire-am-avert{ margin: 16px 14px 0; } }

/* ======================= 29. Potentiel amoureux : hiérarchie des aspects sur la roue (18/10/2026) ======================= */
/* Tous les aspects du résultat restent tracés et cliquables ; en mode « principaux », les secondaires (mineurs, angles,
   nœuds, Lune noire) passent en filigrane. La sélection au clic (is-filtered) garde la main. */
.pa-wheel-filter{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 18px; }
.pa-wheel-filter-btn{
  min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--v-edge); background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.pa-wheel-filter-btn:hover{ background: rgba(255,255,255,.1); border-color: rgba(223,197,138,.4); }
.pa-wheel-filter-btn.is-on{ background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45); border-color: transparent; color: #1a1b2e; }
[data-theme="light"] .pa-wheel-filter-btn{ background: rgba(255,255,255,.55); }
.pa-wheel-principal .natal-wheel:not(.is-filtered) line.bi-aspect.bi-secondary{ opacity: .14; }
.pa-wheel-principal .natal-wheel:not(.is-filtered) line.bi-aspect.bi-aspect-shadow.bi-secondary{ opacity: 0; }
.pa-wheel-principal .natal-wheel:not(.is-filtered) circle.bi-aspect-conj.bi-secondary{ opacity: .3; }


/* ======================= 30. Compte : panneau d'administration des règlements (19/10/2026) ======================= */
/* js/payment-admin.js insère #payment-admin pour le seul compte autorisé par le serveur. Carte de verre, formulaire
   en colonne, boutons dorés, liste des 20 derniers règlements. */
#payment-admin{
  margin: 28px auto; max-width: 760px; padding: clamp(18px, 2.6vw, 30px);
  border-radius: var(--v-radius); background: var(--v-fill); border: 1px solid var(--v-edge);
  -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat)); backdrop-filter: blur(var(--v-blur)) saturate(var(--v-sat));
  box-shadow: inset 0 1px 0 var(--v-sheen), var(--v-shadow); color: var(--ink);
}
#payment-admin h2{ margin: 0 0 .4rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
#payment-admin h3{ margin: 1.6rem 0 .6rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; }
#payment-admin > p{ color: var(--ink-2); line-height: 1.6; margin: 0 0 1rem; }
#payment-admin form{ display: grid; gap: 12px; }
#payment-admin form p{ margin: 0; }
#payment-admin label{ display: grid; gap: 6px; font-size: .95rem; color: var(--ink-2); }
#payment-admin label:has(input[type="checkbox"]){ display: flex; align-items: center; gap: 10px; color: var(--ink); }
#payment-admin input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--gold); }
#payment-admin select, #payment-admin input[type="email"], #payment-admin input:not([type]), #payment-admin input[type="url"], #payment-admin input[name="reference"]{
  width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--v-edge); border-radius: 12px;
}
#payment-admin .ia-btn-primary{
  justify-self: start; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  background: linear-gradient(110deg, #fae5ac, #e6b660 65%, #ca8f45); color: #1a1b2e;
}
#payment-admin .ia-btn-primary:disabled{ opacity: .6; cursor: wait; }
#payment-admin [data-payment-feedback]{ min-height: 1.4em; color: var(--gold); }
#payment-admin [data-payment-link]{ margin-bottom: 8px; }
#payment-admin [data-payment-orders]{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#payment-admin [data-payment-orders] li{ padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .92rem; overflow-wrap: anywhere; }
[data-theme="light"] #payment-admin select, [data-theme="light"] #payment-admin input{ background: rgba(255,255,255,.7); }