/* intro */
#intro {text-align: center; height: calc(100vh - var(--marginL)); display: flex; justify-content: center; align-items: center;}
#intro .ct {z-index: 1;}
#intro .h2 {margin-bottom: var(--marginM);}
#intro .p {margin-bottom: var(--marginM); font-weight: 500; width: 50%; margin-left: auto; margin-right: auto;}
#intro .filli {position: absolute; bottom: var(--marginM); left: 50%; transform: translateX(-50%); width: 70%; z-index: 0;}


/* slider */
.slider{overflow:hidden;user-select:none;-moz-user-select:none; height: calc(170px + 330 * (100vw - 320px) / 1080); top: -100px;}
.slider .sw {height: 100vh;}
.slider .swiper-slide{overflow:hidden;display:flex;justify-content:center;height: 100%;}
.slider .bg, .slider .bg > div{width:100%;z-index:0;height:calc(170px + 330 * (100vw - 320px) / 1080);position:absolute;left:0;top:0;opacity:1;}
.slider .bg{opacity:1;}
.slider [data-bg]{background-size: cover; background-repeat: no-repeat; background-position: top;}
.slider .sw-p{margin-right:20px;}
.slider .sw-n > * + *{margin-left:10px;}


/* presentation */
#presentation {padding-bottom: var(--marginL); background: var(--light);}
#presentation .h2 {margin-bottom: var(--marginM);}
#presentation .bn {margin-top: var(--marginM);}
#presentation .slider + div {display: flex; justify-content: space-between;}
#presentation .left {width: 50%;}
#presentation .right {width: 40%; display: flex; flex-direction: column;}
#presentation .right nav {text-align: right; margin-top: var(--marginL);}
#presentation .right li:first-child {text-transform: uppercase; font-size: var(--textM); letter-spacing: 2px; font-weight: 600; color: var(--textColorLight);}
#presentation .right li:not(:first-child) {margin-top: 20px; font-weight: 600; color: var(--primary); transition: .3s ease-in-out;}
#presentation .right li:not(:first-child):hover {transform: translateX(-5px);}
#presentation .right picture {display: block; width: 100%;}
#presentation .right img {height: 100%; width: 100%; object-fit: contain;}
#presentation .scroll-down {position: absolute; top: -135px; left: 50%; transform: translateX(-50%);z-index: 10; }

/* conseil */
.sphere-conseil {--sphere: 180px; text-align: center; font-size: var(--textL); font-weight: 700; height: var(--sphere); width: var(--sphere); flex-direction: column; position: absolute; z-index: 1; left: 55%; bottom: 0; transform: rotate(5deg);}
.sphere-conseil:hover {transform: rotate(0);}
.sphere-conseil small {font-size: var(--textM); display: block; line-height: 1.2;}
.sphere-conseil:after {content: ''; height: calc(var(--sphere)*1.25); width: calc(var(--sphere)*1.25); display: block; border-radius: 50%; background: var(--secondary); z-index: -1; position: absolute; animation: pulse 1.5s infinite; transition: .3s ease-in-out;}
.sphere-conseil:hover:after {background: var(--primary);}
@keyframes pulse { 0% {opacity: .8;transform: scale(0.3);} 50% {opacity: .8;} 100% {opacity: 0;transform: scale(1);}}


/* newsletter */
#nl {padding-top: var(--marginM); padding-bottom: var(--marginM); background: var(--lighter);}
#nl .ct {display: flex;}
#nl .h2 {width: 60%;}
#nl .form {width: 40%; margin-left: var(--marginM); display: flex; align-items: center;}
#nl .fieldset {margin-bottom: 0; height: 50px; border-bottom-right-radius: 0; border-top-right-radius: 0;}
#nl .fieldset .span {border-bottom-right-radius: 0; border-top-right-radius: 0;}
#nl .fieldset:not(.act) label {top: 2px; background: var(--lighter);}
#nl .fieldset .span:before {border-bottom-right-radius: 0; border-top-right-radius: 0; background: var(--lighter);}
#nl .bn {border-bottom-left-radius: 0; border-top-left-radius: 0;}

/* media */

@media screen and (max-width:1500px){
    #intro {height: calc(80vh - var(--marginL));}
    #intro .p {width: 100%;}
}
@media screen and (max-width:1200px){
    #presentation .slider + div {flex-direction: column;}
    #presentation .left {width: 100%;}
    #presentation .right {width: 100%; flex-direction: row; margin-top: var(--marginM); align-items: center; justify-content: space-between;}
    #presentation .right picture {width: 50%;}
    #presentation .right nav {width: 50%; margin-top: 0;}
    .sphere-conseil {left: 50%;}
    #nl .h2 {font-size: 40px!important;}
    #nl .h2 small {font-size: 25px!important;}
    #nl .form {width: 65%;}
}
@media screen and (max-width:950px){
    .sphere-conseil {--sphere: 135px; font-size: var(--textM); left: 55%;}
    .sphere-conseil small {font-size: var(--textS);}
}
@media screen and (max-width:800px){
    .slider {top: -75px;}
    #intro {height: calc(100vh - var(--marginL));}
    #presentation .scroll-down {top: -110px;}
    .sphere-conseil {left: auto; right: 0; bottom: -15%;}
    #nl {padding-top: var(--marginL); padding-bottom: var(--marginL);}
    #nl .ct {flex-direction: column; align-items: center;}
    #nl .h2 {width: 100%; margin-bottom: var(--marginM); text-align: center;}
    #nl .form {width: 100%; margin-left: 0;}
}
 @media screen and (max-width:650px){
    .sphere-conseil {--sphere: 100px; font-size: var(--textS); right: auto; left: 0;}
    .sphere-conseil small {font-size: 12px;}
}
@media screen and (max-width:600px){
    #presentation .scroll-down {top: -100px;}
}
@media screen and (max-width:550px){
    #presentation .right {flex-direction: column;}
    #presentation .right nav {width: 100%; text-align: center;}
    #presentation .right picture {width: 100%; margin-bottom: var(--marginM);}
    .sphere-conseil {bottom: -11%;}
}
@media screen and (max-width:500px){
    #intro {height: 100vh;}
    #presentation .scroll-down {top: -75px;}
    .slider {top: -50px;}
}
@media screen and (max-height:900px) {
    #intro {height: 100vh;}
}