.section-dernier-article {background-color: var(--couleur-principale); background-image: url(/wp-content/uploads/2023/08/chevrons-bg-1.svg); background-repeat: no-repeat; background-size: 300px; background-position: right bottom; padding-bottom: 150px;}
.section-dernier-article>div {flex-direction: column; gap: 30px;}
.section-dernier-article p {color: var(--couleur-blanc);}
.blog-tag {padding: 7px 25px; display: inline-block; border-radius: 8px; color: var(--couleur-blanc); font-weight: 500; font-size: 12px; margin: 25px 0;}
.section-dernier-article h2 {color: var(--couleur-blanc);}
.section-dernier-article .p-white {margin-bottom: 40px;}
.section-dernier-article .date {display: inline-block; padding-left: 10px; color: var(--couleur-secondaire-light); font-size: 14px; font-weight: 300;}
.section-dernier-article img {object-fit: cover; width: 100%; height: 100%;}
.section-dernier-article .btn-full {margin-top: 40px;}


.filtre-thematique {background-color: var(--couleur-secondaire); padding: 25px 0; gap: 30px; flex-direction: column; margin-bottom: 40px;}
label[for="metier-filter"] {font-size: 13px; font-weight: 500; color: var(--couleur-blanc);}

#filtered-posts .module-size, .filtre-thematique.module-size {max-width: 996px;}

#filtered-posts .pagination {width: 100%; text-align: center;}
#filtered-posts .pagination .page-numbers {font-weight: 300; color: var(--couleur-secondaire-light); padding: 0 30px;}
#filtered-posts .pagination .page-numbers.current {font-weight: 600; color: var(--couleur-bg);}


#filtered-posts .recent-article:hover, #filtered-blog .recent-article:hover {transform: scale(1.02); box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
#filtered-posts .recent-article, #filtered-blog .recent-article{position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease;}
#filtered-posts .recent-article .article-tags {z-index: 1; position: absolute; top:20px; left: 16px; background-color: var(--couleur-secondaire); color: var(--couleur-blanc); font-size: 13px; border-radius: 8px;} 
#filtered-blog .recent-article .article-tags  {z-index: 1; position: absolute; top:20px; left: 16px; background: transparent; } 
#filtered-blog .recent-article .article-tags a{color:var(--couleur-blanc)}
#filtered-blog .recent-article .article-tags a span {display: inline-block; padding: 7px 12px; background-color: var(--couleur-secondaire); color: var(--couleur-blanc); font-size: 13px; border-radius: 8px;}
#filtered-posts .recent-article h3 {font-size: 25px; color: var(--couleur-principale); font-family: 'Roboto', sans-serif;}
#filtered-posts .recent-article .flex-container.article-more-info {justify-content: flex-start; gap: 50px;}
#filtered-posts .article-content, #filtered-blog .article-content {min-height: 200px; height: 100%;}
#filtered-posts .recent-article .flex-container {gap: 0;}


#filtered-blog .summary  {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
#filtered-blog .pagination {width: 100%; text-align: center; display: flex; justify-content: center; align-items: center;}
#filtered-blog .pagination img {height: 30px;}

.filtre-thematique label {color: var(--couleur-blanc); font-size: 14px;}
.filtre-thematique select {background-color: #0F4286; color: var(--couleur-blanc); border: 1px solid var(--couleur-blanc); border-radius: 3px; font-size: 18px; padding: 14px 40px 14px 20px; font-weight: 400;  font-family: 'roboto', sans-serif !important;    background-image: url(/wp-content/uploads/pictos/fleche-select.svg);  background-repeat: no-repeat; background-position: calc(100% - 20px) center;appearance: none;}
.filtre-thematique select:focus-visible {outline: 1px solid var(--couleur-principale);}

#filtered-blog .recent-article .thumbnail { height: 270px;}
.filtre-thematique + #filtered-blog>div .recent-article:nth-child(n+3) .thumbnail {height: 220px;}

.detail-article-tags {gap: 20px;}
.detail-article-tags span.article-tags {background-color: var(--couleur-secondaire); color: var(--couleur-blanc); padding: 8px 18px; border-radius: 8px; font-size: 14px;}
.detail-article-tags .date i {color: var(--couleur-form-input); padding-right: 5px;}

.detail-article h1 {color: var(--couleur-principale); margin-bottom: 35px; text-align: center; max-width: 500px;}
.has-text-align-center{text-align: center;}
.has-text-align-center img{display: inline;}


.listeblog {flex-wrap: wrap; gap: 40px;}
#filtered-blog .recent-article .article-tags a span{margin-right: 10px; margin-bottom: 5px;}



@media screen and (min-width: 768px) {

.listeblog.module-size {max-width: 996px; margin-bottom: 60px;}
.filtre-thematique, .bandeau-infos {flex-direction: row;}
.filtre-thematique {padding: 25px 90px; gap: 70px; margin-top: 70px; margin-bottom: 50px;}
.section-dernier-article .date {padding-left: 35px;}
.section-dernier-article>div {gap: 100px; flex-direction: row; }


#filtered-blog .recent-article {width: calc((100% - 60px) / 2);margin-bottom: 40px;}
.filtre-thematique + #filtered-blog>div .recent-article:nth-child(n+3) {width: calc((100% - 90px) / 3);}
.section-dernier-article {background-size: contain;}


}