/* Saisie des téléphones (intl-tel-input), commune à tous les formulaires */

/* Le conteneur du drapeau prend toute la largeur, comme les autres champs */
.iti {
  display: block;
}

/* Champ dans une rangée flex (formulaires crispy « d-flex flex-row », comme la
   modale d'ajout d'usager) : champ, erreur et aide s'empilent en pleine largeur */
.d-flex.flex-row:has(> .iti) {
  flex-wrap: wrap;
}

.d-flex.flex-row:has(> .iti) > * {
  flex-basis: 100%;
  text-align: start;
}

/* Inscription TAD solidaire : même hauteur que le champ e-mail flottant, et
   libellé de la couleur du texte voisin (blanc sur le dégradé mobile, noir sur
   ordinateur, comme les paragraphes d'auth.css) */
.phone_number-field__input {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

label[for="id_phone_number"] {
  color: #fff;
}

@media (min-width: 768px) {
  label[for="id_phone_number"] {
    color: black;
  }
}

/* Numéro saisi en noir, y compris pendant la saisie (:focus de Bootstrap) :
   bien distinct de l'exemple (TS-73) */
.iti input[type="tel"],
.iti input[type="tel"]:focus {
  color: #000;
}

/* Exemple de numéro en italique et nettement plus clair qu'une vraie valeur :
   il ne doit pas passer pour un numéro déjà saisi (TS-24) */
input[type="tel"]::placeholder {
  font-style: italic;
  color: var(--bs-tertiary-color);
  opacity: 1;
}