/*
 * En-tête mobile : il s'efface quand on descend, il revient quand on remonte.
 *
 * Sur un téléphone, un en-tête collé en permanence mange une bande de 66 px sur
 * une hauteur d'écran qui en fait 700 : presque 10 % de la page, en continu,
 * pour une barre dont on n'a besoin que par intermittence. On la masque donc
 * pendant la lecture et on la ramène au premier geste vers le haut — le retour
 * est instantané, sans avoir à remonter jusqu'en haut de la page.
 *
 * Le comportement est piloté par js/header.js, qui pose .yj-head-hidden sur
 * <html>. Sans JavaScript, l'en-tête reste simplement collé comme avant.
 *
 * Au-delà de 900 px, rien ne change : sur un écran large, la barre ne gêne pas.
 */

@media (max-width: 900px) {
  body > header,
  body > .site-head {
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }

  .yj-head-hidden body > header,
  .yj-head-hidden body > .site-head {
    /* 1px de plus que la hauteur : la bordure basse ne doit pas dépasser. */
    transform: translateY(calc(-100% - 1px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body > header,
  body > .site-head {
    transition: none;
  }
}