From 006df6ad308bf0610894501d8d7cf4d9fb4445b4 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 :**