/* Outil · Soleil (Sun) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : sl-
   À gauche : le graphique (hauteur du soleil sur 24 h, bandes heure bleue / golden hour / jour ; zone fixe), l'info,
   Copier les heures. À droite : la date (‹ › et Aujourd'hui), le lieu (Ma position ou des coordonnées), 9 lignes fixes. */
.sl .outil-fixe { align-items: stretch; }
.sl-graphe { display: flex; flex-direction: column; gap: 8px; }
.sl-legende { position: relative; height: 16px; display: flex; gap: 16px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.sl-legende span { display: flex; align-items: center; gap: 6px; }
.sl-legende i { width: 10px; height: 10px; border-radius: 3px; }
.sl-legende b:not(:empty) { position: absolute; inset: 0; display: flex; align-items: center; background: var(--noir); color: var(--papier); font-weight: 500; white-space: nowrap; overflow: hidden; }
.sl-svg { width: 100%; height: auto; aspect-ratio: 600 / 240; display: block; touch-action: pan-y; overflow: visible; }
.sl-horizon { stroke: rgba(242, 240, 235, .28); stroke-width: 1; }
.sl-courbe { fill: none; stroke: #f6e3d3; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sl-courbe-nuit { fill: none; stroke: rgba(242, 240, 235, .22); stroke-width: 1.5; stroke-dasharray: 2 4; }
.sl-repere { fill: var(--noir); stroke: #f6e3d3; stroke-width: 1.5; }
.sl-etiquette { fill: var(--papier); font: 500 10.5px var(--mono); letter-spacing: .02em; paint-order: stroke; stroke: var(--noir); stroke-width: 4px; stroke-linejoin: round; }
.sl-axe { fill: var(--texte2); font: 500 10px var(--mono); }
.sl-maintenant { stroke: rgba(242, 240, 235, .22); stroke-dasharray: 2 4; }
.sl-point { fill: #ffa370; stroke: #fff4ea; stroke-width: 1.5; }
.sl-point.sl-nuit { fill: #2a2622; stroke: rgba(242, 240, 235, .5); }
.sl-survol { stroke: rgba(242, 240, 235, .45); stroke-width: 1; opacity: 0; }
.sl-survol.vu { opacity: 1; }
.sl-vide { fill: var(--texte2); font: 500 12px var(--mono); }

/* La position, sous le graphique : la boussole (le ciel vu d'en haut) et le lieu */
.sl-position { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; height: 150px; padding: 4px 4px 0; }
.sl-boussole { width: 132px; height: 132px; overflow: visible; }
.sl-b-fond { fill: rgba(242, 240, 235, .03); stroke: rgba(242, 240, 235, .22); stroke-width: 1; }
.sl-b-anneau { fill: none; stroke: var(--filet-doux); stroke-width: 1; stroke-dasharray: 2 3; }
.sl-b-point { fill: var(--texte2); font: 600 9px var(--mono); }
.sl-b-course { fill: none; stroke: #f6e3d3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-b-lever, .sl-b-coucher { stroke-width: 1.2; stroke-dasharray: 3 3; }
.sl-b-lever { stroke: rgba(255, 163, 112, .8); }
.sl-b-coucher { stroke: rgba(74, 143, 192, .9); }
.sl-b-lever-p { fill: #ffa370; }
.sl-b-coucher-p { fill: #4a8fc0; }
.sl-b-zenith { fill: var(--texte2); }
.sl-pos-texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-pos-texte b { font: 700 20px/1.15 var(--display); letter-spacing: -.01em; color: var(--papier); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.3em; }
.sl-pos-texte span[data-coord] { font: 500 12.5px/1.2 var(--mono); color: var(--papier); height: 1.2em; }
.sl-pos-note { font: 500 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); height: 1.2em; }
.sl-pos-legende { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); margin-top: 2px; }
.sl-pos-legende i { width: 7px; height: 7px; border-radius: 50%; }
.sl-pos-legende i + i, .sl-pos-legende .sl-l-coucher { margin-left: 8px; }
.sl-l-lever { background: #ffa370; }
.sl-l-coucher { background: #4a8fc0; }
.sl-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.sl-actions { display: flex; justify-content: center; }
.sl-actions .pastille, .sl-haut .pastille { cursor: pointer; }
.sl-actions .pastille:hover, .sl-haut .pastille:hover { translate: none; }
.sl-actions .pastille:disabled, .sl-haut .pastille:disabled { opacity: .3; cursor: default; }

.sl-haut { display: flex; flex-direction: column; gap: 18px; }
.sl-date { display: flex; align-items: center; gap: 8px; }
.sl-date .saisie { flex: 1; min-width: 0; color-scheme: dark; text-align: center; }
.sl-date .rond { flex: none; width: 38px; height: 38px; }
.sl-lieu { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: end; }
.sl-coord { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-coord span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.sl-rangee { cursor: default; height: 44px; }
.sl-rangee .val { font-variant-numeric: tabular-nums; }
.sl-rangee.sl-or .nom::before, .sl-rangee.sl-bleu .nom::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.sl-rangee.sl-or .nom::before { background: #e8521c; }
.sl-rangee.sl-bleu .nom::before { background: #4a8fc0; }
@media (max-width: 959px) { .sl-haut { order: -1; } }   /* téléphone : la date et le lieu d'abord */
@media (max-width: 560px) {
  .sl-lieu { grid-template-columns: 1fr 1fr; }
  .sl-lieu .pastille { grid-column: 1 / -1; justify-self: start; }
}