label des différents nav et utilisation variable CSS pour marge

static/css/home.css

@@ -28,6 +28,11 @@ div#jardin p {
   justify-content: center;
 }
 
+nav#sommaire {
+  text-align: center;
+  margin-top: var(--med_margin);
+}
+
 h2#infras {
   background-color: var(--infras);
   grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
@@ -390,6 +395,7 @@ div#blog {
     grid-area: row-start / col-sep 1 / jardin-end / col-sep 11;
   }
 
+
   nav#menu {
     position: fixed;
     width: 100%;
@@ -532,7 +538,7 @@ div#blog {
     font-size: 0.85rem;
   }
 
-  #liens {
+  nav#liens {
     text-align: center;
     margin-bottom: 12rem;
   }

static/css/layout.css

@@ -251,7 +251,7 @@ pre.center > a {
   div#container, nav#menu, body {
     background-color: var(--night-background);
   }
-  p, pre, ul, li, a, a:hover, h1, h2, footer {
+  p, pre, ul, li, a, a:hover, h1, h2, footer, nav {
     color: var(--txt-night);
   }
   .highlight {

static/index.html

@@ -488,7 +488,12 @@
                                                     </pre>
         </div>
         <p>Fabriquons un internet convivial ⤵</p>
+
+        <nav id="sommaire" aria-label="sommaire">
+          <a href="#infras">Infrastructures</a><span role="separator"> · </span><a href="#outils">Services</a><span role="separator"> · </span><a href="#valeurs">Valeurs</a><span role="separator"> · </span><a href="#connaissance">Faisons connaissance</a>
+        </nav>
       </div>
+
       <h2 id="infras"><span class="decoration" aria-hidden="true"></span>Avec nos propres infrastructures<span class="decoration" aria-hidden="true"></span></h2>
       <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon">
       <!--diode qui clignote ?-->
@@ -1386,9 +1391,9 @@ _ `  ^ ¨  ·  _ -  "             ` *     -     ; - _
 
                                                                                                                                                                  </pre>
       </div>
-      <div id="liens">
+      <nav id="liens" aria-label="liens de pied de page">
         <a href="https://guide.deuxfleurs.fr/vie_associative/cgu/">CGU</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/gestion-des-risques/">Gestion des risques</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/mentions-legales">Mentions légales</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/operations/sources">Sources</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/nous-rejoindre/">Nous rejoindre</a>
-      </div>
+      </nav>
     </footer>
   </div>
   <!-- script animations -->