ajout d'outils web

index.html

@@ -38,7 +38,7 @@
     display:flex;
     align-items:center;
     justify-content:center;
-    padding:24px;
+    padding:32px 24px;
     -webkit-font-smoothing:antialiased;
   }
   body::before{
@@ -51,28 +51,38 @@
     pointer-events:none;
     z-index:0;
   }
-  .wrap{position:relative;z-index:1;width:100%;max-width:760px}
+  .wrap{position:relative;z-index:1;width:100%;max-width:820px}
 
   .header{text-align:center;margin-bottom:40px}
   .header h1{font-size:1.8rem;margin-bottom:8px}
   .header p{color:var(--muted);font-size:1rem}
 
+  .section-titre{
+    font-size:0.8rem;
+    font-weight:600;
+    text-transform:uppercase;
+    letter-spacing:0.08em;
+    color:var(--muted);
+    margin:36px 4px 16px;
+  }
+  .section-titre:first-of-type{margin-top:0}
+
   .grid{
     display:grid;
-    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
-    gap:24px;
+    gap:20px;
   }
   .tile{
     background:var(--card);
     border:1px solid var(--border);
     border-radius:20px;
-    padding:32px 24px;
+    padding:28px 20px;
     text-decoration:none;
     color:var(--text);
     display:flex;
     flex-direction:column;
     align-items:center;
-    gap:18px;
+    gap:16px;
     box-shadow:var(--shadow);
     transition:transform .15s ease, background .2s ease, border-color .2s ease;
   }
@@ -82,18 +92,18 @@
     border-color:var(--accent);
   }
   .tile .icon{
-    width:96px;height:96px;
+    width:76px;height:76px;
-    border-radius:24px;
+    border-radius:20px;
     display:flex;align-items:center;justify-content:center;
     background:var(--accent-soft);
   }
-  .tile .icon svg{width:52px;height:52px}
+  .tile .icon svg{width:42px;height:42px}
-  .tile .title{font-size:1.25rem;font-weight:600}
+  .tile .title{font-size:1.15rem;font-weight:600}
-  .tile .subtitle{font-size:0.9rem;color:var(--muted);text-align:center;margin-top:-8px}
+  .tile .subtitle{font-size:0.85rem;color:var(--muted);text-align:center;margin-top:-6px}
 
   .footer{
     text-align:center;
-    margin-top:48px;
+    margin-top:44px;
     color:var(--muted);
     font-size:0.85rem;
   }
@@ -104,11 +114,12 @@
 
   <div class="header">
     <h1>Bonjour Johanne 👋</h1>
-    <p>Tes environnements de développement et de statistiques</p>
+    <p>Tes outils de travail, réunis au même endroit</p>
   </div>
 
+  <!-- ============ DÉVELOPPEMENT & STATISTIQUES ============ -->
+  <div class="section-titre">Développement &amp; statistiques</div>
   <div class="grid">
-    <!-- RStudio -->
     <a class="tile" href="https://rstudio.lemmensjohanne.be" target="_blank" rel="noopener">
       <div class="icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="#75AADB" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -124,7 +135,6 @@
       <div class="subtitle">Programmation R &amp; statistiques</div>
     </a>
 
-    <!-- code-server / VS Code -->
     <a class="tile" href="https://code.lemmensjohanne.be" target="_blank" rel="noopener">
       <div class="icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="#4EC9B0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -138,6 +148,44 @@
     </a>
   </div>
 
+  <!-- ============ OUTILS DE FICHIERS ============ -->
+  <div class="section-titre">Outils de fichiers</div>
+  <div class="grid">
+    <a class="tile" href="https://tools.ghostinthemachine.fr/" target="_blank" rel="noopener">
+      <div class="icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#e0982f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14.5 5.5a3.5 3.5 0 0 0-4.9 4.4L3 16.5 5.5 19l6.6-6.6a3.5 3.5 0 0 0 4.4-4.9l-2.3 2.3-1.8-.4-.4-1.8z"></path>
+          <path d="M16 16l4 4"></path>
+        </svg>
+      </div>
+      <div class="title">IT-Tools</div>
+      <div class="subtitle">Utilitaires du quotidien</div>
+    </a>
+
+    <a class="tile" href="https://pdf.ghostinthemachine.fr/" target="_blank" rel="noopener">
+      <div class="icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#d9534f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"></path>
+          <path d="M14 3v4h4"></path>
+          <path d="M9 13h6M9 16.5h6"></path>
+        </svg>
+      </div>
+      <div class="title">Bento PDF</div>
+      <div class="subtitle">Manipulation de PDF</div>
+    </a>
+
+    <a class="tile" href="https://convert.ghostinthemachine.fr/" target="_blank" rel="noopener">
+      <div class="icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#4f7d6a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 8h11l-3-3M4 8l3 3"></path>
+          <path d="M20 16H9l3 3M20 16l-3-3"></path>
+        </svg>
+      </div>
+      <div class="title">Vert</div>
+      <div class="subtitle">Conversion de fichiers</div>
+    </a>
+  </div>
+
   <div class="footer">
     <p>lemmensjohanne.be — espace personnel</p>
   </div>