/*
 * Shortcode [calendrier_reservations] — calendrier front (N prochains mois), lecture seule.
 *
 * Le rouge « réservé » = point de réglage unique `--tris-brand-red` (cf. OVERRIDES.md),
 * repli littéral `#c0392b`. Le reste consomme les tokens `--component-*` du thème enfant.
 */

.tris-resa-cal {
	--tris-resa-cal-red: var(--tris-brand-red, #c0392b);
	max-width: var(--component-max-width, 1200px);
	margin: 0 auto;
	font-family: var(--component-font-family, inherit);
	color: var(--component-color-text, #333);
}

.tris-resa-cal__title {
	margin: 0 0 12px;
	text-transform: none;
	color: var(--component-color-dark, #1a1a1a);
}

.tris-resa-cal__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--component-color-text, #555);
}

.tris-resa-cal__legend-swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: var(--tris-resa-cal-red);
}

.tris-resa-cal__months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 24px;
}

.tris-resa-cal__month {
	border: 1px solid var(--component-color-border, #e0e0e0);
	border-radius: var(--component-radius, 6px);
	overflow: hidden;
	background: #fff;
}

.tris-resa-cal__caption {
	padding: 11px 8px;
	background: var(--component-color-dark, #1a1a1a);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.09em;
	text-align: center;
}

.tris-resa-cal__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.tris-resa-cal__dow {
	padding: 8px 0;
	background: #fafafa;
	font-size: 12px;
	font-weight: 600;
	color: var(--component-color-meta, #8a8a8a);
	text-align: center;
}

.tris-resa-cal__cell {
	height: 34px;
	text-align: center;
	vertical-align: middle;
}

.tris-resa-cal__cell--empty {
	background: #ededed;
}

.tris-resa-cal__day {
	background: #fff;
	color: var(--component-color-dark, #222);
}

.tris-resa-cal__day.is-past {
	color: #c2c2c2;
}

.tris-resa-cal__day.is-today {
	outline: 2px solid var(--component-color-primary, #1e73be);
	outline-offset: -2px;
	font-weight: 700;
}

.tris-resa-cal__day.is-reserved {
	background: var(--tris-resa-cal-red);
	color: #fff;
	font-weight: 700;
	text-decoration: line-through;
}

@media (max-width: 520px) {
	.tris-resa-cal__months {
		grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
		gap: 14px;
	}

	.tris-resa-cal__table {
		font-size: 13px;
	}
}