/* Gestion des membres — PHEnomen */
.membre-page { color:#333; font-size:16px;}
.membre-page > h2 {font-size:50px;font-weight:600;color:#990066;margin:0 0 26px;}
.membre-conteneur {max-width:1600px;margin:0 auto;display:flex;align-items:flex-start;gap:24px;}
.membre-conteneur::before,.membre-conteneur::after {display:none;}
.membre-conteneur > .membre-liste {width:58%;float:none;min-width:0;}
.membre-conteneur > .membre-fiche {width:42%;float:none;min-width:0;}


/* Section recherche et tableau : sans fond blanc */
.membre-liste {
    background:transparent;
    border:none;
    border-radius:0;
    padding:24px!important;
    box-shadow:none;
}

/* Fiche du membre : conserve sa carte blanche */
.membre-fiche {
    background:#fff;
    border:1px solid #e2e2e7;
    border-radius:12px;
    padding:24px!important;
    box-shadow:0 5px 20px rgba(0,0,0,.04);
}

/* Tableau des membres avec fond blanc */
.membre-table {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.membre-table td {
    background-color: #fff;
}

/* Effet au survol des lignes */
.membre-table tbody tr:hover td {
    background-color: #F0F0F4;
}


.membre-liste > div[style*="display:flex"] {display:flex!important;align-items:center;gap:12px;margin-bottom:20px!important;}
.membre-liste label[for="rechercheMembre"] {font-size:16px;font-weight:600!important;color:#333;}
#rechercheMembre {width:100%;max-width:330px;min-width:0;min-height:44px;padding:10px 13px;border:1px solid #d8d8dc;border-radius:8px;background:#f5f6f8;color:#333;outline:none; font-size:16px;}
#rechercheMembre:focus {border-color:#990066;box-shadow:0 0 0 3px rgba(153,0,102,.10);background:#fff;}
.membre-table {width:100%;border-collapse:collapse;font-size:16px;color:#333;table-layout:auto;}
/* En-tête du tableau des membres */
.membre-table th {
    background-color:#585879;
    color:#fff;
    font-weight:600;
    text-align:left;
    padding:12px 10px;
}

.membre-table td {padding:12px 10px;border-bottom:1px solid #ececf0;overflow-wrap:anywhere;}
.membre-table tbody tr:hover {background:#faf4f8;}
.membre-table td:last-child,.membre-table th:last-child {text-align:center;}
.membre-table a.admi {color:#990066;font-size:20px;}
.membre-fiche-titre {margin:0 0 20px;color:#990066;font-size:21px;font-weight:600;display:flex;align-items:center;gap:10px;}
.membre-fiche ul {list-style:none;padding:0;margin:0;}
.membre-fiche .w3-panel {margin:0;padding:12px 0;border-bottom:1px solid #eee;}
.membre-fiche .w3-panel li {display:grid;grid-template-columns:26px minmax(110px,40%) minmax(0,1fr);gap:12px;align-items:center;}
.membre-fiche .w3-panel li > i {width:26px!important;float:none!important;font-size:19px!important;color:#222;text-align:center;}
.membre-fiche .w3-panel li > span {width:auto!important;float:none!important;min-width:0;overflow-wrap:anywhere;font-size:16px;}
.membre-fiche .w3-panel li > span:nth-child(2) {font-weight:600;color:#555;}
.membre-fiche .w3-panel:has(button) {border:0;padding-top:16px;}
.membre-fiche .w3-panel button {border-radius:8px;padding:10px 18px;font-size:15px;}
.membre-fiche .w3-panel .membre-btn-supprimer {background:#fff!important;color:#b42332!important;border:1px solid #d7a1a8!important;}
.membre-fiche .w3-panel .membre-btn-supprimer:hover {background:#fff2f3!important;}
.membre-page .w3-modal-content {border-radius:12px;overflow:hidden;box-shadow:0 14px 48px rgba(0,0,0,.18);}
.membre-page .w3-modal-content h3 {color:#990066;font-size:21px;font-weight:600;}
.membre-page .w3-modal-content input[type="text"],.membre-page .w3-modal-content select {min-height:43px;background:#f5f6f8;border:1px solid #d8d8dc!important;border-radius:8px;color:#333; font-size:16px;}
.membre-page .w3-modal-content input:focus,.membre-page .w3-modal-content select:focus {border-color:#990066!important;outline:none;}
.membre-page .w3-modal-content button {border-radius:8px; font-size:16px;}
@media(max-width:1050px) {.membre-conteneur {flex-direction:column;}.membre-conteneur > .membre-liste,.membre-conteneur > .membre-fiche {width:100%;}}
@media(max-width:600px) {.membre-liste,.membre-fiche {padding:16px!important;}.membre-liste > div[style*="display:flex"] {flex-wrap:wrap;}.membre-table {font-size:14px;}.membre-table th,.membre-table td {padding:9px 5px;}.membre-fiche .w3-panel li {grid-template-columns:24px minmax(90px,40%) minmax(0,1fr);gap:8px;}}

/* Aligner la fiche membre avec le tableau */
.membre-fiche {
    margin-top: 100px;
}

/* Supprimer le décalage sur mobile */
@media (max-width: 1050px) {
    .membre-fiche {
        margin-top: 0;
    }
}

/* Corriger la largeur des boutons de la fiche membre */
.membre-fiche .w3-panel:has(button) li {
    display: block;
}

.membre-fiche .w3-panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: auto;
    min-width: 180px;
    padding: 11px 20px;

    white-space: nowrap;
}

/* Membre actuellement sélectionné */
.membre-table tbody tr.membre-selectionne td {
    background-color: #f5e6f0;
}

.membre-table tbody tr.membre-selectionne:hover td {
    background-color: #eed5e5;
}

/* Mise en valeur de l'icône de consultation */
.membre-table a.admi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.membre-table a.admi:hover {
    background-color: #f5e6f0;
}

/* Tableau défilant horizontalement sur petits écrans */
@media (max-width: 768px) {
    .membre-liste {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .membre-table {
        min-width: 650px;
    }
}

/* Fenêtre de confirmation de suppression */
.membre-modal-suppression .w3-modal-content {
    width: calc(100% - 32px);
    max-width: 480px;
    margin: 12vh auto 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* En-tête */
.membre-modal-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 26px 12px;
}

.membre-modal-entete h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: #242432;
}

.membre-modal-fermer {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

/* Contenu */
.membre-modal-corps {
    padding: 8px 26px 26px;
}

.membre-modal-corps p {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* Boutons */
.membre-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.membre-modal-actions button {
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.membre-modal-annuler {
    background: #f5f6f8;
    border: 1px solid #ddd;
    color: #333;
}

.membre-modal-annuler:hover {
    background: #e9e9ed;
}

.membre-modal-confirmer {
    background: #b42332;
    border: 1px solid #b42332;
    color: #fff;
}

.membre-modal-confirmer:hover {
    background: #921b28;
}

.membre-modal-confirmer i {
    margin-right: 7px;
}

@media (max-width: 480px) {
    .membre-modal-actions {
        flex-direction: column-reverse;
    }

    .membre-modal-actions button {
        width: 100%;
    }
}