/**
 * Le retour en haut de page.
 *
 * Un lien vers l'ancre de l'en-tête, écrit en fin de contenu. Sans
 * JavaScript il reste dans le flux et fonctionne tel quel ; le script
 * lui ajoute « --flottant », et c'est cette classe seule qui le décolle.
 * La feuille ne suppose donc jamais que le script est passé.
 */

.haut-de-page {
  --haut-de-page-cote: 44px;   /* Cible tactile, comme les boutons. */
  --haut-de-page-fleche: 14px;

  /*
   * L'entrée décélère : vive au départ, elle s'arrête sans à-coup.
   * C'est une courbe propre au composant et non le --transition du
   * socle, qui dure 200 ms — trop court pour qu'une décélération se
   * voie. Le survol, lui, garde la transition commune : deux vitesses
   * pour deux gestes, l'un qui arrive à l'écran, l'autre qui répond à
   * la souris.
   */
  --haut-de-page-entree: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;
  align-items: center;
  gap: var(--e-2xs);
  margin-block: var(--e-m);
  padding: var(--e-2xs) var(--e-s);
  min-height: var(--haut-de-page-cote);
  background-color: var(--couleur-titre);
  color: var(--c-blanc);
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: var(--graisse-medium);
  text-decoration: none;
  border: 1px solid var(--couleur-titre);
  border-radius: var(--rayon-bouton);
  transition: background-color var(--transition), color var(--transition);
}

/*
 * La flèche est le chevron simple de la charte, tourné d'un quart de
 * tour. Un seul dessin sert donc les lignes de l'encadré coloré et ce
 * bouton-ci : c'est la même forme, elle n'a pas à exister deux fois.
 */
.haut-de-page__fleche {
  flex: none;
  width: var(--haut-de-page-fleche);
  height: var(--haut-de-page-fleche);
  background-color: currentcolor;
  mask-image: var(--chevron-simple-fichier);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  rotate: -90deg;
}

/* Le survol vide l'aplat, comme les boutons à pictogramme. */
.haut-de-page:hover,
.haut-de-page:focus-visible {
  background-color: var(--c-blanc);
  color: var(--couleur-titre);
}

/* ---------------------------------------------------------------
 * L'état flottant, posé par le script
 * --------------------------------------------------------------- */

.haut-de-page--flottant {
  position: fixed;
  right: var(--e-m);
  bottom: var(--e-m);
  z-index: 900;
  margin: 0;
  padding: 0;
  width: var(--haut-de-page-cote);
  min-height: 0;
  height: var(--haut-de-page-cote);
  justify-content: center;
  gap: 0;

  /*
   * Caché tant que l'en-tête est à l'écran. « visibility » en plus de
   * l'opacité : un lien transparent resterait cliquable et tabulable,
   * ce qui donnerait une cible invisible au coin de la page.
   */
  opacity: 0;
  visibility: hidden;
  translate: 0 var(--e-m);
  transition: opacity var(--haut-de-page-entree),
              visibility var(--haut-de-page-entree),
              translate var(--haut-de-page-entree),
              background-color var(--transition),
              color var(--transition);
}

.haut-de-page--flottant .haut-de-page__libelle {
  /* Le libellé reste lu, il n'est plus affiché. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.haut-de-page--visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/*
 * Il se tabule même invisible tant qu'il n'a pas pris « visibility:
 * hidden » ; la prise de focus le ramène donc à l'écran plutôt que de
 * déplacer le focus vers un élément que personne ne voit.
 */
.haut-de-page--flottant:focus-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/*
 * Qui demande moins d'animation n'a ni glissement ni décélération : le
 * bouton se montre et se cache, c'est tout.
 */
@media (prefers-reduced-motion: reduce) {
  .haut-de-page--flottant {
    transition: opacity var(--transition), visibility var(--transition);
  }
  .haut-de-page--flottant,
  .haut-de-page--visible { translate: none; }
}