.hero-split {
  background: var(--blue);
  color: #fff;
  padding: 60px 0 40px;
  position: relative;
  overflow: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: stretch; /* permet d'étirer la colonne gauche = même hauteur que l'image */
  min-height: min(64vh, 520px);
}

/* Colonne gauche */
.hero-copy {
  display: flex;
  flex-direction: column;
  /*justify-content: space-between; /* slogan en haut, CTA en bas */
  padding: 10px 0;
}

/* Slogan aligné en haut */
.hero-slogan {
  font-size: 1rem;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 12px;
  /*align-self: flex-start;*/
  font-style: italic;
  font-weight: 300;
}

/* Titre principal */
.hero-kpi {
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.2;
  /*margin: auto 0; /* centré verticalement dans la colonne */
  font-weight: 700;
  color: #fff;
}
.hero-kpi strong { color: var(--orange); }

/* CTA aligné en bas */
.hero-actions {
 	margin: 20px auto 0 auto;
}
.hero-actions .cta-big {
  margin: 0 auto; /* assure le centrage */
}

.cta-bounce {
  animation: bounceBtn 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes bounceBtn {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Colonne droite : image */
.hero-visual {
  position: relative;
  z-index: 1;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(10,20,40,.12);
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--fadeWidth)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, #000 calc(100% - var(--fadeWidth)), rgba(0,0,0,0) 100%);
}

/* Carte blanche dans le Hero */
.hero-card {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #29324a;
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 900px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  margin: -30px auto 10px auto; /* assure le centrage */
  font-size: 0.95rem;
  line-height: 1.4;
}
/* Bandeau intégré */
.stats-band {
  position: absolute;
  bottom: -40px; /* chevauche en avant-plan */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  max-width: 900px;
  width: 90%;
  z-index: 10;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}

.stat {
  padding: 14px 10px; /* hauteur réduite */
  border-right: 1px solid #e8edf6;
}
.stat:last-child { border-right: none; }

.stat strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 4px;
}
.stat span {
  font-size: .85rem;
  color: #29324a;
}

/* Responsive */
@media (max-width: 820px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: none; }
  .stat { border-bottom: 1px solid #e8edf6; }
  .stat:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; }
}


/* Responsive */
@media (max-width:980px) {
  :root { --fadeWidth: 90px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-kpi { font-size: clamp(26px, 7vw, 38px); }
  .hero-copy { justify-content: flex-start; }
  .hero-actions { margin-top: 20px; align-self: flex-start; }
  .hero-visual {
    order:-1;
    border-bottom-right-radius: 60px;
    height: 42vh;
    min-height: 260px;
    
  }
  .hero-card {
	margin: 10px 20px 20px 20px; /* assure le centrage */
  }
}