*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
}

.hero{
    min-height:100vh;

    background:
        linear-gradient(
            rgba(0,0,0,.60),
            rgba(0,0,0,.60)
        ),
        url("img/accueil-app.jpg");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.hero-overlay{

    max-width:800px;

    padding:40px;

    color:white;

    animation:apparition 1s ease;
}

.hero h1{

    font-size:3rem;

    margin-bottom:20px;
}

.sous-titre{

    font-size:1.2rem;

    line-height:1.8;

    margin-bottom:35px;
}

.btn{

    display:inline-block;

    padding:15px 35px;

    background:white;

    color:#003366;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-2px);
}

.mention{

    margin-top:30px;

    font-size:.9rem;

    opacity:.8;
}

@keyframes apparition{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}