avancé front site inclusion du json

style.css

@@ -1,56 +1,81 @@
 /* Style simple et épuré pour le site d'introduction aux logiciels libres */
 
 body {
-  margin: 0;
-  padding: 0;
-  font-family: system-ui, sans-serif;
-  line-height: 1.6;
-  background: #f5f5f5;
-  color: #222;
+  background: #000;
+  color: #00ff88;
+  font-family: "Courier New", monospace;
+  margin: 2rem;
+  line-height: 1.5; 
 }
-  
+
 header {
-  background: #2c7a7b;
-  color: white;
-  padding: 1.5rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 1rem;
+  background: #001a0f;
+  border-bottom: 2px solid #00ff88;
+  padding: 1rem;
+}
+
+header h1 {
+  margin: 0;
+  line-height: 40px;
+  font-size: 1.8rem;
+  color: #00ffcc;
   text-align: center;
 }
 
+
+.header-gif {
+  width: 40px;        
+  height: 40px;
+  image-rendering: pixelated;
+}
+
+section {
+  border: 1px solid #00ff88;
+  box-shadow: 0 0 10px #00ff88;
+  background: rgba(0, 0, 0, 0.3);
+  padding : 2rem;
+}
+
 main {
   max-width: 800px;
   margin: 2rem auto;
   padding: 1rem;
 }
 
-section {
-  background: white;
-  padding: 1.2rem 1.5rem;
-  margin-bottom: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
 h1, h2 {
   margin-top: 0;
+  /* augmenter la taille et améliorer contraste */
+  color: #00ffcc; /* couleur plus claire que #2c7a7b */
+}
+
+h1 {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  font-size: 2.2rem;
 }
 
 h2 {
-  color: #2c7a7b;
+  font-size: 1.6rem;
 }
 
-/* Barre du menu séparée du titre */
 nav {
-  background: #256f70;       /* Une nuance légèrement plus sombre */
-  padding: 0.6rem 0;         /* Espacement vertical */
-  margin-top: 1rem;          /* Séparation avec le titre */
-  border-radius: 6px;        /* Légère forme arrondie */
+  background: #256f70;       
+  padding: 0.6rem 0;         
+  margin-top: 1rem;          
+  border-radius: 6px;     
 }
 
-/* Menu horizontal */
 .menu {
   list-style: none;
   padding: 0;
   margin: 0;
+  margin-left: 1rem;
+  margin-right: 1rem;
   display: flex;
   gap: 1.5rem;
   justify-content: center;
@@ -61,10 +86,104 @@ nav {
   text-decoration: none;
   font-weight: bold;
   transition: opacity 0.2s;
+  font-size: 1.1rem;
+  outline-offset: 2px; /* pour focus */
+}
+
+/* Focus visible pour clavier */
+.menu a:focus {
+  outline: 3px solid #00ff88;
+  outline-offset: 2px;
 }
 
 .menu a:hover {
-  opacity: 0.65;
+  opacity: 0.8; /* plus visible au hover */
 }
 
+.menu li {
+  border: 2px smooth #00ff88;  /* bordure verte */
+  padding: 0.5rem 1rem;        /* espace intérieur */
+  border-radius: 6px;          /* coins arrondis */
+  background-color: rgba(0, 255, 136, 0.1); /* fond semi-transparent */
+}
 
+.menu li:hover {
+  background-color: #00ff88;  /* fond vert clair au hover */
+}
+
+.menu li a {
+  color: #000; /* texte noir pour contraste sur fond clair */
+  text-decoration: none;
+  font-weight: bold;
+  display: block;  /* pour que le lien prenne toute la "case" */
+}
+
+/* Styles pour la page "Outils Open Source vs Propriétaires" */
+
+.tool-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.tool-card {
+  background: rgba(0, 255, 136, 0.1);
+  border: 1px solid #00ff88;
+  border-radius: 8px;
+  width: 320px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 0 8px #00ff88;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Respecter la préférence "réduire le mouvement" */
+@media (prefers-reduced-motion: reduce) {
+  .tool-card {
+    transition: none;
+  }
+}
+
+.tool-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px #00ff88;
+}
+
+.tool-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.tool-row img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: #000;
+  box-shadow: 0 0 8px #00ff88;
+}
+
+.tool-name {
+  font-weight: bold;
+  font-size: 1.3rem; /* un peu plus grand */
+  color: #00ffcc;    /* couleur plus claire */
+}
+
+.description {
+  font-size: 1rem; /* plus lisible */
+  color: #00ff88;
+  min-height: 60px;
+  line-height: 1.4; /* interligne */
+}
+
+.vs {
+  text-align: center;
+  font-weight: bold;
+  color: #00ff88;
+  margin: 0.5rem 0;
+  user-select: none;
+}