/* [hors-planning ABC-4-16 2026-10-06] Le champ Pays (liste à recherche, Tom Select) a le MÊME style que les autres
   champs du formulaire : hauteur, bordure, rayon, fond, marges internes, police, flèche, focus, état invalide.
   Lié par <link> APRÈS la feuille de Tom Select (jamais importé par le JS : CSP). Pas de nouveau thème : on
   reprend les valeurs déjà employées par `.form-control` / `.form-select` du site (Bootstrap 5.3) et du
   back-office (Bootstrap 4, `body.app`). La boîte visible est `.ts-wrapper` (elle porte `form-control`) ;
   `.ts-control`, à l'intérieur, ne porte ni bordure ni anneau (sinon double cadre). */

/* Boîte : même transition que `.form-control`. */
.ts-wrapper.form-control.single {
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Flèche : le site (Bootstrap 5) la donne déjà par `.form-select` ; le back-office (Bootstrap 4) n'a que la flèche
   native du navigateur, que CSS ne peut pas reproduire : on y dessine le même chevron que sur le site. */
body.app .ts-wrapper.form-control.single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

/* L'intérieur : jamais de bordure ni d'anneau propres, quel que soit l'état (repos, focus, ouvert). */
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-control.focus .ts-control,
.ts-wrapper.form-control.focus.dropdown-active .ts-control,
.ts-wrapper.form-control.is-invalid.focus .ts-control {
  border: 0 none !important;
  box-shadow: none !important;
  outline: 0;
  font: inherit;
  color: inherit;
}

/* Focus : bordure et anneau de `.form-control:focus` (site Bootstrap 5.3, rem = taille de base de la page). */
.ts-wrapper.form-control.focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
/* État invalide : bordure et anneau de `.form-control.is-invalid`. */
.ts-wrapper.form-control.is-invalid {
  border-color: #dc3545;
}
.ts-wrapper.form-control.is-invalid.focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
}

/* Back-office (Bootstrap 4) : anneau de 0,2 rem et bleu `#80bdff`, comme ses `.form-control`. */
body.app .ts-wrapper.form-control.focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
body.app .ts-wrapper.form-control.is-invalid.focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* Liste ouverte : champ de recherche et options à la police du champ. */
.ts-wrapper.form-control .ts-dropdown,
.ts-wrapper.form-control .ts-dropdown .dropdown-input,
.ts-wrapper.form-control .ts-dropdown .option,
.ts-wrapper.form-control .ts-dropdown .no-results {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.ts-wrapper.form-control .ts-dropdown .dropdown-input {
  line-height: inherit;
}