/* ==========================================================
   Le babillard (Babillard.php). Le fil (.fil) est dans phs2026.css : il sert aussi sur l'accueil.
   Champs, boutons : suggestions2026.css ; réactions et commentaires : echanges-dg2026.css
   ========================================================== */

.babillard { display: grid; gap: 1.1rem; max-width: 52rem; margin: 0 auto; width: 100%; min-width: 0; }
.babillard__entete .titre-section { margin-bottom: .4rem; }
.babillard__entete p, .babillard__retour, .babillard__invitation { margin: 0; }

/* Écrire */
.babillard__ecrire { display: grid; gap: .6rem; }
.babillard__auteur { display: flex; align-items: flex-start; gap: .7rem; }
.babillard__auteur img { flex: none; }
.babillard__auteur > span { display: grid; line-height: 1.3; }
.babillard__zone { flex: 1; min-width: 0; }
.babillard__zone textarea {
    width: 100%; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: .6rem .75rem; resize: vertical; min-height: 4.2rem; line-height: 1.45;
}
.babillard__zone textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.babillard__envoi { display: flex; justify-content: flex-end; align-items: center; gap: .9rem; }
.babillard__filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.babillard__filtres a { padding: .35rem .8rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--texte-2); font-weight: 700; font-size: .88rem; }
.babillard__filtres a:hover { color: var(--texte); text-decoration: none; border-color: var(--bleu); }
.babillard__filtres a[aria-current] { background: var(--accent-fond); border-color: var(--accent-fond); color: var(--accent-texte); }

/* Un message */
.babillard__message { display: grid; gap: .7rem; border-top: 3px solid var(--ligne); }
.babillard__message form { margin: 0; }
.babillard__texte { margin: 0; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }