add progression system

css/base.css

@@ -33,7 +33,7 @@ img {
 }
 
 a {
-    color: var(--accent-yellow);
+    color: black;
     text-decoration: none;
 }
 

css/home.css

@@ -15,4 +15,43 @@
     justify-content: center;
     align-items: center;
     height: 200px;
-}
+}
+
+/* Barre de progression */
+
+.progression {
+animation: 3s loadbar;
+width:auto;
+background-color: white;
+display: inline-block;
+padding: 0.7em 0.5em 0.5em 0.5em;
+}
+
+@keyframes loadbar {
+  0% { width:0%; }
+}
+
+.bar {
+width : 50%;
+margin : auto;
+border : 2px solid white;
+display: inline-block;
+}
+.progression > span {
+
+display: inline-block;
+width: 100%;
+font-family: MonTrappist;
+font-size : 1.5em;
+}
+
+.lessthanhalf span {
+    padding-left: 100%;
+    color: white;
+    padding-left: calc(100% + 1em);
+}
+
+.morethanhalf {
+text-align : end;
+color:black;
+}

index.html

@@ -80,8 +80,18 @@
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</p>
 			</section>
-
+			<h3>
-
+				<span>Où en est-on ?</span>
+			</h3>
+			<section>
+				<p>Il y a</p>
+				<div class="places"><span class="bar"><span style="width:25%" class="progression lessthanhalf"><span>50/200</span></span></span></div>
+				<p>places déjà réservées</p>
+				<br>
+				<p>Et nous avons reçu</p>
+				<div class="places"><span class="bar"><span style="width:52.45%" class="progression morethanhalf"><span>52,45%</span></span></span></div>
+				<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
+			</section>
 			<h3>
 				<span>Iels y participent</span>
 			</h3>