/**
 * Pages d'approche · hero (Build : Figma 2001:637511, Moez 2026-10-29).
 * Reprend le hero de l'accueil (classe stravos-hero : plein écran, lueur ondulante,
 * points scintillants de hero-dots.js) ; les curseurs colorés du Figma ne sont pas repris.
 * Ici : étiquette de l'offre (cadre blanc 10 %, case noire, texte en dégradé), titre
 * H1 blanc sur deux lignes, texte blanc.
 */

/* Étiquette (Figma 2001:696304) : cadre 4 px blanc 10 %, rayon 4 ; case noire 4 × 8 px, rayon 4 ;
   Urbanist SemiBold 16 px, capitales, interligne 1,3, dégradé rose → orange → rouge. */
.stravos-hero__content > .stravos-offer-hero__tag {
	width: fit-content;
	margin: 0 auto 32px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--wp--custom--radius--x-small);
	text-box: none;
}

.stravos-offer-hero__tag > span {
	display: block;
	padding: 4px 8px;
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: transparent;
	background:
		linear-gradient(133.87deg, var(--wp--preset--color--accent-pink) 7.02%, var(--wp--preset--color--digital-orange) 44.61%, var(--wp--preset--color--impact-red) 92.09%),
		var(--wp--preset--color--black);
	-webkit-background-clip: text, padding-box;
	background-clip: text, padding-box;
	border-radius: var(--wp--custom--radius--x-small);
	text-box: trim-both cap alphabetic;
}

.stravos-offer-hero .stravos-hero__content > h1 {
	color: var(--wp--preset--color--white);
}

.stravos-offer-hero .stravos-hero__lead {
	/* Phrase du wireframe sur une ligne en desktop (plus longue que le texte du Figma). */
	max-width: 680px;
	color: var(--wp--preset--color--white);
}

@media (max-width: 781.98px) {
	.stravos-offer-hero h1 br {
		display: none;
	}
}

/*
 * Hauteur (Moez, 2026-10-29) : sur les pages intérieures, le hero ne prend pas tout l'écran
 * comme sur l'accueil ; sa hauteur suit le contenu (maquettes comprises, voir plus bas).
 * Les nuages de points sont calés sur le bas de la section (et non sur le haut comme
 * l'accueil), aux mêmes distances que sur l'accueil à 1440 × 900 (217 et 81 px du bas).
 */

.stravos-offer-hero::after {
	-webkit-mask-image:
		radial-gradient(ellipse 403px 207px at 50% calc(100% - 217px), #000, transparent),
		radial-gradient(ellipse 403px 207px at calc(50% - 583px) calc(100% - 81px), #000, transparent),
		radial-gradient(ellipse 403px 207px at calc(50% + 578px) calc(100% - 81px), #000, transparent);
	mask-image:
		radial-gradient(ellipse 403px 207px at 50% calc(100% - 217px), #000, transparent),
		radial-gradient(ellipse 403px 207px at calc(50% - 583px) calc(100% - 81px), #000, transparent),
		radial-gradient(ellipse 403px 207px at calc(50% + 578px) calc(100% - 81px), #000, transparent);
}

/*
 * Maquettes web et mobile sous le bouton (Figma 2001:685456, Moez 2026-10-30) : les deux écrans
 * du Figma (2001:696312, 2001:696367) recréés en HTML par inc/mockups.php, à la place de l'image
 * du bloc. Scène de 1140 × 490 px coupée à 418 px par le bas (comme le Figma), réduite à la
 * largeur disponible par mockups.js (--mk-scale). 64 px sous le bouton ; le hero s'arrête sous
 * les maquettes (pas de marge basse).
 */
.stravos-hero.stravos-offer-hero {
	min-height: 0;
	padding-bottom: 0;
}

.stravos-mockups {
	position: relative;
	width: 100%;
	max-width: 1140px;
	aspect-ratio: 1140 / 418;
	margin: 0 !important;
	overflow: hidden;
	text-align: left;
	letter-spacing: -0.02em;
}

.stravos-mockups__stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 1140px;
	height: 490px;
	transform: scale(var(--mk-scale, 1));
	transform-origin: 0 0;
}

.stravos-mockups * {
	box-sizing: border-box;
}

.mk-screen {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	height: 490px;
	overflow: hidden;
	background: rgba(26, 26, 26, 0.9);
	border: 4px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.mk-web {
	left: 0;
	width: 852px;
}

.mk-phone {
	left: 884px;
	width: 256px;
}

.mk-outline {
	position: absolute;
	inset: -4px;
	z-index: 2;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	overflow: visible;
	pointer-events: none;
}

.mk-outline path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.2);
	stroke-linecap: round;
	stroke-dasharray: 1.02 1.02;
	opacity: 0;
}

.mk-outline__line {
	/* Trait simple, blanc 20 %, sans flou ni dégradé (Moez, 2026-10-30). */
	stroke-width: 3;
}

.mk-icon {
	display: block;
	flex: none;
	width: 16.384px;
	height: 16.384px;
}

.mk-el {
	display: block;
}

/* Bouton lecture des deux vidéos. */
.mk-play {
	display: grid;
	place-items: center;
	width: 49.152px;
	height: 49.152px;
	background: #fff;
	border-radius: 50%;
}

.mk-play .mk-icon {
	width: 32.768px;
	height: 32.768px;
}

/* ---------- Écran web ---------- */

.mk-web__head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 24px;
	padding: 16px 32px 12px;
}

.mk-web__back {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 9.778px;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

.mk-web__title {
	flex: 1;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}

.mk-web__nav {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.mk-web__nav.is-active {
	color: rgba(255, 255, 255, 0.9);
}

.mk-web__body {
	display: flex;
	flex: 1;
	gap: 16px;
	min-height: 0;
	padding: 0 32px 32px;
}

.mk-web__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.mk-web__video,
.mk-phone__video {
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.mk-web__video {
	flex: 1;
}

.mk-web__thumbs {
	display: flex;
	gap: 8px;
}

.mk-web__thumbs > * {
	flex: 1;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.mk-web__side {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 16px;
	width: 380px;
}

.mk-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
}

.mk-card--info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
}

.mk-card__title {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
}

.mk-card__muted {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.mk-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mk-chip {
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.mk-card--host {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
}

.mk-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(191, 38, 64, 0.3);
	border-radius: 50%;
}

.mk-host {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	white-space: nowrap;
}

.mk-host__name {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.mk-host__role {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.mk-pill {
	padding: 7px 12px;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
}

.mk-card--dates {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px;
}

.mk-card__label {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
}

.mk-dates {
	display: flex;
	gap: 10px;
}

.mk-date {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 10px;
}

.mk-date__small {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.35);
}

.mk-date__value {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.mk-card__link {
	align-self: flex-end;
	font-size: 12px;
	font-weight: 500;
	color: #bf2640;
}

/* ---------- Écran mobile ---------- */

.mk-phone__status {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	height: 36.864px;
	padding: 0 22px 0 34px;
	color: #fff;
}

.mk-phone__time {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
	font-size: 11.605px;
	font-weight: 700;
	letter-spacing: 0;
}

.mk-phone__levels {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mk-phone__levels .mk-icon {
	width: auto;
	height: 8px;
}

.mk-battery {
	position: relative;
	width: 17px;
	height: 8px;
	border: 0.683px solid rgba(255, 255, 255, 0.35);
	border-radius: 2.9px;
}

.mk-battery::before {
	content: "";
	position: absolute;
	inset: 1px;
	background: #fff;
	border-radius: 1.7px;
}

.mk-phone__nav {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4.096px;
	padding: 8.192px 10.923px;
}

.mk-phone__title {
	flex: 1;
	font-size: 10.923px;
	font-weight: 600;
	line-height: 16.384px;
	color: #fff;
	text-align: center;
}

.mk-phone__video {
	flex: none;
	height: 144.725px;
	margin: 0 4px;
}

.mk-phone__tabs {
	display: grid;
	flex: none;
	grid-template-columns: 1fr 1fr;
	gap: 5.461px;
	padding: 8.192px 10.923px;
}

.mk-phone__tab {
	display: flex;
	align-items: center;
	gap: 5.461px;
	padding: 10.923px;
	font-size: 8.875px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
}

.mk-phone__person {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8.192px;
	padding: 5.461px 10.923px;
}

.mk-phone__avatar {
	flex: none;
	width: 27.307px;
	height: 27.307px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
}

.mk-phone__name,
.mk-phone__date {
	font-size: 10.923px;
	font-weight: 600;
	line-height: 16.384px;
	color: #fff;
}

.mk-phone__role {
	font-size: 9.557px;
	line-height: 13.653px;
	color: #fff;
}

.mk-phone__dates {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8.192px;
	padding: 8.192px 10.923px;
}

.mk-phone__change {
	display: flex;
	align-items: center;
	font-size: 10.923px;
	font-weight: 600;
	color: #fff;
}

.mk-phone__bar {
	display: flex;
	flex: none;
	justify-content: space-between;
	padding: 5.461px 24.576px;
}

.mk-phone__bar-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 32.768px;
	font-size: 7.509px;
	font-weight: 600;
	color: #fff;
}

/*
 * ---------- Construction animée (mockups.js, Moez 2026-10-30) ----------
 * Dès le chargement, deux fois plus vite que la première version :
 * 1. le contour de chaque écran se trace d'un trait simple blanc à 20 % (sans flou ni dégradé),
 *    du bas à gauche jusqu'au bas à droite en passant par le haut, lentement puis en accélérant, pendant que l'écran
 *    monte légèrement (le mobile 120 ms après le web) ; 2. l'écran se remplit de gris et le
 *    contour coloré s'efface en fondu au profit de la bordure grise ; 3. les éléments apparaissent
 *    un par un, au hasard (un contenant avant son contenu) : textes en « pop » + fondu, blocs qui
 *    s'agrandissent ou montent, au hasard, + fondu.
 * État de départ (is-ready) posé dans le HTML ; tout reste visible sans JavaScript et en
 * mouvement réduit.
 */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.stravos-mockups.is-ready .mk-screen {
		transform: translateY(40px);
		background-color: rgba(26, 26, 26, 0);
		border-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transition:
			transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0.45s ease,
			border-color 0.45s ease;
	}

	.stravos-mockups.is-ready .mk-screen.is-up {
		transform: none;
	}

	.stravos-mockups.is-ready .mk-outline path {
		opacity: 1;
		stroke-dashoffset: 1.02;
		/* Lent au départ puis accélération franche, comme le cercle du S. */
		transition: stroke-dashoffset 0.8s cubic-bezier(0.7, 0, 0.84, 0.3), opacity 0.45s ease;
	}

	.stravos-mockups.is-ready .mk-screen.is-up .mk-outline path {
		stroke-dashoffset: 0;
	}

	.stravos-mockups.is-ready .mk-screen.is-filled {
		background-color: rgba(26, 26, 26, 0.9);
		border-color: rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
	}

	.stravos-mockups.is-ready .mk-screen.is-filled .mk-outline path {
		opacity: 0;
	}

	.stravos-mockups.is-ready .mk-el {
		opacity: 0;
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.stravos-mockups.is-ready .mk-el[data-k="text"] {
		transform: scale(0.82);
		transform-origin: left center;
		transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.stravos-mockups.is-ready .mk-el[data-a="grow"] {
		transform: scale(0.88);
	}

	.stravos-mockups.is-ready .mk-el[data-a="rise"] {
		transform: translateY(18px);
	}

	.stravos-mockups.is-ready .mk-el.is-in {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 781.98px) {
	.stravos-hero.stravos-offer-hero {
		gap: 40px;
		padding-bottom: 0;
	}
}

/*
 * Page Boost (Figma 10650:11094, Moez 2026-11-01) : hero plein écran sous le header comme
 * l'accueil (Moez, 2026-11-03 : 100 vh à partir de 782 px, pas en mobile), contenu centré
 * verticalement ; quatre curseurs nommés autour du titre, qui flottent (assets/js/cursors.js).
 * Positions du Figma dans un cadre de 1440 px centré (en % pour suivre la largeur) ; plus petits
 * et placés autour du texte sous 1200 px.
 */
.stravos-hero.stravos-boost-hero {
	justify-content: center;
	min-height: calc(100vh - var(--wp--custom--header--height));
	min-height: calc(100svh - var(--wp--custom--header--height));
	padding-bottom: 120px;
}

.stravos-cursors {
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto !important;
	pointer-events: none;
}

.stravos-cursors > .stravos-cursor {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	text-box: none;
}

/* Point d'ancrage = coin haut gauche du groupe Figma (flèche + étiquette). */
.stravos-cursor.is-cursor-techlead  { left: 5.278%;  top: 206px; }
.stravos-cursor.is-cursor-vous      { left: 17.257%; top: 368px; }
/* Développeur écarté à droite du texte (Moez, 2026-11-03 : il masquait la fin du sous-titre). */
.stravos-cursor.is-cursor-ingenieur { left: calc(50% + 400px); top: 401px; }
.stravos-cursor.is-cursor-cto       { left: 83.16%;  top: 148px; }

.stravos-cursor__pointer,
.stravos-cursor__label {
	position: absolute;
	will-change: transform;
}

/* Flèche : case de 26 px du Figma, dessin de 28 × 29 px qui en déborde (ombre). */
.stravos-cursor__pointer {
	width: 26px;
	height: 26px;
}

.stravos-cursor__pointer img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 28.4166px;
	height: 29.4295px;
	max-width: none;
}

/* Flèche retournée (pointe en haut à droite), au-dessus à droite de l'étiquette. */
.is-cursor-techlead .stravos-cursor__pointer img,
.is-cursor-ingenieur .stravos-cursor__pointer img {
	transform-origin: 13px 13px;
	scale: -1 1;
}

.is-cursor-techlead .stravos-cursor__pointer  { left: 94.5px; top: 0; }
.is-cursor-techlead .stravos-cursor__label    { left: 0;      top: 28px; }
.is-cursor-ingenieur .stravos-cursor__pointer { left: 90px;   top: 0; }
.is-cursor-ingenieur .stravos-cursor__label   { left: 0;      top: 22px; }
.is-cursor-vous .stravos-cursor__pointer,
.is-cursor-cto .stravos-cursor__pointer       { left: 0;      top: 0; }
.is-cursor-vous .stravos-cursor__label,
.is-cursor-cto .stravos-cursor__label         { left: 22px;   top: 22px; }

/* Étiquette (Figma « Comment ») : 40 px de haut, contour blanc 2 px intérieur, rayon 24,
   Urbanist Regular 16 / 24 px, approche -3 %. */
.stravos-cursor__label {
	box-sizing: border-box;
	height: 40px;
	padding: 6px 14px;
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
	background: var(--stravos-cursor-color, var(--wp--preset--color--impact-red));
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 24px;
}

.is-cursor-vous { --stravos-cursor-color: var(--wp--preset--color--accent-pink); }
.is-cursor-cto  { --stravos-cursor-color: var(--wp--preset--color--digital-orange); }

/* Sous 1200 px (Moez, 2026-11-01) : curseurs réduits à 80 % et écartés du texte, deux en haut
   de part et d'autre de l'étiquette, deux sous le bouton (comptés depuis le bas de la section). */
@media (max-width: 1199.98px) {
	.stravos-cursors > .stravos-cursor {
		scale: 0.8;
		transform-origin: 0 0;
	}

	.stravos-cursor.is-cursor-techlead  { left: calc(50% - 170px); top: 44px; }
	.stravos-cursor.is-cursor-cto       { left: calc(50% + 100px); top: 40px; }
	.stravos-cursor.is-cursor-vous      { left: calc(50% - 150px); top: auto; bottom: 70px; }
	.stravos-cursor.is-cursor-ingenieur { left: calc(50% + 50px);  top: auto; bottom: 90px; }
}

/* Mobile (Moez, 2026-11-03) : pas de plein écran, comme Build : hauteur selon le contenu, en haut. */
@media (max-width: 781.98px) {
	.stravos-hero.stravos-boost-hero {
		justify-content: flex-start;
		min-height: 0;
	}

	.stravos-boost-hero .stravos-hero__lead br {
		display: none;
	}
}