body {
  margin:0;
  font-family: "Gabarito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    font-size: 18px;
}

:root {
    --color-primary: #0d0559;
    --color-accent: #04e3ac;
    --color-accent-hover: #02ccae;

    --color-yellow: #c7fb03;
    --color-green: #04e3ac;
    --color-blue: #40e3fc;
}

.container{display:block; width:100%; position:relative;}
    .video{display:block; width:100%; background-color:#1b1741; position:fixed; bottom:-23%; left:0; z-index:0;}
    .wrapper{
        display:block;
        width:100%;
        text-align: center;
        background-color:#fff;
        position:fixed;
        top:0;
        left:0;
        z-index:1;
        box-sizing:border-box;
        padding:10px 20px 9vw;
        border-bottom-left-radius: 60% 10vw;
        border-bottom-right-radius: 60% 10vw;
        /* Pour un effet plus concave, on utilise clip-path */
        clip-path: ellipse(80% 80% at 50% 0%);
        -webkit-clip-path: ellipse(80% 80% at 50% 0%);
        overflow: hidden;
    }
        img{display:block; width:180px; margin:0 auto; padding:0;}
        h1{margin:-30px 0 0; color:var(--color-primary); font-size:3.4em; font-weight:700;}
        h2{margin:-6px 0 0; color:var(--color-accent); font-size:1.3em; font-weight:500;}
        ul{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; padding:0; margin:2rem 0 0;}
            li{display:inline-block; vertical-align:middle; list-style:none; font-size:1.1em; color:#1b1741;}
            li:after{content:""; display:inline-block; vertical-align:middle; width:6px; height:6px; margin:0 20px; background-color:#1b1741; border-radius:100%;}
            li:last-child:after{display:none;}
        .btn{display:inline-block; margin:1.6rem 0 1rem; color:#fff; background-color:var(--color-accent); text-decoration:none; font-size:1.3rem; padding:10px 26px; border-radius:6px; transition:all .2s ease-in-out;}
        .btn:hover{background-color:var(--color-accent-hover);}

@media (max-width: 1200px) {
    ul{flex-direction:column;}
    li{margin:10px 0;}
    li:after{display:none;}

    .video {
        display: none !important;
    }
    .wrapper{top:50%; transform:translateY(-50%); padding:10px 20px 16px; clip-path:none; -webkit-clip-path:none; overflow:unset; border:none;}
}