/* T414b — participants d'une conversation : auteur cliquable, volets « Membres » et « Profil », page #/profil/<id>.
   Noir, blanc, gris ; le rouge reste réservé au direct ; aucune ombre ; rayon 5, filet 1 px ; tout appui se voit (voile gris ≤ 200 ms). */
.potes-avatar-petit { width: 28px; height: 28px; font-size: .8125rem; }
.potes-message-entete { align-items: center; }
.potes-auteur { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; margin: -8px 0 -8px -6px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--texte); font: inherit; text-align: left; }
.potes-auteur strong { overflow-wrap: anywhere; }
button.potes-auteur { cursor: pointer; transition: background-color 140ms ease; }
button.potes-auteur:active { background: var(--filet); }
.potes-discussion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.potes-discussion-actions:empty { display: none; }
.potes-voir { min-height: 44px; }

.participants-volet { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--filet); border-radius: 5px; background: var(--fond); color: var(--texte); }
.participants-volet::backdrop { background: rgb(0 0 0 / .5); }
.participants-volet-entete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--filet); background: var(--fond); }
.participants-volet-titre { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.participants-fermer { min-height: 44px; padding: 8px 14px; border: 1px solid var(--filet); border-radius: 5px; background: var(--bloc); color: var(--texte); font: inherit; font-weight: 700; cursor: pointer; }
.participants-volet-corps, .participants-fiche-page { display: grid; gap: 12px; padding: 16px; }
.participants-fiche-page { padding: 12px; border: 1px solid var(--filet); border-radius: 5px; background: var(--bloc); }
.participants-volet-corps .etiquette, .participants-fiche-page .etiquette { margin: 0; }

.participants-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.participants-membre { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--filet); border-radius: 5px; background: var(--bloc); color: var(--texte); font: inherit; text-align: left; }
button.participants-membre { cursor: pointer; transition: background-color 140ms ease; }
button.participants-membre:active { background: var(--filet); }
.participants-membre-nom { font-weight: 700; overflow-wrap: anywhere; }
.participants-createur { color: var(--secondaire); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.participants-chevron { color: var(--secondaire); font-size: 1.25rem; line-height: 1; }

.participants-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.participants-tete-textes { display: grid; gap: 2px; min-width: 0; }
.participants-nom { margin: 0; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.participants-badge { color: var(--secondaire); font-size: .8125rem; font-weight: 700; }
.participants-etat { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--filet); border-radius: 5px; font-weight: 700; }
.participants-ajouter { width: 100%; }
.participants-statut { min-height: 0; margin: 0; color: var(--secondaire); font-size: .875rem; }
.participants-statut:empty { display: none; }
.participants-details { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--filet); border-radius: 5px; background: var(--bloc); }
.participants-fiche-page .participants-details { background: var(--fond); }
.participants-presence { margin: 0; }
.participants-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.participants-detail .etiquette { margin: 0; }
.participants-detail strong { overflow-wrap: anywhere; user-select: all; }
.participants-autres { display: grid; gap: 8px; }
.participants-signaler summary { display: flex; align-items: center; min-height: 44px; color: var(--secondaire); font-size: .875rem; cursor: pointer; }
.participants-bloquer { justify-self: start; text-align: left; }
.participants-erreur { margin: 0; font-weight: 700; }
:is(.potes-auteur, .participants-membre, .participants-fermer):focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button.potes-auteur, button.participants-membre { transition: none; } }