Conception (graphique) de la navigation entre les pages du formulaire (entre les différentes fiches relations + mini fiches relations)

css/timeline-form.scss

@@ -402,4 +402,38 @@
 	}
 
 
+	/* (13) Gestion de la navigation fléchée */
+	& .arrow-container{
+
+	    & span{
+	        display: inline-block;
+	        position: relative;
+
+	        margin: 0;
+	        padding: .5em .8em;
+
+	        border: 1px solid darken(#d8e0e9, 10);
+
+	        color: darken(#d8e0e9, 30);
+
+	        cursor: pointer;
+
+	        @include transition( .2s ease-in-out );
+
+
+	        &:first-child{ border-radius: 5px 0 0 5px; }
+	        &:last-child{ border-radius: 0 5px 5px 0; }
+
+	        // Animation de hover
+	        &:hover,
+	        &.active:not(:first-child):not(:last-child){
+	            border-color: $timeline-2;
+	            background: $timeline-2;
+	            color: #fff;
+	            // font-weight: bold;
+	        }
+	    }
+
+	}
+
 }

view/input.php

@@ -83,9 +83,34 @@
 
 
 
-
 		<!-- GESTION DES FICHES RELATIONS -->
 		<h3 data-n='4' class='color4'>Remplir les fiches relations complètes des contacts les plus contactés</h3>
+
+		<div class='arrow-container line'>
+			<span>&laquo;</span>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+			<span>4</span>
+			<span>5</span>
+			<span>6</span>
+			<span>7</span>
+			<span>8</span>
+			<span>9</span>
+			<span>10</span>
+			<span>11</span>
+			<span>12</span>
+			<span>13</span>
+			<span>14</span>
+			<span>15</span>
+			<span>16</span>
+			<span>17</span>
+			<span>18</span>
+			<span>19</span>
+			<span>20</span>
+			<span>&raquo;</span>
+		</div>
+
 		<article class='relation-panel'>
 			<article class='fiche-relation'>
 				<span data-space></span>