/* Outil · Lune (Moon) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ln-
   Construit exactement comme Soleil (voir le squelette commun plus bas) : à gauche le dessin, la phase (nom, part
   éclairée, âge), la date du jour, Copier et le lien Soleil ; à droite Date, Lieu, La lune, puis les prochaines phases. */
.ln-dessin { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; }
.ln-halo { fill: none; stroke: rgba(242, 240, 235, .06); stroke-width: 10; }
.ln-sombre { fill: #22201d; }
.ln-clair { fill: #e9e4da; }
.ln-bord { fill: none; stroke: rgba(242, 240, 235, .14); stroke-width: 1; }

/* ---------- Squelette commun à Soleil et Lune (mêmes règles dans les deux fichiers, seul le préfixe change) ----------
   À gauche : l'image (zone de hauteur fixe), le titre et sa ligne, la date du jour (2 lignes), Copier et le lien.
   À droite : Date, Lieu, la liste, puis un bloc secondaire. Tout ce qui précède la date a la même hauteur : en colonne
   étroite (téléphone, mode double), les champs Date des deux outils tombent au même endroit. */
.ln .outil-fixe { align-items: stretch; }
.ln .outil-defile::before { margin-top: 0; }   /* ordinateur : la colonne de droite part du haut (pas centrée), comme dans l'autre outil */
.ln-visuel { flex: none; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ln-titre { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ln-titre b { height: 1.2em; max-width: 100%; font: 700 24px/1.2 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-titre span { height: 1.3em; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.ln-info { flex: none; height: 2lh; margin: 0; overflow: hidden; text-align: center; }
.ln-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ln-actions .pastille, .ln-lieu .pastille, .ln-date .pastille { cursor: pointer; }
.ln-actions .pastille:hover, .ln-lieu .pastille:hover, .ln-date .pastille:hover { translate: none; }
.ln-actions .pastille:disabled, .ln-date .pastille:disabled { opacity: .3; cursor: default; }
.ln-date { display: flex; align-items: center; gap: 8px; }
.ln-date .saisie { flex: 1; min-width: 0; color-scheme: dark; text-align: center; }
.ln-date .rond { flex: none; width: 38px; height: 38px; }
.ln-lieu { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: end; }
.ln-coord { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ln-coord span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.ln-ligne { cursor: default; height: 44px; }
.ln-ligne .val { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ln-visuel { height: 210px; }
  .ln-lieu { grid-template-columns: 1fr 1fr; }
  .ln-lieu .pastille { grid-column: 1 / -1; justify-self: start; }
}