.gitignore

@@ -2,3 +2,4 @@ public/
 node_modules/
 *.swp
 .awsclirc
+.idea

static/css/home.css

@@ -37,6 +37,8 @@ div#jardin p{
 h2#infras{
 	background-color: var(--infras);
 	grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
+	padding-bottom: 10px; /* Ajoutez de l'espace en dessous du texte */
+
 }
 
 div#rennes{

static/css/layout.css

@@ -33,6 +33,11 @@
 }
 
 /* PAR DEFAUT */
+
+h1 > .decoration:last-of-type:before, h2 > .decoration:last-of-type:before{
+	content: '\A____________________________________\A""""""""""""""""""""""""""""""""""""';
+}
+
 html, body, main{
 	margin:0;
 	padding: 0;
@@ -66,10 +71,6 @@ nav ul{
 	margin: 0px;
 }
 
-h1:after, h2:after{
-	content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""';
-}
-
 h2, h1{
 	font-size: 1rem;
 	font-weight: normal;
@@ -209,15 +210,15 @@ pre.center > a{
 		--small_margin:5px;
 	}
 
-	h1:before, h1:after{
+	h1 > .decoration:last-of-type:before{
 		content: '';
 	}
 
-	h2:before{
+	h2 > .decoration:first-of-type:before{
 		content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* ';
 	}
 
-	h2:after{
+	h2 > .decoration:last-of-type:before{
 		content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""';
 	}
 

static/index.html

@@ -101,7 +101,7 @@
   <div id="container">
 
     <header>
-        <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
+        <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche" aria-hidden="true">💮💮 </span>deuxfleurs<span class="decoration"></span></h1>
     </header>
 
     <main aria-label="contenu de la page web">
@@ -489,8 +489,8 @@
         </div>
         <p>Fabriquons un internet convivial ⤵</p>
       </div>
-      <h2 id="infras">Avec nos propres infrastructures</h2>
-      <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon">
+      <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 ?-->
         <pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
 |                        ||             ||             ||                       |
@@ -721,7 +721,7 @@
 \___________`_______________________________________________________`___________/</pre>
       </div>
       <p id="txt_infras" lang="fr">Nous fournissons des services numériques garantis "sans datacenter". À la place, nous utilisons moins d'une dizaine de vieux ordinateurs reconditionnés à nos domiciles qui peuvent fournir des services numériques à plusieurs dizaines de milliers de personnes. Actuellement ces ordinateurs sont situés à Orsay, Lille et Bruxelles. Nous avons également des machines à Suresnes pour les sauvegardes. <a href="https://guide.deuxfleurs.fr/infrastructures/">En savoir plus</a>. <br><br>Cette infrastructure atypique nous mène à développer de nouveaux logiciels libres. Si vous êtes dans la technique, vous pourriez être intéressé·e par <a href="https://garagehq.deuxfleurs.fr/">Garage</a>, <a href="https://bottin.eu">Bottin</a>, <a href="https://git.deuxfleurs.fr/lx/tricot">Tricot</a>, <a href="https://git.deuxfleurs.fr/Deuxfleurs/diplonat">Diplonat</a> et nos <a href="https://git.deuxfleurs.fr/Deuxfleurs">autres projets</a>.</p>
-      <h2 id="outils">Avec nos services sobres</h2>
+        <h2 id="outils"><span class="decoration" aria-hidden="true"></span>Avec nos services sobres<span class="decoration" aria-hidden="true"></span></h2>
       <div id="ordinateur">
         <pre class="center" aria-hidden="true">
 
@@ -847,8 +847,8 @@
         <p>Envie de faire entendre votre voix sur Internet ? Nous mettons à disposition plusieurs outils de publication sur le web allant de la plateforme de blog partagée à la publication de sites web en autonomie.</p>
         <p>Prenez contact avec nous, nous vous aiderons à identifier les outils dont vous avez besoin et nous vous accompagnerons dans votre transition. ⤵</p>
       </div>
-      <h2 id="valeurs">Avec des valeurs fortes</h2>
-      <div id="ronce">
+        <h2 id="valeurs"><span class="decoration" aria-hidden="true"></span>Avec des valeurs fortes<span class="decoration" aria-hidden="true"></span></h2>
+        <div id="ronce">
         <img src="./ronce.webp" loading="lazy" alt="Deux personnages qui regardent et s'avancent vers une maison cabane perchée dans un arbre, illustrant notre envie d'un internet plus éthique.">
       </div>
       <section id="liste_valeurs">
@@ -858,7 +858,7 @@
         <p id="liberte">La liberté <span class="description">- eg. permettre à toutes et tous de s'exprimer, respecter la vie privée</span></p>
         <p id="suivre"><a href="https://plume.deuxfleurs.fr/timeline/1">Suivez notre actualité, réflexions et analyses sur notre blog Plume</a></p>
       </section>
-      <h2 id="connaissance">Faisons connaissance</h2>
+      <h2 id="connaissance"><span class="decoration" aria-hidden="true"></span>Faisons connaissance<span class="decoration" aria-hidden="true"></span></h2>
       <div id="txt_connaissance">
 	      <p lang="fr">L'accès à nos services est à prix libre. Nous estimons leur coût à 15€/an/compte pour leur maintien en fonctionnement et recommandons le double pour permettre à l'association de se développer. Il est conditionné par les ressources disponibles, à la fois matérielles et humaines.</p>
 	      <p lang="fr">Pour accéder à nos services ou simplement discuter avec nous, écrivez à <span style="text-decoration: underline;">coucou[@]deuxfleurs.fr</span>, rejoignez-nous sur le salon Matrix <span style="text-decoration: underline;">#deuxfleurs:deuxfleurs.fr</span> ou rencontrez-nous à : </p>
@@ -917,6 +917,7 @@
 |  ———— ———— ———— ————                 |
 |______________________________________|</pre>
 	</div>
+      </div>
 
     </main>
     <footer class="noscroll" aria-label="pied de page et liens vers CGU, mentions, sources et risques">