/* =====================================================================
   Signal360 - le champ « sociétés suivies »

   Un cadre qui se dessine comme une saisie de texte - même filet, même
   rayon, même anneau au foyer -, garni des sociétés déjà retenues et
   d'un champ où l'on cherche la suivante. Ce qui se remplit se dessine
   pareil : c'est la règle qui vaut déjà pour le sélecteur.

   Le vocabulaire est celui d'accueil.css. « --corps » et « --fixe »
   viennent du pont déclaré en tête de selecteur.css, chargée avant
   celle-ci par ressourcesComposants().
   ===================================================================== */

/* Le champ natif est retiré de l'affichage une fois le composant monté -
   mais **pas** de la page : il porte la valeur soumise, il reste requis,
   et le navigateur doit pouvoir lui rendre le foyer pour dire ce qui
   manque. « display:none » le lui interdirait. */
input[data-societes].monte {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Le cadre ---------- */

.societes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  font-family: var(--corps);
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.societes:hover { border-color: #DDE1E9; }
.societes:focus-within {
  border-color: var(--rose);
  box-shadow: var(--anneau);
}

/* ---------- Les sociétés retenues ---------- */

/* Les jetons forment une liste - et le restent : « display:contents »
   les aurait posés directement dans le cadre, au prix des semelles de
   liste que certains lecteurs d'écran n'annoncent alors plus. */
.societes-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.societes-jetons:empty { display: none; }

.societes-jeton {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  font-size: 13.5px;
  color: var(--nuit);
  background: var(--rose-clair);
  border: 1px solid var(--rose-pale);
  border-radius: var(--r-s);
}
.societes-jeton-nom {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le numéro accompagne le nom sans lui disputer la lecture : c'est la
   preuve de ce qui a été retenu, pas son intitulé. */
.societes-jeton-numero {
  font-family: var(--fixe);
  font-size: 11.5px;
  color: var(--texte-doux);
}

.societes-retirer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  align-self: center;
  padding: 0;
  color: var(--texte-doux);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.societes-retirer:hover { color: var(--rose-sombre); background: rgba(217,76,106,.12); }
.societes-retirer:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.societes-retirer .ico { width: 13px; height: 13px; }

/* ---------- La saisie ---------- */

/* Le sélecteur est plus appuyé qu'il n'y paraît, et il le faut.
   Les écrans dessinent leurs propres champs de texte - « .pref-forme
   input[type="text"] » leur pose un filet, un rayon et un anneau -, et ce
   filet-là se serait ajouté au cadre : deux bordures emboîtées pour un seul
   champ. Écrit à poids égal, il aurait fallu compter sur l'ordre des
   feuilles pour l'emporter, ce qui est une façon de perdre un jour où
   l'ordre change. Il l'emporte donc par le poids, quel que soit l'ordre :
   c'est le cadre qui porte l'état, la saisie n'a rien à en montrer. */
.societes > input.societes-saisie[type="text"] {
  flex: 1 1 12ch;
  width: auto;
  min-width: 12ch;
  font-family: var(--corps);
  font-size: 15px;
  color: var(--nuit);
  padding: 5px 4px;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}
.societes > input.societes-saisie[type="text"]:hover,
.societes > input.societes-saisie[type="text"]:focus,
.societes > input.societes-saisie[type="text"]:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.societes > input.societes-saisie[type="text"]::placeholder { color: var(--texte-doux); }

/* ---------- Le panneau ---------- */

/* Il est déposé dans la couche flottante : sa position lui est donnée en
   propre par Signal.placer(), et ce qui le rognerait - le corps défilant
   de la fenêtre de l'assistant - ne le touche plus. */
.societes-panneau {
  position: absolute;
  max-width: 460px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  box-shadow: var(--ombre);
  animation: signal-apparition .12s ease both;
}

.societes-liste {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.societes-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  cursor: pointer;
}
.societes-option:hover { background: var(--rose-voile); }
/* La ligne repérée au clavier se voit **plus** que celle qu'on survole :
   au clavier, c'est le seul indice de l'endroit où l'on est, et le voile
   rose du survol - sept centièmes d'opacité - ne se distingue pas d'un
   fond blanc à deux mètres. */
.societes-option.vise {
  background: var(--rose-clair);
  box-shadow: inset 2px 0 0 var(--rose);
}

.societes-option-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--nuit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La ligne de preuve : le numéro, le lieu, et l'état s'il n'est pas
   « en activité ». Une société radiée reste proposée - on suit aussi ce
   qui se termine -, mais elle le dit. */
.societes-option-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 12.5px;
  color: var(--texte-doux);
}
.societes-numero { font-family: var(--fixe); font-size: 12px; }
.societes-marque { font-weight: 700; }
.societes-marque.radiee    { color: var(--rouge, #B3261E); }
.societes-marque.procedure { color: #8A5A00; }

.societes-etat {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texte);
}
/* Séparé de la liste quand les deux paraissent ensemble - une société
   déjà retenue, annoncée sous les suggestions restantes. */
.societes-liste:not(:empty) + .societes-etat {
  border-top: 1px solid var(--bord-clair);
}

@media (prefers-reduced-motion: reduce) {
  .societes-panneau { animation: none; }
}