/* ---------------------------------------------------------------
   alltypo — feuille de style
   Tout est centre. Les titres sont en Times gras, le reste est
   compose dans les fontes elles-memes.
   --------------------------------------------------------------- */

body {
  margin: 0;
  padding: 14px 20px 0;
  background: #ffffff;
  color: #000000;
  text-align: center;
  font-family: Times, "Times New Roman", serif;
}

/* titre de la fonderie, en pied de page : plus aere que le reste,
   souligne, et ramene en haut de page au clic */
.foundry {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.7;
  /* le line-height aere laisse du vide au-dessus du texte : on le
     rattrape ici pour que l'air aille sous la ligne, pas dessus */
  margin: -8px 0 0;
  text-align: left;
}

.foundry a {
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* entete d'une planche : nom + bouton cote a cote, cales a gauche */
.entete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  text-align: left;
  margin-bottom: 13px;
}

/* nom de chaque fonte */
h2 {
  font-weight: bold;
  font-size: 20px;
  margin: 0;
}

/* bouton de telechargement : meme style que le nom */
.entete .dl,
.tout .dl {
  font-family: Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* lignes de texte courant */
p {
  font-size: 15px;
  margin: 0 0 6px;
}

/* liens et bouton de telechargement */
a,
button {
  font-family: Times, "Times New Roman", serif;
  font-size: 15px;
  color: #000000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* bloc d'une fonte : trait de separation entre chaque planche */
.fonte {
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 2px solid #000000;
}

/* pied de page : credits a gauche, bouton a droite, sur une meme ligne */
.tout {
  padding: 0 0 6px;
  line-height: 1.25;
}

/* licence : ligne pleine largeur, au-dessus des credits */
.licence {
  font-weight: bold;
  font-size: 20px;
  margin: 0;
  text-align: left;
}

/* derniere ligne : credits a gauche, bouton a droite */
.bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/* credits : une seule ligne, calee a gauche du pied de page */
.credits {
  font-weight: bold;
  font-size: 20px;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
  /* la ligne est longue : sur grand ecran elle tient, sinon elle defile
     lateralement plutot que de pousser le bouton hors du cadre */
  scrollbar-width: none;
}

/* ligne d'essai : cliquez dedans et tapez */
.essai {
  font-size: 150px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  /* line-height serre : les glyphes debordent autant en haut qu'en bas
     de leur ligne. Marges egales = alphabet centre dans la case. */
  margin: 0.12em 0;
  outline: none;
  word-break: break-word;
}

/* interlignages propres a certaines fontes (defaut : 0.95) */
.essai.il-old-days { line-height: 0.88; }   /* Old Days Roman : un peu plus d'air */
.essai.il-radikal  { line-height: 0.85; }   /* Radikal : plus serre */

@media (max-width: 1100px) {
  .essai { font-size: 110px; }
}

/* sous 980px les credits ne tiennent plus a cote du bouton : le pied de
   page s'allonge en deux lignes plutot que de comprimer la ligne */
@media (max-width: 980px) {
  .bas {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .credits {
    white-space: normal;
    overflow-x: visible;
  }
}

@media (max-width: 700px) {
  .essai { font-size: 68px; }
  .fonte { margin-bottom: 12px; padding-bottom: 8px; }

  /* pied de page plus compact, mais toujours sur plusieurs lignes */
  .foundry,
  .licence,
  .credits,
  .tout .dl { font-size: 17px; }

  .foundry { margin-top: -6px; }
  .tout { padding-bottom: 12px; }
}

@media (max-width: 430px) {
  body { padding-left: 14px; padding-right: 14px; }
  .essai { font-size: 46px; }
  .entete .dl { font-size: 15px; }

  .foundry,
  .licence,
  .credits,
  .tout .dl { font-size: 15px; }
}