/* ========================================
   GOIN ABOUT PAGE - FIGMA EXACT MATCH
   ======================================== */

#hero-section {
  background-image: url("../../img/new-design/about_circle.svg");
  background-origin: border-box;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Hero CTA button */
.hero-cta {
  display: flex;
  justify-content: center;
  padding-bottom: 1.5rem;
}

.hero-cta [role="button"] {
  padding: 0.65rem 2rem;
  white-space: nowrap;
}

/* Team title section */
.team-section-wide h2,
.team-section-compact h2 {
  font-weight: 400;
  color: #0A0E27;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  max-width: 600px;
}

/* Le span bleu dans h2 doit rester au même poids */
.team-section-wide h2 span[data-color="primary"],
.team-section-compact h2 span[data-color="primary"] {
  color: rgb(var(--primary));
  font-weight: 400;
}

/* ========================================
   TEAM SECTION - SIMPLE & CLEAN
   ======================================== */

/* Team member container */
.team-member {
  align-items: flex-start;
  margin-bottom: 1.5rem;        /* Réduit de 2.5rem */
}

/* Photo styling - Simple circular */
.team-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.team-photo.-vertical {
  width: 150px;
  height: 150px;
  margin-inline: 0;
}

/* Name styling */
.team-member h3 {
  margin: 0 0 0.5rem 0;
  color: #0A0E27;
  font-weight: 400;
  line-height: 1.3;
}

.team-member h3 span[data-color="primary"] {
  color: rgb(var(--primary));
  font-weight: 600;
}

/* Role styling */
.team-member h6 {
  color: #64748B;
  font-weight: 500;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

/* Bio text */
.team-member p {
  color: #475569;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

/* LinkedIn link - Simple blue */
.team-member a[data-color="primary"] {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* HR separators */
hr[data-color="gray-plain"] {
  border: none;
  height: 1px;
  background: #E2E8F0;
  margin: 1.5rem 0;             /* Réduit de 2.5rem */
}

/* Reduce cumulated padding between team sections */
/* Reduce gap between consecutive team sections (avoid padding stacking) */
.team-section-wide:has(+ .team-section-wide),
.team-section-wide:has(+ .team-section-compact),
.team-section-compact:has(+ .team-section-wide),
.team-section-compact:has(+ .team-section-compact) {
  padding-bottom: 0.5rem !important;
}

.team-section-wide + .team-section-wide,
.team-section-wide + .team-section-compact,
.team-section-compact + .team-section-wide,
.team-section-compact + .team-section-compact {
  padding-top: 0.5rem !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet - 900px and below */
@media (width < 56.25rem) {
  .team-photo {
    width: 150px;
    height: 150px;
  }

  .team-photo.-vertical {
    width: 120px;
    height: 120px;
  }
}

/* Mobile - 768px and below */
@media (width < 48rem) {
  .team-section-wide,
  .team-section-compact {
    padding: 2rem 0 1.5rem !important;
  }

  .team-section-wide h2,
  .team-section-compact h2 {
    margin-bottom: 0.75rem;
  }
  .team-member[data-layout="row"] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .team-member p {
    text-align: left;
  }

  /* Toutes les photos ont la même taille en mobile */
  .team-photo,
  .team-photo.-vertical {
    width: 130px;
    height: 130px;
  }

  hr[data-color="gray-plain"] {
    margin: 0.75rem 0;
  }

  .team-member {
    margin-bottom: 0.5rem;
  }
}

/* Small mobile - 640px and below */
@media (width < 40rem) {
  .team-photo,
  .team-photo.-vertical {
    width: 110px;
    height: 110px;
  }
}