/**
 * Cartes « métier » communes (Moez, 2026-10-29) : corps de métier de Nous découvrir
 * (stravos-team__role) et types de produits de la page Build (stravos-builds__item).
 * Fond très transparent (30 %, flou 12 px), rayon 24, marges 40 ; icône animée dans une
 * pastille de 64 px au contour de la couleur d'accent (is-accent-red | pink | orange) ;
 * au survol, le contour passe de la pastille à la carte, halo de la même couleur en haut,
 * montée de 8 px. Mobile : état « survolé » affiché d'emblée.
 */

:is(.stravos-team__role, .stravos-builds__item) {
	--stravos-accent: var(--wp--preset--color--digital-orange);
	--stravos-accent-soft: rgba(255, 151, 69, 0.18);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px;
	background: rgba(26, 26, 26, 0.3);
	border: 1px solid var(--wp--preset--color--space-black-light);
	border-radius: var(--wp--custom--radius--big);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: border-color 500ms var(--wp--custom--transition--easing), transform 500ms var(--wp--custom--transition--easing);
}

:is(.stravos-team__role, .stravos-builds__item).is-accent-red {
	--stravos-accent: var(--wp--preset--color--impact-red);
	--stravos-accent-soft: rgba(255, 67, 67, 0.18);
}

:is(.stravos-team__role, .stravos-builds__item).is-accent-pink {
	--stravos-accent: var(--wp--preset--color--accent-pink);
	--stravos-accent-soft: rgba(255, 20, 111, 0.18);
}

/* Halo de la couleur d'accent en haut de la carte, au survol. */
:is(.stravos-team__role, .stravos-builds__item)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: 70%;
	background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--stravos-accent-soft), transparent 70%);
	opacity: 0;
	transition: opacity 500ms var(--wp--custom--transition--easing);
	pointer-events: none;
}

:is(.stravos-team__role, .stravos-builds__item):hover {
	border-color: var(--stravos-accent);
}

:is(.stravos-team__role, .stravos-builds__item):hover :is(.stravos-team__role-icon, .stravos-builds__icon) {
	border-color: transparent;
}

:is(.stravos-team__role, .stravos-builds__item):hover::before {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	:is(.stravos-team__role, .stravos-builds__item):hover {
		transform: translateY(-8px);
	}
}

:is(.stravos-team__role-icon, .stravos-builds__icon) {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	color: var(--wp--preset--color--white);
	background: var(--wp--custom--color--white-05);
	/* Au repos, contour de la couleur d'accent sur la pastille ; au survol, il passe sur la carte. */
	border: 1px solid var(--stravos-accent);
	transition: border-color 500ms var(--wp--custom--transition--easing);
	border-radius: var(--wp--custom--radius--main);
}

/* Espace pastille → titre : 32 px (16 px d'écart + 16 px), référence du bloc « Pour ceux qui
   ont une vision » de Build (Moez, 2026-11-02). Sélecteur renforcé : la remise à zéro des
   marges des enfants de groupes annulait la marge. */
:is(.stravos-team__role, .stravos-builds__item) > :is(.stravos-team__role-icon, .stravos-builds__icon) {
	margin-bottom: 16px;
}

:is(.stravos-team__role-icon, .stravos-builds__icon) svg {
	display: block;
	width: 40px;
	height: 40px;
	overflow: visible;
}

:is(.stravos-team__role, .stravos-builds__item) h3 {
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
}

:is(.stravos-team__role-text, .stravos-builds__text) {
	font-size: var(--wp--preset--font-size--text-small);
	line-height: 1.4;
	color: var(--wp--preset--color--white-70);
}

/* ---------- Icônes animées (en boucle, plus marquées au survol) ---------- */

.stravos-role-icon__accent {
	color: var(--stravos-accent);
}

/* Product Managers : cible dont l'onde se propage, flèche qui vise le centre. */
.stravos-role-icon__pulse {
	stroke: var(--stravos-accent);
	transform-box: fill-box;
	transform-origin: center;
}

.stravos-role-icon__arrow {
	stroke: var(--stravos-accent);
}

/* Product Engineers : chevrons de code qui respirent, curseur qui clignote. */
.stravos-role-icon__left,
.stravos-role-icon__right {
	transform-box: fill-box;
}

/* Page Build : rotation autour du centre de l'icône, étincelle depuis son propre centre. */
.stravos-role-icon__spin {
	transform-box: view-box;
	transform-origin: 24px 24px;
}

.stravos-role-icon__twinkle,
.stravos-role-icon__ping {
	transform-box: fill-box;
	transform-origin: center;
}

.stravos-role-icon__ping {
	stroke: var(--stravos-accent);
}

.stravos-role-icon__buzz {
	transform-box: view-box;
	transform-origin: 24px 24px;
}

/* Product Designers : courbe de Bézier qui se dessine, poignées en couleur. */
.stravos-role-icon__curve {
	stroke: var(--stravos-accent);
	stroke-dasharray: 1;
}

.stravos-role-icon__handle {
	stroke-opacity: 0.5;
}

/* DevOps (Boost, Moez 2026-11-02) : nuage (cloud), engrenage qui tourne (automatiser) et bouclier
   dont la coche se dessine (sécuriser). */
.stravos-role-icon__cog {
	transform-box: view-box;
	transform-origin: 22px 24.5px;
}

.stravos-role-icon__tick {
	stroke-dasharray: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.stravos-role-icon__cog {
		animation: stravos-role-spin 4.5s linear infinite;
	}

	.stravos-role-icon__tick {
		animation: stravos-role-tick 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	/* Au repos, un quart plus rapides qu'à l'origine (Moez, 2026-10-29) ; au survol, vitesse inchangée. */
	.stravos-role-icon__pulse {
		animation: stravos-role-pulse 1.8s ease-out infinite;
	}

	.stravos-role-icon__arrow {
		animation: stravos-role-arrow 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	.stravos-role-icon__left {
		animation: stravos-role-left 1.8s ease-in-out infinite;
	}

	.stravos-role-icon__right {
		animation: stravos-role-right 1.8s ease-in-out infinite;
	}

	.stravos-role-icon__cursor {
		animation: stravos-role-blink 0.9s steps(1) infinite;
	}

	.stravos-role-icon__curve {
		animation: stravos-role-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	/* Icônes de la page Build : flèches d'automatisation qui tournent, étincelle IA qui
	   scintille, flèche d'envoi vers le cloud qui monte. */
	.stravos-role-icon__spin {
		animation: stravos-role-spin 4.5s linear infinite;
	}

	.stravos-role-icon__twinkle {
		animation: stravos-role-twinkle 1.8s ease-in-out infinite;
	}

	.stravos-role-icon__lift {
		animation: stravos-role-lift 1.8s ease-in-out infinite;
	}

	/* Applications mobiles : le téléphone vibre, la notification émet une onde. */
	.stravos-role-icon__buzz {
		animation: stravos-role-buzz 1.8s ease-in-out infinite;
	}

	.stravos-role-icon__ping {
		animation: stravos-role-ping 1.8s ease-out infinite;
	}

	/* Sites web commerciaux (Moez, 2026-11-02) : un article tombe dans le caddie, qui avance
	   d'un cran et dont le panier s'allume. */
	.stravos-role-icon__drop {
		animation: stravos-role-drop 1.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
	}

	.stravos-role-icon__cart {
		animation: stravos-role-cart 1.8s ease-in-out infinite;
	}

	.stravos-role-icon__basket {
		animation: stravos-role-basket 1.8s ease-out infinite;
	}

	/* Au survol : animations deux fois plus rapides. */
	:is(.stravos-team__role, .stravos-builds__item):hover .stravos-role-icon * {
		animation-duration: 1.2s;
	}

	:is(.stravos-team__role, .stravos-builds__item):hover .stravos-role-icon__curve {
		animation-duration: 1.6s;
	}

	:is(.stravos-team__role, .stravos-builds__item):hover .stravos-role-icon__cursor {
		animation-duration: 0.6s;
	}
}

@keyframes stravos-role-drop {
	0% {
		opacity: 0;
		transform: translateY(-6px);
	}
	15% {
		opacity: 1;
	}
	50% {
		opacity: 1;
		transform: translateY(9px);
	}
	62%,
	100% {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes stravos-role-cart {
	0%,
	50%,
	100% {
		transform: translateX(0);
	}
	62% {
		transform: translateX(1.5px);
	}
	78% {
		transform: translateX(0);
	}
}

@keyframes stravos-role-basket {
	0%,
	48% {
		fill: transparent;
	}
	58% {
		fill: var(--stravos-accent);
		fill-opacity: 0.35;
	}
	100% {
		fill: transparent;
	}
}

@keyframes stravos-role-pulse {
	0% {
		opacity: 0.8;
		transform: scale(0.6);
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

@keyframes stravos-role-arrow {
	0%,
	100% {
		transform: translate(4px, -4px);
		opacity: 0.4;
	}
	45%,
	70% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

@keyframes stravos-role-left {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-2px);
	}
}

@keyframes stravos-role-right {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(2px);
	}
}

@keyframes stravos-role-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes stravos-role-draw {
	0% {
		stroke-dashoffset: 1;
	}
	55%,
	80% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -1;
	}
}

@keyframes stravos-role-buzz {
	0%,
	40%,
	100% {
		transform: rotate(0);
	}
	8%,
	24% {
		transform: rotate(-7deg);
	}
	16%,
	32% {
		transform: rotate(7deg);
	}
}

@keyframes stravos-role-ping {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(2.6);
	}
}

@keyframes stravos-role-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes stravos-role-twinkle {
	0%,
	100% {
		opacity: 0.6;
		transform: scale(0.75);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes stravos-role-lift {
	0% {
		opacity: 0;
		transform: translateY(5px);
	}
	30%,
	70% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-5px);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.stravos-team__role, .stravos-builds__item),
	:is(.stravos-team__role, .stravos-builds__item)::before {
		transition: none;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 781.98px) {
	:is(.stravos-team__role, .stravos-builds__item) {
		padding: 28px 24px;
		/* Pas de survol sur écran tactile : couleur d'accent et halo affichés d'emblée. */
		border-color: var(--stravos-accent);
	}

	:is(.stravos-team__role, .stravos-builds__item)::before {
		opacity: 1;
	}

	:is(.stravos-team__role-icon, .stravos-builds__icon) {
		border-color: transparent;
	}
}

/* ---------- Icônes des métiers de Moez (2026-11-02) ----------
   Équipe d'experts de Build (stravos-crew__role) ; Product Designers de Nous découvrir.
   PM : les lignes de la checklist s'écrivent l'une après l'autre, le cube produit flotte.
   Designer : l'arc de Bézier se dessine depuis la plume, qui monte et descend.
   Engineer : l'engrenage tourne, les bits du cerveau s'allument tour à tour.
   Tech Lead (icône de Moez) : les circuits partent de la tête et s'allument par paires, de haut
   en bas ; les chevrons du code s'écartent et la barre clignote ; les voyants des écrans s'allument. */

.stravos-crew-ico__accent {
	color: var(--stravos-accent);
}

.stravos-crew-ico__line,
.stravos-crew-ico__cube,
.stravos-crew-ico__nib,
.stravos-crew-ico__bit,
.stravos-crew-ico__code {
	transform-box: fill-box;
	transform-origin: center;
}

.stravos-crew-ico__line {
	transform-origin: left center;
}

.stravos-crew-ico__gear {
	transform-box: view-box;
	transform-origin: 365.1px 150.3px;
}

.stravos-crew-ico__arc {
	stroke-dasharray: 1;
}


@media (prefers-reduced-motion: no-preference) {
	.stravos-crew-ico__line {
		animation: stravos-crew-ico-line 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
		animation-delay: calc(var(--i) * 0.2s);
	}

	.stravos-crew-ico__cube {
		animation: stravos-crew-ico-float 2.8s ease-in-out infinite;
	}

	.stravos-crew-ico__arc {
		animation: stravos-crew-ico-arc 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	.stravos-crew-ico__nib {
		animation: stravos-crew-ico-nib 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	.stravos-crew-ico__gear {
		animation: stravos-role-spin 4.5s linear infinite;
	}

	.stravos-crew-ico__bit {
		animation: stravos-crew-ico-bit 1.8s ease-in-out infinite;
		animation-delay: calc(var(--i) * 0.3s);
	}

	.stravos-crew-ico__circuit {
		animation: stravos-crew-ico-circuit 2.4s ease-in-out infinite;
		animation-delay: calc(var(--i) * 0.25s);
	}

	.stravos-crew-ico__code.is-left {
		animation: stravos-crew-ico-code-left 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	.stravos-crew-ico__code.is-right {
		animation: stravos-crew-ico-code-right 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	.stravos-crew-ico__slash {
		animation: stravos-role-blink 0.9s steps(1) infinite;
	}

	/* Au survol de la carte : un tiers plus rapides. */
	:is(.stravos-crew__role, .stravos-team__role, .stravos-expertise):hover .stravos-crew-ico * {
		animation-duration: 1.8s;
	}
}

@keyframes stravos-crew-ico-line {
	0% { transform: scaleX(0); opacity: 1; }
	14%, 78% { transform: scaleX(1); opacity: 1; }
	90%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes stravos-crew-ico-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7%); }
}

@keyframes stravos-crew-ico-arc {
	0% { stroke-dashoffset: 1; opacity: 1; }
	45%, 80% { stroke-dashoffset: 0; opacity: 1; }
	95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes stravos-crew-ico-nib {
	0%, 100% { transform: translateY(0); }
	22% { transform: translateY(-6%); }
	45% { transform: translateY(0); }
}

@keyframes stravos-crew-ico-bit {
	0%, 100% { opacity: 0.35; }
	40% { opacity: 1; }
}

@keyframes stravos-crew-ico-circuit {
	0%, 100% { opacity: 0.25; }
	20%, 45% { opacity: 1; }
}

@keyframes stravos-crew-ico-code-left {
	0%, 60%, 100% { transform: translateX(0); }
	30% { transform: translateX(-14%); }
}

@keyframes stravos-crew-ico-code-right {
	0%, 60%, 100% { transform: translateX(0); }
	30% { transform: translateX(14%); }
}

@keyframes stravos-role-tick {
	0%, 15% { stroke-dashoffset: 1; }
	50%, 85% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 1; }
}