/* ==========================================================================
   Derniers articles & brèves — Radio Anar (accueil)
   Fichier autonome, namespacé sous #ra-latest (même stratégie que plan.css) :
   la page d'accueil charge beaucoup de blocs différents, donc on limite le
   risque de collision avec le reste du CSS du site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Piazzolla:ital,wght@0,400;0,600;1,400&family=Space+Mono:wght@400;700&display=swap');

.rp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

#ra-latest {
	--ral-paper: #ede6d6;
	--ral-paper-raised: #e3dac4;
	--ral-ink: #191712;
	--ral-muted: #5b5648;
	--ral-accent: #e8432c;
	--ral-line: rgba(25, 23, 18, 0.16);

	--ral-font-display: "Archivo Black", "Arial Black", sans-serif;
	--ral-font-body: "Piazzolla", Georgia, "Iowan Old Style", serif;
	--ral-font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	background: var(--ral-paper);
	color: var(--ral-ink);
	padding: 48px 0;
}

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

#ra-latest .ra-latest-head {
	all: revert;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0 0 8px;
}

#ra-latest .ra-latest-title {
	all: revert;
	display: block;
	margin: 0;
	font-family: var(--ral-font-display);
	font-weight: 400;
	font-size: clamp(24px, 3.5vw, 32px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ral-ink);
}

#ra-latest .ra-latest-all {
	all: revert;
	display: inline-block;
	font-family: var(--ral-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ral-accent);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

#ra-latest .ra-latest-all:hover,
#ra-latest .ra-latest-all:focus-visible {
	border-bottom-color: var(--ral-accent);
}

#ra-latest .ra-latest-all:focus-visible {
	outline: 2px solid var(--ral-accent);
	outline-offset: 2px;
}

/* Cadran de fréquence sous l'en-tête */
#ra-latest .ra-latest-head::after {
	content: "";
	display: block;
	width: 100%;
	height: 6px;
	margin-top: 6px;
	background-image: repeating-linear-gradient(
		90deg,
		var(--ral-ink) 0,
		var(--ral-ink) 2px,
		transparent 2px,
		transparent 10px
	);
	opacity: 0.3;
}

/* ---- Grille : colonne Articles / colonne Brèves --------------------------- */

#ra-latest .ra-latest-grid {
	all: revert;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 36px;
	margin-top: 32px;
}

#ra-latest .ra-latest-col {
	all: revert;
	display: block;
	min-width: 0;
}

#ra-latest .ra-latest-col-title {
	all: revert;
	display: block;
	margin: 0 0 16px;
	font-family: var(--ral-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ral-muted);
}

#ra-latest .ra-latest-list {
	all: revert;
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

#ra-latest .ra-latest-item {
	all: revert;
	display: block;
	margin: 0 0 14px;
	padding: 0;
}

#ra-latest .ra-latest-item:last-child {
	margin-bottom: 0;
}

#ra-latest .ra-latest-card {
	all: revert;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px;
	color: inherit;
	text-decoration: none;
	background: var(--ral-paper-raised);
	border: 2px solid var(--ral-ink);
	border-radius: 2px;
	box-shadow: 3px 3px 0 var(--ral-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#ra-latest .ra-latest-card--breve {
	background: var(--ral-paper);
}

#ra-latest .ra-latest-card:hover,
#ra-latest .ra-latest-card:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ral-ink);
}

#ra-latest .ra-latest-card:focus-visible {
	outline: 2px solid var(--ral-accent);
	outline-offset: 2px;
}

#ra-latest .ra-latest-card-img {
	all: revert;
	display: block;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--ral-line);
}

#ra-latest .ra-latest-card-img img {
	all: revert;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ra-latest .ra-latest-card-body {
	all: revert;
	display: block;
	min-width: 0;
}

#ra-latest .ra-latest-card-date {
	all: revert;
	display: block;
	font-family: var(--ral-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ral-accent);
	margin: 0 0 4px;
}

#ra-latest .ra-latest-card-title {
	all: revert;
	display: block;
	font-family: var(--ral-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ral-ink);
}

#ra-latest .ra-latest-card-desc {
	all: revert;
	display: block;
	margin: 4px 0 0;
	font-family: var(--ral-font-body);
	font-size: 13px;
	line-height: 1.45;
	color: var(--ral-muted);
}

#ra-latest .ra-latest-empty {
	all: revert;
	display: block;
	font-family: var(--ral-font-body);
	font-style: italic;
	color: var(--ral-muted);
	padding: 12px 0;
}

/* ==========================================================================
   ACCESSIBILITÉ / MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#ra-latest .ra-latest-card {
		transition: none;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 560px) {
	#ra-latest {
		padding: 36px 0;
	}

	#ra-latest .ra-latest-card-img {
		width: 52px;
		height: 52px;
	}

	#ra-latest .ra-latest-card-title {
		font-size: 14px;
	}
}