/**
 * Hero Slider (cwp/hero-slider)
 * Maquette Figma AXIOS – composant « BLOC HERO » (4 variantes, 1380 × 686, rayon 20 px).
 *
 * Classes utilitaires réutilisées depuis assets/css/main.css (hero actuel) :
 * section-radius, full-width-margin, hyper-full-height, m-hero, hero-home-height,
 * surlignement, btn, btn_secondary.
 */

.blc_hero-slider {
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.blc_hero-slider .swiper,
.blc_hero-slider .swiper-wrapper,
.blc_hero-slider .swiper-slide {
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Fonds – valeurs exactes de la maquette (angle 111°)
 * ------------------------------------------------------------------------ */
.blc_hero-slider-slide {
	border-radius: 20px;
}

/* 1 – Market Access (nœud Figma 1151:1384) */
.blc_hero-slider-slide.is-bg-market-access {
	background: linear-gradient(111deg, #F3E8D9 0%, #FFE4D7 47%, #FCC67A 100%);
}

/* 2 – Strategy (nœud 1130:829) */
.blc_hero-slider-slide.is-bg-strategy {
	background: linear-gradient(111deg, #F3E8D9 0%, #FDD19D 47%, #FF9C55 100%);
}

/* 3 – Public Affairs (nœud 1130:861) */
.blc_hero-slider-slide.is-bg-public-affairs {
	background: linear-gradient(111deg, #FFDDAE 0%, #FFBC6E 47%, #FF7B43 100%);
}

/* 4 – Transformation (nœud 1131:876) : identique à Strategy */
.blc_hero-slider-slide.is-bg-transformation {
	background: linear-gradient(111deg, #F3E8D9 0%, #FDD19D 47%, #FF9C55 100%);
}

/* ---------------------------------------------------------------------------
 * Contenu
 * ------------------------------------------------------------------------ */
.blc_hero-slider-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.blc_hero-slider-text {
	position: relative;
	z-index: 1;
	flex: 0 1 570px;
}

/* Maquette : Unbounded Regular 50 px, #45525C.
   Double classe : main.css impose Outfit via `:root :where(p)`, de même spécificité et chargé après. */
.blc_hero-slider .blc_hero-slider-title {
	margin: 0 0 30px;
	font-family: Unbounded, sans-serif;
	font-size: clamp(32px, 3.6vw, 50px);
	font-weight: 400;
	line-height: 1.24;
	color: var(--wp--preset--color--foreground, #45525c);
}

/* Maquette : surlignage blanc plein sous le mot-clé (z-index repris de .surlignement du thème) */
.blc_hero-slider .surlignement {
	position: relative;
	z-index: 1;
	display: inline-block;
}

.blc_hero-slider .surlignement::after {
	z-index: -1;
	background: #fff;
	opacity: 1;
	height: .46em;
	bottom: .05em;
}

.blc_hero-slider-pattern {
	display: flex;
	justify-content: flex-end;
	flex: 0 1 570px;
}

.blc_hero-slider-pattern img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Pagination + pause – centrées en bas (maquette : cercles 16 px, écart 10 px, bas à 56 px)
 * ------------------------------------------------------------------------ */
.blc_hero-slider-controls {
	position: absolute;
	left: 50%;
	bottom: 56px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
	transform: translateX(-50%);
}

.blc_hero-slider .swiper-pagination.blc_hero-slider-pagination {
	position: static;
	display: flex;
	gap: 10px;
	width: auto;
	transform: none;
}

.blc_hero-slider .swiper-pagination-bullet {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	border: 1.5px solid #fff;
	background: transparent;
	opacity: 1;
	transition: background-color .2s ease-in-out;
}

.blc_hero-slider .swiper-pagination-bullet-active {
	background: #fff;
}

.blc_hero-slider .swiper-pagination-bullet:focus-visible,
.blc_hero-slider-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground, #45525c);
	outline-offset: 3px;
}

/* Bouton pause / lecture (accessibilité) – discret, à la teinte de la pagination.
   Premier dans le DOM (ordre de tabulation), affiché à droite des puces. */
.blc_hero-slider-toggle {
	order: 1;
	position: relative;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.blc_hero-slider-toggle[hidden] {
	display: none;
}

/* Icône pause (deux barres) */
.blc_hero-slider-toggle-icon,
.blc_hero-slider-toggle-icon::after {
	position: absolute;
	top: 2px;
	width: 4px;
	height: 12px;
	border-radius: 1px;
	background: #fff;
	content: "";
}

.blc_hero-slider-toggle-icon {
	left: 3px;
}

.blc_hero-slider-toggle-icon::after {
	top: 0;
	left: 6px;
}

/* Icône lecture (triangle) */
.blc_hero-slider-toggle[aria-pressed="true"] .blc_hero-slider-toggle-icon {
	left: 4px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
	border-radius: 0;
	background: none;
}

.blc_hero-slider-toggle[aria-pressed="true"] .blc_hero-slider-toggle-icon::after {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Éditeur : Swiper n'est pas initialisé, on n'affiche que la première slide
 * ------------------------------------------------------------------------ */
.blc_hero-slider.is-preview .swiper-slide:not(:first-child) {
	display: none;
}

.blc_hero-slider.is-preview .blc_hero-slider-controls {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Tablette / mobile (même point de rupture que le thème : 992 px)
 * ------------------------------------------------------------------------ */
@media (max-width: 992px) {
	.blc_hero-slider .blc_hero-slider-title {
		margin-bottom: 10px;
		font-size: 24px;
	}

	.blc_hero-slider-pattern {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 0;
		width: 130px;
		transform: translateY(-50%);
	}

	.blc_hero-slider-controls {
		bottom: 14px;
		gap: 10px;
	}

	.blc_hero-slider .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		border-width: 1px;
	}

	/* Cibles tactiles (WCAG 2.5.8) : puces de 8 px espacées de 24 px de centre à centre */
	.blc_hero-slider .swiper-pagination.blc_hero-slider-pagination {
		gap: 16px;
	}

	/* Bouton pause : zone tactile 24 × 24, icône réduite et centrée */
	.blc_hero-slider-toggle {
		width: 24px;
		height: 24px;
	}

	.blc_hero-slider-toggle-icon {
		top: 6px;
		left: 7px;
		transform: scale(.7);
		transform-origin: 5px 6px;
	}

	.blc_hero-slider-toggle[aria-pressed="true"] .blc_hero-slider-toggle-icon {
		left: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blc_hero-slider .swiper-wrapper,
	.blc_hero-slider .swiper-slide {
		transition-duration: 0ms !important;
	}
}