/* ============================================================================
 * GABARIT D'ARCHIVE EN CARTES — JDK Concept, 2026-08-22
 *
 * ⭐ La DA n'est pas inventée : elle reprend le patron de carte du site,
 * `.jdk-rc` de jdk-real.css, et les variables de `.jdk-pp` de jdk-service.css.
 *   fond #1B1B1B · creux #141618 · carte #1f2120 · bord #2a2c2b
 *   or #D2AF87 · neige #FFFAFA · texte #D8D5D5 · sourdine #9AA0A0
 *   Oswald pour les titres et les labels, Montserrat pour le corps
 *   media en 4/3, zoom 1.06 au survol, bordure qui vire à l'or, carte qui
 *   monte de 5 px
 *
 * ⚠️ Les variables --jdk-pp-* sont déclarées sur `.jdk-pp`, un conteneur qui
 * n'existe pas sur une archive : elles sont donc redéclarées ici sur `.jdk-arc`.
 * Mêmes valeurs, à garder synchronisées avec jdk-service.css.
 *
 * ⚠️ `--jdk-pp-rayon` vaut 5px dans le CDC v2, mais les mu-plugins
 * jdk-noradius* forcent encore `border-radius: 0 !important` sur tout le site.
 * Le rayon est déclaré quand même : le jour où ces modules seront retirés,
 * les archives suivront le reste sans retouche.
 * ========================================================================= */

.jdk-arc {
	--jdk-arc-or: #D2AF87;
	--jdk-arc-or-clair: #E3C9A9;
	--jdk-arc-neige: #FFFAFA;
	--jdk-arc-texte: #D8D5D5;
	--jdk-arc-sourdine: #9AA0A0;
	--jdk-arc-fond: #1B1B1B;
	--jdk-arc-creux: #141618;
	--jdk-arc-carte: #1f2120;
	--jdk-arc-bord: #2a2c2b;
	--jdk-arc-media: #161616;
	--jdk-arc-rayon: 5px;
	--jdk-arc-cadre: 1180px;
	--jdk-arc-marge-x: 24px;
	--jdk-arc-bande: clamp(56px, 6vw, 96px);
	--jdk-arc-gouttiere: clamp(20px, 2.4vw, 32px);

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

.jdk-arc__bande {
	padding-block: var(--jdk-arc-bande);
}

.jdk-arc__bande--creux {
	background-color: var(--jdk-arc-creux);
}

.jdk-arc__cadre {
	max-width: var(--jdk-arc-cadre);
	margin-inline: auto;
	padding-inline: var(--jdk-arc-marge-x);
}

/* --- En-tête de rubrique --- */

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

.jdk-arc__titre {
	max-width: 20ch;
	margin: 14px 0 0;
	font-family: "Oswald", sans-serif;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 500;
	line-height: 1.14;
	color: var(--jdk-arc-neige);
}

.jdk-arc__intro {
	max-width: 62ch;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--jdk-arc-texte);
}

/* --- Grille de cartes --- */

.jdk-arc__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jdk-arc-gouttiere);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

.jdk-arc__carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background-color: var(--jdk-arc-carte);
	border: 1px solid var(--jdk-arc-bord);
	border-radius: var(--jdk-arc-rayon);
	overflow: hidden;
	color: var(--jdk-arc-texte);
	transition: border-color .3s ease, transform .3s ease;
}

.jdk-arc__carte:hover,
.jdk-arc__carte:focus-visible {
	border-color: var(--jdk-arc-or);
	transform: translateY(-5px);
	text-decoration: none;
}

.jdk-arc__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--jdk-arc-media);
}

.jdk-arc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .6s ease;
}

.jdk-arc__carte:hover .jdk-arc__media img {
	transform: scale(1.06);
}

/* Sans vignette : un aplat sobre, pas un trou blanc. */
.jdk-arc__media--vide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(210, 175, 135, .10), transparent 60%),
		var(--jdk-arc-media);
}

.jdk-arc__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 12px;
	font-family: "Oswald", sans-serif;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1B1B1B;
	background-color: var(--jdk-arc-or);
}

.jdk-arc__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.jdk-arc__carte-titre {
	margin: 0 0 12px;
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--jdk-arc-neige);
}

.jdk-arc__extrait {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jdk-arc-sourdine);
}

.jdk-arc__lien {
	margin-top: auto;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jdk-arc-or);
}

.jdk-arc__lien em {
	display: inline-block;
	font-style: normal;
	transition: transform .3s ease;
}

.jdk-arc__carte:hover .jdk-arc__lien em {
	transform: translateX(5px);
}

/* --- Rubrique sans contenu --- */

.jdk-arc__vide {
	max-width: 62ch;
	padding: 32px 28px;
	background-color: var(--jdk-arc-carte);
	border: 1px solid var(--jdk-arc-bord);
	border-radius: var(--jdk-arc-rayon);
}

.jdk-arc__vide p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

.jdk-arc__vide-lien {
	display: inline-block;
	margin-top: 16px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jdk-arc-or);
	text-decoration: none;
	border-bottom: 1px solid rgba(210, 175, 135, .45);
	padding-bottom: 3px;
}

.jdk-arc__vide-lien:hover,
.jdk-arc__vide-lien:focus-visible {
	color: var(--jdk-arc-or-clair);
	border-bottom-color: var(--jdk-arc-or-clair);
}

/* --- Pagination --- */

.jdk-arc__pagination {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: 26px;
	border-top: 1px solid var(--jdk-arc-bord);
}

.jdk-arc__pagination a {
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jdk-arc-or);
	text-decoration: none;
}

.jdk-arc__pagination a:hover,
.jdk-arc__pagination a:focus-visible {
	color: var(--jdk-arc-or-clair);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.jdk-arc__pagination .nav-next {
	margin-inline-start: auto;
	text-align: right;
}

/* --- Adaptations --- */

@media (max-width: 1024px) {
	.jdk-arc__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.jdk-arc__grille {
		grid-template-columns: 1fr;
	}

	.jdk-arc__cadre {
		padding-inline: 18px;
	}

	.jdk-arc__titre {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jdk-arc__carte,
	.jdk-arc__media img,
	.jdk-arc__lien em {
		transition: none;
	}

	.jdk-arc__carte:hover {
		transform: none;
	}

	.jdk-arc__carte:hover .jdk-arc__media img {
		transform: none;
	}
}