/**
 * DMR75 — page « Quand y a-t-il du monde ? »
 */

.dmr-activite-page {
	--act-border: rgba(128, 128, 128, 0.25);
	--act-surface: rgba(128, 128, 128, 0.06);
	--act-0: rgba(128, 128, 128, 0.13);
	--act-1: #cfe3f5;
	--act-2: #8fc0e8;
	--act-3: #4a94d1;
	--act-4: #0f4a7b;

	max-width: 980px;
	margin: 0 auto;
	padding: 24px 0 48px;
}

.dmr-activite-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
}

.dmr-activite-title i {
	opacity: 0.55;
}

.dmr-activite-lead {
	margin: 0 0 26px;
	opacity: 0.8;
	max-width: 62ch;
}

.dmr-activite-loading {
	margin: 0;
	opacity: 0.6;
}

/* Réponse en toutes lettres, avant la grille */
.dmr-activite-best {
	padding: 20px 24px;
	margin-bottom: 24px;
	border: 1px solid var(--act-border);
	border-left: 5px solid var(--act-4);
	border-radius: 10px;
	background: var(--act-surface);
}

.dmr-activite-best h2 {
	margin: 0 0 10px;
	font-size: 17px;
}

.dmr-activite-best ol {
	margin: 0;
	padding-left: 20px;
	font-size: 17px;
	line-height: 1.7;
}

.dmr-activite-best strong {
	font-variant-numeric: tabular-nums;
}

.dmr-activite-card {
	padding: 22px 24px;
	margin-bottom: 24px;
	border: 1px solid var(--act-border);
	border-radius: 10px;
}

.dmr-activite-h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 19px;
}

.dmr-activite-h2 i {
	opacity: 0.5;
	font-size: 16px;
}

/* Grille : une colonne d'étiquettes puis 24 heures. En dessous de sa largeur
   utile on fait défiler, plutôt que d'écraser les carreaux. */
.dmr-activite-scroll {
	overflow-x: auto;
	padding-bottom: 6px;
}

.dmr-activite-grid {
	display: grid;
	grid-template-columns: 42px repeat(24, 1fr);
	gap: 3px;
	min-width: 660px;
}

.dmr-activite-hour,
.dmr-activite-day {
	font-size: 11px;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: center;
}

.dmr-activite-hour {
	justify-content: center;
	padding-bottom: 4px;
}

.dmr-activite-day {
	justify-content: flex-end;
	padding-right: 8px;
	font-weight: 600;
}

.dmr-activite-cell {
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--act-0);
}

.dmr-activite-cell[data-step="1"] { background: var(--act-1); }
.dmr-activite-cell[data-step="2"] { background: var(--act-2); }
.dmr-activite-cell[data-step="3"] { background: var(--act-3); }
.dmr-activite-cell[data-step="4"] { background: var(--act-4); }

.dmr-activite-legend {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 12px;
	opacity: 0.75;
}

.dmr-activite-key {
	width: 15px;
	height: 15px;
	border-radius: 3px;
	background: var(--act-0);
}

.dmr-activite-key[data-step="1"] { background: var(--act-1); }
.dmr-activite-key[data-step="2"] { background: var(--act-2); }
.dmr-activite-key[data-step="3"] { background: var(--act-3); }
.dmr-activite-key[data-step="4"] { background: var(--act-4); }

.dmr-activite-note {
	margin: 14px 0 0;
	font-size: 14px;
	opacity: 0.75;
	max-width: 68ch;
}

.dmr-activite-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.dmr-activite-link i {
	font-size: 12px;
	opacity: 0.7;
}