/* L'équipe. Les mots alternent portrait et citation d'un côté à l'autre ; la
   photo de groupe en bandeau, les pôles en damier dessous. Ce que la feuille ne
   renseigne pas ne s'affiche pas. */

.team{position:relative;overflow-x:clip;
  padding:calc(var(--nav-h) + 2.6rem) 0 3.5rem}

.team-head,.team-body{position:relative;z-index:1}

.team-lead{margin:1.05rem 0 0;color:var(--muted);
  font-size:clamp(.92rem,1.1vw,1.04rem);line-height:1.6;max-width:46ch}
.team-lead[hidden]{display:none}

.team-body{display:flex;flex-direction:column;gap:clamp(2.2rem,4.5vw,3.6rem);
  margin-top:clamp(2rem,3.5vw,3rem)}

/* ---------- en-tête d'un bloc ---------- */
.team-block[hidden]{display:none}
.team-block-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem}
.team-block-icon{flex:0 0 auto;display:grid;place-items:center;width:2.9rem;height:2.9rem;
  border-radius:50%;background:color-mix(in oklab,var(--lime) 30%,var(--paper));
  color:var(--moss-deep,var(--moss))}
.team-block-icon svg{width:1.4rem;height:1.4rem}
.team-block-title{margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.75rem);letter-spacing:.01em;
  color:var(--teal-deep);line-height:1.1}
.team-block-sub{margin:.25rem 0 0;color:var(--muted);font-size:clamp(.82rem,.98vw,.93rem);line-height:1.5}
.team-block-sub[hidden]{display:none}

/* ---------- les mots ---------- */
.quotes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(1.6rem,3vw,2.6rem)}
.quote{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem)}
/* Placement explicite plutôt qu'un « order » : la colonne étroite doit rester
   celle de la photo des deux côtés, sinon son cadre s'étire. La rangée est
   imposée aussi — le placement automatique ne revient jamais en arrière et
   renverrait une citation inversée d'une ligne sur une deuxième rangée. */
.quote-person{grid-column:1;grid-row:1}
.quote-text{grid-column:2;grid-row:1}
/* une ligne sur deux : la citation passe à gauche */
.quote--flip{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
.quote--flip .quote-person{grid-column:2}
.quote--flip .quote-text{grid-column:1}

/* la photo, puis le nom dessous, le tout centré */
.quote-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.quote-photo{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:1.1rem;
  background:repeating-linear-gradient(135deg,
    color-mix(in oklab,var(--moss) 7%,var(--paper)) 0 10px,
    color-mix(in oklab,var(--moss) 11%,var(--paper)) 10px 20px);
  border:1px solid color-mix(in oklab,var(--moss) 14%,var(--line));
  box-shadow:0 16px 34px -26px rgba(11,53,34,.55)}
.quote-photo img{display:block;width:100%;height:100%;object-fit:cover}

.quote-title{margin:.75rem 0 0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(.95rem,1.35vw,1.2rem);color:var(--bark);line-height:1.15}
.quote-name{margin:.45rem 0 0;font-weight:800;color:var(--bark);font-size:.9rem}
.quote-role{margin:.1rem 0 0;color:var(--muted);font-size:.83rem;line-height:1.4}

/* la citation, dans une bulle */
.quote-text{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:1.1rem;padding:1.2rem 1.4rem;color:var(--ink);
  font-size:clamp(.88rem,1.02vw,.96rem);line-height:1.7;white-space:pre-line;
  box-shadow:0 12px 30px -24px rgba(11,53,34,.5)}

/* ---------- l'équipe ---------- */
/* Photo de groupe en paysage : dans une colonne à côté des pôles elle serait
   deux fois moins haute que la pile de cartes. En bandeau au-dessus, largeur
   plafonnée, les cartes s'étalent dessous. */
.team-group{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,2.8vw,2.2rem);align-items:start}
.team-photo{margin:0 auto;width:min(100%,44rem)}
.team-photo[hidden]{display:none}
/* 3/2 : le cadrage d'un appareil photo, pour ne pas rogner les têtes */
.team-frame{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:1.4rem;
  background:repeating-linear-gradient(135deg,
    color-mix(in oklab,var(--moss) 7%,var(--paper)) 0 10px,
    color-mix(in oklab,var(--moss) 11%,var(--paper)) 10px 20px);
  box-shadow:0 18px 38px -26px rgba(11,53,34,.55)}
.team-frame img{display:block;width:100%;height:100%;object-fit:cover}
/* plusieurs photos : le carrousel occupe la place de la photo seule, et c'est
   lui qui porte l'arrondi et l'ombre */
.team-photo .carousel{max-width:none}
.team-photo .carousel .team-frame{border-radius:0;box-shadow:none}

.team-poles{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.8rem}
/* Un filet de la couleur du pôle tient lieu de signe distinctif, et les membres
   se lisent en pastilles : plus court à parcourir qu'une liste en colonne. */
.team-pole{position:relative;overflow:hidden;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:1rem;
  padding:.85rem 1rem .9rem 1.15rem;box-shadow:0 10px 24px -22px rgba(11,53,34,.4)}
.team-pole::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:var(--tone-fg,var(--moss))}
/* la photo d'un pôle, quand la ligne en donne une : à fond perdu en tête */
.team-pole-photo{display:block;margin:-.85rem -1rem .75rem -1.15rem;aspect-ratio:16/9;
  overflow:hidden;background:var(--cream)}
.team-pole-photo img{display:block;width:100%;height:100%;object-fit:cover}
.team-pole-name{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-size:.82rem;letter-spacing:.04em;line-height:1.25;color:var(--tone-fg,var(--bark))}
.team-pole-members{list-style:none;margin:.55rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.3rem}
.team-pole-members li{padding:.2rem .55rem;border-radius:999px;font-size:.8rem;
  line-height:1.35;background:var(--tone-bg,var(--cream));color:var(--bark)}

/* ---------- écrans étroits ---------- */
@media (max-width:960px){
  .team{padding:calc(var(--nav-h) + 1.6rem) 0 2.4rem}

  /* en colonne, l'alternance n'a plus de sens : tout reprend l'ordre de lecture */
  .quote,.quote--flip{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .quote-person,.quote-text,
  .quote--flip .quote-person,.quote--flip .quote-text{grid-column:1;grid-row:auto}
  /* width:100% explicite : une marge auto sur un element de grille annule
     l etirement, et le bloc se dimensionnerait alors sur la longueur du nom */
  .quote-person{width:100%;max-width:18rem;margin-inline:auto}
}