/* Header -------------------- */
header {
    background-image: url("/ressources/photo/circle--background--solution.png");
    height: auto;
    padding: 2.5rem 5rem 5rem 5rem;
    background-size: cover;
    background-position: center;    
    position: relative; 
}

.header--content {margin: 10rem auto 0 auto; width: 68vw; max-width: 1200px;}

.header--content h1 {
    text-align: center;
    font-size: 4rem;
    font-weight: 400;
    line-height: 120%;
}

/*---Main------*/
main {display: flex; flex-direction: column; align-items: center;}
main img {border-radius: 5rem; width: 80vw; height: 68vh; object-fit: cover; max-width: 1480px;}
.article--content {width: 68vw; max-width: 1200px; margin: 5rem auto 8rem auto;}

main h3 {color: #121624; font-size: 40px; font-weight: 700; line-height: normal; margin-bottom: 12px;}
main p {color: #121624; font-size: 16px; font-weight: 400; line-height: 160%; margin-top: 1rem;}
main a {color: #3374FF;}
main a:hover {opacity: .4;}
main ul {list-style: inside; display: flex; flex-direction: column; gap: 8px; margin: 1rem 0 1rem 2rem;}
main li {color: #121624; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%;}
main h4 {color: #121624; font-size: 24px;  font-weight: 600; line-height: normal; margin-top: 4rem;}
main b {font-weight: 700;}
main .astuce {font-size: 14px; padding: 12px; border-radius: 8px;border: 1px solid #E0E1E9;background-color: #eceefe55;}

/* Responsive ----------------------------------------*/
/* For-big-desktop-up */
@media (min-width: 1801px) {
    .first_article--text p {
        display: -webkit-box;
        line-clamp: 6;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;     
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* For-desktop-up */
@media (max-width: 1800px) {
}
/* For-tablet-landscape-up */
@media (max-width: 1200px) {
}
/* For-tablet-portrait-up */
@media (max-width: 900px) {
    .article--content {width: 72vw;}
    .header--content {width: 72vw;}
    .header--content h1 {font-size: 3.2rem;}

}
/* For-phone-only  */
@media (max-width: 600px) {
    .article--content {width: 80vw;}
    .header--content {width: 80vw;}
    .header--content h1 {font-size: 2.8rem;}
}