Layout: bold title on top, icon + description below in metric cards

Author: Sean Kibbee

docs/index-fr.html

@@ -56,31 +56,31 @@ <h2>Aperçu exécutif</h2>
 
     <section class="layout metrics reveal delay-1" aria-label="Indicateurs du programme">
       <article class="metric-card">
+        <p class="metric-title">Habilitation des développeurs DTB</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
         </span>
-        <p class="metric-title">Habilitation des développeurs DTB</p>
         <p class="metric-label">Renforcement pratique des capacités pour des équipes autonomes</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">Exécution axée sur la sécurité</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
         </span>
-        <p class="metric-title">Exécution axée sur la sécurité</p>
         <p class="metric-label">Flux de travail avec données fictives uniquement et contrôles au moment de la validation</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">Livraison assistée par l'IA</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
         </span>
-        <p class="metric-title">Livraison assistée par l'IA</p>
         <p class="metric-label">Génération et validation humaine à chaque phase</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">Modèle opérationnel réutilisable</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </span>
-        <p class="metric-title">Modèle opérationnel réutilisable</p>
         <p class="metric-label">Méthode reproductible pour toutes les charges de travail et piles technologiques</p>
       </article>
     </section>

docs/index.html

@@ -56,31 +56,31 @@ <h2>Executive Snapshot</h2>
 
     <section class="layout metrics reveal delay-1" aria-label="Program metrics">
       <article class="metric-card">
+        <p class="metric-title">DTB Developer Enablement</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
         </span>
-        <p class="metric-title">DTB Developer Enablement</p>
         <p class="metric-label">Hands-on capability uplift for self-sufficient teams</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">Security-First Execution</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
         </span>
-        <p class="metric-title">Security-First Execution</p>
         <p class="metric-label">Dummy-data-only workflow with commit-time controls</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">AI-Assisted Delivery</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
         </span>
-        <p class="metric-title">AI-Assisted Delivery</p>
         <p class="metric-label">Generation + human validation in every phase</p>
       </article>
       <article class="metric-card">
+        <p class="metric-title">Reusable Operating Model</p>
         <span class="metric-icon" aria-hidden="true">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </span>
-        <p class="metric-title">Reusable Operating Model</p>
         <p class="metric-label">Repeatable method across workloads and stacks</p>
       </article>
     </section>

docs/site.css

@@ -200,48 +200,43 @@ h2 {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  column-gap: 0.75rem;
-  row-gap: 0.1rem;
-  align-items: start;
-  align-content: center;
-  min-height: 5.5rem;
+  column-gap: 0.6rem;
+  row-gap: 0.35rem;
+}
+
+.metric-title {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: 0.92rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--text);
 }
 
 .metric-icon {
-  grid-row: 1 / 3;
-  align-self: center;
+  align-self: start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.8rem;
-  height: 2.8rem;
-  border-radius: 12px;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 10px;
   border: 1px solid rgba(15, 111, 168, 0.35);
   background: linear-gradient(145deg, rgba(15, 111, 168, 0.18), rgba(221, 236, 251, 0.6));
   color: var(--brand-strong);
 }
 
 .metric-icon svg {
-  width: 20px;
-  height: 20px;
-}
-
-.metric-title {
-  margin: 0;
-  font-size: 0.92rem;
-  font-weight: 700;
-  line-height: 1.25;
-  color: var(--text);
-  align-self: end;
-}
+  width: 18px;
+  height: 18px;
 }
 
 .metric-label {
   margin: 0;
   color: var(--muted);
   font-size: 0.82rem;
   line-height: 1.35;
-  align-self: start;
+  align-self: center;
 }
 
 .outcome-target {