/*
 * 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;
}

/*
 * 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;
}
