/* ==========================================================================
   JDK Concept - Section « On parle de nous »
   Une apparition à la une, les suivantes en satellites.
   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-pr {
	--jdk-pr-or: #D2AF87;
	--jdk-pr-or-clair: #E3C9A9;
	--jdk-pr-neige: #FFFAFA;
	--jdk-pr-texte: #D8D5D5;
	--jdk-pr-sourdine: #9AA0A0;
	--jdk-pr-surface: rgba(255, 255, 255, .035);
	--jdk-pr-surface-haute: rgba(255, 255, 255, .055);
	--jdk-pr-bord: rgba(255, 255, 255, .10);
	--jdk-pr-rayon: 0px;

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

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

.jdk-pr__hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- pictogrammes --- */

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

.jdk-pr__picto--plein {
	fill: currentColor;
	stroke: none;
}

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

.jdk-pr__tete { margin-bottom: clamp(30px, 3.6vw, 48px); }

.jdk-pr__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-pr-or);
}

.jdk-pr__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-pr-neige);
}

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

/* --- la grille : une à la une, des satellites --- */

.jdk-pr__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 36px);
	align-items: stretch;
}

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

/* --- surfaces communes --- */

.jdk-pr__une,
.jdk-pr__item {
	position: relative;
	background: var(--jdk-pr-surface);
	border: 1px solid var(--jdk-pr-bord);
	border-radius: var(--jdk-pr-rayon);
	overflow: hidden;
	transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}

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

.jdk-pr__une:focus-within,
.jdk-pr__item:focus-within { outline: 2px solid var(--jdk-pr-or); outline-offset: 2px; }

/* le lien couvre la carte entière, sans multiplier les liens pour le clavier */

/* ⛔ 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-pr__lien,
.jdk-pr__lien:visited,
.jdk-pr__lien:hover,
.jdk-pr__lien:focus,
.jdk-pr__lien:active {
	color: inherit;
	text-decoration: none;
}

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

.jdk-pr__une-titre,
.jdk-pr__item-titre { transition: color .3s ease; }

.jdk-pr__une--cliquable:hover .jdk-pr__une-titre,
.jdk-pr__une:focus-within .jdk-pr__une-titre,
.jdk-pr__item--cliquable:hover .jdk-pr__item-titre,
.jdk-pr__item:focus-within .jdk-pr__item-titre { color: var(--jdk-pr-or-clair); }

/* --- visuels --- */

.jdk-pr__image,
.jdk-pr__plaque {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #101316;
}

.jdk-pr__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.jdk-pr__une--cliquable:hover .jdk-pr__image img,
.jdk-pr__item--cliquable:hover .jdk-pr__image img { transform: scale(1.05); }

/* plaque de marque : le repli quand l'apparition n'a pas encore son visuel */

.jdk-pr__plaque {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(210, 175, 135, .16), transparent 62%),
		linear-gradient(150deg, #1E2226 0%, #121518 100%);
}

.jdk-pr__plaque .jdk-pr__picto {
	position: absolute;
	right: -8%;
	bottom: -14%;
	width: 62%;
	height: auto;
	color: rgba(255, 255, 255, .05);
	stroke-width: 1;
}

.jdk-pr__plaque .jdk-pr__logo {
	position: relative;
	z-index: 1;
	max-width: 58%;
}

/* --- logos --- */

.jdk-pr__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jdk-pr-rayon);
}

.jdk-pr__logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.jdk-pr__logo--une {
	position: absolute;
	left: clamp(16px, 2vw, 24px);
	bottom: clamp(16px, 2vw, 24px);
	z-index: 2;
	width: clamp(74px, 9vw, 104px);
}

.jdk-pr__logo--sombre img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }

.jdk-pr__logo--plaque {
	background: #FFFAFA;
	padding: 8px 10px;
}

.jdk-pr__logo--silhouette img {
	filter: brightness(0) invert(1);
	opacity: .88;
}

/* --- carte à la une --- */

.jdk-pr__une {
	display: flex;
	flex-direction: column;
}

.jdk-pr__une-media {
	position: relative;
	aspect-ratio: 16 / 9;
	flex: none;
}

.jdk-pr__voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(70% 90% at 12% 8%, rgba(210, 175, 135, .14), transparent 60%),
		linear-gradient(180deg, rgba(16, 19, 22, 0) 42%, rgba(16, 19, 22, .78) 100%);
}

.jdk-pr__lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: clamp(56px, 6vw, 70px);
	height: clamp(56px, 6vw, 70px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--jdk-pr-or);
	color: #1B1B1B;
	box-shadow: 0 0 0 0 rgba(210, 175, 135, .30);
	transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.jdk-pr__lecture .jdk-pr__picto {
	width: 42%;
	height: 42%;
	margin-left: 8%;
}

.jdk-pr__une--cliquable:hover .jdk-pr__lecture {
	background: var(--jdk-pr-or-clair);
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 0 0 14px rgba(210, 175, 135, .16);
}

.jdk-pr__une-corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(22px, 2.6vw, 32px);
}

.jdk-pr__une-titre {
	margin: 12px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.28rem, 1.05rem + .95vw, 1.75rem);
	font-weight: 700;
	line-height: 1.22;
	color: var(--jdk-pr-neige);
}

/* --- ligne de marque --- */

.jdk-pr__marque {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pr-or);
}

.jdk-pr__marque .jdk-pr__picto { font-size: 17px; }

.jdk-pr__marque--petit { font-size: 11.5px; gap: 7px; }

.jdk-pr__marque--petit .jdk-pr__picto { font-size: 14px; }

.jdk-pr__marque-nom {
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pr-neige);
	text-align: center;
}

/* --- repères : format, durée, date --- */

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

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

/* --- verbatim --- */

.jdk-pr__verbatim {
	margin: 20px 0 0;
	padding: 2px 0 2px 20px;
	border-left: 2px solid rgba(210, 175, 135, .6);
}

.jdk-pr__verbatim p {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1rem, .94rem + .35vw, 1.16rem);
	font-style: italic;
	line-height: 1.55;
	color: var(--jdk-pr-neige);
}

.jdk-pr__verbatim p::before { content: "\00AB\00A0"; color: var(--jdk-pr-or); }
.jdk-pr__verbatim p::after { content: "\00A0\00BB"; color: var(--jdk-pr-or); }

/* --- textes --- */

.jdk-pr__texte {
	margin: 16px 0 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--jdk-pr-texte);
}

.jdk-pr__texte--petit {
	margin-top: 10px;
	font-size: .875rem;
	line-height: 1.6;
}

/* --- action --- */

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

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

.jdk-pr__une--cliquable:hover .jdk-pr__action .jdk-pr__picto { transform: translateX(6px); }

/* --- satellites --- */

.jdk-pr__liste {
	display: grid;
	grid-auto-rows: 1fr;
	gap: clamp(16px, 1.8vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdk-pr__item {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	align-items: stretch;
	min-height: 132px;
}

.jdk-pr__item-media {
	position: relative;
	overflow: hidden;
}

.jdk-pr__item-corps {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(16px, 1.6vw, 22px);
}

.jdk-pr__item-titre {
	margin: 9px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1rem, .95rem + .28vw, 1.14rem);
	font-weight: 600;
	line-height: 1.28;
	color: var(--jdk-pr-neige);
}

.jdk-pr__item .jdk-pr__reperes { margin-top: 9px; font-size: 11px; }

.jdk-pr__chevron {
	position: absolute;
	right: 16px;
	bottom: 14px;
	font-size: 16px;
	color: var(--jdk-pr-or);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .35s ease, transform .35s ease;
}

.jdk-pr__item--cliquable:hover .jdk-pr__chevron,
.jdk-pr__item:focus-within .jdk-pr__chevron {
	opacity: 1;
	transform: translateX(0);
}

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

@media (max-width: 1024px) {

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

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

	/* la colonne etant deux fois plus large, la vignette repasse au-dessus du texte
	   plutot que de se reduire a une bande verticale trop recadree */
	/* rangees explicites : sans elles la rangee du visuel se dilate pour remplir
	   la carte, et aspect-ratio en deduit alors une LARGEUR superieure a la piste,
	   qui deborde (mesure : 362px de visuel dans une carte de 345px) */
	.jdk-pr__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }

	.jdk-pr__item-media { aspect-ratio: 16 / 9; }

	.jdk-pr__item-corps { justify-content: flex-start; }
}

@media (max-width: 680px) {

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

	.jdk-pr__item { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto; min-height: 116px; }

	.jdk-pr__item-media { aspect-ratio: auto; }

	.jdk-pr__item-corps { justify-content: center; padding: 14px 16px; }

	.jdk-pr__item .jdk-pr__texte--petit { display: none; }

	.jdk-pr__chevron { display: none; }
}

@media (max-width: 420px) {

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

	.jdk-pr__une-corps { padding: 20px 18px; }
}

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

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

	.jdk-pr__une--cliquable:hover .jdk-pr__image img,
	.jdk-pr__item--cliquable:hover .jdk-pr__image img { transform: none; }
}