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

body{
    min-height:100vh;
    background:black;
    color:white;
    display:flex;
    flex-direction:column;
}

header{
    text-align:center;
    padding:20px;
    color:greenyellow;
}

header h1{
    font-size:clamp(2rem,5vw,4rem);
}

.conteneur{
    flex:1;
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:20px;
}

.zone-red,
.zone-blue,
.zone-centre{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.dent{
    width:min(500px, 50vw);
    height:auto;
}

.pilule{
    width:min(180px, 20vw);
    height:auto;
    margin-bottom:15px;
}

.btn-red,
.btn-blue{
    text-decoration:none;
    color:white;
    font-size:clamp(1.5rem,4vw,3rem);
    font-weight:bold;
}

footer{
    text-align:center;
    padding:20px;
    color:greenyellow;
}

/* Smartphone */
@media (max-width:768px){

    .conteneur{
        flex-direction:column;
        gap:30px;
    }

    .dent{
        width:80%;
        max-width:350px;
        order:-1;
    }

    .pilule{
        width:120px;
    }
}