/**
 * Bandeaux des pages (accueil, Le cabinet, Services) : sections Avada de
 * classe « sdlc-hero ». Textes, couleurs, fond, photo, cadrage et boutons se
 * règlent dans Avada. Ce fichier ne fait que ce qu'Avada ne propose pas : la
 * coupe en biais de la photo, le cercle clair derrière elle, le filet court du
 * surtitre, les étoiles des repères et la hauteur de la photo sur mobile.
 */

.sdlc-hero {
	--sdlc-hero-circle: color-mix(in srgb, var(--awb-color5, #4079b0) 24%, white);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--awb-color5, #4079b0) 18%, white);
}

/* Grand cercle clair derrière la photo, comme sur le bandeau du blog. */
.sdlc-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 22%;
	left: 44%;
	width: min(66vw, 1040px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sdlc-hero-circle);
	pointer-events: none;
}

.sdlc-hero--page::before {
	top: -60%;
	left: 40%;
	width: 34vw;
}

/* Photo coupée en biais. */
.sdlc-hero__photo {
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* Surtitre : Avada trace le filet sur toute la largeur, on le garde court. */
.sdlc-hero__kicker .title-sep-container {
	flex: 0 0 36px;
	max-width: 36px;
}

.sdlc-hero__kicker .title-sep {
	border-top-width: 2px !important;
}

/* Repères : note Google et Doctolib sur une ligne. */
.sdlc-hero__proofs p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
}

.sdlc-hero__proof {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sdlc-hero__stars {
	color: #f4b63d;
	letter-spacing: 1px;
}

/* Tablette et mobile : photo en haut, coupée en biais par le bas. */
@media (max-width: 1024px) {
	.sdlc-hero::before {
		display: none;
	}

	.sdlc-hero__photo {
		height: clamp(200px, 40vw, 380px);
		clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
	}

	.sdlc-hero--page .sdlc-hero__photo {
		height: clamp(180px, 34vw, 300px);
	}

	/* Avada donne à la colonne la hauteur de la photo (image fantôme). */
	.sdlc-hero__photo .fusion-empty-dims-img-placeholder {
		display: none !important;
	}
}