/* Mefami — page d'équipe /team.

   Feuille PROPRE À CETTE PAGE, posée après `styles.css`, sur le modèle de
   contact/contact.css : jetons de thème du site uniquement (variante nocturne
   incluse), décalages en propriétés LOGIQUES pour l'arabe (dir="rtl"). */

.tm { padding: 56px 0 88px; }
.tm-shell { max-width: 1080px; }
.tm .sec-eyebrow { margin-bottom: 14px; }

.tm-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; letter-spacing: -1px; line-height: 1.14;
  color: var(--ink);
  margin: 0; text-wrap: balance;
}
.tm-lede {
  font-size: 17px; line-height: 1.65; color: var(--ink-soft);
  max-width: 720px; margin: 18px 0 0;
}

/* ---- Les deux portraits ---------------------------------------------------- */
.tm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin: 40px 0 0;
}

.tm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* En-tête de profil : photo format passeport à gauche, nom et rôle à côté —
   la description commence en haut de la carte, visible sans défilement. */
.tm-head {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 26px 0;
}

.tm-photo {
  width: 104px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  display: block; flex-shrink: 0; margin: 0;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-alt);
}

.tm-body { padding: 16px 26px 26px; }

.tm-name {
  font-family: var(--font-title);
  font-size: 24px; font-weight: 800; letter-spacing: -0.4px;
  color: var(--ink); margin: 0;
}
.tm-role {
  font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
  color: var(--primary-ink); margin: 6px 0 0;
}

.tm-bio {
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
  margin: 16px 0 0;
}
.tm-bio:first-child { margin-top: 0; }

.tm-specs-intro {
  font-size: 14px; font-weight: 800; color: var(--ink);
  margin: 20px 0 0;
}
.tm-specs {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tm-specs li {
  position: relative;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  padding-inline-start: 18px;
}
.tm-specs li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

.tm-retour { margin: 40px 0 0; }

@media (max-width: 860px) {
  .tm-grid { grid-template-columns: 1fr; max-width: 560px; }
}