Enhance index.html and custom.css for improved content presentation and new assets

- Updated index.html to refine content structure, including enhanced blockquotes and lists for better readability.
- Added a new section to emphasize Kubernetes as a developer-centric tool.
- Improved CSS styles in custom.css for blockquote presentation and slide layout adjustments.
- Introduced new SVG and WEBP images for better visual representation of tools used in Kubernetes.

content/kubernetes-hell-to-heaven/css/custom.css

@@ -182,6 +182,13 @@
   padding: 0.45em 0.85em;
 }
 
+.reveal blockquote .blockquote-sub {
+  display: block;
+  margin-top: 0.0em;
+  font-size: 0.88em;
+  color: var(--text-subtle);
+}
+
 .reveal aside.notes {
   display: none !important;
 }
@@ -238,7 +245,7 @@
 }
 
 /*
- * Slide « boucle » (n° 6) : graphe cyclique Mermaid = très haut ; graphe linéaire + libellés courts.
+ * Slide « boucle » (API / événements / controllers / réconciliation) : graphe Mermaid assez large — hauteur plafonnée.
  * Pas de scale() : ça ne réduit pas la hauteur de layout (Reveal mesure scrollHeight).
  */
 .reveal .slides section.slide-boucle {
@@ -260,7 +267,16 @@
   line-height: 1.15;
 }
 
-/* Mermaid sur la slide « boucle » : hauteur mini correcte (éviter l’écrasement à ~78px qui tuait les libellés) */
+.reveal section.slide-boucle .slide-boucle-lead {
+  margin: 0 0 0.45em;
+  padding: 0;
+  list-style: none;
+  font-size: clamp(0.82rem, 2.6vw, 0.95rem);
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+/* Mermaid sur la slide « boucle » : graphe fusionné (outils + boucle) — un peu plus de hauteur qu’avant */
 .reveal section.slide-boucle .mermaid {
   margin: 0.25em auto 0.15em;
   line-height: normal;
@@ -269,7 +285,7 @@
 }
 
 .reveal section.slide-boucle .mermaid svg {
-  max-height: min(34vh, 220px) !important;
+  max-height: min(42vh, 300px) !important;
   overflow: visible !important;
 }