/* ============================================================
   HOME immersive — « Poème du jour » + rails par thème
   ============================================================ */

/* ---- Boutons de contrôle (réutilisés ailleurs) ---- */
.up-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--up-font-body);
	font-size: var(--up-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.7em 1.5em;
	border: 1px solid var(--up-accent);
	background: var(--up-accent);
	color: var(--up-white);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--up-ease), color var(--up-ease), border-color var(--up-ease);
}
.up-btn:hover { background: var(--up-accent-dark); border-color: var(--up-accent-dark); color: var(--up-white); }
.up-btn--ghost { background: transparent; color: var(--up-ink); border-color: var(--up-line-strong); }
.up-btn--ghost:hover { background: transparent; color: var(--up-accent); border-color: var(--up-accent); }

/* ============================================================
   Poème du jour
   ============================================================ */
.up-daily {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: var(--up-space-16);
	align-items: center;
	padding: var(--up-space-16) 0 var(--up-space-24);
	border-bottom: var(--up-rule);
}
.up-daily__eyebrow {
	font-size: var(--up-fs-xs);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--up-accent);
	margin: 0 0 var(--up-space-6);
	padding-bottom: var(--up-space-4);
	border-bottom: var(--up-hairline);
}
.up-daily__verse {
	font-family: var(--up-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
	line-height: 1.32;
	color: var(--up-ink);
	margin: 0 0 var(--up-space-8);
}
.up-daily__title {
	font-family: var(--up-font-display) !important;
	font-size: var(--up-fs-2xl) !important;
	font-weight: 700;
	line-height: var(--up-lh-snug);
	margin: 0 0 var(--up-space-3);
}
.up-daily__title a { color: var(--up-ink); text-decoration: none; }
.up-daily__title a:hover { color: var(--up-accent); }
.up-daily__meta {
	font-size: var(--up-fs-sm);
	color: var(--up-muted);
	margin: 0 0 var(--up-space-8);
}
.up-daily__meta a { color: var(--up-accent); }
.up-daily__actions { display: flex; align-items: center; gap: var(--up-space-4); flex-wrap: wrap; }

.up-daily__media { display: block; }
.up-daily__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

/* ============================================================
   Rails horizontaux par thème
   ============================================================ */
.up-rail { padding: var(--up-space-12) 0; border-bottom: var(--up-hairline); }
.up-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--up-space-4);
	margin-bottom: var(--up-space-8);
}
.up-rail__title {
	font-family: var(--up-font-display) !important;
	font-size: var(--up-fs-2xl) !important;
	font-weight: 700;
	margin: 0;
}
.up-rail__more {
	font-size: var(--up-fs-sm);
	letter-spacing: 0.04em;
	color: var(--up-accent);
	white-space: nowrap;
	text-decoration: none;
}
.up-rail__more:hover { text-decoration: underline; }

.up-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(248px, 1fr);
	gap: var(--up-space-8);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--up-space-4);
	scrollbar-width: thin;
	scrollbar-color: var(--up-line-strong) transparent;
}
.up-rail__track .entry-card { scroll-snap-align: start; }
.up-rail__track::-webkit-scrollbar { height: 6px; }
.up-rail__track::-webkit-scrollbar-thumb { background: var(--up-line-strong); }

/* ---- Note (favoris vides, etc.) ---- */
.up-note {
	max-width: var(--up-measure);
	color: var(--up-muted);
	font-size: var(--up-fs-lg);
	padding: var(--up-space-8) 0;
}
.up-note a { color: var(--up-accent); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
	.up-daily { grid-template-columns: 1fr; gap: var(--up-space-8); padding: var(--up-space-12) 0; }
	.up-daily__media { order: -1; }
	.up-daily__media img { aspect-ratio: 16 / 10; }
}