:root{
  --ink:#062c43;
}

.equipe-page{
  font-family: "Poppins", sans-serif;
  padding-top: 90px; /* header fixed */
}

/* HERO */
.equipe-hero{
  max-width: 100%;
  margin: 50px 50px;
  padding: 26px 20px 10px;
  position: relative;
}

.equipe-hero h1{
  margin: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
  font-size: clamp(44px, 6vw, 86px);
  line-height: 1.2;
  font-size:  60px;
}

.equipe-hero h1 span{
  display: inline-block;
}

.blue-subtitle{
  color: #899be5;
  font-weight: 700;
}

.equipe-hero__corners .corner{
  position:absolute;
  width: 46px;
  height: 46px;
  border: 10px solid rgba(75,112,186,0.28);
  border-right: none;
  border-bottom: none;
  border-radius: 6px;
}

.equipe-hero__corners .corner--tl{
  top: 10px;
  left: 12px;
}

.equipe-hero__corners .corner--br{
  right: 12px;
  bottom: -8px;
  transform: rotate(180deg);
  border-color: rgba(171,255,198,0.50);
}

/* GRID */
.equipe-grid{
  max-width: 1200px;
  margin: 18px auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; /* comme la planche */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(6,44,67,0.06);
  border: 1px solid rgba(6,44,67,0.04);
}

/* CARD */
.team-card{
  position: relative;
  aspect-ratio: 1 / 1; /* carré */
  display: grid;
  place-items: center;
  padding: 18px;
}

.team-card .avatar{
  width: 70%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(6,44,67,0.12);
}

.team-card .avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* arcs (texte courbé simulé) */
.arc{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
  pointer-events: none;
}

.arc span{
  display: inline-block;
  font-weight: 900;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: clamp(12px, 1.5vw, 18px);
  transform-origin: center;
}

/* On simule l’arc en courbant légèrement via perspective */
.arc--top{
  top: 12px;
}
.arc--top span{
  transform: perspective(600px) rotateX(28deg);
}

.arc--bottom{
  bottom: 12px;
}
.arc--bottom span{
  transform: perspective(600px) rotateX(-28deg);
  opacity: 0.9;
}

/* Couleurs de fond */
.bg-blue  { background: #cfe9ff; }
.bg-sand  { background: #f3e9dd; }
.bg-yellow{ background: #f6f08e; }
.bg-purple{ background: #bfb8ff; }
.bg-green { background: #bff0c8; }
.bg-sky   { background: #bfe3ff; }

/* Responsive */
@media (max-width: 980px){
  .equipe-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .equipe-grid{ grid-template-columns: 1fr; }
}

/* CTA newsletter : tu peux réutiliser EXACTEMENT le bloc que tu as déjà dans programme.css
   Si tu préfères, copie/colle ton bloc .newsletter-cta ici aussi (ou mets-le dans style.css global). */