diff --git a/html/index.html b/html/index.html
index d0e2613..89394da 100644
--- a/html/index.html
+++ b/html/index.html
@@ -10,13 +10,15 @@
- Introduction aux Logiciels Libres
+
+ Logiciels Libres
diff --git a/html/outils.html b/html/outils.html
new file mode 100644
index 0000000..392137b
--- /dev/null
+++ b/html/outils.html
@@ -0,0 +1,285 @@
+
+
+
+
+
+
+ Outils Open Source vs Propriétaires
+
+
+
+ Outils Open Source vs Propriétaires
+
+
+
+
+
+
diff --git a/html/partenaires.html b/html/partenaires.html
index 1309d01..824d3d4 100644
--- a/html/partenaires.html
+++ b/html/partenaires.html
@@ -9,6 +9,7 @@
diff --git a/html/pokemon.html b/html/pokemon.html
index d9a2f14..f28e030 100644
--- a/html/pokemon.html
+++ b/html/pokemon.html
@@ -9,6 +9,7 @@
diff --git a/html/qcm.html b/html/qcm.html
index a80a2f3..428db86 100644
--- a/html/qcm.html
+++ b/html/qcm.html
@@ -9,6 +9,7 @@
diff --git a/pinguin.gif b/pinguin.gif
new file mode 100644
index 0000000..095fe31
Binary files /dev/null and b/pinguin.gif differ
diff --git a/style.css b/style.css
index d6fa0f1..643e89d 100644
--- a/style.css
+++ b/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;
+}
+