/* Slide Cas Client Yolo — v12 : tout en proportionnel
   Carte = 30% de la largeur du stage
   Hauteur = grande valeur fixe (Elementor peut surcharger)
   translateX calculé en JS = 36% de la largeur réelle du stage  */

.beekom-cas-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  --cas-tab-border:       rgba(255,255,255,.4);
  --cas-tab-color:        #ffffff;
  --cas-tab-active-bg:    #ffffff;
  --cas-tab-active-color: #1A0B4D;
}

.cas__tabs {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}

.cas__tab {
  padding: 12px 32px;
  border-radius: 999px;
  border: var(--cas-tab-border-width, 1.5px) solid var(--cas-tab-border);
  background: var(--cas-tab-inactive-bg, transparent);
  color: var(--cas-tab-color);
  font-family: var(--ff-body, 'Open Sans', sans-serif);
  font-size: 1rem; font-weight: 500;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cas__tab:hover:not(.is-active) { filter: brightness(1.15); }
.cas__tab.is-active {
  background: var(--cas-tab-active-bg);
  color: var(--cas-tab-active-color);
  border-color: var(--cas-tab-active-border, transparent);
}

/* ── Stage ── */
.cas__stage {
  position: relative;
  width: 100%;
  height: 80vh;          /* hauteur = 80% de la hauteur viewport */
  min-height: 600px;
  max-height: 900px;
  overflow: visible;
}

/* ── Cards : 30% de la largeur du stage ── */
.cas__card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 42%;            /* proportionnel ! */
  min-width: 280px;      /* plancher mobile */
  max-width: 680px;      /* plafond grands écrans */
  /* Hauteur = 90% de la hauteur du stage — via aspect-ratio ou min-height */
  min-height: 85%;
  border-radius: clamp(16px, 2vw, 28px);
  padding: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 50px);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: clamp(24px, 3vw, 36px); /* gap entre body et CTA */
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  cursor: pointer;
}

/* ── Contenu — taille fluide ── */
/* ── Corps de la carte : logo + titre + desc centrés verticalement ── */
.cas__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 24px);
  flex: 1;
  justify-content: center; /* centre le groupe verticalement */
  width: 100%;
}

.cas__logo {
  max-height: clamp(48px, 6vw, 80px);
  max-width: clamp(140px, 16vw, 220px);
  object-fit: contain; flex-shrink: 0;
}

.cas__card-title {
  font-family: var(--ff-display, 'Syne', sans-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.75rem);
  font-weight: 700; line-height: 1.2; margin: 0;
}

.cas__card-desc {
  font-family: var(--ff-body, 'Open Sans', sans-serif);
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  line-height: 1.75; opacity: .88; margin: 0;
  /* plus de flex:1 ici — c'est .cas__card-body qui gère le flex */
}

/* ── CTA ── */
.cas__cta {
  margin-top: auto; width: 100%; display: flex; justify-content: center;
}

.cas__cta a {
  display: inline-flex; align-items: center; gap: var(--btn-gap, 16px);
  padding: var(--btn-pad, 5px 10px 5px 20px);
  border-radius: 999px;
  /* liseré via box-shadow inset : même rendu qu'une bordure, sans ajouter de hauteur (56px -> alignement avec les autres pills) */
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: inherit; text-decoration: none;
  font-size: clamp(0.8rem, 1.1vw, 1rem); font-weight: 600;
  transition: transform .25s ease;
}
.cas__cta a:hover { transform: translateY(-1px); }
.cas__cta-text { line-height: 1; }

/* Cercle plein = couleur texte de la carte ; flèche = fond de la carte */
.cas__cta-icon {
  width: var(--btn-icon, 40px); height: var(--btn-icon, 40px);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
.cas__cta-icon svg { width: var(--btn-icon, 40px); height: var(--btn-icon, 40px); display: block; }
.cas__cta-icon circle { fill: currentColor; }
.cas__cta-icon path   { stroke: var(--cas-card-bg, #1A0B4D); }
.cas__cta a:hover .cas__cta-icon { transform: rotate(-45deg); }



/* ── Responsive ── */
@media (max-width: 768px) {
  .cas__stage { height: 70vh; min-height: 500px; }
  .cas__card  { width: 70%; min-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .cas__card, .cas__cta a, .cas__cta-icon { transition: none !important; }
}