/*
 * Listes déroulantes du formulaire — corrections de bootstrap-select.
 *
 * Chargé après `style.css` et `default.css` : ces règles corrigent la
 * bibliothèque, elles doivent donc l'emporter sur elle sans écraser la charte
 * du site.
 */

/*
 * Le menu ne dépasse jamais la largeur de son champ.
 *
 * bootstrap-select pose `min-width: 100%` et laisse le menu s'élargir jusqu'au
 * plus long libellé. Sur une liste de concessions — « FAIR PLAY LA DEFENSE SA -
 * COURBEVOIE - 119 BIS BOULEVARD DE VERDUN - 92400 », cent cinq caractères —,
 * mesuré en production : 1206 px de menu pour un champ de 491, soit 686 px
 * hors de la carte du formulaire, par-dessus le contenu de la page, et une
 * barre de défilement horizontale sur toute la page.
 */
.bootstrap-select .dropdown-menu {
    max-width: 100%;
}

/*
 * Un libellé trop long passe à la ligne au lieu d'élargir le menu.
 *
 * Sans cette règle, `max-width` ci-dessus tronquerait la liste à la largeur du
 * champ tout en laissant le texte déborder : le visiteur lirait « FAIR PLAY LA
 * DEFENSE SA - COURBE » sans jamais savoir de quelle concession il s'agit.
 * `overflow-wrap: anywhere` plutôt que `break-word` : une adresse sans espace
 * (un code, une URL) doit se couper elle aussi.
 */
.bootstrap-select .dropdown-menu .text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * La sonde de mesure de bootstrap-select échappe aux deux règles ci-dessus.
 *
 * Pour décider de la hauteur du menu — c'est tout le rôle du `data-size="10"`
 * posé par `src/templates/forms/_select.twig` —, la bibliothèque clone une
 * option dans un conteneur qu'elle pose en enfant direct de <body> et à qui
 * elle impose `width: 0`, afin d'en lire la largeur naturelle. Le
 * `max-width: 100%` ci-dessus ramène donc ce clone à zéro de large, et la
 * césure y étire l'option sur toute sa hauteur : mesuré sur la version 3,
 * **789 px pour une entrée qui en fait 33**.
 *
 * Le menu se voyait alors accorder dix fois cette hauteur — 7890 px —, c'est-
 * à-dire aucune borne du tout : il ne tenait plus sous le champ, et Popper le
 * retournait par-dessus la question à laquelle il est censé répondre. Les deux
 * corrections de largeur avaient ainsi défait, sans bruit, le bornage en
 * hauteur qui les accompagnait.
 *
 * Un vrai selectpicker n'est jamais enfant direct de <body> : il vit dans le
 * formulaire. Le sélecteur ne vise donc que la sonde, et le menu affiché garde
 * l'un et l'autre comportement.
 */
body > .bootstrap-select .dropdown-menu {
    max-width: none;
}

body > .bootstrap-select .dropdown-menu .text {
    white-space: nowrap;
    overflow-wrap: normal;
}

/*
 * Les options gardent la taille du champ.
 *
 * Mesuré sur reserver-un-essai.fr : le champ à 16 px, les options à **20 px** —
 * une liste écrite plus gros que le formulaire qui la porte, et dix entrées qui
 * occupent 384 px de haut. La règle vient de Bootstrap (`.dropdown-menu` à
 * `1rem`) recomposée par le thème du site ; on la ramène à la taille d'un
 * `.form-control`, qui est précisément `1rem` chez Bootstrap 4.
 *
 * Le sélecteur porte sur `.text` — l'élément qui contient réellement le libellé.
 * `.dropdown-item` résiste à `font-size: inherit` sur ce thème, et c'est sans
 * conséquence : c'est le texte qu'on voit.
 */
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu .dropdown-item .text {
    font-size: 1rem;
    line-height: 1.35;
}

/*
 * Et une option ne prend que la hauteur de son texte.
 *
 * Sans cela, chaque entrée occupe 38 px pour une ligne de 21 : sur une liste de
 * concessions, le visiteur fait défiler deux fois plus pour voir la même chose.
 */
.bootstrap-select .dropdown-menu .dropdown-item {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}