/* ============================================================
   BB Site — les boutons « Afficher » et « Télécharger »

   Servie à Mes Documents, aux fichiers d'un événement et à l'onglet non média
   du lecteur. Son `?ver=` est `BB_Fichiers::VERSION`, littéral écrit à la main.

   ⚠️ **Cette feuille porte les invariants, pas les dimensions.** Les trois
   écrans n'ont pas la même échelle et n'ont pas à l'avoir : 44 px tactiles sur
   une carte de Mes Documents, compact sur une ligne du lecteur, intermédiaire
   sur un événement. Chaque page pose donc ses variables sur son conteneur, et
   personne ne redéclare une propriété d'ici — la redéclarer, c'est rouvrir les
   trois copies qu'on vient de fermer.
   ============================================================ */

/*
 * ⚠️ **Deux classes plus un élément, et c'est la cascade qui l'impose.** Les
 * trois pages rendent dans `.entry-content`, où Kadence déclare
 * `.entry-content a` — (0,1,1), donc plus fort qu'une classe seule, et notre
 * `color` comme notre `text-decoration` perdraient. `.bb-fbtns a.bb-fbtn` vaut
 * (0,2,1) et l'emporte sans s'accrocher à un identifiant de gabarit. Retirer le
 * `a` du sélecteur, c'est retomber à (0,2,0) et perdre la couleur du texte sans
 * rien perdre d'autre : un bouton rose au texte bleu.
 *
 * ⚠️ **Les trois couleurs portent `!important`, et c'est la seule chose qui
 * marche.** Le CSS personnalisé du Customizer donne sa couleur à chaque
 * catégorie d'événement, en quatre paires de règles :
 * `.cat_sorties a { color:#ff0099 !important }` et
 * `.cat_sorties a:hover { color:#ff0099 !important; border-bottom-color:#ff0099
 * !important }`, plus `cat_stages`, `cat_reunion-repas` et `cat_repetitions`.
 * TEC pose `cat_<slug>` sur le conteneur du post et nos boutons sont dedans :
 * sans `!important`, « Afficher » est **rose sur rose** — texte invisible — et
 * le survol garde le rose de la catégorie au lieu du blanc. Aucune spécificité
 * ne bat un `!important` ; il n'y a pas d'autre porte.
 *
 * ⚠️ **C'est aussi pour ça que la place est ici et nulle part ailleurs.** Un
 * `a.bb-download-button { color:#fff !important }` vivait dans le `wp_footer` de
 * `bb-evenements/includes/tec-fixes.php`, et son commentaire le disait posé là
 * « pour passer après la feuille de Kadence » — description fausse d'une règle
 * juste, qui a coûté sa suppression. La contrainte appartient au composant,
 * puisqu'elle vaut partout où il rend.
 *
 * ⚠️ Ces `!important` ne ferment rien aux appelants : les couleurs sont des
 * *invariants*, et les trois feuilles n'ont jamais eu à en poser. Ce qu'elles
 * règlent — dimensions, écart, rayon — passe par les variables, que le
 * `!important` ne touche pas.
 */

.bb-fbtns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-fbtn-gap, .5rem);
}

.bb-fbtns a.bb-fbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: .5em;
    min-height: var(--bb-fbtn-hauteur, 0);
    padding: var(--bb-fbtn-padding, .3rem .85rem);
    /*
     * ⚠️ **Le plein porte la même bordure que le creux**, de la couleur de son
     * fond donc invisible : sans elle les deux boutons ne feraient pas la même
     * taille, et « Télécharger » dépasserait « Afficher » de deux pixels sur
     * toute la liste.
     */
    border: var(--bb-fbtn-bordure, 1px) solid #ff0099;
    border-radius: var(--bb-fbtn-rayon, 4px);
    background: #ff0099;
    color: #fff !important;
    font-family: inherit;
    font-size: var(--bb-fbtn-taille, .9rem);
    font-weight: 600;
    /*
     * ⚠️ **1.2 se lit avec la hauteur de l'icône, juste dessous, et les deux
     * valeurs se déplacent ensemble ou pas du tout.** Voir `.bb-fbtn-icone`.
     */
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

/*
 * ⚠️ **« Télécharger » porte le creux en toutes circonstances**, seul ou
 * accompagné : dans une liste, un bouton qui change d'aspect selon son voisin se
 * lit comme une autre action. Ne pas réintroduire ce conditionnel par une règle
 * de premier ou de dernier enfant.
 */
.bb-fbtns a.bb-fbtn-second {
    background: transparent;
    color: #ff0099 !important;
}

/*
 * Au survol, les deux se rejoignent : une seule couleur d'appui, partout.
 *
 * ⚠️ `border-color` est `!important` pour la même raison que `color` : les
 * règles de catégorie repeignent aussi le `border-bottom-color`, hérité du
 * soulignement que TEC met sous ses liens. Sans lui, le bouton survolé prend un
 * trait rose sous un fond `#cc007a`.
 */
.bb-fbtns a.bb-fbtn:hover,
.bb-fbtns a.bb-fbtn:focus {
    background: #cc007a;
    border-color: #cc007a !important;
    color: #fff !important;
}

/*
 * ⚠️ **`1.2em` n'est pas une taille choisie à l'œil : c'est exactement le
 * `line-height` du bouton, et cette égalité est le correctif.** Deux boîtes de
 * même hauteur ne laissent rien à centrer, donc rien à arrondir. À `1.15em` le
 * dessin mesurait 17,25 px dans une ligne de 18 ; `align-items: center` le
 * posait donc à `+0,375 px`, sur une frontière de sous-pixel. Or le navigateur
 * **cale le texte sur des pixels entiers** — c'est le rasteriseur de police qui
 * le fait — et **ne cale pas le SVG** : selon la hauteur accumulée au-dessus, ce
 * `,375` s'arrondissait vers le haut sur une carte et vers le bas sur la
 * suivante. Mesuré : **1,03 px d'écart entre deux boutons rigoureusement
 * identiques**, le mot restant, lui, à 0,08 px près au centre.
 *
 * ⚠️ **Écrire ici une taille qui ne vaut pas le `line-height` fait revenir le
 * défaut**, et il ne se voit que sur les lignes dont ce qui précède ne tombe pas
 * juste — donc pas sur toutes, et **jamais dans les octets servis**. ⚠️ Retoucher
 * le *texte* pour rattraper l'écart, c'est corriger au mauvais endroit.
 *
 * L'icône se dimensionne en `em` pour suivre le corps du bouton, et
 * `flex-shrink: 0` l'empêche d'être écrasée quand le mot passe pleine largeur
 * sur un téléphone. Sa couleur vient de `currentColor`, posé dans le SVG.
 */
.bb-fbtns .bb-fbtn-icone {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}