/* Le fil de conversation d'une candidature — les deux côtés du même échange.
 *
 * ⚠️ **Cette feuille est chargée par `index.html` ET par `suivi.html`.** Elle
 * est sortie de `suivi.css` le 6 octobre 2026 : les bulles n'y étaient
 * définies que pour la page publique, et le même balisage, réemployé dans le
 * dossier côté équipe, s'affichait **sans aucun style** — des lignes de texte
 * empilées, sans espace ni couleur. « La messagerie côté appli est lamentable,
 * on voit rien. »
 *
 * Rien ne l'avait attrapé : `classes-css.test.js` vérifie qu'une classe existe
 * dans *une* feuille de `public/css`, pas que la page qui s'en sert la charge.
 * Le jour où l'on réemploie un balisage d'une page dans une autre, c'est la
 * première chose à vérifier.
 *
 * Une seule feuille pour les deux côtés, donc, et non deux jeux de règles :
 * « fais quelque chose de joli comme côté parents » se tient en gardant les
 * mêmes bulles des deux côtés — et ce qu'on améliore pour l'un profite à
 * l'autre. */

.fil-messages {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 3);
}

.fil-messages__bulle {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 1);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  border-radius: var(--r-md);
  max-width: 85%;
}

/* Ce que la famille a écrit se range à droite, ce que l'école répond à gauche :
 * c'est la convention de toutes les messageries, et elle évite de lire l'auteur
 * de chaque bulle pour savoir qui parle. */
.fil-messages__bulle--famille {
  align-self: flex-end;
  background: var(--primaire-clair);
}

.fil-messages__bulle--ecole {
  align-self: flex-start;
  background: var(--carte-douce);
  border: 1px solid var(--bordure);
}

.fil-messages__auteur {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.fil-messages__corps {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fil-messages__quand {
  font-size: 0.72rem;
  color: var(--texte-tenu);
}

/* Un message encore non lu par l'équipe : un trait, pas une couleur de plus.
 * Le fil doit rester lisible quand dix bulles se suivent. */
.fil-messages__bulle--neuf {
  box-shadow: inset calc(var(--pas) * 0.75) 0 0 0 var(--primaire);
}

/* Ce qui remplace les messages repliés : une ligne sobre, qui dit combien. */
.fil-messages__repli {
  align-self: center;
  margin: 0;
  font-size: 0.78rem;
  color: var(--texte-tenu);
  font-style: italic;
}

@media (max-width: 40rem) {
  .fil-messages__bulle { max-width: 100%; }
}