migrate CSS to SCSS

Rename all src/*.css to src/_*.scss partials and convert style.css
to style.scss with SASS imports.

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

assets/css/src/_header.scss

@@ -0,0 +1,182 @@
+main {
+  pointer-events: none;
+}
+
+main article > div {
+  pointer-events: all;
+}
+
+.page-cover > * {
+  pointer-events: all;
+}
+
+#main-header {
+  position: fixed;
+  z-index: 2;
+  box-sizing: border-box;
+  width: 100vw;
+  padding-top: calc(var(--unit--vertical) / 2);
+}
+
+[data-template="home"] #main-header {
+  pointer-events: none;
+}
+
+#logo * {
+  font-size: 25.3vw;
+  font-weight: var(--font-weight-extra-bold);
+}
+
+#logo span {
+  height: 20vw;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 3vw;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#logo {
+  text-align: right;
+}
+
+#logo #actuel {
+  font-weight: 550;
+}
+[data-theme="light"] #logo #actuel {
+  font-weight: 550;
+  color: white;
+  text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary),0 1px var(--color-primary);
+}
+
+#logo #actuel,
+#logo #inactuel {
+  mix-blend-mode: difference;
+}
+#logo #inactuel {
+  transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+[data-theme="light"] #logo #inactuel {
+  mix-blend-mode: difference;
+}
+
+#main-header.minimized #inactuel {
+  margin-top: -20vw;
+  transform: translateX(-1px) translateY(-1px);
+}
+
+#main-header.minimized #inactuel:not([data-template="home"] *) {
+  transform: translateX(-1px) translateY(-1px) !important;
+}
+
+.page-cover,
+article > h1 {
+  padding-top: calc(50vw);
+}
+
+.page-cover {
+  position: relative;
+  height: 100svh;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit--vertical);
+}
+
+[data-template="home"] .page-cover {
+  padding-top: calc(42.5vw);
+}
+
+.page-cover .title-wrapper h1 {
+  margin-bottom: calc(0.255 * var(--unit--vertical));
+}
+
+.page-cover .text-wrapper {
+  height: 100%;
+  overflow: auto;
+}
+
+button.toggle.left::after,
+button.toggle.right::before {
+  transition: all 0.5s var(--curve-sine);
+  content: "+";
+}
+
+.page-cover .links {
+  position: absolute;
+  bottom: calc(var(--unit--vertical) / 2);
+  width: 100%;
+  box-sizing: border-box;
+  
+}
+
+.page-cover .links li {
+  display: inline-block;
+  margin-right: var(--unit--horizontal);
+}
+
+[data-template="author"] .page-cover,
+[data-template="category"] .page-cover,
+[data-template="year"] .page-cover,
+[data-template="email"] .page-cover,
+[data-template="error"] .page-cover,
+[data-template="info"] .page-cover {
+  height: initial !important;
+}
+[data-template="author"] .page-cover .links,
+[data-template="category"] .page-cover .links,
+[data-template="year"] .page-cover .links,
+[data-template="email"] .page-cover .links,
+[data-template="error"] .page-cover .links,
+[data-template="info"] .page-cover .links {
+  display: none;
+}
+
+@media screen and (min-width: 640px) {
+  body:not([data-template="home"]) #main-header {
+    width: var(--body-padding);
+  }
+  #logo * {
+    font-size: 26.65vw;
+  }
+  #logo span {
+    padding-right: 1vw;
+  }
+  body:not([data-template="home"]) #logo * {
+    font-size: 5.6vw;
+  }
+  body:not([data-template="home"]) #logo span {
+    height: 5vw;
+    padding-right: calc(var(--unit--horizontal) - 0.3vw);
+  }
+  body:not([data-template="home"]) #main-header.minimized #inactuel {
+    margin-top: -4.9vw;
+    transform: translateX(-2px) translateY(-2px);
+  }
+
+  .page-cover:not(
+      [data-template="author"] .page-cover,
+      [data-template="year"] .page-cover,
+      [data-template="category"] .page-cover
+    ) {
+    height: 100vh;
+  }
+
+  .page-cover,
+  article > h1 {
+    padding-top: 15vw;
+  }
+  .page-cover {
+    min-height: calc(22 * var(--unit--vertical));
+  }
+
+  [data-template="home"] .page-cover {
+    padding-top: calc(42.5vw) !important;
+  }
+
+  .page-cover .links {
+    display: none;
+  }
+}