fix(my-space): continuous step line, check alignment, compliance_choice deadline (#3207)

Post-review fixes from #3280:

- Vertical line between steps is now continuous: replaced the inter-row `stepLine` divs with an absolutely positioned `::before` pseudo-element on each `.stepRow`, so the line fills the full height alongside step content
- `.transmittedRow` aligns to `flex-start` so the check icon sits on the first text line ("Votre déclaration a été transmise") instead of being centered between the two lines
- `compliance_choice` variant now shows an Échéance row under step 2, matching Figma

Author: Viczei

packages/app/src/modules/my-space/DeclarationProcessPanel.module.scss

@@ -44,11 +44,26 @@
 }
 
 .stepRow {
+	position: relative;
 	display: flex;
 	gap: 1rem;
 	align-items: flex-start;
 }
 
+.stepRow:not(:last-child) {
+	padding-bottom: 1rem;
+}
+
+.stepRow:not(:last-child)::before {
+	content: "";
+	position: absolute;
+	left: 13.5px;
+	top: 28px;
+	bottom: 0;
+	width: 1px;
+	background-color: var(--border-default-grey);
+}
+
 .stepCircle {
 	width: 28px;
 	height: 28px;
@@ -75,13 +90,6 @@
 	background-color: var(--background-flat-success);
 }
 
-.stepLine {
-	width: 1px;
-	min-height: 1rem;
-	margin-left: 14px;
-	background-color: var(--border-default-grey);
-}
-
 .stepContent {
 	display: flex;
 	flex-direction: column;
@@ -94,7 +102,7 @@
 .transmittedRow {
 	display: flex;
 	gap: 0.5rem;
-	align-items: center;
+	align-items: flex-start;
 	width: 100%;
 }
 

packages/app/src/modules/my-space/VerticalStepper.tsx

@@ -57,7 +57,6 @@ export function VerticalStepper({
 					year={year}
 				/>
 			</div>
-			<div className={styles.stepLine} />
 			<div className={styles.stepRow}>
 				<StepCircle number={2} status={step2} />
 				<Step2Content
@@ -69,7 +68,6 @@ export function VerticalStepper({
 					variant={variant}
 				/>
 			</div>
-			<div className={styles.stepLine} />
 			<div className={styles.stepRow}>
 				<StepCircle number={3} status={step3} />
 				<Step3Content
@@ -224,7 +222,12 @@ function Step2Content({
 	}
 
 	if (variant === "compliance_choice") {
-		return <div className={styles.stepContent}>{title}</div>;
+		return (
+			<div className={styles.stepContent}>
+				{title}
+				<DeadlineRow date={campaignDeadlines.decl2ModificationDeadline} />
+			</div>
+		);
 	}
 
 	if (variant === "compliance") {