/* Styles spécifiques pour les pages de membres - IHRO West Africa */

/* Variables spécifiques aux pages membres */
:root {
    --membre-primary: #2c5530;      /* Vert forêt pour membres actifs */
    --membre-success: #28a745;      /* Vert pour membres associés */
    --membre-warning: #ffc107;      /* Jaune pour membres bienfaiteurs */
    --membre-info: #17a2b8;         /* Bleu pour membres à vie */
    --membre-secondary: #6c757d;    /* Gris pour membres étudiants */
    --membre-light: #f8f9fa;        /* Fond clair */
    --membre-dark: #212529;         /* Texte sombre */
}

/* ===========================================
   STYLES POUR LES SECTIONS HERO
   =========================================== */

/* Hero section pour membres actifs */
.hero-section.bg-primary {
    background: linear-gradient(135deg, var(--membre-primary) 0%, #4a7c59 50%, var(--membre-primary) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section.bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero section pour membres associés */
.hero-section.bg-success {
    background: linear-gradient(135deg, var(--membre-success) 0%, #48bb78 50%, var(--membre-success) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section.bg-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero section pour membres bienfaiteurs */
.hero-section.bg-warning {
    background: linear-gradient(135deg, var(--membre-warning) 0%, #ffb300 50%, var(--membre-warning) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section.bg-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero section pour membres à vie */
.hero-section.bg-info {
    background: linear-gradient(135deg, var(--membre-info) 0%, #2db0c4 50%, var(--membre-info) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section.bg-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero section pour membres étudiants */
.hero-section.bg-secondary {
    background: linear-gradient(135deg, var(--membre-secondary) 0%, #868e96 50%, var(--membre-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section.bg-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* ===========================================
   STYLES POUR LES POINTS CLÉS DANS LES HERO
   =========================================== */

.hero-section .bg-primary.bg-opacity-20 {
    background-color: rgba(44, 85, 48, 0.2) !important;
    border: 1px solid rgba(44, 85, 48, 0.3);
    backdrop-filter: blur(10px);
}

.hero-section .bg-success.bg-opacity-20 {
    background-color: rgba(40, 167, 69, 0.2) !important;
    border: 1px solid rgba(40, 167, 69, 0.3);
    backdrop-filter: blur(10px);
}

.hero-section .bg-warning.bg-opacity-20 {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border: 1px solid rgba(255, 193, 7, 0.3);
    backdrop-filter: blur(10px);
}

.hero-section .bg-info.bg-opacity-20 {
    background-color: rgba(23, 162, 184, 0.2) !important;
    border: 1px solid rgba(23, 162, 184, 0.3);
    backdrop-filter: blur(10px);
}

.hero-section .bg-secondary.bg-opacity-20 {
    background-color: rgba(108, 117, 125, 0.2) !important;
    border: 1px solid rgba(108, 117, 125, 0.3);
    backdrop-filter: blur(10px);
}

/* ===========================================
   STYLES POUR LES CARTES DE STATISTIQUES
   =========================================== */

.hero-section .bg-white.bg-opacity-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

/* ===========================================
   STYLES POUR LES ICÔNES PRINCIPALES
   =========================================== */

.hero-section .bg-white.bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
}

/* ===========================================
   CLASSES UTILITAIRES POUR LES TEXTES
   =========================================== */

.text-white-70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-dark-75 {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* ===========================================
   STYLES POUR LES CARTES DE MEMBRES
   =========================================== */

.card-member {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-member:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.card-member .card-body {
    padding: 2rem;
}

.card-member .member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid transparent;
    background: linear-gradient(135deg, var(--membre-primary), var(--membre-primary-light, #4a7c59)) padding-box,
                linear-gradient(135deg, var(--membre-primary), var(--membre-warning)) border-box;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
}

.card-member .member-photo::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.card-member:hover .member-photo {
    transform: translateY(-8px) scale(1.08);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.15),
        inset 0 4px 8px rgba(255, 255, 255, 0.3);
    border-color: var(--membre-warning);
    background: linear-gradient(135deg, var(--membre-warning), var(--membre-primary)) padding-box,
                linear-gradient(135deg, var(--membre-warning), var(--membre-info)) border-box;
}

.card-member:hover .member-photo::before {
    opacity: 1;
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

/* Styles spécifiques pour chaque type de membre */
.card-member[data-member-type="actif"] .member-photo {
    background: linear-gradient(135deg, var(--membre-primary), #4a7c59) padding-box,
                linear-gradient(135deg, var(--membre-primary), var(--membre-success)) border-box;
}

.card-member[data-member-type="associe"] .member-photo {
    background: linear-gradient(135deg, var(--membre-success), #48bb78) padding-box,
                linear-gradient(135deg, var(--membre-success), var(--membre-info)) border-box;
}

.card-member[data-member-type="bienfaiteur"] .member-photo {
    background: linear-gradient(135deg, var(--membre-warning), #ffb300) padding-box,
                linear-gradient(135deg, var(--membre-warning), var(--membre-primary)) border-box;
}

.card-member[data-member-type="vie"] .member-photo {
    background: linear-gradient(135deg, var(--membre-info), #2db0c4) padding-box,
                linear-gradient(135deg, var(--membre-info), var(--membre-warning)) border-box;
}

.card-member[data-member-type="etudiant"] .member-photo {
    background: linear-gradient(135deg, var(--membre-secondary), #868e96) padding-box,
                linear-gradient(135deg, var(--membre-secondary), var(--membre-primary)) border-box;
}

/* ===========================================
   STYLES POUR LES BADGES ET INDICATEURS
   =========================================== */

.badge-member-type {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-actif {
    background: linear-gradient(45deg, var(--membre-primary), #4a7c59);
    color: white;
}

.badge-associe {
    background: linear-gradient(45deg, var(--membre-success), #48bb78);
    color: white;
}

.badge-bienfaiteur {
    background: linear-gradient(45deg, var(--membre-warning), #ffb300);
    color: var(--membre-dark);
}

.badge-vie {
    background: linear-gradient(45deg, var(--membre-info), #2db0c4);
    color: white;
}

.badge-etudiant {
    background: linear-gradient(45deg, var(--membre-secondary), #868e96);
    color: white;
}

/* ===========================================
   STYLES POUR LES BOUTONS SPÉCIFIQUES
   =========================================== */

.btn-member-primary {
    background: linear-gradient(45deg, var(--membre-primary), #4a7c59);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-member-primary:hover {
    background: linear-gradient(45deg, #4a7c59, var(--membre-primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(44, 85, 48, 0.3);
    color: white;
}

.btn-member-success {
    background: linear-gradient(45deg, var(--membre-success), #48bb78);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-member-success:hover {
    background: linear-gradient(45deg, #48bb78, var(--membre-success));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    color: white;
}

.btn-member-warning {
    background: linear-gradient(45deg, var(--membre-warning), #ffb300);
    border: none;
    color: var(--membre-dark);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-member-warning:hover {
    background: linear-gradient(45deg, #ffb300, var(--membre-warning));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
    color: var(--membre-dark);
}

.btn-member-info {
    background: linear-gradient(45deg, var(--membre-info), #2db0c4);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-member-info:hover {
    background: linear-gradient(45deg, #2db0c4, var(--membre-info));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.3);
    color: white;
}

.btn-member-secondary {
    background: linear-gradient(45deg, var(--membre-secondary), #868e96);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-member-secondary:hover {
    background: linear-gradient(45deg, #868e96, var(--membre-secondary));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3);
    color: white;
}

/* ===========================================
   ANIMATIONS SPÉCIFIQUES
   =========================================== */

@keyframes fadeInUpMember {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up-member {
    animation: fadeInUpMember 1.2s ease-out;
}

/* ===========================================
   BOUTONS EN SAVOIR PLUS
   =========================================== */

.card-member .btn-member-primary {
    background: linear-gradient(135deg, var(--membre-primary), var(--membre-primary-light, #4a7c59));
    border: none;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-member .btn-member-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, var(--membre-primary-light, #4a7c59), var(--membre-primary));
}

.card-member .btn-member-success {
    background: linear-gradient(135deg, var(--membre-success), #48bb78);
    border: none;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-member .btn-member-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #48bb78, var(--membre-success));
}

.card-member .btn-member-warning {
    background: linear-gradient(135deg, var(--membre-warning), #ffb300);
    border: none;
    color: #212529;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-member .btn-member-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffb300, var(--membre-warning));
}

.card-member .btn-member-info {
    background: linear-gradient(135deg, var(--membre-info), #2db0c4);
    border: none;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-member .btn-member-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #2db0c4, var(--membre-info));
}

.card-member .btn-member-secondary {
    background: linear-gradient(135deg, var(--membre-secondary), #868e96);
    border: none;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-member .btn-member-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #868e96, var(--membre-secondary));
}

/* ===========================================
   RESPONSIVE POUR LES PAGES MEMBRES
   =========================================== */

@media (max-width: 768px) {
    .hero-section .display-4 {
        font-size: 2.2rem;
    }

    .hero-section .lead {
        font-size: 1.1rem !important;
    }

    .hero-section .row .col-md-4 .h4 {
        font-size: 1.8rem;
    }

    .card-member .card-body {
        padding: 1.5rem;
    }

    .member-photo {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 576px) {
    .hero-section .display-4 {
        font-size: 1.8rem;
    }

    .hero-section .row .col-md-4 .h4 {
        font-size: 1.5rem;
    }

    .hero-section .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .card-member .card-body {
        padding: 1rem;
    }

    .member-photo {
        width: 90px !important;
        height: 90px !important;
    }
}

/* ===========================================
   STYLES POUR L'ACCESSIBILITÉ
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    .card-member,
    .btn-member-primary,
    .btn-member-success,
    .btn-member-warning,
    .btn-member-info,
    .btn-member-secondary {
        transition: none;
        animation: none;
    }
}

/* Focus amélioré pour l'accessibilité */
.btn-member-primary:focus,
.btn-member-success:focus,
.btn-member-warning:focus,
.btn-member-info:focus,
.btn-member-secondary:focus {
    outline: 3px solid var(--membre-warning);
    outline-offset: 2px;
}

/* ===========================================
   STYLES POUR LE MODE HAUT CONTRASTE
   =========================================== */

@media (prefers-contrast: high) {
    .hero-section.bg-primary,
    .hero-section.bg-success,
    .hero-section.bg-info,
    .hero-section.bg-secondary {
        background: var(--membre-dark) !important;
        color: white !important;
    }

    .hero-section.bg-warning {
        background: white !important;
        color: var(--membre-dark) !important;
    }

    .card-member {
        border: 2px solid var(--membre-dark);
    }
}