/* CPTS Centre-Hérault — Bandeau animé « bulles » [cpts_bubbles]
 * Hauteur fixe + overflow hidden : le SVG couvre et les bulles sont croppées.
 */

.cptsb {
	position: relative;
	width: 100%;
	height: var(--cptsb-h, 280px);
	overflow: hidden;
	background: var(--cptsb-bg, #ffffff);
	line-height: 0;
}
.cptsb__stage { position: absolute; inset: 0; }

/* preserveAspectRatio="xMidYMid slice" sur le SVG => rendu « cover » */
.cptsb svg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
}
.cptsb path { will-change: transform; }

/* ---- Slogan + CTA centrés par-dessus les bulles ------------------------- */
.cptsb__content {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 20px; padding: 20px; text-align: center;
	line-height: normal;
	pointer-events: none;   /* laisse le survol aux bulles / au reste */
}
.cptsb__slogan {
	margin: 0; padding-bottom: 15px; color: #ffffff; max-width: 42ch;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 500; font-size: clamp(20px, 2.5vw, 32px); line-height: 1.15;
	text-shadow: 0 2px 16px rgba(35, 65, 85, .28);
}
.cptsb__subtitle {
	margin: -20px 0 0; color: #ffffff; max-width: 64ch;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 400; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.4;
	text-shadow: 0 1px 10px rgba(35, 65, 85, .26);
	opacity: .96;
}
.cptsb__cta {
	pointer-events: auto;    /* le bouton reste cliquable */
	display: inline-flex; align-items: center; gap: 8px;
	background: #ffffff; color: #234155;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700; font-size: 15px; text-decoration: none;
	padding: 12px 26px; border-radius: 999px;
	box-shadow: 0 8px 22px rgba(35, 65, 85, .20);
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cptsb__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(35, 65, 85, .28);
	background: #234155; color: #ffffff;
}