/*
 * =====================================================
 *   SUD WINE CLUB — Page Membres publique
 *   membres.css  v1.0  — CSS AUTONOME
 *   Chargé uniquement sur membres.php
 *   Requiert public.css (variables + base)
 * =====================================================
 *
 *  TABLE DES MATIÈRES
 *  ------------------
 *  1. Hero de page membres
 *  2. Grille membres (compteur)
 *  3. Carte membre
 *  4. Teaser membres (section index.php)
 *  5. Animations cartes membres
 * =====================================================
 */

/* =============================================
   MEMBRES — À ajouter à la fin de swc.css
   =============================================
   Structure :
   1. Hero de page
   2. Grille membres (compteur)
   3. Carte membre
   4. Active nav link
============================================= */


/* ---- 1. HERO DE PAGE ---- */
#membres-hero {
    position: relative;
    background: url('/swc/images/bg-citations.webp') center/cover no-repeat;
    padding: 0;
}

.membres-hero-inner {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(26, 10, 12, .82) 0%,
        rgba(60, 20, 28, .75) 50%,
        rgba(26, 10, 12, .85) 100%
    );
    padding: 8rem 2rem 6rem;
    text-align: center;
}

/* Trait doré en haut */
#membres-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    z-index: 1;
}

.membres-hero-inner .section-title {
    color: #fff;
    margin-bottom: 1.5rem;
}
/* Pas de trait doré sous le titre dans le hero (déjà sur fond sombre) */
.membres-hero-inner .section-title::after {
    background: var(--gold);
    margin: 1rem auto 0;
}

.membres-hero-desc {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: rgba(255,255,255,.78);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
}


/* ---- 2. SECTION GRILLE ---- */
#membres-liste {
    padding: 5rem 0 6rem;
}

.membres-count {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin-bottom: 3rem;
}

/* ---- Barre d'outils : recherche + tri ---- */
.membres-toolbar {
    margin-bottom: 2.5rem;  /* espace entre toolbar et grille */
}

/* Champ de recherche — largeur fixe sur desktop, pleine largeur sur mobile */
.membres-search-wrap {
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 576px) {
    .membres-search-wrap { width: 280px; }
}

/* Input group cohérent avec la charte */
.membres-search-wrap .input-group-text {
    background: var(--success-bg);
    border-color: var(--border);
    color: var(--gray-mid);
    font-size: .85rem;
}
.membres-search-wrap .form-control {
    border-color: var(--border);
    font-family: var(--font-body);
    font-size: .88rem;
    background: var(--success-bg);
    color: var(--dark);
    box-shadow: none;
}
.membres-search-wrap .form-control:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(155,92,99,.12);
}

/* Select tri */
.membres-sort-wrap {
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 576px) {
    .membres-sort-wrap { width: 160px; }
}
.membres-sort-wrap .form-select {
    border-color: var(--border);
    font-family: var(--font-body);
    font-size: .88rem;
    background-color: var(--success-bg);
    color: var(--dark);
    box-shadow: none;
    cursor: pointer;
}
.membres-sort-wrap .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(155,92,99,.12);
}


/* ---- 3. CARTE MEMBRE ---- */

/*
 * Approche : Bootstrap row/col classique pour les colonnes (largeurs fiables),
 * flex sur la carte pour empiler photo / header / bio,
 * hauteur fixe sur .membre-header uniquement pour aligner les bios sur une même ligne.
 * La bio est libre en hauteur — c'est $bioMax PHP qui limite le texte.
 */

/* Réinitialise la grille Bootstrap en flex classique */
#membresGrille {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
    align-items: stretch;
    padding-left: .5rem;             /* évite le texte collé au bord sur mobile */
    padding-right: .5rem;
}

/* Cellule Bootstrap — largeur calculée pour 2/3/4 colonnes selon breakpoint */
.membre-item {
    flex: 0 0 calc(50% - .75rem);          /* mobile : 2 colonnes */
    max-width: calc(50% - .75rem);
    padding: 0;
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .membre-item {
        flex: 0 0 calc(33.333% - 1rem);    /* tablette : 3 colonnes */
        max-width: calc(33.333% - 1rem);
    }
}
@media (min-width: 1200px) {
    .membre-item {
        flex: 0 0 calc(25% - 1.125rem);    /* desktop : 4 colonnes */
        max-width: calc(25% - 1.125rem);
    }
}

/* Carte : flex-column, s'étire sur toute la hauteur de la cellule */
.membre-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-bottom: 2px solid transparent;
    transition: border-color .3s;
}
.membre-card:hover {
    border-bottom-color: var(--primary);
}

/* ① Photo — carré parfait */
.membre-photo-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.membre-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .6s ease;
}
.membre-card:hover .membre-photo-wrap img {
    transform: scale(1.05);
}
.membre-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(155,92,99,.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .5s;
}
.membre-card:hover .membre-overlay { opacity: 1; }

/* ② Header : identité + badges + icônes
   min-height fixe = hauteur du cas le plus haut (titre sur 2 lignes + badges + icônes).
   Les cartes plus courtes laissent du blanc en bas du header — la bio démarre
   toujours au même niveau visuel sur une ligne donnée. */
/* ② Header : nom + titre + badges — hauteur libre */
.membre-header {
    padding: 1rem 0 .5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: flex-start;
}

.membre-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--dark);
    letter-spacing: .02em;
    margin: 0 0 .2rem;
    line-height: 1.2;
}
.membre-titre {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0;
}

/* Badges */
.membre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-content: flex-start;
}
.membre-tag {
    display: inline-block;
    padding: .2rem .7rem;
    border: 1px solid var(--border);
    font-size: .73rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--gray-mid);
    background: var(--success-bg);
    transition: border-color .3s, color .3s, background .3s;
}
.membre-card:hover .membre-tag {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(155,92,99,.05);
}

/* ③ Icônes réseaux — PAS de trait au-dessus (séparation visuelle avec le header suffit)
   min-height = hauteur max possible du header (nom 1 ligne + titre 2 lignes + badges + padding)
   → garantit que la bio-wrap commence toujours au même niveau sur toute une ligne */
.membre-reseaux {
    padding: .4rem 0 .6rem;
    min-height: 3rem;         /* absorbe max 1 ligne de titre supplémentaire */
    display: flex;
    align-items: flex-end;    /* icônes collées en bas de la zone → juste au-dessus du trait bio */
}
.membre-reseaux .social-links {
    justify-content: flex-start;
    margin: 0;
}

/* ④ Bio — trait au-dessus, texte libre limité par $bioMax PHP */
.membre-bio-wrap {
    padding-top: .75rem;
    padding-bottom: 1.25rem;
    border-top: 1px solid var(--border);
}
.membre-bio {
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0;
}


/* ---- 4. LIEN ACTIF NAVBAR ---- */
#mainNav .nav-link.active-page {
    color: var(--primary) !important;
}
#mainNav .nav-link.active-page::after {
    transform: scaleX(1);
}





/* =============================================
   ANIMATION CARTES MEMBRES (fade-in au chargement)
============================================= */
.membre-fade-in {
    animation: membreFadeIn .5s ease both;
}
.membre-fade-in:nth-child(4n+1) { animation-delay: .0s;  }
.membre-fade-in:nth-child(4n+2) { animation-delay: .1s;  }
.membre-fade-in:nth-child(4n+3) { animation-delay: .2s;  }
.membre-fade-in:nth-child(4n+4) { animation-delay: .3s;  }
@keyframes membreFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
    .membre-fade-in { animation: none; }
}


/* Compensation scroll-margin pour le mainNav sticky */
#membres-hero,
#membres-liste {
    scroll-margin-top: 80px;
}