.pg_news{

	h1{
		em{
			font-weight: 300;
		}
	}
	.retour_articles{
		display: none;
		padding-top:1rem;
	}

	.liste_news_btn{
		display: flex;
		justify-content: end;
		align-items: center;
		padding: 0.25rem 0.5rem;
		margin-bottom: 1rem;
		background: linear-gradient(to left, #f5f5f5, transparent);
		border-radius: 0 10px 10px 0;

		button{
			background: none;
			border: 0 none;
			cursor: pointer;
			font-size: 1.2em;
			color: #999;
			&.active{
				color: var(--mc-primary);
			}
		}
	}
	.container_liste_news{
		display:grid;
		grid-template-columns:1fr 300px;
		gap:1rem;
	}
	.liste_news{
		display: grid;
		grid-template-columns:  repeat(auto-fit, minmax(calc(var(--w-container)/4), 1fr));
		gap:1rem 0;
		
		& > .item{
			flex-basis: 25%;
			max-width: 400px;	

			.wrapper{
				display: grid;
				grid-template-columns: 1fr;
				grid-template-areas: 
					'visuel'
					'titre'
					'date'
					'texte'
					'lien'
				;
				gap:0.5rem;
				justify-content: center;
				margin-inline: auto;
				padding: 1rem;

				& .visuel {
					grid-area: visuel;

					& img{
						width: min(350px, 100%);
						height: 150px;
						object-fit: cover;
						border-radius: 10px;
						
						&.img_default{							
							object-fit: scale-down;
							opacity: 0.3;
						}
					}
				}
				& .date{
					grid-area: date;
					font-size: 0.9rem;
					color:var(--mc-primary);
				}
				& .titre{
					grid-area: titre;
					--_clr-a:var(--c-text);
					font-size: 1.5rem;
					line-height: 1;
				}
				& .texte{
					grid-area: texte;
					line-height: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				& .lien{
					display: none;
				}
			}
		}

		&.liste_news__lineaire{
			grid-template-columns: 1fr;

			& > .item{

				.wrapper{
					grid-template-columns: 150px 1fr;
					grid-template-areas: 
						'visuel titre'
						'visuel date'
						'visuel texte'
						'visuel lien'
					;
					gap: 0 2rem;
				}
			}
		}
		
	}
	.sidebar_news{
		padding:1rem;
		background:#f8f8f8;
		border-radius:10px;

		.cadre_tags{
			ul{
				display: flex;
				gap:0.5rem;
				flex-wrap: wrap;
			}
		}
	}
	
	.fiche{
		--c-title-h2:var(--mc-primary);

		/* width:min(1200px, calc(100% - 1em)); */
		margin:0 auto;
		padding: 1rem;
		display: grid;
		grid-template-columns: 1fr minmax(300px, 0.55fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas: 
			'titre titre'
			'tags_top tags_top'
			'details details'
			'categorie categorie'
			'texte visuel'
			'byline byline'
			'tag tag'
		;
		gap:0 2rem;

		&.fiche_wo_visuel{
			grid-template-areas: 
			'titre titre'
			'tags_top tags_top'
			'details details'
			'categorie categorie'
			'texte texte'
			'byline byline'
			'tag tag'
		;
		}
		.visuel{
			grid-area: visuel;
			position: relative;

			figure{
				position: sticky;
				top: 2rem;

				img{
					width: 100%;
					border-radius: 10px;
				}
			}
			figcaption{
				padding: 0.5rem;
				text-align: center;
				font-style: italic;
				font-size: 0.9rem;
			}
		}			
		.date{
			color:#757373;
		}
		.titre{
			--c-title-h1:var(--mc-text);
			grid-area: titre;
			margin-top: 0;
			padding-top: 1rem;
			padding-bottom: 0.5rem;
		}
		.details{
			grid-area: details;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 
				'date partage'
				'categorie partage'
			;
			justify-content: space-between;
			padding: 0.5rem 1rem;
			margin-bottom: 2rem;

			color:var(--mc-grey);
			background-color: var(--mc-grey-light-light);

			font-size: 0.9rem;

			.date{
				grid-area: date;
			}
			.categorie{
				grid-area: categorie;
				display: none;
			}
			.partage{
				grid-area: partage;
				text-align: right;
			}
		}
		.texte{
			grid-area: texte;
			padding-top: 0.5rem;
			padding-bottom: 1rem;

			hr{
				width: min(250px, 95%);
			}
			h3{
				font-size: 1.2rem;
				font-weight: 600;
			}
			ul{
				list-style-type: disc;
				padding-left: 1rem;
			}
		}
		.byline{
			grid-area: byline;
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 1rem 0.5rem;
			width: min(800px, 100%);

			font-size: 0.9rem;
			border: 1px solid #CCC;
			border-radius: 15px;

			p{
				margin: 0;
			}

			.byline__avatar {
				width: 75px;
				height: 75px;
				border-radius: 50px;
				flex: 0 0 auto;
			}
			.byline__meta {
				display: flex;
				flex-direction: column;
			}
			.byline__author {
				font-weight: 600;
				text-decoration: none;

				&:hover {
				text-decoration: underline;
				}
			}
			.byline__role {
				font-size: 0.9rem;
				font-style: italic;
				font-weight: 300;
				line-height: 1rem;
			}
			.byline__sep {
				opacity: 0.6;
			}
			.byline__read {
				white-space: nowrap;
			}
		}
		.tags{
			grid-area: tag;
			display: flex;
			align-items: center;
			gap: 1rem;
			padding-inline:1rem;

			background-color: #f5f5f5;
			
			ul{
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				gap: 0.5rem;
			}
		}
		.tags_top{
			grid-area: tags_top;
			display: flex;
			align-items: center;
			gap: 1rem;

			ul{
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				gap: 0.5rem;
				margin-top: 0;
			}
			
			.btn-tag{
				font-size: 0.7rem !important;
			}
		}
	}
	.faq{
		/* width:min(1200px, calc(100% - 1em)); */
		margin:2rem auto 2rem;

		.faq-title{
			margin-top: unset;
		}
	}
	.autres_news{
		margin-top: 4rem;
	}

	/* BADGES TAGS */
	.autres_tag{
		display:flex;
		flex-wrap: wrap;
		gap:1rem;
		padding:1rem 0.25rem;
	}

	.btn-tag{
		padding: 0.3rem 1rem;

		background-color: var(--_tag-background);
		border:1px solid var(--_tag-background);
		border-radius: 50px;

		color:var(--_tag-color);
		font-size: 0.9rem;
		white-space: nowrap;

		transition: transform 0.5s;
	}

	@media (max-width: 999px) {
		.liste_news{
			& > .item{
				flex-basis: 33%;
			}
		}
	
	}

	@media (max-width: 768px) {

		.tag{
			--c-title-h1:var(--mc-text);

			h1{
				flex-direction: column;
				text-align: center;
				gap: 1rem;
				padding-top: 1rem;
				padding-bottom: 1rem;

				font-size: 1rem;
				font-weight: 400;

				em{
					font-size: clamp(32px,3.5vw,36px);
					font-weight: 900;
					line-height: normal;
				}
			}
		}
		.liste_news_btn{
			display: none;
		}
		.container_liste_news{
			display: flex;
			flex-direction: column;
		}
		.liste_news{

			grid-template-columns: repeat(2,1fr);
			gap: 1rem;

			& > .item{
				flex-basis: 50%;

				.wrapper{
					padding: 0;

					.titre{
						margin-top: 0;
						font-size: 1.1rem;
					}
					.date{
						display: none;
					}
					.lien{
						display: initial;	
					}
				}
			}
		}

		.fiche{
			width: fit-content;
			grid-template-columns: 1fr;
			grid-template-areas: 
				'titre'
				'visuel'
				'tags_top'
				'categorie'
				'texte'
				'details'
				'byline'
				'tag'
			;
			padding-inline: 0;

			.titre{
				text-align: center;
			}
			.visuel{
				
				figure{
					position: unset;
					top: unset;
				}
			}
			.details{
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.date{
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 1rem;

					.byline__sep{
						display: none;
					}
					.byline__read{
						display: block;
					}
				}
				.partage{
					margin-top: 2rem;
				}
			}

			.tags{
				flex-direction: column;
				gap: 0;
				padding: 2rem 0;
				background-color: #f8f8f8;
			}
		}
	}
	@media (max-width: 480px) {
		h1{
			flex-direction: column;
		}
		.liste_news{
			flex-direction: column;
			
			& > .item{
				flex-basis: fill;

				.wrapper{

					.visuel {
						img{
							width: 100%;
						}
					}
				}
			}
		}
		.fiche{
			.details{
				flex-direction: column;

				.date{
					flex-direction: column;
					gap: 0.25rem;
				}
			}
		}
	}

}