/* ==========================================================================
   JDK Concept - Section « Nos dernières publications »
   Trois cartes de même poids, volontairement distinctes de la section presse
   qui la précède (une à la une plus satellites) : deux compositions
   identiques qui se suivent se liraient comme une répétition.
   Rayon 0 pour rester cohérent avec le reste du site tant que le kit figé
   impose le sien : une seule variable à passer à 5px en phase DA.
   ========================================================================== */

.jdk-pu {
	--jdk-pu-or: #D2AF87;
	--jdk-pu-or-clair: #E3C9A9;
	--jdk-pu-neige: #FFFAFA;
	--jdk-pu-texte: #D8D5D5;
	--jdk-pu-sourdine: #9AA0A0;
	--jdk-pu-surface: rgba(255, 255, 255, .035);
	--jdk-pu-surface-haute: rgba(255, 255, 255, .055);
	--jdk-pu-bord: rgba(255, 255, 255, .10);
	--jdk-pu-rayon: 0px;

	font-family: "Montserrat", sans-serif;
	color: var(--jdk-pu-texte);
}

.jdk-pu *,
.jdk-pu *::before,
.jdk-pu *::after { box-sizing: border-box; }

/* --- pictogrammes --- */

.jdk-pu__picto {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- en-tête de section --- */

.jdk-pu__tete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-bottom: clamp(30px, 3.6vw, 48px);
}

.jdk-pu__eyebrow {
	margin: 0 0 12px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--jdk-pu-or);
}

.jdk-pu__titre {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--jdk-pu-neige);
}

.jdk-pu__chapo {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--jdk-pu-texte);
}

.jdk-pu__toutes {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding-bottom: 6px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pu-or);
	text-decoration: none;
	border-bottom: 1px solid rgba(210, 175, 135, .35);
	transition: color .3s ease, border-color .3s ease;
}

.jdk-pu__toutes .jdk-pu__picto { font-size: 17px; transition: transform .35s ease; }

.jdk-pu__toutes,
.jdk-pu__toutes:visited { color: var(--jdk-pu-or); text-decoration: none; }

.jdk-pu__toutes:hover,
.jdk-pu__toutes:focus,
.jdk-pu__toutes:active { color: var(--jdk-pu-or-clair); border-color: var(--jdk-pu-or); }

.jdk-pu__toutes:hover .jdk-pu__picto { transform: translateX(6px); }

/* --- la grille --- */

.jdk-pu__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	align-items: stretch;
}

/* --- la carte --- */

.jdk-pu__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--jdk-pu-surface);
	border: 1px solid var(--jdk-pu-bord);
	border-radius: var(--jdk-pu-rayon);
	overflow: hidden;
	transition: border-color .35s ease, background-color .35s ease;
}

.jdk-pu__carte:hover,
.jdk-pu__carte:focus-within {
	border-color: rgba(210, 175, 135, .75);
	background: var(--jdk-pu-surface-haute);
}

.jdk-pu__carte:focus-within { outline: 2px solid var(--jdk-pu-or); outline-offset: 2px; }

/* --- le visuel --- */

.jdk-pu__media {
	position: relative;
	flex: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #101316;
}

.jdk-pu__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.jdk-pu__carte:hover .jdk-pu__media img { transform: scale(1.05); }

.jdk-pu__media-vide {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(210, 175, 135, .16), transparent 62%),
		linear-gradient(150deg, #1E2226 0%, #121518 100%);
}

.jdk-pu__voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(16, 19, 22, .30) 0%, rgba(16, 19, 22, 0) 38%, rgba(16, 19, 22, .42) 100%);
}

.jdk-pu__rubrique {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 11px;
	font-family: "Oswald", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pu-or);
	background: rgba(16, 19, 22, .72);
	border: 1px solid rgba(210, 175, 135, .5);
	border-radius: var(--jdk-pu-rayon);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* --- le corps --- */

.jdk-pu__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: clamp(20px, 2vw, 26px);
}

.jdk-pu__reperes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pu-sourdine);
}

.jdk-pu__sep {
	width: 4px;
	height: 4px;
	margin: 0 10px;
	border-radius: 50%;
	background: rgba(210, 175, 135, .65);
}

.jdk-pu__duree {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jdk-pu__duree .jdk-pu__picto { font-size: 13px; }

.jdk-pu__nom {
	margin: 11px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.12rem, 1.02rem + .42vw, 1.34rem);
	font-weight: 700;
	line-height: 1.26;
	color: var(--jdk-pu-neige);
	transition: color .3s ease;
}

.jdk-pu__carte:hover .jdk-pu__nom,
.jdk-pu__carte:focus-within .jdk-pu__nom { color: var(--jdk-pu-or-clair); }

/* un seul lien par carte, étendu à toute la surface : le clavier n’a qu’une
   seule tabulation à franchir, la souris a toute la carte pour cible */

/* ⛔ Le reset de Hello Elementor porte `a:active, a:hover { color: #336 }`,
   soit une specificite (0,1,1) qui BAT une simple classe (0,1,0) : le titre
   virait au bleu-violet au survol. Meme famille que le rose #CC3366 des
   boutons. Tout lien maison redeclare donc ses etats en (0,2,0), sur
   :visited, :hover, :focus ET :active. */
.jdk-pu__lien,
.jdk-pu__lien:visited,
.jdk-pu__lien:hover,
.jdk-pu__lien:focus,
.jdk-pu__lien:active {
	color: inherit;
	text-decoration: none;
}

.jdk-pu__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.jdk-pu__extrait {
	margin: 12px 0 0;
	font-size: .92rem;
	line-height: 1.7;
	color: var(--jdk-pu-texte);
}

.jdk-pu__suite {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--jdk-pu-bord);
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pu-or);
}

.jdk-pu__suite .jdk-pu__picto { font-size: 17px; transition: transform .35s ease; }

.jdk-pu__carte:hover .jdk-pu__suite .jdk-pu__picto { transform: translateX(6px); }

/* ==========================================================================
   Adaptation aux écrans
   ========================================================================== */

@media (max-width: 1024px) {

	.jdk-pu__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* une carte orpheline en fin de grille occuperait une demi-ligne, laissant
	   un vide à droite : elle prend la ligne entière en composition horizontale */
	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) .jdk-pu__media {
		width: 42%;
		aspect-ratio: auto;
	}

	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) .jdk-pu__corps {
		justify-content: center;
	}
}

@media (max-width: 680px) {

	.jdk-pu__grille { grid-template-columns: minmax(0, 1fr); }

	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) { flex-direction: column; }

	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) .jdk-pu__media {
		width: auto;
		aspect-ratio: 3 / 2;
	}

	.jdk-pu__grille > .jdk-pu__carte:last-child:nth-child(odd) .jdk-pu__corps {
		justify-content: flex-start;
	}

	.jdk-pu__tete { align-items: flex-start; }

	.jdk-pu__toutes { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {

	.jdk-pu *,
	.jdk-pu *::before,
	.jdk-pu *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.jdk-pu__carte:hover .jdk-pu__media img { transform: none; }
}