stylesIndex.css

h2{
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 0em;
    text-align: center;

}

.firstDiv{
    display:flex;
    flex-direction:column;
}

.firstDiv h2{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
}

.firstDivImgWrapper{
    width: 100%;
    height:250px;
}

.firstDiv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.secondDiv{
    display:flex;
    flex-direction: column;
    background-color: black;
}

.secondDiv h3{
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: 0em;
}

.secondDiv_LinkSoinVelo{
    background-color:var(--primary);
    display: flex;
    flex-direction: row;
    margin-top: 1.5em;
    margin-right: 1em;
    margin-left: 1em;
    justify-content: space-between;
}

.secondDiv_LinkSoinVelo_left{
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    padding:2em;
}

.secondDiv_image{
    height:280px;
    width: clamp(200px, 66%, 450px);
}

.secondDiv_image img{
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
}

.secondDiv_LinkSoinVelo h3{
    margin:0;
}

.secondDiv_LinkSoinVelo p{
    margin-top: 1.3em;
    margin-bottom: 1.8em;
}

.secondDiv_LinkSoinVelo a{
    text-decoration: none;
    color:black;
    background-color: white;
    padding: 1em 2rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.secondDiv_LinkSoinVelo a:hover{
    background-color:var(--grey-light);
}

.secondDiv_LinkAtelier{
    background-color: white;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 1.5em;
    margin-right: 1em;
    margin-left: 1em;
    justify-content: flex-end;
}

.secondDiv_LinkAtelier_left{
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    padding:2em;
}

.secondDiv_LinkAtelier h3{
    margin:0;
}

.secondDiv_LinkAtelier p{
    margin-top: 1.3em;
    margin-bottom: 1.8em;
}

.secondDiv_LinkAtelier a{
    text-decoration: none;
    color:white;
    background-color:var(--primary);
    padding: 1em 2rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.secondDiv_LinkAtelier a:hover{
    background-color:var(--primary-dark);
}

.secondDiv_List{
    color: white;
    background-image: url("./img/velo-bg.jpg");
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding:1em;
}

.secondDiv_List ul{
    list-style: none;
    padding:0;
}

.vector{
    width: 4em;
    height: 4em;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}

.grey-separator{
    width: 4.4em;
    height: 2em;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("./img/separateur.svg");
}

.vector--gps{
    background-image: url("./img/map-pin.svg");
}

.vector--user{
    background-image: url("./img/user-check.svg");
}

.vector--watch{
    background-image: url("./img/watch.svg");
}

.vector--tool{
    background-image: url("./img/tool.svg");
}

.secondDiv_List li h4{
    margin-top: .4em;
    margin-bottom: .4em;
    font-weight:500;
    font-family: 'Roboto',sans-serif;
    font-size: 1.3em;
}

.secondDiv_List li{
    margin: 10px 0;
}

.secondDiv_List li p{
    font-weight:400;
    font-family: 'Roboto',sans-serif;
    margin-bottom:3em;
}

.secondDiv_List a{
    text-decoration: none;
    color:white;
    background-color:var(--primary);
    padding:1.4rem 3rem;
    border-radius: 8px;
    text-align: center;
}

.secondDiv_List a:hover{
    background-color:var(--primary-dark);
}

.secondDiv_image{
    display: none;
}

.thirdDiv {
    margin-top:3rem;
    margin-bottom: 3rem;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    padding-left: 0.6em;
    padding-right: 0.6em;
}

.thirdDiv img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.thirdDivImgWrapper{
    width: 100%;
    height:250px;
}

/* tablette */

@media (min-width:768px)
{

.firstDiv{
    flex-direction:row;
    align-items:center;
    height:26em;
}

.firstDiv h2{
    margin: 0em;
    padding-left: 1em;
    padding-right: 2em;
    text-align: unset;
    width: calc(50vw - 3em);
    font-size:2.6em;
}

.firstDivImgWrapper{
    width: 50vw;
    height:100%;
}

.secondDiv_LinkSoinVelo{
    margin-right: 1.5em;
    margin-left: 1.5em;
}

.secondDiv_LinkAtelier{
    margin-right: 1.5em;
    margin-left: 1.5em;
}

.secondDiv_LinkAtelier_left{
    align-items: baseline;
}

.secondDiv_LinkSoinVelo_left{
    align-items: baseline;
}

.secondDiv_LinkSoinVelo a{
    text-align: left;
    flex-grow:0;
}

.secondDiv_image{
    display: unset;
}

.secondDiv_List{
    color: white;
    background-image: url("./img/velo-bg.jpg");
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:1.5em;
}

.secondDiv_List ul{
    display: flex;
    flex-wrap: wrap;
}

.secondDiv_List li{
    width: 50%;
}

.secondDiv_List a{
    padding:1.4rem 7rem;
}

.thirdDiv{
    flex-direction: row;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    justify-content: space-between;
}

.thirdDivImgWrapper{
    width: calc(33vw - 1.5em);
    height: 400px;
}

}

/* ordinateur */

@media (min-width:1280px)
{

.firstDiv h2{
    margin: auto;
    text-align: unset;
    width: calc(50vw - 8em);
    font-size:2.6em;
}

.secondDiv_LinkSoinVelo{
    margin-right: 5em;
    margin-left: 5em;
}

.secondDiv_LinkAtelier{
    margin-right: 5em;
    margin-left: 5em;
}

.secondDiv_List ul{
    gap: 2em;
    justify-content: center;
}

.secondDiv_List li{
    width: calc(25% - 4em);
}

.thirdDiv{
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    padding-left: 6em;
    padding-right: 6em;
}

.thirdDivImgWrapper{
    width: calc(33vw - 4.5em);
    height: 500px;
}

}