ajout de strapi

app/app.config.js

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  title: "Orchestre national d'Île-de-France - ONDIF",
+  theme: {
+    primaryColor: '#6c63ff',
+  },
+})

app/app.vue

@@ -1,6 +1,19 @@
 <template>
   <div>
+    <NuxtLoadingIndicator/>
     <NuxtRouteAnnouncer />
-    <NuxtWelcome />
+    
+
+    <!-- NuxtPage c'est là que Nuxt trouve les templates des pages à afficher en fonction de l'URL saisie -->
+    <NuxtPage />
+    
+
+    <!-- <NuxtWelcome /> -->
+
   </div>
 </template>
+
+<style lang="scss">
+
+</style>
+

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';

app/components/button_link.vue

@@ -0,0 +1,30 @@
+<template>
+    <NuxtLink :to="to" :class="['btn', variantClass]">
+        <slot />
+    </NuxtLink>
+</template>
+
+<script setup>
+    // defineProps() sert à déclarer les propriétés (props) que ton composant peut recevoir depuis l’extérieur.
+    // “Ce composant attend certains paramètres qu’on lui passera.”
+    const props = defineProps({
+        to: {
+            type: String,
+            required: true
+        },
+        variant: {
+            type: String,
+            default: 'primary'
+        }
+    })
+
+    // la fonction computed sert a se synchroniser chaque fois que la props variant change, ce rend dynamique la mise à jour de la variable, cela s'appelle une propriété calculée
+
+    const variantClass = computed(() => {
+      return `btn--${props.variant}`
+    })
+</script>
+
+<style>
+
+</style>

app/components/header_content.vue

@@ -0,0 +1,77 @@
+<script setup>
+  defineProps({
+    logoSrc: {
+      type: String,
+      required: true
+    },
+    logoAlt: {
+      type: String,
+      required: true
+    },
+    imgAgendaSrc: {
+      type: String,
+      required: true
+    }
+  })
+</script>
+
+<template>
+  <div class="header_navigation">
+
+    <div class="height_10"></div>
+
+    <nav class="header_navigation_topbar">
+      <div class="header_nav_item">Professionnels</div>
+      <div class="header_nav_item header_nav_lang">
+        <div class="header_nav_lang_item">FR</div>
+        <div class="header_nav_lang_item">/</div>
+        <div class="header_nav_lang_item">EN</div>
+      </div>
+    </nav>
+
+    <div class="height_20"></div>
+
+    <div class="header_navigation_main">
+      <div class="header_nav_logo">
+        <NuxtImg
+          :src="logoSrc"
+          :alt="logoAlt"
+          class="logo-img"
+        />
+      </div>
+      <nav class="header_nav_cont">
+
+        <div class="header_nav">
+          <div class="header_nav_item brandontext_bold">
+            <NuxtLink to="/">L'Orchestre</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">Concerts</NuxtLink>
+          </div>
+          <div class="header_nav_item brandontext_bold">
+            <NuxtLink to="/agenda">Éducation et médiation</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">Mécénat</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">
+              <div class="nav_icone">
+                <div class="nav_icone_img"><img :src="imgAgendaSrc" alt="icone agenda"></div>
+                <div>Agenda</div>
+              </div>
+            </NuxtLink>
+          </div>
+        </div>
+
+      </nav>
+    </div>
+
+    <div class="height_25"></div>
+
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/header_full.vue

@@ -0,0 +1,36 @@
+<script setup>
+    import agenda from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
+</script>
+
+<template>
+
+    <div class="header_full">
+
+        
+        <header_content 
+            logo-src="/img/logos/logo_blanc_rouge.png"
+            logo-alt="Logo de l'orchestre National d'Île-de-france en concert"
+            :img-agenda-src="agenda"
+        />
+        
+        <div class="obscur"></div>
+
+        <div class="header-img_cont">
+            <NuxtImg
+                src="/img/photos/zaho.jpg"
+                placeholder
+                preset="full"
+                alt="L'orchestre National d'Île-de-france en concert - vue d'ensemble"
+                class="header-img"
+            />
+        </div>
+
+        <div class="header-img_text">
+            <div class="header-img_titre">ZAHO DE SAGAZAN</div>
+            <div class="header-img_description">Accompagnée par l’Orchestre national d’Île-de-France dirigé par Dylan Corlay, Zaho de Sagazan revisite les chansons de son premier album pour les plonger dans une toute nouvelle dimension !</div>
+            <div class="decouvrir"><div class="decouvrir_icone"><img src="@/assets/img/icones/fleche_gris_blanc.svg" alt="icone flèche"></div><div class="decouvrir_texte">Découvrir</div></div>
+        </div>
+
+
+    </div>
+</template>

app/components/test.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p>Premier component</p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

app/components/testcomponentpage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p>
+      mon premier component de page
+    </p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

app/pages/agenda.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h1>Page Agenda</h1>
+
+
+    <div>
+      <p>Lien interne</p>
+      <div>
+        <button_link to="/">Voir l'accueil</button_link>
+      </div>
+      <div>
+        <button_link to="/" variant="primary">Voir l'accueil</button_link>
+      </div>
+      <div>
+        <button_link to="/" variant="secondary">Voir l'accueil</button_link>
+      </div>
+      <div>
+        <button_link to="/" variant="outline">Voir l'accueil</button_link>
+      </div>
+    </div>
+
+    <div v-if="errorApi1">Erreur : {{ errorApi1.message }}</div>
+    <div v-else-if="!api1">Chargement en cours...</div>
+    <div v-else>
+      <h2 v-if="api1">{{ api1.message }}</h2>
+      <h2 v-if="api1">api1 = {{ api1 }}</h2>
+    </div>
+
+    
+    <testcomponentpage />
+
+    <div v-if="errorTotos">Erreur : {{ errorTotos.message }}</div>
+    <div v-else-if="!totos">Chargement en cours...</div>
+    <div v-else>
+      <pre v-if="totos">
+        {{ totos }}
+      </pre>
+      <div v-if="totos">
+        <article v-for="toto in totos" :key="toto.id">
+            <h2>{{ toto.title }}</h2>
+            <p>{{ toto.body.slice(0, 1000) }}</p>
+            <p>
+              <NuxtLink :to="`/concerts/concert-${toto.id}`">Lire la suite</NuxtLink>
+            </p>
+        </article>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+  import button_link from '~/components/button_link.vue'
+
+  const {data: totos, error: errorTotos} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts?_limit=20')
+  const {data: api1, error: errorApi1} = await useFetch('/api/hello')
+  const config = useAppConfig()
+  useSeoMeta({
+    title: config.title
+  })
+  const appConfig = useAppConfig()
+  console.log("test 4 : ",appConfig.title) // "Mon site Nuxt"
+</script>
+
+<style>
+
+</style>

app/pages/concerts/concert-[id].vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div v-if="toto">
+      <h1>#{{route.params.id }} / {{ toto.title }}</h1>
+      <p>{{ toto.body }}</p>
+    </div>
+    <div v-else>
+      <p>Chargement...</p>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+  const route = useRoute()
+  const {data: toto} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts/' + route.params.id, { lazy: true })
+  useSeoMeta({
+    title: () => toto.value?.title
+  })
+</script>
+
+<style>
+
+</style>

app/pages/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <Header_full></Header_full>
+    <main>
+      <div>
+        <div>IMAGE TEST</div>
+        <NuxtImg :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" />
+        <!-- <img :src="imageUrl" alt="" style="max-width: 100%; height: auto;"> -->
+      </div>
+    </main>
+  </div>
+    
+</template>
+
+<script setup>
+  const runtimeConfig = useRuntimeConfig()
+  const STRAPI_URL = "http://localhost:1337"
+  //const STRAPI_URL = runtimeConfig.public.strapiUrl
+  console.log("STRAPI_URL : ",STRAPI_URL) // "Mon site Nuxt"
+
+  // Config app (pour ton SEO)
+  const config = useAppConfig()
+  useSeoMeta({
+    title: config.title
+  })
+
+  // On récupère le fichier le plus récent de la Media Library Strapi
+  const { data: files, error } = await useFetch(
+    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
+  )
+
+  const imageUrl = computed(() => {
+    const file = files.value?.[0]
+    console.log("file : ",file)
+    if (!file) return null
+
+    // Si Strapi renvoie une URL absolue (S3/OVH)
+    if (file.url?.startsWith('http')) {
+      return file.url
+    }
+
+    // Si jamais c'était une URL relative
+    return `${STRAPI_URL}${file.url}`
+  })
+  console.log("imageUrl : ",imageUrl)
+
+
+  if (error.value) {
+    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
+  }
+
+  const appConfig = useAppConfig()
+  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
+</script>
+
+<style>
+
+
+</style>

app/pages/test_header_2.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="header_full_2">
+
+    <header_content img-src="@/assets/img/logos/logo_orchestre_red.svg" img-agenda-src="@/assets/img/icones/agenda_rouge.svg"/>
+    
+    <div class="obscur"></div>
+
+    <div class="header-img_cont">
+        <NuxtImg
+            src="@/assets/img/photos/orchestre_header.jpg"
+            placeholder
+            preset="full"
+            alt="L'orchestre National d'Île-de-france en concert - vue d'ensemble"
+            class="header-img"
+        />
+    </div>
+
+    <div class="header-img_text">
+        <div class="header-img_titre">ZAHO DE SAGAZAN</div>
+        <div class="header-img_description">Accompagnée par l’Orchestre national d’Île-de-France dirigé par Dylan Corlay, Zaho de Sagazan revisite les chansons de son premier album pour les plonger dans une toute nouvelle dimension !</div>
+        <div class="decouvrir"><div class="decouvrir_icone"><img src="@/assets/img/icones/fleche_gris_blanc.svg" alt="icone flèche"></div><div class="decouvrir_texte">Découvrir</div></div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+  const config = useAppConfig()
+  useSeoMeta({
+    title: config.title
+  })
+  const appConfig = useAppConfig()
+  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
+</script>
+
+<style>
+
+
+</style>