/* empecher le scroll page coming soon TEMPORAIRE */
html, body {
  height: 100%;
  overflow: hidden;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{background:#fff;overflow-x:hidden;}

/* ne force plus la hauteur écran */
.hero{ 
  position: relative;
  /* supprime min-height:100dvh; */
}

/* image à sa taille naturelle */
.hero-bg{
  position: static;      /* plus d'absolu */
  display: block;
  width: 100%;
  height: auto;          /* conserve les proportions d’origine */

}

/* texte/compteur */
.hero-content{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; text-align: center; color: #fff;
  transform: translateY(10px);
}

.hero-bg, .hero-bg img {
  display: block;
  width: 100%;
  height: auto;
}



.hero-title{
  max-width:min(1000px,90vw);
  font-size:clamp(18px,1.8vw,28px);
  line-height:1.35;
  text-shadow:
    0 2px 4px rgba(0,0,0,.85),   /* ombre principale plus dense */
    0 0 8px rgba(0,0,0,.6);     /* léger halo pour adoucir les contours */
}


.cd{
  display:flex; gap:clamp(10px,2vw,22px); flex-wrap:wrap;
  margin:0;         
}

.cd__box{
  min-width:120px; padding:16px 18px; border-radius:14px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cd__num{display:block; font-size:clamp(28px,5vw,48px); font-weight:900; letter-spacing:.5px;}
.cd__lbl{opacity:.9; font-weight:600;}

/* --- Mobile portrait (≤ 480px) : remonte franchement --- */
@media (max-width: 480px){
  .hero-content{
    transform: translateY(-8vh);   /* remonte le bloc */
  }
  .hero-title{
    font-size: clamp(16px, 4.6vw, 18px);
    max-width: 92vw;
  }
  .cd{
    gap: 8px;
  }
  .cd__box{
    min-width: 90px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .cd__num{ font-size: clamp(18px, 7vw, 24px); }
  .cd__lbl{ font-size: 12px; }
}

/* --- Tablette (481–1024px) : remonte un peu --- */
@media (min-width: 481px) and (max-width: 1024px){
  .hero-content{
    transform: translateY(-20vh);
  }
  .hero-title{
    font-size: clamp(18px, 2.2vw, 20px);
    max-width: 88vw;
  }
  .cd__box{
    min-width: 110px;
    padding: 12px 14px;
  }
  .cd__num{ font-size: clamp(22px, 4.4vw, 34px); }
}

/* Par défaut : le span reste en ligne (mobile) */
.br-md { display: inline; }

/* À partir de la tablette : on force la coupure à cet endroit */
@media (min-width: 768px){
  .br-md { display: block; }
}

/* --- Desktop (≥ 1025px) : ombre plus marquée --- */
@media (min-width: 1025px){
  .cd__box{
    box-shadow: 12px 12px 26px rgba(0,0,0,.85);
  }
}