/* ===========================
   RESET CONTENEUR
   =========================== */
.msd-members-list {
    --msd-gap: 16px;      /* espace entre cartes */
    --msd-card: 240px;    /* largeur d'une carte */
    --msd-ava: 60px;      /* taille avatar par défaut */

    margin: 0;
    padding: 0;
    list-style: none;
}

/* ===========================
   LISTE (centrée)
   =========================== */
.msd-members-list.list {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: var(--msd-gap);
}

/* ===========================
   GRILLE RESPONSIVE (centrée)
   =========================== */
.msd-members-list.grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--msd-gap);
    justify-content: center !important;   /* centre chaque ligne */
    align-content: flex-start;
    margin-left: auto;
    margin-right: auto;
}

/* chaque carte a une largeur fixe: centrage garanti */
.msd-members-list.grid > .msd-member {
    flex: 0 0 var(--msd-card) !important;
    max-width: var(--msd-card) !important;
}

/* ===========================
   GRILLES FIXES 2/3/4 (centrées)
   =========================== */
.msd-members-list.grid2,
.msd-members-list.grid3,
.msd-members-list.grid4 {
    display: grid !important;
    gap: var(--msd-gap);
    justify-content: center !important;   /* centre le bloc */
    justify-items: center !important;     /* centre chaque carte */
    margin-left: auto;
    margin-right: auto;
}
.msd-members-list.grid2 { grid-template-columns: repeat(2, var(--msd-card)); }
.msd-members-list.grid3 { grid-template-columns: repeat(3, var(--msd-card)); }
.msd-members-list.grid4 { grid-template-columns: repeat(4, var(--msd-card)); }

/* ===========================
   CARTE MEMBRE
   =========================== */
.msd-member {
    display: flex !important;
    flex-direction: column !important;   /* pour avoir le bouton sous le nom */
    align-items: center !important;
    justify-content: flex-start;
    text-align: center !important;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0 !important;
}

/* certains thèmes collent un width:100% sur les <li> */
.msd-members-list.grid .msd-member { width: var(--msd-card) !important; }

/* ===========================
   AVATAR
   =========================== */
.msd-member-avatar {
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    width: var(--msd-ava);
    height: var(--msd-ava);
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msd-member-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===========================
   INFOS: nom/prénom, rôle, bouton
   =========================== */
.msd-member-info {
    display: flex;
    flex-direction: column;
    align-items: center !important;   /* <-- centre le texte et le bouton */
    width: 100%;
}
.msd-member-name {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 4px;
}
.msd-member-name a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
.msd-member-role {
    font-size: 0.9em;
    opacity: 0.8;
}

/* bouton SOUS le nom/prénom et centré */
.msd-member-actions {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.msd-member-btn {
    background: #337ab7;
    color: #fff;
    border-radius: 5px;
    font-size: 0.9em;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.2s ease-in-out;
}
.msd-member-btn:hover { background: #23527c; }

/* ===========================
   VARIANTES D’ORIENTATION
   =========================== */
/* Avatar au-dessus (par défaut proprement centré) */
.msd-member.avatar_top { align-items: center !important; text-align: center !important; }

/* Avatar à gauche/droite si tu en as besoin,
   sinon ignore. On garde le centrage du bloc .msd-member-info. */
.msd-member.avatar_left,
.msd-member.avatar_right {
    flex-direction: row !important;
    gap: 14px;
}
.msd-member.avatar_right { flex-direction: row-reverse !important; }
.msd-member.avatar_left .msd-member-info,
.msd-member.avatar_right .msd-member-info {
    align-items: flex-start !important;   /* texte à gauche dans ces variantes */
    text-align: left !important;
}

/* ===========================
   RESPONSIVE: adapte la largeur de carte / avatar
   =========================== */
@media (max-width: 1024px) {
    .msd-members-list { --msd-card: 220px; --msd-ava: 56px; }
}
@media (max-width: 767px) {
    .msd-members-list { --msd-card: 200px; --msd-ava: 52px; }
}