/**
 * Glint Process - Frontend Styles
 * Cercles de processus interactifs
 * Approche fullwidth comme glinthero/glintstack
 */

:root {
	/* Couleurs alignées sur la palette du thème glintblockrocks (tokens
	   --color-* exposés par le thème), avec repli pour usage hors thème. */
	--glintprocess-purple: var(--color-mauve, #564d79);
	--glintprocess-purple-light: color-mix(in srgb, var(--color-mauve, #564d79) 80%, #fff);
	--glintprocess-pink: var(--color-bg, #fbecef);
	--glintprocess-black: var(--color-black, #222233);
	--glintprocess-circle-size: 200px;
	--glintprocess-overlap: 30px;
	/* Variables menu partagées avec les autres plugins Glint */
	--glintprocess-menu-width: 0px;
	--glintprocess-menu-line: var(--menu-line-thickness, 3px);
	--glintprocess-menu-offset: calc(var(--glintprocess-menu-width) + var(--glintprocess-menu-line) + 7px);
}

/* Empêcher le scroll horizontal */
body:has(.wp-block-glintprocess-process),
body:has(.glintprocess-container) {
	overflow-x: hidden !important;
}

/* ---------- Bloc externe - Forcer pleine largeur (comme glinthero) ---------- */
.wp-block-glintprocess-process {
	position: relative !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* Alignement full width explicite */
.wp-block-glintprocess-process.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
}

/* ---------- Inner container - décalé pour le menu (comme glintstack) ---------- */
.glintprocess-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 1rem;
	/* Décalage du menu comme glintstack */
	margin-left: var(--glintprocess-menu-offset) !important;
	margin-right: 0 !important;
	width: calc(100% - var(--glintprocess-menu-offset)) !important;
	max-width: calc(100% - var(--glintprocess-menu-offset)) !important;
	box-sizing: border-box !important;
}

/* Step item */
.glintprocess-step {
	flex: 0 0 auto;
	margin-left: calc(-1 * var(--glintprocess-overlap));
	position: relative; /* Needed for z-index on hover */
}

.glintprocess-step:first-child {
	margin-left: 0;
}

/* Circle - taille basée sur la largeur disponible */
.glintprocess-step-circle {
	width: var(--glintprocess-circle-size);
	height: var(--glintprocess-circle-size);
	border: 2px solid var(--glintprocess-purple);
	border-radius: 50%; /* ~22-25% pour le ratio Apple */
  /* corner-shape: squircle; */
	position: relative;
	background: transparent;
	transition: background-color 0.3s ease;
	cursor: pointer;
	box-sizing: border-box;
	/* Flexbox pour centrer le contenu */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Icon */
.glintprocess-step-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease;
	z-index: 2;
	width: 100%;
}

.glintprocess-step-icon img {
	/* Taille proportionnelle : ~22% du diamètre du cercle */
	width: calc(var(--glintprocess-circle-size) * 0.32);
	height: calc(var(--glintprocess-circle-size) * 0.32);
	object-fit: contain;
	transition: filter 0.3s ease;
}

/* Content (hidden by default) */
.glintprocess-step-content {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	z-index: 10;
	transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s;
	pointer-events: none;
}

.glintprocess-step-content-text {
	display: block;
	/* Taille proportionnelle au cercle : ~5% du diamètre */
	font-size: clamp(0.7rem, calc(var(--glintprocess-circle-size) * 0.05), 1.1rem);
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	color: white;
	text-align: center;
	text-wrap: balance;
	text-wrap: pretty;
}

/* Title wrapper */
.glintprocess-step-titles {
	position: absolute;
	bottom: 8%;
	left: 5%;
	right: 5%;
	text-align: center;
	z-index: 6;
}

/* Title */
.glintprocess-step-title {
	display: block;
	/* Taille proportionnelle au cercle : ~6% du diamètre */
	font-size: clamp(0.9rem, calc(var(--glintprocess-circle-size) * 0.06), 1.4rem);
	font-weight: 500;
	color: var(--glintprocess-purple);
	text-align: center;
	transition: color 0.3s ease;
}

/* Subtitle (optional) */
.glintprocess-step-subtitle {
	display: block;
	font-size: clamp(0.75rem, calc(var(--glintprocess-circle-size) * 0.048), 1.1rem);
	font-weight: 400;
	color: var(--glintprocess-purple);
	text-align: center;
	opacity: 0.75;
	transition: color 0.3s ease;
	margin-top: 0.1em;
}

/* Hover text block (hidden by default) */
.glintprocess-step-hover-text {
	position: absolute;
	bottom: calc(var(--glintprocess-circle-size) * 0.05);
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--glintprocess-circle-size) * 0.9);
	background: var(--glintprocess-pink);
	border: 1px solid var(--glintprocess-purple);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--glintprocess-circle-size) * 0.04) calc(var(--glintprocess-circle-size) * 0.05);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s;
	z-index: 20;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.glintprocess-step-hover-text-content {
	display: block;
	font-size: clamp(0.7rem, calc(var(--glintprocess-circle-size) * 0.045), 1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--glintprocess-black);
	text-align: center;
	text-wrap: balance;
	text-wrap: pretty;
}

.glintprocess-step-hover-text-content::before {
	content: "\2192\00a0Livrable\00a0: ";
	font-weight: 600;
}

/* Légère rotation alternée des blocs hover */
.glintprocess-step:nth-child(odd) .glintprocess-step-hover-text {
	transform: translateX(-50%) rotate(-1deg);
}

.glintprocess-step:nth-child(even) .glintprocess-step-hover-text {
	transform: translateX(-50%) rotate(2deg);
}

.glintprocess-step:nth-child(3n) .glintprocess-step-hover-text {
	transform: translateX(-50%) rotate(-2deg);
}

.glintprocess-step:nth-child(4n) .glintprocess-step-hover-text {
	transform: translateX(-50%) rotate(1deg);
}

/* ====================== */
/* HOVER STATE (JS-driven to prevent flicker in overlap zones) */
/* ====================== */
.glintprocess-step.is-hovered {
	z-index: 10;
}

.glintprocess-step.is-hovered .glintprocess-step-circle {
	background: var(--glintprocess-purple) !important;
	border-color: var(--glintprocess-purple) !important;
}

.glintprocess-step.is-hovered .glintprocess-step-icon {
	top: calc(18% - 1.6rem) !important;
	transform: translate(-50%, -20%) !important;
}

.glintprocess-step.is-hovered .glintprocess-step-icon img {
	width: calc(var(--glintprocess-circle-size) * 0.22);
	height: calc(var(--glintprocess-circle-size) * 0.22);
	filter: brightness(0) invert(1) !important;
}

.glintprocess-step.is-hovered .glintprocess-step-content {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

.glintprocess-step.is-hovered .glintprocess-step-title {
	color: white !important;
}

.glintprocess-step.is-hovered .glintprocess-step-subtitle {
	color: white !important;
}

.glintprocess-step.is-hovered .glintprocess-step-hover-text {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ====================== */
/* RESPONSIVE - Desktop   */
/* ====================== */
@media (min-width: 1200px) {
	.glintprocess-count-5 {
		/* Diviseur 4.5 pour que 5 cercles rentrent avec overlap */
		--glintprocess-circle-size: calc((100vw - var(--glintprocess-menu-offset) - 4rem) / 4.5);
		--glintprocess-overlap: calc(var(--glintprocess-circle-size) * 0.2);
	}
	
	.glintprocess-count-4 {
		--glintprocess-circle-size: calc((100vw - var(--glintprocess-menu-offset) - 4rem) / 3.5);
		--glintprocess-overlap: calc(var(--glintprocess-circle-size) * 0.2);
	}
}

/* ====================== */
/* RESPONSIVE - Tablet    */
/* ====================== */
@media (min-width: 768px) and (max-width: 1199px) {
	.glintprocess-count-5 {
		--glintprocess-circle-size: calc((100vw - var(--glintprocess-menu-offset) - 2rem) / 4.5);
		--glintprocess-overlap: calc(var(--glintprocess-circle-size) * 0.18);
	}
	
	.glintprocess-count-4 {
		--glintprocess-circle-size: calc((100vw - var(--glintprocess-menu-offset) - 2rem) / 3.5);
		--glintprocess-overlap: calc(var(--glintprocess-circle-size) * 0.18);
	}
}

/* ====================== */
/* RESPONSIVE - Mobile    */
/* ====================== */
@media (max-width: 767px) {
	/* Reset bloc externe pour mobile - pas de calc() */
	.wp-block-glintprocess-process,
	.wp-block-glintprocess-process.alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: -16px !important;
		margin-right: 0 !important;
		left: 0 !important;
		right: 0 !important;
		position: relative !important;
	}

	/* Reset inner container for mobile - no menu offset */
	.glintprocess-container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 20px 0 !important;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}

	.glintprocess-container::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	.glintprocess-step {
		flex: 0 0 77vw; /* Taille fixe = taille du cercle */
		width: 77vw;
		display: flex;
		justify-content: center;
		align-items: center;
		scroll-snap-align: center;
		scroll-snap-stop: always; /* Force stop on each circle */
		margin-left: -12vw; /* Overlap circles */
	}

	/* First circle - padding pour centrer au départ */
	.glintprocess-step:first-child {
		margin-left: calc((100vw - 77vw) / 2); /* Centre le premier cercle: 11.5vw */
	}

	/* Last circle - padding pour centrer à la fin */
	.glintprocess-step:last-child {
		margin-right: calc((100vw - 77vw) / 2); /* Centre le dernier cercle: 11.5vw */
	}

	.glintprocess-count-5,
	.glintprocess-count-4 {
		--glintprocess-circle-size: 77vw;
		--glintprocess-overlap: 0;
	}

	.glintprocess-step-circle {
		margin-left: 0; /* Reset circle margin, use step margin instead */
	}

	/* Content centered in circle on mobile */
	.glintprocess-step-content {
		left: 12%;
		right: 12%;
		top: 50%;
		transform: translateY(-35%);
	}

	.glintprocess-step-icon img {
		width: 48px;
		height: 48px;
	}

	.glintprocess-step-title {
		font-size: 1rem;
	}

	.glintprocess-step-subtitle {
		font-size: 0.85rem;
	}

	.glintprocess-step-content-text {
		font-size: 0.8rem;
		line-height: 1.5;
	}

	/* Active state for centered circle on mobile */
	.glintprocess-step.is-active .glintprocess-step-circle {
		background: var(--glintprocess-purple);
	}

	.glintprocess-step.is-active .glintprocess-step-icon {
		top: 15%;
		transform: translate(-50%, 0);
	}

	.glintprocess-step.is-active .glintprocess-step-icon img {
		filter: brightness(0) invert(1);
	}

	.glintprocess-step.is-active .glintprocess-step-content {
		opacity: 1;
		visibility: visible;
	}

	.glintprocess-step.is-active .glintprocess-step-title {
		color: white;
	}

	.glintprocess-step.is-active .glintprocess-step-subtitle {
		color: white;
	}

	.glintprocess-step.is-active .glintprocess-step-hover-text {
		opacity: 1;
		visibility: visible;
	}

	/* Hover is JS-driven and disabled on mobile in JS, no CSS override needed */
}