body { margin: 0; font-family: 'Montserrat', sans-serif; background: #f8f9fa; color: #333; }

/* Bannière avec effet science */
.header-banner {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white; padding: 60px 20px; text-align: center;
    border-bottom: 4px solid #e67e22;
}
.subtitle { font-weight: 300; font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9; }
.contact-pill {
    background: rgba(255,255,255,0.1); color: #fff; text-decoration: none;
    padding: 8px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.3);
    transition: background 0.3s;
}
.contact-pill:hover { background: #e67e22; border-color: #e67e22; }

main { max-width: 1100px; margin: 40px auto; padding: 0 20px; }

.section-title {
    border-left: 5px solid #2c5364; padding-left: 15px; margin-bottom: 30px;
    color: #2c5364; text-transform: uppercase; letter-spacing: 1px;
}

.grid-membres {
    display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;
}

/* Carte Membre */
.card {
    background: white; width: 220px; border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 25px;
    text-align: center; transition: transform 0.2s;
    display: flex; flex-direction: column; align-items: center;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

.avatar {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 4px solid #f1f1f1; margin-bottom: 15px;
}

.nom { font-weight: 700; font-size: 1.1rem; margin: 0; }
.desc { font-size: 0.85rem; color: #666; margin: 8px 0 15px 0; flex-grow: 1; }
.btn-projet {
    background: #2c5364; color: white; text-decoration: none;
    padding: 8px 16px; border-radius: 4px; font-size: 0.9rem;
}
.btn-projet:hover { background: #e67e22; }