/**
 * L'habillage.
 *
 * Deux regles tiennent toute la page : rien n'est arrondi, et il n'y a aucun
 * cadre. Le decompte se pose dans le ciel comme le titre, sans panneau ni
 * carte. Les seuls traits de la page sont des filets d'un pixel entre les
 * quatre nombres.
 */

/* La police des lettres de nuages, reprise de free-bird. C'est elle qui ecrit
   SDR TO SDD dans le ciel : sans elle, il n'y a plus de nuages, juste du texte. */
@font-face {
  font-family: 'Cloudy';
  src: url('fonts/cloudy.ttf') format('truetype');
  font-display: block;
}

:root {
  --texte: #24405e;
  --texte-doux: rgba(36, 64, 94, 0.5);
  --filet: rgba(36, 64, 94, 0.18);
  /* Le meme bleu que le haut du ciel : pendant le premier dixieme de seconde,
     avant que le canvas ait peint, l'ecran n'est jamais blanc. */
  --ciel-haut: #2b5f9e;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ciel-haut);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texte);
  /* Un ecran d'attente n'a aucune raison de laisser selectionner du texte. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

#ciel {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Le decompte ----------------------------------------------------------
   Pose au deux tiers de la hauteur : au-dessus du titre en nuages, en dessous
   de la mer de nuages du bas. Il flotte dans la partie claire du ciel. */

#decompte {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  width: min(760px, calc(100vw - 48px));
  /* Il arrive apres le ciel : sans ce fondu, il se poserait sur un ecran vide
     le temps que le decor se peigne. */
  opacity: 0;
  transition: opacity 1.4s ease 0.5s;
}

body.pret #decompte {
  opacity: 1;
}

.bloc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  /* Le filet separateur : un pixel, rien d'autre. */
  border-left: 1px solid var(--filet);
}

.bloc:first-child {
  border-left: 0;
}

.valeur {
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.02em;
  /* Les chiffres doivent avoir tous la meme largeur, sinon le decompte
     tressaute a chaque seconde. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.unite {
  font-size: clamp(0.56rem, 1.5vw, 0.68rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  /* L'indentation compense la derniere lettre espacee, sinon le mot penche. */
  text-indent: 0.34em;
  color: var(--texte-doux);
}

/* --- L'arrivee ------------------------------------------------------------
   Quand l'heure est passee, les quatre nombres cedent la place a une ligne. */

#arrivee {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  font-size: clamp(0.8rem, 2.4vw, 1.05rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  white-space: nowrap;
  color: var(--texte);
  animation: respire 4s ease-in-out infinite;
}

#arrivee[hidden] {
  display: none;
}

@keyframes respire {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* Ecran etroit : quatre colonnes ne tiennent plus, on passe a deux. */
@media (max-width: 520px) {
  #decompte {
    flex-wrap: wrap;
    row-gap: 2.2rem;
    width: min(340px, calc(100vw - 40px));
  }

  .bloc {
    flex: 0 0 50%;
  }

  /* Sur deux rangs, le filet doit repartir a gauche a chaque debut de rang. */
  .bloc:nth-child(odd) {
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #arrivee {
    animation: none;
    opacity: 1;
  }
}