/* Asteria — les pages qu'on lit (SEO-PLAN1) : une lame, un astre dans un signe ou une maison, un couple de signes,
   un nombre, un animal chinois, et leurs sommaires. Le système de site.css, rien de neuf : la nuit, l'ivoire,
   Instrument Serif pour ce qui se nomme, Geist pour ce qui se lit, des plaques pour ce qui se pose. */

main.atlas { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + var(--s5)); padding-bottom: var(--s7); }

/* ── Le fil d'Ariane ───────────────────────────────────────────────────────────────────────────────────── */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--ink-4); }
.crumbs a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ── La tête : l'objet (la lame, le signe, l'astre) et son nom ─────────────────────────────────────────── */
.atlas-head { display: grid; gap: var(--s6); align-items: center; padding-top: var(--s5); padding-bottom: var(--s6); }
.atlas-head h1 { font-size: clamp(52px, 13vw, 104px); }
.atlas-head h1 .g { font-size: .42em; margin-left: .22em; vertical-align: .32em; color: var(--ivory); opacity: .85; }
.atlas-head .lead { max-width: 34em; }
.atlas-alias { margin: var(--s3) 0 0; font: italic 400 clamp(22px, 5vw, 30px)/1.1 var(--display); color: var(--ink-3); }
.atlas-head.is-hub { padding-bottom: var(--s5); }
.atlas-head.is-hub .pill { margin-top: var(--s5); }

/* la lame : posée droite, un liseré de lumière, une ombre profonde ; son titre (plate.js) écrit par-dessus */
.atlas-card { position: relative; margin: 0 auto; width: min(62vw, 300px); aspect-ratio: var(--r, .5781); border-radius: 14px;
  overflow: hidden; background: var(--night-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .95), 0 18px 60px -30px rgba(200, 210, 255, .25); }
.atlas-card img { width: 100%; height: 100%; object-fit: cover; }
/* l'astre, le signe : la photo de l'app, un médaillon qui se fond dans la nuit */
.atlas-art { position: relative; margin: 0 auto; width: min(78vw, 380px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.atlas-art img { width: 100%; height: 100%; object-fit: cover; }
.atlas-pair { position: relative; margin: 0 auto; display: flex; justify-content: center; width: min(92vw, 460px); }
.atlas-pair img { width: 58%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.atlas-pair img + img { margin-left: -16%; }

@media (min-width: 900px) {
  .atlas-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); padding-top: var(--s6); }
  .atlas-head.is-hub { grid-template-columns: minmax(0, 1fr); }
  .atlas-card { width: 340px; margin: 0; justify-self: end; }
  .atlas-art { width: 420px; justify-self: end; margin: 0; }
  .atlas-pair { width: 480px; justify-self: end; margin: 0; }
}

/* la phrase à garder : la citation de la lame, et sa voix */
.atlas-keep { margin: var(--s6) 0 0; padding: 0; }
.atlas-keep figcaption { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.atlas-keep blockquote { margin: 0; font: italic 400 clamp(24px, 5.6vw, 34px)/1.22 var(--quote); color: var(--ink); text-wrap: pretty; max-width: 24em; }
.atlas-keep .listen { margin-top: var(--s5); }

/* ── En bref ──────────────────────────────────────────────────────────────────────────────────────────── */
.atlas-short { margin-bottom: var(--s6); }
.atlas-short .plaque { padding: var(--s5) var(--s5) var(--s4); }
.atlas-short h2 { margin-bottom: var(--s4); }
.atlas-short dl { margin: 0; display: grid; gap: 0; }
.atlas-short dl > div { padding: var(--s4) 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.atlas-short dl > div:first-child { border-top: 0; padding-top: 0; }
.atlas-short dt { font: italic 400 22px/1.1 var(--display); color: var(--ivory); }
.atlas-short dd { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
@media (min-width: 900px) {
  .atlas-short .plaque { padding: var(--s6); }
  .atlas-short dl { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .atlas-short dl > div { border-top: 0; padding: 0; }
}

/* ── Le sommaire de la page : des pastilles qui mènent aux parties ───────────────────────────────────── */
.atlas-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s6); }
.atlas-toc a, .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--ink-2); text-decoration: none;
  font: 500 14px/1.2 var(--sans); transition: border-color .2s, background .2s, color .2s; }
.atlas-toc a:hover, .chip:hover { color: var(--ink); border-color: rgba(243, 241, 236, .4); background: rgba(255, 255, 255, .06); }
.chip .glyph { color: var(--ivory); font-size: 15px; }

/* ── Le texte : une colonne de lecture, des titres qui se nomment ───────────────────────────────────────── */
.atlas-body { max-width: calc(40em + 2 * var(--gutter)); margin: 0 auto; color: var(--ink-2); font-size: 18px; line-height: 1.68; }
.atlas-body section + section { margin-top: var(--s8); }
.atlas-body h2 { font-size: clamp(38px, 8vw, 58px); color: var(--ink); margin: 0 0 var(--s5); scroll-margin-top: calc(var(--bar-h) + 20px); }
.atlas-body section > h2 { padding-top: var(--s5); border-top: 1px solid var(--line); }
.atlas-body > h2:first-child, .atlas-body section > h2:first-child { margin-top: 0; }
.atlas-body h3, .atlas-body > h2:not(:first-child) { font: italic 400 clamp(26px, 5.4vw, 32px)/1.1 var(--display); color: var(--ink);
  margin: var(--s6) 0 var(--s4); letter-spacing: -.01em; }
.atlas-body > h2:not(:first-child) { font-style: italic; }
.atlas-body .atlas-heading { font-style: normal; font-size: clamp(30px, 6vw, 40px); }
.atlas-body p { margin: 0 0 var(--s4); text-wrap: pretty; }
.atlas-body section > p:first-of-type::first-letter, .atlas-body > p:first-child::first-letter { font-family: var(--display); }
.atlas-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
.atlas-list li { position: relative; padding-left: 26px; }
.atlas-list li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ivory); box-shadow: 0 0 10px rgba(236, 220, 192, .6); }

/* ── La même lame dans les seize jeux ──────────────────────────────────────────────────────────────────── */
.atlas-decks { margin-top: var(--s8); }
.atlas-decks h2, .atlas-near h2, .hub h2 { font-size: clamp(34px, 7vw, 52px); margin-bottom: var(--s5); }
.atlas-decks .worlds-strip { justify-content: flex-start; }
.atlas-decks .world { width: 92px; text-decoration: none; }
.atlas-decks .world .thumb { width: 88px; }
.atlas-decks p { margin: var(--s4) 0 0; }

/* ── La lame d'avant, la lame d'après ───────────────────────────────────────────────────────────────────── */
.atlas-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s7); }
.pager { display: grid; gap: 4px; padding: var(--s4) var(--s5); border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025); text-decoration: none; color: var(--ink); font: 400 22px/1.15 var(--display); min-height: 44px; }
.pager small { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pager.next { text-align: right; }
.pager:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .05); }

/* ── Les voisines (autres signes, autres maisons, autres lames) ───────────────────────────────────────── */
.atlas-near { margin-top: var(--s7); }
.atlas-near h2 { font-size: clamp(28px, 6vw, 40px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Les sommaires ────────────────────────────────────────────────────────────────────────────────────── */
.hub { margin-top: var(--s7); }
.hub h3 { font: italic 400 clamp(26px, 5.4vw, 34px)/1.1 var(--display); margin: var(--s6) 0 var(--s4); }
.hub h3 .g { font-style: normal; color: var(--ivory); margin-right: 10px; font-size: .8em; }
.hub-row + .hub-row { margin-top: var(--s2); }
.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s5) var(--s4); }
.hub-cards a { display: grid; gap: 8px; text-decoration: none; color: var(--ink-2); }
.hub-cards .thumb { position: relative; display: block; aspect-ratio: var(--r, .5781); border-radius: 8px; overflow: hidden; background: var(--night-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 30px -16px #000; transition: transform .35s var(--ease), box-shadow .35s; }
.hub-cards .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hub-cards a:hover .thumb { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 18px 34px -16px #000; }
.hub-name { font: 400 18px/1.15 var(--display); color: var(--ink); }
.hub-name small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; color: var(--ink-3); margin-bottom: 2px; }
@media (min-width: 900px) { .hub-cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

/* ── Dans l'app ─────────────────────────────────────────────────────────────────────────────────────────── */
.atlas-app { margin-top: var(--s8); }
.atlas-app-in { padding: var(--s6) var(--s5); }
.atlas-app-in h2 { font-size: clamp(40px, 9vw, 72px); }
.atlas-app-in .get { margin-top: var(--s5); }
@media (min-width: 900px) { .atlas-app-in { padding: var(--s7); } }

/* ── Les faits (À propos) et les tableaux du calendrier ──────────────────────────────────────────────────── */
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 4px; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); }
@media (min-width: 700px) { .facts > div { grid-template-columns: 12em 1fr; align-items: baseline; } }
.atlas-body details { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.atlas-body details summary { cursor: pointer; color: var(--ink); font: 400 22px/1.25 var(--display); list-style: none; min-height: 44px; display: flex; align-items: center; }
.atlas-body details summary::-webkit-details-marker { display: none; }
.atlas-body details summary { justify-content: space-between; gap: 16px; }
.atlas-body details summary::after { content: "+"; flex: none; font: 300 26px/1 var(--sans); color: var(--ink-3); transition: transform .3s var(--ease); }
.atlas-body details[open] summary::after { transform: rotate(45deg); }
.atlas-body details p { margin-top: var(--s3); }
.sky-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s6); font-size: 16px; }
.sky-table th, .sky-table td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sky-table th { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sky-table td:first-child { color: var(--ink); }
/* sur un téléphone, la date au-dessus de ce qui arrive : jamais une page qui défile de côté */
@media (max-width: 640px) {
  .sky-table, .sky-table tbody, .sky-table tr, .sky-table td { display: block; width: 100%; }
  .sky-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sky-table td { border: 0; padding: 0; }
  .sky-table td:first-child { font-size: 14px; color: var(--ink-3); margin-bottom: 4px; }
  .sky-table td + td { color: var(--ink); font-size: 17px; }
}
.sky-table .glyph { color: var(--ivory); margin-right: 6px; }

/* ── Un outil (nombres, animal chinois) : une rangée qu'on touche, un résultat qui se pose ─────────────── */
.tool { margin-top: var(--s5); }
.tool-form { display: grid; gap: var(--s4); max-width: 30em; }
.tool-result { margin-top: var(--s5); }
.tool-result[hidden] { display: none; }
.tool-result .big { font: 400 clamp(64px, 16vw, 120px)/.9 var(--display); color: var(--ink); }
.tool-result .label { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: var(--s5) 0 var(--s3); }

@media (prefers-reduced-motion: reduce) { .hub-cards .thumb, .chip, .atlas-toc a { transition: none; } }
.nw { white-space: nowrap; }

/* ── Les outils bâtis sur l'accueil (ton ciel, le tirage) ───────────────────────────────────────────────── */
.tool-page .skyread, .tool-page .draw { padding-top: 0; }
.reading-page { margin-top: var(--s4); }

/* ── La Lune aujourd'hui ───────────────────────────────────────────────────────────────────────────────── */
.moon-plaque { padding: var(--s6) var(--s5); display: grid; gap: var(--s5); justify-items: start; }
.moon-disc { width: min(56vw, 240px); aspect-ratio: 1; justify-self: center; }
.moon-words { display: grid; gap: 4px; }
.moon-phase { margin: 0; font: italic 400 clamp(38px, 9vw, 60px)/1 var(--display); color: var(--ink); }
.moon-sign { margin: 0; font: 400 24px/1.2 var(--display); color: var(--ivory); }
.moon-light { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .14em; color: var(--ink-3); }
.moon-plaque .facts { width: 100%; }
@media (min-width: 900px) { .moon-plaque { grid-template-columns: 260px 1fr; align-items: center; padding: var(--s7); }
  .moon-plaque .facts, .moon-plaque > p { grid-column: 1 / -1; } }
.moon-phase::first-letter { text-transform: uppercase; }
.tool-result p { margin: 0; }
.tool-result .label { margin: var(--s5) 0 var(--s2); }
.tool-result .label:first-child { margin-top: 0; }
.tool-result .big + p { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 8px; }