body,html{
    --scroll-behavior:smooth;
    overflow-x:hidden;
    scroll-behavior:smooth;
    position:relative;
    height:100%
}
.hamburger-box,a,body,header .container,html{
    position:relative
}
.menu-items.active,main .intro{
    background-image:url(./assets/img/rond.svg),linear-gradient(#333,#1f1f1f)
}
#design,#dev{
    padding-top:25px
}
#mentions,footer>div>a{
    top:-15px
}
.button,.close,.hamburger,.menu-burger{
    cursor:pointer
}
#mentions,.des-dev h2,.menu-items,.menu-items a{
    text-align:center
}
.btn,.menu-items a,a.link,footer a{
    text-decoration:none
}
*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
:root{
    --blackbg:#333333;
    --pink:#EA466B;
    --white:#fff;
    --yellow:#F1AF27
}
::selection{
    background-color:var(--pink)
}
.hero-pink::selection{
    background-color:var(--yellow)!important
}
.hero-pink ::selection{
    background-color:var(--yellow)!important
}
.hero-pink h2{
    margin-left:15%;
    z-index:35
}
.container{
    margin:auto
}
body{
    background-color:var(--blackbg);
    margin:0
}
body *{
    color:#fff;
    font-family:Arial,sans-serif;
    margin:0
}
.citation,.hero .big,.hero-dev02 *,.l-bold,.l-bold *,.sv *,h1,h1 *,h2,h2 *{
    font-family:l-bold
}
.certifie .col>div,.hero-yellow .container>div,h2{
    display:flex;
    flex-direction:column
}
.certifie .col *,p{
    font-size:20px;
    line-height:28px
}
sup{
    color:var(--yellow);
    display:contents;
    font-size:12px
}
@font-face{
    font-family:l-bold;
    src:url("./assets/fonts/LEMONMILK-Bold.woff") format("woff");
    font-display:swap
}
.f-black,.f-black *{
    color:var(--blackbg)
}
.f-20{
    font-size:20px
}
.f-30{
    font-size:30px
}
.f-45{
    font-size:45px
}
.f-50,.f-50 *{
    font-size:50px
}
.f-40{
    font-size:40px
}
.f-60,.hero-dev02 .big.right .f-60{
    font-size:60px
}
.f-70{
    font-size:70px
}
.f-80{
    font-size:80px
}
.f-94{
    font-size:94px
}
.f-130{
    font-size:130px
}
.f-150{
    font-size:150px
}
.f-200{
    font-size:200px;
    line-height:180px
}
.yellow{
    color:var(--yellow);
    font-weight:900
}
.btn,.hero-design02 span,.hero-dev02 .big.left h3{
    color:#333
}
.flex-row{
    display:flex;
    flex-direction:row
}
.citation{
    display:flex;
    font-size:20px;
    margin-bottom:0;
    margin-top:30px;
    width:75%
}
.btn,.hamburger,.hamburger-box{
    display:inline-block
}
.citation::before{
    content:url('./assets/img/citation.svg');
    display:block;
    margin-right:15px
}
.sources{
    font-family:Arial;
    font-size:14px;
    margin:0
}
a{
    --ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1)
}
a.link::after,a.link::before{
    background:var(--yellow);
    bottom:-.1rem;
    content:"";
    display:block;
    height:2px;
    left:0;
    position:absolute;
    transition:1.1s var(--ease-out-expo);
    width:100%;
    z-index:25
}
a.link::before{
    transform:scaleX(0);
    transform-origin:left
}
a.link::after{
    transform-origin:right;
    transition-delay:0.25s
}
a.link:hover::before{
    transform:scaleX(1);
    transition-delay:0.25s
}
a.link:hover::after{
    transform:scaleX(0);
    transition-delay:0s
}
#design,#designer,#dev,#developpeur,#main{
    scroll-margin-top:96px
}
.btn{
    background-color:#fff;
    border-radius:30px;
    font-family:l-bold;
    font-size:18px;
    margin-top:60px;
    padding:20px 72px;
    -moz-transition:.35s;
    -o-transition:.35s;
    -webkit-transition:.35s;
    transition:.35s
}
.btn:focus,.btn:hover{
    animation:1s ease-out infinite borderPulse,10s ease-in infinite colorShift,.2s hoverShine;
    color:#fff!important;
    transition:.35s
}
.btn:hover strong{
    color:var(--blackbg)!important;
    transition:.35s
}
@keyframes colorShift{
    0%,100%{
        background:#f8b133
    }
    33%{
        background:#fb3e3e
    }
    66%{
        background:#c52467
    }
}
@keyframes borderPulse{
    0%{
        box-shadow:inset 0 0 0 5px rgba(255,255,255,.4),0 0 0 0 #fff
    }
    100%{
        box-shadow:inset 0 0 0 3px rgba(117,117,255,.2),0 0 0 10px rgba(255,255,255,0)
    }
}
@keyframes hoverShine{
    0%{
        background-image:linear-gradient(135deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%)
    }
    50%{
        background-image:linear-gradient(135deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%)
    }
    100%{
        background-image:linear-gradient(135deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.4) 100%)
    }
}
header{
    background-color:#252525;
    padding-left:5%;
    padding-right:5%;
    position:sticky;
    top:0;
    z-index:100
}
header .container{
    align-items:center;
    display:flex;
    justify-content:space-between
}
header .container a img{
    height:auto;
    width:46px
}
header .container>a{
    background-color:#fff;
    border-radius:50px;
    display:flex;
    padding:25px;
    position:relative;
    top:25px;
    z-index:100
}
.menu-items .content{
    height:100%;
    opacity:0;
    transition:.2s
}
.menu-items.active .content{
    display:flex;
    flex-direction:column;
    height:calc(100% - 96px);
    justify-content:space-around;
    opacity:1;
    padding-bottom:100px;
    padding-top:100px;
    transition:left 1.5s,opacity 1.5s
}
.menu-items.active{
    height:100vh;
    opacity:1;
    overflow:visible;
    padding:0 50px;
    right:0;
    transition:.6s;
    width:100vw
}
header .container #burger a img{
    width:auto
}
.hamburger{
    background-color:transparent;
    border:0;
    color:inherit;
    font:inherit;
    margin:0;
    overflow:visible;
    padding:15px;
    text-transform:none;
    transition-duration:.15s;
    transition-property:opacity,filter;
    transition-timing-function:linear
}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before,.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::after,.hamburger.is-active .hamburger-inner::before{
    background:linear-gradient(45deg,#fff -8.98%,rgba(255,255,255,.2) 137.18%)
}
.hamburger.is-active:hover,.hamburger:hover{
    opacity:.7
}
.hamburger-box{
    height:34px;
    width:40px
}
.hamburger-inner{
    display:block;
    margin-top:-2px;
    top:50%
}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{
    border-radius:4px;
    height:6px;
    position:absolute;
    transition-duration:.15s;
    transition-property:transform;
    transition-timing-function:ease;
    width:40px
}
.hamburger-inner::after,.hamburger-inner::before{
    content:"";
    display:block
}
.hamburger-inner::before{
    top:-10px
}
.hamburger-inner::after{
    bottom:-10px
}
.hamburger--spring .hamburger-inner{
    top:2px;
    transition:background-color 0s linear .13s
}
.hamburger--spring .hamburger-inner::before{
    top:14px;
    transition:top .1s cubic-bezier(.33333, .66667, .66667, 1) .2s,transform .13s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spring .hamburger-inner::after{
    top:28px;
    transition:top .2s cubic-bezier(.33333, .66667, .66667, 1) .2s,transform .13s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spring.is-active .hamburger-inner{
    background:0 0!important;
    transition-delay:0.22s
}
.hamburger--spring.is-active .hamburger-inner::before{
    top:0;
    transform:translate3d(0,10px,0) rotate(45deg);
    transition:top .1s cubic-bezier(.33333, 0, .66667, .33333) .15s,transform .13s cubic-bezier(.215, .61, .355, 1) .22s
}
.hamburger--spring.is-active .hamburger-inner::after{
    top:0;
    transform:translate3d(0,10px,0) rotate(-45deg);
    transition:top .2s cubic-bezier(.33333, 0, .66667, .33333),transform .13s cubic-bezier(.215, .61, .355, 1) .22s
}
main .intro{
    display:flex;
    padding-bottom:70px;
    padding-top:100px
}
main .intro .container{
    display:flex;
    justify-content:center
}
.intro .container>div{
    width:38%
}
.intro .container>div h1{
    display:flex;
    flex-direction:column;
    text-transform:uppercase
}
.hero-pink{
    background-color:var(--pink);
    position:relative;
    z-index:4
}
.hero-dev03 .col,.hero-pink .container{
    display:flex
}
.hero-pink .container>div:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center
}
.hero-pink .container>div:last-child{
    height:600px
}
.hero-pink .container>div:last-child img{
    position:relative;
    top:-200px
}
.hero-yellow::selection{
    background-color:var(--blackbg)
}
.hero-yellow{
    background:url('./assets/img/plane-yellow.svg') repeat-x,linear-gradient(180deg,#f1af26 68.23%,#cf7307 100%) repeat-x;
    background-position-y:50%;
    border-bottom:25px solid #3c96ba;
    display:flex;
    justify-content:center;
    padding-top:120px;
    position:relative;
    z-index:10
}
.hero-yellow .container>div:first-child{
    position:relative
}
.hero-yellow .container div:first-child img{
    left:54%;
    position:absolute;
    top:-2%
}
.hero-yellow .flex-row .f-150{
    margin-right:20px
}
.hero-yellow .flex-row .f-black.f-70{
    margin-top:-25px
}
.hero-yellow h2{
    margin:auto;
    width:50%
}
.hero-yellow p{
    bottom:13px;
    position:absolute;
    right:0;
    width:300px
}
.hero-yellow .container div:last-child{
    margin-top:65px
}
.hero-palier{
    background:linear-gradient(180deg,#0c6784 0,rgba(12,103,132,0) 60%);
    background-position:top;
    background-repeat:no-repeat;
    padding-bottom:100px;
    padding-top:250px;
    position:relative
}
.hero-palier>img{
    display:flex;
    left:50%;
    margin:auto;
    max-width:100%;
    position:absolute;
    top:0;
    transform:translateX(-50%)
}
.hero-palier .ice-left p,.hero-palier .ice-right p{
    font-size:18px;
    margin-bottom:35px
}
.hero-palier .ice-left strong,.hero-palier .ice-right strong{
    font-size:22px;
    font-weight:700
}
.hero-palier .container>div:first-child,.under-water{
    display:flex;
    justify-content:space-around
}
.hero-palier .container>div:last-child img{
    max-width:215px
}
.hero-palier>.container:first-child .ice-right{
    margin-top:40px;
    text-align:right
}
.hero-palier .alors{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:230px;
    max-width:540px
}
.hero-palier .alors h2{
    font-size:95px
}
.hero-palier .alors a{
    font-weight:700
}
.hero-palier p{
    margin-top:60px
}
.des-dev>.container{
    border:8px solid #f8f9fa;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    margin-bottom:25px;
    max-width:355px;
    min-height:565px
}
.des-dev h2{
    display:flex;
    font-size:35px;
    margin-top:35px
}
.des-dev .container span{
    color:var(--blackbg);
    display:contents
}
.des-dev .arrow-down{
    margin:auto auto 35px
}
#design{
    background-color:#0cbb67
}
#design.des-dev .container{
    background:url('./assets/img/bg-design.png') bottom center no-repeat,#0cbb67
}
.hero>div>h3,.hero>div>p{
    max-width:450px;
    padding-bottom:55px;
    padding-top:55px
}
.hero>div.left{
    display:flex;
    justify-content:end;
    padding-left:15px;
    padding-right:100px
}
.certifie,.sv .container{
    align-items:center;
    display:flex
}
.hero>div.right{
    padding-left:100px
}
.hero-design01,.hero-dev01{
    z-index:2
}
.hero-design01,.hero-design02,.hero-dev01,.hero-dev02{
    display:flex;
    position:relative
}
.hero-design01>img,.hero-design02>img,.hero-dev01>img{
    bottom:0;
    left:50%;
    position:absolute;
    transform:translateX(-50%)
}
.cadre-joconde{
    bottom:-27px!important
}
.hero-design01>div,.hero-design02>div,.hero-dev01>div,.hero-dev02>div{
    width:50%
}
.hero>.text{
    background-color:#0a5238
}
.hero-design01>.big.right{
    background-color:#149c5b
}
.hero-design01 .text{
    width:#0A5238
}
.hero-design01 h3,.hero-dev01 h3{
    font-size:23px
}
.hero-design02,.hero-dev02{
    z-index:1
}
#dev{
    background-color:#097be4
}
#dev.des-dev>.container{
    background:url('./assets/img/bd-dev.png') bottom center no-repeat,#097be4
}
.hero-dev01>.big.right>span,.hero-dev01>.big.right>sup{
    position:relative;
    z-index:99
}
.sumo{
    bottom:-7px!important
}
.hero-dev01 .text{
    background-color:#064682;
    width:#0A5238
}
.hero-dev01>.big.right{
    background-color:#005cb1
}
.hero-dev02 .left{
    background-color:#0577e0
}
.hero-dev02 .right{
    background-color:#0055a4
}
.hero-dev02 .big.right p{
    color:#0577e0;
    padding-top:0
}
.hero-dev02 .big.right h3{
    color:var(--yellow);
    padding-bottom:0
}
.hero-dev02 .big.left h3,.hero-dev02 .big.left h3 span{
    font-size:58px
}
.hero-dev02 span{
    font-size:35px
}
.certifie>p,.menu-items a{
    font-family:l-bold;
    font-size:30px
}
.hero-dev03{
    background-color:#064682;
    padding-bottom:90px
}
#modal-container.three .modal-background .modal,.certifie{
    background:linear-gradient(180deg,#f8b133 0,#c52467 100%)
}
.hero-dev03 .citation{
    font-size:60px;
    margin:0 auto auto;
    max-width:930px;
    padding-bottom:70px;
    padding-top:80px;
    width:auto
}
.bandeau-blanc,.sv .f-20{
    margin-top:8px
}
.hero-dev03 .citation::before{
    content:url(./assets/img/big-citation.svg);
    font-size:60px;
    margin-right:60px;
    width:auto
}
.hero-dev03 .yel{
    color:var(--yellow)
}
.hero-dev03 .col>div{
    margin-left:20px;
    margin-right:20px;
    width:50%
}
.hero-dev03 .btn strong{
    color:var(--yellow);
    font-family:l-bold;
    font-size:18px
}
.sv{
    padding:60px 0
}
.sv .container{
    justify-content:center
}
.sv .logo{
    margin-left:130px
}
.certifie .col,.certifie .col>div a img{
    margin-top:15px
}
.certifie{
    flex-direction:column;
    padding-bottom:60px;
    padding-top:60px;
    width:100%
}
.certifie .col,footer{
    align-items:center;
    display:flex
}
.certifie img:hover{
    filter:contrast(.8)
}
.certifie>p{
    margin-bottom:10px
}
.certifie>p:nth-child(2){
    color:#333!important
}
.certifie .col{
    justify-content:center
}
.certifie .col img{
    margin-right:15px
}
footer{
    flex-direction:column;
    position:relative
}
footer img{
    bottom:-40px;
    margin:0 70px;
    position:relative;
    z-index:3
}
footer>a{
    margin-bottom:25px
}
footer>div{
    height:60px;
    position:relative
}
footer a:hover,footer div.button:hover{
    color:var(--yellow);
    transition:.2s ease-in-out
}
.bandeau-blanc{
    background-color:#fff;
    height:28px;
    width:100%
}
#modal-container{
    bottom:0;
    height:100vh;
    left:0;
    position:absolute;
    transform:scale(0);
    width:100vw;
    z-index:50
}
#modal-container.three{
    background-color:rgba(0,0,0,.8);
    overflow:hidden;
    transform:scale(1);
    z-index:200
}
#fishs,#fishs .f-02,#fishs .f-03,#fishs .f-04,#fishs .f-07,.avion,.baleine{
    transform:translatey(0)
}
#modal-background.three .modal{
    align-items:center;
    display:flex;
    height:100vh;
    justify-content:center;
    margin:auto;
    width:100vw
}
#modal-container.three .modal-background .modal{
    border-radius:15px;
    bottom:10%;
    left:10%;
    margin-top:70px;
    overflow-y:scroll;
    padding:150px;
    position:fixed;
    right:10%;
    top:10%;
    animation:.5s cubic-bezier(.165,.84,.44,1) forwards moveUp
}
#modal-container.three+.content{
    animation:.5s cubic-bezier(.165,.84,.44,1) forwards slideUpLarge;
    z-index:1
}
#modal-container.three.out .modal-background .modal{
    animation:.5s cubic-bezier(.165,.84,.44,1) forwards moveDown
}
#modal-container.three.out+.content{
    animation:.5s cubic-bezier(.165,.84,.44,1) forwards slideDownLarge
}
#modal-container h2{
    margin-bottom:50px
}
footer #modal-container.three{
    line-height:25px;
    position:fixed
}
#mentions{
    display:inline-grid;
    margin-top:25px;
    position:relative
}
.close{
    height:25px;
    position:absolute;
    right:4%;
    top:4%;
    width:25px;
    z-index:2500
}
.menu-items,body.menu-open header{
    position:fixed;
    width:100%
}
@keyframes slideUpLarge{
    0%{
        transform:translateY(0)
    }
    100%{
        transform:translateY(-100%)
    }
}
@keyframes slideDownLarge{
    0%{
        transform:translateY(-100%)
    }
    100%{
        transform:translateY(0)
    }
}
@keyframes moveUp{
    0%{
        transform:translateY(150px)
    }
    100%{
        transform:translateY(0)
    }
}
@keyframes moveDown{
    0%{
        transform:translateY(0)
    }
    100%{
        transform:translateY(150px)
    }
}
@keyframes float{
    0%,100%{
        transform:translatey(0)
    }
    50%{
        transform:translatey(-20px)
    }
}
@keyframes float01{
    0%,100%{
        transform:translatey(0)
    }
    50%{
        transform:translatey(-60px)
    }
}
@keyframes float02{
    0%,100%{
        transform:translatey(0)
    }
    50%{
        transform:translatey(-10px)
    }
}
.avion{
    -webkit-animation:6s ease-in-out infinite float02;
    animation:6s ease-in-out infinite float02
}
.baleine{
    -webkit-animation:6s ease-in-out infinite float01;
    animation:6s ease-in-out infinite float01;
    margin-left:10%;
    margin-top:100px
}
#fishs{
    -webkit-animation:4s ease-in-out infinite float;
    animation:4s ease-in-out infinite float;
    margin-right:20%;
    max-width:100px
}
#fishs .f-01,#fishs .f-05{
    -webkit-animation:3s ease-in-out infinite float;
    animation:3s ease-in-out infinite float;
    transform:translatey(0)
}
#fishs .f-02{
    -webkit-animation:4s ease-in-out infinite float;
    animation:4s ease-in-out infinite float
}
#fishs .f-03,#fishs .f-07{
    -webkit-animation:5s ease-in-out infinite float;
    animation:5s ease-in-out infinite float
}
#fishs .f-04{
    -webkit-animation:2s ease-in-out infinite float;
    animation:2s ease-in-out infinite float
}
svg.waves{
    margin-bottom:-5px
}
.container-waves{
    background-color:#1f1f1f
}
.parallax>use{
    animation:25s cubic-bezier(.55,.5,.45,.5) infinite move-forever
}
.parallax>use:first-child{
    animation-delay:-2s;
    animation-duration:7s
}
.parallax>use:nth-child(2){
    animation-delay:-3s;
    animation-duration:10s
}
.parallax>use:nth-child(3){
    animation-delay:-4s;
    animation-duration:13s
}
.parallax>use:nth-child(4){
    animation-delay:-5s;
    animation-duration:20s
}
.hero-dev03 .container{
    padding-top:150px
}
.hero-dev03 .content{
    height:150px;
    left:50%;
    position:relative
}
.hero-dev03 .content .citation{
    color:#fff;
    line-height:65px;
    position:absolute;
    transform:translate(-50%,-50%)
}
.hero-dev03 .content .citation:first-child{
    color:#fff
}
.hero-dev03 .content .citation:nth-child(2){
    animation:4s ease-in-out infinite economie;
    color:var(--yellow)
}
@keyframes economie{
    0%,100%{
        clip-path:polygon(10% 45%,16% 44%,33% 50%,54% 60%,70% 61%,84% 59%,100% 52%,100% 100%,10% 100%)
    }
    50%{
        clip-path:polygon(10% 60%,25% 65%,34% 66%,51% 62%,67% 50%,84% 45%,100% 46%,100% 100%,10% 100%)
    }
}
@keyframes move-forever{
    0%{
        transform:translate3d(-90px,0,0)
    }
    100%{
        transform:translate3d(85px,0,0)
    }
}
body.menu-open{
    overflow-y:hidden!important;
    padding-top:96px
}
.menu-bg{
    background:#266080;
    pointer-events:none;
    right:50px;
    top:50px;
    transform:translate3d(50%,-50%,0);
    transform-origin:center center;
    transition:.3s
}
.menu-burger{
    color:#fff;
    padding-top:11px;
    transform-origin:center;
    transition:.4s;
    -webkit-user-select:none
}
.menu-items{
    color:#fff;
    font-size:40px;
    margin-top:96px;
    opacity:0;
    padding-top:82px;
    right:-8000px;
    top:0;
    transition:.6s
}
.menu-items a{
    color:#fff;
    display:block;
    letter-spacing:0;
    margin-bottom:3%;
    margin-top:0;
    opacity:1;
    transition:1s
}
.menu-items.fs a{
    margin-top:75px;
    opacity:1
}
.hero-yellow a.link::after,.hero-yellow a.link::before{
    background:var(--pink)
}
@media only screen and (min-width:1400px){
    .container{
        max-width:1320px
    }
}
@media only screen and (max-width:1200px){
    .container{
        max-width:992px
    }
    .intro .container>div{
        width:50%
    }
    .hero-pink .container>div:last-child img{
        left:-90px;
        max-width:900px;
        top:0
    }
    .hero-yellow p{
        margin:50px auto auto;
        position:inherit
    }
}
@media only screen and (max-width:992px){
    .container{
        max-width:960px
    }
    .hero{
        flex-direction:column
    }
    main .intro .container{
        align-items:center;
        flex-direction:column
    }
    .intro .container>div{
        width:80%
    }
    .hero>div.left,.hero>div.right{
        width:100%;
        padding:15px
    }
    .intro .container>div h1{
        margin-bottom:50px;
        margin-left:50%;
        transform:translateX(-50%)
    }
    main .intro{
        padding-top:70px
    }
    .hero-dev02 .big.right p,.hero-pink .container>div:nth-child(2){
        display:none
    }
    .hero-pink .container{
        justify-content:center;
        padding-bottom:100px;
        padding-top:100px
    }
    .hero>div.left{
        justify-content:center
    }
    .hero>div>h3,.hero>div>p{
        max-width:inherit
    }
    .hero-design01>img,.hero-design02>img,.hero-dev01>img,.hero-dev02>img{
        left:80%
    }
    .hero-dev02 .big.right h3{
        margin:auto auto 45px;
        width:fit-content
    }
    .ice-bas{
        position:relative;
        z-index:12
    }
    .hero-dev03 .content .citation{
        margin:0 25px
    }
    #modal-container.three .modal-background .modal{
        padding:100px 15px 15px 25px
    }
}
@media only screen and (max-width:768px){
    .container{
        max-width:720px;
        padding-left:15px;
        padding-right:15px
    }
    .intro .container>div h1{
        margin-left:inherit;
        transform:inherit
    }
    .hero-yellow img{
        max-width:100%
    }
    .hero-yellow h2{
        align-items:center;
        display:flex;
        justify-content:center;
        width:100%
    }
    .hero-yellow .flex-row .f-black.f-70{
        width:min-content
    }
    .hero-palier>img{
        max-width:70%
    }
    .menu-items a{
        margin-bottom:5%;
        text-align:left
    }
}
@media only screen and (max-width:576px){
    .hero,.hero-dev03 .col,.sv .container{
        flex-direction:column
    }
    footer img{
        bottom:-10px;
        margin:0 50px
    }
    footer>div{
        height:72px
    }
    .hero-dev03 .content .citation{
        margin:inherit
    }
    .menu-items.active .content{
        padding-bottom:25%;
        padding-top:20%;
        overflow: scroll;
    }
    .intro .container>div{
        width:auto
    }
    img{
        max-width:100%
    }
    .f-200{
        font-size:140px
    }
    .hero-yellow .container div:first-child img{
        left:60%;
        position:absolute;
        top:6%;
        width:130px
    }
    .f-70{
        font-size:50px
    }
    .baleine{
        margin-top:15px
    }
    #fishs{
        margin-left:5%;
        margin-right:15%
    }
    .container.alors svg{
        margin-bottom:-35px;
        max-width:100%
    }
    .hero-palier p{
        margin-top:40px
    }
    body .hero>div{
        padding-left:15px!important;
        padding-right:15px!important;
        width:100%
    }
    .hero.hero-design01>div>h3{
        padding-bottom:200px
    }
    .hero.hero-dev01>div>h3{
        padding-bottom:190px
    }
    .hero-design01>img,.hero-design02>img,.hero-dev01>img,.hero-dev02>img{
        left:70%;
        overflow:hidden
    }
    .hero-dev03 .citation::before{
        content:url(./assets/img/citation.svg);
        font-size:35px;
        margin-right:15px;
        width:auto
    }
    body .hero-dev03 .citation{
        font-size:35px;
        line-height:45px!important
    }
    .hero-dev03 .col{
        width:auto
    }
    .hero-dev03 .col>div{
        margin-left:0;
        margin-right:0;
        width:100%
    }
    .sv .logo{
        margin-left:0;
        margin-top:35px
    }
    .btn{
        font-size:16px;
        padding:20px 35px;
        display:block;
        text-align:center
    }
    footer div{
        display:flex;
        flex-direction:column
    }
    footer>div>a:first-child{
        order:1;
        padding-top:25px;
        text-align:center
    }
    footer>div>a:last-child{
        order:2;
        text-align:center
    }
    footer>div>img{
        order:3;
        text-align:center
    }
    .bandeau-blanc,.hero-palier .alors{
        margin-top:50px
    }
    .hero-palier{
        padding-top:350px
    }
    .hero-palier .ice-left strong,.hero-palier .ice-right strong{
        font-size:19px
    }
    .hero-palier .ice-left p,.hero-palier .ice-right p{
        font-size:16px
    }
    .hero-palier .alors h2{
        font-size:60px;
        text-align:center
    }
    .hero-palier .alors .f-70{
        font-size:44px;
        text-align:center
    }
    .hero-design02 .f-60,.hero-dev02 .big.left h3,.hero-dev02 .big.left h3 span{
        font-size:40px
    }
    .hero-dev02 span{
        font-size:30px
    }
}
@media only screen and (max-width:360px){
    .certifie>p{
        font-size: 25px;
    }
    .btn {
        margin-right: 10px;
        margin-left: 10px;
    }
}
@media only screen and (max-width:320px){
    .hero-palier .alors .f-70{
        font-size:40px
    }
    .hero-palier .alors h2{
        font-size:55px
    }
    .f-94{
        font-size:85px
    }
}