armentieres: fix tracking code input content and look (#70745)

static/armentieres/_combo.scss

@@ -234,37 +234,69 @@ div.wcscurrentformscell {
 .gru-content div.tracking-code-input-cell {
 	background: right / cover url('/assets/tracking-code-input:background');
 	div.wcs-tracking-code-input {
-		padding: 1rem;
+		padding: 1rem 2rem;
+
+		h2:first-child {
+			color: black;
+			background: transparent;
+			font-size: $fz-4;
+			margin: 0;
+			padding: 0;
+
+			@media($max-mobile-viewport) {
+				text-align: center;
+			}
+		}
+
 		div {
 			padding: 0;
 
 			form {
 				display: flex;
 				flex-wrap: wrap;
-				input {
-					flex-grow: 99999;
-					width: 11rem;
+
+				p {
+					padding: 0;
+					margin: 0.5rem 0 1rem 0;
 				}
+
+				input {
+					width: 4rem;
+					margin: 0;
+					flex-grow: 99999;
+
+					border: transparent;
+					box-shadow: none;
+
+					@media ($min-desktop-viewport) {
+						border-top-right-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+
+					@media ($max-mobile-viewport) {
+						width: 11rem;
+						margin-bottom: 0.5rem;
+					}
+				}
+
 				button {
-					flex-grow: 1;
 					@extend %black-button;
-					margin-right: 0;
+
 					min-width: 10rem;
+					flex-grow: 1;
+					margin-right: 0;
+					@media ($min-desktop-viewport) {
+						border-top-left-radius: 0;
+						border-bottom-left-radius: 0;
+					}
 
 					&, &:hover {
-						color: $primary-color;
+						color: white;
 					}
 				}
 			}
 		}
 	}
-
-	h2:first-child {
-		color: black;
-		background: transparent;
-		margin-bottom: 0.5rem;
-	}
-
 }
 
 // Custom elements

static/armentieres/_vars.scss

@@ -94,6 +94,7 @@ $cell-entry-border: none;
 
 $widget-focus-outline: none;
 $widget-focus-box-shadow: 0 0 5px 2px $gray-light;
+$widget-padding: 0.45rem 1rem;
 
 // Footer
 $footer-background: $gray-dark;

templates/variants/armentieres/combo/wcs/tracking_code_input.html

@@ -0,0 +1,13 @@
+{% extends "combo/wcs/tracking_code_input.html" %}
+
+{% block title %}
+  <h2>Votre code de suivi :</h2>
+{% endblock %}
+
+{% block intro-text %}
+	<p>
+    Un code de suivi est associé à chaque demande afin de faciliter vos
+    échanges avec les services de la Mairie. Pour retrouver votre demande via le code de suivi, indiquez-le
+    ci-dessous : 
+	</p>
+{% endblock %}