/* Widget « Étapes CercleKit » (cd_steps).
   Réglages → variables --ck-st-* posées sur {{WRAPPER}} .ck-st ; ici on les
   CONSOMME avec un repli — jamais de défaut déclaré sur l'enfant (il
   écraserait les réglages posés sur le wrapper). */

.ck-st {
	--ck-st-d: 0ms; /* délai de cascade, posé par le JS d'apparition */
	display: flex;
	flex-direction: column;
	gap: var(--ck-st-gap, 40px);
	text-align: var(--ck-st-align, left);
}

/* ========== Étape ========== */
.ck-st__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ck-st-gap-marker, 24px);
	background: var(--ck-st-card-bg, transparent);
	border: var(--ck-st-card-bw, 0px) solid var(--ck-st-card-bc, transparent);
	border-radius: var(--ck-st-card-radius, 0px);
	padding: var(--ck-st-card-pad, 0px);
	box-sizing: border-box;
	min-width: 0;
}

/* ========== Horizontal : grille de cartes, marqueur au-dessus ========== */
.ck-st--horizontal {
	display: grid;
	grid-template-columns: repeat(var(--ck-st-cols, 4), minmax(0, 1fr));
	align-items: stretch;
}
.ck-st--horizontal .ck-st__item {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ck-st-gap-marker, 16px);
}
/* Alignement centre : classe posée au rendu (pas de sniffing de style). */
.ck-st--center .ck-st__item { align-items: center; }

/* ========== Défilement horizontal figé (moteur partagé ck-hscroll) ==========
   Le moteur emballe les enfants de .ck-hscroll--active en slides. Le repli
   « rangée défilable » n'existe QUE tant que le moteur n'a pas emballé
   (avant JS, éditeur) : un overflow≠visible laissé sur le conteneur une fois
   emballé TUERAIT le position:sticky → plus aucun effet de scroll (vécu). */
.ck-st--hscroll:not(.ck-hs--wrapped) {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--ck-st-gap, 40px);
	overflow-x: auto;
}
.ck-st--hscroll:not(.ck-hs--wrapped) > .ck-st__item,
.ck-st--hscroll:not(.ck-hs--wrapped) > .ck-st__group { flex: 0 0 auto; min-width: 240px; }
/* Une fois emballé : le conteneur redevient neutre, le moteur pilote tout. */
.ck-st--hscroll.ck-hs--wrapped { display: block; overflow: visible; }

/* Rangées : les étapes d'une même colonne s'empilent. */
.ck-st__group {
	display: flex;
	flex-direction: column;
	gap: var(--ck-st-gap, 40px);
	min-width: 0;
}

/* ========== Contenu ========== */
.ck-st__content { min-width: 0; flex: 1 1 auto; }
.ck-st__title { margin: 0 0 var(--ck-st-gap-title, 10px); }
.ck-st__text { margin: 0; }
.ck-st__text > :first-child { margin-top: 0; }
.ck-st__text > :last-child { margin-bottom: 0; }

/* ========== Titre seul : il se centre sur le marqueur ==========
   Une étape sans texte ni image n'a qu'un titre — deux lignes de haut au
   mieux, contre 44 px de pastille. Aligné en haut comme les autres, il flotte
   au-dessus du centre du rond et la rangée paraît de travers.

   On ne touche PAS à `align-items` de l'étape : le marqueur doit rester en
   haut, sinon la ligne de liaison — qui part de `haut du marqueur + sa
   hauteur` — tomberait à côté dès qu'un titre passe sur deux lignes. C'est le
   CONTENU qui prend au moins la hauteur du marqueur et centre ce qu'il porte :
   titre court, il est au milieu ; titre long, la boîte grandit et on retrouve
   l'alignement en haut, sans décaler quoi que ce soit.

   Et la marge sous le titre s'en va : elle sert à séparer du texte, il n'y en
   a pas — laissée là, elle repousserait le titre vers le haut du centre.

   `--ck-st-mk-h` est la hauteur du marqueur selon sa forme, posée sur le
   conteneur (là où vivent les réglages). Marqueur « aucun » : personne ne la
   pose, le repli 0 s'applique et rien ne change.

   LIMITE ASSUMÉE, mesurée au banc : quand le marqueur est PLUS PETIT que le
   titre — le rond plein de 14 px face à une ligne de 26 px — il reste en haut
   et le titre est 6 px plus bas que lui. Le centrer voudrait dire descendre le
   marqueur, et la ligne de liaison part du BAS DU MARQUEUR calculé depuis le
   haut de l'étape : elle mordrait sur le rond d'autant. Un rond plus grand que
   le titre, lui, est bien centré — la règle vaut pour toutes les formes, c'est
   la taille qui décide. */
.ck-st--marker-badge  { --ck-st-mk-h: var(--ck-st-badge-size, 44px); }
.ck-st--marker-number { --ck-st-mk-h: var(--ck-st-num-size, 64px); }
.ck-st--marker-icon   { --ck-st-mk-h: var(--ck-st-icon-size, 32px); }
.ck-st--marker-dot    { --ck-st-mk-h: var(--ck-st-dot-size, 14px); }
.ck-st--vertical .ck-st__item--titre-seul .ck-st__content {
	min-height: var(--ck-st-mk-h, 0px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ck-st--vertical .ck-st__item--titre-seul .ck-st__title { margin-bottom: 0; }

/* Spécificité (0,2,0) obligatoire : Elementor reset `.elementor img
   { height: auto; max-width: 100% }` (0,1,1) écraserait la hauteur réglée. */
.ck-st .ck-st__img {
	display: block;
	width: var(--ck-st-img-w, 100%);
	max-width: 100%;
	height: var(--ck-st-img-h, auto);
	object-fit: var(--ck-st-img-fit, cover);
	border-radius: var(--ck-st-img-radius, 8px);
	margin: 0 auto var(--ck-st-img-mb, 14px);
}
.ck-st:not(.ck-st--center) .ck-st__img { margin-left: 0; }

/* ========== Marqueur : pastille ========== */
.ck-st--marker-badge .ck-st__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ck-st-badge-size, 44px);
	height: var(--ck-st-badge-size, 44px);
	border-radius: 50%;
	background: var(--ck-st-badge-bg, #d85830);
}
.ck-st--marker-badge .ck-st__num {
	color: var(--ck-st-badge-color, #ffffff);
	font-size: var(--ck-st-badge-fs, 17px);
	font-weight: 700;
	line-height: 1;
}

/* ========== Marqueur : grand numéro ========== */
.ck-st--marker-number .ck-st__marker { flex: 0 0 auto; line-height: 1; }
.ck-st--marker-number .ck-st__num {
	font-size: var(--ck-st-num-size, 64px);
	font-weight: var(--ck-st-num-weight, 800);
	line-height: 1;
}
.ck-st--num-solid .ck-st__num { color: var(--ck-st-num-color, #d85830); }
.ck-st--num-grad .ck-st__num {
	background: linear-gradient(var(--ck-st-num-grad-angle, 135deg), var(--ck-st-num-grad-a, #e2533b), var(--ck-st-num-grad-b, #6d4bd8));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ck-st--num-outline .ck-st__num {
	color: transparent;
	-webkit-text-stroke: var(--ck-st-num-stroke, 2px) var(--ck-st-num-color, #d85830);
}

/* ========== Marqueur : rond plein ==========
   Un disque, rien dedans — le repère sans la numérotation. `line-height: 0`
   sur le marqueur : le span est inline-block, la hauteur de ligne du texte
   ajouterait sinon du vide sous le rond. */
.ck-st--marker-dot .ck-st__marker { flex: 0 0 auto; line-height: 0; }
.ck-st--marker-dot .ck-st__dot {
	display: inline-block;
	width: var(--ck-st-dot-size, 14px);
	height: var(--ck-st-dot-size, 14px);
	border-radius: 50%;
	background: var(--ck-st-dot-bg, #d85830);
}

/* ========== Marqueur : icône ==========
   `line-height: 1` comme le grand numéro et le rond : le marqueur est une
   boîte en ligne, et la hauteur de ligne héritée du site lui ajoutait du vide
   sous l'icône — 39,1 px mesurés pour une icône de 32. Ce vide décalait le
   centrage du titre seul, et la ligne de liaison partait 7 px trop haut.
   `display: flex` finit le travail : l'icône est une boîte EN LIGNE, donc
   posée sur la ligne de base, ce qui laissait encore 2 px de descente sous
   elle (34 px mesurés pour 32). Enfant d'un conteneur flex, elle n'a plus de
   ligne de base : la boîte du marqueur fait exactement la taille réglée. */
.ck-st--marker-icon .ck-st__marker { flex: 0 0 auto; display: flex; line-height: 1; }
.ck-st--marker-icon .ck-st__icon {
	display: inline-flex;
	font-size: var(--ck-st-icon-size, 32px);
	color: var(--ck-st-icon-color, #d85830);
	line-height: 1;
}
.ck-st--marker-icon .ck-st__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ========== Vertical : ligne de liaison entre marqueurs ==========
   La ligne va du BAS d'un marqueur au HAUT du suivant. Deux défauts corrigés,
   tous deux MESURÉS au banc et non déduits :

   1. Le retrait de 8 px codé en dur ne valait qu'en haut (`top: marqueur +
      8px`). En bas, `bottom: -gap - 8px` faisait l'inverse : la ligne
      DÉPASSAIT de 8 px sur le marqueur suivant. Un trou d'un côté, un
      chevauchement de l'autre — la ligne ne touchait la pastille que par le
      bas. C'est maintenant un réglage, `--ck-st-line-inset`, à 0 par défaut :
      elle touche les deux marqueurs.

   2. Un pseudo-élément absolu se positionne sur la BOÎTE DE PADDING de son
      parent. Dès qu'une marge interne de carte est réglée, le marqueur
      descend de `padding-top` — la ligne, elle, ne le savait pas. Mesuré à
      30 px de marge interne : la ligne commençait 22 px À L'INTÉRIEUR de la
      pastille du haut et s'arrêtait 22 px avant celle du bas, décalée en plus
      de tout le padding gauche. Le `--ck-st-card-pad-fallback` qui prétendait
      corriger l'axe horizontal n'était posé par PERSONNE : il valait 0 depuis
      toujours. Les composantes utiles de la marge interne et l'épaisseur de
      bordure entrent maintenant dans le calcul.

   Les variantes de marqueur ne redéfinissent QUE sa métrique (`--ck-st-mk`,
   `--ck-st-mk-x`) : la géométrie ne s'écrit qu'à un seul endroit, donc une
   correction ne peut plus en oublier deux. */
.ck-st--vertical .ck-st__item { position: relative; }
.ck-st--vertical.ck-st--line .ck-st__item:not(:last-child)::before {
	content: '';
	position: absolute;

	/* Métrique du marqueur : la pastille par défaut. */
	--ck-st-mk: var(--ck-st-badge-size, 44px);
	--ck-st-mk-x: calc(var(--ck-st-mk) / 2);

	left: calc(var(--ck-st-card-pad-l, 0px) + var(--ck-st-mk-x));
	top: calc(var(--ck-st-card-pad-t, 0px) + var(--ck-st-mk) + var(--ck-st-line-inset, 0px));
	/* Jusqu'au haut du marqueur suivant : on sort de la boîte de padding (la
	   bordure basse), on traverse l'écart entre étapes, puis on rentre dans la
	   suivante (sa bordure haute, sa marge interne haute). La marge interne
	   BASSE n'y figure pas — elle est déjà dans la boîte de padding. */
	bottom: calc(
		var(--ck-st-line-inset, 0px)
		- 2 * var(--ck-st-card-bw, 0px)
		- var(--ck-st-gap, 40px)
		- var(--ck-st-card-pad-t, 0px)
	);
	border-left: var(--ck-st-line-w, 1px) var(--ck-st-line-style, solid) var(--ck-st-line-color, #e3e3e3);
	transform: translateX(-50%);
}
/* Grand numéro : le 0.32 suppose un chiffre large de 0.64em, ce qui vaut pour
   les polices à chiffres TABULAIRES (Inter, Roboto, Poppins…) — tous les
   chiffres y ont la même avance.
   LIMITE ASSUMÉE, mesurée au banc : avec des chiffres PROPORTIONNELS (SF Pro
   / system-ui), le « 1 » ne fait que 31,7 px là où le « 0 » en fait 43 — la
   ligne tombe alors ~5 px à côté des glyphes étroits. Aucune constante ne peut
   corriger ça : la largeur dépend du chiffre affiché, et CSS ne la connaît pas
   (`1ch` mesure le « 0 », donc pas le « 1 »). Une passe JS qui mesure le
   marqueur serait le seul moyen d'être exact — pas fait : la ligne doit rester
   juste sans JavaScript, et la pastille, elle, est exacte. */
.ck-st--vertical.ck-st--line.ck-st--marker-number .ck-st__item:not(:last-child)::before {
	--ck-st-mk: var(--ck-st-num-size, 64px);
	--ck-st-mk-x: calc(var(--ck-st-num-size, 64px) * 0.32);
}
.ck-st--vertical.ck-st--line.ck-st--marker-icon .ck-st__item:not(:last-child)::before {
	--ck-st-mk: var(--ck-st-icon-size, 32px);
}
.ck-st--vertical.ck-st--line.ck-st--marker-dot .ck-st__item:not(:last-child)::before {
	--ck-st-mk: var(--ck-st-dot-size, 14px);
}

/* ========== Apparition (reprise Timeline) ==========
   L'état masqué n'existe QUE sous .ck-st--appear-armed, posée par le JS —
   jamais en éditeur, mouvement réduit ou sans IntersectionObserver. */
.ck-st--appear-armed .ck-st__item {
	transition:
		opacity   var(--ck-st-appear-dur, 600ms) ease var(--ck-st-d),
		transform var(--ck-st-appear-dur, 600ms) cubic-bezier(.22, .8, .3, 1) var(--ck-st-d),
		filter    var(--ck-st-appear-dur, 600ms) ease var(--ck-st-d),
		clip-path var(--ck-st-appear-dur, 600ms) cubic-bezier(.22, .8, .3, 1) var(--ck-st-d);
}
.ck-st--appear-fade.ck-st--appear-armed .ck-st__item:not(.is-in) { opacity: 0; }
.ck-st--appear-up.ck-st--appear-armed .ck-st__item:not(.is-in) { opacity: 0; transform: translateY(28px); }
.ck-st--appear-zoom.ck-st--appear-armed .ck-st__item:not(.is-in) { opacity: 0; transform: scale(.92); }
.ck-st--appear-blur.ck-st--appear-armed .ck-st__item:not(.is-in) { opacity: 0; filter: blur(10px); }
.ck-st--appear-reveal.ck-st--appear-armed .ck-st__item:not(.is-in) { clip-path: inset(0 100% 0 0); }
.ck-st--appear-reveal.ck-st--appear-armed .ck-st__item { clip-path: inset(0 0 0 0); }

/* Pop penché : inclinaison alternée, remise droite à l'entrée. */
.ck-st--appear-pop.ck-st--appear-armed .ck-st__item:not(.is-in) { opacity: 0; transform: scale(.9) rotate(var(--ck-st-rot, 0deg)); }
.ck-st--appear-pop.ck-st--appear-armed .ck-st__item:nth-child(odd):not(.is-in)  { --ck-st-rot: var(--ck-st-tilt, 3deg); }
.ck-st--appear-pop.ck-st--appear-armed .ck-st__item:nth-child(even):not(.is-in) { --ck-st-rot: calc(var(--ck-st-tilt, 3deg) * -1); }