/* ==========================================================================
   FIL DE DISCUSSION
   ==========================================================================
   Un message, ses réponses, ses métadonnées (auteur, date, actions).
   Utilisé pour les commentaires et les questions (V1), puis pour les
   sondages et les votes (V2) : la structure visuelle est la même.
   ========================================================================== */

.fil {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   1. Un message
   -------------------------------------------------------------------------- */
.message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.message__corps {
  flex: 1;
  min-width: 0; /* permet aux textes longs d'être coupés proprement */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.message__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.message__auteur {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/* La date relative (« il y a 3 h »). La date complète s'affiche au survol
   grâce à l'attribut title, et aux lecteurs d'écran grâce à <time>. */
.message__date {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.message__date--modifie {
  font-style: italic;
}

/* Le texte du message. Mise en forme légère seulement : le Markdown est
   nettoyé côté serveur avant d'arriver ici. */
.message__texte {
  font-size: var(--text-base);
  color: var(--text);
}

.message__texte > * + * {
  margin-top: var(--space-3);
}

.message__texte ul,
.message__texte ol {
  padding-left: var(--space-6);
}

.message__texte blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
}

/* Actions sous le message : répondre, modifier, marquer résolu. */
.message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   2. Une question
   --------------------------------------------------------------------------
   Une question ouverte porte un liseré à gauche, de la couleur « attention » :
   elle se repère d'un coup d'œil dans une longue liste.
   -------------------------------------------------------------------------- */
.message--question-ouverte {
  border-left: 3px solid var(--warning);
}

.message--question-resolue {
  border-left: 3px solid var(--success);
}

/* --------------------------------------------------------------------------
   3. Les réponses
   --------------------------------------------------------------------------
   Décalées vers la droite, avec un trait vertical qui les rattache au
   message d'origine. Un seul niveau de réponse : pas d'imbrication sans fin.
   -------------------------------------------------------------------------- */
.reponses {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
}

.reponse {
  display: flex;
  gap: var(--space-3);
}

.reponse__corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.reponse__texte {
  font-size: var(--text-sm);
}

/* Sur un téléphone, on réduit le décalage pour garder de la place au texte. */
@media (max-width: 480px) {
  .reponses {
    padding-left: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   4. Zone de rédaction
   -------------------------------------------------------------------------- */
.redaction {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.redaction__corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.redaction__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   5. Journal des nouveautés
   -------------------------------------------------------------------------- */
.nouveaute {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nouveaute:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.nouveaute__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.nouveaute__titre {
  font-size: var(--text-lg);
  margin-right: auto;
}

/* Le numéro de version, en police à chasse fixe. */
.nouveaute__version {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}