/* Pastille « compte + langue » en haut à droite, identique sur toutes les pages (modèle : page d’accueil).
 * À ajouter sur le conteneur des boutons de langue : class="… bl-pill" (+ bl-pill-inline s’il est placé dans un en-tête).
 * Le compte (photo, prénom, menu) est rendu par /assets/account-badge.js dans <span data-account-badge>.
 * Chargé après les styles de chaque page : les sélecteurs doublés (.bl-pill.bl-pill) l’emportent sur ceux des pages. */
.bl-pill.bl-pill{
  position:fixed;top:20px;right:20px;left:auto;bottom:auto;z-index:1000;
  display:flex;align-items:center;gap:2px;margin:0;padding:4px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid #f8bbd0;border-radius:30px;box-shadow:0 4px 18px rgba(142,20,73,.12);
  font-family:Jost,system-ui,sans-serif;pointer-events:auto;
}
.bl-pill.bl-pill-inline{position:relative;top:auto;right:auto;z-index:60}
.bl-pill.bl-pill > button,.bl-pill.bl-pill > a{
  display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;
  border:0;background:transparent;box-shadow:none;cursor:pointer;text-decoration:none;
  font:500 .78rem/1.5 Jost,system-ui,sans-serif;letter-spacing:.05em;text-transform:none;
  padding:6px 14px;border-radius:24px;color:#8e1449;transition:background .3s ease,color .3s ease;
}
.bl-pill.bl-pill > button:hover,.bl-pill.bl-pill > a:hover{background:#fff0f5;color:#8e1449}
.bl-pill.bl-pill > .active,.bl-pill.bl-pill > [aria-current="page"],.bl-pill.bl-pill > [aria-pressed="true"]{background:#c2185b;color:#fff;font-weight:500}
.bl-pill.bl-pill > button:focus-visible,.bl-pill.bl-pill > a:focus-visible{outline:3px solid rgba(194,24,91,.35);outline-offset:2px}
/* Pastille sans boutons de langue (pages dont la langue dépend du cours) : pas de séparateur. */
.bl-pill [data-account-badge]:last-child .bl-badge-sep{display:none}
@media(max-width:680px){
  /* Sur téléphone : alignée sur les bords du menu (12 px) et au-dessus de lui, sans le chevaucher. */
  .bl-pill.bl-pill:not(.bl-pill-inline){top:12px;right:12px}
  .bl-pill.bl-pill > button,.bl-pill.bl-pill > a{min-height:44px;min-width:48px}
}
/* Reste visible (et utilisable) au-dessus de l’écran de connexion des pages privées. */
#site-language-switch.bl-pill{z-index:10001}
/* Les en-têtes des pages privées commencent sous la barre du haut (assets/site-nav.css) : plus de place à réserver. */
.shell > .topbar .topbar-actions.topbar-actions{margin-right:0}
@media(max-width:760px){.shell > .topbar.topbar,.shell > .top.top{margin-top:0}}
@media print{.bl-pill.bl-pill{display:none}}