/* ==========================================================================
   THE SKY IN EVERY LANGUAGE : la carte, et ses commandes.

   Cette feuille appartient au coeur du service. Elle ne contient aucune
   couleur : uniquement des jetons du systeme, ce qui fait que la carte passe en
   mode nuit toute seule, comme le reste du site. Une couleur ecrite en dur ici
   brulerait les yeux de quelqu'un au milieu d'un champ.

   Elle n'emploie que des proprietes LOGIQUES, sans une seule occurrence de left
   ou de right : l'arabe est servi en dir="rtl" et doit se retourner sans une
   regle de plus.

   Les couleurs du dessin lui-meme ne sont pas ici mais dans les jetons ci-
   dessous : le module de rendu les LIT au style calcule de la page et les
   relit quand le mode nuit bascule. C'est ainsi qu'un canvas, qui ne connait
   pas le CSS, obeit quand meme a la charte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Les jetons que le canvas lit
   Chacun est une valeur DEJA presente dans le systeme, reprise telle quelle.
   -------------------------------------------------------------------------- */
:root {
  --carte-fond: var(--bg-deep);
  --carte-etoile: var(--on-dark);
  --carte-etoile-faible: var(--on-dark-faint);
  --carte-trait: var(--on-dark-faint);
  --carte-nom: var(--on-dark-muted);
  --carte-horizon: var(--accent-on-dark);
  --carte-reperes: var(--on-dark-muted);
  --carte-corps: var(--on-dark);
  --carte-choisi: var(--accent-on-dark);
}

/* Le mode nuit : le fond est deja noir, ce sont les encres qui passent au
   rouge. Rien n'est invente, tout vient de sky.css. */
:root[data-nuit="on"] {
  --carte-fond: var(--bg);
  --carte-etoile: var(--accent-deep);
  --carte-etoile-faible: var(--accent-on-dark);
  --carte-trait: var(--accent-on-dark);
  --carte-nom: var(--accent-on-dark);
  --carte-horizon: var(--accent-deep);
  --carte-reperes: var(--accent-on-dark);
  --carte-corps: var(--accent-deep);
  --carte-choisi: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   Le cadre de la carte
   -------------------------------------------------------------------------- */
.carte {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  background: var(--carte-fond);
  position: relative;
  margin-block-end: var(--s-6);
}

.carte__toile {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  touch-action: none;
}

/* Sur un ecran large, la carte n'a pas besoin d'etre un carre geant : elle
   plafonne, et les commandes viennent a cote. */
@media (min-width: 60rem) {
  .carte__toile { aspect-ratio: 4 / 3; }
}

/* La barre d'etat de la carte : le lieu, l'instant, ce qu'on regarde. */
.carte__etat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.carte__etat strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Les commandes
   Chaque groupe est un fieldset du systeme. Rien n'est redessine.
   -------------------------------------------------------------------------- */
.commandes {
  display: grid;
  gap: var(--s-5);
  margin-block-end: var(--s-8);
}
@media (min-width: 48rem) {
  .commandes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
.commandes fieldset { margin: 0; }
.commandes .champ { margin-block-end: var(--s-4); max-width: none; }
.commandes .champ:last-child { margin-block-end: 0; }

/* Deux champs cote a cote : latitude et longitude, date et heure. */
.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

/* Le pas de temps : une rangee de boutons courts, tous de la meme largeur. */
.pas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pas .btn {
  padding-inline: var(--s-3);
  font-variant-numeric: tabular-nums;
  min-inline-size: 3.5rem;
  justify-content: center;
}

/* La liste des villes trouvees. Un vrai listbox, au clavier comme a la souris. */
.trouvees {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  max-block-size: 12rem;
  overflow-y: auto;
}
.trouvees:empty { display: none; }
.trouvees li { margin: 0; border-block-end: 1px solid var(--rule-soft); }
.trouvees li:last-child { border-block-end: 0; }
.trouvees button {
  display: block;
  inline-size: 100%;
  text-align: start;
  background: none;
  border: 0;
  padding: var(--s-3) var(--s-4);
  min-block-size: 44px;
  font: 400 var(--t-s)/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.trouvees button:hover { background: var(--accent-bg); }
.trouvees button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
.trouvees .pays { color: var(--ink-mid); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Le ciel en mots
   La carte est un objet purement visuel : sans ce bloc, elle n'existe pas pour
   qui emploie un lecteur d'ecran, et le meme calcul qui dessine sait aussi
   decrire. Le bloc est visible pour tout le monde, parce qu'un texte qui dit ou
   regarder sert aussi a qui voit.
   -------------------------------------------------------------------------- */
.en-mots {
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--accent);
  padding: var(--s-5);
  margin-block-end: var(--s-8);
  background: var(--bg-alt);
}
.en-mots h2 { margin-block-start: 0; font-size: var(--t-m); }
.en-mots p { margin-block-end: var(--s-3); }
.en-mots p:last-child { margin-block-end: 0; }
.en-mots ul { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   La table de ce qui est visible
   Elle double la carte : le meme contenu, en lignes et en colonnes, lisible par
   une machine, imprimable, et copiable dans un cahier d'observation.
   -------------------------------------------------------------------------- */
.visible-table td, .visible-table th { font-variant-numeric: tabular-nums; }
.visible-table td:first-child, .visible-table th:first-child { font-variant-numeric: normal; }

/* --------------------------------------------------------------------------
   Les mesures a la main
   Le poing, les doigts, l'empan a bras tendu. C'est la seule facon de mesurer
   un angle dans le ciel sans instrument, et la carte donne des degres.
   -------------------------------------------------------------------------- */
.main-mesure {
  display: grid;
  gap: var(--s-4);
  margin-block: var(--s-6);
}
@media (min-width: 40rem) {
  .main-mesure { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
.main-mesure > div {
  border: 1px solid var(--rule);
  padding: var(--s-4);
}
.main-mesure dt {
  font: 600 var(--t-xs)/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  margin: 0 0 var(--s-2);
}
.main-mesure dd {
  margin: 0;
  font: 600 var(--t-l)/1.1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.main-mesure p { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--ink-mid); }

/* --------------------------------------------------------------------------
   Les fiches de culture du ciel
   La licence s'affiche A L'ECRAN sur toute fiche du module de partage a
   l'identique : c'est une obligation de la licence, pas une politesse. Elle est
   donc un composant, et non une ligne perdue en bas de page.
   -------------------------------------------------------------------------- */
.licence-affichee {
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--etat-info);
  padding: var(--s-4);
  margin-block: var(--s-6);
  font-size: var(--t-s);
}
.licence-affichee > strong { display: block; margin-block-end: var(--s-2); }
.licence-affichee p { margin: 0 0 var(--s-2); }
.licence-affichee p:last-child { margin-block-end: 0; }

/* Un nom latin de constellation. Ce n'est ni de l'emphase ni un titre
   d'ouvrage : ni em ni cite ne conviennent, et le systeme refuse la balise i.
   D'ou cette classe, qui ne fait que poser l'italique du serif. */
.nom-latin {
  font-style: italic;
  font-family: var(--serif);
}

/* Un nom dans son ecriture, sa transcription a cote. Les deux sur une ligne,
   la transcription en retrait de ton, jamais en plus petit : une transcription
   illisible ne sert personne. */
.nom-natif {
  font-weight: 600;
}
.nom-translit {
  color: var(--ink-mid);
  font-style: italic;
}
.nom-glose {
  color: var(--ink-mid);
}

/* La liste des figures d'une culture. Une definition par figure. */
.figures {
  display: grid;
  gap: var(--s-4);
  margin-block: var(--s-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 44rem) {
  .figures { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
.figures li {
  border: 1px solid var(--rule);
  border-block-start: 2px solid var(--rule);
  padding: var(--s-4);
  margin: 0;
}
.figures li > * { display: block; }
.figures .nom-natif { font-size: var(--t-m); line-height: 1.3; }

/* La bande des cultures : de chaque constellation latine, on va voir ce que la
   meme portion de ciel raconte ailleurs. Sans cette bande, les cultures sont
   une annexe, et une page qui les traite en annexe est a refaire. */
.ailleurs {
  border-block: 1px solid var(--rule);
  padding-block: var(--s-6);
  margin-block: var(--s-8);
}
.ailleurs h2 { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   Impression
   Une carte imprimee sert vraiment : le telephone s'eteint dans le froid, et un
   club qui prepare une sortie sort du papier. Le canvas s'imprime tel qu'il est
   a l'ecran, sur fond blanc et sans les commandes.
   -------------------------------------------------------------------------- */
@media print {
  .commandes, .trouvees, .pas { display: none !important; }
  .carte { border: 1px solid #000000; break-inside: avoid; }
  .carte__toile { aspect-ratio: 1 / 1; max-block-size: 16cm; inline-size: auto; }
  .en-mots, .licence-affichee { break-inside: avoid; border-color: #000000; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures li { break-inside: avoid; }
}