/**
 * ss4y/hero — bannière d'ouverture.
 *
 * Variante « panel » : panneau pétrole à gauche (bord biseauté) posé au-dessus
 * d'une photo pleine hauteur à droite, sur laquelle flottent des cartes de
 * réassurance. Variante « text » : même contenu, centré, sans photo.
 */

/*
 * Reset local : le thème n'a pas de box-sizing global, et le panneau combine
 * une largeur en % et du padding. Sans ça il déborde de sa colonne.
 */
.ss4y-hero,
.ss4y-hero *,
.ss4y-hero *::before,
.ss4y-hero *::after {
	box-sizing: border-box;
}

.ss4y-hero {
	--ss4y-hero-min-height: 80vh;
	--ss4y-hero-panel: 49%;
	--ss4y-hero-slant: 16px;

	/* Part de la photo qui passe sous le panneau, révélée par le biseau. */
	--ss4y-hero-bleed: 4%;

	/*
	 * Gouttière du site : le texte s'aligne sur la colonne, pas sur l'écran.
	 * Mesurée en `cqw`, c'est-à-dire sur la largeur du hero lui-même, et non en
	 * `vw` : la barre du header est centrée dans cette même largeur, alors que
	 * `100vw` inclut la barre de défilement et décalerait le texte vers la
	 * gauche. Les unités de conteneur se résolvent chez les descendants, donc
	 * la variable n'est calculée qu'au moment où le panneau s'en sert.
	 */
	--ss4y-hero-wide: var(--wp--style--global--wide-size, 1400px);
	--ss4y-hero-gutter: calc((100cqw - var(--ss4y-hero-wide)) / 2);
	--ss4y-hero-pad: var(--wp--custom--section--padding-inline);
	--ss4y-hero-inset: max(var(--ss4y-hero-pad), var(--ss4y-hero-gutter));
	--ss4y-hero-pad-block: var(--wp--preset--spacing--section);
	--ss4y-hero-bar: var(--wp--custom--header--height);

	position: relative;
	overflow: hidden;

	/* Référence des `cqw` ci-dessus. Le hero est déjà `position: relative` et
	   `overflow: hidden` : le confinement induit ne change rien à la photo ni
	   aux cartes, qui se positionnaient déjà sur lui. */
	container-type: inline-size;

	min-height: var(--ss4y-hero-min-height);
	display: flex;
	align-items: stretch;
	background: var(--wp--preset--color--text);
}

/* ─── Panneau pétrole ────────────────────────────────────────────────────── */
.ss4y-hero__panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: var(--ss4y-hero-panel);

	/* Sinon un grand padding pousse l'élément flex au-delà de sa largeur. */
	min-width: 0;

	padding-block: var(--wp--preset--spacing--section);
	padding-inline-end: var(--ss4y-hero-pad);

	/*
	 * Retrait identique au bord gauche de la barre du header, pour que le badge,
	 * le titre et les boutons partent de la même verticale que le menu.
	 * Aucun plafond : le plafond de 20 % qui protégeait l'éditeur cassait cet
	 * alignement sur grand écran. La mesure en `cqw` suffit désormais, le
	 * canevas de l'éditeur étant lui-même le conteneur de référence.
	 */
	padding-inline-start: var(--ss4y-hero-inset);
	background: var(--wp--preset--gradient--primary-diagonal);

	/* Le bord droit fuit légèrement vers l'intérieur et laisse voir la photo. */
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--ss4y-hero-slant)) 100%, 0 100%);
}

.ss4y-hero__content {
	width: 100%;
	max-width: 34rem;
	padding-inline-end: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--white);
}

/* ─── Badge ──────────────────────────────────────────────────────────────── */
.ss4y-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 0.4rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: var(--wp--custom--radius--pill);
	background: rgb(16 48 58 / 45%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.ss4y-hero__badge-dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* ─── Titre & accroche ───────────────────────────────────────────────────── */
.ss4y-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);

	/* Plus grand que le preset title-xl : seul le hero atteint cette taille. */
	font-size: clamp(2.25rem, 4.4vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--white);
}

/* <mark> est surligné par défaut : on ne garde que la couleur. */
.ss4y-hero__accent {
	background: none;
	color: var(--wp--preset--color--accent);
}

.ss4y-hero__subtitle {
	margin: var(--wp--preset--spacing--md) 0 0;
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	color: rgb(255 255 255 / 78%);
}

/* ─── Boutons ────────────────────────────────────────────────────────────── */
.ss4y-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--lg);
}

.ss4y-hero__btn {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition),
		color var(--wp--custom--transition),
		border-color var(--wp--custom--transition);
}

.ss4y-hero__btn--primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
}

.ss4y-hero__btn--primary:hover,
.ss4y-hero__btn--primary:focus-visible {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--text);
}

.ss4y-hero__btn--secondary {
	border-color: rgb(255 255 255 / 45%);
	color: var(--wp--preset--color--white);
}

.ss4y-hero__btn--secondary:hover,
.ss4y-hero__btn--secondary:focus-visible {
	border-color: var(--wp--preset--color--white);
	background: rgb(255 255 255 / 12%);
	color: var(--wp--preset--color--white);
}

/* ─── Avis Trustindex ────────────────────────────────────────────────────── */

/*
 * Le widget arrive avec sa propre feuille de style, prévue pour un fond clair :
 * posé tel quel sur le panneau pétrole, son texte gris passerait inaperçu. On
 * lui rend donc un fond clair, en carte, plutôt que d'aller réécrire des
 * sélecteurs qui appartiennent à l'extension et changeront sans prévenir.
 */
.ss4y-hero__reviews {
	max-width: 26rem;
	margin-block-start: var(--wp--preset--spacing--md);
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--text);
}

/* Les widgets Trustindex sont larges par défaut : on les borne à la carte. */
.ss4y-hero__reviews > * {
	max-width: 100%;
}

/* ─── Photo ──────────────────────────────────────────────────────────────── */
.ss4y-hero__media {
	position: absolute;
	inset-block: 0;

	/* Démarre avant le bord du panneau : le biseau révèle la photo. */
	inset-inline: calc(var(--ss4y-hero-panel) - var(--ss4y-hero-bleed)) 0;
}

.ss4y-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Pastille promo ─────────────────────────────────────────────────────── */

/*
 * Forme seule : le placement dépend de la variante, et le macaron n'est même
 * pas rendu au même endroit du balisage selon les cas — dans le contenu en
 * variante texte, à la racine de la section en variante panneau.
 */
.ss4y-hero__promo {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(6.5rem, 11cqw, 9rem);
	aspect-ratio: 1;
	margin: 0;
	padding: 0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--lg);
	transform: rotate(-8deg);
	font-size: clamp(0.8rem, 1.5cqw, 1rem);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
	color: var(--wp--preset--color--text);
}

/*
 * Variante panneau : juste après le bord droit du panneau, donc à l'entame de
 * la partie visible de la photo, et au-dessus des cartes, qui ne commencent
 * qu'à 36 % de hauteur. Pas de `z-index` : le macaron reste derrière le
 * panneau, qui le rognerait proprement plutôt que de le laisser recouvrir le
 * titre sur un écran étroit.
 */
.ss4y-hero--panel .ss4y-hero__promo {
	inset-block-start: calc(var(--ss4y-hero-bar) + 1rem);
	inset-inline-start: calc(var(--ss4y-hero-panel) + 1.5rem);
}

/* ─── Cartes flottantes ──────────────────────────────────────────────────── */

/*
 * Les cartes se posent sur la partie *visible* de la photo : le panneau est
 * opaque et masquerait tout ce qui déborde à gauche.
 *
 * La zone est bornée en largeur : sans plafond, sur un écran très large elle
 * suit le bord de la photo et la carte de droite finit collée au bord de
 * l'écran, détachée du reste de la composition.
 */
.ss4y-hero__cards {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 12%;
	inset-inline-end: 0;
	max-width: 42rem;
	pointer-events: none;
}

.ss4y-hero__card {
	position: absolute;
	width: min(17rem, 62%);
	padding: 0.8rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(6px);
	box-shadow: var(--wp--custom--shadow--lg);
	pointer-events: auto;
}

/* Décalage alterné : impaires à droite, paires à gauche. */
.ss4y-hero__card:nth-child(odd) {
	inset-inline-end: 4%;
}

.ss4y-hero__card:nth-child(even) {
	inset-inline-start: 0;
}

.ss4y-hero__card:nth-child(1) {
	inset-block-start: 36%;
}

.ss4y-hero__card:nth-child(2) {
	inset-block-start: 55%;
}

.ss4y-hero__card:nth-child(3) {
	inset-block-start: 74%;
}

.ss4y-hero__card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ss4y-hero__card-icon {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--wp--preset--color--primary);
}

.ss4y-hero__card-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}

.ss4y-hero__card-text {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted);
}

.ss4y-hero__avatars {
	display: inline-flex;
	flex-shrink: 0;
}

.ss4y-hero__avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--white);
	object-fit: cover;
}

.ss4y-hero__avatar + .ss4y-hero__avatar {
	margin-inline-start: -0.55rem;
}

/* ─── Variante texte seul ────────────────────────────────────────────────── */

/* Moins haut que le panneau : sans photo, l'écran n'a pas à être rempli. */
.ss4y-hero--text {
	--ss4y-hero-min-height: 60vh;
}

.ss4y-hero--text .ss4y-hero__panel {
	width: 100%;
	clip-path: none;
	justify-content: center;
	text-align: center;

	/* Contenu centré : la gouttière asymétrique n'a plus lieu d'être. */
	padding-inline: var(--ss4y-hero-pad);

	/*
	 * Le bandeau démarre en haut de page, sous la barre flottante : on ajoute
	 * sa hauteur au padding pour que le texte ne passe pas dessous.
	 */
	padding-block-start: calc(var(--ss4y-hero-pad-block) + var(--ss4y-hero-bar));
}

.ss4y-hero--text .ss4y-hero__content {
	max-width: 46rem;
	margin-inline: auto;
	padding-inline-end: 0;
}

.ss4y-hero--text .ss4y-hero__subtitle {
	margin-inline: auto;
}

.ss4y-hero--text .ss4y-hero__actions {
	justify-content: center;
}

.ss4y-hero--text .ss4y-hero__reviews {
	margin-inline: auto;
}

/*
 * Sans photo, il n'y a pas de bord de panneau où s'accrocher : le macaron se
 * pose dans la marge droite, à hauteur du texte. Le contenu est plafonné à
 * 46 rem et centré, la marge est donc large et toujours vide.
 *
 * Rendu dans le contenu, il se positionne sur le panneau, seul ancêtre
 * positionné — sans risque ici, la variante texte lui retire son `clip-path`.
 * Étant un descendant du panneau, il passe devant son fond sans `z-index`.
 */
.ss4y-hero--text .ss4y-hero__promo {
	inset-block-start: 50%;
	inset-inline: auto var(--ss4y-hero-inset);
	transform: translateY(-50%) rotate(-8deg);
}

/* ─── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

	.ss4y-hero {
		--ss4y-hero-panel: 55%;
	}

	/* Le panneau se resserre : on rend sa marge interne aux boutons. */
	.ss4y-hero__content {
		padding-inline-end: var(--wp--preset--spacing--sm);
	}

	.ss4y-hero__card {
		width: min(15rem, 78%);
	}
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {

	/* Plancher mobile, quelle que soit la variante ou le réglage de l'éditeur. */
	.ss4y-hero {
		min-height: 80vh;
	}

	/*
	 * En colonne, `align-items: stretch` n'agit que sur la largeur : sans
	 * `flex: 1`, le panneau garderait la hauteur de son texte et laisserait
	 * une bande de fond nue.
	 */
	.ss4y-hero__panel {
		flex: 1;
		width: 100%;
		clip-path: none;
	}

	/* Inversion réservée au panneau : la photo passe au-dessus du texte. */
	.ss4y-hero--panel {
		flex-direction: column-reverse;
	}

	.ss4y-hero__content {
		max-width: none;
		margin-inline-start: 0;
		padding-inline-end: 0;
	}

	.ss4y-hero__media {
		position: relative;
		inset: auto;
		height: 300px;
	}

	/*
	 * La photo ne fait plus que 300 px et les cartes en occupent le bas : le
	 * macaron remonte juste sous la barre et se resserre, sinon il mord sur
	 * les cartes.
	 */
	.ss4y-hero--panel .ss4y-hero__promo {
		inset-block-start: calc(var(--ss4y-hero-bar) - 0.5rem);
		width: 6rem;
	}

	/* En pile, les cartes reviennent dans le flux sous la photo. */
	.ss4y-hero__cards {
		position: absolute;
		inset: auto 0 0;
		display: flex;
		gap: 0.6rem;
		padding: 0 1rem 1rem;
		overflow-x: auto;
	}

	.ss4y-hero__card {
		position: static;
		flex: 0 0 15rem;
		width: auto;
	}

	/*
	 * Variante texte : le contenu prend toute la largeur, la marge droite où
	 * logeait le macaron n'existe plus. Il revient dans le flux, en `inline-flex`
	 * comme le badge qui le précède, pour se poser sur la même ligne que lui et
	 * s'aligner verticalement sans calcul.
	 *
	 * Mais une ligne centrée l'est sur la somme de ses boîtes : le badge se
	 * décalerait vers la gauche pour faire de la place au macaron. La marge de
	 * fin annule donc exactement le retrait de départ plus la largeur, si bien
	 * que le macaron ne compte pour rien dans la largeur de la ligne. Le badge
	 * reste centré comme s'il était seul, et le macaron déborde à sa droite.
	 *
	 * Le retrait de départ est négatif : le macaron mord légèrement sur le
	 * padding droit du badge. Ça le rapproche de l'axe, donc il tient à l'écran
	 * même avec une accroche longue, là où « Contact » est un cas favorable.
	 */
	.ss4y-hero--text .ss4y-hero__promo {
		--ss4y-promo-size: 4.75rem;
		--ss4y-promo-lead: -0.5rem;

		position: static;
		display: inline-flex;
		width: var(--ss4y-promo-size);
		margin-block: 0 var(--wp--preset--spacing--md);
		margin-inline: var(--ss4y-promo-lead) calc(-1 * (var(--ss4y-promo-size) + var(--ss4y-promo-lead)));
		padding: 0.55rem;
		font-size: 0.75rem;
		vertical-align: middle;
		transform: rotate(-8deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ss4y-hero__btn {
		transition: none;
	}
}