/* Vie d'équipe : fil d'actualité, nouveautés du chat (photos, réponses, réactions), planning d'astreinte, bouton « Besoin d'aide ». */

/* ---------- Fil de l'équipe ---------- */
.composer { display: grid; gap: 12px; }
.composer-haut { display: flex; gap: 12px; align-items: flex-start; }
.composer-haut .avatar { width: 44px; height: 44px; font-size: 15px; flex: none; }
.composer-haut textarea { flex: 1; min-width: 0; border-color: transparent; background: var(--fond); resize: vertical; }
.composer-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.composer-bas .btn:last-child { margin-left: auto; }
.apercu-photo-pub { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.apercu-photo-pub img { max-width: min(100%, 320px); max-height: 220px; border-radius: 14px; border: 1px solid var(--bord); }
.nouvelles-pubs { display: block; margin: 0 auto 14px; }
.pub { max-width: 760px; }
#fil, .composer, .nouvelles-pubs { max-width: 760px; }
.pub-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pub-tete .avatar { width: 46px; height: 46px; font-size: 15px; }
.pub-auteur { flex: 1; min-width: 0; line-height: 1.35; }
.pub-texte { font-size: 1.02rem; margin: 4px 0 10px; }
.mention { font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; padding: 0 4px; }
.pub-photo { display: block; margin: 10px 0; }
.pub-photo img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; border: 1px solid var(--bord); cursor: zoom-in; }
.pub-reactions, .reactions-msg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pub-reactions { padding: 10px 0; border-top: 1px solid var(--bord); }
.reaction {
  font: inherit; font-size: 15px; line-height: 1; padding: 6px 11px; border-radius: 99px; cursor: pointer; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), border-color .15s, background .15s;
}
.reaction b { font-size: 13px; }
.reaction:hover { transform: scale(1.12); border-color: var(--accent); }
.reaction.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.nb-commentaires { margin-left: auto; }
.pub-commentaires { display: grid; gap: 8px; }
.commentaire { display: flex; gap: 8px; align-items: flex-start; }
.commentaire .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.bulle-commentaire { position: relative; flex: 1; min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--fond); font-size: 14px; }
.bulle-commentaire p { margin: 2px 0 0; overflow-wrap: anywhere; }
.suppr-commentaire { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.suppr-commentaire:hover { color: var(--danger); }
.form-commentaire { display: flex; gap: 8px; margin-top: 10px; }
.form-commentaire input { flex: 1; min-width: 0; border-radius: 99px; }
.pub-ciblee { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.centre-texte { text-align: center; }

/* ---------- Chat : photo, réponse, réactions ---------- */
.photo-chat { display: block; margin: 0 -6px 4px; }
.photo-chat img { display: block; max-width: min(100%, 300px); max-height: 260px; border-radius: 12px; cursor: zoom-in; }
.citation { display: grid; margin: 0 -4px 6px; padding: 5px 9px; border-left: 3px solid currentColor; border-radius: 8px; font-size: 13px; background: rgb(127 127 127 / .16); opacity: .92; }
.citation span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.outils-msg { position: absolute; top: -14px; right: 8px; display: none; gap: 2px; padding: 2px; border-radius: 99px; background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre); z-index: 2; }
.mien .outils-msg { right: auto; left: 8px; }
.bulle:hover .outils-msg, .outils-msg:focus-within, .outils-msg:has(.choix-reactions) { display: flex; }
@media (hover: none) { .bulle:active .outils-msg, .ligne-msg:focus-within .outils-msg { display: flex; } }
.outils-msg > button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 14px; color: var(--texte); }
.outils-msg > button:hover { background: var(--fond); }
.choix-reactions { position: absolute; bottom: calc(100% + 6px); right: 0; display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: var(--surface); border: 1px solid var(--bord); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .35); }
.mien .choix-reactions { right: auto; left: 0; }
.choix-reactions button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font-size: 19px; cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.choix-reactions button:hover { transform: scale(1.35); background: var(--fond); }
.reactions-msg { margin: 3px 6px 0; }
.mien .reactions-msg { justify-content: flex-end; }
.reactions-msg .reaction { font-size: 13px; padding: 3px 8px; }
.reponse-a { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; border-top: 1px solid var(--bord); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.reponse-a .extrait { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.reponse-a button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; }
#bouton-photo { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 18px; cursor: pointer; }
#bouton-photo:hover { background: var(--surface); }

/* ---------- Astreinte ---------- */
.astreinte-banniere { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / .18); font-size: 14px; }
.astreinte-banniere a { color: #fff; font-weight: 600; }
.astreinte-banniere .jusquau { opacity: .8; }
.planning-astreinte { display: grid; gap: 10px; margin-bottom: 18px; }
.ligne-astreinte { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.ligne-astreinte .avatar { width: 44px; height: 44px; font-size: 15px; flex: none; }
.astreinte-qui { flex: 1; min-width: 180px; }
.ligne-astreinte.en-cours { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.ligne-astreinte form { margin: 0; }

/* ---------- Besoin d'aide ---------- */
.btn.aide { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 8px 20px -10px rgb(220 38 38 / .8); }
#dialogue-aide h2 { margin: 0; }
#dialogue-aide .form { max-width: none; }
.toast-direct.urgent { border-color: #ef4444; background: color-mix(in srgb, #ef4444 14%, var(--surface)); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .toast-direct.urgent { animation: toast-glisse .55s cubic-bezier(.34, 1.56, .64, 1) both, alerte-urgente 1.2s ease-in-out 1s 6; }
  @keyframes alerte-urgente { 50% { box-shadow: 0 0 0 6px rgb(239 68 68 / .25), 0 10px 30px rgb(0 0 0 / .25); } }
}
@media (max-width: 899.98px) {
  .qui-actions .aide { order: -1; }
  .pub-photo img { max-height: 380px; }
}

/* Bouton « Besoin d’aide » du menu : sur sa propre ligne à l’ordinateur, simple icône sur téléphone. */
@media (min-width: 900px) {
  .qui-actions { flex-wrap: wrap; }
  .qui-actions .btn.aide { flex: 1 0 100%; }
}
@media (max-width: 899.98px) { .texte-aide { display: none; } }

/* Éléments masqués par l’attribut hidden alors qu’ils sont en flex. */
.reponse-a[hidden], .apercu-photo-pub[hidden], .nouvelles-pubs[hidden] { display: none; }