/* Page d'accueil V2.1 — corrections des débordements desktop / tablette / mobile.
   Feuille volontairement séparée pour préserver les styles des articles et des outils. */

/* Le bandeau d'accueil doit pouvoir grandir : 100vh seul coupait la première ligne
   du titre derrière la navigation lorsque le contenu dépassait la hauteur disponible. */
.hero{
  height:auto;
  min-height:max(760px, 100svh);
  align-items:center;
  isolation:isolate;
}
.hero-in{
  padding-top:clamp(140px, 15vh, 190px);
  padding-bottom:clamp(90px, 10vh, 125px);
}
.hero h1{
  font-size:clamp(60px, 9vw, 148px);
  line-height:.96;
  max-width:100%;
  overflow-wrap:normal;
}
.hero h1 .line{overflow:visible}
.hero h1 .line span{max-width:100%;white-space:nowrap}
.hero .lead{line-height:1.55}
.hero::after{
  background:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.48) 52%,rgba(0,0,0,.19) 100%),
             linear-gradient(180deg,rgba(0,0,0,.2) 0%,transparent 48%,rgba(0,0,0,.40) 100%);
}

/* Nav : les liens ne doivent jamais passer sur le logo. */
.nav .wrap{max-width:1510px;padding-inline:clamp(20px,2.5vw,40px);gap:16px}
.nav .logo{flex-shrink:0;min-width:0}
.nav .logo b{font-size:22px}
.nav .links{min-width:0;gap:0}
.nav .links a.l{font-size:14px;padding:9px 9px}
.nav .links .btn{font-size:14px;padding-inline:18px}

/* Le bandeau défilant débordait de la largeur à cause de la rotation et des marges négatives. */
.marquee{width:100%;max-width:100%;margin:-20px 0 0;transform:none}

@media(max-width:1320px){
  .nav .links{display:none}
  .nav .burger{display:grid;flex-shrink:0}
}
@media(max-width:980px){
  .hero h1{font-size:clamp(58px, 9.5vw, 100px)}
  .hero-in{padding-top:135px;padding-bottom:105px}
  .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,.32)),linear-gradient(0deg,rgba(0,0,0,.3),transparent 65%)}
  .mnav{overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;padding-top:105px;padding-bottom:36px}
  .mnav a{font-size:clamp(27px,4vh,42px);line-height:1.1;padding:4px 0}
}
@media(max-width:620px){
  .hero{min-height:max(760px, 100svh)}
  .hero-in{padding-top:130px;padding-bottom:85px}
  .hero h1{font-size:clamp(39px, 10.6vw, 62px);line-height:1.03;margin-top:18px}
  .hero .tag{font-size:11px;letter-spacing:.06em;line-height:1.35;max-width:100%;white-space:normal;padding:7px 11px}
  .hero .lead{font-size:clamp(15px, 4.1vw, 18px);margin-top:21px;max-width:100%;line-height:1.55}
  .hero .ctas{gap:10px;margin-top:22px}
  .hero .ctas .btn{min-height:50px;padding:12px 19px;font-size:14px;line-height:1.3;max-width:100%;text-align:center}
  .hero .scroll-cue{display:none}
  .hero .slide{background-position:58% center}
  .nav{padding:15px 0}
  .nav .wrap{gap:8px}
  .nav .logo{gap:8px;flex:1 1 auto}
  .nav .logo img{width:40px;height:40px;flex-shrink:0}
  .nav .logo b{font-size:clamp(16px,4.35vw,20px);line-height:1.05;white-space:normal;max-width:calc(100vw - 126px);overflow-wrap:normal}
  .nav .burger{width:46px;height:46px;flex:0 0 46px}
}
@media(max-width:360px){
  .hero h1{font-size:clamp(36px, 10.2vw, 40px)}
  .hero .tag{font-size:10px;letter-spacing:.045em}
  .hero .lead{font-size:15px}
  .nav .logo b{font-size:16px}
}
@media(max-height:700px) and (min-width:621px){
  .hero-in{padding-top:125px;padding-bottom:85px}
  .hero h1{font-size:clamp(58px,7vw,110px)}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 .line span{transform:none;animation:none}
}
/* L'ancienne animation latérale des textes créait une largeur de page de +30 px sur mobile. */
.rv.r{transform:translateY(36px)}
.rv.r.on{transform:none}
@media(max-width:400px){
  .tools .tool{flex-direction:column;align-items:flex-start;gap:13px;padding:21px}
  .tools .tool .ic{flex:0 0 60px;width:60px;height:60px}
  .tools .tool>div{min-width:0;width:100%}
  .tools .tool h3{font-size:26px;overflow-wrap:anywhere}
}