*{transition: all .2s ease;}

body{background: url('/template/charte/imgs/a-propos/bg.png') no-repeat;background-size: cover;background-position: top center;}
#article h1{text-align: left;margin-bottom: 20px;font-family: 'Dancing Script';font-weight: bold;color: #AD001A;font-size: 45px;}
#article .article_content > h2{text-align: left;margin-bottom: 20px;font-family: 'Dancing Script';font-weight: bold;color: #1D2A48;font-size: 26px;}
#article .article_content > p{font-family: 'Poppins', sans-serif; color: rgba(43,60,98,0.74);  font-size: 17px;}
.page-article{margin-top: 0!important;}

.list .article{max-width: 525px;min-width: 525px;}
.list .article > *{position: relative;z-index: 3!important;}
.list .article > div:last-of-type{z-index: 2!important;max-width: calc(100% - 52px)!important;width: 100%!important;padding-left: 50%;text-overflow: clip;overflow: hidden;position: absolute!important;bottom: 10px;}
.list .article span{font-family: 'Dancing Script'!important; font-weight: bold!important; color: #E8E8E8!important; font-size: 100px!important; line-height: 100px!important;margin-bottom: 0!important;white-space: nowrap!important;width: 100%;transition: transform 2s ease .2s, color .2s ease;}

.list .article:hover h3{color: white;}
.list .article::before{content: ""; position: absolute; width: 100%; height: 0; background-color: #263562; opacity: 0;top: 0; left: 0;transition: all .3s ease;z-index: 2;}
.list .article:hover::before{opacity: 1; height: 100%;}
.list .article:hover h3{color: white!important;}
.list .article:hover span{color: #131B36!important;}
.list .article:hover a{position: absolute; width: 100%; height: 100%; left:0; top:0; text-decoration:none;}

@media (max-width: 1630px){
    .content{padding: 0 15px;}
}

@media (max-width: 560px){
    .list .article{padding: 15px!important;min-height: 0!important;min-width: 0!important;}
    .list .article img{width: 100%!important;height: auto!important;}
    .list .article h3{font-size: 32px!important;line-height: 32px!important;}
    .list .article span{font-size: 65px!important;line-height: 65px!important;display: none!important;}
}

@media (max-width: 480px){
    #article{margin-top: 30px;}
    .article_content > *{text-align: center!important;}
    .article_content > h1{font-size: 32px!important;}
    .article_content > h2{font-size: 24px!important;}
    .article_content > p{font-size: 14px!important;}
}