/* Un import qui perd plus de cours qu'il n'en rend ne doit pas ressembler a un
   import qui a marche. */
.import-alerte {
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--f-orange);
  background: var(--surface-creuse);
  font-size: 0.92rem;
}

/* --- Les deux écrans d'import ---------------------------------------- */

.import { max-width: 62rem; margin: 0 auto; }

.import-tete { margin-bottom: var(--e5); }

.import-source { color: var(--encre-douce); font-size: 0.92rem; }

.import-lots { list-style: none; padding: 0; display: grid; gap: 0.5rem; }

.import-quand { color: var(--encre-tenue); font-size: 0.85rem; margin-left: 0.5rem; }

.import-rien { color: var(--encre-douce); }

.import-note { color: var(--encre-tenue); font-size: 0.86rem; margin-top: 0.5rem; }

.import-ecartes {
  margin: var(--e5) 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  background: var(--surface-creuse);
  font-size: 0.9rem;
}

.import-ecartes summary { cursor: pointer; font-weight: 600; }

.import-groupe { margin-top: var(--e6); }

.import-lignes { list-style: none; padding: 0; display: grid; gap: 0.6rem; }

.import-lignes > li {
  border: 1px solid var(--trait);
  border-radius: 0.6rem;
  background: var(--surface);
  padding: 0.8rem 1rem;
}

.import-duree { color: var(--encre-tenue); }

.import-marque {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--creux);
  color: var(--creux-texte);
  font-size: 0.75rem;
}

/* Le titre BRUT du fichier. C'est la seule chose dont Chris est sûr, et c'est à
   partir de lui qu'il tranche quand la reconnaissance n'a pas suffi : il se lit
   donc, il ne se devine pas. */
.import-titre {
  font-weight: 600;
  margin: 0.2rem 0 0.45rem;
  word-break: break-word;
}

/* La ligne d'identification. **Chaque valeur porte son étiquette**, reconnue ou
   non : sans règle, les `<span>` se touchaient — « MBWAY LyonNégociation
   commerciale » —, et seule la valeur INCONNUE portait un intitulé, si bien que
   les deux conventions se mélangeaient sur une même ligne. */
.import-reconnu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.5rem;
}

.lu { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; }

.lu-quoi {
  color: var(--encre-tenue);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lu-valeur { min-width: 0; word-break: break-word; }

/* Ce qui distingue le reconnu de l'inconnu est la COULEUR, pas l'étiquette. */
.reconnu .lu-valeur { color: var(--encre); }

.non-reconnu .lu-valeur {
  color: var(--accent-texte);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.import-classe .lu-valeur { color: var(--encre-douce); }

.import-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: end;
}

.import-champs label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--encre-tenue);
}

.import-retirer { font-size: 0.85rem; color: var(--encre-tenue); }

/* Ce qui bloque la ligne. En rouge et sous elle : la cause se lit au même endroit
   que le cours qu'elle empêche, jamais dans une liste à part. */
.import-anomalies {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--refus-encre);
  font-size: 0.88rem;
}

.import-avertissement {
  margin: var(--e5) 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--f-orange);
  background: var(--surface-creuse);
  font-size: 0.92rem;
}

.import-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--trait);
}

/* Sur un téléphone, « Abandonner » à côté de « Créer » est un mauvais voisinage
   pour un doigt. */
@media (max-width: 30rem) {
  .import-boutons { flex-direction: column; align-items: stretch; }
  .import-champs { flex-direction: column; align-items: stretch; }
}