/**
 * Blog : header « Articles et Conseils pratiques ».
 *
 * La mise en page se règle dans Avada (gabarit « Archives », conteneur
 * « Header Blog ») : couleurs, colonnes, textes, bouton, photo et icône
 * (élément Image, à remplacer par l'autre SVG de la médiathèque).
 * Ce fichier ne fait que ce qu'Avada ne propose pas : la coupe en biais de la
 * photo, le grand cercle clair derrière elle et la longueur du filet du
 * surtitre.
 */

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Grand cercle clair : il monte du bas du bandeau et passe derrière la photo. */
.sdlc-blog-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	left: 52%;
	width: 97vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(200deg, var(--sdlc-blog-hero-circle) 30%, var(--sdlc-blog-hero-circle-edge) 70%);
	pointer-events: none;
}

/* Photo coupée en biais, comme une page qu'on tourne. */
.sdlc-blog-hero__photo {
	clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
}

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

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

.sdlc-blog-hero__icon img {
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.sdlc-blog-hero::before {
		top: -20%;
		left: 50%;
		width: 110vw;
	}
}

/* Mobile : la photo passe en haut, coupée en biais par le bas. */
@media (max-width: 640px) {
	.sdlc-blog-hero::before {
		display: none;
	}

	/* Avada donne à la colonne la hauteur de la photo (image fantôme) : on la
	 * ramène à 300 px au plus. */
	.sdlc-blog-hero__photo {
		height: min(76vw, 300px);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 84%);
	}

	.sdlc-blog-hero__photo .fusion-empty-dims-img-placeholder {
		display: none !important;
	}
}