/*
** Réalisation : LaFabrikk
** https://www.lafabrikk.fr
*/

/* --- PAGE --- */
body.page h1 {
  margin-bottom: var(--KPM020);
  font-size: var(--KPM044);
  font-weight: 300;
  line-height: var(--KPM048);
  text-align: center;
}

/* --- EQUIPE --- */
.equipe-liste {
  margin-top: var(--KPM080);
  margin-bottom: 12.5rem;
}
.equipe-membre {
  width: 28.25%;
  margin-right: 7.625%;
  margin-top: 6.69%;
}
.equipe-membre:nth-child(1),
.equipe-membre:nth-child(2),
.equipe-membre:nth-child(3) {
  margin-top: 0;
}
.equipe-membre:nth-child(3n) {
  margin-right: 0;
}
.membre-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 83.15%;
  aspect-ratio: 0.89;
  margin-left: 0;
  margin-right: auto;
  padding: 0 var(--KPM023) var(--KPM093);
}
.membre-image:before {
  z-index: 2;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 76, 152, 0) 100%);
  opacity: 0.9;
}
.membre-image img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.membre-nom {
  z-index: 3;
  position: relative;
  font-size: var(--KPM026);
  color: #fff;
}
.membre-poste {
  z-index: 3;
}
.membre-meta {
  z-index: 4;
  position: relative;
  width: 76.84%;
  margin-left: auto;
  margin-right: 0;
  margin-top: -3.375rem;
  padding: var(--KPM042) var(--KPM030) var(--KPM013);
}
.membre-meta:before {
  content: '';
  position: absolute;
  bottom: 99%;
  right: 0;
  width: var(--KPM060);
  height: var(--KPM060);
  background-color: #fff;
  -webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
.membre-quote {
  height: 6.8125rem;
  margin-bottom: var(--KPM042);
  color: #fff;
}
.membre-quote > div {
  position: relative;
    font-size: var(--KPM014);
}
.membre-quote .quote-in {
  position: absolute;
  bottom: 100%;
  right: 100%;
}
.membre-quote .quote-out {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: rotateZ(180deg)
}
.membre-quote .quote-in svg,
.membre-quote .quote-out svg {
  fill: #fff;
  width: var(--KPM026);
  height: auto;
}

.membre-meta .btn-secondary-dark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--KPM013);
}

.equipe-membre:nth-child(n+1) .membre-meta,
.equipe-membre:nth-child(n+1) .membre-meta:before {
  background-color: var( --KPMcolblue);
}
.equipe-membre:nth-child(n+2) .membre-meta,
.equipe-membre:nth-child(n+2) .membre-meta:before {
  background-color: var( --KPMcoldarkblue);
}
.equipe-membre:nth-child(n+3) .membre-meta,
.equipe-membre:nth-child(n+3) .membre-meta:before {
  background-color: var( --KPMcolgreen);
}
.equipe-membre:nth-child(n+4) .membre-meta,
.equipe-membre:nth-child(n+4) .membre-meta:before {
  background-color: #fff;
}
.equipe-membre:nth-child(n+4) .membre-meta .membre-quote {
  color: var(--KPMcoldarkblue);
}
.equipe-membre:nth-child(n+4) .membre-quote .quote-in svg,
.equipe-membre:nth-child(n+4) .membre-quote .quote-out svg {
  fill: var(--KPMcolblue);
}

.equipe-membre:nth-child(n+4) .btn-naked {
  color: #004C98;
}
.equipe-membre:nth-child(n+4) .btn-naked svg {
  fill: #004C98;
}