/*
 * blocks/hero-accounts-split.css — hero fond blanc uni + 3 tuiles compte obliques.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.hero-accounts-split { background: #fff; }

.hero-accounts-split__visual {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--s3);
}
.hero-accounts-split__tile {
	position: relative;
	overflow: hidden;
	width: 33%;
	max-width: 160px;
	aspect-ratio: 0.72;
	border-radius: var(--radius-lg);
	padding: var(--s5) var(--s4);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s2);
	color: #fff;
}
.hero-accounts-split__tile-pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: url("../../images/cards/guilloche.svg");
	background-size: 110px 69px;
	background-repeat: repeat;
	mix-blend-mode: soft-light;
	pointer-events: none;
}
.hero-accounts-split__tile > * { position: relative; z-index: 1; }
.hero-accounts-split__tile > .hero-accounts-split__tile-pattern { position: absolute; inset: 0; z-index: 0; }
.hero-accounts-split__tile--1 { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--teal) 130%); transform: translateY(var(--s6)) rotate(-7deg); }
.hero-accounts-split__tile--2 { background: linear-gradient(135deg, #5a4a1f 0%, #8a6d2c 55%, #d5bd78 130%); transform: translateY(calc(-1 * var(--s5))) rotate(0deg); z-index: 2; }
.hero-accounts-split__tile--3 { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--teal) 140%); transform: translateY(var(--s6)) rotate(7deg); }

.hero-accounts-split__tile-icon {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	display: flex; align-items: center; justify-content: center;
}
.hero-accounts-split__tile-icon svg { width: 18px; height: 18px; }
.hero-accounts-split__tile-label { font-size: .82rem; font-weight: 800; margin-top: var(--s3); }
.hero-accounts-split__tile-caption { font-size: .68rem; opacity: .75; margin-top: auto; }
.hero-accounts-split__tile-amount { font-size: .92rem; font-weight: 700; letter-spacing: .02em; }

@media (max-width: 860px) {
	.hero-accounts-split__tile--1, .hero-accounts-split__tile--2, .hero-accounts-split__tile--3 { transform: none; }
}