From 4269bcb4ea61da2a5fad00b6e24953c9f31a6e91 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 21 Apr 2026 15:51:06 +0200
Subject: [PATCH] fix(05-02): Clear.vue MDC component, replace raw div
 clear:both (hydration mismatch)

---
 app/components/content/Clear.vue      | 3 +++
 content/fr/blog/test-kotlin-syntax.md | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 app/components/content/Clear.vue

diff --git a/app/components/content/Clear.vue b/app/components/content/Clear.vue
new file mode 100644
index 0000000..b0203f2
--- /dev/null
+++ b/app/components/content/Clear.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="not-prose clear-both" />
+</template>
diff --git a/content/fr/blog/test-kotlin-syntax.md b/content/fr/blog/test-kotlin-syntax.md
index b66ae37..a6e1444 100644
--- a/content/fr/blog/test-kotlin-syntax.md
+++ b/content/fr/blog/test-kotlin-syntax.md
@@ -73,7 +73,8 @@ docker build -t portfolio:latest .
 
 Texte qui entoure l'image flottante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
 
-<div style="clear:both"></div>
+::clear
+::
 
 **Flottant à droite :**
 
@@ -81,7 +82,8 @@ Texte qui entoure l'image flottante. Lorem ipsum dolor sit amet, consectetur adi
 
 Texte qui entoure l'image flottante à droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
-<div style="clear:both"></div>
+::clear
+::
 
 **Classes Tailwind directes :**