/* ==========================================================
   Étapes en arc — v1.6

   Référence : 1440 x 720
   ----------------------
     image        709 x 632, collée à gauche
     arc          point actif à 720 px (= 50 % de la largeur),
                  collé au bord haut et au bord bas
     texte        bord droit à 160 px du bord droit

   Traduction en relatif
   ---------------------
     --gr-arc-x        50 %      position du point actif
     --gr-media-h      87.8 %    hauteur de l'image (sa largeur
                                 découle de son propre ratio)
     --gr-text-right   11.11vw   marge droite du bloc de texte
     --gr-radius       44.2 % de la largeur, PLANCHER 52vh

   Le plancher, et non un plafond : le rayon doit toujours
   dépasser la demi-hauteur d'écran, sinon le cercle se
   refermerait avant les bords et l'arc ne serait plus « collé
   en haut et en bas ». À 1440x720 : rayon 636, cercle de
   y=-276 à y=996 pour un écran de 720. Le plancher ne prend le
   dessus que sur un écran très haut (1440x1400 → 728).

   Modèle de positionnement
   ------------------------
   Une seule variable pilote la composition : --gr-arc-x.

     0                       arc_x          arc_x + décalage
     |--------- image -------->|<- numéros ->|---- texte ----|<- 11.11vw ->|
                               |
     centre du cercle = arc_x - rayon   (hors écran à gauche)

   L'arc et les colonnes partagent la même variable : ils ne
   peuvent pas se désynchroniser.

   Blindage contre le CSS du thème :
   - sélecteur racine doublé (.gr-steps.gr-steps) => +1 spécificité
   - !important sur les déclarations écrasées par Uncode
   - les variables restent SANS !important, donc surchargeables
   ========================================================== */

@font-face {
	font-family: "Triakis Font";
	src: url("fonts/triakisfont-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------
   Variables — volontairement sans !important, pour rester
   surchargeables : .ma-classe { --gr-accent: #c00; }
   ---------------------------------------------------------- */

.gr-steps {
	--gr-accent: #FF0000;
	--gr-line: rgba(255, 255, 255, .22);
	--gr-idle: .2;
	--gr-dot: 9px;

	/* position du point actif : 50 % de la largeur */
	--gr-arc-x: var(--gr-arc-ratio, 50%);

	/*
	 * Courbure. Plancher à 52vh pour que le cercle dépasse
	 * toujours le haut et le bas de l'écran.
	 */
	--gr-radius: max(
		calc(100vw * var(--gr-radius-ratio, .442)),
		52vh
	);

	/* le centre du cercle se DÉDUIT, jamais réglé à la main */
	--gr-center-x: calc(var(--gr-arc-x) - var(--gr-radius));

	/* hauteur de l'image : 632 / 720 */
	--gr-media-h: 87.8%;

	/* marge droite du bloc de texte : 160 / 1440 */
	--gr-text-right: 11.11vw;

	/*
	 * Largeur du texte : suit la largeur d'écran jusqu'à 1440,
	 * puis se fige — au-delà, la ligne deviendrait trop longue
	 * à lire (plus de 100 caractères).
	 */
	--gr-text-w: clamp(17rem, 28.9vw, var(--gr-text-width, 26rem));

	/* de quoi dégager les numéros avant le texte */
	--gr-text-offset: clamp(5rem, 9.4vw, 9.5rem);

	/* écart entre le point et le numéro : 39px à 1440 */
	--gr-num-gap: clamp(.875rem, 2.7vw, 2.5rem);
}

/* ==========================================================
   Mode liste (défaut / mobile / sans JS)
   ========================================================== */

.gr-steps.gr-steps {
	position: relative !important;
	margin: 0 !important;
	color: #fff !important;
	background-color: #282828 !important;
}

.gr-steps.gr-steps .gr-steps__arc,
.gr-steps.gr-steps .gr-steps__wheel {
	display: none !important;
}

.gr-steps.gr-steps .gr-steps__stage {
	background-color: #282828 !important;
	background-image: url("grain.svg") !important;
	background-repeat: repeat !important;
	background-size: 200px 200px !important;
	background-position: 0 0 !important;
	background-attachment: scroll !important;
}

.gr-steps.gr-steps .gr-steps__inner {
	display: grid !important;
	gap: 3rem !important;
	margin: 0 !important;
	padding: 4rem 1.25rem !important;
}

.gr-steps.gr-steps .gr-steps__title {
	margin: 0 0 1.75rem !important;
	padding: 0 !important;
	font-family: "Triakis Font", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: var(--gr-accent) !important;
	font-size: clamp(1.25rem, 2.2vw, 2rem) !important;
	line-height: 1.22 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gr-steps.gr-steps .gr-steps__media {
	margin: 0 !important;
	padding: 0 !important;
}

.gr-steps.gr-steps .gr-steps__img {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.gr-steps.gr-steps .gr-steps__img img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.gr-steps.gr-steps .gr-steps__panels,
.gr-steps.gr-steps .gr-steps__col-text {
	margin: 0 !important;
	padding: 0 !important;
}

.gr-steps.gr-steps .gr-steps__panel {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.gr-steps.gr-steps:not(.gr-steps--pinned) .gr-steps__panel + .gr-steps__panel {
	margin-top: 3rem !important;
}

.gr-steps.gr-steps .gr-steps__panel-num {
	margin: 0 0 .5rem !important;
	padding: 0 !important;
	font-family: "Triakis Font", sans-serif !important;
	font-weight: 400 !important;
	font-size: 1.375rem !important;
	line-height: 1 !important;
	color: #fff !important;
	opacity: var(--gr-idle) !important;
	font-variant-numeric: tabular-nums;
}

.gr-steps.gr-steps .gr-steps__heading {
	margin: 0 0 .6875rem !important;
	padding: 0 !important;
	font-size: clamp(.875rem, 1.22vw, 1.125rem) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #fff !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gr-steps.gr-steps .gr-steps__text {
	max-width: 46ch !important;
	margin: 0 !important;
	font-size: clamp(.8125rem, .98vw, .9375rem) !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, .74) !important;
}

.gr-steps.gr-steps .gr-steps__text p {
	margin: 0 0 .85em !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.gr-steps.gr-steps .gr-steps__text > :first-child { margin-top: 0 !important; }
.gr-steps.gr-steps .gr-steps__text > :last-child { margin-bottom: 0 !important; }

/* ==========================================================
   Mode épinglé — classe ajoutée par le JS
   ========================================================== */

.gr-steps.gr-steps--pinned {
	/* piste de scroll : 1 écran + une longueur par transition */
	height: calc(100vh + (var(--gr-count) - 1) * var(--gr-step-scroll)) !important;
	height: calc(100svh + (var(--gr-count) - 1) * var(--gr-step-scroll)) !important;
}

.gr-steps.gr-steps--pinned .gr-steps__stage {
	position: sticky !important;
	top: var(--gr-offset, 0px) !important;
	height: 100vh !important;
	height: 100svh !important;
	overflow: hidden !important;
}

/* ----------------------------------------------------------
   La grille.
   Colonne 1 = de 0 au point actif, sans marge ni padding :
   l'image est collée au bord gauche de l'écran.
   Aucun max-width, aucun centrage.
   ---------------------------------------------------------- */

.gr-steps.gr-steps--pinned .gr-steps__inner {
	position: relative !important;
	display: grid !important;
	grid-template-columns: var(--gr-arc-x) 1fr !important;
	align-items: center !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ----------------------------------------------------------
   Colonne 1 — image collée à gauche, 87,8 % de la hauteur
   ---------------------------------------------------------- */

.gr-steps.gr-steps--pinned .gr-steps__media {
	position: relative !important;
	grid-column: 1 !important;
	height: var(--gr-media-h) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gr-steps.gr-steps--pinned .gr-steps__img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	opacity: 0 !important;
	transform: scale(.97) !important;
	transition: opacity .5s ease, transform .7s ease !important;
}

.gr-steps.gr-steps--pinned .gr-steps__img.is-active {
	opacity: 1 !important;
	transform: none !important;
}

.gr-steps.gr-steps--pinned .gr-steps__img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	/* colle le dessin au bord gauche, quel que soit son ratio */
	object-position: left center !important;
}

/* ----------------------------------------------------------
   Colonne 2 — bloc de texte ancré à droite.
   margin-left:auto le pousse contre le padding droit, donc son
   bord droit reste à --gr-text-right du bord de l'écran.
   ---------------------------------------------------------- */

.gr-steps.gr-steps--pinned .gr-steps__col-text {
	grid-column: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: var(--gr-text-w) !important;
	max-width: none !important;
	margin: 0 var(--gr-text-right) 0 auto !important;
	padding: 0 !important;
	/* garde-fou : ne jamais empiéter sur les numéros */
	min-width: 0 !important;
}

.gr-steps.gr-steps--pinned .gr-steps__panels {
	position: relative !important;
	display: grid !important;
	width: 100% !important;
}

.gr-steps.gr-steps--pinned .gr-steps__panel {
	grid-area: 1 / 1 !important;
	margin: 0 !important;
	opacity: 0 !important;
	transform: translateY(1rem) !important;
	transition: opacity .45s ease, transform .45s ease !important;
	pointer-events: none !important;
}

.gr-steps.gr-steps--pinned .gr-steps__panel.is-active {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

/* le numéro est déjà sur l'arc en mode épinglé */
.gr-steps.gr-steps--pinned .gr-steps__panel-num {
	display: none !important;
}

.gr-steps.gr-steps--pinned .gr-steps__text {
	max-width: 100% !important;
}

/* ----------------------------------------------------------
   Overlay — l'arc.
   Centre déduit de --gr-arc-x. Pas de masque en dégradé :
   l'arc est coupé net par l'overflow de la scène, donc collé
   au bord haut et au bord bas.
   clip-path ne garde que la moitié droite du cercle, pour ne
   jamais le voir se refermer à gauche.
   ---------------------------------------------------------- */

.gr-steps.gr-steps--pinned .gr-steps__arc {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: var(--gr-center-x) !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 1 !important;
	width: calc(var(--gr-radius) * 2) !important;
	height: calc(var(--gr-radius) * 2) !important;
	margin: calc(var(--gr-radius) * -1) 0 0 calc(var(--gr-radius) * -1) !important;
	padding: 0 !important;
	border: 1px solid var(--gr-line) !important;
	border-radius: 50% !important;
	background: none !important;
	pointer-events: none !important;

	clip-path: inset(0 0 0 50%);
}

/* ----------------------------------------------------------
   Overlay — la roue.
   Même centre que l'arc. Le translateX est appliqué APRÈS la
   rotation, donc chaque numéro part vers l'extérieur du rayon :
   toutes les étapes restent du même côté de l'arc.
   ---------------------------------------------------------- */

.gr-steps.gr-steps--pinned .gr-steps__wheel {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: var(--gr-center-x) !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 2 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	/* la roue est un point 0x0 : 50% 50% vaut déjà 0 0, mais on
	   l'explicite pour que la géométrie ne dépende pas de sa taille */
	transform-origin: 0 0 !important;
	/* --gr-p est écrit par le JS à chaque frame */
	transform: rotate(calc(var(--gr-p, 0) * var(--gr-angle) * -1)) !important;
}

.gr-steps.gr-steps--pinned .gr-steps__wheel::before,
.gr-steps.gr-steps--pinned .gr-steps__wheel::after,
.gr-steps.gr-steps--pinned .gr-steps__item::before,
.gr-steps.gr-steps--pinned .gr-steps__item::after,
.gr-steps.gr-steps--pinned .gr-steps__btn::before,
.gr-steps.gr-steps--pinned .gr-steps__btn::after {
	content: none !important;
}

.gr-steps.gr-steps--pinned .gr-steps__item {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	/*
	 * transform-origin OBLIGATOIRE.
	 * Par défaut il vaut 50% 50%, soit le centre de la <li> — qui n'est
	 * pas un point mais la boîte du bouton (~124x51). La rotation
	 * pivoterait alors autour de ce centre et non du centre du cercle :
	 * l'étape 1 (rotate(0)) resterait juste, mais l'erreur croîtrait avec
	 * l'angle, jusqu'à ~83 px sur la 6e étape.
	 */
	transform-origin: 0 0 !important;
	transform: rotate(calc(var(--n) * var(--gr-angle))) translateX(var(--gr-radius)) !important;
	opacity: var(--gr-idle) !important;
	transition: opacity .35s ease !important;
}

.gr-steps.gr-steps--pinned .gr-steps__item.is-active {
	opacity: 1 !important;
}

.gr-steps.gr-steps--pinned .gr-steps__btn {
	display: flex !important;
	align-items: center !important;
	gap: var(--gr-num-gap) !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: .5rem !important;
	/* recentre le point exactement sur la ligne de l'arc */
	transform: translate(calc(var(--gr-dot) / -2 - .5rem), -50%) !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}

.gr-steps.gr-steps--pinned .gr-steps__btn:hover,
.gr-steps.gr-steps--pinned .gr-steps__btn:active {
	background: none !important;
	box-shadow: none !important;
	transform: translate(calc(var(--gr-dot) / -2 - .5rem), -50%) !important;
}

.gr-steps.gr-steps--pinned .gr-steps__dot {
	flex: 0 0 auto !important;
	display: block !important;
	width: var(--gr-dot) !important;
	height: var(--gr-dot) !important;
	border-radius: 50% !important;
	background: #fff !important;
	transition: transform .3s ease !important;
}

.gr-steps.gr-steps--pinned .gr-steps__num {
	display: block !important;
	font-family: "Triakis Font", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	/* 35px à 1440, plafonné au-delà */
	font-size: clamp(1.25rem, 2.4vw, 2.1875rem) !important;
	line-height: 1 !important;
	color: #fff !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-variant-numeric: tabular-nums;
}

.gr-steps.gr-steps--pinned .gr-steps__item.is-active .gr-steps__dot {
	transform: scale(1.45) !important;
}

.gr-steps.gr-steps--pinned .gr-steps__btn:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 4px !important;
	border-radius: 4px !important;
}

/* le focus doit rester visible même sur une étape inactive */
.gr-steps.gr-steps--pinned .gr-steps__item:focus-within {
	opacity: 1 !important;
}

/* ==========================================================
   Adaptations
   ========================================================== */

/* --- Viewport court : on resserre les numéros et le texte ---
   Le rayon n'est PAS réduit : l'arc doit rester collé aux
   bords, donc les étapes extrêmes sortent de l'écran par le
   haut et par le bas. C'est le comportement de la maquette. */

@media (max-height: 700px) {
	.gr-steps {
		--gr-num-gap: clamp(.75rem, 2vw, 1.5rem);
		--gr-text-offset: clamp(4.25rem, 7vw, 7rem);
	}

	.gr-steps.gr-steps--pinned .gr-steps__num {
		font-size: clamp(1.125rem, 1.9vw, 1.625rem) !important;
	}
}

/* --- Écrans intermédiaires --------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
	.gr-steps {
		--gr-text-width: 21rem;
		--gr-text-right: 7vw;
	}
}