/* =====================================================================
   Styles communs à tout le site (public et administration), chargés par
   header.php, header2.php et header3.php après Bootstrap.
   ===================================================================== */

/* Libellés des formulaires. Les pages les placent dans une colonne
   col-sm-2, mais sans .row autour : le libellé se retrouve AU-DESSUS du
   champ, tout en restant limité à un sixième de la largeur. D'où un retour
   à la ligne à chaque mot (« Prix / abonnement / (300 / caractères max.) »).
   En pleine largeur, il tient sur une ligne et ne se coupe que si l'écran
   est vraiment trop étroit. Aucun formulaire du site n'aligne libellé et
   champ côte à côte (aucun .form-group.row) : rien d'autre ne bouge. */
.form-group > label.control-label[class*="col-sm-"] {
    max-width: 100%;
}

/* Fiche du loto : « Copier l'e-mail de l'organisateur » est un bouton (il copie,
   il ne navigue pas) ; il prend la taille et la graisse du texte autour,
   comme le lien du téléphone à côté. */
.loto-mail {
    font: inherit;
    vertical-align: baseline;
}

/* Administration (gestion_entete, gestion_comm) : champs de lien en
   size="60", soit ~480 px. Sur un téléphone, ils élargissaient toute la page :
   le bouton du menu sortait de l'écran et le panneau ouvert restait caché à
   droite. Ils se limitent désormais à la largeur disponible. */
.form-input {
    max-width: 100%;
}
.form-input.ml-3 {
    max-width: calc(100% - 1rem);
}
/* Idem pour les champs « Choisir un fichier » (~294 px de large par défaut). */
input[type="file"] {
    max-width: 100%;
}
/* Boutons d'envoi au libellé long (« Ajouter/Modifier la communication… ») :
   ils passent à la ligne au lieu d'élargir la page sur un petit écran. */
input[type="submit"].btn,
button.btn {
    max-width: 100%;
    white-space: normal;
}
/* Titres des pages (« Gestion des communications ») : un mot plus large
   que l'écran est coupé au lieu de dépasser, et les grands titres
   rétrécissent un peu sous 400 px. */
.content h1, .content h2, .content h3, .content h4 {
    overflow-wrap: break-word;
}
@media (max-width: 399.98px) {
    .content h1 { font-size: 1.75rem; }
}