/* nadir.css - jetons de style et ecran de jeu.
 *
 * DIRECTION : l'ardoise et la tuile.
 *
 * Le sujet du jeu, ce sont les toits de France vus d'aplomb. Le fond prend donc
 * la couleur de l'ardoise, la matiere qui domine les vues du Nord et de l'Ouest,
 * et la seule rampe coloree du site va du bleu des rivieres a l'ocre des tuiles
 * du Midi. Cette rampe dit UNE chose et une seule : la proximite d'une
 * proposition. Rien d'autre n'est colore, et l'image reste ce qu'on regarde.
 *
 * AUCUNE POLICE N'EST TELECHARGEE. Ni ici, ni ailleurs : une police servie par
 * Google fait transmettre l'adresse IP du visiteur a un tiers avant tout
 * consentement possible. La pile systeme suffit a un ecran qui porte surtout
 * une image et des chiffres. Le jour ou l'on voudra une identite typographique,
 * ce sera avec des fichiers servis d'ici, comme dans Chronos.
 */

:root {
  --ardoise: #171B21;
  --ardoise-2: #1E232B;
  --trait: rgba(233, 231, 225, .10);
  --trait-vif: rgba(233, 231, 225, .22);

  --craie: #E9E7E1;
  --craie-2: #A3A9B2;
  --craie-3: #767D88;

  /* La rampe de proximite. Du plus loin au plus pres. */
  --loin: #3E7CA8;
  --tiede: #D9B25A;
  --pres: #C24A2E;
  --juste: #6FAE58;

  --r: 12px;
  --r-s: 8px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ardoise);
  color: var(--craie);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* ----------------------------------------------------------------- entete */

.entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 14px;
}

.titre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
}

.jour {
  color: var(--craie-3);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.jour a { color: inherit; }

/* ------------------------------------------------------------------ image */

/* Le cadre est carre et ne deborde jamais. La grille de tuiles vit dedans, plus
 * grande que lui, decalee pour que la commune tombe au centre. C'est le decalage
 * qui fait le cadrage ; le cadre, lui, ne bouge pas. */
.cadre {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ardoise-2);
  border: 1px solid var(--trait);
}

.vue {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* Les tuiles voisines laissent une couture d'un demi-pixel apres mise a
   * l'echelle. Le fond sombre la rend invisible ; sans lui elle serait blanche. */
  background: var(--ardoise-2);
}

.vue img {
  position: absolute;
  width: 256px;
  height: 256px;
  display: block;
  /* Les orthophotos ont deja leur propre nettete ; le lissage du navigateur a
   * l'agrandissement les rend molles. */
  image-rendering: -webkit-optimize-contrast;
}

.vue.entrante { animation: apparait .24s ease-out; }

@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .vue.entrante { animation: none; }
}

.echelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 0;
  font-size: 13px;
  color: var(--craie-3);
  font-variant-numeric: tabular-nums;
}

.echelle a { color: inherit; }

/* Les pastilles de vue : une par etape deja obtenue. Elles ne decorent rien,
 * elles disent combien d'images on a et laquelle on regarde. */
.etapes {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.etapes button {
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--trait);
  cursor: pointer;
}

.etapes li { flex: 1; }
.etapes button[aria-current="true"] { background: var(--craie-2); }
.etapes button:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }

/* ------------------------------------------------------------------ saisie */

.saisie {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
}

.saisie input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  color: var(--craie);
  background: var(--ardoise-2);
  border: 1px solid var(--trait-vif);
  border-radius: var(--r-s);
}

.saisie input::placeholder { color: var(--craie-3); }
.saisie input:focus-visible { outline: 2px solid var(--craie-2); outline-offset: 1px; }

.saisie button {
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--ardoise);
  background: var(--craie);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
}

.saisie button:disabled { opacity: .4; cursor: default; }

.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--ardoise-2);
  border: 1px solid var(--trait-vif);
  border-radius: var(--r-s);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  max-height: 264px;
  overflow-y: auto;
}

.suggestions:empty { display: none; }

.suggestions li {
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.suggestions li[aria-selected="true"] { background: rgba(233, 231, 225, .10); }
.suggestions .dep { color: var(--craie-3); font-variant-numeric: tabular-nums; }

.message {
  margin: 10px 2px 0;
  font-size: 14px;
  color: var(--tiede);
  min-height: 1.45em;
}

/* ------------------------------------------------------------------ essais */

.essais {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.essai {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ardoise-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
}

.essai .ville { font-weight: 600; }
.essai .dep { color: var(--craie-3); font-weight: 400; }
.essai .km { font-variant-numeric: tabular-nums; color: var(--craie-2); }
.essai .fleche { font-size: 18px; line-height: 1; }

.essai.trouve {
  border-color: var(--juste);
  background: rgba(111, 174, 88, .12);
}

/* La barre de proximite occupe toute la largeur sous la ligne. Sa couleur est
 * la seule information de couleur du site. */
.jauge {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: rgba(233, 231, 225, .08);
  overflow: hidden;
}

.jauge span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* -------------------------------------------------------------- denouement */

.denouement {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--trait-vif);
  border-radius: var(--r);
  background: var(--ardoise-2);
}

.denouement h2 { margin: 0 0 4px; font-size: 20px; }
.denouement p { margin: 0 0 12px; color: var(--craie-2); }
.denouement .score { color: var(--craie); font-variant-numeric: tabular-nums; }

.denouement button {
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ardoise);
  background: var(--craie);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
}

.pied {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--craie-3);
}

.pied a { color: var(--craie-2); }

/* ------------------------------------------------------------------- regles */

.texte { max-width: 60ch; }
.texte h2 { font-size: 18px; margin: 26px 0 8px; }
.texte p, .texte li { color: var(--craie-2); }
.texte code { color: var(--craie); }