/* ==========================================================================
 * Sicléo — mise en valeur de la bande de statistiques (page d'accueil)
 *
 * Les classes .sc-stats* sont posées par assets/stats.js. Tant que ce script
 * n'a pas trouvé la bande, la classe .sc-stats-ok est absente et RIEN ici ne
 * s'applique : la page garde exactement son apparence actuelle.
 *
 * Le `!important` est systématique et voulu : Elementor génère pour chaque
 * élément une règle très spécifique (couleur, taille de police, fond, marge)
 * à partir des réglages du gabarit, et le thème du client peut en rajouter.
 * Sans `!important`, ce fichier serait ignoré (même leçon qu'en v1.0.5).
 * ========================================================================== */

/* ── La bande : le fond « papier » laisse place au blanc de la section
      suivante, la carte foncée se suffit à elle-même. ───────────────────── */
.sc-stats-ok .sc-stats-band {
	background-color: transparent !important;
	background-image: none !important;
	padding-top: 0 !important;
	padding-bottom: 72px !important;
	position: relative !important;
	z-index: 2 !important;
}

/* ── La carte : bleu nuit, remonte SUR le héros pour créer la liaison
      visuelle entre la photo et le contenu. C'est ça qui la sort de la
      page au lieu de la laisser passer pour un pied de section. ─────────── */
.sc-stats-ok .sc-stats-card {
	position: relative !important;
	overflow: hidden !important;
	/* La section est en pleine largeur : sans max-width la « carte » file
	   d'un bord à l'autre de l'écran et ses coins arrondis sortent du cadre —
	   c'est ce qui la faisait lire comme une simple bande blanche. */
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: -64px !important;
	padding: 46px 26px 42px !important;
	border-radius: 20px !important;
	background-color: #07304f !important;
	background-image: linear-gradient(135deg, #07304f 0%, #0d4670 52%, #07304f 100%) !important;
	box-shadow: 0 28px 74px -20px rgba(7, 48, 79, .62) !important;
}

/* Filet dégradé teal → doré sur l'arête haute : même signature visuelle que
   la barre de couleur des cartes « À propos ». */
.sc-stats-ok .sc-stats-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #128d80 0%, #e2a93b 50%, #128d80 100%);
}

/* Halo très discret, pour que l'aplat bleu ne soit pas parfaitement plat. */
.sc-stats-ok .sc-stats-card::after {
	content: "";
	position: absolute;
	top: -55%;
	left: 50%;
	width: 70%;
	height: 160%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}

.sc-stats-ok .sc-stats-row {
	position: relative;
	z-index: 1;
}

/* ── Chaque statistique ─────────────────────────────────────────────────── */
.sc-stats-ok .sc-stat {
	position: relative !important;
	padding: 4px 10px !important;
}

/* Séparateurs verticaux : un dégradé qui s'efface aux extrémités, plus fin
   qu'un trait plein. */
.sc-stats-ok .sc-stat + .sc-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14%;
	bottom: 14%;
	width: 1px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(226, 169, 59, .45) 50%, rgba(255, 255, 255, 0) 100%);
}

/* ── Le chiffre : c'est lui la vedette. ─────────────────────────────────── */
.sc-stats-ok .sc-stat-num {
	margin: 0 0 10px !important;
	color: #ffffff !important;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
	font-weight: 600 !important;
	font-size: 58px !important;
	line-height: 1 !important;
	letter-spacing: -.01em !important;
	text-align: center !important;
	white-space: nowrap !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .22) !important;
	font-variant-numeric: tabular-nums;
}

/* Le « ~ » et le « + » : dorés et plus petits, ils accompagnent le chiffre
   sans lui voler la vedette. */
.sc-stats-ok .sc-stat-sym {
	color: #e2a93b !important;
	font-size: .58em !important;
	font-weight: 500 !important;
	vertical-align: .12em !important;
	margin: 0 .04em !important;
}

/* ── L'étiquette ────────────────────────────────────────────────────────── */
/* Réserve la hauteur de 2 lignes : « médecins par année » passe à la ligne,
   pas les trois autres — sans ça les séparateurs et la zone de survol sont
   décalés d'une statistique à l'autre. */
.sc-stats-ok .sc-stat-lab {
	min-height: 2.9em !important;
}

.sc-stats-ok .sc-stat-lab,
.sc-stats-ok .sc-stat-lab p {
	margin: 0 !important;
	color: rgba(255, 255, 255, .74) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

/* ── Survol : très léger, juste assez pour que la bande se sente vivante
      sans devenir un bouton. ──────────────────────────────────────────── */
.sc-stats-ok .sc-stat {
	transition: transform .28s ease !important;
}
.sc-stats-ok .sc-stat:hover {
	transform: translateY(-4px) !important;
}

@media (prefers-reduced-motion: reduce) {
	.sc-stats-ok .sc-stat,
	.sc-stats-ok .sc-stat:hover {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sc-stats-ok .sc-stat-num { font-size: 46px !important; }
	.sc-stats-ok .sc-stats-card { margin-top: -48px !important; }
}

/* ── Mobile : 2 statistiques par rangée (4 empilées = une colonne
      interminable), séparateurs redessinés en conséquence. ──────────────── */
@media (max-width: 767px) {
	.sc-stats-ok .sc-stats-row {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	.sc-stats-ok .sc-stat {
		width: 50% !important;
		padding: 18px 8px !important;
	}
	.sc-stats-ok .sc-stat-num { font-size: 38px !important; }
	.sc-stats-ok .sc-stat-lab,
	.sc-stats-ok .sc-stat-lab p { font-size: 10px !important; letter-spacing: .1em !important; }

	.sc-stats-ok .sc-stats-card {
		margin-top: -40px !important;
		padding: 26px 10px 22px !important;
		border-radius: 16px !important;
	}

	/* Le séparateur ne doit apparaître qu'entre les 2 colonnes d'une rangée,
	   pas au début d'une nouvelle rangée. */
	.sc-stats-ok .sc-stat + .sc-stat::before { display: none; }
	.sc-stats-ok .sc-stat:nth-child(even)::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 18%;
		bottom: 18%;
		width: 1px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(226, 169, 59, .45) 50%, rgba(255, 255, 255, 0) 100%);
	}
	/* Filet horizontal entre les deux rangées. */
	.sc-stats-ok .sc-stat:nth-child(n+3)::after {
		content: "";
		position: absolute;
		left: 12%;
		right: 12%;
		top: 0;
		height: 1px;
		background: rgba(255, 255, 255, .12);
	}
}