/* ============================================================
   Über uns – Styles spécifiques à la page
   ============================================================ */

/* ─── HERO BANNER ───────────────────────────────────────────── */
.about-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    #b71c1c 0%, #8b2010 18%, #5a4020 40%, #2d4a1e 65%, #1a3320 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.about-hero-content {
  text-align: center;
  padding: 72px 40px 96px;
  max-width: 720px;
}

.about-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  margin-bottom: 18px;
}

.about-hero-sub {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: rgba(255,255,255,.85);
  font-weight: 400;
}

/* ─── HANDSHAKE IMAGE ───────────────────────────────────────── */
.handshake-img {
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  object-fit: cover;
  max-height: 480px;
}

/* ─── MISSION ───────────────────────────────────────────────── */
.mission-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.75rem;
  font-weight: 900;
  color: #c0392b;
  margin-bottom: 28px;
}

.mission-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; }
.mission-icon svg { width:36px; height:36px; stroke:#d4a017; stroke-width:2; }

.mission-text {
  font-size: 1rem;
  color: #222;
  line-height: 1.8;
  margin-bottom: 20px;
}

.mission-quote {
  margin-top: 32px;
  padding: 20px 24px;
  background: #fffbea;
  border-left: 4px solid #d4a017;
  border-radius: 0 8px 8px 0;
  font-size: .97rem;
  font-weight: 600;
  color: #c0392b;
  font-style: italic;
  line-height: 1.6;
}

/* ─── TEAM CARDS (nouveau design uniforme) ──────────────────── */
.team-section-new {
  background: #f4f6f8;
  padding: 72px 0 80px;
}

.tcard {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.13);
}

/* Photo area */
.tcard-photo {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.tcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Gradient placeholder pour Nordinne */
.tcard-photo--gradient {
  background: linear-gradient(145deg,
    #b71c1c 0%, #8b1010 25%, #4a3018 55%, #1a3320 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcard-photo--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(212,160,23,.22) 0%, transparent 60%);
}

.tcard-initial {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(255,255,255,.18);
  line-height: 1;
  position: relative;
  z-index: 1;
  user-select: none;
}

/* Badge */
.tcard-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(255,255,255,.95);
  color: #1a3320;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.tcard-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4a017;
  flex-shrink: 0;
}

/* Body */
.tcard-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tcard-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: #c0392b;
  margin-bottom: 4px;
  line-height: 1.2;
}

.tcard-role {
  font-size: .82rem;
  font-weight: 700;
  color: #d4a017;
  text-transform: uppercase;
  letter-spacing: .8px;
  display: block;
  margin-bottom: 14px;
}

.tcard-desc {
  font-size: .93rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Divider */
.tcard-body::after {
  content: '';
  display: none;
}

.tcard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tcard-list li {
  font-size: .88rem;
  color: #444;
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}

.tcard-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a017;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .about-hero         { min-height: 260px; }
  .about-hero-content { padding: 56px 24px 80px; }
  .handshake-img      { border-radius: 12px; }
  .tcard-photo        { height: 240px; }
  .tcard-body         { padding: 20px 20px 24px; }
  .tcard-name         { font-size: 1.4rem; }
  .tcard-initial      { font-size: 5rem; }
}