/* CLC — badge de date commun (2.11.0).
   ============================================================================
   Carrousel et liste d'événements partagent ce badge : jour de la semaine,
   quantième, mois — trois lettres pour les deux libellés (voir
   clc_vignettes_date_badge en PHP). Une seule forme, deux variantes, deux
   tailles ; ce qui reste dans les feuilles des blocs n'est que la mise en
   page (flottant du carrousel, alignement de la liste).

   Forme : le motif « élément d'appel » du design system (coins haut-gauche et
   bas-droit droits, les deux autres arrondis).

   Variantes  .clc-datebadge--noir  : fond noir, jour de la semaine en accent,
                                      quantième et mois en blanc
              .clc-datebadge--jaune : fond accent, tout en noir
   Taille     .clc-datebadge--sm    : version compacte (liste)
*/

.clc-datebadge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 64px;
	padding: 8px 4px;
	border-radius: 0 14px 0 14px;
	text-align: center;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.clc-db-sem,
.clc-db-jr,
.clc-db-mo {
	display: block;
}

.clc-db-sem {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.clc-db-jr {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
}

.clc-db-mo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ── Variantes ───────────────────────────────────────────────────────── */

.clc-datebadge--noir {
	background-color: #111;
	color: #fff;
}

.clc-datebadge--noir .clc-db-sem {
	color: var( --clc-accent, #f5d000 );
}

/* Sur le jaune, jamais de texte blanc : l'encre reste foncée. */
.clc-datebadge--jaune {
	background-color: var( --clc-accent, #f5d000 );
	color: #111;
}

/* ── Compact (liste) ─────────────────────────────────────────────────── */

.clc-datebadge--sm {
	width: 54px;
	padding: 6px 3px;
	border-radius: 0 10px 0 10px;
}

.clc-datebadge--sm .clc-db-sem,
.clc-datebadge--sm .clc-db-mo {
	font-size: 10px;
}

.clc-datebadge--sm .clc-db-jr {
	font-size: 20px;
}

@media ( max-width: 768px ) {
	.clc-datebadge:not( .clc-datebadge--sm ) {
		width: 52px;
	}

	.clc-datebadge:not( .clc-datebadge--sm ) .clc-db-jr {
		font-size: 20px;
	}
}

/* Le libellé complet reste lisible pour les lecteurs d'écran (les trois
   abréviations sont masquées : « MAR 20 OCT » se lirait lettre à lettre). */
.clc-db-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

@media ( forced-colors: active ) {
	.clc-datebadge {
		border: 1px solid;
	}
}