/* Reset CSS listings Block news natif + GeneratePress */

ul.wp-block-latest-posts__list {
  margin-left: 0;
}

@media screen and (max-width: 599px) {
  ul.wp-block-latest-posts__list li {
    margin-right: 0 !important;
  }
}

.generate-columns-container article {
  padding-bottom: 0 !important;
}

.generate-columns-container .inside-article .entry-header {
  z-index: 2;
}

.wp-block-post,
.generate-columns-container .inside-article,
.wp-block-latest-posts__list li {
  contain: content;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-color: var(--darkest);
  padding: 1.25em;
  border-radius: var(--border-radius);
}

.generate-columns-container .featured-column .inside-article {
  aspect-ratio: 2 / 1;
}

.wp-block-post-featured-image,
.wp-block-latest-posts__featured-image,
.generate-columns-container .post-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin-top: 0;
}

.wp-block-post-featured-image img,
.wp-block-latest-posts__featured-image img,
.generate-columns-container .post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: .8;
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

@supports not (aspect-ratio: 1/1) {
  .wp-block-post,
  .generate-columns-container .inside-article,
  .wp-block-latest-posts__list li {
    position: relative;
    padding-top: 100%;
  }
}

@media (pointer: fine) {
  .wp-block-post-featured-image img,
  .wp-block-latest-posts__featured-image img,
  .generate-columns-container .post-image img {
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  li.wp-block-post:hover img,
  .wp-block-latest-posts__list li:hover img,
  .generate-columns-container article:hover img {
    transform: scale(1.1);
    opacity: 1;
  }
}

li.wp-block-post:hover,
.wp-block-latest-posts__list li:hover,
.generate-columns-container article:hover {
  cursor: pointer;
}

.generate-columns-container .entry-title {
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
}

.wp-block-post a,
.wp-block-latest-posts__list a,
.generate-columns-container .entry-title a {
  z-index: 1;
  text-wrap: balance;
  font-family: inherit;
  color: inherit;
  font-size: 1.3rem !important;
  line-height: 1.9rem;
  font-weight: 700;
  color: var(--lightest);
}

.wp-block-post a:hover,
.wp-block-latest-posts__list a:hover,
.generate-columns-container .entry-title a:hover {
  color: inherit;
}

.wp-block-post:hover a,
.wp-block-latest-posts__list li:hover a,
.generate-columns-container .inside-article:hover .entry-title a {
  color: var(--lightest) !important;
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author,
.generate-columns-container .entry-meta {
  z-index: 1;
  display: inline-block;
  color: var(--lightest) !important;
  font-size: .9rem !important;
  margin-top: .75rem !important;
  line-height: 1rem;
}

.wp-block-latest-posts__post-author+.wp-block-latest-posts__post-date {
  margin-left: .33em;
}

.generate-columns-container .entry-summary {
  display: none;
}
/* ==================================================================
   Personnalisation VideoDL — articles liés
   Les deux zones partagent le même balisage (nav.related-articles >
   ul.wp-block-latest-posts__list > li > figure + a.simple + time) : seule
   la colonne latérale ajoute .is-grid côté corps. Le placement des trois
   enfants est déclaré explicitement — l'automatique les répartissait mal.
   ================================================================== */

/* ---- Neutralisation de la variante « cover » du fournisseur ----
   Elle impose aux li : aspect-ratio 1/1, contain: content, fond encre et padding ;
   à la figure : position absolute (donc hors flux, tout placement en grille reste
   sans effet) ; à l'image : width/height 100% !important, opacité .8 et un masque
   dégradé. Chaque décision est annulée explicitement avant de reconstruire. */
.related-articles .wp-block-latest-posts__list > li {
	aspect-ratio: auto;
	contain: none;
	padding: 0;
	padding-top: 0;
	position: static;
	background-color: transparent;
}

.related-articles .wp-block-latest-posts__featured-image {
	position: static;
	z-index: auto;
}

.related-articles .wp-block-latest-posts__featured-image img {
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---- colonne latérale : lignes compactes ---- */
.inside-right-sidebar .related-articles .wp-block-latest-posts__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__list > li {
	width: 100%;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
	padding: 14px 0;
	margin: 0;
	background: none;
	border-bottom: 2px solid var(--contrast-3);
	transition: transform 0.2s ease;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__list > li:last-child {
	border-bottom: 0;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__list > li:hover {
	transform: translateX(5px);
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__featured-image {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 92px;
	max-width: 92px;
	height: 70px;
	margin: 0;
	overflow: hidden;
	clip-path: polygon(var(--cut, 10px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut, 10px));
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__featured-image img {
	width: 92px !important;
	height: 70px !important;
	max-width: 92px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__list > li > a {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.1;
	color: var(--contrast);
	text-decoration: none;
	transition: color 0.18s ease;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__list > li:hover > a {
	color: var(--accent);
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__post-date {
	grid-column: 2;
	grid-row: 2;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.07em;
	color: var(--contrast-2) !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.inside-right-sidebar .related-articles .wp-block-latest-posts__post-date::before {
	content: '';
	width: 10px;
	height: 2px;
	background-color: var(--contrast-3);
}

/* ---- bas de page : vraie grille de cartes ---- */
.site-main .related-articles .wp-block-latest-posts__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-articles .wp-block-latest-posts__list > li {
	margin: 0;
}

.site-main .related-articles .wp-block-latest-posts__list > li {
	background-color: var(--base-3);
	width: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	background-color: var(--base-3);
	border: 2px solid var(--contrast);
	overflow: hidden;
	filter: drop-shadow(var(--lift, 4px) var(--lift, 4px) 0 var(--contrast));
	transition: transform 0.26s cubic-bezier(.22, 1, .36, 1), filter 0.26s ease;
}

.site-main .related-articles .wp-block-latest-posts__list > li:hover {
	transform: translate(var(--lift, 4px), var(--lift, 4px));
	filter: drop-shadow(0 0 0 var(--contrast));
}

.site-main .related-articles .wp-block-latest-posts__featured-image {
	margin: 0;
	width: 100%;
	height: 172px;
	overflow: hidden;
	border-bottom: 2px solid var(--contrast);
	border-radius: 0;
	clip-path: none;
}

.site-main .related-articles .wp-block-latest-posts__featured-image img {
	width: 100% !important;
	height: 172px !important;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.5s ease;
}

.site-main .related-articles .wp-block-latest-posts__list > li:hover .wp-block-latest-posts__featured-image img {
	transform: scale(1.04);
}

.site-main .related-articles .wp-block-latest-posts__list > li > a {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.06;
	color: var(--contrast);
	text-decoration: none;
	padding: 20px 18px 8px;
	transition: color 0.18s ease;
}

.site-main .related-articles .wp-block-latest-posts__list > li:hover > a {
	color: var(--accent);
}

.site-main .related-articles .wp-block-latest-posts__post-date {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	color: var(--contrast-2) !important;
	padding: 0 18px 18px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: end;
}

.site-main .related-articles .wp-block-latest-posts__post-date::before {
	content: '';
	width: 10px;
	height: 2px;
	background-color: var(--contrast-3);
}

/* Intitulé des deux zones. */
.related-articles > h2 {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

@media (max-width: 1024px) {
	.site-main .related-articles .wp-block-latest-posts__list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

@media (max-width: 767px) {
	.site-main .related-articles .wp-block-latest-posts__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* Le fournisseur force dates et liens en blanc (!important), pour du texte posé sur
   une image de couverture. Nos deux zones sont sur fond clair : on rétablit. */
.related-articles .wp-block-latest-posts__list > li > a {
	color: var(--contrast) !important;
}

.related-articles .wp-block-latest-posts__list > li:hover > a {
	color: var(--accent) !important;
}