/*
 * cta/phare — centre, sur la surface profonde du site, sous un halo de
 * l'accent sur fond sombre. Aplat : fond plein, sans image.
 */

.ivy-cta--phare {
	position: relative;
	isolation: isolate;
	display: grid;
	justify-items: center;
	gap: 22px;
	width: 100%;
	padding: clamp( 96px, 12vw, 168px ) clamp( 20px, 4vw, 40px );
	overflow: hidden;
	background: var( --ivy-deep, rgb( 27 30 28 ) );
	color: var( --ivy-on-deep, rgb( 255 255 255 ) );
	text-align: center;
}

.ivy-cta--phare::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto 10% -40% 10%;
	height: 90%;
	background: radial-gradient( closest-side, color-mix( in srgb, var( --ivy-accent-on-deep, rgb( 218 221 207 ) ) 16%, transparent ), transparent );
	pointer-events: none;
}

.ivy-cta--phare .ivy-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var( --ivy-eyebrow-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-cta--phare .ivy-cta__icon { display: inline-flex; flex: none; align-items: center; color: var( --ivy-icon-color, var( --ivy-accent-on-deep, rgb( 218 221 207 ) ) ); }
.ivy-cta--phare .ivy-cta__icon :is( svg, i ) { flex: none; width: 14px; height: 14px; font-size: 14px; }

.ivy-cta--phare .ivy-cta__title { margin: 0; color: var( --ivy-title-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) ); font-size: var( --ivy-font-display ); line-height: 1.04; }
.ivy-cta--phare .ivy-cta__text { color: var( --ivy-text-color, var( --ivy-on-deep-muted, rgb( 220 220 220 ) ) ); font-size: var( --ivy-font-lead ); }
.ivy-cta--phare .ivy-cta__text > :first-child { margin-top: 0; }
.ivy-cta--phare .ivy-cta__text > :last-child { margin-bottom: 0; }

.ivy-cta--phare .ivy-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

:where( .ivy-cta--phare ) .ivy-cta__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .85em 1.5em;
	border: 1px solid transparent;
	border-radius: var( --ivy-radius-action, 0 );
	background: var( --ivy-cta-background-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-weight: 600;
	text-decoration: none;
}

:where( .ivy-cta--phare ) .ivy-cta__cta--secondary {
	border-color: var( --ivy-cta_secondary-border-color, var( --ivy-line-deep, rgb( 94 91 85 ) ) );
	background: var( --ivy-cta_secondary-background-color, transparent );
	color: var( --ivy-cta_secondary-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) );
}