/* Ciel astrologique 3D — un-finity.fr — direction B (onirique / mystique). Licence AGPL-3.0. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/dm-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/noto-sans-symbols-symbols-400-normal.woff2") format("woff2"); }

:root {
  --nuit: #120A1F; --violet: #4B1E7A; --rose: #A63D6E; --ambre: #C97B2E;
  --or: #E8C36A; --or-clair: #F7E2A8; --or-sombre: #B8862B; --ivoire: #FBF3E6;
  --muted: rgba(251,243,230,0.62); --faint: rgba(251,243,230,0.36);
  --glass: rgba(28,14,52,0.58); --glass-border: rgba(243,214,139,0.22);
  --fact: #9FE3EE; --symb: #F08FB0;
  --sans: "DM Sans", "Segoe UI", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --symbols: "Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--nuit); color: var(--ivoire); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.lbl { font: 400 11.5px var(--sans); color: rgba(251,243,230,0.75); text-shadow: 0 1px 8px rgba(0,0,0,0.7); white-space: nowrap; transform: translateY(14px); letter-spacing: 0.2px; }
.lbl.pt { font-size: 10.5px; color: rgba(251,243,230,0.6); transform: translateY(-14px); }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#hud > * { pointer-events: auto; }

.serif { font-family: var(--serif); }
.gold { background: linear-gradient(180deg, #F7E2A8 0%, #E8C36A 55%, #B8862B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(251,243,230,0.55); }
.glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font: 600 14px var(--sans); letter-spacing: 0.2px; white-space: nowrap; border: 0; cursor: pointer; color: var(--ivoire); background: transparent; }
.btn-gold { background: linear-gradient(135deg, #F7E2A8 0%, #D9A83E 100%); color: #1A0F2E; box-shadow: 0 6px 24px rgba(232,195,106,0.28); }
.btn-ghost { background: rgba(28,14,52,0.45); border: 1px solid rgba(243,214,139,0.32); color: var(--or-clair); }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font: 400 13px var(--sans); background: rgba(28,14,52,0.5); border: 1px solid rgba(251,243,230,0.14); color: rgba(251,243,230,0.8); white-space: nowrap; cursor: pointer; user-select: none; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: rgba(243,214,139,0.45); }
.chip.on { border-color: rgba(243,214,139,0.7); color: var(--or-clair); background: rgba(232,195,106,0.12); }
.chip.round { width: 40px; height: 40px; padding: 0; justify-content: center; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(251,243,230,0.25); flex: none; transition: background .2s, box-shadow .2s; }
.chip.on .dot { background: var(--or); box-shadow: 0 0 10px rgba(232,195,106,0.9); }
.tag { display: inline-block; font: 600 10px var(--sans); letter-spacing: 1.4px; padding: 3px 8px; border-radius: 6px; }
.tag-f { color: var(--fact); background: rgba(159,227,238,0.12); } .tag-s { color: var(--symb); background: rgba(240,143,176,0.12); }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Titre ── */
#title { position: absolute; left: 40px; top: 32px; display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
#title h1 { margin: 0; font: 500 44px/1.02 var(--serif); color: var(--ivoire); text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
#title h1 em { font-style: italic; }
#dateline { font-size: 14px; color: rgba(251,243,230,0.72); letter-spacing: .2px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
#dateline .tz { color: rgba(251,243,230,0.45); }
#dateline:hover { color: var(--or-clair); }
#legend { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: rgba(251,243,230,0.75); }
#legend .ic { width: 16px; height: 16px; color: rgba(251,243,230,0.6); cursor: pointer; }

/* ── Haut droit ── */
#topright { position: absolute; right: 40px; top: 32px; display: flex; gap: 10px; align-items: center; }
#topright .btn { height: 40px; }
#btn-full { width: 40px; padding: 0; justify-content: center; }
#btn-full.on { border-color: rgba(243,214,139,0.7); color: var(--or-clair); }

/* ── Calques ── */
#rail { position: absolute; right: 40px; top: 108px; width: 228px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
#rail .head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; color: var(--or); }
#rail .chip { width: 100%; height: 40px; justify-content: space-between; }
#rail hr { border: 0; height: 1px; background: rgba(243,214,139,0.16); margin: 6px 0; width: 100%; }
#rail .hint { font-size: 11px; color: rgba(251,243,230,0.5); padding: 2px 4px 0; line-height: 1.35; }

/* ── Barre de temps ── */
#timebar { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(880px, calc(100% - 80px)); height: 84px; padding: 0 18px; display: flex; align-items: center; gap: 16px; }
#timebar .sep { width: 1px; height: 44px; background: rgba(243,214,139,0.18); flex: none; }
#transport { display: flex; align-items: center; gap: 6px; }
#play { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F7E2A8, #D9A83E); box-shadow: 0 6px 24px rgba(232,195,106,0.35); color: #1A0F2E; border: 0; cursor: pointer; }
#play .ic { width: 20px; height: 20px; stroke-width: 2; }
#speeds { display: flex; gap: 6px; flex-wrap: nowrap; }
#speeds .chip { height: 32px; padding: 0 12px; font-size: 12px; }
#scrubwrap { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
#scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(232,195,106,0.35), #E8C36A 50%, rgba(251,243,230,0.12) 50%); outline: 0; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 999px; background: #F7E2A8; box-shadow: 0 0 12px rgba(247,226,168,0.9); cursor: grab; }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 999px; background: #F7E2A8; box-shadow: 0 0 12px rgba(247,226,168,0.9); cursor: grab; }
#fine { display: flex; align-items: center; gap: 6px; }
#fine .chip { width: 36px; height: 36px; padding: 0; justify-content: center; }
#clock { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
#clock b { font: 600 22px/1 var(--serif); color: var(--or-clair); font-variant-numeric: tabular-nums; }
#clock span { font-size: 10px; letter-spacing: 1.5px; color: rgba(251,243,230,0.5); margin-top: 3px; }
#now { height: 40px; padding: 0 14px; }

/* ── Infobulle ── */
#tip { position: absolute; width: 300px; padding: 14px 16px; display: none; flex-direction: column; gap: 6px; border-radius: 14px; background: rgba(28,14,52,0.8); border: 1px solid rgba(243,214,139,0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,0.4); z-index: 5; }
#tip.show { display: flex; }
#hint { position: absolute; display: none; padding: 5px 11px 6px; border-radius: 999px; font: 500 12.5px var(--sans); letter-spacing: .2px; color: var(--or-clair); background: rgba(28,14,52,0.78); border: 1px solid rgba(243,214,139,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; pointer-events: none; z-index: 5; }
#hint.show { display: block; }
#hint .sym { font-family: var(--symbols); color: var(--or); margin-right: 5px; }
#tip .t { font: 600 18px var(--serif); color: var(--or-clair); display: flex; justify-content: space-between; align-items: center; }
#tip .t .sym { font-family: var(--symbols); font-weight: 400; font-size: 20px; color: var(--or); }
#tip .pos { font-size: 12.5px; color: rgba(251,243,230,0.7); margin-top: -2px; }
#tip .line { font-size: 12px; line-height: 1.4; color: rgba(251,243,230,0.9); }
#tip .line b { font-weight: 600; letter-spacing: .6px; }
#tip .line.f b { color: var(--fact); } #tip .line.s b { color: var(--symb); }
#tip .x { position: absolute; right: 10px; top: 10px; cursor: pointer; opacity: .6; }
#tip .x:hover { opacity: 1; }

/* ── Panneaux modaux ── */
.modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8,4,16,0.45); z-index: 8; }
.modal.show { display: flex; }
.panel { width: min(820px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 28px 32px 26px; display: flex; flex-direction: column; gap: 20px; border-radius: 24px; }
.panel .phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel h2 { margin: 0; font: 500 32px/1.05 var(--serif); }
.panel h2 em { font-style: italic; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(251,243,230,0.55); }
.input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(12,6,24,0.55); border: 1px solid rgba(251,243,230,0.16); color: var(--ivoire); font-size: 15px; }
.input input { background: transparent; border: 0; color: var(--ivoire); font: 400 15px var(--sans); outline: 0; width: 100%; color-scheme: dark; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat { display: flex; gap: 18px; font-size: 12.5px; color: rgba(251,243,230,0.62); flex-wrap: wrap; }
.stat b { color: var(--ivoire); font-weight: 500; }
.pfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(243,214,139,0.16); flex-wrap: wrap; }
.credits { font-size: 12.5px; line-height: 1.55; color: rgba(251,243,230,0.8); }
.credits a { color: var(--or); }
.credits h3 { margin: 10px 0 4px; font: 600 15px var(--sans); color: var(--or-clair); }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 6px; cursor: pointer; }
.check input { accent-color: #E8C36A; }
.small { font-size: 11.5px; color: rgba(251,243,230,0.5); line-height: 1.4; }
.small.err { color: #F08FB0; min-height: 0; }
.small.privacy { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(12,6,24,0.45); }
.small a { color: var(--or); cursor: pointer; text-decoration: underline; }
.results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 6px; border-radius: 12px; background: rgba(12,6,24,0.5); border: 1px solid rgba(251,243,230,0.1); max-height: 210px; overflow: auto; }
.res { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.res:hover { background: rgba(232,195,106,0.06); }
.res.on { background: rgba(232,195,106,0.12); border-color: rgba(243,214,139,0.5); }
.res div { display: flex; flex-direction: column; gap: 2px; } .res b { font-weight: 500; font-size: 14px; } .res span { font-size: 12px; color: rgba(251,243,230,0.55); } .res em { font-style: normal; font-size: 11.5px; color: rgba(251,243,230,0.5); }
.tzcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(232,195,106,0.08); border: 1px solid rgba(243,214,139,0.35); min-height: 90px; }
.tzhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tzhead .serif { font: 600 21px var(--serif); color: var(--or-clair); } .tzhead a { font-size: 12px; color: var(--or); text-decoration: underline; cursor: pointer; }
.tztext { font-size: 12.5px; line-height: 1.45; color: rgba(251,243,230,0.78); } .tztext b { color: var(--ivoire); font-weight: 500; }
.tzmuted { font-size: 12.5px; color: rgba(251,243,230,0.5); line-height: 1.45; }
input.mini { width: 90px; height: 34px; border-radius: 8px; background: rgba(12,6,24,0.55); border: 1px solid rgba(251,243,230,0.16); color: var(--ivoire); padding: 0 10px; font: 400 14px var(--sans); color-scheme: dark; }
.panel.wide { width: min(1080px, calc(100% - 32px)); }
.cartewrap { display: flex; gap: 28px; align-items: flex-start; }
.preview { flex: none; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(243,214,139,0.25); background: #0E0818; line-height: 0; }
.preview canvas { display: block; max-width: 100%; height: auto; }
.opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.opts .field .chip { width: 100%; height: 40px; justify-content: space-between; margin-bottom: 6px; }
#carte-formats { display: flex; gap: 8px; flex-wrap: wrap; }
#carte-formats .chip.fmt { width: auto; margin-bottom: 0; }
.chip.fmt { height: 46px; padding: 0 14px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; border-radius: 12px; min-width: 112px; }
.chip.fmt b { font-weight: 500; font-size: 13px; } .chip.fmt span { font-size: 10.5px; color: rgba(251,243,230,0.5); }
.lbl.axis { font: 600 10px var(--sans); letter-spacing: 2px; color: var(--or-clair); background: rgba(28,14,52,0.85); border: 1px solid rgba(243,214,139,0.5); border-radius: 999px; padding: 3px 8px; transform: none; }
.lbl.house { font: 500 12.5px var(--serif); letter-spacing: 1.5px; color: rgba(247,226,168,0.72); text-shadow: 0 1px 6px rgba(0,0,0,0.85); transform: none; transition: color .2s, text-shadow .2s; }
.lbl.house.lit { color: var(--or-clair); text-shadow: 0 0 12px rgba(232,195,106,0.95), 0 1px 6px rgba(0,0,0,0.85); }
#rail .hint b { color: var(--or-clair); font-weight: 500; } #rail .hint a { color: var(--or); text-decoration: underline; cursor: pointer; }
.label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(251,243,230,0.45); margin-left: 6px; }
@media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } .cartewrap { flex-direction: column; } .preview { align-self: center; max-width: 100%; } }

/* ── Chargement ── */
#loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 40%, #1E1236 0%, #120A1F 70%); z-index: 20; transition: opacity 1.2s ease; }
#loader.hide { opacity: 0; pointer-events: none; }
#loader .ring { width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(243,214,139,0.25); border-top-color: var(--or-clair); animation: spin 1.6s linear infinite; }
#loader p { margin: 0; font: 500 22px var(--serif); color: var(--or-clair); }
#loader small { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
#nowebgl { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 24px; text-align: center; z-index: 21; background: var(--nuit); }

/* ── Mobile ── */
@media (max-width: 820px) {
  #title { left: 18px; top: 18px; right: 74px; max-width: none; }
  #title h1 { font-size: 30px; }
  #dateline { font-size: 12.5px; }
  #legend { display: none; }
  #topright { right: 18px; top: 18px; }
  #topright .btn-gold span { display: none; }
  #topright .btn-gold { width: 44px; height: 44px; padding: 0; border-radius: 999px; }
  #topright .btn-ghost { display: none; }
  #topright #btn-full { display: inline-flex; width: 44px; height: 44px; border-radius: 999px; }
  #rail { left: 12px; right: 12px; top: auto; bottom: 178px; width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  #rail::-webkit-scrollbar { display: none; }
  #rail .head, #rail hr, #rail .hint { display: none; }
  #rail .chip { width: auto; height: 40px; flex: none; }
  #rail .chip .dot { display: none; }
  .lbl.house { font-size: 10px; letter-spacing: 1px; }
  #timebar { left: 12px; right: 12px; bottom: 12px; transform: none; width: auto; height: auto; padding: 12px 12px 14px; flex-wrap: wrap; gap: 10px 6px; border-radius: 22px; justify-content: space-between; }
  #timebar .sep { display: none; }
  #transport { order: 1; gap: 4px; }
  #transport .chip.round { width: 40px; height: 40px; }
  #play { width: 48px; height: 48px; }
  #fine { order: 2; gap: 4px; }
  #fine .chip { width: 32px; height: 32px; }
  #clock { min-width: 66px; }
  #clock b { font-size: 20px; }
  #now { order: 3; width: 44px; height: 44px; padding: 0; border-radius: 999px; }
  #now span { display: none; }
  #scrubwrap { order: 5; width: 100%; flex: none; }
  #speeds { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #speeds::-webkit-scrollbar { display: none; }
  #speeds .chip { height: 36px; flex: none; }
  #tip { left: 12px !important; right: 12px; top: auto !important; bottom: 300px; width: auto; }
  .panel { padding: 22px 18px 20px; gap: 16px; }
  .panel h2 { font-size: 26px; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { #loader { transition: none; } }