styles : add h4 sizing, spacing and scroll-margin

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/src/_article.scss

@@ -30,11 +30,18 @@ article #main-content #chapo::after {
 article #main-content li:not(.text) {
   list-style-type: inherit;
 }
-article h3 {
+
+article h3,
+article h4 {
   scroll-margin-top: calc(var(--unit--vertical) * 1);
-  margin-top: calc(3 * var(--unit--vertical));
   margin-bottom: calc(1 * var(--unit--vertical));
 }
+article h3 {
+  margin-top: calc(3 * var(--unit--vertical));
+}
+article h4 {
+  margin-top: calc(1 * var(--unit--vertical));
+}
 
 article li,
 article ol {
@@ -66,7 +73,8 @@ blockquote.big {
 }
 
 @media screen and (max-width: 640px) {
-  article h3 {
+  article h3,
+  article h4 {
     scroll-margin-top: calc(var(--unit--vertical) * 5);
   }
 }

assets/css/src/_texts.scss

@@ -30,7 +30,7 @@ h5 *,
 p,
 p *:not(strong),
 figcaption,
-.toc{
+.toc {
   font-weight: var(--font-weight-light);
   line-height: 1;
 }
@@ -45,6 +45,12 @@ h3,
   color: var(--color-primary);
 }
 
+h4,
+.h4 {
+  font-size: var(--font-size-l);
+  color: var(--color-primary);
+}
+
 article h2 {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
@@ -170,7 +176,9 @@ a:not(.no-underline) {
   text-decoration-thickness: 0.5px;
 }
 
-article p:not(:last-child), article ul:not(:last-child), article figure:not(:last-child){
+article p:not(:last-child),
+article ul:not(:last-child),
+article figure:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 

assets/css/style.css

@@ -304,6 +304,12 @@ h3,
   color: var(--color-primary);
 }
 
+h4,
+.h4 {
+  font-size: var(--font-size-l);
+  color: var(--color-primary);
+}
+
 article h2 {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
@@ -435,7 +441,9 @@ a:not(.no-underline) {
   text-decoration-thickness: 0.5px;
 }
 
-article p:not(:last-child), article ul:not(:last-child), article figure:not(:last-child) {
+article p:not(:last-child),
+article ul:not(:last-child),
+article figure:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 
@@ -907,12 +915,20 @@ article #main-content li:not(.text) {
   list-style-type: inherit;
 }
 
-article h3 {
+article h3,
+article h4 {
   scroll-margin-top: calc(var(--unit--vertical) * 1);
-  margin-top: calc(3 * var(--unit--vertical));
   margin-bottom: calc(1 * var(--unit--vertical));
 }
 
+article h3 {
+  margin-top: calc(3 * var(--unit--vertical));
+}
+
+article h4 {
+  margin-top: calc(1 * var(--unit--vertical));
+}
+
 article li,
 article ol {
   margin-left: var(--unit--horizontal);
@@ -943,7 +959,8 @@ blockquote.big {
 }
 
 @media screen and (max-width: 640px) {
-  article h3 {
+  article h3,
+  article h4 {
     scroll-margin-top: calc(var(--unit--vertical) * 5);
   }
 }