/*----- Section hero -----*/

.sectionHeroAPropos {
    background-color: var(--bs-info);
}
.sectionHeroAPropos img {
    width: 50%;
    border-radius: 80% 80% 0 0;
}

/*----- Bande colorée -----*/

.bande-coloree {
    width: 100%;
    height: 10px;
    background-image: url(../assets/images/bande_colore.jpg);
    background-position: 100% 40%;
    background-size: cover;
}

/*----- Section informations -----*/

.sectionInformations {
    background-color: var(--bs-light);
}

.card {
    height: 100%; 
}

.surligné {
    background-color: var(--bs-info);
    margin-bottom: 10px;    
}

.icon-adobe img {
    width: 30px;
    margin: 10px 0;
}

.icon-code img {
    margin: 10px 0;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
}

/*----- Média query -----*/

@media screen and (max-width: 576px) { 
    .sectionHeroAPropos img {
        width: 80%;
        border-radius: 80% 80% 0 0;
    }
}

@media screen and (max-width: 365px) { 
    .sectionHeroAPropos img {
        width: 100%;
        border-radius: 80% 80% 0 0;
    }
}

@media screen and (min-width: 576px) { 
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    } 
}

@media screen and (min-width: 992px) { 
    .grid {
        display: grid;
        grid-template-columns: 1fr;
    } 
    .card h3 {
        font-size: 23px;
    }
}

@media screen and (min-width: 1200px) { 
    .card h3 {
        font-size: 30px;
    }
}