/*** GLOBAL */
:root{--card-br-width: 160px;--card-br-width-hover: 120px;--card-br-height: 40px}
.card{box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.1);border-radius:16px;overflow:hidden;transition:500ms}
.card:hover{cursor:pointer;box-shadow:none}
.card img,.card .bck, .card .border-round,.card .border-round:after{transition:500ms}
.card > a {width:100%}
.card h3{margin:19px 0; display: -webkit-box;overflow: hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.card-post,.card-dossier,.card-infographie{background:#FFF;width:370px; height: 100%; }
.card-post .image,.card-infographie .image{position:relative;overflow:hidden;border-radius:16px}
.card-post .image .border-round:before,.card-dossier .image .border-round:before,.card-infographie .image .border-round:before{bottom:var(--card-br-height);right:0}
.card-post .image .border-round:after,.card-dossier .image .border-round:after,.card-infographie .image .border-round:after{bottom:0;right:var(--card-br-width);will-change:right}
@media (max-width:1000px){
    .card-post,.card-dossier,.card-infographie{width:clamp(274px, calc(17.125rem + ((1vw - 3.7px) * 15.2381)), 370px)}
}


/*** POST */
.card-post{min-height: 390px; }
.card-post .image img,.card-dossier .image img,.card-infographie .image img{width:100%;height:220px;object-fit:cover;display:block}
.card-post .image img {height:190px;}
.card-post .image .border-round {width: var(--card-br-width); height: var(--card-br-height)}
@media (max-width:750px){
    .ma-posts-list .card-post .image { width: 140px}
    .ma-posts-list .card-post .image img {height:100%; width: 100%}
    .ma-posts-list .card-post .metas {justify-content: center;}
    .ma-posts-list .card-post>a .thematic1-list {margin-top: 0px}
}


.card:not(.card-quiz) .metas{padding:0 24px 24px;width:100%;box-sizing:border-box; display: flex;flex-direction: column;justify-content: end;}
.card:not(.card-quiz) .thematic1-list{margin-top:16px;row-gap:5px;flex-wrap:wrap}
.card:not(.card-quiz) .bottom{display:flex;justify-content:space-between;width:100%}
.card:not(.card-quiz) .bottom p{font:300 10px/18px var(--f2);letter-spacing:-0.2px}
@media (max-width:1000px){
    .card:not(.card-quiz) .bottom{display:none}
}

/*** DOSSIER */
.card-dossier{position:relative;}
.card-dossier {background:var(--c3);position:relative;overflow:visible;box-shadow:none;}
.card-dossier > a {display: flex;flex-direction: column;justify-content: space-between;height: 100%}
.card-dossier h3 {font: 300 28px/120% var(--f1);text-transform: uppercase;}
.card-dossier.black-card h3, .card-dossier.black-card .metas .bottom p, .card-dossier.black-card .type span{ color: #FFF}
.card-dossier .image{display:flex;justify-content:end;padding:15px;box-sizing:border-box; overflow:hidden}
#section-dossiers .swiper-slide {height: auto}
.card-dossier .image img{width:auto;height:180px; margin-left: auto}
.card-dossier .type{position:absolute;top:0;display:flex;justify-content:center;align-items:center;transform:translateY(-50%);right:16px;text-transform:uppercase;background:var(--c3);clip-path:path("M4.04168 11.254C6.26721 4.80111 12.3415 0.470703 19.1674 0.470703H77.0511C84.5064 0.470703 90.9736 5.61973 92.6442 12.8854L94.4968 20.943C96.8013 30.9656 89.1878 40.5283 78.9037 40.5283H16.3884C5.39762 40.5283 -2.32075 29.7018 1.26271 19.3116L4.04168 11.254Z");padding:9px 20px;box-sizing:border-box;min-width:95px;height:41px}
.card-dossier .type span{font:700 12px var(--f2);transform:translateY(-50%)}
.card.card-dossier:hover img{transform:scale(0.9)}
@media (max-width:1000px) {
    .ma-posts-list .card.card-dossier{height: 220px;} 
    .ma-posts-list .card.card-dossier h3 {font-size: 24px; margin: 0 0 16px}
    .card.card-dossier .metas {padding: 0 16px}
    .card-dossier .image {box-sizing: content-box;}
    .card-dossier .image img{height:110px}
}

/*** INFOGRAPHE */
.card.card-infographie{background:#F4F4F4;border-radius:212px 212px 24px 24px;box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.15);padding:24px;box-sizing:border-box}
.card.card-infographie .bck {position: absolute; inset:0; z-index: 1; border-radius: 100%;aspect-ratio: 1;mix-blend-mode: color;}
.card.card-infographie .image img{aspect-ratio:1;width:100%; height: auto; border-radius: 100%;filter: grayscale(100%);}

.swiper-slide:nth-child(4n+1) .card.card-infographie .bck,
article.card.card-infographie:nth-child(4n+1) .bck {background-color: #88CDE8; }
.swiper-slide:nth-child(4n+2) .card.card-infographie .bck,
article.card.card-infographie:nth-child(4n+2) .bck {background-color: var(--c3); }
.swiper-slide:nth-child(4n+3) .card.card-infographie .bck,
article.card.card-infographie:nth-child(4n+3) .bck {background-color: transparent;}
.swiper-slide:nth-child(4n+4) .card.card-infographie .bck,
article.card.card-infographie:nth-child(4n+4) .bck {background-color: var(--c8); }

.card.card-infographie .metas{padding:0;margin-top:24px;display:flex;flex-direction:column}
.card.card-infographie .metas .bottom{order:1}
.card.card-infographie .metas h3{order:2;margin:19px 0}
.card.card-infographie .metas .thematic1-list{order:3;margin-top:0px}
.card.card-infographie:hover img, .card.card-infographie:hover .bck {transform:rotate(20deg) scale(0.95)}
.card.card-infographie:active img, .card.card-infographie:active .bck{transform:rotate(20deg) scale(0.85)}
.card.card-infographie .image .border-round{will-change:width;width:var(--card-br-width);height:var(--card-br-height)}
@media (max-width:1000px) {
    .ma-posts-list .card.card-infographie{height: auto; padding: 16px; border-radius: 64px 16px 16px 64px;box-sizing: border-box; } 
    .ma-posts-list .card.card-infographie > a {align-items:center; column-gap: 12px}
    .card.card-infographie .metas {flex: 1; justify-content: center;}
    .card-infographie .image {width: auto}
    .ma-posts-list .card.card-infographie .image img{height:95px; width:95px}
    .ma-posts-list .card.card-infographie .metas {padding: 0;margin-top: 0;}
    .card-infographie .metas .thematic1-list{order:1; margin: 0}
    .card-infographie .metas h3{order:2; margin: 0;margin-top: 12px}
}

/*** POST */
.card.card-post:hover .image img{transform:scale(1.1)}
.card.card-post:hover .image .border-round{width:var(--card-br-width-hover)}
.card.card-post:hover .image .border-round:after{right:var(--card-br-width-hover)}

/*** VIDEO */
.card.card-video{width:322px;height:570px;position:relative;}
.card.card-video > a {display:flex;align-items:end;height: 100%}
.card.card-video .player,.card.card-video .image,.card.card-video .image .bck,.card.card-video .image .bck2{position:absolute}
.card.card-video .player{z-index:2;top:16px;right:16px;transition:transform 500ms}
.card.card-video .image{z-index:0;inset:0}
.card.card-video .image,.card.card-video .image>*{width:100%;height:100%}
.card.card-video .image .bck,.card.card-video .image .bck2{z-index:1;inset:0;opacity:1;transition:opacity 500ms}
.card.card-video .image .bck{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)}
.card.card-video .image .bck2{background:linear-gradient(180deg, rgba(0, 0, 0, 0) 66.31%, rgba(0, 0, 0, 0.9) 93.35%)}
.card.card-video .image img{object-fit:cover;object-position:center}
.card.card-video .metas{z-index:5;color:#FFF}
.card.card-video h3{color:#FFF}
.card.card-video:hover .image .bck{opacity:0}
.card.card-video:hover .player{transform:scale(1.1)}
.card.card-video:active .player{transform:scale(1)}
@media (max-width:1000px){
    .card.card-video{width:clamp(290px, calc(18.125rem + ((1vw - 3.7px) * 5.0794)), 322px);height:clamp(520px, calc(32.5rem + ((1vw - 3.7px) * 7.9365)), 570px)}
}

/*** QUIZ */
.card.card-quiz{box-shadow:unset;position:relative}
.card.card-quiz img{width:100%}
.card.card-quiz h3{position:absolute;width:100%;inset:0;display:flex;margin:auto;justify-content:center;align-items:center;font: 400 24px/120% var(--f1); text-transform:uppercase;max-width:140px;text-align:center}
.card.card-quiz.card-black h3 {color: #FFF};
@media (max-width:1000px){
    .card.card-video{width:clamp(290px, calc(18.125rem + ((1vw - 3.7px) * 5.0794)), 322px);height:clamp(520px, calc(32.5rem + ((1vw - 3.7px) * 7.9365)), 570px)}
    .ma-posts-list .card.card-quiz>a {height: auto}
    .ma-posts-list .card.card-quiz>a h3 {display: flex; margin: auto}
}