/* Outil « système solaire en 3D » (Œil de Nuit) : scène immersive bord à bord (poster → 3D), HUD translucide, puces des astres,
   panneau de fiche, tableau « cette nuit », bande de cartes. Variables du thème (theme.css) ; lumière rouge via html[data-nuit="rouge"]
   (--or, --etoile et --pale passent en rouge, le canvas et le poster reçoivent un filtre). */
.outil-systeme [hidden] { display: none !important; }
.outil-systeme { margin: 0; color: #e9edf8; font-family: var(--titre); }
.ss-scene { position: relative; height: clamp(540px, 88vh, 1100px); background: #02040a; overflow: hidden; isolation: isolate; outline: none; }
@supports (height: 1svh) { .ss-scene { height: clamp(540px, 88svh, 1100px); } }
@media (max-width: 720px) {
  .ss-scene { height: clamp(430px, 70vh, 780px); }
  @supports (height: 1svh) { .ss-scene { height: clamp(430px, 70svh, 780px); } }
}
.ss-scene:focus-visible { box-shadow: inset 0 0 0 3px var(--or); }
.ss-scene:fullscreen { height: 100vh; }
.ss-vue { position: absolute; inset: 0; touch-action: none; }
.ss-vue canvas { display: block; width: 100% !important; height: 100% !important; }
.ss-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
.ss-3d .ss-poster { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .ss-poster { transition: opacity .9s ease; } }
html[data-nuit="rouge"] .ss-vue canvas, html[data-nuit="rouge"] .ss-poster { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-45deg) brightness(.7); }

/* Accueil : bouton central sur le poster, barre de chargement, message */
.ss-accueil { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 0 16px 60px; pointer-events: none; }
.ss-accueil > * { pointer-events: auto; }
[data-charger] .ss-accueil { display: none; }
.ss-lancer { display: inline-flex; align-items: center; gap: 10px; font: 600 19px var(--titre); color: #0b1530; background: var(--or); border: 0; border-radius: 999px; padding: 14px 30px 14px 22px; min-height: 52px; cursor: pointer;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .25), 0 0 60px rgba(242, 193, 78, .25); transition: transform .15s, box-shadow .15s; }
.ss-lancer:hover, .ss-lancer:focus-visible { transform: translateY(-1px); box-shadow: 0 16px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .4), 0 0 80px rgba(242, 193, 78, .4); outline: none; }
.ss-poids { margin: 0; font: 12px/1.4 var(--mono); color: rgba(233, 237, 248, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); max-width: 42ch; }
.ss-progression { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); width: min(300px, 70%); height: 3px; z-index: 6; appearance: none; border: 0; background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden; }
.ss-progression::-webkit-progress-bar { background: transparent; }
.ss-progression::-webkit-progress-value { background: var(--or); transition: width .3s; }
.ss-progression::-moz-progress-bar { background: var(--or); }
.ss-etat { position: absolute; left: 24px; top: 132px; z-index: 6; margin: 0; max-width: min(520px, 40%); padding: 6px 14px; border-radius: 999px;
  background: rgba(6, 10, 22, .72); border: 1px solid rgba(255, 255, 255, .12); font: 12px/1.4 var(--mono); color: var(--etoile); text-align: left; pointer-events: none; }
.ss-etat:empty { display: none; }

/* HUD : nom et distance en bas à gauche, date en bas à droite, commandes en haut à droite, fiche à droite */
.ss-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ss-hud > * { pointer-events: auto; }
.ss-hud-nom { position: absolute; left: 24px; bottom: 100px; max-width: min(58%, 640px); pointer-events: none; }
.ss-hud-sous { margin: 0 0 6px; font: 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pale); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.ss-hud-titre { margin: 0; font: 600 clamp(38px, 5.2vw, 68px)/1 var(--titre); letter-spacing: .005em; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .7); }
html[data-nuit="rouge"] .ss-hud-titre { color: var(--etoile); }
.ss-hud-dist { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 14px var(--mono); color: var(--pale); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.ss-compteur { font-size: 22px; color: var(--or); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (prefers-reduced-motion: no-preference) {
  .ss-fondu { animation: ss-fondu .7s ease-out; }
  @keyframes ss-fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.ss-hud-haut { position: absolute; right: 16px; bottom: 100px; }
.ss-hud-date { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 14px; min-height: 44px; border-radius: 12px; cursor: pointer;
  background: rgba(6, 10, 22, .6); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 15px var(--titre); color: var(--etoile); text-align: right; }
.ss-hud-date:hover, .ss-hud-date[aria-expanded="true"] { border-color: rgba(255, 255, 255, .45); }
.ss-hud-date-vitesse { font: 11px var(--mono); color: var(--pale); letter-spacing: .08em; text-transform: uppercase; }
.ss-hud-panneau { position: absolute; z-index: 7; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px; box-sizing: border-box;
  background: rgba(6, 10, 22, .82); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--etoile); }
.ss-date-panneau { right: 0; bottom: calc(100% + 8px); display: grid; gap: 10px; }
.ss-aide-panneau { right: 0; top: calc(100% + 8px); font: 14px/1.5 var(--police, inherit); }
.ss-aide-panneau p { margin: 0 0 8px; } .ss-aide-panneau p:last-child { margin: 0; }
kbd { font: 11px var(--mono); padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
.ss-legende { margin: 0; font: 11px var(--mono); color: var(--pale); letter-spacing: .08em; text-transform: uppercase; }
.ss-champ { display: grid; gap: 4px; font: 11px var(--mono); color: var(--pale); letter-spacing: .08em; text-transform: uppercase; }
.ss-champ input { font: 600 16px var(--titre); letter-spacing: 0; text-transform: none; padding: 8px 10px; color: var(--etoile); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; min-height: 44px; max-width: 100%; box-sizing: border-box; color-scheme: dark; }
.ss-groupe { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-bouton { font: 600 14px var(--titre); color: var(--etoile); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.ss-bouton:hover, .ss-bouton:focus-visible { border-color: var(--or); outline: none; }
.ss-bouton[aria-pressed="true"] { background: var(--or); color: #0b1530; border-color: var(--or); }
.ss-hud-outils { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.ss-outil { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(6, 10, 22, .6); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--etoile); transition: background-color .15s, border-color .15s; }
.ss-outil svg { width: 20px; height: 20px; }
.ss-outil span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss-outil:hover, .ss-outil:focus-visible { border-color: rgba(255, 255, 255, .6); outline: none; }
.ss-outil[aria-pressed="true"], .ss-outil[aria-expanded="true"] { background: var(--or); color: #0b1530; border-color: var(--or); }
.ss-panneau { position: absolute; right: 14px; top: 68px; bottom: 160px; width: min(390px, calc(100% - 28px)); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(6, 10, 22, .74); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font: 15px/1.5 var(--police, inherit); color: var(--etoile); scrollbar-width: thin; }
.ss-fiche-nom { margin: 0 0 8px; font: 600 24px/1.1 var(--titre); color: var(--or); }
.ss-accroche { margin: 0 0 10px; font-size: 15px; }
.ss-fiche p { margin: 6px 0; overflow-wrap: anywhere; }
.ss-dyn { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 12px; margin: 10px 0; font-size: 14px; }
.ss-dyn dt { font: 11px var(--mono); color: var(--pale); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.ss-dyn dd { margin: 0; }
.ss-sous { font: 11px var(--mono); color: var(--or); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 4px !important; }
.ss-voir { margin: 0 0 8px; padding-left: 18px; font-size: 14px; }
.ss-voir strong { color: var(--or); font-family: var(--mono); font-weight: 600; font-size: 12px; margin-right: 4px; }
.ss-produits { list-style: none; padding: 10px 0 0; margin: 12px 0 0; display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ss-produits li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font: 600 14px var(--titre); }
.ss-liens { font-size: 14px; }
.ss-liens a { color: var(--or); }

/* Barre des astres : puce texturée + nom */
.ss-astres { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 26px 12px 10px; list-style: none; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, rgba(2, 4, 10, .92), rgba(2, 4, 10, .55) 60%, rgba(2, 4, 10, 0)); }
.ss-astres::-webkit-scrollbar { display: none; }
.ss-astres li { flex: 0 0 auto; }
.ss-astres li:first-child { margin-right: 6px; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, .14); }
.ss-astre { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 66px; min-height: 44px; padding: 6px 6px 4px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font: 500 12px/1 var(--titre); color: var(--pale); letter-spacing: .02em; transition: color .15s, background-color .15s; }
.ss-astre:hover, .ss-astre:focus-visible { color: var(--etoile); background: rgba(255, 255, 255, .06); outline: none; }
.ss-astre[aria-pressed="true"] { color: #fff; }
html[data-nuit="rouge"] .ss-astre[aria-pressed="true"] { color: var(--etoile); }
.ss-astre[aria-pressed="true"] .ss-puce { box-shadow: inset -8px -6px 12px rgba(0, 0, 0, .55), 0 0 0 2px #02040a, 0 0 0 3.5px var(--or); }
.ss-puce { display: inline-block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background-size: 200% 100%; background-position: 50% 50%; background-color: #1a2140;
  box-shadow: inset -8px -6px 12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); position: relative; }
.ss-puce-soleil { box-shadow: inset -2px -2px 10px rgba(120, 40, 0, .5), 0 0 16px 3px rgba(255, 180, 70, .45); }
.ss-puce-saturne::after { content: ""; position: absolute; left: -9px; right: -9px; top: 38%; height: 24%; border: 1.5px solid rgba(232, 214, 164, .85); border-radius: 50%; transform: rotate(-18deg); }
.ss-puce-lune { background-size: 190% 100%; }
.ss-puce-systeme { background: #0b1530; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.ss-puce-systeme svg { display: block; width: 100%; height: 100%; }
html[data-nuit="rouge"] .ss-puce { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-45deg) brightness(.7); }

/* Schéma 2D à l'échelle : seulement sans JavaScript (le poster suffit sinon) */
.ss-schema { margin: 0; padding: 14px 16px; background: var(--nuit); border-bottom: 1px solid var(--trait); }
[data-js] .ss-schema { display: none; }
.ss-schemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto; }
.ss-schema svg { display: block; width: 100%; height: auto; }
.ss-fond { fill: var(--nuit); stroke: var(--trait); }
.ss-orbites circle { fill: none; stroke: var(--etoile); stroke-opacity: .3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ss-soleil { fill: #ffd36b; }
.ss-pt { stroke: var(--nuit); stroke-width: 1; }
.ss-nom { fill: var(--etoile); font: 11px var(--mono); }
.ss-titre { fill: var(--pale); font: 11px var(--mono); }
.ss-cote { fill: var(--pale); font: 10px var(--mono); }
.ss-schema figcaption { font: 13px/1.4 var(--mono); color: var(--pale); margin: 8px auto 0; max-width: 760px; }
html[data-nuit="rouge"] .ss-soleil, html[data-nuit="rouge"] .ss-pt { fill: var(--rouge); }

/* Mobile : titre, commandes et fiche en tiroir */
@media (max-width: 720px) {
  .ss-hud-nom { left: 14px; bottom: 92px; max-width: 62%; }
  .ss-hud-titre { font-size: clamp(28px, 9vw, 40px); }
  .ss-compteur { font-size: 17px; }
  .ss-hud-dist { font-size: 12px; }
  .ss-hud-haut { right: 10px; bottom: 92px; }
  .ss-hud-date { padding: 6px 10px; font-size: 13px; min-height: 40px; }
  .ss-hud-outils { top: 10px; right: 10px; flex-direction: column; gap: 5px; }
  .ss-outil { width: 44px; height: 44px; }
  .ss-bouton { min-height: 44px; }
  .ss-aide-panneau { right: 0; top: 0; }
  .ss-panneau { left: 8px; right: 8px; top: auto; bottom: 86px; width: auto; max-height: 56%; padding: 14px 14px 16px; }
  .ss-panneau-ouvert .ss-hud-nom, .ss-panneau-ouvert .ss-hud-haut { display: none; }
  .ss-astres { justify-content: flex-start; padding: 22px 8px 8px; gap: 0; }
  .ss-astre { min-width: 58px; font-size: 11px; }
  .ss-puce { width: 30px; height: 30px; }
  .ss-progression { bottom: 96px; }
  .ss-etat { top: 10px; left: 10px; max-width: min(520px, 72%); }
  .ss-lancer { font-size: 17px; padding: 12px 24px 12px 18px; }
}

/* Dans la page : tableau « cette nuit » compact et bande des dix astres */
.ss-table { margin: 14px 0 20px; }
.ss-table .tableau { margin: 0; }
.ss-table table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
.ss-table caption { text-align: left; padding: 10px 12px 6px; font: 13px var(--mono); color: var(--pale); }
.ss-table th, .ss-table td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; }
.ss-table tr:last-child td, .ss-table tr:last-child th { border-bottom: 0; }
.ss-table thead th { background: var(--nuit); color: var(--or); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ss-table tbody th { font: 600 15px var(--titre); white-space: nowrap; }
.ss-table tbody th .ss-puce { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; }
.ss-table tbody th .ss-puce-saturne::after { left: -6px; right: -6px; border-width: 1px; }
.ss-cartes { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ss-carte { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); color: var(--etoile); cursor: pointer; font: 15px/1.45 var(--police, inherit); transition: border-color .15s, transform .15s; }
.ss-carte:hover, .ss-carte:focus-visible { border-color: var(--or); transform: translateY(-1px); outline: none; }
.ss-carte[aria-pressed="true"] { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.ss-carte .ss-puce { width: 48px; height: 48px; margin-top: 2px; }
.ss-carte .ss-puce-saturne::after { left: -12px; right: -12px; }
.ss-carte-texte { display: grid; gap: 2px; min-width: 0; }
.ss-carte-texte strong { font: 600 18px var(--titre); }
.ss-carte-sous { font: 11px var(--mono); color: var(--pale); letter-spacing: .06em; text-transform: uppercase; }
.ss-carte-texte > span:last-child { color: var(--pale); font-size: 14px; }
@media (max-width: 480px) { .ss-cartes { grid-template-columns: 1fr; } .ss-carte { padding: 12px; gap: 12px; } .ss-carte .ss-puce { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: no-preference) { .ss-bouton, .ss-astre, .ss-outil { transition: border-color .2s, background-color .2s, color .2s; } }

/* v2 : panneaux du haut (chez moi, affichage, partage, aide), frise du temps et repères, cartes flottantes, lunes, petits corps, éclipse */
.ss-haut-panneau { right: 0; top: calc(100% + 8px); font: 14px/1.5 var(--police, inherit); max-height: min(calc(88vh - 190px), 900px); overflow: auto; scrollbar-width: thin; }
.ss-haut-panneau > .ss-legende { margin-bottom: 10px; }
.ss-colonne { flex-direction: column; align-items: stretch; }
.ss-colonne .ss-bouton { text-align: left; }
.ss-legende-basse { margin: 10px 0 0; font: 11px/1.45 var(--mono); color: var(--pale); }
.ss-ville-ligne { align-items: end; }
.ss-ville { flex: 1 1 160px; }
.ss-champ select { font: 600 15px var(--titre); letter-spacing: 0; text-transform: none; padding: 8px 10px; color: var(--etoile); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; min-height: 44px; max-width: 100%; box-sizing: border-box; color-scheme: dark; }
.ss-soir-titre { margin: 10px 0 6px; font: 600 14px var(--titre); color: var(--or); }
.ss-soir-titre:empty { display: none; }
.ss-soir-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(36vh, 300px); overflow: auto; scrollbar-width: thin; }
.ss-soir { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--etoile); text-align: left; cursor: pointer; font: 14px/1.35 var(--police, inherit); }
.ss-soir:hover, .ss-soir:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.ss-soir[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--or); }
.ss-soir .ss-puce { width: 26px; height: 26px; }
.ss-soir .ss-puce-saturne::after { left: -7px; right: -7px; border-width: 1px; }
.ss-soir strong { font: 600 15px var(--titre); display: block; }
.ss-soir span:last-child { display: block; color: var(--pale); font-size: 13px; }
.ss-soir-oui strong::after { content: " ●"; color: #6fd66f; font-size: 10px; vertical-align: 2px; }
html[data-nuit="rouge"] .ss-soir-oui strong::after { color: var(--or); }
.ss-frise-champ { margin-top: 2px; }
.ss-frise { position: relative; padding-bottom: 30px; }
.ss-frise input[type="range"] { display: block; width: 100%; margin: 6px 0 0; accent-color: var(--or); min-height: 32px; }
.ss-reperes { position: absolute; left: 0; right: 0; top: 28px; height: 36px; }
.ss-repere { position: absolute; top: 0; width: 44px; height: 44px; margin-left: -22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ss-repere::before { content: ""; position: absolute; left: 50%; top: 10px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 2px #06101c; }
.ss-repere:nth-child(even)::before { top: 22px; }
.ss-repere:hover::before, .ss-repere:focus-visible::before { transform: scale(1.5); }
.ss-repere:focus-visible { outline: none; }
.ss-repere[aria-pressed="true"]::before { background: #fff; }
.ss-frise-bornes { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--pale); letter-spacing: 0; text-transform: none; }
.ss-hud-haut { display: grid; gap: 8px; justify-items: end; }
.ss-eclipse { order: -1; max-width: min(340px, calc(100vw - 32px)); padding: 8px 12px; border-radius: 12px; background: rgba(6, 10, 22, .72); border: 1px solid var(--or); font: 13px/1.4 var(--police, inherit); color: var(--etoile); text-align: right; }
.ss-eclipse a { color: var(--or); }
.ss-carte-flottante { position: absolute; z-index: 8; left: 24px; top: auto; bottom: 250px; width: min(420px, calc(100% - 100px)); box-sizing: border-box; padding: 16px 18px; border-radius: 16px;
  background: rgba(6, 10, 22, .84); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--etoile); font: 15px/1.5 var(--police, inherit); }
.ss-carte-flottante h3 { margin: 4px 0 8px; font: 600 22px/1.15 var(--titre); color: var(--or); }
.ss-carte-flottante p { margin: 0 0 8px; }
.ss-carte-flottante p:last-child { margin-bottom: 0; }
.ss-carte-flottante .ss-source { font: 12px/1.4 var(--mono); color: var(--pale); }
.ss-carte-flottante .ss-source a { color: var(--or); }
.ss-fermer { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--etoile); font: 24px/1 var(--titre); cursor: pointer; }
.ss-fermer:hover, .ss-fermer:focus-visible { background: var(--or); color: #0b1530; outline: none; }
.ss-mentent-lumiere { font: 13px/1.5 var(--mono); color: var(--or); }
.ss-mentent-actif .ss-hud-nom, .ss-mentent-actif .ss-hud-outils, .ss-mentent-actif .ss-astres { visibility: hidden; }
.ss-lunes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ss-lune { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--etoile); font: 600 13px var(--titre); cursor: pointer; }
.ss-lune::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lune); box-shadow: inset -4px -3px 6px rgba(0, 0, 0, .5); }
.ss-lune:hover, .ss-lune:focus-visible { border-color: var(--or); outline: none; }
.ss-petits-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-petit { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: transparent; color: var(--etoile); text-align: left; cursor: pointer; font: 14px/1.3 var(--police, inherit); }
.ss-petit:hover, .ss-petit:focus-visible { border-color: var(--or); outline: none; }
.ss-petit small { font: 11px var(--mono); color: var(--pale); white-space: nowrap; }
.ss-simu-ligne { margin: 10px 0 4px !important; }
.ss-simu { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--or); border-radius: 999px; color: var(--or); text-decoration: none; font: 600 14px var(--titre); }
.ss-simu:hover, .ss-simu:focus-visible { background: var(--or); color: #0b1530; outline: none; }
.ss-lien-vue { display: block; margin-top: 8px; font: 11px/1.4 var(--mono); color: var(--pale); overflow-wrap: anywhere; }
.ss-lien-vue:empty { display: none; }
@media (max-width: 720px) {
  .ss-haut-panneau { right: 52px; top: 0; width: min(340px, calc(100vw - 76px)); max-height: calc(100% - 20px); overflow: auto; }
  .ss-hud-outils { max-height: calc(100% - 100px); }
  .ss-carte-flottante { left: 10px; top: 10px; bottom: auto; width: auto; right: 62px; padding: 14px 14px 14px; max-height: 60%; overflow: auto; }
  .ss-carte-flottante h3 { font-size: 19px; padding-right: 36px; }
  .ss-eclipse { font-size: 12px; max-width: calc(100vw - 80px); }
  .ss-soir-liste { max-height: 40vh; }
}

/* v2 bis : mini-horizon des fiches, courbes heure par heure, liste « À noter » */
.ss-horizon-bloc:empty { display: none; }
.ss-horizon { display: block; width: min(100%, 220px); height: auto; margin: 2px 0 8px; }
.ss-hz-sol { stroke: var(--pale); stroke-width: 1; stroke-opacity: .6; }
.ss-hz-fil { stroke: var(--or); stroke-width: 1; stroke-dasharray: 2 2; }
.ss-hz-pt { fill: var(--or); }
.ss-hz-h { fill: var(--etoile); font: 11px var(--mono); }
.ss-hz-card text { fill: var(--pale); font: 9px var(--mono); }
.ss-courbes-bloc { margin-top: 10px; }
.ss-courbes { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.ss-cb-nuit { fill: rgba(255, 255, 255, .06); }
.ss-cb-crep { fill: rgba(242, 193, 78, .1); }
.ss-cb-axe { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.ss-cb-texte { fill: var(--pale); font: 9px var(--mono); }
.ss-cb-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ss-cb-nom { font: 600 10px var(--titre); }
.ss-cb-curseur { stroke: var(--or); stroke-width: 1; }
.ss-courbes-lecture { margin: 6px 0 0; font: 12px/1.4 var(--mono); color: var(--etoile); min-height: 1.4em; }
.ss-date-panneau { max-height: max(260px, calc(88vh - 330px)); overflow: auto; scrollbar-width: thin; }
.ss-anoter-bloc { display: grid; gap: 8px; }
.ss-anoter-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ss-anoter-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 13px/1.4 var(--police, inherit); }
.ss-anoter-liste li > span { grid-column: 1 / -1; }
.ss-anoter-liste time { display: block; font: 11px var(--mono); color: var(--or); text-transform: uppercase; letter-spacing: .06em; }
.ss-anoter-liste .ss-groupe { grid-column: 1 / -1; gap: 4px; }
.ss-anoter-liste .ss-bouton { min-height: 36px; padding: 4px 12px; font-size: 13px; }
@media (max-width: 720px) { .ss-date-panneau { max-height: 56vh; } }
/* Tactile : cibles de 44 px (puces des lunes, curseur de la frise, étiquettes d'astres du moteur : zone cliquable élargie sans changer le dessin). */
@media (pointer: coarse) {
  .ss-lune { min-height: 44px; }
  .ss-frise input[type="range"] { min-height: 44px; }
  .ss3d-etiquette::before { content: ""; position: absolute; left: -6px; right: -6px; top: -10px; bottom: -10px; }
  .ss3d-etiquette.petit::before { top: -12px; bottom: -12px; }
}