From 23a6195e6581f2cac61df773873271441c98a288 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 31 Mar 2026 15:37:35 +0200
Subject: [PATCH] article : move block styles to src/styles/blocks/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/styles/blocks/heading.css     |  20 +++
 src/styles/blocks/image.css       |  17 ++
 src/styles/blocks/jeu.css         | 126 ++++++++++++++
 src/styles/blocks/list.css        |   9 +
 src/styles/blocks/quote.css       |  15 ++
 src/styles/blocks/text.css        |  16 ++
 src/styles/blocks/white-paper.css |  73 ++++++++
 src/styles/index.css              |   9 +
 src/views/Article.svelte          | 279 ------------------------------
 9 files changed, 285 insertions(+), 279 deletions(-)
 create mode 100644 src/styles/blocks/heading.css
 create mode 100644 src/styles/blocks/image.css
 create mode 100644 src/styles/blocks/jeu.css
 create mode 100644 src/styles/blocks/list.css
 create mode 100644 src/styles/blocks/quote.css
 create mode 100644 src/styles/blocks/text.css
 create mode 100644 src/styles/blocks/white-paper.css

diff --git a/src/styles/blocks/heading.css b/src/styles/blocks/heading.css
new file mode 100644
index 0000000..b023e59
--- /dev/null
+++ b/src/styles/blocks/heading.css
@@ -0,0 +1,20 @@
+.article-body h2,
+.article-body h3 {
+  font-family: "Danzza", sans-serif;
+  line-height: 1.3;
+}
+
+.article-body h2 {
+  font-size: 29px;
+}
+
+.article-body h3 {
+  font-size: 22px;
+  margin: 25px 0 15px;
+}
+
+@media (max-width: 700px) {
+  .article-body h3 {
+    font-family: "Danzza Light", sans-serif;
+  }
+}
diff --git a/src/styles/blocks/image.css b/src/styles/blocks/image.css
new file mode 100644
index 0000000..17633d6
--- /dev/null
+++ b/src/styles/blocks/image.css
@@ -0,0 +1,17 @@
+.article-body figure {
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.article-body figure img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.article-body figcaption {
+  margin-top: 0.5rem;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-caption);
+}
diff --git a/src/styles/blocks/jeu.css b/src/styles/blocks/jeu.css
new file mode 100644
index 0000000..55600c0
--- /dev/null
+++ b/src/styles/blocks/jeu.css
@@ -0,0 +1,126 @@
+.article-body .iframe-game-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 2rem 0;
+}
+
+.article-body .iframe-game-container iframe {
+  border: none;
+  display: block;
+  width: 100%;
+  transition: filter 0.3s ease;
+}
+
+.article-body .iframe-click-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: rgba(13, 14, 34, 0.90);
+  backdrop-filter: blur(5px);
+}
+
+.article-body .iframe-click-overlay[data-state="initial"] {
+  background: rgba(13, 14, 34, 0.98);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(77, 252, 161, 0.3);
+}
+
+.article-body .iframe-click-overlay[data-state="initial"]:hover {
+  border-color: rgba(77, 252, 161, 0.6);
+}
+
+.article-body .iframe-click-overlay[data-state="ended"] {
+  background: rgba(13, 14, 34, 0.10);
+  backdrop-filter: none;
+  border: 2px solid #4DFCA1;
+  cursor: default;
+}
+
+.article-body .overlay-content {
+  text-align: center;
+  color: white;
+  user-select: none;
+  padding: 20px;
+}
+
+.article-body .play-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #4DFCA1 0%, #04fea0 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px auto;
+  font-size: 24px;
+  color: black;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 4px 15px rgba(77, 252, 161, 0.3);
+}
+
+.article-body .iframe-click-overlay[data-state="initial"]:hover .play-icon {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(77, 252, 161, 0.5);
+}
+
+.article-body .overlay-message {
+  font-family: "Danzza", sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: white;
+}
+
+.article-body .iframe-click-overlay[data-state="ended"] .overlay-message {
+  font-size: 20px;
+  font-weight: 700;
+  color: #4DFCA1;
+}
+
+.article-body .iframe-deactivate-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 40px;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border: 2px solid #04fea0;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  z-index: 11;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.article-body .iframe-deactivate-btn:hover {
+  background: #4DFCA1;
+  color: black;
+  transform: scale(1.1);
+}
+
+.article-body .iframe-game-container.game-active .iframe-deactivate-btn {
+  opacity: 1;
+}
+
+.article-body .iframe-game-container.game-active {
+  box-shadow: 0 0 0 2px rgba(77, 252, 161, 0.5);
+}
diff --git a/src/styles/blocks/list.css b/src/styles/blocks/list.css
new file mode 100644
index 0000000..abf30c8
--- /dev/null
+++ b/src/styles/blocks/list.css
@@ -0,0 +1,9 @@
+.article-body ul,
+.article-body ol {
+  margin: 1.25rem 0;
+  padding-left: 1.5rem;
+}
+
+.article-body li {
+  margin-bottom: 0.5rem;
+}
diff --git a/src/styles/blocks/quote.css b/src/styles/blocks/quote.css
new file mode 100644
index 0000000..ba17117
--- /dev/null
+++ b/src/styles/blocks/quote.css
@@ -0,0 +1,15 @@
+.article-body blockquote {
+  font-family: "Danzza", sans-serif;
+  font-size: 19px;
+  font-style: italic;
+  background-color: rgba(4, 254, 160, .05);
+  border-left: 4px solid #04fea0;
+  margin: 30px 0;
+  padding: 20px 20px 20px 30px;
+}
+
+.article-body blockquote p {
+  font-style: italic;
+  font-size: 19px;
+  margin-bottom: 0.5rem;
+}
diff --git a/src/styles/blocks/text.css b/src/styles/blocks/text.css
new file mode 100644
index 0000000..e896d42
--- /dev/null
+++ b/src/styles/blocks/text.css
@@ -0,0 +1,16 @@
+.article-body p {
+  font-family: "Danzza", sans-serif;
+  font-size: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.article-body a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+@media (max-width: 700px) {
+  .article-body p {
+    font-family: "Danzza Light", sans-serif;
+  }
+}
diff --git a/src/styles/blocks/white-paper.css b/src/styles/blocks/white-paper.css
new file mode 100644
index 0000000..a5af433
--- /dev/null
+++ b/src/styles/blocks/white-paper.css
@@ -0,0 +1,73 @@
+.article-body .wp-block {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  border-radius: 16px;
+  padding: 2.5rem 4rem;
+  margin: 2.5rem 0;
+  width: 170%;
+  margin-left: -35%;
+}
+
+.article-body .wp-block__content {
+  width: 50%;
+  z-index: 1;
+}
+
+.article-body .wp-block__label {
+  font-family: "Terminal", sans-serif;
+  font-size: var(--font-size-paragraph);
+  color: var(--color-primary);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.article-body .wp-block__title {
+  font-size: var(--font-size-title-section);
+  font-weight: 700;
+  font-family: "Danzza", sans-serif;
+  text-transform: uppercase;
+  line-height: 1.1;
+  margin: 0;
+}
+
+.article-body .wp-block__intro {
+  font-family: "Danzza", sans-serif;
+  font-size: var(--font-size-paragraph);
+  line-height: 1.5;
+  opacity: 0.5;
+  margin: 0;
+}
+
+.article-body .wp-block__btn {
+  margin-top: 1rem;
+}
+
+.article-body .wp-block__btn:hover {
+  background: #03d98c;
+  border-color: #03d98c;
+}
+
+.article-body .wp-block__cover {
+  position: absolute;
+  width: 50vw;
+  right: -18rem;
+  top: -5vw;
+}
+
+@media (max-width: 700px) {
+  .article-body .wp-block {
+    flex-direction: column;
+    padding: 1.75rem 1.25rem;
+  }
+
+  .article-body .wp-block__cover {
+    width: 60%;
+    max-width: none;
+  }
+
+  .article-body .wp-block__title {
+    font-size: var(--font-size-title-section-mobile);
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 31a889c..5731ee0 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -10,3 +10,12 @@
 @import "./form.css";
 @import "./utils.css";
 @import "./a11y.css";
+
+/* Article blocks */
+@import "./blocks/heading.css";
+@import "./blocks/text.css";
+@import "./blocks/list.css";
+@import "./blocks/quote.css";
+@import "./blocks/image.css";
+@import "./blocks/jeu.css";
+@import "./blocks/white-paper.css";
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 4176526..3c0da24 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -254,280 +254,6 @@
     padding: 0 15%;
   }
 
-  .article-body :global(h2),
-  .article-body :global(h3) {
-    font-family: "Danzza", sans-serif;
-    line-height: 1.3;
-  }
-
-  .article-body :global(h2) {
-    font-size: 29px;
-  }
-
-  .article-body :global(h3) {
-    font-size: 22px;
-    margin: 25px 0 15px;
-  }
-
-  .article-body :global(p) {
-    font-family: "Danzza", sans-serif;
-    font-size: 1rem;
-    margin-bottom: 1.25rem;
-  }
-
-  .article-body :global(a) {
-    color: var(--color-primary);
-    text-decoration: underline;
-  }
-
-  .article-body :global(ul),
-  .article-body :global(ol) {
-    margin: 1.25rem 0;
-    padding-left: 1.5rem;
-  }
-
-  .article-body :global(li) {
-    margin-bottom: 0.5rem;
-  }
-
-  .article-body :global(blockquote) {
-    font-family: "Danzza", sans-serif;
-    font-size: 19px;
-    font-style: italic;
-    margin-bottom: 10px;
-    background-color: rgba(4,254,160,.05);
-    border-left: 4px solid #04fea0;
-    margin: 30px 0;
-    padding: 20px 20px 20px 30px;
-  }
-
-  .article-body :global(blockquote p) {
-    font-style: italic;
-    font-size: 19px;
-    margin-bottom: 0.5rem;
-  }
-
-  .article-body :global(figure) {
-    margin: 2rem 0;
-    text-align: center;
-  }
-
-  .article-body :global(figure img) {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
-  }
-
-  .article-body :global(figcaption) {
-    margin-top: 0.5rem;
-    font-style: italic;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: var(--font-size-caption);
-  }
-
-  /* --- Bloc jeu iframe --- */
-  .article-body :global(.iframe-game-container) {
-    position: relative;
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 2rem 0;
-  }
-
-  .article-body :global(.iframe-game-container iframe) {
-    border: none;
-    display: block;
-    width: 100%;
-    transition: filter 0.3s ease;
-  }
-
-  .article-body :global(.iframe-click-overlay) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    background: rgba(13, 14, 34, 0.90);
-    backdrop-filter: blur(5px);
-  }
-
-  .article-body :global(.iframe-click-overlay[data-state="initial"]) {
-    background: rgba(13, 14, 34, 0.98);
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(77, 252, 161, 0.3);
-  }
-
-  .article-body :global(.iframe-click-overlay[data-state="initial"]:hover) {
-    border-color: rgba(77, 252, 161, 0.6);
-  }
-
-  .article-body :global(.iframe-click-overlay[data-state="ended"]) {
-    background: rgba(13, 14, 34, 0.10);
-    backdrop-filter: none;
-    border: 2px solid #4DFCA1;
-    cursor: default;
-  }
-
-  .article-body :global(.overlay-content) {
-    text-align: center;
-    color: white;
-    user-select: none;
-    padding: 20px;
-  }
-
-  .article-body :global(.play-icon) {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #4DFCA1 0%, #04fea0 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 16px auto;
-    font-size: 24px;
-    color: black;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    box-shadow: 0 4px 15px rgba(77, 252, 161, 0.3);
-  }
-
-  .article-body :global(.iframe-click-overlay[data-state="initial"]:hover .play-icon) {
-    transform: scale(1.1);
-    box-shadow: 0 6px 20px rgba(77, 252, 161, 0.5);
-  }
-
-  .article-body :global(.overlay-message) {
-    font-family: "Danzza", sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: white;
-  }
-
-  .article-body :global(.iframe-click-overlay[data-state="ended"] .overlay-message) {
-    font-size: 20px;
-    font-weight: 700;
-    color: #4DFCA1;
-  }
-
-  .article-body :global(.iframe-deactivate-btn) {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 40px;
-    height: 40px;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    border: 2px solid #04fea0;
-    border-radius: 50%;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
-    z-index: 11;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .article-body :global(.iframe-deactivate-btn:hover) {
-    background: #4DFCA1;
-    color: black;
-    transform: scale(1.1);
-  }
-
-  .article-body :global(.iframe-game-container.game-active .iframe-deactivate-btn) {
-    opacity: 1;
-  }
-
-  .article-body :global(.iframe-game-container.game-active) {
-    box-shadow: 0 0 0 2px rgba(77, 252, 161, 0.5);
-  }
-
-  /* --- Bloc livre blanc --- */
-  .article-body :global(.wp-block) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    border-radius: 16px;
-    padding: 2.5rem 4rem;
-    margin: 2.5rem 0;
-    width: 170%;
-    margin-left: -35%;
-  }
-
-  .article-body :global(.wp-block__content) {
-    width: 50%;
-    z-index: 1;
-  }
-
-  .article-body :global(.wp-block__label) {
-    font-family: "Terminal", sans-serif;
-    font-size: var(--font-size-paragraph);
-    color: var(--color-primary);
-    text-transform: uppercase;
-    margin: 0;
-  }
-
-  .article-body :global(.wp-block__title) {
-    font-size: var(--font-size-title-section);
-    font-weight: 700;
-    font-family: "Danzza", sans-serif;
-    text-transform: uppercase;
-    line-height: 1.1;
-    margin: 0;
-  }
-
-  .article-body :global(.wp-block__intro) {
-    font-family: "Danzza", sans-serif;
-    font-size: var(--font-size-paragraph);
-    line-height: 1.5;
-    opacity: 0.5;
-    margin: 0;
-  }
-
-  .article-body :global(.wp-block__btn) {
-    margin-top: 1rem;
-  }
-
-  .article-body :global(.wp-block__btn:hover) {
-    background: #03d98c;
-    border-color: #03d98c;
-  }
-
-  .article-body :global(.wp-block__cover) {
-    position: absolute;
-    width: 50vw;
-    right: -18rem;
-    top: -5vw;
-  }
-
-  @media (max-width: 700px) {
-    .article-body :global(.wp-block) {
-      flex-direction: column;
-      padding: 1.75rem 1.25rem;
-    }
-
-    .article-body :global(.wp-block__cover) {
-      width: 60%;
-      max-width: none;
-    }
-
-    .article-body :global(.wp-block__title) {
-      font-size: var(--font-size-title-section-mobile);
-    }
-  }
-
   /* --- Mobile --- */
   @media (max-width: 700px) {
     .article {
@@ -555,11 +281,6 @@
     .article-body {
       padding: 0;
     }
-
-    .article-body :global(p),
-    .article-body :global(h3) {
-      font-family: "Danzza Light", sans-serif;
-    }
   }
 
   /* --- Tablet --- */