/* ==================================================
   BARRE DE RÉSULTATS
   D'après la maquette 365:1156

   Sous la carte des filtres et en dehors d'elle : le compte à gauche,
   les filtres actifs en bulles, la bascule d'affichage tout à droite.
================================================== */

.barre_resultats {
    padding: 20px 0 4px;
}

.barre_resultats__ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.barre_resultats__compte {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-titre);
    white-space: nowrap;
}

/* --------------------------------------------------
   LES FILTRES ACTIFS

   Chaque bulle est un lien qui retire son propre filtre. Sans elles, un
   filtre posé n'était visible que dans le menu qui l'avait posé : une
   liste courte se lisait comme un catalogue pauvre, et non comme un
   résultat filtré qu'on peut élargir.
-------------------------------------------------- */

.barre_resultats__bulles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.barre_resultats__bulle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-family: var(--v-font-corps);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-violet-700);
    text-decoration: none;
}

.barre_resultats__bulle:hover {
    background: var(--v-sable-300);
    color: var(--v-violet-700);
}

.barre_resultats__croix {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    background: url("../../images/ui/fermer.svg") no-repeat center / contain;
}

/* --------------------------------------------------
   LA BASCULE GRILLE / LISTE

   Poussée à droite par la marge automatique, et non par un intercalaire
   vide : elle reste collée au bord même quand les bulles passent à la
   ligne.
-------------------------------------------------- */

.barre_resultats__vue {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    border-radius: var(--v-radius-pill);
    background: #efebe5;
}

.barre_resultats__onglet {
    padding: 7px 16px;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-meta);
    text-decoration: none;
    white-space: nowrap;
}

/* L'onglet actif se détache par un fond blanc plein, pas par la couleur
   d'action : ce n'est pas un bouton qu'on presse, c'est l'état courant. */
.barre_resultats__onglet.est-actif {
    background: var(--v-blanc);
    color: var(--v-violet-700);
}

@media (max-width: 575px) {
    .barre_resultats__vue {
        margin-left: 0;
    }
}