diff --git a/assets/styles/footer.scss b/assets/styles/footer.scss
new file mode 100644
index 0000000..3e9c318
--- /dev/null
+++ b/assets/styles/footer.scss
@@ -0,0 +1,14 @@
+.footer, .footer .content {
+    min-height: inherit;
+    width: inherit;
+}
+
+.footer p {
+    padding: 0;
+}
+
+.footer a {
+    font-family: 'Tox Typewriter';
+    font-weight: normal;
+    font-style: normal;
+}
diff --git a/assets/styles/header.scss b/assets/styles/header.scss
new file mode 100644
index 0000000..4a6b1d9
--- /dev/null
+++ b/assets/styles/header.scss
@@ -0,0 +1,22 @@
+.header {
+    height: var(--header-height);
+    /* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
+    background-image: url(/images/fond.webp);
+    background-repeat: none;
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+
+    .title {
+        padding: calc(var(--h1-size) / 4);
+        background-color: var(--color-red3);
+        color: var(--color-white);
+        line-height: .5;
+        text-align: right;
+
+        small {
+            color: var(--color-yellow2);
+            font-size: calc(var(--h1-size) / 2);
+        }
+    }
+}
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1abdbb4..6da3236 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,2 +1,4 @@
 @import "reset.scss";
-@import "style.scss";
\ No newline at end of file
+@import "style.scss";
+@import "header.scss";
+@import "footer.scss";
diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 0071cba..4cb966b 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -42,7 +42,7 @@ body {
     --color-black: black;
 
     --gutter: 4rem;
-    --header-height: 90vh;
+    --header-height: 60vh;
 
     --bottle-width: 100px;
     --bottle-height: 300px;
@@ -86,29 +86,7 @@ body {
 
 /* DESIGN */
 
-.header {
-    height: var(--header-height);
-    /* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
-    background-image: url(../images/fond.webp);
-    background-repeat: none;
-    background-size: cover;
-    background-position: center;
-    text-align: center;
-}
-
-.header h1 {
-    padding: calc(var(--h1-size) / 4);
-    background-color: var(--color-red3);
-    color: var(--color-white);
-    line-height: .5;
-    text-align: right;
-}
-.header h1 small {
-    color: var(--color-yellow2);
-    font-size: calc(var(--h1-size) / 2);
-}
-
-.container, header, footer {
+.box, .container {
     margin: 0;
     padding: 0;
     display: flex;
@@ -173,21 +151,6 @@ body {
     z-index: -1;
 }
 
-.footer, .footer .content {
-    min-height: inherit;
-    width: inherit;
-}
-
-.footer p {
-    padding: 0;
-}
-
-.footer a {
-    font-family: 'Tox Typewriter';
-    font-weight: normal;
-    font-style: normal;
-}
-
 .gamme h2 { text-align: center }
 .gamme .boxes { flex-wrap: wrap; gap: calc(var(--gutter) * 2) var(--gutter); max-width: 1400px; margin: 0 auto; }
 .gamme .box { 
diff --git a/layouts/partials/pied_de_page.html b/layouts/partials/pied_de_page.html
index e66cf2b..602a3a0 100644
--- a/layouts/partials/pied_de_page.html
+++ b/layouts/partials/pied_de_page.html
@@ -1,4 +1,4 @@
-<footer class="footer color -red3">
+<footer class="box footer color -red3">
     <div class="content">
         <p>
             E-mail : <a href="mailto:murielle@takubeh.fr">murielle@takubeh.fr</a><br>