/* Le bouton « police » du bandeau (site des élèves seulement) : l'habillage du
 * bouton et de son menu. Les polices elles-mêmes sont ailleurs — une feuille
 * par police, dans docs/assets/polices/, chargée seulement quand l'élève la
 * choisit.
 *
 * Les pièces :
 *   - overrides/partials/polices.html   le bouton et son menu
 *   - overrides/main.html               repose le choix avant le rendu
 *   - docs/assets/polices.js            écoute les clics
 *   - docs/assets/polices/<nom>.css     les @font-face et la variable Material
 *   - extra.polices de mkdocs.yml       les entrées du menu
 * Le `nom` d'une entrée nomme à la fois sa feuille et la valeur de l'attribut
 * data-police posé sur <html> ; `defaut` n'a pas de feuille et rend donc la
 * police du thème.
 *
 * Les fichiers de police sont dans le dépôt : aucune requête vers un CDN
 * depuis le réseau du collège, et le bouton fonctionne hors ligne.
 */

/* Ces polices sont dessinées pour être aérées : les yeux des lettres et les
   interlignes serrés du gabarit se contredisent. On desserre le texte courant,
   sans toucher aux titres. Rien en revanche sur la taille du texte : Material
   la fixe à .8rem, puis la ramène à .68rem sur petit écran, et une valeur en
   dur ici écraserait la seconde. */
html[data-police="opendyslexic"] .md-typeset,
html[data-police="luciole"] .md-typeset {
  line-height: 1.8;
}

/* Le menu reprend celui des langues de Material (.md-select), à une chose
   près : ses entrées sont des <button>, atteignables au clavier, là où la
   recette d'origine emploie des <a> sans href qui ne prennent pas le focus.
   Il faut alors annuler l'habillage propre au bouton. */
.md-select__list .md-police {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* Material ouvre ce menu centré sous son bouton — réglage fait pour le
   sélecteur de langue, dont les entrées sont courtes. Le nôtre est le dernier
   bouton du bandeau et ses entrées sont longues : centré, il sortait de
   l'écran par la droite. On l'aligne donc sur le bord droit du bouton, la
   pointe du menu avec. */
.md-polices .md-select__inner {
  left: auto;
  right: 0;
  transform: translate3d(0, 0.3rem, 0);
}

.md-polices:focus-within .md-select__inner,
.md-polices:hover .md-select__inner {
  transform: translate3d(0, 0, 0);
}

.md-polices .md-select__inner::after {
  left: auto;
  margin-left: 0;
  right: 0.5rem;
}

/* L'entrée active, seul retour visible du choix une fois le menu refermé. */
.md-select__list .md-police[aria-current="true"] {
  font-weight: 700;
}