/*
 * La barre du site AlloGames — la même sur toutes les pages.
 *
 * Elle est ici et non recopiée dans chacune pour la raison qui vaut déjà pour
 * `pages.css` : seize copies d'un même bloc divergent au premier ajustement.
 * Les pages de rubrique chargent aussi `pages.css` ; les pages seules — accueil,
 * confidentialité, conditions, support — n'ont que celle-ci en commun.
 *
 * Elle emprunte la palette à la page qui l'accueille (--encre, --filet, --pale,
 * --texte, --surface) : toutes la déclarent. Ce qui n'appartient qu'à la barre
 * est déclaré ici.
 */

:root {
  /* L'encre à 72 % : le fond de la barre une fois la page défilée. Plus opaque,
     le flou ne se voit plus ; plus clair, ce qui passe dessous se lit au travers
     du nom. */
  --voile: rgba(8, 7, 12, 0.72);
  /* Posée et non subie : sur l'accueil, le dégradé du héros doit remonter
     d'exactement cette hauteur pour atteindre le premier pixel de la page. */
  --barre-hauteur: 62px;
  /* La largeur de la colonne de la page. Les pages de texte — conditions,
     confidentialité, support — la resserrent à 720 px ; la barre doit les
     suivre, sinon le nom ne tombe plus au même fer que le texte qu'il
     surplombe. */
  --colonne: 900px;
}

/* Collée en haut, et sur toute la largeur de la fenêtre : sur l'accueil, la
   bande de captures déborde de la colonne de texte, et un flou arrêté à ses
   900 pixels se lirait comme un rectangle posé là. */
.barre {
  position: sticky; top: 0; z-index: 20;
  /* Le filet existe dès le départ, transparent, et ne fait qu'apparaître en
     couleur : le poser au premier défilement ferait descendre toute la page
     d'un pixel à cet instant précis. */
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s, backdrop-filter 0.25s, border-color 0.25s;
}

/* Rien au repos : le voile posé d'emblée assombrit de 28 % le haut de la page —
   sur l'accueil, la limite basse de la barre se lisait comme une couture en
   travers du dégradé. Il n'y a d'ailleurs rien à flouter tant que rien n'est
   passé dessous. */
.barre.collee {
  background: var(--voile);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--filet);
}

/* Sans flou, un fond à 72 % laisse défiler le contenu derrière le nom. Ces
   navigateurs reçoivent l'encre pleine. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre.collee { background: var(--encre); }
}

/* Le conteneur rend l'alignement que la colonne donnait avant que la barre n'en
   sorte. Sa hauteur est posée, pour que le dégradé de l'accueil sache de combien
   remonter. */
.barre-contenu {
  max-width: var(--colonne); margin: 0 auto; padding: 0 20px;
  height: var(--barre-hauteur);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.marque {
  display: inline-flex; align-items: center;
  text-decoration: none;
  font-weight: 900; letter-spacing: 0; font-size: 20px; line-height: 1.24;
  /* La marque ne prend pas le blanc plein : il est réservé aux titres, qui
     doivent primer sur elle. Comme dans l'application. */
  color: rgba(255, 255, 255, 0.55);
}
.disque {
  display: block;
  /* Le disque tient dans la hauteur des capitales, sans déborder ni au-dessus
     ni au-dessous. La boîte vaut 0,890 em et non la hauteur de capitale elle-
     même : le dessin n'occupe que 80 des 96 pixels du fichier, le reste étant
     transparent. 0,742 / (80/96) = 0,890 — l'encre fait alors pile 0,742 em,
     la hauteur d'une capitale d'Archivo 900, mesurée sur le rendu.
     ---------------------------------------------------------------------
     Les deux marges le recentrent sur les capitales, et non sur la ligne.
     `align-items: center` centre la boîte des marges sur la ligne, dont la
     moitié basse est une descente qu'un mot tout en capitales n'utilise pas :
     le disque tombait sous le milieu des lettres. Elles sont opposées à
     dessein — une marge seule ne décale que de la moitié de sa valeur, la
     boîte des marges grandissant, et c'est elle qui est centrée. Opposées,
     elles laissent cette boîte à sa hauteur et décalent du montant plein.
     La valeur vient d'un balayage mesuré à 20, 40 et 64 px de corps. */
  width: 0.853em; height: 0.853em;
  margin-top: -0.017em; margin-bottom: 0.017em;
}

/* Le sélecteur de langue : deux liens, pas un menu. À deux entrées, un menu
   demande un clic de plus pour montrer ce qu'un texte dit déjà. */
.langues { display: flex; gap: 2px; font-size: 13px; font-weight: 700; }
.langues a {
  text-decoration: none; color: var(--pale);
  padding: 5px 10px; border-radius: 8px;
}
.langues a[aria-current="true"] { color: var(--texte); background: var(--surface); }
.langues a:hover { color: var(--texte); }