ajout de strapi

app/assets/img/icones/agenda_blanc.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="30px" viewBox="0 0 28 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large-Copy" transform="translate(-3196, -3200)" fill="#FFFFFF">
+            <g id="Group" transform="translate(3196, 3200)">
+                <path d="M0,10 L28,10 L28,27 C28,28.6562 26.6562,30 25,30 L3,30 C1.34375,30 0,28.6562 0,27 L0,10 Z M4,15 L4,17 C4,17.55 4.45,18 5,18 L7,18 C7.55,18 8,17.55 8,17 L8,15 C8,14.45 7.55,14 7,14 L5,14 C4.45,14 4,14.45 4,15 Z M4,23 L4,25 C4,25.55 4.45,26 5,26 L7,26 C7.55,26 8,25.55 8,25 L8,23 C8,22.45 7.55,22 7,22 L5,22 C4.45,22 4,22.45 4,23 Z M12,15 L12,17 C12,17.55 12.45,18 13,18 L15,18 C15.55,18 16,17.55 16,17 L16,15 C16,14.45 15.55,14 15,14 L13,14 C12.45,14 12,14.45 12,15 Z M12,23 L12,25 C12,25.55 12.45,26 13,26 L15,26 C15.55,26 16,25.55 16,25 L16,23 C16,22.45 15.55,22 15,22 L13,22 C12.45,22 12,22.45 12,23 Z M20,15 L20,17 C20,17.55 20.45,18 21,18 L23,18 C23.55,18 24,17.55 24,17 L24,15 C24,14.45 23.55,14 23,14 L21,14 C20.45,14 20,14.45 20,15 Z M20,23 L20,25 C20,25.55 20.45,26 21,26 L23,26 C23.55,26 24,25.55 24,25 L24,23 C24,22.45 23.55,22 23,22 L21,22 C20.45,22 20,22.45 20,23 Z" id="Shape" fill-rule="nonzero" opacity="0.4"></path>
+                <path d="M10,2 C10,0.89375 9.10625,0 8,0 C6.89375,0 6,0.89375 6,2 L6,4 L3,4 C1.34375,4 0,5.34375 0,7 L0,10 L28,10 L28,7 C28,5.34375 26.6562,4 25,4 L22,4 L22,2 C22,0.89375 21.1063,0 20,0 C18.8937,0 18,0.89375 18,2 L18,4 L10,4 L10,2 Z" id="Path" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/assets/img/icones/agenda_rouge.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M0 10H28V27C28 28.6562 26.6562 30 25 30H3C1.34375 30 0 28.6562 0 27V10ZM4 15V17C4 17.55 4.45 18 5 18H7C7.55 18 8 17.55 8 17V15C8 14.45 7.55 14 7 14H5C4.45 14 4 14.45 4 15ZM4 23V25C4 25.55 4.45 26 5 26H7C7.55 26 8 25.55 8 25V23C8 22.45 7.55 22 7 22H5C4.45 22 4 22.45 4 23ZM12 15V17C12 17.55 12.45 18 13 18H15C15.55 18 16 17.55 16 17V15C16 14.45 15.55 14 15 14H13C12.45 14 12 14.45 12 15ZM12 23V25C12 25.55 12.45 26 13 26H15C15.55 26 16 25.55 16 25V23C16 22.45 15.55 22 15 22H13C12.45 22 12 22.45 12 23ZM20 15V17C20 17.55 20.45 18 21 18H23C23.55 18 24 17.55 24 17V15C24 14.45 23.55 14 23 14H21C20.45 14 20 14.45 20 15ZM20 23V25C20 25.55 20.45 26 21 26H23C23.55 26 24 25.55 24 25V23C24 22.45 23.55 22 23 22H21C20.45 22 20 22.45 20 23Z" fill="#E20018"/>
+<path d="M10 2C10 0.89375 9.10625 0 8 0C6.89375 0 6 0.89375 6 2V4H3C1.34375 4 0 5.34375 0 7V10H28V7C28 5.34375 26.6562 4 25 4H22V2C22 0.89375 21.1063 0 20 0C18.8937 0 18 0.89375 18 2V4H10V2Z" fill="black"/>
+</svg>

app/assets/img/icones/agenda_rouge_fonce.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="30px" viewBox="0 0 28 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large-Copy" transform="translate(-3196, -3200)" fill="#E30613">
+            <g id="Group" transform="translate(3196, 3200)">
+                <path d="M0,10 L28,10 L28,27 C28,28.6562 26.6562,30 25,30 L3,30 C1.34375,30 0,28.6562 0,27 L0,10 Z M4,15 L4,17 C4,17.55 4.45,18 5,18 L7,18 C7.55,18 8,17.55 8,17 L8,15 C8,14.45 7.55,14 7,14 L5,14 C4.45,14 4,14.45 4,15 Z M4,23 L4,25 C4,25.55 4.45,26 5,26 L7,26 C7.55,26 8,25.55 8,25 L8,23 C8,22.45 7.55,22 7,22 L5,22 C4.45,22 4,22.45 4,23 Z M12,15 L12,17 C12,17.55 12.45,18 13,18 L15,18 C15.55,18 16,17.55 16,17 L16,15 C16,14.45 15.55,14 15,14 L13,14 C12.45,14 12,14.45 12,15 Z M12,23 L12,25 C12,25.55 12.45,26 13,26 L15,26 C15.55,26 16,25.55 16,25 L16,23 C16,22.45 15.55,22 15,22 L13,22 C12.45,22 12,22.45 12,23 Z M20,15 L20,17 C20,17.55 20.45,18 21,18 L23,18 C23.55,18 24,17.55 24,17 L24,15 C24,14.45 23.55,14 23,14 L21,14 C20.45,14 20,14.45 20,15 Z M20,23 L20,25 C20,25.55 20.45,26 21,26 L23,26 C23.55,26 24,25.55 24,25 L24,23 C24,22.45 23.55,22 23,22 L21,22 C20.45,22 20,22.45 20,23 Z" id="Shape" fill-opacity="0.568627451" fill-rule="nonzero" opacity="0.4"></path>
+                <path d="M10,2 C10,0.89375 9.10625,0 8,0 C6.89375,0 6,0.89375 6,2 L6,4 L3,4 C1.34375,4 0,5.34375 0,7 L0,10 L28,10 L28,7 C28,5.34375 26.6562,4 25,4 L22,4 L22,2 C22,0.89375 21.1063,0 20,0 C18.8937,0 18,0.89375 18,2 L18,4 L10,4 L10,2 Z" id="Path" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/assets/img/icones/agenda_rouge_fonce_blanc.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="30px" viewBox="0 0 28 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large-Copy" transform="translate(-3196, -3200)">
+            <g id="Group" transform="translate(3196, 3200)">
+                <path d="M0,10 L28,10 L28,27 C28,28.6562 26.6562,30 25,30 L3,30 C1.34375,30 0,28.6562 0,27 L0,10 Z M4,15 L4,17 C4,17.55 4.45,18 5,18 L7,18 C7.55,18 8,17.55 8,17 L8,15 C8,14.45 7.55,14 7,14 L5,14 C4.45,14 4,14.45 4,15 Z M4,23 L4,25 C4,25.55 4.45,26 5,26 L7,26 C7.55,26 8,25.55 8,25 L8,23 C8,22.45 7.55,22 7,22 L5,22 C4.45,22 4,22.45 4,23 Z M12,15 L12,17 C12,17.55 12.45,18 13,18 L15,18 C15.55,18 16,17.55 16,17 L16,15 C16,14.45 15.55,14 15,14 L13,14 C12.45,14 12,14.45 12,15 Z M12,23 L12,25 C12,25.55 12.45,26 13,26 L15,26 C15.55,26 16,25.55 16,25 L16,23 C16,22.45 15.55,22 15,22 L13,22 C12.45,22 12,22.45 12,23 Z M20,15 L20,17 C20,17.55 20.45,18 21,18 L23,18 C23.55,18 24,17.55 24,17 L24,15 C24,14.45 23.55,14 23,14 L21,14 C20.45,14 20,14.45 20,15 Z M20,23 L20,25 C20,25.55 20.45,26 21,26 L23,26 C23.55,26 24,25.55 24,25 L24,23 C24,22.45 23.55,22 23,22 L21,22 C20.45,22 20,22.45 20,23 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.4"></path>
+                <path d="M10,2 C10,0.89375 9.10625,0 8,0 C6.89375,0 6,0.89375 6,2 L6,4 L3,4 C1.34375,4 0,5.34375 0,7 L0,10 L28,10 L28,7 C28,5.34375 26.6562,4 25,4 L22,4 L22,2 C22,0.89375 21.1063,0 20,0 C18.8937,0 18,0.89375 18,2 L18,4 L10,4 L10,2 Z" id="Path" fill="#E30613" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/assets/img/icones/angle_right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="225px" height="386px" viewBox="0 0 225 386" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Path</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large-Copy" transform="translate(-3927, -3058)" fill="#7E7E7E" fill-rule="nonzero">
+            <g id="angle-right-solid-full" transform="translate(3703, 2931)">
+                <path d="M439.1,297.4 C451.6,309.9 451.6,330.2 439.1,342.7 L279.1,502.7 C266.6,515.2 246.3,515.2 233.8,502.7 C221.3,490.2 221.3,469.9 233.8,457.4 L371.2,320 L233.9,182.6 C221.4,170.1 221.4,149.8 233.9,137.3 C246.4,124.8 266.7,124.8 279.2,137.3 L439.2,297.3 L439.1,297.4 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/assets/img/icones/fleche_gris_blanc.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M0 9.00342C0 9.83311 0.670313 10.5034 1.5 10.5034H18.8766L20.3766 9.00342L18.8766 7.50342H1.5C0.670313 7.50342 0 8.17373 0 9.00342Z" fill="white"/>
+<path d="M23.5595 7.94414C24.1454 8.53008 24.1454 9.48164 23.5595 10.0676L16.0595 17.5676C15.4735 18.1535 14.522 18.1535 13.936 17.5676C13.3501 16.9816 13.3501 16.0301 13.936 15.4441L20.3767 9.00352L13.9407 2.56289C13.3548 1.97695 13.3548 1.02539 13.9407 0.439453C14.5267 -0.146484 15.4782 -0.146484 16.0642 0.439453L23.5642 7.93945L23.5595 7.94414Z" fill="#E6E6E6"/>
+</svg>

app/assets/img/icones/home.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Shape</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large-Copy" transform="translate(-3504, -3101)" fill="#7E7E7E" fill-rule="nonzero">
+            <g id="house-solid-full" transform="translate(3440, 3037)">
+                <path d="M341.8,72.6 C329.5,61.2 310.5,61.2 298.3,72.6 L74.3,280.6 C64.7,289.6 61.5,303.5 66.3,315.7 C71.1,327.9 82.8,336 96,336 L112,336 L112,512 C112,547.3 140.7,576 176,576 L464,576 C499.3,576 528,547.3 528,512 L528,336 L544,336 C557.2,336 569,327.9 573.8,315.7 C578.6,303.5 575.4,289.5 565.8,280.6 L341.8,72.6 Z M304,384 L336,384 C362.5,384 384,412.666667 384,448 L384,576 L256,576 L256,448 C256,412.666667 277.5,384 304,384 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/assets/scss/base/_button.scss

@@ -0,0 +1,39 @@
+@use 'colors' as *;
+
+.btn {
+    display: inline-block;
+    padding: .6rem 1.2rem;
+    border-radius: .4rem;
+    text-decoration: none;
+    transition: background-color 0.2s;
+    font-weight: 500;
+    text-align: center;
+}
+.btn:hover {
+    background-color: $bleu_fonce;
+}
+.btn--primary {
+    background-color: $bleu_clair;
+    color: white;
+}
+.btn--primary:hover {
+    background-color: $bleu_fonce;
+}
+
+.btn--secondary {
+    background-color: $gris_clair;
+    color: $noir;
+}
+.btn--secondary:hover {
+    background-color: $gris_moyen;
+}
+
+.btn--outline {
+    border: 1px solid $bleu_clair;
+    color: $bleu_clair;
+    background: transparent;
+}
+.btn--outline:hover {
+    background-color: $bleu_clair;
+    color: white;
+}

app/assets/scss/base/_colors.scss

@@ -0,0 +1,13 @@
+$noir: #333;
+$blanc: #ffffff;
+$gris_clair: #e0e0e0;
+$gris_moyen: #c8c8c8;
+
+
+
+$rouge: #E30613;
+$rouge_transparent: #e3061391;
+$vert: green;
+
+$bleu_fonce: #0056b3;
+$bleu_clair: #007bff;

app/assets/scss/base/_fonts.scss

@@ -0,0 +1,81 @@
+@font-face {
+  font-family: 'brandontext_black_italic';
+  src: url('@/assets/fonts/brandontext_black_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_black';
+  src: url('@/assets/fonts/brandontext_black.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_bold_italic';
+  src: url('@/assets/fonts/brandontext_bold_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_bold';
+  src: url('@/assets/fonts/brandontext_bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_light_italic';
+  src: url('@/assets/fonts/brandontext_light_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_light';
+  src: url('@/assets/fonts/brandontext_light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_medium_italic';
+  src: url('@/assets/fonts/brandontext_medium_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_medium';
+  src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_regular_italic';
+  src: url('@/assets/fonts/brandontext_regular_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_regular';
+  src: url('@/assets/fonts/brandontext_regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_thin_italic';
+  src: url('@/assets/fonts/brandontext_thin_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'brandontext_thin';
+  src: url('@/assets/fonts/brandontext_thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'barlow_medium';
+  src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_semibold';
+  src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_regular';
+  src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_light';
+  src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_extrabold';
+  src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_bold';
+  src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'barlow_black';
+  src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
+}
+
+.brandontext_bold {
+  font-family: brandontext_bold !important;
+}

app/assets/scss/base/_img.scss

@@ -0,0 +1,16 @@
+.logo-img {
+  width: 100%;
+}
+
+.header-img_cont {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+.header-img {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
+  //filter: contrast(0.8);
+}

app/assets/scss/base/_reset.scss

@@ -0,0 +1,14 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-size: inherit;
+	font-weight: inherit;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}

app/assets/scss/base/_spaces.scss

@@ -0,0 +1,21 @@
+.height_10 {
+    height: 10px;
+}
+.height_11 {
+    height: 11px;
+}
+.height_16 {
+    height: 16px;
+}
+.height_18 {
+    height: 18px;
+}
+.height_20 {
+    height: 20px;
+}
+.height_25 {
+    height: 25px;
+}
+.height_33 {
+    height: 33px;
+}

app/assets/scss/base/_text.scss

@@ -0,0 +1,9 @@
+@use 'colors' as *;
+
+h1 {
+    color: red;
+}
+
+p {
+    color: $vert;
+}

app/assets/scss/component/_header_full.scss

@@ -0,0 +1,214 @@
+@use '../base/colors' as *;
+@use '../layout/media_queries';
+
+.header_full {
+    display: grid;
+    
+    grid-template-rows: 130px auto auto;
+
+    @include media_queries.media_min(tablet_600) {
+        grid-template-columns: 1fr 500px 1fr;
+    }
+    @include media_queries.media_min(tablet_900) {
+        grid-template-columns: 1fr 890px 1fr;
+    }
+    @include media_queries.media_min(desktop_1000) {
+        grid-template-columns: auto 980px auto;
+    }
+    @include media_queries.media_min(desktop_1100) {
+        grid-template-columns: auto 1090px auto;
+    }
+    @include media_queries.media_min(desktop_1200) {
+        grid-template-columns: auto 1160px auto;
+    }
+    @include media_queries.media_min(desktop_1300) {
+        grid-template-columns: 1fr 1250px 1fr;
+    }
+    @include media_queries.media_min(desktop_1500) {
+        grid-template-columns: 1fr 1420px 1fr;
+    }
+    @include media_queries.media_min(desktop_1800) {
+        grid-template-columns: 1fr 1700px 1fr;
+    }
+    
+
+    nav {
+        color: $blanc;
+        a {
+            color: $blanc;
+        }
+    }
+
+    .header_navigation {
+        grid-column: 2;
+        grid-row: 1;
+        z-index: 10;
+    }
+    .obscur {
+        grid-column: 1 / -1;
+        grid-row: 1;
+        z-index: 5;
+        //background-color: #0000007a;
+        background-color: rgba(0,0,0,.4);
+    }
+    .header-img_cont {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+    .header-img_text {
+        grid-column: 2;
+        grid-row: 3;
+        color: $blanc;
+
+        width: 650px;
+
+        margin-left: 80px;
+        margin-bottom: 150px;
+
+
+        .header-img_titre {
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            font-family: 'barlow_black';
+            font-size: 50px;
+        }
+        .header-img_description {
+            margin-bottom: 20px;
+            font-family: 'barlow_regular';
+            font-size: 20px;
+        }
+
+        .decouvrir {
+            display: flex;
+            .decouvrir_icone {
+                margin-top: 2px;
+                margin-right: 5px;
+            }
+            .decouvrir_texte {
+                font-family: 'barlow_regular';
+                font-size: 18px;
+            }
+        }
+    }
+
+}
+
+.header_full_2 {
+    display: grid;
+
+    @include media_queries.media_min(tablet_600) {
+        grid-template-rows: 117px auto auto;
+    }
+    @include media_queries.media_min(tablet_900) {
+        grid-template-rows: 117px auto auto;
+    }
+    @include media_queries.media_min(desktop_1800) {
+        grid-template-rows: 130px auto auto;
+    }
+
+    @include media_queries.media_min(tablet_600) {
+        grid-template-columns: 1fr 500px 1fr;
+    }
+    @include media_queries.media_min(tablet_900) {
+        grid-template-columns: 1fr 890px 1fr;
+    }
+    @include media_queries.media_min(desktop_1000) {
+        grid-template-columns: auto 980px auto;
+    }
+    @include media_queries.media_min(desktop_1100) {
+        grid-template-columns: auto 1090px auto;
+    }
+    @include media_queries.media_min(desktop_1200) {
+        grid-template-columns: auto 1160px auto;
+    }
+    @include media_queries.media_min(desktop_1300) {
+        grid-template-columns: 1fr 1250px 1fr;
+    }
+    @include media_queries.media_min(desktop_1500) {
+        grid-template-columns: 1fr 1420px 1fr;
+    }
+    @include media_queries.media_min(desktop_1800) {
+        grid-template-columns: 1fr 1700px 1fr;
+    }
+
+
+    nav {
+        color: $noir;
+        a {
+            color: $noir;
+        }
+    }
+
+    .header_navigation {
+        grid-column: 2;
+        grid-row: 1;
+        z-index: 10;
+    }
+    .obscur {
+        grid-column: 1 / -1;
+        grid-row: 1;
+        z-index: 5;
+        background-color: rgb(255 255 255 / 98%);
+    }
+    .header-img_cont {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+
+    .header-img_text {
+        grid-column: 2;
+        grid-row: 3;
+        color: $blanc;
+
+        width: 650px;
+ 
+
+        margin-left: 80px;
+        margin-bottom: 150px;
+
+
+        .header-img_titre {
+            display: inline-block;
+            background-color: $rouge_transparent;
+
+            padding-bottom: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            text-transform: uppercase;
+            font-family: 'barlow_black';
+            font-size: 50px;
+        }
+        .header-img_description {
+            display: inline-block;
+            background-color: $rouge_transparent;
+            padding-bottom: 20px;
+            padding-top: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            font-family: 'barlow_regular';
+            font-size: 20px;
+        }
+
+        .decouvrir {
+            display: flex;
+            
+            .decouvrir_icone {
+                display: inline-block;
+                background-color: $rouge_transparent;
+                padding-top: 2px;
+                padding-left: 10px;
+                padding-right: 5px;
+                padding-bottom: 5px;
+            }
+            .decouvrir_texte {
+                display: inline-block;
+                background-color: $rouge_transparent;
+                padding-bottom: 5px;
+                font-family: 'barlow_regular';
+                font-size: 18px;
+                padding-right: 10px;
+            }
+        }
+    }
+
+}

app/assets/scss/component/_header_nav.scss

@@ -0,0 +1,136 @@
+@use '../base/colors' as *;
+@use '../layout/media_queries';
+
+.header_navigation_topbar {
+    display: flex;
+    justify-content: flex-end;
+
+    font-family: 'brandontext_regular';
+    font-size: 16px;
+
+    .header_nav_item {
+        margin-right: 30px;
+        &:last-child {
+            margin-right: 0px;
+        }
+    }
+    .header_nav_lang {
+        display: flex;
+        font-family: 'brandontext_medium';
+        .header_nav_lang_item {
+            margin-right: 4px;
+            &:last-child {
+                margin-right: 0px;
+            }
+        }
+    }
+}
+.header_navigation_main {
+    display: grid;
+    
+    grid-template-rows: 1fr;
+
+    @include media_queries.media_min(tablet_600) {
+        grid-template-columns: 140px 1fr;
+    }    
+    @include media_queries.media_min(tablet_900) {
+        grid-template-columns: 140px 1fr;
+    }
+    @include media_queries.media_min(desktop_1000) {
+        grid-template-columns: 200px 1fr;
+    }
+    @include media_queries.media_min(desktop_1200) {
+        grid-template-columns: 200px 1fr;
+    }
+    @include media_queries.media_min(desktop_1500) {
+        grid-template-columns: 240px 1fr;
+    }
+    @include media_queries.media_min(desktop_1800) {
+        grid-template-columns: 240px 1fr;
+    }
+
+}
+.header_nav_logo {
+    margin-top: -17px;
+}
+.header_nav_cont {
+    margin-left: 30px;
+    margin-right: 30px;
+
+
+    .header_nav {
+        display: flex;
+        justify-content: center;
+
+        font-family: 'brandontext_regular';
+        
+        @include media_queries.media_min(tablet_600) {
+            font-size: 18px;
+        }    
+        @include media_queries.media_min(tablet_900) {
+            font-size: 20px;
+        }
+        @include media_queries.media_min(desktop_1200) {
+            font-size: 22px;
+        }
+        @include media_queries.media_min(desktop_1500) {
+            font-size: 24px;
+        }
+        @include media_queries.media_min(desktop_1800) {
+            font-size: 26px;
+        }
+
+        .header_nav_item {
+            margin-right: 34px;
+            @include media_queries.media_min(tablet_600) {
+                margin-right: 20px;
+            }    
+            @include media_queries.media_min(tablet_900) {
+                margin-right: 22px;
+            }
+            @include media_queries.media_min(desktop_1200) {
+                margin-right: 28px;
+            }
+            @include media_queries.media_min(desktop_1500) {
+                margin-right: 30px;
+            }
+            @include media_queries.media_min(desktop_1800) {
+                margin-right: 34px;
+            }
+            &:last-child {
+                margin-right: 0px;
+            }
+        }
+        .nav_icone {
+            display: flex;
+
+            .nav_icone_img {
+                margin-right: 6px;
+                
+                @include media_queries.media_min(tablet_600) {
+                    margin-top: 1px;
+                }    
+                @include media_queries.media_min(tablet_900) {
+                    margin-top: 1px;
+                }
+                @include media_queries.media_min(desktop_1800) {
+                    margin-top: 2px;
+                }
+
+                img {
+                    @include media_queries.media_min(tablet_600) {
+                        width: 83%;
+                    }    
+                    @include media_queries.media_min(tablet_900) {
+                        width: 83%;
+                    }
+                    @include media_queries.media_min(desktop_1800) {
+                        width: 100%;
+                    }
+                }
+
+            }
+        }
+    }
+
+}

app/assets/scss/layout/_layout.scss

@@ -0,0 +1,9 @@
+  .page-enter-active, 
+  .page-leave-active {
+    transition: all 0.4s ease;
+  }
+  .page-enter-from, 
+  .page-leave-to {
+    opacity: 0;
+    filter: grayscale(66%) brightness(0.2);
+  }

app/assets/scss/layout/_media_queries.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+
+$breakpoints: (
+    "phone_300": 300px,
+    "phone_400": 400px,
+    "phone_500": 500px,
+    "tablet_600": 600px,
+    "tablet_640": 640px,
+    "tablet_700": 700px,
+    "tablet_800": 800px,
+    "tablet_900": 900px,
+    "desktop_1000": 1000px,
+    "desktop_1100": 1100px,
+    "desktop_1200": 1200px,
+    "desktop_1300": 1300px,
+    "desktop_1500": 1500px,
+    "desktop_1800": 1800px
+);
+
+
+// jusqu'à cette taille
+@mixin media_max($key) {
+    @media (max-width: map.get($breakpoints,$key)) {
+        @content;
+    }
+}
+
+// à partir de cette taille
+@mixin media_min($key) {
+    @media (min-width: map.get($breakpoints,$key)) {
+        @content;
+    }
+}
+// Entre minumum et maximum
+// media_minmax("phone","desktop") = tablette
+@mixin media_minmax($key_min, $key_max) {
+    @media (min-width: calc(map.get($breakpoints,$key_min))) and (max-width: calc(map.get($breakpoints,$key_max) - 1px)) {
+        @content;
+    }
+}

app/assets/scss/main.scss

@@ -0,0 +1,13 @@
+@use 'base/reset';
+@use 'base/colors';
+@use 'base/text';
+@use 'base/button';
+@use 'base/img';
+@use 'base/fonts';
+@use 'base/spaces';
+
+@use 'layout/layout';
+@use 'layout/media_queries';
+
+@use 'component/header_full';
+@use 'component/header_nav';