/* Les deux rôles d'un bouton : l'action et la sélection. Leurs couleurs sont
   des jetons du thème (theme.css), clair et sombre.

   Les deux avaient le même fond plein, bleu nuit : « Liste », « Marché » ou
   « FR » se lisaient comme des boutons à cliquer, et « Chercher » ou
   « Suivant » comme des états. Désormais, un même bleu, deux manières :
    - l'ACTION (« cliquer fait quelque chose ») est pleine et immobile ;
    - la SÉLECTION (« c'est ici, c'est choisi ») est une teinte claire de ce
      bleu, bordée, que parcourt lentement une lumière douce et nacrée.
   Un fond plein bleu nuit à côté d'un bleu franc heurtait l'œil : la
   différence passe par la manière, pas par l'écart de couleur.

   Cette feuille est chargée APRÈS celles des composants : à spécificité égale,
   elle l'emporte sur leurs survols (« :hover »), qui ne doivent pas effacer un
   état choisi. Les composants ne gardent que leur forme. */

.btn,
.filtre-ville-bouton,
.filtres-tiroir-voir,
.conditions-bouton,
.partage-geste--fort,
.outil-ferme-geste,
.formule-bandeau-geste {
  background-color: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-ink);
}
.btn:hover:not(:disabled),
.filtre-ville-bouton:hover,
.filtres-tiroir-voir:hover,
.conditions-bouton:hover:not(:disabled),
.partage-geste--fort:hover:not(:disabled),
.outil-ferme-geste:hover,
.formule-bandeau-geste:hover {
  background-color: var(--action-bg-hover);
  border-color: var(--action-bg-hover);
}

/* La lumière est une zone claire peinte dans le fond, nacrée (un blanc teinté
   de rose d'un côté, de bleu de l'autre). Elle traverse le bouton toujours de
   gauche à droite : elle accélère en entrant, file au milieu et ralentit en
   sortant. Le motif, deux fois et demie plus long que le bouton, se répète et
   avance d'exactement sa longueur à chaque tour : la boucle n'a pas de retour.
   La lumière occupe la partie du motif qui, en début et en fin de tour, est
   hors du bouton : ses moments lents se passent là où on ne la voit pas. Un
   aller-retour ralenti aux bords laissait le rose posé sur le bord, comme
   bloqué. Peinte dans le fond, la lumière ne déborde pas et ne demande ni
   pseudo-élément ni « overflow ». Quand le système demande moins
   d'animations, theme.css ramène leur durée à zéro : il reste la teinte, sans
   mouvement. */
.workspace-tab-btn.active,
.lang-btn.active,
.market-view-switch button[aria-pressed="true"],
.filter-chip input:checked + .filter-chip-tag,
.filtre-actif-pop > .filtre-bouton,
.filtre-favoris:has(input:checked),
.veille-puce.active,
.management-section-btn.active,
.renta-metric-btn.renta-metric-active {
  background-color: var(--selection-bg);
  background-image: linear-gradient(110deg, transparent 52%, var(--reflet-rose) 63%, var(--reflet-clair) 70%,
    var(--reflet-ciel) 77%, transparent 88%);
  background-size: 250% 100%;
  background-repeat: repeat-x;
  border-color: var(--selection-line);
  color: var(--selection-ink);
  animation: reflet-selection 3.2s cubic-bezier(.25, 0, .75, 1) infinite;
}
/* Les onglets et les bascules n'ont pas de bordure : le même filet est dessiné
   à l'intérieur, pour que toutes les sélections aient le même contour. */
.workspace-tab-btn.active,
.lang-btn.active,
.market-view-switch button[aria-pressed="true"],
.management-section-btn.active {
  box-shadow: inset 0 0 0 1px var(--selection-line);
}
/* Pour un motif de 250 %, passer de 166,6667 % (250 / 150) à 0 % le décale
   d'exactement sa longueur, vers la droite : la fin du tour est identique à
   son début. */
@keyframes reflet-selection {
  from { background-position: 166.6667% 0; }
  to { background-position: 0% 0; }
}