/**
 * La barre d'accès rapide.
 *
 * Six tuiles de couleur, flottantes sur toutes les pages. Mesures
 * relevées sur la production : tuile de 90 px, pictogramme de 50,
 * libellé de 13 px blanc, réserve de 20 px en haut et 10 en bas.
 *
 * LE BLANC EST CELUI DE LA MAQUETTE, ET IL EST PORTÉ AU REGISTRE. Sur
 * l'ambre de la tuile « Rechercher », un libellé blanc de 13 px donne
 * 1,84:1 là où le référentiel en demande 4,5. Le thème sait pourtant
 * renverser l'encre sur les aplats clairs — « --couleur-sur-rubrique »
 * donnerait le marine, et 8,76. On ne s'en sert pas ici : les
 * pictogrammes fournis sont des images blanches, et une encre marine
 * sous un pictogramme blanc ferait une tuile à deux voix. Le jour où
 * l'encre change, ce sont les pictogrammes qu'il faut reprendre, pas
 * cette règle.
 */

.barre-acces {
  --barre-tuile: 5.625rem;               /* 90 px */
  --barre-picto: 3.125rem;               /* 50 px */

  /*
   * LE DÉFAUT EST LE MARINE, ET IL DOIT ÊTRE REPOSÉ ICI.
   *
   * « --couleur-rubrique » s'hérite de la page : une tuile à laquelle
   * on n'a pas choisi de couleur prenait donc celle de la page qu'on
   * regardait, et changeait de teinte d'une page à l'autre. La barre
   * est la même partout ; sa couleur par défaut ne peut pas dépendre de
   * ce qu'il y a derrière. Relevé au banc : la tuile « Newsletters »,
   * laissée sans couleur, sortait en bleu sur l'accueil.
   *
   * Les tuiles qui portent une classe de rubrique la redéclarent sur
   * elles-mêmes et gardent donc la main.
   */
  --couleur-rubrique: var(--c-marine);

  position: fixed;
  top: 50%;
  right: 0;
  translate: 0 -50%;

  /*
   * Sous le menu déployé (60) et sous le bandeau de consentement, au-
   * dessus du contenu et du retour en haut de page (900) : la barre est
   * une permanence, pas une alerte.
   */
  z-index: 800;
}

.barre-acces__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barre-acces__item { position: relative; }

/* ---------------------------------------------------------------
 * La tuile
 *
 * Les six tuiles portent le même dessin, la recherche comprise : ce
 * sont des commandes de même rang, et rien ne justifierait qu'on les
 * distingue à l'œil parce que l'une ouvre une fenêtre.
 * --------------------------------------------------------------- */

.barre-acces__tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  box-sizing: border-box;
  width: var(--barre-tuile);
  height: var(--barre-tuile);
  padding: 0.5rem 0.4rem;
  background-color: var(--couleur-rubrique);
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

/*
 * Le survol assombrit l'aplat plutôt que de le remplacer : la couleur
 * de la tuile est son identité, et la production faisait de même — un
 * voile noir à 30 %.
 */
.barre-acces__tuile:hover,
.barre-acces__tuile:focus-visible {
  background-color: color-mix(in srgb, var(--couleur-rubrique) 70%, #000);
}

.barre-acces__tuile:focus-visible {
  outline: var(--focus-epaisseur) solid #fff;
  outline-offset: calc(-2 * var(--focus-epaisseur));
}

.barre-acces__picto {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--barre-picto);
  object-fit: contain;
}

.barre-acces__libelle {
  font-size: 0.8125rem;                  /* 13 px */
  line-height: 1.3;
  color: inherit;
}

/* ---------------------------------------------------------------
 * SUR TÉLÉPHONE : EN BAS, À L'HORIZONTALE
 *
 * 90 px de large sur un écran de 390, c'est près du quart de la mesure,
 * pris en permanence et sur toute la hauteur. En bas, la largeur revient
 * au texte et les entrées tombent sous le pouce.
 *
 * Les libellés s'effacent À L'ŒIL SEULEMENT : six entrées sur 390 px
 * laissent 65 px chacune, où « Newsletters » en 13 px ne tient pas. Ils
 * restent dans le balisage, donc annoncés — une tuile sans nom ne dirait
 * plus rien à personne qui n'y voit pas.
 *
 * L'autre disposition — la barre reste sur le côté — est un réglage du
 * site : c'est une proposition à faire à la responsable, et elle doit
 * pouvoir se montrer dans les deux états.
 * --------------------------------------------------------------- */

@media (max-width: 47.999rem) {

  .barre-acces--mobile-bas {
    --barre-hauteur: 4rem;

    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    translate: none;
  }

  .barre-acces--mobile-bas .barre-acces__liste { flex-direction: row; }

  .barre-acces--mobile-bas .barre-acces__item { flex: 1 1 0; }

  .barre-acces--mobile-bas .barre-acces__tuile {
    width: 100%;
    height: var(--barre-hauteur);
    padding: 0.25rem;
  }

  .barre-acces--mobile-bas .barre-acces__picto { height: 1.75rem; }

  /* Effacé à l'œil, gardé à l'oreille — la technique du socle. */
  .barre-acces--mobile-bas .barre-acces__libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /*
   * La barre couvrirait la fin du pied de page, et le retour en haut
   * tomberait dessus. Les deux reculent d'autant.
   */
  body:has(.barre-acces--mobile-bas) { padding-bottom: 4rem; }

  body:has(.barre-acces--mobile-bas) .haut-de-page--flottant {
    bottom: calc(4rem + var(--e-2xs));
  }

  /* Sur le côté, la barre se contente de rapetisser : à 90 px elle
     mangerait le quart de l'écran. */
  .barre-acces--mobile-cote {
    --barre-tuile: 4.25rem;
    --barre-picto: 2rem;
  }

  .barre-acces--mobile-cote .barre-acces__libelle { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-acces__tuile { transition: none; }
}