/*!
 * POC — Chiffres clés
 * Version: 1.0.0
 * Thème cible : Modins (Gavias).
 *
 * Règles tenues : racine confinée, min-width: 0 sur tous les
 * descendants, aucune unité vw, aucune marge négative.
 */

/* =====================================================================
   1. VARIABLES
   ===================================================================== */
.poc-ch {
	--poc-ch-or: #a21a18;
	--poc-ch-or-clair: #f38c8b;
	--poc-ch-encre: #4e4e4c;
	--poc-ch-gris: #76766f;
	--poc-ch-creme: #fbf3f3;
	--poc-ch-filet: #f6e1e1;
	--poc-ch-blanc: #ffffff;
	--poc-ch-sombre: #ffffff;

	--poc-ch-nombre: #4e4e4c;
	--poc-ch-affixe: #a21a18;

	--poc-ch-cols: 4;
	--poc-ch-gap: 18px;
	--poc-ch-pad: 24px;
	--poc-ch-radius: 16px;
	--poc-ch-ico: 22px;
	--poc-ch-pastille: 2.3;
	--poc-ch-align: center;

	--poc-ch-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. GARDES — thème Modins
   ===================================================================== */
.poc-ch,
.poc-ch * {
	box-sizing: border-box;
	min-width: 0;
}

.poc-ch [hidden] {
	display: none !important;
}

.poc-ch :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
}

.poc-ch .poc-ch__valeur,
.poc-ch .poc-ch__libelle,
.poc-ch .poc-ch__note {
	text-transform: none;
}

.poc-ch svg {
	height: auto;
	vertical-align: middle;
}

/* =====================================================================
   3. RACINE
   ===================================================================== */
.poc-ch {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--poc-ch-encre);
}

.poc-ch .poc-ch__liste {
	display: grid;
	grid-template-columns: repeat(var(--poc-ch-cols), minmax(0, 1fr));
	gap: var(--poc-ch-gap);
	min-width: 0;
}

.poc-ch--egal .poc-ch__liste {
	grid-auto-rows: 1fr;
}

.poc-ch .poc-ch__item {
	display: flex;
	flex-direction: column;
	align-items: var(--poc-ch-align, center);
	justify-content: center;
	min-width: 0;
	max-width: 100%;
	padding: var(--poc-ch-pad);
	border: 1.5px solid transparent;
	border-radius: var(--poc-ch-radius);
	background: var(--poc-ch-creme);
	text-align: var(--poc-ch-align);
	transition: transform 260ms var(--poc-ch-ease),
		box-shadow 260ms var(--poc-ch-ease),
		background 260ms var(--poc-ch-ease),
		border-color 260ms var(--poc-ch-ease);
}

.poc-ch--souleve .poc-ch__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -26px rgba(78, 78, 76, 0.5);
}

.poc-ch .poc-ch__corps {
	min-width: 0;
	max-width: 100%;
}

/* =====================================================================
   4. ICÔNE
   ===================================================================== */
.poc-ch .poc-ch__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(1em * var(--poc-ch-pastille));
	height: calc(1em * var(--poc-ch-pastille));
	flex: 0 0 auto;
	margin-bottom: 14px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-ch-or-clair), var(--poc-ch-or));
	color: var(--poc-ch-encre);
	font-size: var(--poc-ch-ico);
	transition: transform 260ms var(--poc-ch-ease);
}

.poc-ch .poc-ch__ico i,
.poc-ch .poc-ch__ico i::before,
.poc-ch .poc-ch__ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

/* Le glyphe est réduit dans sa pastille : c'est ce qui crée la marge,
   quelle que soit l'icône choisie. */
.poc-ch .poc-ch__ico i,
.poc-ch .poc-ch__ico svg {
	font-size: 0.8em;
}

.poc-ch .poc-ch__ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-ch .poc-ch__item:hover .poc-ch__ico {
	transform: scale(1.07);
}

.poc-ch--i-arrondie .poc-ch__ico {
	border-radius: 16px;
}

.poc-ch--i-nue .poc-ch__ico {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--poc-ch-or);
}

/* =====================================================================
   5. LE NOMBRE
   ===================================================================== */
.poc-ch .poc-ch__valeur {
	display: flex;
	align-items: baseline;
	justify-content: var(--poc-ch-align, center);
	flex-wrap: wrap;
	min-width: 0;
	color: var(--poc-ch-nombre);
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	/* Les chiffres gardent la même largeur pendant la montée : le nombre
	   ne tressaute pas en passant de 9 à 10. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.poc-ch .poc-ch__nombre {
	overflow-wrap: break-word;
}

.poc-ch .poc-ch__affixe {
	color: var(--poc-ch-affixe);
	font-size: 0.62em;
	font-weight: 800;
	white-space: pre;
}

.poc-ch .poc-ch__libelle {
	margin-top: 8px;
	color: var(--poc-ch-encre);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.poc-ch .poc-ch__note {
	margin-top: 4px;
	color: var(--poc-ch-gris);
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* =====================================================================
   6. LES QUATRE DISPOSITIONS
   ===================================================================== */

/* --- Une rangée séparée par des filets --- */
.poc-ch--ligne .poc-ch__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}

.poc-ch--ligne .poc-ch__item {
	flex: 1 1 190px;
	background: none;
	border-color: transparent;
	border-radius: 0;
	padding-left: calc(var(--poc-ch-gap) * 1.4);
	padding-right: calc(var(--poc-ch-gap) * 1.4);
}

.poc-ch--ligne .poc-ch__item + .poc-ch__item {
	border-left: 1px solid var(--poc-ch-filet);
}

.poc-ch--ligne.poc-ch--souleve .poc-ch__item:hover {
	transform: none;
	box-shadow: none;
}

/* --- Icône à gauche du chiffre --- */
.poc-ch--cote .poc-ch__item {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.poc-ch--cote .poc-ch__ico {
	margin-bottom: 0;
	margin-right: 16px !important;
}

.poc-ch--cote .poc-ch__valeur {
	justify-content: flex-start;
}

/* --- Bandeau plein, sur une seule carte --- */
.poc-ch--bandeau {
	padding: calc(var(--poc-ch-pad) * 1.1);
	border-radius: calc(var(--poc-ch-radius) + 6px);
	background: linear-gradient(160deg, #4b4b47, #30302d);
}

.poc-ch--bandeau .poc-ch__item {
	background: none;
	border-color: transparent;
	padding: calc(var(--poc-ch-pad) * 0.6);
}

.poc-ch--bandeau .poc-ch__item + .poc-ch__item {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
}

/*
 * Couleurs posées EXPLICITEMENT : Modins colore ses textes, et une
 * couleur déclarée l'emporte toujours sur une couleur héritée.
 */
.poc-ch--bandeau .poc-ch__valeur,
.poc-ch--bandeau .poc-ch__libelle {
	color: var(--poc-ch-sombre);
}

.poc-ch--bandeau .poc-ch__affixe {
	color: var(--poc-ch-or-clair);
}

.poc-ch--bandeau .poc-ch__note {
	color: rgba(255, 255, 255, 0.6);
}

.poc-ch--bandeau .poc-ch__ico {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-ch-or-clair);
}

.poc-ch--bandeau.poc-ch--i-nue .poc-ch__ico {
	background: none;
	color: var(--poc-ch-or-clair);
}

.poc-ch--bandeau.poc-ch--souleve .poc-ch__item:hover {
	transform: none;
	box-shadow: none;
}

/* =====================================================================
   7. LES HUIT DESIGNS
   ===================================================================== */
.poc-ch--d-blanc .poc-ch__item {
	background: var(--poc-ch-blanc);
	border-color: var(--poc-ch-filet);
}

.poc-ch--d-blanc .poc-ch__item:hover {
	border-color: var(--poc-ch-or);
}

.poc-ch--d-ardoise .poc-ch__item {
	background: linear-gradient(160deg, #4b4b47, #30302d);
}

.poc-ch--d-ardoise .poc-ch__valeur,
.poc-ch--d-ardoise .poc-ch__libelle {
	color: var(--poc-ch-sombre);
}

.poc-ch--d-ardoise .poc-ch__affixe {
	color: var(--poc-ch-or-clair);
}

.poc-ch--d-ardoise .poc-ch__note {
	color: rgba(255, 255, 255, 0.6);
}

.poc-ch--d-ardoise .poc-ch__ico {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-ch-or-clair);
}

.poc-ch--d-or .poc-ch__item {
	background: linear-gradient(135deg, var(--poc-ch-or-clair), var(--poc-ch-or));
}

.poc-ch--d-or .poc-ch__valeur,
.poc-ch--d-or .poc-ch__libelle,
.poc-ch--d-or .poc-ch__affixe {
	color: var(--poc-ch-encre);
}

.poc-ch--d-or .poc-ch__note {
	color: rgba(78, 78, 76, 0.66);
}

.poc-ch--d-or .poc-ch__ico {
	background: rgba(255, 255, 255, 0.42);
	color: var(--poc-ch-encre);
}

.poc-ch--d-contour .poc-ch__item {
	background: transparent;
	border-color: var(--poc-ch-or);
}

.poc-ch--d-medaillon .poc-ch__item {
	background: var(--poc-ch-blanc);
	border-color: var(--poc-ch-filet);
}

.poc-ch--d-medaillon .poc-ch__ico {
	width: calc(1em * var(--poc-ch-pastille) * 1.2);
	height: calc(1em * var(--poc-ch-pastille) * 1.2);
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

.poc-ch--d-lisere .poc-ch__item {
	position: relative;
	background: var(--poc-ch-blanc);
	border-color: var(--poc-ch-filet);
	overflow: hidden;
}

.poc-ch--d-lisere .poc-ch__item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--poc-ch-or-clair), var(--poc-ch-or), var(--poc-ch-or-clair));
}

.poc-ch--d-nu .poc-ch__item {
	background: none;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.poc-ch--d-nu.poc-ch--souleve .poc-ch__item:hover {
	transform: none;
	box-shadow: none;
}

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.poc-ch {
		--poc-ch-cols: 2;
	}

	/* Les filets verticaux n'ont plus de sens sur deux rangées. */
	.poc-ch--ligne .poc-ch__item {
		flex: 1 1 46%;
	}
}

@media (max-width: 767px) {
	.poc-ch {
		--poc-ch-pad: 16px;
		--poc-ch-ico: 18px;
	}

	.poc-ch .poc-ch__libelle {
		font-size: 13.5px;
	}

	.poc-ch--ligne .poc-ch__item {
		flex: 1 1 100%;
	}

	/* En pile, le filet passe au-dessus plutôt qu'à gauche. */
	.poc-ch--ligne .poc-ch__item + .poc-ch__item,
	.poc-ch--bandeau .poc-ch__item + .poc-ch__item {
		border-left: 0;
		border-top: 1px solid var(--poc-ch-filet);
	}

	.poc-ch--bandeau .poc-ch__item + .poc-ch__item {
		border-top-color: rgba(255, 255, 255, 0.14);
	}

	.poc-ch--cote .poc-ch__ico {
		margin-right: 12px !important;
	}
}

@media (max-width: 480px) {
	.poc-ch {
		--poc-ch-cols: 1;
	}
}

/* =====================================================================
   9. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-ch *,
	.poc-ch *::before,
	.poc-ch *::after {
		transition-duration: 0.001ms !important;
	}

	.poc-ch .poc-ch__item,
	.poc-ch .poc-ch__ico {
		transform: none !important;
	}
}