test.md

 <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 0;
-      padding: 0;
-      background-color: #f9f9f9;
-    }
-
-    header {
-      background: #8585f6;
-      color: #fff;
-      padding: 2rem 1rem;
-      text-align: center;
-    }
-
-    .intro {
-      padding: 1rem;
-      text-align: center;
-      background-color: #ffffff;
-    }
-
-    .tiles {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 16px;
-      padding: 1rem;
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-
-    @media (min-width: 768px) {
-      .tiles {
-        grid-template-columns: repeat(2, 1fr);
-      }
+  .tiles-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: center;
+    margin: 2rem auto;
+    max-width: 1200px;
   }
 
   .tile {
-      background: #ffffff;
-      border: 1px solid #ddd;
+    background-color: white;
     border-radius: 8px;
     overflow: hidden;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-      transition: transform 0.2s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     text-decoration: none;
     color: inherit;
+    flex: 1 1 calc(50% - 1.5rem);
+    max-width: calc(50% - 1.5rem);
+    transition: transform 0.2s, filter 0.2s;
   }
 
   .tile:hover {
-      transform: translateY(-4px);
-      filter: grayscale(60%);
+    transform: translateY(-5px);
+    filter: grayscale(50%);
   }
 
   .tile img {
@@ -57,64 +32,105 @@
     display: block;
   }
 
-    .caption {
+  .tile-content {
     padding: 1rem;
-      font-weight: bold;
-      font-size: 1rem;
     text-align: center;
   }
 
+  .tile-title {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin: 0.5rem 0;
+  }
+
   .tile-separator {
-      width: 60%;
     height: 1px;
-      background-color: #ccc;
+    background-color: #ddd;
+    width: 60%;
     margin: 0.5rem auto;
   }
 
   .tile-text {
-      padding: 0.5rem 1rem 1rem;
     font-size: 0.95rem;
     color: #444;
-      text-align: center;
   }
 
+  @media (max-width: 768px) {
+    .tile {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
 </style>
 
+<main>
+  <section class="tiles-section">
 
-<header>
-  <h1>Bienvenue sur le portail des ressources numériques</h1>
-  <p>Une plateforme pour découvrir de nouveaux usages numériques</p>
-</header>
+    <a href="#" class="tile">
+      <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
+      <div class="tile-content">
+        <div class="tile-title">L'Aiguilleur du Bnum</div>
+        <div class="tile-separator"></div>
+        <div class="tile-text">
+          Découvrez les fonctionnalités essentielles de votre Bureau numérique (Bnum) et apprenez à le maîtriser.
+        </div>
+      </div>
+    </a>
 
-<section class="intro">
-  <p>Lorem ipsum.</p>
-</section>
+    <a href="#" class="tile">
+      <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
+      <div class="tile-content">
+        <div class="tile-title">25 Astuces en 2025</div>
+        <div class="tile-separator"></div>
+        <div class="tile-text">
+          Une collection d’astuces simples pour améliorer votre efficacité au quotidien.
+        </div>
+      </div>
+    </a>
 
-<section class="tiles">
-  <a href="./Portail" class="tile">
+    <a href="#" class="tile">
       <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
-    <div class="caption">GRIST</div>
+      <div class="tile-content">
+        <div class="tile-title">Votre PC</div>
         <div class="tile-separator"></div>
-    <div class="tile-text">Enfin un SGBD ! Lorem ipsum....</div>
+        <div class="tile-text">
+          Paramétrage, sécurité, gestion des fichiers et bonnes pratiques d’entretien de votre poste de travail.
+        </div>
+      </div>
     </a>
 
-  <a href="./parapheur" class="tile">
-    <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/Bnum2025.svg" alt="Bnum"/>
-    <div class="caption">PARAPHEUR</div>
-    <div class="tile-text">Dématérialisons la signature des parapheurs. Lorem ipsum....</div>
+    <a href="#" class="tile">
+      <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
+      <div class="tile-content">
+        <div class="tile-title">Votre Mobile</div>
+        <div class="tile-separator"></div>
+        <div class="tile-text">
+          Applications recommandées, connexion sécurisée, et synchronisation avec vos outils professionnels.
+        </div>
+      </div>
     </a>
 
     <a href="#" class="tile">
       <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
-    <div class="caption">DOCS</div>
-    <div class="tile-text">Un éditeur collaboratif en Markdown ! Lorem ipsum....</div>
+      <div class="tile-content">
+        <div class="tile-title">Visioconférences</div>
+        <div class="tile-separator"></div>
+        <div class="tile-text">
+          Règles de bonne conduite, solutions disponibles et conseils pour des réunions efficaces.
+        </div>
+      </div>
     </a>
 
     <a href="#" class="tile">
-    <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/Bnum2025.svg" alt="Bnum"/>
-    <div class="caption">VISIO</div>
-    <div class="tile-text">Une nouvelle solution de webconf plus performante et souveraine ! Lorem ipsum....</div>
+      <img src="https://aide.din.developpement-durable.gouv.fr/images/bnum/vignettes/bnum.svg" alt="Bnum" />
+      <div class="tile-content">
+        <div class="tile-title">Accessibilité</div>
+        <div class="tile-separator"></div>
+        <div class="tile-text">
+          Rendre le numérique accessible à tous : outils, réglages et aides spécifiques.
+        </div>
+      </div>
     </a>
 
   </section>
-
+</main>