/* ==================================================
   BLOC — BARRE DE FILTRES
   D'après la maquette 381:1855
================================================== */

/* La barre est une carte, pas une rangée de champs posés sur le fond.
   C'est ce qui la détache du hero qui la précède et de la liste qui la
   suit, sans avoir à les séparer par du vide. */
.barre_filtres__form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--v-radius-lg);
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    box-shadow: 0 4px 16px rgba(56, 49, 111, 0.08);
}

/* --------------------------------------------------
   LE CHAMP DE RECHERCHE
-------------------------------------------------- */

.barre_filtres__recherche {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 2 1 260px;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: var(--v-radius-md);
    background: #fcfcfa;
    border: 1px solid #d9d6d1;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.barre_filtres__recherche:hover {
    border-color: var(--v-gris-400);
}

/* Le champ de recherche est rempli : on le voit sans lire son contenu.
   Un filtre posé doit se remarquer même quand la valeur est courte. */
.barre_filtres__recherche:has(input:not(:placeholder-shown)) {
    background: var(--v-blanc);
    border-color: var(--v-violet-500);
}

/* La petite croix native du champ de recherche : elle est grise et
   minuscule sur WebKit, on la laisse mais on lui donne de la place. */
.barre_filtres__recherche input::-webkit-search-cancel-button {
    cursor: pointer;
}

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

.barre_filtres__recherche input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-titre);
}

.barre_filtres__recherche input::placeholder {
    color: var(--v-texte-meta);
}

.barre_filtres__recherche input:focus {
    outline: none;
}

/* Le cadre prend le focus à la place du champ : c'est lui qu'on voit. */
.barre_filtres__recherche:focus-within,
.barre_filtres__champ:focus-within {
    background: var(--v-blanc);
    border-color: var(--v-violet-500);
    box-shadow: 0 0 0 3px rgba(72, 64, 140, 0.12);
}

/* --------------------------------------------------
   LES FACETTES

   L'intitulé vit dans la pastille, au-dessus de la valeur. Le menu
   déroulant reste un <select> natif — il s'ouvre correctement au
   clavier et sur mobile — mais rendu transparent : c'est la pastille
   qui porte le cadre, et le chevron est dessiné par-dessus.
-------------------------------------------------- */

/* Les pastilles se partagent la place à parts égales, quel que soit le
   texte qu'elles portent.

   Avec une base automatique, « Toutes les formations » poussait sa
   voisine et « Toutes » se réduisait à un moignon : poser un filtre
   redessinait toute la barre, et une facette finissait toujours par
   paraître minuscule. La base à zéro et le débordement contenu leur
   donnent la même largeur, et le texte trop long se coupe proprement
   au lieu d'élargir sa case. */
.barre_filtres__champ {
    /* Les marges intérieures, nommées : le menu s'en sert pour
       recouvrir toute la pastille (voir plus bas). */
    --pastille-haut: 12px;
    --pastille-droite: 32px;
    --pastille-bas: 12px;
    --pastille-gauche: 14px;
    /* Hauteur de l'intitulé, plus l'écart qui le sépare de la valeur. */
    --pastille-etiquette: calc(0.53125rem * 1.2 + 1px);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: var(--pastille-haut) var(--pastille-droite) var(--pastille-bas) var(--pastille-gauche);
    border-radius: var(--v-radius-md);
    background: #fcfcfa;
    border: 1px solid #d9d6d1;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.barre_filtres__champ:hover {
    border-color: var(--v-gris-400);
}

/* Une facette posée se distingue de celles restées sur « Toutes » :
   fond blanc et liseré violet, sans avoir à lire la valeur. */
.barre_filtres__champ:has(select option:checked:not([value=""])),
.barre_filtres__champ--periode:has(input:not([value=""])) {
    background: var(--v-blanc);
    border-color: var(--v-violet-500);
}

.barre_filtres__champ > label,
.barre_filtres__etiquette {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--v-font-corps);
    font-size: 0.53125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--v-gris-400);
}

/* Toute la pastille ouvre le menu, pas seulement la ligne de la valeur.
   Le <select> ne couvrait que cette ligne : un doigt posé sur
   l'intitulé, dans la marge ou sur le chevron ne faisait rien, et la
   pastille semblait morte à moitié.

   Il déborde donc jusqu'aux bords de la pastille par des marges
   négatives, et rend la place par un rembourrage égal : le texte reste
   où il était, mais la surface cliquable est la pastille entière.
   L'intitulé reste lisible au travers — le menu est transparent. */
.barre_filtres__champ > select {
    appearance: none;
    -webkit-appearance: none;
    /* Largeur automatique : c'est l'étirement de la colonne flex qui,
       avec les marges négatives, l'amène jusqu'aux bords. */
    width: auto;
    /* Sans cette largeur nulle, le menu réclame la largeur de sa plus
       longue option et fait gonfler sa pastille. */
    min-width: 0;
    text-overflow: ellipsis;
    margin:
        calc(-1 * (var(--pastille-haut) + var(--pastille-etiquette)))
        calc(-1 * var(--pastille-droite))
        calc(-1 * var(--pastille-bas))
        calc(-1 * var(--pastille-gauche));
    padding:
        calc(var(--pastille-haut) + var(--pastille-etiquette))
        var(--pastille-droite)
        var(--pastille-bas)
        var(--pastille-gauche);
    border: 0;
    border-radius: inherit;
    background: transparent;
    font-family: var(--v-font-corps);
    font-size: 0.78125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-texte-titre);
    cursor: pointer;
}

.barre_filtres__champ > select:focus {
    outline: none;
}

/* Le chevron, posé sur la pastille et non sur le menu : un <select>
   sans apparence native n'en dessine plus. */
.barre_filtres__champ::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 11px;
    height: 7px;
    margin-top: -3px;
    background: url("../../images/ui/chevron.svg") no-repeat center / contain;
    pointer-events: none;
}

/* La période porte deux champs de date : elle n'a pas de menu, donc pas
   de chevron. */
.barre_filtres__champ--periode {
    --pastille-droite: 14px;

    flex: 1 1 0;
    min-width: 250px;
}

/* Le champ de recherche se saisit partout dans son cadre : un clic sur
   la loupe ou dans la marge y place le curseur (barre_filtres.js). */
.barre_filtres__recherche {
    cursor: text;
}

.barre_filtres__dates input {
    cursor: pointer;
}

.barre_filtres__champ--periode::after { content: none; }

.barre_filtres__dates {
    display: flex;
    align-items: center;
    gap: 6px;
}

.barre_filtres__dates input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--v-font-corps);
    font-size: 0.78125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

.barre_filtres__dates input:focus { outline: none; }

.barre_filtres__fleche {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   ACTIONS
-------------------------------------------------- */

/* « Réinitialiser » est orange : c'est une sortie, pas l'action
   principale de la barre — laquelle est de choisir une facette. */
.barre_filtres__reset {
    flex: 0 0 auto;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-action-cta);
    text-decoration: none;
    white-space: nowrap;
}

.barre_filtres__reset:hover { text-decoration: underline; }

/* « Filtrer » déclenche la recherche, et il est donc toujours visible.
   Il était masqué dès que le script prenait la main, parce que la barre
   se rechargeait à chaque changement de menu — ce qui interdisait de
   poser deux critères d'affilée. */
.barre_filtres__valider {
    flex: 0 0 auto;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--v-radius-pill);
    background: var(--v-action);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-inverse);
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.barre_filtres__valider:hover {
    opacity: 0.9;
}

.barre_filtres__valider:active {
    transform: translateY(1px);
}

/* L'étiquette que seuls les lecteurs d'écran ont à entendre : le champ
   de recherche et les deux dates portent déjà leur sens à l'œil, par le
   picto et par l'intitulé de la pastille. */
.barre_filtres__masque {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------
   LE REPLI, D'APRÈS LA MAQUETTE MOBILE 390

   Elle ne montre pas six menus empilés sous la recherche : elle montre
   un bouton. Six pastilles à pleine largeur font huit cents pixels de
   haut, et l'on défile la barre au lieu de défiler les résultats.

   Le bouton n'existe qu'à partir du moment où le script a marqué le
   formulaire : sans JavaScript, il reste invisible et le panneau
   ouvert. Une barre longue vaut mieux qu'un panneau qu'on ne peut plus
   ouvrir.
-------------------------------------------------- */

.barre_filtres__replier {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 18px;
    border: 1px solid #d9d6d1;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    cursor: pointer;
}

/* Le nombre de filtres posés, en pastille : replié, c'est la seule
   chose qui dise qu'il se passe quelque chose derrière le bouton. */
.barre_filtres__replier-compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--v-radius-pill);
    background: var(--v-violet-500);
    font-size: 0.6875rem;
    color: var(--v-texte-inverse);
}

/* Le chevron du bouton, qui se retourne à l'ouverture. */
.barre_filtres__replier::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.barre_filtres__replier[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
}

/* Les facettes forment un bloc : sur grand écran il se comporte comme
   s'il n'existait pas, grâce à `display: contents`. Les pastilles
   restent alors des enfants directs de la barre et gardent leur
   répartition. */
.barre_filtres__facettes {
    display: contents;
}

/* De même pour les actions : sur grand écran, « Filtrer » et
   « Réinitialiser » sont deux éléments de la barre, pas un groupe. */
.barre_filtres__actions {
    display: contents;
}

@media (max-width: 767px) {

    .barre_filtres__form.est-repliable .barre_filtres__replier {
        display: inline-flex;
    }

    /* Le panneau redevient une boîte : c'est elle qu'on masque. */
    .barre_filtres__form.est-repliable .barre_filtres__facettes {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        flex: 1 1 100%;
    }

    .barre_filtres__form.est-repliable
    .barre_filtres__replier[aria-expanded="false"] + .barre_filtres__facettes {
        display: none;
    }

    /* Chaque facette prend la largeur : deux menus côte à côte sur
       350 px ne laissent pas la place de lire leur valeur. */
    .barre_filtres__form.est-repliable .barre_filtres__champ {
        flex: 1 1 100%;
        min-width: 0;
    }

    .barre_filtres__actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1 1 100%;
    }

    .barre_filtres__valider {
        flex: 1 1 auto;
    }
}

/* Sous 992 px la barre ne tient plus sur une ligne : la recherche prend
   toute la largeur et les facettes se répartissent en dessous. */
@media (max-width: 991px) {
    .barre_filtres__recherche {
        flex: 1 1 100%;
    }

    .barre_filtres__champ {
        flex: 1 1 180px;
        min-width: 180px;
    }
}

@media (max-width: 575px) {
    .barre_filtres__form {
        padding: 14px;
    }

    .barre_filtres__champ,
    .barre_filtres__champ--periode {
        flex: 1 1 100%;
    }
}