/* ==========================================================================
   Latinea — page Équipe
   Reprise à l'identique du rendu de Equipe.dc.html (styles en ligne convertis).
   Les jetons viennent de site.css : aucune valeur déjà en variable n'est
   réécrite en dur ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page
   Même dispositif que la page Cours : photo de fond, voile horizontal pour
   la lisibilité du texte, voile vertical pour asseoir l'en-tête fixe.
   Les règles sont reprises telles quelles de cours.css — chaque page porte
   sa feuille, aucune n'en charge une autre.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    calc(var(--hauteur-entete) + clamp(56px, 8vw, 120px))
    var(--espace-horizontal)
    clamp(48px, 6vw, 90px);
  border-bottom: 1px solid rgba(242, 235, 221, .08);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Voile horizontal : sombre à gauche, transparent à droite. */
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(18, 18, 18, .88) 0%,
      rgba(18, 18, 18, .7) 34%,
      rgba(18, 18, 18, .3) 56%,
      rgba(18, 18, 18, .06) 74%,
      rgba(18, 18, 18, 0) 100%);
}

/* Voile vertical : assombrit le haut et le bas de l'image. */
.page-hero__veil--vertical {
  background: linear-gradient(180deg,
      rgba(18, 18, 18, .4) 0%,
      rgba(18, 18, 18, 0) 34%,
      rgba(18, 18, 18, .38) 100%);
}

.page-hero__copy {
  position: relative;
  z-index: 2;
}

.page-hero__eyebrow {
  margin-bottom: 26px;
}

.page-hero__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.page-hero__lead {
  margin: 28px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .7);
}

/* --------------------------------------------------------------------------
   2. Grille des membres
   -------------------------------------------------------------------------- */
.team {
  /* Halo décalé à gauche, comme dans l'original : seule la position change,
     la recette du dégradé vient du socle. */
  --position-halo: 26% 14%;
  background: var(--degrade-section);
  padding: clamp(60px, 8vw, 128px) var(--espace-horizontal);
}

/* La classe .grid-3 est portée en plus de .team-grid : elle sert de prise
   aux paliers responsive déjà écrits dans le socle — 3 par ligne sur
   ordinateur, 2 sur tablette, 1 sur mobile. Aucun seuil n'est ajouté ici. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

.team-card {
  background: var(--fond-carte);
  border-radius: var(--arrondi-carte);
  padding: 10px;
  box-shadow:
    0 30px 64px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(242, 235, 221, .07);
}

.team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--arrondi-media);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}

.team-card__body {
  padding: 22px 18px 28px;
}

.team-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 23px;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

.team-card__role {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dore);
}

/* Le complément de discipline (« · souplesse ») était interlettré à part. */
.team-card__role em {
  font-style: normal;
  letter-spacing: 1.98px;
}

.team-card__bio {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(242, 235, 221, .62);
}

.team-card__bio p {
  margin: 0;
}

.team-card__bio p + p {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   3. Recrutement
   -------------------------------------------------------------------------- */
.team-word {
  border-top: 1px solid rgba(242, 235, 221, .08);
  background:
    radial-gradient(90% 70% at 78% 40%, rgba(201, 168, 76, .10) 0%, rgba(10, 10, 9, 0) 62%),
    var(--degrade-sombre);
  padding: clamp(68px, 9vw, 144px) var(--espace-horizontal);
}

.team-word__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.team-word__quote {
  margin: 0;
}

.team-word__quote p {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.team-word__cite {
  display: block;
  margin-top: 26px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dore);
}

.team-word__text {
  margin: 0;
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .72);
}

/* Même bouton que le socle, un cran plus compact — l'original le dessinait
   ainsi, comme les boutons d'en-tête de la page Cours. */
.team-word__cta {
  margin-top: 30px;
  padding: 11px 26px;
  font-size: 11.5px;
  border-color: rgba(242, 235, 221, .4);
}

/* --------------------------------------------------------------------------
   4. Cadrage des portraits
   Les sources font 1440 × 2160 pour un cadre en 4/5 : environ 17 % de la
   hauteur est rognée. On remonte la fenêtre pour garder les visages hauts
   dans la carte, quel que soit le format.
   -------------------------------------------------------------------------- */
.slot--cadre-pequeno  { object-position: center 25%; }
.slot--cadre-fanny    { object-position: center 20%; }
.slot--cadre-anouck   { object-position: center 20%; }
.slot--cadre-chloe    { object-position: center 30%; }
.slot--cadre-mathylda { object-position: center 25%; }
.slot--cadre-cm       { object-position: center 25%; }

/* En-tête : bande large et peu haute (1250 × 884), seul un ruban de la
   source est visible. 30 % garde la rangée de visages dans le cadre, au-
   dessus du titre qui court en bas à gauche du dégradé. */
.slot--cadre-hero-equipe { object-position: center 30%; }

/* --------------------------------------------------------------------------
   5. Responsive — paliers existants du socle, aucun nouveau seuil.
   -------------------------------------------------------------------------- */

/* Ordinateur : 3 par ligne dès la sortie du palier tablette. Le socle fait
   retomber toutes les .grid-3 à 2 colonnes sous 1080px, ce qui laissait la
   bande 1025–1080px à 2 professeurs par ligne alors qu'elle n'est plus une
   tablette. 1025px est le complément exact du seuil 1024 déjà en place —
   aucun nouveau seuil n'est introduit.
   Classe triplée : le socle surcharge en .grid-3.grid-3. */
@media (min-width: 1025px) {
  .team-grid.team-grid.team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Sur écran étroit, le voile horizontal devient vertical : le texte reste
   lisible quelle que soit la zone claire de la photo. Palier repris de la
   page Cours. */
@media (max-width: 860px) {
  .page-hero__veil {
    background: linear-gradient(180deg,
        rgba(18, 18, 18, .34) 0%,
        rgba(18, 18, 18, .54) 42%,
        rgba(18, 18, 18, .74) 100%);
  }
}

/* Mobile : le socle impose déjà une colonne unique aux .grid-3. La carte se
   resserre pour que la photo ne mange pas tout l'écran. */
@media (max-width: 767.98px) {
  .team-card__body {
    padding: 20px 14px 24px;
  }

  /* Recrutement : la grille est repliée sur une colonne, la citation, le
     texte et le bouton se calent au centre. */
  .team-word {
    text-align: center;
  }

  /* Seule largeur en ch que le socle ne neutralise pas ici (pas de
     `u-measure` sur la citation) : il faut la recentrer à la main. */
  .team-word__quote p {
    margin-inline: auto;
  }
}