/* Styles pour le formulaire de proposition d'événement */
.event-form-wrapper {
  margin: auto;
}

.event-proposal-form {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

/* Encadré "info" : nomenclature sous le label "Nom de l'événement" */
.form .form-info {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.4rem 0 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.85em;
  font-weight: normal;
  line-height: 1.45;
  color: var(--color-secondary);
  background-color: rgba(0, 173, 187, 0.08);
  border: 1px solid rgba(0, 173, 187, 0.3);
  border-radius: 8px;
}

.form .form-info__icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 1.1em;
  color: var(--color-primary);
}

/* Même police et même graisse pour le titre de la remarque et la nomenclature */
.form .form-info__example {
  display: inline-block;
  margin-top: 0.25rem;
}

/* --- Autocomplete "lieu" (TomSelect) aligné sur les autres champs du formulaire --- */
/* IMPORTANT : la classe `ts-wrapper` contient "wrapper", donc la règle globale
   [class*="wrapper"] (base/utility.css) lui applique la grille de layout du site.
   On la neutralise pour que le champ se comporte comme un input normal. */
.form .ts-wrapper {
  display: block;
  width: 100%;
  padding: 0;
  /* La classe form-control force font-size:15px sur le wrapper : on rétablit
     l'héritage (19px comme les autres champs), propagé au control/input/dropdown. */
  font-size: inherit;
}

.form .ts-wrapper .ts-control {
  width: 100%;
  min-height: 0;
  padding: var(--spacing-10);
  color: var(--color-secondary);
  font-size: inherit;
  line-height: 1.5;
  background: #fff;
  border: 2px solid var(--fieldset-color);
  border-radius: var(--spacing-8);
  box-shadow: none;
  transition: all 0.3s ease;
  /* single-select : item + champ de saisie sur une seule ligne (pas de wrap),
     pour une hauteur identique aux autres champs */
  flex-wrap: nowrap;
  align-items: center;
}

/* L'item sélectionné ne doit pas pousser le champ : il tronque proprement */
.form .ts-wrapper .ts-control > .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Texte saisi + item sélectionné : même police/couleur que les autres champs */
.form .ts-wrapper .ts-control > input,
.form .ts-wrapper .ts-control > .item {
  font-size: inherit;
  line-height: inherit;
  color: var(--color-secondary);
}

/* TomSelect impose min-width:7rem au champ de saisie : même vide, il écrase
   l'item sélectionné (nom tronqué « Le Bi... »). On le laisse céder l'espace
   à l'item, qui s'affiche alors en entier. */
.form .ts-wrapper .ts-control > input {
  flex: 1 1 0;
  min-width: 0;
}

.form .ts-wrapper.focus .ts-control {
  border-color: rgb(0, 173, 187);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

/* Classes d'erreur/validité posées par event-proposal-form.js sur le wrapper */
.form .ts-wrapper.is-invalid .ts-control {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form .ts-wrapper.is-valid .ts-control {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Zone des résultats : même largeur que le champ, même police, sous le champ */
.form .ts-wrapper .ts-dropdown {
  font-size: inherit;
  border: 2px solid var(--fieldset-color);
  border-top: none;
  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
  margin-top: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form .ts-wrapper .ts-dropdown .option {
  padding: var(--spacing-8) var(--spacing-10);
  line-height: 1.4;
  color: var(--color-secondary);
}

/* La règle d'espacement inter-champs `.form fieldset div:not(:first-of-type)`
   (margin-block-start) cible TOUS les <div> du fieldset, donc les <div> internes
   générés par TomSelect (control, item, dropdown, options). Résultat : un grand
   écart entre chaque résultat, qui faisait paraître les options sur 2 lignes.
   On neutralise cette marge dans le widget. */
.form fieldset .ts-wrapper div {
  margin-block-start: 0;
}

.form .ts-wrapper .ts-dropdown .option.active {
  background-color: var(--color-primary);
  color: #fff;
}