/* Hero v3 du site YLEVIO Conseil — PROPOSITION (rien n'est en ligne).
   Charte : encre chaude #14110d + or. UN SEUL caractère : Satoshi (400, 500, 700). Tout est préfixé .hero3 / .h3. */
.hero3{
  --ease:cubic-bezier(.2,.8,.2,1);
  --h3-font:var(--font,'Satoshi',system-ui,sans-serif); --h3-mono:var(--h3-font);
  --h3-cream:#faf7f1; --h3-gold:#b8925a; --h3-gold-bright:#dab67e;
  position:relative; overflow:hidden; isolation:isolate; color:var(--h3-cream); font-family:var(--h3-font);
  display:flex; align-items:center; min-height:min(80vh,720px); min-height:min(80svh,720px); padding:60px 0 112px;
  background:#14110d;
}
.hero3 .wrap{position:relative; z-index:2; width:100%;}

/* fond : quadrillage de points très discret, halo doré léger, « immeubles » qui montent (courbe de progression) */
.hero3__bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero3__bg::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(250,247,241,.09) 1px, transparent 1.2px); background-size:30px 30px; background-position:15px 15px;
  -webkit-mask-image:linear-gradient(100deg, transparent 20%, #000 75%); mask-image:linear-gradient(100deg, transparent 20%, #000 75%);
}
.hero3__glow{
  position:absolute; right:-12%; bottom:-34%; width:78%; height:96%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(218,182,126,.15), rgba(218,182,126,0));
  transform:translate3d(calc(var(--mx,0)*22px), calc(var(--my,0)*12px), 0); transition:transform .9s var(--ease);
}
.hero3__city{
  position:absolute; left:0; right:0; bottom:0; height:min(66%,480px);
  transform:translate3d(calc(var(--mx,0)*-16px), calc(var(--my,0)*-9px), 0); transition:transform .9s var(--ease);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 36%, rgba(0,0,0,.4) 52%, #000 70%);
  mask-image:linear-gradient(90deg, transparent 0, transparent 36%, rgba(0,0,0,.4) 52%, #000 70%);
}
.hero3__city svg{display:block; width:100%; height:100%; overflow:visible;}
.hero3__city rect{transform-box:fill-box; transform-origin:50% 100%;}
.hero3__grid{stroke:rgba(250,247,241,.08); stroke-width:1;}
.hero3__trend{fill:none; stroke:var(--h3-gold-bright); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; opacity:.92;}
.hero3__pin{transform-box:fill-box; transform-origin:center;}
.hero3__pin-ring{fill:none; stroke:var(--h3-gold-bright); stroke-width:1.4; transform-box:fill-box; transform-origin:center; animation:h3ring 2.8s ease-out infinite;}
@keyframes h3ring{0%{transform:scale(.7); opacity:.9;} 100%{transform:scale(3.2); opacity:0;}}
.hero3__lab{font:500 12.5px var(--h3-mono); letter-spacing:.06em; fill:rgba(250,247,241,.82);}
.hero3__lab--soft{fill:rgba(250,247,241,.38); font-size:10.5px;}
.hero3__leader{stroke:var(--h3-gold-bright); stroke-width:1; opacity:.6;}
.hero3__dot{fill:var(--h3-gold-bright);}

/* texte */
.hero3__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font:500 12px/1 var(--h3-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--h3-gold-bright);
}
.hero3__eyebrow i{width:6px; height:6px; background:var(--h3-gold-bright); flex:none;}

.hero3__title{
  margin:24px 0 0; max-width:11.5em; color:var(--h3-cream);
  font:800 clamp(44px,6.4vw,96px)/1.04 var(--h3-font); letter-spacing:-.045em;
}
.hero3__title .ln{display:inline-block; overflow:hidden; vertical-align:top; padding:.14em .04em .26em; margin:-.14em -.04em -.26em;}
.hero3__title .ln > span{display:inline-block;}
.hero3__title .it{position:relative; color:var(--h3-gold-bright);}
.hero3__title .it::after{
  content:""; position:absolute; left:.03em; right:.03em; bottom:-.1em; height:.045em; transform-origin:left;
  background:var(--h3-gold-bright);
}

.hero3__lead{margin:30px 0 0; max-width:34em; font:400 clamp(16.5px,1.35vw,19.5px)/1.6 var(--h3-font); color:rgba(250,247,241,.78);}
.hero3__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.h3btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:999px;
  font:600 15px/1 var(--h3-font); text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.h3btn--gold{background:var(--h3-gold-bright); color:#14110d;}
.h3btn--gold:hover{background:#e6c58f; transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(218,182,126,.55);}
.h3btn--ghost{color:var(--h3-cream); border:1px solid rgba(250,247,241,.32);}
.h3btn--ghost:hover{border-color:var(--h3-gold-bright); color:var(--h3-gold-bright);}
.h3btn .ar{display:inline-block; transition:transform .25s var(--ease);}
.h3btn:hover .ar{transform:translateX(4px);}
.h3btn:focus-visible{outline:2px solid var(--h3-gold-bright); outline-offset:3px;}

/* les chiffres ne sont montrés qu'UNE fois sur la page : ici (ils ne sont plus répétés en bas de page) */
.hero3__proof{list-style:none; display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:14px 46px; max-width:820px; margin:46px 0 0; padding:24px 0 0; border-top:1px solid rgba(250,247,241,.16);}
.hero3__proof strong{display:block; font:700 clamp(26px,2.6vw,36px)/1 var(--h3-font); letter-spacing:-.04em; color:var(--h3-cream);}
.hero3__proof span{display:block; margin-top:9px; font:500 11px/1.3 var(--h3-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(250,247,241,.56);}

/* animation d'arrivée : uniquement si le JS tourne (.js), sinon tout est visible tout de suite */
.js .hero3 [data-in]{opacity:0; transform:translateY(18px);}
.js .hero3 .ln > span{transform:translateY(140%);}
.js .hero3 .it::after{transform:scaleX(0);}
.js .hero3__city rect{transform:scaleY(0);}
.js .hero3__trend{stroke-dasharray:1; stroke-dashoffset:1;}
.js .hero3__pin{opacity:0; transform:scale(.3);}
.js .hero3__pin-ring{opacity:0;}
.js .hero3__ann{opacity:0;}

.hero3.is-in [data-in]{opacity:1; transform:none; transition:opacity .9s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);}
.hero3.is-in .ln > span{transform:none; transition:transform 1.05s var(--ease) var(--d,0s);}
.hero3.is-in .it::after{transform:scaleX(1); transition:transform 1s var(--ease) 1.2s;}
.hero3.is-in .hero3__city rect{transform:scaleY(1); transition:transform 1.25s var(--ease) calc(.5s + var(--i)*.04s);}
.hero3.is-in .hero3__trend{stroke-dashoffset:0; transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1) 1.3s;}
.hero3.is-in .hero3__pin{opacity:1; transform:none; transition:opacity .6s ease 3.5s, transform .9s var(--ease) 3.5s;}
.hero3.is-in .hero3__pin-ring{opacity:1; transition:opacity .4s ease 3.6s;}
.hero3.is-in .hero3__ann{opacity:1; transition:opacity .8s ease var(--d,2s);}

@media (max-width:720px){
  .hero3{min-height:0; padding:52px 0 150px;}
  .hero3__title{font-size:clamp(38px,11.4vw,54px);}
  .hero3__cta{flex-direction:column; align-items:stretch;}
  .h3btn{justify-content:center;}
  .hero3__proof{grid-template-columns:repeat(2,1fr); justify-content:stretch; gap:22px 16px; margin-top:38px; padding-top:22px;}
  .hero3__proof strong{font-size:26px;}
  .hero3__proof span{margin-top:8px; font-size:10px; letter-spacing:.05em;}
  .hero3__city{height:38%; -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 34%, #000 62%); mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 34%, #000 62%);}
  .hero3__city rect{stroke-width:3.2;}
  .hero3__trend{stroke-width:4.5;}
  .hero3__ann{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .hero3 *, .hero3 *::after{animation:none !important; transition:none !important;}
  .js .hero3 [data-in], .js .hero3 .ln > span, .js .hero3__city rect, .js .hero3__pin, .js .hero3__ann{opacity:1 !important; transform:none !important;}
  .js .hero3 .it::after{transform:none !important;}
  .js .hero3__trend{stroke-dashoffset:0 !important;}
  .hero3__pin-ring{display:none;}
}