/**
 * Composant  : Team
 * Description : Grille d'équipe avec cartes retournables (flip card) au survol
 * Auteur      : Équipe Marketing
 * URL         : linkavie.com
 * Thème       : Linkavie terra
 * Tags        : team, équipe, flip-card, membres, agence
 * Version     : 1.0
 */

/* ─────────────────────────────────────────
   lk-team — BLOCK
   ───────────────────────────────────────── */
.lk-team {
  background: var(--lk-color-surface);
  transition: background var(--lk-transition-normal);
}

/* ─────────────────────────────────────────
   lk-team — ELEMENTS
   ───────────────────────────────────────── */
.lk-team__hint {
  font-size: 16px;
  color: var(--lk-color-text-lo);
  margin-top: -20px;
  margin-bottom: 0;
}

.lk-team__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

/* ─────────────────────────────────────────
   lk-member — BLOCK
   ───────────────────────────────────────── */
.lk-member {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
  height: 380px;
  perspective: 1000px;
  cursor: pointer;
}

/* ─────────────────────────────────────────
   lk-member — ELEMENTS
   ───────────────────────────────────────── */
.lk-member__front,
.lk-member__back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.lk-member__front {
  background: var(--lk-color-card-bg);
  border: 0.5px solid var(--lk-color-border);
  display: flex;
  flex-direction: column;
  transform: rotateY(0deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), background var(--lk-transition-normal), border-color var(--lk-transition-normal);
}

.lk-member__back {
  background: var(--lk-color-terra);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 12px;
}

.lk-member__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-bottom: 0.5px solid var(--lk-color-border);
}

.lk-member__info {
  padding: 18px 20px;
  flex: 1;
}

.lk-member__name {
  font-size: var(--lk-font-size-md);
  font-weight: var(--lk-font-weight-semibold);
  color: var(--lk-color-text-hi);
  margin-bottom: 4px;
}

.lk-member__role {
  font-size: 11px;
  color: var(--lk-color-terra);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: var(--lk-font-weight-medium);
  display: block;
  margin-bottom: var(--lk-space-sm);
}

.lk-member__tagline {
  font-size: var(--lk-font-size-xs);
  color: var(--lk-color-text-lo);
  line-height: 1.6;
  font-style: italic;
}

.lk-member__img-back {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid #ffffff4d;
  flex-shrink: 0;
}

.lk-member__bio-wrap .lk-member__name {
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 2px;
}

.lk-member__bio-wrap .lk-member__role {
  color: #ffffffb3;
  font-size: 10px;
}

.lk-member__bio {
  font-size: var(--lk-font-size-xs);
  color: #ffffffe0;
  line-height: 1.65;
}

/* ─────────────────────────────────────────
   lk-member — MODIFIERS
   ───────────────────────────────────────── */
.lk-member--photo-full .lk-member__img {
  height: 100%;
  border-bottom: none;
}

.lk-member--photo-full .lk-member__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 18px;
  background: linear-gradient(transparent, #1a1a1699 40%, #1a1a16e6);
  flex: none;
}

.lk-member--photo-full .lk-member__name {
  color: #f9f9f7;
}

.lk-member--photo-full .lk-member__role {
  color: var(--lk-color-white);
}

.lk-member--photo-full .lk-member__tagline {
  color: #f9f9f7b3;
}

/* ─────────────────────────────────────────
   lk-member — INTERACTIONS (hover + focus)
   ───────────────────────────────────────── */
.lk-member:hover .lk-member__front,
.lk-member:focus-within .lk-member__front {
  transform: rotateY(-180deg);
}

.lk-member:hover .lk-member__back,
.lk-member:focus-within .lk-member__back {
  transform: rotateY(0deg);
}

/* ─────────────────────────────────────────
   RESPONSIVE — largeur fixe par rangée (la dernière rangée garde
   la même taille de carte que les précédentes)
   ───────────────────────────────────────── */
@media (min-width: 481px) {
  .lk-member {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: none;
  }
}

@media (min-width: 769px) {
  .lk-member {
    flex: 0 0 calc((100% - 40px) / 3);
  }
}

@media (min-width: 1025px) {
  .lk-member {
    flex: 0 0 calc((100% - 60px) / 4);
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — mobile : cartes pleine largeur
   ───────────────────────────────────────── */
@media (max-width: 480px) {
  .lk-member {
    flex: 1 1 100%;
    max-width: 100%;
    height: 420px;
  }
}

/* ─────────────────────────────────────────
   ACCESSIBILITÉ — mouvement réduit
   Flip désactivé : face avant visible, face arrière accessible en dessous
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lk-team {
    transition: none;
  }

  .lk-member {
    height: auto;
    perspective: none;
  }

  .lk-member__front,
  .lk-member__back {
    position: static;
    transform: none;
    transition: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    border-radius: 12px;
  }

  .lk-member__back {
    margin-top: 8px;
    border-radius: 12px;
  }

  .lk-member:hover .lk-member__front,
  .lk-member:focus-within .lk-member__front,
  .lk-member:hover .lk-member__back,
  .lk-member:focus-within .lk-member__back {
    transform: none;
  }
}