/* do not underline link with an icon (ie: input with .ti-eye) */
a.link-secondary:hover:has(> i) {
  text-decoration: none;
}

.avatar-label {
  display: inline-block;
  font-size: 11px;
  background-color: #f5f4fa;
  padding: 0 4px 0 0;
  border-radius: 10px 4px 4px 10px;
  text-decoration: none !important;
}

.avatar-label:hover {
  background-color: #e8e6f3;
}

/*
 * Le thème 2a vit dans yollo-2a.css, que Meteor charge de lui-même (tous les .css du projet le
 * sont) juste après globals.css — pas d'@import ici, il ferait doublon.
 *
 * Cette règle universelle est la raison pour laquelle la police se pose ici et pas là-bas :
 * main.css est chargé en dernier, un `body { font-family }` en amont ne lui survivrait pas.
 * Archivo arrive de Google Fonts (voir main.hbs.html), Varela reste en repli.
 */
* {
  font-family: "Archivo", "Varela", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01";
}

@font-face {
  font-family: "Varela";
  src: url("/fonts/Varela/Varela-Regular.ttf") format("truetype");
}

/*
 * Un dégradé de bord à droite d'un conteneur qui défile horizontalement : dit qu'il y a d'autres
 * éléments hors champ, là où seule une demi-carte tronquée le laissait deviner. En `mask-image`
 * plutôt qu'un calque : rien à positionner, et le fondu suit le contenu quel que soit le thème.
 * Quand tout tient, le dernier élément a juste un bord droit adouci — discret, jamais faux.
 */
.scroll-fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}