/**
 * Carte article verticale — maquette (image haut / catégorie + titre + extrait)
 * template-parts/nova-card-article-stack.php
 */

.nova-card-item:has(.nova-card-article-stack):not(.nova-page-hidden):not(.nova-filter-hidden),
.nova-cards-grid .nova-card-item:has(.nova-card-article-stack):not(.nova-page-hidden):not(.nova-filter-hidden),
.owl-item > .nova-card-item:has(.nova-card-article-stack):not(.nova-page-hidden):not(.nova-filter-hidden) {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	transform: none !important;
}

.nova-card-item:has(.nova-card-article-stack) .nova-card-background,
.nova-card-item:has(.nova-card-article-stack) .nova-card-overlay,
.nova-card-item:has(.nova-card-article-stack) .nova-card-content,
.nova-card-item:has(.nova-card-article-stack) .nova-card-polaroid {
	display: none !important;
}

.nova-card-article-stack {
	--ncas-radius: 16px;
	--ncas-eyebrow: #d23d22;
	--ncas-title: #2d0059;
	--ncas-excerpt: #6b6b6b;
	--ncas-bg: #fcfcfc;

	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--ncas-bg);
	border-radius: var(--ncas-radius);
	overflow: hidden;
	border: 1px solid #f3ebe4;
	box-shadow: 0 6px 15px 0 #64646414;
}

.nova-card-article-stack__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #dfe7f0;
	flex-shrink: 0;
}

.nova-card-article-stack__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.nova-card-article-stack__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-height: 220px;
}

.nova-card-article-stack__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    min-width: 0;
    flex: 1 1 auto;
    background: var(--ncas-bg);
}
.nova-card-article-stack__eyebrow {
    color: #D23D22;
    margin: 0;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.nova-card-article-stack__title {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: 500 !important;
    font-size: 20px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
    font-family: 'Poppins' !important;
    color: #2D0059 !important;
}

.nova-card-article-stack__title-link {
	color: inherit;
	text-decoration: none;
}

.nova-card-article-stack__title-link:hover,
.nova-card-article-stack__title-link:focus-visible {
	color: #7900f0;
}

.nova-card-article-stack__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: Poppins;
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: -1%;
    color: #727272;
}

@media screen and (max-width: 767px) {
	.nova-card-article-stack__media {
		aspect-ratio: 16 / 11;
	}

	.nova-card-article-stack__body {
		padding: 18px 18px 22px;
		gap: 10px;
	}

	.nova-card-article-stack__title {
		font-size: 18px;
	}

	.nova-card-article-stack__excerpt {
		font-size: 13px;
		-webkit-line-clamp: 3;
	}
}


/* ——— Variante vidéo (ACF file `video`) — overlay full-bleed ——— */
.nova-card-article-stack--video {
	background: #1a1a1a;
	border: 0;
	min-height: 360px;
}
.nova-card-article-stack__video-shell {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #2a2a2a;
}
.nova-card-article-stack--video .nova-card-article-stack__media-link {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nova-card-article-stack--video .nova-card-article-stack__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

.nova-card-article-stack__video-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.05) 0%,
		rgba(0, 0, 0, 0.15) 45%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

.nova-card-article-stack__video-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    backdrop-filter: blur(14px);
    color: #fff;
    pointer-events: none;
    background: #434d516e;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: -3%;
}

.nova-card-article-stack__video-play {
    display: block;
    flex-shrink: 0;
    width: 6px;
    height: auto;
    object-fit: contain;
}
.nova-card-article-stack__video-time {
	white-space: nowrap;
}

.nova-card-article-stack__video-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px 20px 22px;
	pointer-events: none;
}

.nova-card-article-stack--video .nova-card-article-stack__eyebrow {
	color: #fff !important;
	margin-bottom: 0;
}

.nova-card-article-stack--video .nova-card-article-stack__title {
	color: #fff !important;
}

.nova-card-article-stack--video .nova-card-article-stack__title-link {
	color: inherit;
	pointer-events: auto;
}

.nova-card-article-stack--video .nova-card-article-stack__title-link:hover,
.nova-card-article-stack--video .nova-card-article-stack__title-link:focus-visible {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.nova-card-article-stack--video {
		min-height: 300px;
	}

	.nova-card-article-stack__video-shell {
		min-height: 300px;
		aspect-ratio: 3 / 4;
	}

	.nova-card-article-stack__video-body {
		padding: 20px 16px 18px;
	}

	.nova-card-article-stack--video .nova-card-article-stack__title {
		font-size: 18px;
	}
}

/* ==========================================================================
   Disposition HORIZONTALE (image gauche / texte droite) sous 991px
   --------------------------------------------------------------------------
   Sur mobile/tablette, la carte verticale (image haut / texte bas) prenait
   trop de hauteur : on la bascule en disposition « row », c'est-à-dire
   image carrée à gauche et textes empilés à droite.

   ⚠️ CE BLOC EST VOLONTAIREMENT EN FIN DE FICHIER. Les règles de la variante
   `--video` ci-dessus (`.nova-card-article-stack__video-shell`,
   `__video-body`, `__video-badge`…) ont la MÊME spécificité que celles
   écrites ici et ne sont PAS dans un media query. Placé plus haut, ce bloc
   serait écrasé par elles malgré le media query — l'ordre source tranche à
   spécificité égale.

   ⚠️ On passe le conteneur en `grid` à DEUX colonnes plutôt qu'en `flex` :
   `grid-template-columns: 140px 1fr` garantit une vignette STRICTEMENT
   carrée quelle que soit la hauteur du texte, sans forcer `height` sur la
   carte (ce qui casserait l'étirement des cartes dans le carrousel Owl).
   ========================================================================== */
@media screen and (max-width: 991px) {

	/* --- Carte standard --- */
	.nova-card-article-stack {
		display: grid;
		grid-template-columns: 140px 1fr;
		align-items: stretch;
		min-height: 140px;
		max-width: 508px !important;
		margin: auto;
	}

	/* L'image occupe la première colonne, carrée et pleine hauteur. */
	.nova-card-article-stack:not(.nova-card-article-stack--video) .nova-card-article-stack__media {
		width: 140px;
		height: 100%;
		min-height: 140px;
		max-height: none;
		/* `aspect-ratio` n'a plus de sens : c'est la colonne qui dimensionne. */
		aspect-ratio: auto;
	}

	.nova-card-article-stack:not(.nova-card-article-stack--video) .nova-card-article-stack__img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
	}

	/* Le texte est centré verticalement dans la colonne de droite. */
	.nova-card-article-stack:not(.nova-card-article-stack--video) .nova-card-article-stack__body {
		justify-content: center;
		gap: 12px;
		padding: 20px;
	}
	.nova-card-article-stack:not(.nova-card-article-stack--video) .nova-card-article-stack__title {
		font-size: 16px;
		line-height: 115%;
	}

	/* L'extrait n'existe pas dans la carte « row » : on le masque pour rester
	   fidèle à cette maquette (il n'y a plus la place de l'afficher lisiblement
	   sur deux colonnes). */
	.nova-card-article-stack__excerpt {
		display: none;
	}

	/* --- Variante vidéo : réorganisée en horizontal ---
	   ⚠️ Le texte (__video-body) est un ENFANT de __video-shell : on ne peut
	   donc pas le placer via une grille/flex posée sur la carte parente. On
	   passe directement le SHELL en flex ROW (vignette 140px | texte). */
	.nova-card-article-stack--video {
		display: block;
		height: auto;
		min-height: 140px;
		background: var(--ncas-bg);
		border: 1px solid #f3ebe4;
		overflow: hidden;
	}

	.nova-card-article-stack--video .nova-card-article-stack__video-shell {
		position: relative;
		inset: auto;
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap !important;
		width: 100%;
		height: auto;
		min-height: 140px;
		max-height: none;
		aspect-ratio: auto;
		background: var(--ncas-bg);
	}

	/* L'image est DANS LE FLUX, en premier item flex (largeur fixe 140px).
	   ⚠️ Aucun `position: absolute` ici : hors flux, il viendrait se
	   superposer au texte au lieu d'occuper sa colonne. */
	.nova-card-article-stack--video .nova-card-article-stack__media-link {
		position: relative;
		display: block;
		flex: 0 0 140px !important;
		width: 140px !important;
		max-width: 140px !important;
		align-self: stretch;
		height: auto;
		min-height: 140px;
		order: 1;
		z-index: 0;
	}

	.nova-card-article-stack--video .nova-card-article-stack__img {
		position: static !important;
		inset: auto !important;
		display: block;
		flex: 0 0 140px !important;
		width: 140px !important;
		max-width: 140px !important;
		height: 100% !important;
		min-height: 140px;
		max-height: none !important;
		object-fit: cover;
		object-position: center;
		order: 1;
		z-index: 0;
	}

	/* Le scrim couvrait tout : il devient inutile et assombrirait la vignette. */
	.nova-card-article-stack--video .nova-card-article-stack__video-scrim {
		display: none;
	}

	.nova-card-article-stack--video .nova-card-article-stack__video-shell::after {
		content: "";
		position: absolute;
		top: auto;
		left: 16px;
		bottom: 16px;
		width: 32px;
		height: 32px;
		background: url("/wp-content/uploads/2026/10/Frame-52.svg") center / 32px 32px no-repeat;
		pointer-events: none;
		z-index: 2;
	}

	/* Le badge durée est masqué sur mobile (maquette « carte normale »). */
	.nova-card-article-stack--video .nova-card-article-stack__video-badge {
		display: none;
	}

	/* Les textes reprennent des couleurs foncées : ils ne sont plus posés
	   sur l'image, le blanc sur fond clair serait illisible.
	   `!important` : neutralise tout `position: absolute` / `inset` hérité
	   (bloc non-media ci-dessus, ou règles de style.css réinjecté). */
	.nova-card-article-stack--video .nova-card-article-stack__video-body {
		position: static !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		order: 2;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0;
		max-width: none !important;
		align-self: stretch;
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 8px;
		padding: 15px;
		pointer-events: auto;
		overflow: hidden;
	}

	.nova-card-article-stack--video .nova-card-article-stack__eyebrow {
		color: #D23D22 !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-wrap: anywhere;
	}

	.nova-card-article-stack--video .nova-card-article-stack__title {
		color: #2D0059 !important;
		font-size: 16px;
		line-height: 115%;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		display: -webkit-box !important;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.nova-card-article-stack--video .nova-card-article-stack__title-link {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.nova-card-article-stack--video .nova-card-article-stack__title-link:hover,
	.nova-card-article-stack--video .nova-card-article-stack__title-link:focus-visible {
		color: #7900f0;
	}
}