/* ============================================================================
 * 14-homepage-members.css
 * ----------------------------------------------------------------------------
 * Améliorations visuelles de la section "Nos membres" sur la page d'accueil.
 *
 * Contexte : le rythme global des pages alterne navy → cream → blanc → navy.
 * On respecte ce rythme en GARDANT le fond blanc de la section, et on muscle
 * les cartes pour qu'elles ressortent par elles-mêmes plutôt que par contraste
 * de fond.
 *
 * Scope : sélecteurs préfixés `#homepageMembersSection` → n'affecte QUE la
 * section de l'accueil. La page #membres (annuaire complet) garde son style
 * d'origine défini dans 03-public.css.
 *
 * Choix de design :
 *   - Box-shadow douce au repos pour donner du relief sans changer le fond
 *   - Filet doré vertical à gauche : accroche visuelle signature qui rappelle
 *     l'identité club d'affaires (or = touche premium discrète)
 *   - Border-radius légèrement plus marqué (12px vs 8px par défaut)
 *   - Hover : translateY plus marqué + shadow renforcée pour signaler le clic
 *   - Transition lissée pour un retour tactile professionnel
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
 * Cartes membres au repos
 * ----------------------------------------------------------------------------
 * On override .member-card UNIQUEMENT à l'intérieur de #homepageMembersSection
 * pour ne pas toucher la page #membres complète.
 */
#homepageMembersSection .member-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(1, 21, 45, 0.06);
  border-radius: 12px;
  /* Ombre douce qui donne du relief sur le fond blanc.
     Double couche : la première (proche) pour la profondeur, la seconde
     (plus diffuse) pour l'ambiance.
     PLUS filet doré gauche en `inset` : cette technique reste visible même
     avec overflow:hidden (nécessaire pour clipper le ruban "Nouveau"). */
  box-shadow:
    inset 3px 0 0 0 var(--gold-500, var(--gold-500)),
    0 2px 8px rgba(1, 21, 45, 0.04),
    0 8px 24px rgba(1, 21, 45, 0.06);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * Hover : transformation marquée + shadow renforcée + filet doré épais
 * ----------------------------------------------------------------------------
 * Le filet gauche passe de 3px à 6px via l'inset box-shadow, qui s'anime
 * dans la même transition que les ombres extérieures. Cohérent visuellement
 * et indépendant de l'overflow:hidden de la carte.
 */
#homepageMembersSection .member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(183, 144, 68, 0.18);
  box-shadow:
    inset 6px 0 0 0 var(--gold-500, var(--gold-500)),
    0 4px 12px rgba(1, 21, 45, 0.06),
    0 20px 40px rgba(1, 21, 45, 0.12);
}

/* Photo de profil (avatar_url) dans la carte vitrine : clippée en rond et
   cadrée en cover. Sans photo, l'avatar conserve ses initiales sur fond doré
   (style global .member-avatar). */
#homepageMembersSection .member-avatar {
  overflow: hidden;
}

#homepageMembersSection .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------------------------
 * Responsive : sur mobile l'ombre est légèrement allégée pour ne pas
 * surcharger l'écran et préserver la lisibilité empilée.
 * ----------------------------------------------------------------------------
 */
@media (max-width: 768px) {
  #homepageMembersSection .member-card {
    box-shadow:
      inset 3px 0 0 0 var(--gold-500, var(--gold-500)),
      0 1px 4px rgba(1, 21, 45, 0.04),
      0 4px 12px rgba(1, 21, 45, 0.05);
  }

  #homepageMembersSection .member-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 5px 0 0 0 var(--gold-500, var(--gold-500)),
      0 2px 6px rgba(1, 21, 45, 0.06),
      0 10px 20px rgba(1, 21, 45, 0.08);
  }
}

/* ----------------------------------------------------------------------------
 * Respect prefers-reduced-motion : suppression des transformations animées
 * pour les utilisateurs ayant désactivé les animations.
 * ----------------------------------------------------------------------------
 */
@media (prefers-reduced-motion: reduce) {
  #homepageMembersSection .member-card {
    transition: none;
  }

  #homepageMembersSection .member-card:hover {
    transform: none;
  }
}