.ville-feuille-header{background-color:#489f9d}
.ville-feuille-header__img{text-align:center}
.ville-feuille-header__lead{font-weight:700;text-align:center;line-height:2;color:#fff}
.hero-img{position:relative;background-color:#e4f1f0}
.hero-img__back{position:relative;overflow:hidden;background-color:#fff}
.hero-img__back:after,.hero-img__back:before{position:absolute;display:block;left:0;width:100%;height:100%;content:''}
.hero-img__back:before{background:url(../img/bg_hero_01.jpg) center top repeat-x}
.hero-img__back:after{bottom:0;width:100%;background:url(../img/bg_hero_02.png) center center/auto 100% repeat-x}
.hero-img__front{position:absolute;left:calc(50% - 460px);width:920px;height:670px;background:url(../img/bg_hero_03.png) center center no-repeat}
.hero-img__front span{position:absolute;display:block;opacity:0;will-change:animation}
.hero-img__front span:nth-child(1){top:12.98507%;left:33.15217%}
.hero-img.show .hero-img__front span:nth-child(1){animation:1s ease-in-out 1s forwards leaf_animation_1}
.hero-img__front span:nth-child(2){top:21.04478%;left:39.51087%}
.hero-img.show .hero-img__front span:nth-child(2){animation:1s ease-in-out 1s forwards leaf_animation_2}
.hero-img__front span:nth-child(3){top:19.1791%;left:56.73913%}
.hero-img.show .hero-img__front span:nth-child(3){animation:1s ease-in-out 2s forwards leaf_animation_3}
.hero-img__front span:nth-child(4){top:27.31343%;left:52.01087%}
.hero-img.show .hero-img__front span:nth-child(4){animation:1s ease-in-out 2s forwards leaf_animation_4}
.hero-img__front span:nth-child(5){top:35.8209%;left:57.71739%}
.hero-img.show .hero-img__front span:nth-child(5){animation:1s ease-in-out 2s forwards leaf_animation_5}
.hero-img__front span:nth-child(6){top:23.13433%;left:19.61957%}
.hero-img.show .hero-img__front span:nth-child(6){animation:1s ease-in-out 3s forwards leaf_animation_6}
.hero-img__front span:nth-child(7){top:28.58209%;left:27.93478%}
.hero-img.show .hero-img__front span:nth-child(7){animation:1s ease-in-out 3s forwards leaf_animation_7}
.hero-img__front span:nth-child(8){top:36.64179%;left:22.3913%}
.hero-img.show .hero-img__front span:nth-child(8){animation:1s ease-in-out 3s forwards leaf_animation_8}
.hero-img__note{position:absolute;padding-left:1em;opacity:0;transition:opacity 1s ease-in-out 3.25s}
.hero-img__note span{display:inline-block;margin-left:-1em;width:1em}
.hero-img.show .hero-img__note{opacity:1}
.howto,.service{background-color:#e4f1f0}
.needs-item{display:block}
.needs-item__text{text-align:center}
@keyframes leaf_animation_1{
0%{top:12.98507%;left:33.15217%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:0;left:27.06522%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_2{
0%{top:21.04478%;left:39.51087%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:16.1194%;left:39.78261%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_3{
0%{top:19.1791%;left:56.73913%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:12.38806%;left:74.23913%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_4{
0%{top:27.31343%;left:52.01087%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:28.65672%;left:64.78261%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_5{
0%{top:35.8209%;left:57.71739%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:45.67164%;left:76.19565%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_6{
0%{top:23.13433%;left:19.61957%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:20.29851%;left:0;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_7{
0%{top:28.58209%;left:27.93478%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:31.19403%;left:16.63043%;opacity:1;transform:translate3d(0,0,0)}
}
@keyframes leaf_animation_8{
0%{top:36.64179%;left:22.3913%;opacity:0;transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-15%,0)}
100%{top:47.31343%;left:5.54348%;opacity:1;transform:translate3d(0,0,0)}
}
@media screen and (min-width:768px){
.ville-feuille-header{padding:110px 0 60px}
.ville-feuille-header__img img{margin-right:40px}
.ville-feuille-header__lead{margin-top:55px;font-size:1.25em}
.hero-img{padding-bottom:155px}
.hero-img__back{height:640px}
.hero-img__back:before{top:-190px}
.hero-img__back:after{height:277px}
.hero-img__front{top:90px}
.hero-img__note{top:660px;font-size:.75em}
.howto{padding-bottom:120px}
.service{padding-bottom:110px}
.service-container:before{height:calc(50% + 120px)}
.needs{padding-top:110px}
.needs-block{margin-top:60px}
.needs-lead{text-align:center;line-height:2}
.needs-list{display:flex;margin-top:30px}
.needs-item{width:30.83333%;flex:1}
.needs-item:not(:first-child){margin-left:3.75%}
.needs-item__text{margin-top:20px}
}
@media screen and (max-width:767px){
.ville-feuille-header{padding:55px 0 30px}
.ville-feuille-header__img{position:relative;height:62px}
.ville-feuille-header__img img{position:absolute;top:0;left:50%;max-width:none;transform:translateX(-50%) scale(.33333);transform-origin:center top}
.ville-feuille-header__lead{margin-top:20px;padding:0 10px;font-size:.875em}
.hero-img{padding-bottom:80px}
.hero-img__back{height:220px}
.hero-img__back:before{top:-45px;background-size:auto 155px}
.hero-img__back:after{height:88px}
.hero-img__front{top:45px;transform:scale(.30435);transform-origin:center top}
.hero-img__note{top:240px;font-size:.625em;transform:scale(.8);transform-origin:left top}
.howto{padding-bottom:40px}
.service{padding-bottom:50px}
.service-container:before{height:calc(25% + 50px)}
.needs{padding-top:45px}
.needs-block{margin-top:40px}
.needs-lead{font-size:.875em}
.needs-item:not(:first-child),.needs-list{margin-top:25px}
.needs-item__text{margin-top:10px;font-size:.875em}
}