.mobile-hero-mission-line{display:none}

@media(max-width:980px){
  /* Make the translucent/blurred hero panel much smaller so the image remains visible. */
  #accueil{
    min-height:500px!important;
    align-items:flex-end!important;
  }
  #accueil .hero-wrap{
    padding:96px 0 22px!important;
  }
  #accueil .hero-panel{
    width:auto!important;
    max-width:min(92vw,560px)!important;
    padding:14px 15px 14px!important;
    margin:0!important;
    border-radius:12px!important;
  }

  #accueil .hero-kicker{
    margin-bottom:6px!important;
    font-size:.58rem!important;
  }

  #accueil .hero-title-v26{
    gap:3px!important;
  }

  #accueil .hero-title-v26 h1,
  #accueil .hero-title-v26 .hero-primary{
    font-size:clamp(1.55rem,7.4vw,2.15rem)!important;
    line-height:1!important;
  }

  #accueil .hero-title-v26 .hero-secondary{
    font-size:.68rem!important;
    line-height:1.18!important;
    margin-top:1px!important;
  }

  /* The long desktop paragraph is not repeated inside the mobile blur panel. */
  #accueil .lead{
    display:none!important;
  }

  .mobile-hero-mission-line{
    display:block!important;
    margin:8px 0 0!important;
    font-size:.7rem!important;
    line-height:1.28!important;
    font-weight:650!important;
    letter-spacing:.01em!important;
    color:inherit!important;
  }
}

@media(max-width:420px){
  #accueil .hero-panel{
    max-width:94vw!important;
    padding:12px 13px!important;
  }
  #accueil .hero-title-v26 h1,
  #accueil .hero-title-v26 .hero-primary{
    font-size:clamp(1.45rem,7.2vw,1.95rem)!important;
  }
}