/**
 * Iroise 2026 — Page "Notre équipe".
 *
 * Sections : stats, direction (cards larges), support (grid compact),
 * instructeurs (placeholder), CTA final.
 *
 * Animations transform/opacity uniquement (cf. feedback_scroll_performance).
 */


/* ===== Stats ===== */

.equipe-stats__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 768px) {
  .equipe-stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-6);
  }

  .equipe-stats__grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width:             960px;
    margin-inline:         auto;
  }
}

.equipe-stat {
  text-align:    center;
  padding:       var(--space-6) var(--space-4);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.equipe-stat__value {
  font-family:    var(--font-display);
  font-size:      clamp(2.25rem, 5vw, var(--fs-4xl));
  font-weight:    var(--fw-black);
  line-height:    1;
  color:          var(--color-iroise-blue);
  margin:         0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.equipe-stat__value sup {
  font-size: 0.5em;
  color:     var(--color-iroise-cyan);
  margin-left: 0.05em;
  top:       -0.5em;
}

.equipe-stat__value--text {
  font-size:      clamp(1.5rem, 2.6vw, var(--fs-xl));
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  font-family:    var(--font-mono);
}

.equipe-stat__label {
  font-size:   var(--fs-sm);
  line-height: var(--lh-normal);
  color:       var(--color-text-muted);
  margin:      0;
}


/* ===== Direction (cards larges) ===== */

.equipe-direction {
  background: var(--color-iroise-blue-soft);
}

.equipe-direction__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 768px) {
  .equipe-direction__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-7);
  }
}

.equipe-member {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-5);
  padding:       var(--space-6);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:    transform 220ms ease, border-color 220ms ease;
}

.equipe-member:hover {
  transform:    translateY(-4px);
  border-color: var(--color-iroise-cyan);
}

.equipe-member--lead {
  flex-direction: column;
  gap:            var(--space-5);
  padding:        var(--space-7);
}

@media (min-width: 768px) {
  .equipe-member--lead {
    flex-direction: row;
    align-items:    flex-start;
  }
}

.equipe-member__avatar {
  flex:            0 0 auto;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           72px;
  height:          72px;
  background:      var(--color-iroise-blue-soft);
  color:           var(--color-iroise-blue);
  border-radius:   var(--radius-full);
  overflow:        hidden;
}

/* Photo réelle (au lieu des initiales) */
.equipe-member__avatar picture,
.equipe-member__avatar .equipe-member__photo {
  width:        100%;
  height:       100%;
  display:      block;
}

.equipe-member__avatar picture {
  position: relative;
}

.equipe-member__photo {
  object-fit:        contain;
  object-position:   center;
  border-radius:     0;
}

/* Avatar contenant une photo stylisée (blob détouré + cercle décoratif déjà
   dans l'image) : aucun masque, aucun recadrage, fond transparent — on montre
   la photo entière telle qu'elle a été conçue. Les avatars en initiales
   (membres sans photo) conservent leur pastille ronde par défaut. */
.equipe-member__avatar:has(.equipe-member__photo) {
  width:         104px;
  height:        104px;
  background:    transparent;
  border-radius: 0;
  overflow:      visible;
}

.equipe-member--lead .equipe-member__avatar {
  width:  96px;
  height: 96px;
}

.equipe-member--lead .equipe-member__avatar:has(.equipe-member__photo) {
  width:  136px;
  height: 136px;
}

.equipe-member__initials {
  font-family:    var(--font-display);
  font-size:      var(--fs-md);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}

.equipe-member--lead .equipe-member__initials {
  font-size: var(--fs-xl);
}

.equipe-member__body {
  flex: 1 1 auto;
  min-width: 0;
}

.equipe-member__name {
  font-family: var(--font-display);
  font-size:   var(--fs-md);
  font-weight: var(--fw-bold);
  color:       var(--color-iroise-blue);
  margin:      0 0 var(--space-2);
  line-height: var(--lh-snug);
}

.equipe-member--lead .equipe-member__name {
  font-size: var(--fs-xl);
}

.equipe-member__role {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-iroise-cyan);
  margin:         0 0 var(--space-3);
}

.equipe-member--lead .equipe-member__role {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

.equipe-member__lead {
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0 0 var(--space-3);
}

/* Compagnie + position (CDB Instructeur A320 — Volotea, etc.) */
.equipe-member__company {
  font-size:   var(--fs-sm);
  line-height: var(--lh-snug);
  color:       var(--color-iroise-blue);
  font-weight: var(--fw-medium);
  margin:      0 0 var(--space-3);
}

/* Badges qualifications EASA (FE(A), FI(A), TRI, etc.) */
.equipe-member__quals {
  list-style:    none;
  padding:       0;
  margin:        0 0 var(--space-3);
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
}

.equipe-member__qual {
  font-family:    var(--font-mono);
  font-size:      0.6875rem;
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-iroise-blue);
  background:     var(--color-iroise-blue-soft);
  border:         1px solid color-mix(in srgb, var(--color-iroise-cyan) 35%, transparent);
  padding:        4px 8px;
  border-radius:  var(--radius-sm);
  white-space:    nowrap;
}


/* ===== Encadrement pédagogique (medium cards avec quals) ===== */

.equipe-encadrement__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 640px) {
  .equipe-encadrement__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-6);
  }
}

.equipe-member--cadre {
  flex-direction: column;
  gap:            var(--space-5);
  align-items:    flex-start;
}

@media (min-width: 480px) {
  .equipe-member--cadre {
    flex-direction: row;
    align-items:    flex-start;
  }
}

.equipe-member--cadre .equipe-member__avatar {
  width:  64px;
  height: 64px;
}

.equipe-member--cadre .equipe-member__avatar:has(.equipe-member__photo) {
  width:  104px;
  height: 104px;
}

.equipe-member--cadre .equipe-member__role {
  text-transform: none;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text);
  font-weight:    var(--fw-semibold);
  margin-bottom:  var(--space-2);
}


/* ===== Support (grid compact) ===== */

.equipe-support__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 640px) {
  .equipe-support__grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-5);
  }
}

@media (min-width: 1024px) {
  .equipe-support__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.equipe-support .equipe-member {
  padding: var(--space-5);
}

/* Harmonisation typographique avec l'encadrement (rôle = body semibold black) */
.equipe-support .equipe-member__role {
  text-transform: none;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text);
  font-weight:    var(--fw-semibold);
}


/* ===== Bandeau Instructeurs (full-bleed) ===== */

.equipe-bandeau {
  width:    100%;
  height:   clamp(220px, 30vw, 480px);
  overflow: hidden;
  background: var(--color-iroise-blue-soft);
}

.equipe-bandeau picture,
.equipe-bandeau__img {
  display: block;
  width:   100%;
  height:  100%;
}

.equipe-bandeau__img {
  object-fit:      cover;
  object-position: center 30%;
}


/* ===== Instructeurs (placeholder) ===== */

.equipe-instructeurs {
  background: var(--color-gray-50);
}

.equipe-instructeurs__placeholder {
  max-width:     var(--container-narrow);
  margin:        var(--space-7) auto 0;
  padding:       var(--space-7);
  background:    var(--color-bg);
  border:        1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align:    center;
}

.equipe-instructeurs__placeholder p {
  font-size:   var(--fs-md);
  line-height: var(--lh-normal);
  color:       var(--color-text-muted);
  margin:      0;
}