/* === Layout 2 colonnes, fond gris full-width === */
.cfn-members-slider{
  --bg:#efefef;
  --title:#63c3c1;
  --text:#90a4ae;
  --black:#000;
  --gap:24px;
  --card-pad:32px;
  --photo-w:320px;
  --arrow-size:32px;
  --arrow-bg:#fff;
  --arrow-bd:#e6eef0;
  --arrow-shadow:0 1px 2px rgba(0,0,0,.08);
  position:relative;
}

.cfn-members-slider .swiper{ width:100%; overflow:hidden !important; }
.cfn-members-slider .swiper .swiper-slide{ width:100% !important; }

/* Fond gris couvrant les 2 colonnes */
.cfn-slide{
  background:var(--bg);
  padding:var(--card-pad);
  display:grid;
  grid-template-columns: 0.7fr var(--photo-w); /* colonne texte réduite de 30% */
  gap:var(--gap);
  align-items:stretch; /* étire les 2 colonnes sur la même hauteur */
  min-height:260px;
}

/* 1re colonne : texte centré verticalement et horizontalement */
.cfn-card{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;  /* centrage vertical */
  align-items:center;      /* centrage horizontal */
  text-align:center;
  position:relative;
  min-height:0;            /* évite un blocage du centrage */
}

.cfn-card .cfn-name,
.cfn-card .cfn-role,
.cfn-card .cfn-country{
  margin-left:auto;
  margin-right:auto;
}

/* 2e colonne : photo collée au bord gauche */
.cfn-photo{ justify-self:start; align-self:start; margin:0; }
.cfn-photo img{ display:block; width:100%; max-width:var(--photo-w); height:auto; border:0 !important; outline:0 !important; }

/* Typo */
.cfn-name{
  margin:0 0 8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--title);
  line-height:1.1;
  font-size:clamp(20px,2vw,26px);
}
.cfn-role{ margin:0 0 18px; text-transform:uppercase; letter-spacing:.02em; color:var(--text); font-size:14px; }
.cfn-country{ display:flex; gap:10px; align-items:center; justify-content:center; color:var(--text); text-transform:uppercase; letter-spacing:.02em; font-size:14px; }
.cfn-flag{ width:28px; height:auto; display:inline-block; }

/* === Flèches : coin bas droit de la 1re colonne, côte à côte === */
/* Reset forts des positions par défaut Swiper */
.cfn-members-slider .swiper-button-prev,
.cfn-members-slider .swiper-button-next{
  position:absolute !important;
  top:auto !important;
  right:auto !important;          /* on calcule en 'left' pour viser la 1re colonne */
  left:auto !important;
  transform:none !important;

  z-index:5;
  width:var(--arrow-size);
  height:var(--arrow-size);
  border-radius:50%;
  background:var(--arrow-bg);
  border:1px solid var(--arrow-bd);
  box-shadow:var(--arrow-shadow);
  display:grid;
  place-items:center;
  color:inherit;
  bottom:var(--card-pad) !important;
}

/* Largeur utile de la 1re colonne = 100% - (2*padding) - photo - gap.
   NEXT = posé tout à droite de cette 1re colonne */
.cfn-members-slider .swiper-button-next{
  left: calc(
    var(--card-pad)                                     /* marge interne gauche */
    + (100% - 2*var(--card-pad) - var(--photo-w) - var(--gap))  /* largeur col1 */
    - var(--arrow-size)                                /* coller au bord droit */
  ) !important;
}

/* PREV = juste à gauche de NEXT (écart 8px) */
.cfn-members-slider .swiper-button-prev{
  left: calc(
    var(--card-pad)
    + (100% - 2*var(--card-pad) - var(--photo-w) - var(--gap))
    - (2 * var(--arrow-size) + 8px)
  ) !important;
}

/* Taille icônes */
.cfn-members-slider .swiper-button-prev::after,
.cfn-members-slider .swiper-button-next::after{
  font-size:14px !important;
}

/* Mobile : photo au-dessus, flèches dans le coin bas droit du texte */
@media (max-width:900px){
  .cfn-slide{ grid-template-columns:1fr; }
  .cfn-photo{ order:-1; }
  .cfn-members-slider .swiper-button-next{
    left: calc(100% - var(--card-pad) - var(--arrow-size)) !important;
    bottom: var(--card-pad) !important;
  }
  .cfn-members-slider .swiper-button-prev{
    left: calc(100% - var(--card-pad) - (2 * var(--arrow-size) + 8px)) !important;
    bottom: var(--card-pad) !important;
  }
}

/* Flèches posées en bas à droite de la 1re colonne (card active) */
.cfn-card{ position: relative; }

.cfn-card .swiper-button-prev,
.cfn-card .swiper-button-next{
  position: absolute !important;
  bottom: var(--card-pad) !important;
  right: var(--card-pad) !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 5;

  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  background: var(--arrow-bg);
  border: 1px solid var(--arrow-bd);
  box-shadow: var(--arrow-shadow);
  display: grid; place-items: center;
}

/* prev juste à gauche de next (écart 8px) */
.cfn-card .swiper-button-prev{
  right: calc(var(--card-pad) + var(--arrow-size) + 8px) !important;
}

.cfn-card .swiper-button-prev::after,
.cfn-card .swiper-button-next::after{ font-size:14px !important; }

/* === Mobile : flèches opposées, en bas de la colonne texte === */
@media (max-width: 900px){
  .cfn-card .swiper-button-prev,
  .cfn-card .swiper-button-next{
    bottom: var(--card-pad) !important;
  }

  /* Prev = bas gauche */
  .cfn-card .swiper-button-prev{
    left: var(--card-pad) !important;
    right: auto !important;
  }

  /* Next = bas droite */
  .cfn-card .swiper-button-next{
    right: var(--card-pad) !important;
    left: auto !important;
  }
}

/* === Mobile : flèches collées aux bords de la colonne texte === */
@media (max-width: 900px){
  .cfn-card .swiper-button-prev,
  .cfn-card .swiper-button-next{
    bottom: var(--card-pad) !important;
  }

  /* Prev = bas tout à gauche */
  .cfn-card .swiper-button-prev{
    left: 0 !important;
    right: auto !important;
  }

  /* Next = bas tout à droite */
  .cfn-card .swiper-button-next{
    right: 0 !important;
    left: auto !important;
  }
}