gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/app.config.js
View File

@@ -1,5 +1,8 @@
export default defineAppConfig({ export default defineAppConfig({
title: "Orchestre national d'Île-de-France - ONDIF", title: "Orchestre national d'Île-de-France - ONDIF",
brand: {
logoAlt: "Orchestre National d’Île-de-France",
},
theme: { theme: {
primaryColor: '#6c63ff', primaryColor: '#6c63ff',
}, },

12
app/app.vue
View File

@@ -1,15 +1,17 @@
<template> <template>
<div> <div class="app">
<!-- improves perceived performance / une barre fine en haut de la page lors des chargements -->
<NuxtLoadingIndicator /> <NuxtLoadingIndicator />
<!-- improves accessibility / car tu navigues sans rechargement, annonce les changements de page aux lecteurs d’écran -->
<NuxtRouteAnnouncer /> <NuxtRouteAnnouncer />
<!-- on va gérer 2 layout, car on a 2 header différents -->
<!-- NuxtPage c'est là que Nuxt trouve les templates des pages à afficher en fonction de l'URL saisie --> <NuxtLayout>
<NuxtPage /> <NuxtPage />
</NuxtLayout>
<!-- <NuxtWelcome /> -->
</div> </div>
</template> </template>

BIN
app/assets/fonts/robotoflex.ttf Normal file
View File

Binary file not shown.

1
app/assets/img/icones/arrow_right.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path opacity=".4" d="M64 320C64 337.7 78.3 352 96 352L466.7 352L498.7 320L466.7 288L96 288C78.3 288 64 302.3 64 320z"/><path d="M566.6 297.4C579.1 309.9 579.1 330.2 566.6 342.7L406.6 502.7C394.1 515.2 373.8 515.2 361.3 502.7C348.8 490.2 348.8 469.9 361.3 457.4L498.7 320L361.4 182.6C348.9 170.1 348.9 149.8 361.4 137.3C373.9 124.8 394.2 124.8 406.7 137.3L566.7 297.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

12
app/assets/img/icones/hamurger_black.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="448px" height="384px" viewBox="0 0 448 384" 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(-3206, -1360)" fill="#000000">
<g id="Group" transform="translate(3110, 1232)">
<path d="M96,320 C96,302.3 110.3,288 128,288 L512,288 C529.7,288 544,302.3 544,320 C544,337.7 529.7,352 512,352 L128,352 C110.3,352 96,337.7 96,320 Z" id="Path" fill-rule="nonzero" opacity="0.4"></path>
<path d="M544,160 C544,142.3 529.7,128 512,128 L128,128 C110.3,128 96,142.3 96,160 C96,177.7 110.3,192 128,192 L512,192 C529.7,192 544,177.7 544,160 Z M544,480 C544,462.3 529.7,448 512,448 L128,448 C110.3,448 96,462.3 96,480 C96,497.7 110.3,512 128,512 L512,512 C529.7,512 544,497.7 544,480 Z" id="Shape" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

11
app/assets/img/icones/hamurger_white.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="448px" height="384px" viewBox="0 0 448 384" 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(-2896, -2170)" fill="#FFFFFF">
<g id="Group" transform="translate(2800, 2042)">
<path d="M512,288 C529.7,288 544,302.3 544,320 C544,337.7 529.7,352 512,352 L128,352 C110.3,352 96,337.7 96,320 C96,302.3 110.3,288 128,288 L512,288 Z M512,128 C529.7,128 544,142.3 544,160 C544,177.7 529.7,192 512,192 L128,192 C110.3,192 96,177.7 96,160 C96,142.3 110.3,128 128,128 Z M544,480 C544,462.3 529.7,448 512,448 L128,448 C110.3,448 96,462.3 96,480 C96,497.7 110.3,512 128,512 L512,512 C529.7,512 544,497.7 544,480 Z" id="Shape" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

25
app/assets/img/icones/ticket_black.svg Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="419px" height="315px" viewBox="0 0 419 315" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>noun-tickets-956198</title>
<g id="billetterie" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="500" transform="translate(-16, 0)">
<g id="noun-tickets-956198" transform="translate(16.8607, 0)">
<polygon id="Path" fill="#E30613" fill-rule="nonzero" points="143.329055 222.711266 138.691691 210.354443 147.213974 207.1581 151.851338 219.514922"></polygon>
<polygon id="Path" fill="#E30613" fill-rule="nonzero" points="119.057451 132.068566 123.691645 144.425389 115.169362 147.621732 110.535168 135.26491"></polygon>
<polygon id="Path" fill="#E30613" fill-rule="nonzero" points="132.976854 169.56076 124.454571 172.753934 119.823546 160.397112 128.345829 157.203937"></polygon>
<polygon id="Path" fill="#E30613" fill-rule="nonzero" points="142.613989 194.44992 134.091707 197.643095 129.460681 185.286272 137.982964 182.093098"></polygon>
<path d="M252.092168,149.25452 L262.557317,177.012069 L321.713562,154.714209 L311.248414,126.956659 L252.092168,149.25452 Z M268.020256,165.636024 L263.925611,155.170876 L306.242873,139.242788 L310.337517,149.707936 L268.020256,165.636024 Z" id="Shape" fill="#E30613" fill-rule="nonzero"></path>
<path d="M327.174064,109.665884 L301.692536,42.3205116 L146.978327,100.565861 L172.459855,167.911233 L327.174064,109.665884 Z M296.683826,54.1507856 L315.341352,104.660424 L177.46369,156.535188 L158.806164,106.02555 L296.683826,54.1507856 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="186.371133 206.25663 183.177958 197.734347 246.666851 173.934849 249.860026 182.457131"></polygon>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="175.791411 178.76723 239.273804 154.961231 242.470147 163.483514 178.987755 187.289513"></polygon>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="193.399903 225.85593 190.206729 217.333647 234.095509 200.882261 237.288684 209.404544"></polygon>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="66.4432439 165.961054 90.2492426 229.443447 81.72696 232.63979 57.9209612 169.157397"></polygon>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="88.854052 166.692371 105.308688 210.574651 96.7864055 213.770995 80.3317693 169.888715"></polygon>
<path d="M266.198464,272.115803 L329.449273,273.02678 L329.903169,243.450689 L266.65236,242.539712 L266.198464,272.115803 Z M275.755967,252.093152 L320.805916,253.004129 L320.805916,264.380174 L275.755967,263.469196 L275.755967,252.093152 Z" id="Shape" fill="#E30613" fill-rule="nonzero"></path>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="252.287186 272.944629 184.490835 271.913066 184.6305 262.813042 252.426852 263.844606"></polygon>
<polygon id="Path" fill="#000000" fill-rule="nonzero" points="231.135869 293.307749 184.269815 292.593569 184.40948 283.493546 231.275534 284.207726"></polygon>
<path d="M355.386655,0 L111.029214,91.9184416 L112.847999,96.0130864 C113.758977,98.7428495 113.758977,101.929605 112.394103,104.202213 C111.029222,106.931977 109.207267,108.753931 106.477585,110.118732 C101.018058,112.394591 94.6473109,109.207754 92.372102,103.748309 L90.5533162,99.6536644 L0,133.327569 L36.4041558,230.251471 L35.0392742,308.518659 L131.508134,309.88354 L131.508134,305.331822 C131.508134,299.415304 136.513756,294.410007 142.429949,294.410007 C148.346142,294.410007 153.351765,299.415629 153.351765,305.331822 L153.351765,309.88354 L415.000794,314.432089 L417.730557,141.516209 L408.630534,141.516209 L355.386655,0 Z M11.8301033,138.787746 L85.5460607,111.030197 C89.1868013,116.489723 95.5569801,120.13022 102.381794,120.13022 C103.292772,120.13022 104.20058,120.13022 105.111558,119.676324 L106.022535,122.406087 L114.669142,119.219251 L113.758164,116.489487 C116.945001,114.213628 119.217691,111.483865 121.039564,108.30036 C122.404446,104.65962 123.315423,101.01896 122.85835,97.3785449 L328.537239,20.4756698 L382.688024,165.634001 L176.554094,242.536876 C172.913353,237.077349 166.543174,233.436853 159.71836,233.436853 C158.807383,233.436853 157.899574,233.436853 156.988597,233.890749 L156.077619,232.071963 L147.431013,235.258799 L147.884909,237.077585 C144.698072,239.353444 142.425382,242.083207 140.603509,245.266712 C139.238627,248.907453 138.32765,252.548112 138.784723,256.188528 L65.0687658,283.946077 L11.8301033,138.787746 Z M342.645485,189.751614 L342.188411,223.879748 L254.820388,222.514866 L342.645485,189.751614 Z M381.779079,304.877187 L161.993894,301.69035 C160.175108,294.40895 154.712494,288.495763 147.430932,286.673971 L147.430932,284.855185 L138.330908,284.855185 L138.330908,286.673971 C131.049508,288.492757 125.136322,293.955371 123.314529,301.236934 L44.5931122,299.872052 L45.0470083,253.911206 L60.5176165,295.320822 L138.331388,266.198147 L138.331388,270.749865 L147.431411,270.749865 L147.431411,262.560738 L150.618247,261.195856 L148.799462,257.101212 C147.888484,254.371448 147.888484,251.184693 149.253358,248.912084 C150.618239,246.636225 152.440194,244.360366 155.169876,242.995566 C160.629402,240.719707 167.00015,243.906544 169.275359,249.365989 L171.094145,253.460633 L184.288731,248.455011 L184.288731,250.73087 L252.090771,251.641848 L252.090771,242.541824 L202.034549,241.630847 L230.702994,230.709031 L350.378985,232.527817 L351.289962,185.658513 L383.599554,173.828239 L381.779079,304.877187 Z M336.2749,17.2907754 L350.380382,11.8312491 L404.531168,156.98958 L390.425685,162.449106 L336.2749,17.2907754 Z M405.896293,305.332228 L390.879914,304.878332 L392.6987,170.641004 L407.715079,165.181478 L405.896293,305.332228 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

25
app/assets/img/icones/ticket_white.svg Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="419px" height="315px" viewBox="0 0 419 315" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>noun-tickets-956198</title>
<g id="billetterie" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ticket-blanc" transform="translate(-16, 0)">
<g id="noun-tickets-956198" transform="translate(16.8607, 0)">
<polygon id="Path" fill-opacity="0.85" fill="#E30613" fill-rule="nonzero" points="143.329055 222.711266 138.691691 210.354443 147.213974 207.1581 151.851338 219.514922"></polygon>
<polygon id="Path" fill-opacity="0.85" fill="#E30613" fill-rule="nonzero" points="119.057451 132.068566 123.691645 144.425389 115.169362 147.621732 110.535168 135.26491"></polygon>
<polygon id="Path" fill-opacity="0.85" fill="#E30613" fill-rule="nonzero" points="132.976854 169.56076 124.454571 172.753934 119.823546 160.397112 128.345829 157.203937"></polygon>
<polygon id="Path" fill-opacity="0.85" fill="#E30613" fill-rule="nonzero" points="142.613989 194.44992 134.091707 197.643095 129.460681 185.286272 137.982964 182.093098"></polygon>
<path d="M252.092168,149.25452 L262.557317,177.012069 L321.713562,154.714209 L311.248414,126.956659 L252.092168,149.25452 Z M268.020256,165.636024 L263.925611,155.170876 L306.242873,139.242788 L310.337517,149.707936 L268.020256,165.636024 Z" id="Shape" fill-opacity="0.727347847" fill="#E30613" fill-rule="nonzero"></path>
<path d="M327.174064,109.665884 L301.692536,42.3205116 L146.978327,100.565861 L172.459855,167.911233 L327.174064,109.665884 Z M296.683826,54.1507856 L315.341352,104.660424 L177.46369,156.535188 L158.806164,106.02555 L296.683826,54.1507856 Z" id="Shape" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero"></path>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="186.371133 206.25663 183.177958 197.734347 246.666851 173.934849 249.860026 182.457131"></polygon>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="175.791411 178.76723 239.273804 154.961231 242.470147 163.483514 178.987755 187.289513"></polygon>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="193.399903 225.85593 190.206729 217.333647 234.095509 200.882261 237.288684 209.404544"></polygon>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="66.4432439 165.961054 90.2492426 229.443447 81.72696 232.63979 57.9209612 169.157397"></polygon>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="88.854052 166.692371 105.308688 210.574651 96.7864055 213.770995 80.3317693 169.888715"></polygon>
<path d="M266.198464,272.115803 L329.449273,273.02678 L329.903169,243.450689 L266.65236,242.539712 L266.198464,272.115803 Z M275.755967,252.093152 L320.805916,253.004129 L320.805916,264.380174 L275.755967,263.469196 L275.755967,252.093152 Z" id="Shape" fill-opacity="0.727347847" fill="#E30613" fill-rule="nonzero"></path>
<polygon id="Path" fill-opacity="0.727347847" fill="#FFFFFF" fill-rule="nonzero" points="252.287186 272.944629 184.490835 271.913066 184.6305 262.813042 252.426852 263.844606"></polygon>
<polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="231.135869 293.307749 184.269815 292.593569 184.40948 283.493546 231.275534 284.207726"></polygon>
<path d="M355.386655,0 L111.029214,91.9184416 L112.847999,96.0130864 C113.758977,98.7428495 113.758977,101.929605 112.394103,104.202213 C111.029222,106.931977 109.207267,108.753931 106.477585,110.118732 C101.018058,112.394591 94.6473109,109.207754 92.372102,103.748309 L90.5533162,99.6536644 L0,133.327569 L36.4041558,230.251471 L35.0392742,308.518659 L131.508134,309.88354 L131.508134,305.331822 C131.508134,299.415304 136.513756,294.410007 142.429949,294.410007 C148.346142,294.410007 153.351765,299.415629 153.351765,305.331822 L153.351765,309.88354 L415.000794,314.432089 L417.730557,141.516209 L408.630534,141.516209 L355.386655,0 Z M11.8301033,138.787746 L85.5460607,111.030197 C89.1868013,116.489723 95.5569801,120.13022 102.381794,120.13022 C103.292772,120.13022 104.20058,120.13022 105.111558,119.676324 L106.022535,122.406087 L114.669142,119.219251 L113.758164,116.489487 C116.945001,114.213628 119.217691,111.483865 121.039564,108.30036 C122.404446,104.65962 123.315423,101.01896 122.85835,97.3785449 L328.537239,20.4756698 L382.688024,165.634001 L176.554094,242.536876 C172.913353,237.077349 166.543174,233.436853 159.71836,233.436853 C158.807383,233.436853 157.899574,233.436853 156.988597,233.890749 L156.077619,232.071963 L147.431013,235.258799 L147.884909,237.077585 C144.698072,239.353444 142.425382,242.083207 140.603509,245.266712 C139.238627,248.907453 138.32765,252.548112 138.784723,256.188528 L65.0687658,283.946077 L11.8301033,138.787746 Z M342.645485,189.751614 L342.188411,223.879748 L254.820388,222.514866 L342.645485,189.751614 Z M381.779079,304.877187 L161.993894,301.69035 C160.175108,294.40895 154.712494,288.495763 147.430932,286.673971 L147.430932,284.855185 L138.330908,284.855185 L138.330908,286.673971 C131.049508,288.492757 125.136322,293.955371 123.314529,301.236934 L44.5931122,299.872052 L45.0470083,253.911206 L60.5176165,295.320822 L138.331388,266.198147 L138.331388,270.749865 L147.431411,270.749865 L147.431411,262.560738 L150.618247,261.195856 L148.799462,257.101212 C147.888484,254.371448 147.888484,251.184693 149.253358,248.912084 C150.618239,246.636225 152.440194,244.360366 155.169876,242.995566 C160.629402,240.719707 167.00015,243.906544 169.275359,249.365989 L171.094145,253.460633 L184.288731,248.455011 L184.288731,250.73087 L252.090771,251.641848 L252.090771,242.541824 L202.034549,241.630847 L230.702994,230.709031 L350.378985,232.527817 L351.289962,185.658513 L383.599554,173.828239 L381.779079,304.877187 Z M336.2749,17.2907754 L350.380382,11.8312491 L404.531168,156.98958 L390.425685,162.449106 L336.2749,17.2907754 Z M405.896293,305.332228 L390.879914,304.878332 L392.6987,170.641004 L407.715079,165.181478 L405.896293,305.332228 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
app/assets/img/illustrations/map_idf.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
app/assets/img/logos/logo_pref_idf.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
app/assets/img/logos/logo_region_idf.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
app/assets/img/logos/logo_region_paris.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

4
app/assets/scss/base/_colors.scss
View File

@@ -11,3 +11,7 @@ $vert: green;
$bleu_fonce: #0056b3; $bleu_fonce: #0056b3;
$bleu_clair: #007bff; $bleu_clair: #007bff;

71
app/assets/scss/base/_fonts.scss
View File

@@ -1,81 +1,76 @@
@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-face {
font-family: 'brandontext_bold_italic'; font-family: 'brandontext_bold_italic';
src: url('~/assets/fonts/brandontext_bold_italic.woff2') format('woff2'); src: url('@/assets/fonts/brandontext_boldItalic.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'brandontext_bold'; font-family: 'brandontext_bold';
src: url('~/assets/fonts/brandontext_bold.woff2') format('woff2'); 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-face {
font-family: 'brandontext_medium_italic'; font-family: 'brandontext_medium_italic';
src: url('~/assets/fonts/brandontext_medium_italic.woff2') format('woff2'); src: url('@/assets/fonts/brandontext_mediumItalic.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'brandontext_medium'; font-family: 'brandontext_medium';
src: url('~/assets/fonts/brandontext_medium.woff2') format('woff2'); src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'brandontext_regular_italic'; font-family: 'brandontext_regular_italic';
src: url('~/assets/fonts/brandontext_regular_italic.woff2') format('woff2'); src: url('@/assets/fonts/brandontext_regularItalic.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'brandontext_regular'; font-family: 'brandontext_regular';
src: url('~/assets/fonts/brandontext_regular.woff2') format('woff2'); 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-face {
font-family: 'barlow_medium'; font-family: 'barlow_medium';
src: url('~/assets/fonts/barlow_medium.ttf') format('truetype'); src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_semibold'; font-family: 'barlow_semibold';
src: url('~/assets/fonts/barlow_semibold.ttf') format('truetype'); src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_regular'; font-family: 'barlow_regular';
src: url('~/assets/fonts/barlow_regular.ttf') format('truetype'); src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_light'; font-family: 'barlow_light';
src: url('~/assets/fonts/barlow_light.ttf') format('truetype'); src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_extrabold'; font-family: 'barlow_extrabold';
src: url('~/assets/fonts/barlow_extrabold.ttf') format('truetype'); src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_bold'; font-family: 'barlow_bold';
src: url('~/assets/fonts/barlow_bold.ttf') format('truetype'); src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'barlow_black'; font-family: 'barlow_black';
src: url('~/assets/fonts/barlow_black.ttf') format('truetype'); src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
} }
@font-face {
font-family: "Roboto Flex";
src: url("@/assets/fonts/robotoflex.ttf") format("truetype");
font-weight: 100 1000;
font-stretch: 25% 151%;
font-style: oblique 0deg 10deg;
font-display: swap;
}
.brandontext_bold { .brandontext_bold {
font-family: brandontext_bold !important; font-family: brandontext_bold !important;
} }
.roboto_regular {
font-family: Roboto Flex;
font-weight: 400
}
.roboto_semibold {
font-family: Roboto Flex;
font-weight: 600
}

3
app/assets/scss/base/_reset.scss
View File

@@ -2,6 +2,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
*, *::before, *::after {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-size: inherit; font-size: inherit;

7
app/assets/scss/base/_spaces.scss
View File

@@ -19,3 +19,10 @@
.height_33 { .height_33 {
height: 33px; height: 33px;
} }
.margin_left_-20 {
margin-left: -20px;
}
.padding_top_1 {
padding-top: 1px;
}

9
app/assets/scss/base/_text.scss
View File

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

214
app/assets/scss/component/_header_full.scss
View File

@@ -1,214 +0,0 @@
@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;
}
}
}
}

129
app/assets/scss/component/_header_layout.scss Normal file
View File

@@ -0,0 +1,129 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
/* thème clair */
.header_layout.header--light {
--header-text-color: #{$noir};
}
/* thème sombre */
.header_layout.header--dark {
--header-text-color: #{$blanc};
}
.header_layout {
display: grid;
grid-template-rows: 130px auto auto;
@include media_queries.media_max(tablet_700) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_700) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 15px minmax(0, 1fr) 15px;
}
@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: var(--header-text-color);
a {
color: var(--header-text-color);
}
}
.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;
margin-left: 80px;
margin-bottom: 150px;
@include media_queries.media_max(tablet_800) {
width: 500px;
}
@include media_queries.media_min(tablet_800) {
width: 650px;
}
.header-img_titre {
margin-bottom: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
@include media_queries.media_max(tablet_800) {
font-size: 40px;
}
@include media_queries.media_min(tablet_800) {
font-size: 50px;
}
}
.header-img_description {
margin-bottom: 20px;
font-family: 'barlow_regular';
@include media_queries.media_max(tablet_800) {
font-size: 18px;
}
@include media_queries.media_min(tablet_800) {
font-size: 20px;
}
}
.decouvrir {
display: flex;
.decouvrir_icone {
margin-top: 2px;
margin-right: 5px;
}
.decouvrir_texte {
font-family: 'barlow_regular';
font-size: 18px;
}
}
}
}

355
app/assets/scss/component/_header_nav.scss
View File

@@ -8,11 +8,53 @@
font-family: 'brandontext_regular'; font-family: 'brandontext_regular';
font-size: 16px; font-size: 16px;
.header_nav_item { .header_nav_topbar_item {
list-style: none;
cursor: pointer;
margin-right: 30px; margin-right: 30px;
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
} }
position: relative;
cursor: pointer;
&:hover {
.header_nav_topbar_submenu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
}
.header_nav_topbar_submenu {
position: absolute;
left: 0;
z-index: 2;
width: 187px;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 3px;
.header_nav_topbar_submenu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 15px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
} }
.header_nav_lang { .header_nav_lang {
display: flex; display: flex;
@@ -29,12 +71,16 @@
display: grid; display: grid;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: 1fr;
@include media_queries.media_min(tablet_600) { @include media_queries.media_min(tablet_701) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 140px 1fr; grid-template-columns: 140px 1fr;
} }
@include media_queries.media_min(tablet_900) { @include media_queries.media_min(tablet_900) {
grid-template-columns: 140px 1fr; grid-template-columns: 171px 1fr;
} }
@include media_queries.media_min(desktop_1000) { @include media_queries.media_min(desktop_1000) {
grid-template-columns: 200px 1fr; grid-template-columns: 200px 1fr;
@@ -51,16 +97,65 @@
} }
.header_nav_logo { .header_nav_logo {
@include media_queries.media_min(tablet_700) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_800) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_900) {
margin-top: -17px; margin-top: -17px;
}
@include media_queries.media_max(tablet_700) {
width: 166px;
margin-left: 43px;
}
@include media_queries.media_max(phone_500) {
margin-left: 0px;
}
@include media_queries.media_max(phone_300) {
margin-left: 0px;
}
} }
.header_nav_cont { .header_nav_cont {
@include media_queries.media_max(tablet_800) {
margin-left: 40px;
margin-right: 20px;
}
@include media_queries.media_min(tablet_800) {
margin-left: 25px;
margin-right: 25px;
}
@include media_queries.media_min(tablet_900) {
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
}
@include media_queries.media_max(tablet_700) {
margin-top: -9px;
}
.header_nav { .header_nav {
display: flex; display: flex;
row-gap: 13px;
justify-content: center; justify-content: center;
@include media_queries.media_min(tablet_700) {
justify-content: flex-start;
}
@include media_queries.media_min(tablet_800) {
justify-content: center;
}
flex-wrap: wrap;
text-wrap-mode: nowrap;
font-family: 'brandontext_regular'; font-family: 'brandontext_regular';
@@ -81,8 +176,23 @@
} }
.header_nav_item { .header_nav_item {
margin-right: 34px; position: relative;
@include media_queries.media_min(tablet_600) { cursor: pointer;
&:hover {
.header_nav_sub_menu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
list-style: none;
&:nth-child(5) {
margin-right: 10px;
}
@include media_queries.media_min(tablet_701) {
margin-right: 20px; margin-right: 20px;
} }
@include media_queries.media_min(tablet_900) { @include media_queries.media_min(tablet_900) {
@@ -100,24 +210,51 @@
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
} }
}
.header_nav_sub_menu {
position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
.header_nav_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
.header_nav_icones {
display: flex;
} }
.nav_icone { .nav_icone {
display: flex; display: flex;
.nav_icone_img { .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 { img {
@include media_queries.media_max(tablet_600) {
width: 83%;
}
@include media_queries.media_min(tablet_600) { @include media_queries.media_min(tablet_600) {
width: 83%; width: 83%;
} }
@@ -128,9 +265,195 @@
width: 100%; width: 100%;
} }
} }
}
.nav_icone_img--agenda {
margin-right: 13px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 2px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
}
.nav_icone_img--ticket {
width: 46px;
margin-top: -4px;
} }
} }
} }
/* accessibilité pour que les écran est le message "ouvrir le menu" mais non visible sur l'écran en mode normal*/
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Par défaut : desktop visible, mobile caché */
.header_nav--desktop { display: flex; }
.header_nav--mobile { display: none; }
.header_nav--mobile-icons { display: none; }
.header_drawer { display: none; }
/* ✅ Mobile < 700px : on inverse */
@media (max-width: 700px) {
.header_nav--desktop { display: none; }
.header_nav--mobile {
display: flex;
justify-content: flex-end;
margin-top: -21px;
}
.header_nav--mobile-icons {
display: none;
@include media_queries.media_min(phone_400) {
display: flex;
}
justify-content: flex-end;
margin-top: -23px;
margin-right: 60px;
}
.hamburger_black {
background-color: $noir;
}
.hamburger_white {
background-color: $blanc;
}
.header_burger {
position: relative;
background: transparent;
border: 0;
cursor: pointer;
width: 27px;
padding: 8px;
font-size: 26px;
line-height: 1;
img {
width: 31px;
}
.burger_line {
position: absolute;
left: 0;
width: 100%;
height: 3px;
transition:
transform 0.25s ease,
opacity 0.2s ease,
top 0.25s ease;
}
.burger_line:nth-child(1) { top: 0; }
.burger_line:nth-child(2) { top: 8px; }
.burger_line:nth-child(3) { top: 16px; }
&.is-open {
.burger_line:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.burger_line:nth-child(2) {
opacity: 0;
}
.burger_line:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
}
}
.header_drawer {
display: block;
width: 100%;
position: absolute;
left: 0;
border-top: 1px solid rgba(0,0,0,.1);
background-color: rgba(0, 0, 0, 0.9);
margin-top: 47px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 40px;
}
.header_drawer[data-open="false"] {
display: none;
}
.header_drawer_inner {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0;
}
.header_drawer_link {
text-decoration: none;
color: $blanc;
padding: 6px 0;
font-size: 26px;
position: relative;
cursor: pointer;
&.is-open {
.header_drawer_sub_menu {
display: block;
visibility: visible;
opacity: 1;
}
}
list-style: none;
}
.header_drawer_sub_menu {
display: none;
max-width: 300px;
//position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
}
.header_drawer_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
} }

33
app/assets/scss/component/_orbites.scss Normal file
View File

@@ -0,0 +1,33 @@
.bg-orbs {
position: absolute;
inset: 0;
z-index: 0;
transform: translateZ(0);
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 999px;
filter: blur(3px);
opacity: 0.30;
will-change: transform;
transform: translate3d(0,0,0);
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
background: red;
}
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
@media (prefers-reduced-motion: reduce) {
.orb { animation: none !important; }
}

9
app/assets/scss/layout/_layout.scss
View File

@@ -1,3 +1,12 @@
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
// Pour que main occupe toute la place de la page et que le footer soit en bas (au cas où le main n'occupe pas toute la hauteur de la page
#main-content {
flex: 1;
}
.page-enter-active, .page-enter-active,
.page-leave-active { .page-leave-active {
transition: all 0.4s ease; transition: all 0.4s ease;

1
app/assets/scss/layout/_media_queries.scss
View File

@@ -8,6 +8,7 @@ $breakpoints: (
"tablet_600": 600px, "tablet_600": 600px,
"tablet_640": 640px, "tablet_640": 640px,
"tablet_700": 700px, "tablet_700": 700px,
"tablet_701": 701px,
"tablet_800": 800px, "tablet_800": 800px,
"tablet_900": 900px, "tablet_900": 900px,
"desktop_1000": 1000px, "desktop_1000": 1000px,

10
app/assets/scss/main.scss
View File

@@ -1,13 +1,19 @@
@use 'base/reset'; @use 'base/reset';
/* à remplacer par Design system */
@use 'base/colors'; @use 'base/colors';
@use 'base/text';
@use 'base/button'; @use 'base/button';
@use 'base/img'; @use 'base/img';
@use 'base/fonts'; @use 'base/fonts';
@use 'base/spaces'; @use 'base/spaces';
/* Design system */
@use "@root/design-system/tokens/index" as *;
@use 'layout/layout'; @use 'layout/layout';
@use 'layout/media_queries'; @use 'layout/media_queries';
@use 'component/header_full'; @use 'component/_header_layout';
@use 'component/header_nav'; @use 'component/header_nav';
@use 'component/orbites';

193
app/components/Footer.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<NewsletterCta />
<PageSection tone="brand" :padded="false" content-size="default" padt="sm" padb="sm" class="footer">
<div class="footer--inner">
<SectionContent pad="xs" class="footer--logo">
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
</SectionContent>
<SectionContent pad="xs">
<div class="footer--grid">
<div class="footer--grid--orchestre">
<div class="nav--item">L'équipe</div>
<div class="nav--item">Nous contacter</div>
</div>
<div class="footer--grid--nav1">
<div class="nav--title">Nous soutenir</div>
<div class="nav--item">Mécénat</div>
<div class="nav--item">XXXX</div>
</div>
<div class="footer--grid--nav2">
<div class="nav--title">Rejoignez-nous</div>
<div class="nav--item">Recrutement</div>
<div class="nav--item">Académie d'Orchestre</div>
</div>
<div class="footer--grid--social">
<div class="nav--title">Nos réseaux</div>
<div class="nav--item nav--social">
<a class="social" href="...">
<NuxtImg :src="logoInstagram" alt="logo Instagram" height="37" width="37" class="social__icon" />
<span class="social__label">Instagram</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logoyt" alt="logo You Tube" height="28" width="37" class="social__icon" />
<span class="social__label">YouTube</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logofacebook" alt="logo Facebook" height="37" width="35" class="social__icon" />
<span class="social__label">Facebook</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logolinkedin" alt="logo LinkedIn" height="37" width="37" class="social__icon" />
<span class="social__label">LinkedIn</span>
</a>
</div>
</div>
</div>
</SectionContent pad="xs">
</div>
</PageSection>
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
<SectionContent>
<div class="footer_logos">
<div><img class="footer_logos--img" :src="logoPrefet" height="80" alt="logo Préfet de la région d'Île-de-France" /></div>
<div><img class="footer_logos--img" :src="logoIdf" height="80" alt="logo Région Île-de-France" /></div>
<div><img class="footer_logos--img" :src="logoParis" height="80" alt="logo Région Paris" /></div>
</div>
</SectionContent>
</PageSection>
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
<SectionContent>
<div class="footer_mentions">
<div class="footer_mentions--item">© Orchestre national d’Île-de-France - 2026</div>
<div class="footer_mentions--item">Conditions générales de vente</div>
<div class="footer_mentions--item">Mentions légales</div>
</div>
</SectionContent>
</PageSection>
</template>
<script setup>
import logoDefault from '/img/logos/logo_orchestre_red.svg'
import logoInstagram from '/img/icones/instagram_gradient.svg'
import logoyt from '/img/icones/youtube_play_rouge.svg'
import logofacebook from '/img/icones/facebook_rond_bleu.svg'
import logolinkedin from '/img/icones/linkedin_bleu.png'
import logoPrefet from '@/assets/img/logos/logo_pref_idf.webp'
import logoIdf from '@/assets/img/logos/logo_region_idf.webp'
import logoParis from '@/assets/img/logos/logo_region_paris.webp'
const { brand } = useAppConfig()
</script>
<style lang="scss">
.footer {
color: var(--c-text-invert);
font-family: var(--font-roboto);
font-weight: var(--fw-extralight);
&--logo {
max-width: 250px;
img {
filter: invert(100%) sepia(96%) saturate(18%) hue-rotate(237deg) brightness(127%) contrast(105%);
}
}
&--grid {
display: grid;
@media (max-width: 400px) {
grid-template-columns: 1fr;
row-gap: 20px;
}
@media (min-width: 400px) {
grid-template-columns: 1fr 1fr;
column-gap: 30px;
row-gap: 40px;
}
@media (min-width: 900px) {
grid-template-columns: 1.2fr 1fr 1fr 1fr;
column-gap: 50px;
row-gap: 50px;
}
align-items: start;
margin-top: 20px;
}
.nav {
&--title {
padding-bottom: 12px;
font-weight: var(--fw-black);
}
&--item {
padding-bottom: 6px;
}
&--social {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 5px;
row-gap: 6px;
align-items: center;
.social {
display: contents;
&__icon {
display: block;
padding: 4px;
border-radius: 5px;
background-color: rgb(255 255 255 / 83%);
}
}
}
}
}
.footer_logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 15px;
row-gap: 20px;
&--img {
object-fit: contain;
max-height: 70px;
@media (max-width: 300px) {
max-width: 210px;
}
@media (min-width: 300px) {
max-width: 290px;
}
@media (min-width: 400px) {
max-width: 390px;
}
@media (min-width: 900px) {
max-width: 390px;
}
}
}
.footer_mentions {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 15px;
row-gap: 12px;
font-family: var(--font-roboto);
font-weight: var(--fw-medium);
font-size: 12px;
}
</style>

73
app/components/NewsletterCta.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div class="newslettercta">
<PageSection tone="brandreverse" :padded="false" content-size="default" padb="xs">
<SectionTitle as="h1" tone="invert" pad="xs">
NEWSLETTER
</SectionTitle>
<SectionContent pad="xs" class="newslettercta__content">
<div class="newslettercta__content_text">
<DsText as="p" tone="invert">
Recevez l'actualité des concerts de l'Orchestre national d'Île-de-France par infolettre !
</DsText>
</div>
<div class="newslettercta__button">
<DsButton
href="https://eb686efa.sibforms.com/serve/MUIFAP2a1WdNgM9e0cv4B5b_QwHC_QzCXtnwSoUEWllWVV1Kxq7vbzbRVWoIagXviq-jYQHuKv0-AN8cmEggeJnUds8C4VumwkC0dCTD0kQPVZ8nXWhXG5ABFo4EEys6OY-C_qQW4iUnWeq8cFA8X3dRaLj_q410BX_yvp6E8o5eOklPWsKkZnmXI1Qc31WqegQhTTkp_Z0Jhbg="
target="_blank"
rel="noopener noreferrer"
textColor="invert"
borderColor="invert"
>
Restez informé
</DsButton>
</div>
</SectionContent>
</PageSection>
</div>
</template>
<script setup>
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
</script>
<style lang="scss">
.newslettercta {
margin-bottom: 30px;
}
.newslettercta__content {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
row-gap: 15px;
column-gap: 15px;
padding-right: 10px;
.newslettercta__content_text {
grid-column: 1;
}
.newslettercta__button {
grid-column: 1;
justify-self: start;
}
}
@media (max-width: 300px) {
.newslettercta__content {
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
}
}
@media (min-width: 500px) {
.newslettercta__content {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
.newslettercta__button {
grid-column: 2;
}
}
}
</style>

30
app/components/button_link.vue
View File

@@ -1,30 +0,0 @@
<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>

88
app/components/concert/ConcertCard.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<DsCard class="concert-card">
<div class="concert-card__grid">
<!-- Image -->
<div class="concert-card__media">
<DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
</div>
<!-- Content -->
<div class="concert-card__content">
<DsHeading as="h4" tone="default" class="concert-card__title">
{{ title }}
</DsHeading>
<!-- Meta : date + lieu -->
<div class="concert-card__meta">
<DsHeading as="h5" tone="default">
{{ venue }}
</DsHeading>
<DsHeading as="h6" tone="default">
<time :datetime="dateISO">{{ dateLabel }}</time>
</DsHeading>
</div>
<!-- Description -->
<DsText as="p" tone="default" :clamp="3" class="concert-card__description">
{{ description }}
</DsText>
<!-- Actions -->
<div class="concert-card__actions">
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
Réserver
</DsButtonArrow>
</div>
</div>
</div>
</DsCard>
</template>
<script setup>
import DsCard from '@root/design-system/components/DsCard.vue'
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
defineProps({
id: { type: [String, Number], required: true },
title: { type: String, required: true },
venue: { type: String, required: true },
dateISO: { type: String, required: true }, // ex: "2026-01-15T20:00:00+01:00"
dateLabel: { type: String, required: true }, // ex: "Jeu. 15 jan. 2026 — 20h"
description: { type: String, default: '' },
imageUrl: { type: String, default: '' },
imageAlt: { type: String, default: '' },
})
</script>
<style lang="scss">
.concert-card__grid {
display: grid;
gap: var(--sp-16);
align-items: start;
}
.concert-card__content {
display: grid;
gap: var(--sp-6);
max-width: 518px;
padding-left: 5px;
padding-right: 5px;
}
.concert-card__meta {
margin-top: calc(var(--sp-4) * -1);
}
.concert-card__description {
margin-top: 10px;
margin-bottom: 20px;
}
.concert-card__actions {
margin-top: auto;
}
</style>

126
app/components/concert/ConcertCardList.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="concert-card-list">
<slot />
</div>
</template>
<style lang="scss">
.concert-card-list {
display: flex;
flex-wrap: wrap;
gap: var(--gap-cards);
justify-content: center;
}
// Afficher seulement 1 cards < 600px
@media (max-width: 599px) {
.concert-card-list > .concert-card:nth-child(2) {
display: none;
}
.concert-card-list > .concert-card:nth-child(3) {
display: none;
}
}
// Afficher seulement 2 cards < 900px
@media (max-width: 899px) {
.concert-card-list > .concert-card:nth-child(3) {
display: none;
}
}
// Taille des cards
@media (max-width: 599px) {
.concert-card-list > .concert-card {
flex: 1 1 260px;
max-width: 90%;
}
}
@media (min-width: 600px) {
.concert-card-list > .concert-card {
flex: 1 1 260px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 280px;
}
}
@media (min-width: 700px) {
.concert-card-list > .concert-card {
flex: 1 1 280px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 300px;
}
}
@media (min-width: 800px) {
.concert-card-list > .concert-card {
flex: 1 1 280px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 300px;
}
}
@media (min-width: 900px) {
.concert-card-list > .concert-card {
flex: 1 1 260px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 300px;
}
}
@media (min-width: 1000px) {
.concert-card-list > .concert-card {
flex: 1 1 280px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 340px;
}
}
@media (min-width: 1100px) {
.concert-card-list > .concert-card {
flex: 1 1 300px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 380px;
}
}
@media (min-width: 1200px) {
.concert-card-list > .concert-card {
flex: 1 1 320px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 400px;
}
}
@media (min-width: 1300px) {
.concert-card-list > .concert-card {
flex: 1 1 340px;
}
.concert-card-list > .concert-card:first-child {
flex: 2 1 440px;
}
}
@media (min-width: 1400px) {
// style appliqué au composant enfant via sa classe
.concert-card-list > .concert-card {
flex: 1 1 360px;
}
//règle spécifique après la règle générale
.concert-card-list > .concert-card:first-child {
flex: 2 1 480px;
}
}
</style>

13
app/components/header/BurgerIcon.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
defineProps({
burgerColor: { type: String, default: 'hamburger_black' }
})
</script>
<template>
<span class="burger">
<span :class="['burger_line', burgerColor]"></span>
<span :class="['burger_line', burgerColor]"></span>
<span :class="['burger_line', burgerColor]"></span>
</span>
</template>

34
app/components/header/HeaderDefault.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup>
import logoDefault from '/img/logos/logo_orchestre_red.svg'
import agendaRouge from '@/assets/img/icones/agenda_rouge.svg'
import ticket from '@/assets/img/icones/ticket_black.svg'
import mobile_agenda_icon from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import mobile_ticket from '@/assets/img/icones/ticket_white.svg'
const { brand } = useAppConfig()
</script>
<template>
<HeaderNav burger-color="hamburger_black">
<template #logo>
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
</template>
<template #agenda-icon>
<img :src="agendaRouge" alt="icone agenda" />
</template>
<template #ticket>
<img class="img_ticket" :src="ticket" alt="icone ticket" />
</template>
<template #mobile_agenda_icon>
<img :src="mobile_agenda_icon" alt="icone ticket" />
</template>
<template #mobile_ticket>
<img :src="mobile_ticket" alt="icone ticket" />
</template>
</HeaderNav>
</template>
<style lang="scss">
</style>

57
app/components/header/HeaderFull.vue Normal file
View File

@@ -0,0 +1,57 @@
<script setup>
import logoFull from '/img/logos/logo_blanc_rouge.png'
import agendaNoir from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import ticket from '@/assets/img/icones/ticket_white.svg'
import mobile_agenda_icon from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import mobile_ticket from '@/assets/img/icones/ticket_white.svg'
const { brand } = useAppConfig()
</script>
<template>
<HeaderNav burger-color="hamburger_white">
<template #logo>
<NuxtImg :src="logoFull" :alt="brand.logoAlt" class="logo-img" />
</template>
<template #agenda-icon>
<img :src="agendaNoir" alt="icone agenda" />
</template>
<template #ticket>
<img :src="ticket" alt="icone ticket" />
</template>
<template #mobile_agenda_icon>
<img :src="mobile_agenda_icon" alt="icone ticket" />
</template>
<template #mobile_ticket>
<img :src="mobile_ticket" alt="icone ticket" />
</template>
</HeaderNav>
<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>
</template>

278
app/components/header/HeaderNav.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<div class="header_navigation">
<div class="height_10"></div>
<ul class="header_navigation_topbar" aria-label="Language selector">
<li class="header_nav_topbar_item">
Professionnels
<ul class="header_nav_topbar_submenu">
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Programmer l'Orchestre</NuxtLink></li>
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Le studio et les espaces</NuxtLink></li>
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Louer des instruments</NuxtLink></li>
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Recrutement / Concours</NuxtLink></li>
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Espace candidats</NuxtLink></li>
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Presse</NuxtLink></li>
</ul>
</li>
<li class="header_nav_topbar_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>
</li>
</ul>
<div class="height_20"></div>
<div class="header_navigation_main">
<div class="header_nav_logo">
<!-- LOGO injecté -->
<slot name="logo" />
</div>
<nav class="header_nav_cont" aria-label="Primary navigation">
<!-- Desktop nav -->
<ul class="header_nav header_nav--desktop">
<li class="header_nav_item brandontext_bold">
L'Orchestre
<ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
</ul>
</li>
<li class="header_nav_item">
Concerts
<ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF LIVE !</NuxtLink></li>
</ul>
</li>
<li class="header_nav_item brandontext_bold">
Éducation et médiation
<ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Ressources pédagogiques</NuxtLink></li>
</ul>
</li>
<li class="header_nav_item">
Mécénat
<ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Entreprises</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
</ul>
</li>
<li class="header_nav_item header_nav_icones">
<div class="">
<NuxtLink to="/agenda">
<div class="nav_icone">
<div class="nav_icone_img nav_icone_img--agenda">
<!-- ICÔNE injectée -->
<span class="sr-only">Agenda</span>
<slot name="agenda-icon" />
</div>
</div>
</NuxtLink>
</div>
<div class=" padding_top_1">
<NuxtLink to="/agenda">
<div class="nav_icone">
<div class="nav_icone_img nav_icone_img--ticket">
<!-- ICÔNE injectée -->
<span class="sr-only">billeterie</span>
<slot name="ticket" />
</div>
</div>
</NuxtLink>
</div>
</li>
</ul>
<!-- Mobile nav -->
<div class="header_nav--mobile">
<button
class="header_burger"
type="button"
:class="{ 'is-open': isOpen }"
:aria-expanded="isOpen ? 'true' : 'false'"
aria-controls="mobile-menu"
@click="toggle"
>
<span class="sr-only">{{ isOpen ? 'Fermer le menu' : 'Ouvrir le menu' }}</span>
<!-- icone hamburger injecté -->
<BurgerIcon :burger-color="burgerColor" />
</button>
</div>
<!-- Mobile icons -->
<div class="header_nav header_nav--mobile-icons">
<div class="header_nav_item">
<NuxtLink to="/agenda">
<div class="nav_icone">
<div class="nav_icone_img nav_icone_img--agenda">
<!-- ICÔNE injectée -->
<span class="sr-only">Agenda</span>
<slot name="agenda-icon" />
</div>
</div>
</NuxtLink>
</div>
<div class="header_nav_item padding_top_1">
<NuxtLink to="/agenda">
<div class="nav_icone">
<div class="nav_icone_img nav_icone_img--ticket">
<!-- ICÔNE injectée -->
<span class="sr-only">billeterie</span>
<slot name="ticket" />
</div>
</div>
</NuxtLink>
</div>
</div>
<!-- Mobile drawer -->
<div
id="mobile-menu"
class="header_drawer"
:data-open="isOpen ? 'true' : 'false'"
>
<ul class="header_drawer_inner">
<li
class="header_drawer_link brandontext_bold"
:class="{ 'is-open': activeDrawer === 'orchestre' }"
@click="toggleDrawer('orchestre')"
>
L'Orchestre
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
</ul>
</li>
<li
class="header_drawer_link"
:class="{ 'is-open': activeDrawer === 'concerts' }"
@click="toggleDrawer('concerts')"
>
Concerts
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">ONDIF LIVE !</NuxtLink></li>
</ul>
</li>
<li
class="header_drawer_link brandontext_bold"
:class="{ 'is-open': activeDrawer === 'education' }"
@click="toggleDrawer('education')"
>
Éducation et médiation
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Ressources pédagogiques</NuxtLink></li>
</ul>
</li>
<li
class="header_drawer_link"
:class="{ 'is-open': activeDrawer === 'mecenat' }"
@click="toggleDrawer('mecenat')"
>
Mécénat
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Entreprises</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
</ul>
</li>
<NuxtLink class="header_drawer_link icon_mobile_agenda" to="/agenda" @click="close">
<!-- ICÔNE injectée -->
<slot name="mobile_agenda_icon" />
</NuxtLink>
<NuxtLink class="header_drawer_link icon_mobile_ticket" to="/agenda" @click="close">
<!-- ICÔNE injectée -->
<slot name="mobile_ticket" />
</NuxtLink>
</ul>
</div>
</nav>
</div>
<div class="height_25"></div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { watch } from 'vue'
defineProps({
burgerColor: { type: String, default: 'hamburger_black' }
})
const isOpen = ref(false)
const activeDrawer = ref(null)
const toggle = () => (isOpen.value = !isOpen.value)
const close = () => (isOpen.value = false)
const toggleDrawer = (key) => {
activeDrawer.value = activeDrawer.value === key ? null : key
}
// ✅ ferme automatiquement le mobile drawer si on navigue
const route = useRoute()
watch(() => route.fullPath, () => {
close()
activeDrawer.value = null
})
</script>
<style lang="scss">
.icon_mobile_agenda {
width: 35px;
margin-top: 10px;
img {
width: 100%
}
}
.icon_mobile_ticket {
width: 61px;
img {
width: 100%
}
}
</style>

21
app/components/header/HeaderWrapper.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
defineProps({
theme: { type: String, default: 'dark' }
})
</script>
<template>
<header>
<div class="bg-orbs" aria-hidden="true">
<span class="orb orb--1" />
<span class="orb orb--2" />
<span class="orb orb--3" />
<span class="orb orb--4" />
<span class="orb orb--5" />
<span class="orb orb--6" />
</div>
<div class="header_layout" :class="`header--${theme}`">
<slot />
</div>
</header>
</template>

77
app/components/header_content.vue
View File

@@ -1,77 +0,0 @@
<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>

36
app/components/header_full.vue
View File

@@ -1,36 +0,0 @@
<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>

59
app/components/section/PageSection.vue Normal file
View File

@@ -0,0 +1,59 @@
<!--
La section par défaut fait la largeur de la page.
On peut mettre de la couleur ou pas.
C'est le contenu de la section (PageSectionInner) qui aura une marge.
Et avec "content" à "false" on peut dire aussi qu'on n'utilise pas le PageSectionInner, au cas où...
-->
<template>
<section
class="page-section"
:class="[
`page-section--${tone}`,
{ 'page-section--padded': padded }
]"
>
<!-- Si content == true -->
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
<slot />
</PageSectionInner>
<!-- Si content == false -->
<template v-else>
<slot />
</template>
</section>
</template>
<script setup>
defineProps({
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
padded: { type: Boolean, default: true }, // padding vertical
contentSize: { type: String, default: 'default'}, // narrow/default/wide
content: { type: Boolean, default: true }, // contenu contraint ou full
padb : { type: String, default: '' }, // props pour PageSectionInner
padt : { type: String, default: '' } // props pour PageSectionInner
})
</script>
<style lang="scss">
.page-section {
position: relative;
width: 100%;
//min-height: var(--sp-200);
/* tons = arrière-plan section */
&--default { background: transparent; }
&--brand { background: var(--c-brand_rouge);}
&--dark { background: var(--c-backgroud-black); }
&--brandreverse { background: var(--c-backgroud-brandreverse); }
// padding en haut et en bas
&--padded {
padding-top: 30px;
padding-bottom: 50px;
}
}
</style>

99
app/components/section/PageSectionInner.vue Normal file
View File

@@ -0,0 +1,99 @@
<!-- Pour gérer tous les types de main dans les différents templates de page
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
<template>
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`]">
<slot />
</div>
</template>
<script setup>
defineProps({
size: { type: String, default: 'default' }, // default / wide / narrow
padb : { type: String, default: '' },
padt : { type: String, default: '' }
})
</script>
<style lang="scss">
.page-section--inner {
// ne dépasse jamais l’écran
width: 100%;
// centre le bloc horizontalement, crée des marges externes fluides, fonctionne dans toutes les largeurs d’écran
margin-inline: auto;
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
&--narrow {
max-width: var(--container-narrow);
}
// limite de largeur (par défaut)
&--default {
/* mobile / small screens */
@media (max-width: 700px) {
padding-inline: var(--page-padding-mobile);
}
@media (min-width: 0px) {
max-width: 100%;
}
@media (min-width: 600px) {
max-width: 580px;
}
@media (min-width: 700px) {
max-width: 660px;
}
@media (min-width: 800px) {
max-width: 780px;
}
@media (min-width: 900px) {
max-width: 860px;
}
@media (min-width: 1000px) {
max-width: 950px;
}
@media (min-width: 1100px) {
max-width: 1020px;
}
@media (min-width: 1200px) {
max-width: 1100px;
}
@media (min-width: 1300px) {
max-width: 1200px;
}
@media (min-width: 1400px) {
max-width: 1300px;
}
@media (min-width: 1500px) {
max-width: 1400px;
}
}
// limite de largeur un peu plus grande que par défaut
&--wide {
max-width: var(--container-wide);
}
// Padding
&--padt--xs {
padding-top: 30px;
}
&--padt--sm {
padding-top: 45px;
}
&--padb--xs {
padding-bottom: 17px;
}
&--padb--sm {
padding-bottom: 30px;
}
}
</style>

60
app/components/section/SectionContent.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div
:class="[
`section-content`,
`section-content--tone-${tone}`,
`section-content--pad-${pad}`
]"
>
<slot />
</div>
</template>
<script setup>
defineProps({
as: { type: String, default: 'h2' },
tone: { type: String, default: 'default' },
pad: { type: String, default: '' }, // xs, sm, md, lg
})
</script>
<style lang="scss">
.section-content {
&--tone-default { background: transparent; }
&--tone-brand { background: var(--c-brand_rouge); }
&--tone-brand_rouge45 { background: var(--c-brand_rouge45); }
&--tone-muted { background: var(--c-brand_rouge-weak); }
&--tone-dark { background: var(--c-backgroud-black); }
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
&--pad-xs {
padding-top: var(--sp-32);
padding-bottom: var(--sp-16);
padding-left: var(--sp-45);
}
&--pad-sm {
padding-top: var(--sp-32);
padding-bottom: var(--sp-16);
padding-left: var(--sp-45);
}
&--pad-md {
padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
}
&--pad-lg {
padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
}
}
@media (max-width: 300px) {
.section-title {
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
}
}
</style>

56
app/components/section/SectionTitle.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<DsHeading
as="h1"
:tone="tone"
:class="[
`section-title`,
`section-title--pad-${pad}`
]"
>
<slot />
</DsHeading>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
defineProps({
as: { type: String, default: 'h2' },
tone: { type: String, default: 'default' },
pad: { type: String, default: 'sm' }, // xs, sm, md, lg
})
</script>
<style lang="scss">
.section-title {
&--pad-xs {
padding-top: var(--sp-32);
padding-bottom: var(--sp-16);
padding-left: var(--sp-45);
}
&--pad-sm {
padding-top: var(--sp-48);
padding-bottom: var(--sp-48);
padding-left: var(--sp-45);
}
&--pad-md {
padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
}
&--pad-lg {
padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
}
}
@media (max-width: 300px) {
.section-title {
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
}
}
</style>

20
app/layouts/default.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<HeaderWrapper theme="light">
<HeaderDefault />
</HeaderWrapper>
<main id="main-content">
<!-- C’est le slot du layout qui reçoit le contenu de la page (pages/*.vue). -->
<slot />
</main>
<footer>
<Footer />
</footer>
</template>
<script setup>
</script>

15
app/layouts/pageheaderfull.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<HeaderWrapper theme="dark">
<HeaderFull />
</HeaderWrapper>
<main id="main-content">
<slot />
</main>
<footer>
<Footer />
</footer>
</template>

79
app/pages/agenda.vue
View File

@@ -1,68 +1,15 @@
<template> <template>
<div> <ConcertCard
<h1>Page Agenda</h1> v-for="c in concerts"
:key="c.id"
:title="c.title"
<div> :date-label="c.dateLabel"
<p>Lien interne</p> :venue="c.venue"
<div> :city="c.city"
<button_link to="/">Voir l'accueil</button_link> :image="{ src: c.imageUrl, alt: c.imageAlt }"
</div> :tags="c.tags"
<div> :price-from="c.priceFrom"
<button_link to="/" variant="primary">Voir l'accueil</button_link> :is-sold-out="c.soldOut"
</div> :href="`/concerts/${c.slug}`"
<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> </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>

66
app/pages/agendatest.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div>
<h1>Page Agenda</h1>
<div>
<p>Lien interne</p>
<div>
<NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--secondary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--outline">Voir l'accueil</NuxtLink>
</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>
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 lang="scss">
</style>

2
app/pages/concerts/concert-[id].vue
View File

@@ -19,6 +19,6 @@
}) })
</script> </script>
<style> <style lang="scss">
</style> </style>

138
app/pages/design-system.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div class="ds-preview">
<DsHeading class="titre" as="h1" size="">Design du site internet de l'Orchestre National d'Île-de-France</DsHeading>
<DsHeading class="centrer" as="h1" tone="brand_rouge" size="">TYPOGRAPHIE</DsHeading>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Roboto Flex (police par défaut des titres)</DsHeading>
<DsHeading as="h1" size="">Titres niveau 1 (h1) Roboto extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" size="">Titres niveau 2 (h2) Roboto bold Taille xl/32px</DsHeading>
<DsHeading as="h3" size="">Titres niveau 3 (h3) Roboto semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" size="">Titre de carte niveau 4 (h4) Roboto black Taille lg2/30px</DsHeading>
<DsHeading as="h5" size="">Titres de carte niveau 5 (h5) Roboto medium Taille md2/23px</DsHeading>
<DsHeading as="h6" size="">Titres de carte niveau 6 (h6) Roboto extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Brandon</DsHeading>
<DsHeading as="h1" font="brandon" size="">Titres niveau 1 (h1) Brandon extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="brandon" size="">Titres niveau 2 (h2) Brandon bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="brandon" size="">Titres niveau 3 (h3) Brandon semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="brandon" size="">Titres de carte niveau 4 (h4) Brandon black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="brandon" size="">Titres de carte niveau 5 (h5) Brandon medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="brandon" size="">Titres de carte niveau 6 (h6) Brandon extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" font="barlow" size="">Les titres avec la police Barlow</DsHeading>
<DsHeading as="h1" font="barlow" size="">Titres niveau 1 (h1) Barlow extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="barlow" size="">Titres niveau 2 (h2) Barlow bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="barlow" size="">Titres niveau 3 (h3) Barlow semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="barlow" size="">Titres de carte niveau 4 (h4) Barlow black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="barlow" size="">Titres de carte niveau 5 (h5) Barlow medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="barlow" size="">Titres de carte niveau 6 (h6) Barlow extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Les textes</DsHeading>
<DsText as="p" tone="brand_rouge">
Texte standard police Roboto Flex / Taille 16px / couleur rouge ONDIF: info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="brandon">
Texte police Brandon / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="barlow">
Texte police Barlow / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" :clamp="2">
Texte police Roboto Flex / Taille 16px / clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
</DsText>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Carte concert</DsHeading>
<DsText as="p" tone="brand_rouge">
Pour les endroits où il y a une liste de concert page d'accueil, page agenda, page saison...
</DsText>
<br>
<hr>
<br>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
</div>
</div>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
</script>
<style lang="scss">
.ds-preview {
display: grid;
//gap: var(--sp-4);
padding: var(--sp-48);
justify-content: center;
}
.titre {
justify-self: center;
margin-bottom: 50px;
}
.category {
max-width: 1000px;
justify-self: flex-start;
margin-bottom: 30px;
padding: 40px;
border-radius: 14px;
}
.centrer {
justify-self: center;
margin-bottom: 30px;
}
.rempli {
width: 100%;
background-color: #ebebeb;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 5px;
border-radius: 5px;
}
</style>

90
app/pages/index copie.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
<PageSection tone="dark" :padded="true" content-size="default">
<DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
</PageSection>
<!-- Cas normal : toute la section est contenu dans les marges -->
<PageSection :padded="true" content-size="default">
<DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
</PageSection>
<div>
<div>IMAGE TEST</div>
<NuxtImg v-if="imageUrl" :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>
</template>
<script setup>
import { onMounted, computed } from 'vue'
import { clientLog } from '~/utils/clientLog'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
const runtimeConfig = useRuntimeConfig()
const STRAPI_URL = runtimeConfig.public.strapiUrl
console.log("STRAPI_URL : ",STRAPI_URL)
// 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, error } = await useFetch(
() => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
)
const imageUrl = computed(() => {
const file = data.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}`
})
if (error.value) {
console.error('Erreur en récupérant les fichiers Strapi :', error.value)
clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
error: error.value?.message || error.value
})
}
const appConfig = useAppConfig()
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
onMounted(() => {
clientLog('info', 'test de log depuis vuejs', { })
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
})
</script>
<style>
</style>

165
app/pages/index.vue
View File

@@ -1,36 +1,122 @@
<template> <template>
<div>
<Header_full></Header_full> <!-- Fond noir -->
<main> <PageSection tone="dark" :padded="false" content-size="default">
<div> <SectionTitle tone="invert" pad="md">
<div>IMAGE TEST</div> CONCERTS À VENIR …
<NuxtImg :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" /> </SectionTitle>
<!-- <img :src="imageUrl" alt="" style="max-width: 100%; height: auto;"> --> </PageSection>
</div>
</main> <!-- Listes des prochains conncerts -->
</div> <PageSection content-size="default" class="remonter_concert_list">
<ConcertCardList>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
<ConcertCard
id="1"
title="TITRE DU CONCERT EN MAJUSCULE"
venue="Nom du lieu, éventuellement de la salle"
dateISO="2026-01-15T20:30:00+01:00"
dateLabel="Jeudi 15 janvier 2026 — 20h30"
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
imageUrl="https://picsum.photos/id/56/500/700"
imageAlt="Orchestre sur scène"
ctaHref="/concert[id]"
detailsHref="/concerts/concert_template"
/>
</ConcertCardList>
</PageSection>
<!-- Carte Île-De-France Par tous et pour tous -->
<PageSection class="theme_ptpt_wp">
<SectionContent class="theme_ptpt">
<DsMedia :src="ptpt_img" alt="Carte Île-De-France" class="theme_ptpt--img"/>
<SectionContent tone="brand_rouge45" pad="xs" class="theme_ptpt--content">
<SectionTitle tone="invert" pad="xs">
PAR TOUS ET POUR TOUS
</SectionTitle>
<SectionContent pad="xs" class="theme_ptpt--description">
<DsText tone="invert" size="lg" class="theme_ptpt--txt" >
Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
</DsText>
<DsButtonArrow to="/" variant="invert">
Carte des événements
</DsButtonArrow>
</SectionContent>
</SectionContent>
</SectionContent>
</PageSection>
<!-- Tous à l'Orchestre -->
<PageSection tone="brandreverse" :padded="true" content-size="default" padb="xs" class="theme_tao">
<SectionContent>
<SectionTitle tone="invert" pad="xs">
TOUS À L’ORCHESTRE
</SectionTitle>
<SectionContent pad="xs" class="theme_ptpt--description">
<DsText tone="invert" size="lg" class="theme_ptpt--txt" >
Phrase d’accroche / explicative de cette rubrique par tous et pour tous
</DsText>
</SectionContent>
</SectionContent>
</PageSection>
</template> </template>
<script setup> <script setup>
const runtimeConfig = useRuntimeConfig() import { onMounted, computed } from 'vue'
const STRAPI_URL = "http://localhost:1337" import { clientLog } from '~/utils/clientLog'
//const STRAPI_URL = runtimeConfig.public.strapiUrl import SectionContent from '../components/section/SectionContent.vue'
console.log("STRAPI_URL : ",STRAPI_URL) // "Mon site Nuxt" import DsText from '@root/design-system/primitives/DsText.vue'
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
import ptpt_img from '@/assets/img/illustrations/map_idf.jpg'
// Config app (pour ton SEO) // Layout utilisé
definePageMeta({ layout: 'default' })
const runtimeConfig = useRuntimeConfig()
const STRAPI_URL = runtimeConfig.public.strapiUrl
console.log("STRAPI_URL : ",STRAPI_URL)
// Config app (pour SEO)
const config = useAppConfig() const config = useAppConfig()
useSeoMeta({ useSeoMeta({
title: config.title title: config.title
}) })
// On récupère le fichier le plus récent de la Media Library Strapi // On récupère le fichier le plus récent de la Media Library Strapi
const { data: files, error } = await useFetch( const { data, error } = await useFetch(
() => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc` () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
) )
const imageUrl = computed(() => { const imageUrl = computed(() => {
const file = files.value?.[0] const file = data.value?.[0]
console.log("file : ",file) console.log("file : ",file)
if (!file) return null if (!file) return null
@@ -42,18 +128,57 @@
// Si jamais c'était une URL relative // Si jamais c'était une URL relative
return `${STRAPI_URL}${file.url}` return `${STRAPI_URL}${file.url}`
}) })
console.log("imageUrl : ",imageUrl)
if (error.value) { if (error.value) {
console.error('Erreur en récupérant les fichiers Strapi :', error.value) console.error('Erreur en récupérant les fichiers Strapi :', error.value)
clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
error: error.value?.message || error.value
})
} }
const appConfig = useAppConfig() const appConfig = useAppConfig()
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt" console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
onMounted(() => {
clientLog('info', 'test de log depuis vuejs', { })
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
})
</script> </script>
<style> <style lang="scss">
.remonter_concert_list {
transform: translateY(-170px);
}
.theme_ptpt_wp {
margin-bottom: 50px;
}
.theme_ptpt {
display: grid;
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
margin-top: -170px;
&--img {
grid-row: 1;
grid-column: 1;
}
&--content {
grid-row: 1;
grid-column: 1;
}
&--description {
max-width: 520px;
margin-top: 35px;
}
&--txt {
margin-bottom: 35px;
}
}
.theme_tao {
margin-bottom: 50px;
}
</style> </style>

64
app/pages/orchestre.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div>
<div>IMAGE TEST</div>
<!-- <NuxtImg v-if="imageUrl" :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" /> -->
</div>
</template>
<script setup>
import { onMounted, computed } from 'vue'
import { clientLog } from '~/utils/clientLog'
// Layout utilisé
definePageMeta({ layout: 'pageheaderfull' })
const runtimeConfig = useRuntimeConfig()
//const STRAPI_URL = "http://localhost:1337"
const STRAPI_URL = runtimeConfig.public.strapiUrl
console.log("STRAPI_URL : ",STRAPI_URL)
// Config app (pour 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, error } = await useFetch(
() => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
)
const imageUrl = computed(() => {
const file = data.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}`
})
if (error.value) {
console.error('Erreur en récupérant les fichiers Strapi :', error.value)
clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
error: error.value?.message || error.value
})
}
const appConfig = useAppConfig()
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
onMounted(() => {
clientLog('info', 'test de log depuis vuejs', { })
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
})
</script>
<style lang="scss">
</style>

2
app/pages/test_header_2.vue
View File

@@ -34,7 +34,7 @@
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt" console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
</script> </script>
<style> <style lang="scss">
</style> </style>

17
app/utils/clientLog.js Normal file
View File

@@ -0,0 +1,17 @@
const ALLOWED_LEVELS = ['info', 'warn', 'error'];
export async function clientLog(level, message, meta = {}) {
if (!ALLOWED_LEVELS.includes(level)) {
console.warn('clientLog: invalid level, fallback to info', level);
level = 'info';
}
try {
await $fetch('/api/log', {
method: 'POST',
body: { level, message, meta }
});
} catch (e) {
console.error('Failed to send client log', e);
}
}

39
design-system/components/DsCard.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<article class="ds-card">
<div v-if="$slots.media" class="ds-card__media">
<slot name="media" />
</div>
<div class="ds-card__content">
<header v-if="$slots.header" class="ds-card__header">
<slot name="header" />
</header>
<div class="ds-card__body">
<slot />
</div>
<footer v-if="$slots.footer" class="ds-card__footer">
<slot name="footer" />
</footer>
</div>
</article>
</template>
<script setup>
</script>
<style lang="scss">
.ds-card {
display: grid;
grid-template-columns: 1fr;
border-radius: var(--r-lg);
background: var(--c-surface);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
&__media { aspect-ratio: 16/9; background: var(--c-surface-muted); }
&__content { display: grid; gap: var(--sp-3); }
&__header { display: grid; gap: var(--sp-2); }
&__footer { display: flex; gap: var(--sp-2); align-items: center; }
}
</style>

225
design-system/primitives/DsButton.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<component
:is="componentTag"
v-bind="$attrs"
:to="isNuxtLink ? to : undefined"
:href="isAnchor ? href : undefined"
:type="isButton ? type : undefined"
:disabled="isButton ? disabled || loading : undefined"
:aria-disabled="(!isButton && (disabled || loading)) ? 'true' : undefined"
:class="[
'ds-button',
`ds-button--${variant}`,
`ds-button--${size}`,
props.textColor ? `ds-button--text-${props.textColor}` : '',
props.borderColor ? `ds-button--border-${props.borderColor}` : '',
{ 'ds-button--disabled': disabled, 'ds-button--loading': loading }
]"
@click="onClick"
>
<span class="ds-button__content">
<span v-if="$slots.iconLeft" class="ds-button__icon ds-button__icon--left">
<slot name="iconLeft" />
</span>
<span class="ds-button__label">
<slot />
</span>
<span v-if="$slots.iconRight" class="ds-button__icon ds-button__icon--right">
<slot name="iconRight" />
</span>
</span>
<span v-if="loading" class="ds-button__spinner" aria-hidden="true" />
</component>
</template>
<script setup>
defineOptions({ inheritAttrs: false }) // désactive la transmission automatique des attributs HTML, utile pour v-bind="$attrs"
import { computed, resolveComponent } from 'vue'
const props = defineProps({
variant: { type: String, default: 'primary' }, // primary/secondary/ghost/link
size: { type: String, default: 'md' }, // sm/md/lg
to: { type: [String, Object], default: '' }, // NuxtLink
href: { type: String, default: '' }, // <a>
type: { type: String, default: 'button' }, // button/submit/reset (pour éviter des soumissions involontaires on met button pas défaut, si pas submit non désiré)
disabled: { type: Boolean, default: false },
loading: { type: Boolean, default: false },
textColor: { type: String, default: '' }, // accepts CSS color or tone name (ex: invert)
borderColor: { type: String, default: '' }, // accepts CSS color or tone name (ex: invert)
})
// TYPE D'ÉLÉMENT : NUXTLINK, A ou BUTTON ?
// quelle est la prop fournie ?
const isNuxtLink = computed(() => !!props.to) // NuxtLink si prop "to" présente
const isAnchor = computed(() => !props.to && !!props.href) // <a> si prop "href" présente et pas "to"
const isButton = computed(() => !props.to && !props.href) // <button> si pas "href" et pas "to"
// décision de l'élément en fonction de la prop fournie
const componentTag = computed(() => {
if (isNuxtLink.value) resolveComponent('NuxtLink')
if (isAnchor.value) return 'a'
return 'button'
})
const emit = defineEmits(['click']) // déclare que ce composant peut émettre un événement click.
// onClick(e) est appelé quand on clique sur le bouton, sauf en cas de disabled ou loading
function onClick(e) {
if (props.disabled || props.loading) {
e.preventDefault()
e.stopPropagation()
return
}
emit('click', e)
}
</script>
<style lang="scss">
.ds-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
border-radius: var(--r-md);
border: 2px solid transparent;
font-family: var(--font-roboto);
font-weight: var(--fw-medium);
line-height: 1;
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
transform 120ms ease,
background-color 120ms ease,
border-color 120ms ease,
box-shadow 120ms ease,
color 120ms ease;
&:hover {
transform: translateY(-2px);
}
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--c-focus);
}
&--disabled,
&--loading {
opacity: 0.55;
cursor: not-allowed;
}
/* Sizes */
&--sm {
font-size: var(--text-sm);
padding: var(--sp-4) var(--sp-8);
min-height: 2.25rem;
}
&--md {
font-size: var(--text-md);
padding: var(--sp-6) var(--sp-12);
min-height: 2.75rem;
}
&--lg {
font-size: var(--text-lg);
padding: var(--sp-8) var(--sp-16);
min-height: 3.25rem;
}
/* Variants */
&--primary {
background: var(--c-brand);
color: var(--ds-button-text, var(--c-brand-contrast));
border-color: var(--ds-button-border, transparent);
}
&--secondary {
background: var(--c-surface);
color: var(--ds-button-text, var(--c-text));
border-color: var(--ds-button-border, var(--c-border-strong));
box-shadow: var(--sh-soft);
}
&--secondary:hover {
background: var(--c-hover);
}
&--ghost {
background: transparent;
color: var(--ds-button-text, var(--c-text));
border-color: var(--ds-button-border, transparent);
}
&--ghost:hover {
background: var(--c-hover);
}
&--link {
background: transparent;
color: var(--ds-button-text, var(--c-brand));
padding: 0;
min-height: auto;
border-color: var(--ds-button-border, transparent);
}
&--link:hover {
text-decoration: underline;
}
&--text-default { --ds-button-text: var(--c-text); }
&--text-muted { --ds-button-text: var(--c-text-muted); }
&--text-invert { --ds-button-text: var(--c-text-invert); }
&--text-brand_rouge { --ds-button-text: var(--c-brand_rouge); }
&--text-brand_rouge-weak { --ds-button-text: var(--c-brand_rouge-weak); }
&--text-success { --ds-button-text: var(--c-success); }
&--text-warning { --ds-button-text: var(--c-warning); }
&--text-danger { --ds-button-text: var(--c-danger); }
&--text-bleu_fonce { --ds-button-text: var(--c-bleu_fonce); }
&--text-bleu_clair { --ds-button-text: var(--c-bleu_clair); }
&--text-info { --ds-button-text: var(--c-info); }
&--border-default { --ds-button-border: var(--c-text); }
&--border-muted { --ds-button-border: var(--c-text-muted); }
&--border-invert { --ds-button-border: var(--c-text-invert); }
&--border-brand_rouge { --ds-button-border: var(--c-brand_rouge); }
&--border-brand_rouge-weak { --ds-button-border: var(--c-brand_rouge-weak); }
&--border-success { --ds-button-border: var(--c-success); }
&--border-warning { --ds-button-border: var(--c-warning); }
&--border-danger { --ds-button-border: var(--c-danger); }
&--border-bleu_fonce { --ds-button-border: var(--c-bleu_fonce); }
&--border-bleu_clair { --ds-button-border: var(--c-bleu_clair); }
&--border-info { --ds-button-border: var(--c-info); }
&--border { --ds-button-border: var(--c-border); }
&--border-strong { --ds-button-border: var(--c-border-strong); }
}
.ds-button__content {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.ds-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ds-button__spinner {
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 999px;
border: 2px solid rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.95);
animation: ds-spin 700ms linear infinite;
}
@keyframes ds-spin {
to { transform: rotate(360deg); }
}
</style>

161
design-system/primitives/DsButtonArrow.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<component
:is="componentTag"
v-bind="$attrs"
:to="isNuxtLink ? to : undefined"
:href="isAnchor ? href : undefined"
:type="isButton ? type : undefined"
:disabled="isButton ? disabled || loading : undefined"
:aria-disabled="(!isButton && (disabled || loading)) ? 'true' : undefined"
:class="[
'ds-button-arrow',
`ds-button-arrow--${size}`,
`ds-button-arrow--${variant}`,
{ 'ds-button--disabled': disabled, 'ds-button--loading': loading }
]"
@click="onClick"
>
<span class="ds-button-arrow__content">
<img
class="ds-button-arrow__icon"
src="/img/icones/arrow_right.svg"
alt=""
aria-hidden="true"
/>
<span class="ds-button-arrow__label">
<slot />
</span>
</span>
</component>
</template>
<script setup>
defineOptions({ inheritAttrs: false })
import { computed, resolveComponent } from 'vue'
const props = defineProps({
variant: { type: String, default: 'primary' }, // primary / secondary / ghost / link
size: { type: String, default: 'md' }, // sm/md/lg
to: { type: [String, Object], default: '' }, // NuxtLink
href: { type: String, default: '' }, // <a>
type: { type: String, default: 'button' }, // button/submit/reset
disabled: { type: Boolean, default: false },
loading: { type: Boolean, default: false },
})
const isNuxtLink = computed(() => !!props.to)
const isAnchor = computed(() => !props.to && !!props.href)
const isButton = computed(() => !props.to && !props.href)
const componentTag = computed(() => {
if (isNuxtLink.value) return resolveComponent('NuxtLink')
if (isAnchor.value) return 'a'
return 'button'
})
const emit = defineEmits(['click'])
function onClick(e) {
if (props.disabled || props.loading) {
e.preventDefault()
e.stopPropagation()
return
}
emit('click', e)
}
</script>
<style lang="scss">
.ds-button-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-roboto);
font-weight: var(--fw-semibold);
line-height: 1;
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
&:hover {
transform: translateY(-3px);
}
transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--c-focus);
}
&--disabled {
opacity: 0.55;
cursor: not-allowed;
}
&__content {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
&__label {
font-size: var(--fs-17);
}
&__icon {
height: var(--fs-24);
padding-right: var(--sp-4);
}
/* Sizes */
&--sm { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-3); min-height: 2.25rem; }
&--md { font-size: var(--text-md); padding: var(--sp-3) var(--sp-4); min-height: 2.75rem; }
&--lg { font-size: var(--text-lg); padding: var(--sp-4) var(--sp-5); min-height: 3.25rem; }
/* Variants */
&--primary {
background: var(--c-brand_rouge);
color: var(--c-brand-contrast);
}
&--primary:hover { transform: translateY(-1px); }
&--secondary {
background: var(--c-surface);
color: var(--c-text);
border-color: var(--c-border-strong);
}
&--secondary:hover { background: var(--c-hover); }
&--invert {
color: var(--c-text-invert);
border-color: var(--c-border-strong);
img {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
}
&--secondary:hover { background: var(--c-hover); }
&--ghost {
background: transparent;
color: var(--c-text);
}
&--ghost:hover { background: var(--c-hover); }
&--link {
background: transparent;
color: var(--c-brand);
padding: 0;
min-height: auto;
}
&--link:hover { text-decoration: underline; }
}
</style>

143
design-system/primitives/DsHeading.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<component
:is="as"
:class="[
'ds-heading',
`ds-heading--${font}`,
`ds-heading--${resolvedsize}`,
`ds-heading--${resolvedWeight}`,
`ds-heading--${resolvedspacing}`, //margin-bottom
`ds-heading--${tone}`
]"
>
<slot />
</component>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
as: { type: String, default: 'h2' }, // h1/h2/h3/p/span...
font: { type: String, default: 'roboto' }, // barlow | brandon
tone: { type: String, default: 'default' }, // default/muted/invert
})
const resolvedWeight = computed(() => {
switch (props.as) {
case 'h1':
return 'extrabold'
case 'h2':
return 'bold'
case 'h3':
return 'semibold'
case 'h4':
return 'black'
case 'h5':
return 'medium'
case 'h6':
return 'extralight'
default:
return 'semibold'
}
})
const resolvedsize = computed(() => {
switch (props.as) {
case 'h1':
return '2xl'
case 'h2':
return 'xl'
case 'h3':
return 'lg'
case 'h4':
return 'lg2'
case 'h5':
return 'md2'
case 'h6':
return 'xs2'
default:
return 'semibold'
}
})
// Margin-bottom
const resolvedspacing = computed(() => {
switch (props.as) {
case 'h1':
return 'space-6'
case 'h2':
return 'space-6'
case 'h3':
return 'space-6'
case 'h4':
return 'space-6'
case 'h5':
return 'space-6'
case 'h6':
return 'space-6'
default:
return 'space-6'
}
})
</script>
<style lang="scss">
.ds-heading {
&--roboto { font-family: var(--font-roboto); }
&--barlow { font-family: var(--font-barlow); }
&--brandon { font-family: var(--font-brandon); }
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 0;
font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
&--xs { font-size: var(--title-xs); }
&--xs2 { font-size: var(--title-xs2); }
&--sm { font-size: var(--title-sm); }
&--md { font-size: var(--title-md); }
&--md2 { font-size: var(--title-md2); }
&--lg { font-size: var(--title-lg); }
&--lg2 { font-size: var(--title-lg2); }
&--xl { font-size: var(--title-xl); }
&--2xl { font-size: var(--title-2xl); }
&--extralight { font-weight: var(--fw-extralight); }
&--light { font-weight: var(--fw-light); }
&--regular { font-weight: var(--fw-regular); }
&--medium { font-weight: var(--fw-medium); }
&--semibold { font-weight: var(--fw-semibold); }
&--bold { font-weight: var(--fw-bold); }
&--extrabold { font-weight: var(--fw-extrabold); }
&--black { font-weight: var(--fw-black); }
&--space-48 { margin-bottom: var(--sp-48); }
&--space-40 { margin-bottom: var(--sp-40); }
&--space-32 { margin-bottom: var(--sp-32); }
&--space-24 { margin-bottom: var(--sp-24); }
&--space-20 { margin-bottom: var(--sp-20); }
&--space-16 { margin-bottom: var(--sp-16); }
&--space-6 { margin-bottom: var(--sp-6); }
//TONE
&--default { color: var(--c-text, #111); }
&--muted { color: var(--c-text-muted, #555); }
&--invert { color: var(--c-text-invert, #fff); }
&--brand_rouge { color: var(--c-brand_rouge); }
&--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
&--success { color: var(--c-success); }
&--warning { color: var(--c-warning); }
&--danger { color: var(--c-danger); }
&--bleu_fonce { color: var(--c-bleu_fonce); }
&--bleu_clair { color: var(--c-bleu_clair); }
&--info { color: var(--c-info); }
}
</style>

37
design-system/primitives/DsMedia.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="ds-media" :class="`ds-media--${ratio}`">
<img
class="ds-media__img"
:src="src"
:alt="alt"
loading="lazy"
decoding="async"
/>
</div>
</template>
<script setup>
defineProps({
src: { type: String, required: true },
alt: { type: String, default: '' },
ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
})
</script>
<style lang="scss">
.ds-media {
width: 100%;
background: rgba(0,0,0,0.04);
overflow: hidden;
&--16-9 { aspect-ratio: 16 / 9; }
&--4-3 { aspect-ratio: 4 / 3; }
&--square { aspect-ratio: 1 / 1; }
.ds-media__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
</style>

127
design-system/primitives/DsText.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<component
:is="as"
:class="[
'ds-text',
`ds-text--${props.font}`,
`ds-text--${props.size || resolvedsize}`,
`ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
`ds-text--${props.spacing || resolvedspacing}`,
`ds-text--${props.tone}`,
props.clamp ? `ds-text--clamp_${props.clamp}` : '',
]"
>
<slot />
</component>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
as: { type: String, default: 'p' }, // p/span/div
font: { type: String, default: 'roboto' }, // barlow | brandon
size: { type: String, default: '' }, // xs/sm/md/lg
spacing: { type: String, default: '' },
tone: { type: String, default: 'default' }, // default/muted/invert
weight: { type: String, default: 'regular' }, // regular/medium
clamp: { type: Number, default: undefined }, // nombre de lignes du contenu
})
const resolvedsize = computed(() => {
switch (props.as) {
case 'p':
return 'md'
default:
return 'md'
}
})
const resolvedWeight = computed(() => {
switch (props.as) {
case 'p':
return 'regular'
default:
return 'regular'
}
})
const resolvedspacing = computed(() => {
switch (props.as) {
case 'p':
return 'space-6'
case 'ul':
return 'space-6'
case 'ol':
return 'space-6'
case 'li':
return 'space-6'
case 'pre':
return 'space-6'
case 'blockquote':
return 'space-6'
default:
return 'space-6'
}
})
</script>
<style lang="scss">
.ds-text {
&--roboto { font-family: var(--font-roboto); }
&--barlow { font-family: var(--font-barlow); }
&--brandon { font-family: var(--font-brandon); }
font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
line-height: var(--lh-base);
letter-spacing: var(--ls-normal);
margin: 0;
&--xs { font-size: var(--text-xs); }
&--sm { font-size: var(--text-sm); }
&--md { font-size: var(--text-md); }
&--lg { font-size: var(--text-lg); }
&--light { font-weight: var(--fw-light); }
&--regular { font-weight: var(--fw-regular); }
&--medium { font-weight: var(--fw-medium); }
&--semibold { font-weight: var(--fw-semibold); }
&--bold { font-weight: var(--fw-bold); }
&--extrabold { font-weight: var(--fw-extrabold); }
&--black { font-weight: var(--fw-black); }
&--space-48 { margin-bottom: var(--sp-48); }
&--space-40 { margin-bottom: var(--sp-40); }
&--space-32 { margin-bottom: var(--sp-32); }
&--space-24 { margin-bottom: var(--sp-24); }
&--space-20 { margin-bottom: var(--sp-20); }
&--space-16 { margin-bottom: var(--sp-16); }
&--space-6 { margin-bottom: var(--sp-6); }
&--default { color: var(--c-text, #111); }
&--muted { color: var(--c-text-muted, #555); }
&--invert { color: var(--c-text-invert, #fff); }
&--brand_rouge { color: var(--c-brand_rouge); }
&--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
&--success { color: var(--c-success); }
&--warning { color: var(--c-warning); }
&--danger { color: var(--c-danger); }
&--bleu_fonce { color: var(--c-bleu_fonce); }
&--bleu_clair { color: var(--c-bleu_clair); }
// clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
// Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
&--clamp_3 {
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
</style>

31
design-system/tokens/_colors.scss Normal file
View File

@@ -0,0 +1,31 @@
:root {
/* Texte */
--c-text: #111;
--c-surface: #ffffff;
--c-text-muted: #555;
--c-text-invert: #fff;
/* Marque / accent (ex: rouge ONDIF) */
//--c-brand_rouge: #E30613;
--c-brand_rouge: #E20018;
--c-brand_rouge45: rgba(226, 0, 24, 0.45);
--c-brand_rouge-weak: #e3061391;
--c-backgroud-black: #111;
--c-backgroud-brandreverse: #ACCFCF;
/* États */
--c-success: green;
--c-warning: #E30613;
--c-danger: #E30613;
/* Liens / info (si tu veux) */
--c-info: #0056b3;
--c-bleu_fonce: #0056b3;
--c-bleu_clair: #007bff;
--c-border: rgba(0,0,0,0.10);
--c-border-strong: rgba(0,0,0,0.18);
--c-hover: rgba(0,0,0,0.04);
--c-focus: rgba(227, 6, 19, 0.25);
}

102
design-system/tokens/_fonts.scss Normal file
View File

@@ -0,0 +1,102 @@
@font-face {
font-family: "Roboto Flex";
src: url("@/assets/fonts/robotoflex.ttf") format("truetype");
font-weight: 100 1000;
font-stretch: 25% 151%;
font-style: oblique 0deg 10deg;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_boldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_mediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_regularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}

28
design-system/tokens/_layout.scss Normal file
View File

@@ -0,0 +1,28 @@
:root {
/* Containers – largeur de contenu */
/* padding latéral (respiration) */
--page-padding-mobile: 0.5rem; /* 16px */
--page-padding-tablet: 1.5rem; /* 24px */
--page-padding-desktop: 2rem; /* 32px */
--container-narrow: 48rem; /* 768px → éditorial, texte long */
--container-default: 72rem; /* 1152px → pages standard */
--container-wide: 90rem; /* 1440px → listings, agenda */
--gap-cards: var(--sp-22);
}
@media (min-width: 600px) {
:root {
--gap-cards: var(--sp-16);
}
}
@media (min-width: 1200px) {
:root {
--gap-cards: var(--sp-22);
}
}

4
design-system/tokens/_radius.scss Normal file
View File

@@ -0,0 +1,4 @@
:root {
--r-md: 0.75rem;
--sh-soft: 0 2px 6px rgba(0,0,0,0.06), 0 0 20px rgba(0,0,0,0.08);
}

3
design-system/tokens/_shadow.scss Normal file
View File

@@ -0,0 +1,3 @@
:root {
--sh-md: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

31
design-system/tokens/_spacing.scss Normal file
View File

@@ -0,0 +1,31 @@
:root {
/* Base unit */
--sp-0: 0;
/* Micro spacing (UI fine) */
--sp-4: 0.25rem; /* 4px */
--sp-6: 0.375rem; /* 6px */
--sp-8: 0.5rem; /* 8px */
--sp-12: 0.75rem; /* 12px */
/* Spacing standard */
--sp-16: 1rem; /* 16px */
--sp-20: 1.25rem; /* 20px */
--sp-22: 1.375rem; /* 22px */
--sp-24: 1.5rem; /* 24px */
/* Spacing fort (sections, titres) */
--sp-32: 2rem; /* 32px */
--sp-40: 2.5rem; /* 40px */
--sp-45: 45px; /* 45px */
--sp-48: 3rem; /* 48px */
/* Spacing très fort (pages, hero) */
--sp-64: 4rem; /* 64px */
--sp-80: 5rem; /* 80px */
--sp-96: 6rem; /* 96px */
--sp-120: 7.5rem; /* 120px */
--sp-180: 11.25rem; /* 120px */
--sp-200: 200px; /* 200px */
--sp-220: 13.75rem; /* 220px */
}

113
design-system/tokens/_typography.scss Normal file
View File

@@ -0,0 +1,113 @@
:root {
/* Font stacks (remplace Inter si tu as une font ONDIF) */
--font-roboto: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-brandon: 'Brandon Text',
system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial,
sans-serif;
--font-barlow: 'Barlow',
system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial,
sans-serif;
/* Font weights */
--fw-extralight: 200;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
/* Optical size (opsz) : utile avec Roboto Flex */
--opsz-body: 14;
--opsz-title: 28;
/* Line heights */
--lh-tight: 1.15;
--lh-snug: 1.25;
--lh-base: 1.5;
/* Letter spacing (optionnel mais utile) */
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.02em;
/* Scale (mobile-first) */
--fs-12: 0.75rem; /* 12 */
--fs-14: 0.875rem; /* 14 */
--fs-16: 1rem; /* 16 */
--fs-17: 1.0625rem; /* 17 */
--fs-18: 1.125rem; /* 18 */
--fs-20: 1.25rem; /* 20 */
--fs-23: 1.4375rem; /* 23 */
--fs-24: 1.5rem; /* 24 */
--fs-28: 1.75rem; /* 28 */
--fs-30: 1.875rem; /* 30 */
--fs-32: 2rem; /* 32 */
--fs-40: 2.5rem; /* 40 */
/* Semantic mapping (ça c’est ton “API” DS) */
--text-xs: var(--fs-12);
--text-sm: var(--fs-14);
--text-md: var(--fs-16);
--text-lg: var(--fs-18);
--title-xs: var(--fs-16);
--title-xs2: var(--fs-17);
--title-sm: var(--fs-18);
--title-md: var(--fs-20);
--title-md2: var(--fs-23);
--title-lg: var(--fs-24);
--title-lg2: var(--fs-30);
--title-xl: var(--fs-32);
--title-2xl: var(--fs-40);
}
/* Option : ajustements desktop */
@media (max-width: 700px) {
:root {
--title-xs: var(--fs-12);
--title-xs2: var(--fs-14);
--title-sm: var(--fs-14);
--title-md: var(--fs-16);
--title-md2: var(--fs-17);
--title-lg: var(--fs-18);
--title-lg2: var(--fs-20);
--title-xl: var(--fs-20);
--title-2xl: var(--fs-24);
}
}
@media (min-width: 700px) {
:root {
--title-xs: var(--fs-14);
--title-xs2: var(--fs-16);
--title-sm: var(--fs-16);
--title-md: var(--fs-18);
--title-md2: var(--fs-20);
--title-lg: var(--fs-20);
--title-lg2: var(--fs-24);
--title-xl: var(--fs-24);
--title-2xl: var(--fs-32);
}
}
@media (min-width: 1024px) {
:root {
--title-xs: var(--fs-16);
--title-xs2: var(--fs-17);
--title-sm: var(--fs-18);
--title-md: var(--fs-20);
--title-md2: var(--fs-23);
--title-lg: var(--fs-24);
--title-lg2: var(--fs-30);
--title-xl: var(--fs-32);
--title-2xl: var(--fs-40);
}
}

8
design-system/tokens/index.scss Normal file
View File

@@ -0,0 +1,8 @@
@use "./fonts";
@use "./typography";
@use "./colors";
@use "./spacing";
@use "./radius";
@use "./shadow";
@use "./layout";

35
nuxt.config.js
View File

@@ -1,4 +1,6 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath, URL } from 'node:url'
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
@@ -18,8 +20,41 @@ export default defineNuxtConfig({
}, },
}, },
// Auto-import des composants du dossier app/ sans prefixe de chemin
components: [
{ path: '~/components', pathPrefix: false }
],
// un chemin avec root pour aller chercher les fichiers qui ne sont pas dans app mais à la racine avec un @
vite: {
resolve: {
alias: {
'@root': fileURLToPath(new URL('./', import.meta.url))
}
}
},
//une barre fine en haut de la page lors des chargements
loadingIndicator: {
color: '#dd1e1eff',
background: '#fff',
height: '20px'
},
css: ['@/assets/scss/main.scss'], css: ['@/assets/scss/main.scss'],
runtimeConfig: {
// Server-side only (jamais exposé au client)
strapiToken: process.env.STRAPI_API_TOKEN || '',
// 🌍 Public (accessible dans le navigateur)
public: {
strapiUrl: process.env.NUXT_PUBLIC_STRAPI_URL || 'http://localhost:1337',
},
},
//configuration du module @nuxt/image
image: { image: {
// Domaine de tes images Strapi / OVH // Domaine de tes images Strapi / OVH
domains: [ domains: [

553
package-lock.json generated
View File

@@ -9,8 +9,12 @@
"dependencies": { "dependencies": {
"@nuxt/image": "^1.11.0", "@nuxt/image": "^1.11.0",
"nuxt": "^4.1.3", "nuxt": "^4.1.3",
"printf": "^0.6.1",
"radix-vue": "^1.9.17",
"vue": "^3.5.22", "vue": "^3.5.22",
"vue-router": "^4.5.1" "vue-router": "^4.5.1",
"winston": "^3.19.0",
"winston-daily-rotate-file": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.93.2" "sass": "^1.93.2"
@@ -437,6 +441,26 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/@colors/colors": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
"integrity": "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==",
"license": "MIT",
"engines": {
"node": ">=0.1.90"
}
},
"node_modules/@dabh/diagnostics": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.8.tgz",
"integrity": "sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==",
"license": "MIT",
"dependencies": {
"@so-ric/colorspace": "^1.1.6",
"enabled": "2.0.x",
"kuler": "^2.0.0"
}
},
"node_modules/@emnapi/core": { "node_modules/@emnapi/core": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
@@ -894,6 +918,86 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@floating-ui/core": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.10"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.7.3",
"@floating-ui/utils": "^0.2.10"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.10",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
"license": "MIT"
},
"node_modules/@floating-ui/vue": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.9.tgz",
"integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.7.4",
"@floating-ui/utils": "^0.2.10",
"vue-demi": ">=0.13.0"
}
},
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@internationalized/date": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
"integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
"license": "Apache-2.0",
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@internationalized/number": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.5.tgz",
"integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
"license": "Apache-2.0",
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@ioredis/commands": { "node_modules/@ioredis/commands": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz",
@@ -3111,12 +3215,103 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@so-ric/colorspace": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@so-ric/colorspace/-/colorspace-1.1.6.tgz",
"integrity": "sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==",
"license": "MIT",
"dependencies": {
"color": "^5.0.2",
"text-hex": "1.0.x"
}
},
"node_modules/@so-ric/colorspace/node_modules/color": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/color/-/color-5.0.3.tgz",
"integrity": "sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==",
"license": "MIT",
"dependencies": {
"color-convert": "^3.1.3",
"color-string": "^2.1.3"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@so-ric/colorspace/node_modules/color-convert": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-3.1.3.tgz",
"integrity": "sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg==",
"license": "MIT",
"dependencies": {
"color-name": "^2.0.0"
},
"engines": {
"node": ">=14.6"
}
},
"node_modules/@so-ric/colorspace/node_modules/color-name": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-2.1.0.tgz",
"integrity": "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==",
"license": "MIT",
"engines": {
"node": ">=12.20"
}
},
"node_modules/@so-ric/colorspace/node_modules/color-string": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-2.1.4.tgz",
"integrity": "sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==",
"license": "MIT",
"dependencies": {
"color-name": "^2.0.0"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@speed-highlight/core": { "node_modules/@speed-highlight/core": {
"version": "1.2.7", "version": "1.2.7",
"resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.7.tgz", "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.7.tgz",
"integrity": "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==", "integrity": "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==",
"license": "CC0-1.0" "license": "CC0-1.0"
}, },
"node_modules/@swc/helpers": {
"version": "0.5.17",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
"integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.13.13",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz",
"integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/vue-virtual": {
"version": "3.13.13",
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.13.tgz",
"integrity": "sha512-Cf2xIEE8nWAfsX0N5nihkPYMeQRT+pHt4NEkuP8rNCn6lVnLDiV8rC8IeIxbKmQC0yPnj4SIBLwXYVf86xxKTQ==",
"license": "MIT",
"dependencies": {
"@tanstack/virtual-core": "3.13.13"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"vue": "^2.7.0 || ^3.0.0"
}
},
"node_modules/@trysound/sax": { "node_modules/@trysound/sax": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3155,6 +3350,18 @@
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/triple-beam": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
"integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
"license": "MIT"
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
"license": "MIT"
},
"node_modules/@unhead/vue": { "node_modules/@unhead/vue": {
"version": "2.0.19", "version": "2.0.19",
"resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.19.tgz", "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.19.tgz",
@@ -3525,6 +3732,94 @@
"integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==", "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vueuse/core": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "10.11.1",
"@vueuse/shared": "10.11.1",
"vue-demi": ">=0.14.8"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
"integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
"license": "MIT",
"dependencies": {
"vue-demi": ">=0.14.8"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/abbrev": { "node_modules/abbrev": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
@@ -3688,6 +3983,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/aria-hidden": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/ast-kit": { "node_modules/ast-kit": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.3.tgz",
@@ -5136,6 +5443,12 @@
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/enabled": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
"integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==",
"license": "MIT"
},
"node_modules/encodeurl": { "node_modules/encodeurl": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -5340,6 +5653,12 @@
"integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==", "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"license": "MIT"
},
"node_modules/fast-fifo": { "node_modules/fast-fifo": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -5397,6 +5716,12 @@
} }
} }
}, },
"node_modules/fecha": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
"integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
"license": "MIT"
},
"node_modules/figures": { "node_modules/figures": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz", "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
@@ -5412,6 +5737,15 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/file-stream-rotator": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/file-stream-rotator/-/file-stream-rotator-0.6.1.tgz",
"integrity": "sha512-u+dBid4PvZw17PmDeRcNOtCP9CCK/9lRN2w+r1xIS7yOL9JFrIBKTvrYsxT4P0pGtThYTn++QS5ChHaUov3+zQ==",
"license": "MIT",
"dependencies": {
"moment": "^2.29.1"
}
},
"node_modules/file-uri-to-path": { "node_modules/file-uri-to-path": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5430,6 +5764,12 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/fn.name": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
"integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
"license": "MIT"
},
"node_modules/foreground-child": { "node_modules/foreground-child": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -6302,6 +6642,12 @@
"integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==", "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/kuler": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
"integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
"license": "MIT"
},
"node_modules/launch-editor": { "node_modules/launch-editor": {
"version": "2.11.1", "version": "2.11.1",
"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
@@ -6466,6 +6812,23 @@
"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/logform": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz",
"integrity": "sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==",
"license": "MIT",
"dependencies": {
"@colors/colors": "1.6.0",
"@types/triple-beam": "^1.3.2",
"fecha": "^4.2.0",
"ms": "^2.1.1",
"safe-stable-stringify": "^2.3.1",
"triple-beam": "^1.3.0"
},
"engines": {
"node": ">= 12.0.0"
}
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6726,6 +7089,15 @@
"integrity": "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==", "integrity": "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/mrmime": { "node_modules/mrmime": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -7145,6 +7517,15 @@
"node": "^14.16.0 || >=16.10.0" "node": "^14.16.0 || >=16.10.0"
} }
}, },
"node_modules/object-hash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
"license": "MIT",
"engines": {
"node": ">= 6"
}
},
"node_modules/ofetch": { "node_modules/ofetch": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz", "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz",
@@ -7196,6 +7577,15 @@
"wrappy": "1" "wrappy": "1"
} }
}, },
"node_modules/one-time": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
"integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
"license": "MIT",
"dependencies": {
"fn.name": "1.x.x"
}
},
"node_modules/onetime": { "node_modules/onetime": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz", "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
@@ -8100,6 +8490,15 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/printf": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/printf/-/printf-0.6.1.tgz",
"integrity": "sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==",
"license": "MIT",
"engines": {
"node": ">= 0.9.0"
}
},
"node_modules/process": { "node_modules/process": {
"version": "0.11.10", "version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8181,6 +8580,28 @@
], ],
"license": "MIT" "license": "MIT"
}, },
"node_modules/radix-vue": {
"version": "1.9.17",
"resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.17.tgz",
"integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.6.7",
"@floating-ui/vue": "^1.1.0",
"@internationalized/date": "^3.5.4",
"@internationalized/number": "^3.5.3",
"@tanstack/vue-virtual": "^3.8.1",
"@vueuse/core": "^10.11.0",
"@vueuse/shared": "^10.11.0",
"aria-hidden": "^1.2.4",
"defu": "^6.1.4",
"fast-deep-equal": "^3.1.3",
"nanoid": "^5.0.7"
},
"peerDependencies": {
"vue": ">= 3.2.0"
}
},
"node_modules/radix3": { "node_modules/radix3": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz", "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -8498,6 +8919,15 @@
], ],
"license": "MIT" "license": "MIT"
}, },
"node_modules/safe-stable-stringify": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
"integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
"license": "MIT",
"engines": {
"node": ">=10"
}
},
"node_modules/sass": { "node_modules/sass": {
"version": "1.93.2", "version": "1.93.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
@@ -8858,6 +9288,15 @@
"node": ">=20.16.0" "node": ">=20.16.0"
} }
}, },
"node_modules/stack-trace": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
"integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/standard-as-callback": { "node_modules/standard-as-callback": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz", "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -9226,6 +9665,12 @@
"b4a": "^1.6.4" "b4a": "^1.6.4"
} }
}, },
"node_modules/text-hex": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
"integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
"license": "MIT"
},
"node_modules/tiny-invariant": { "node_modules/tiny-invariant": {
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -9290,12 +9735,20 @@
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/triple-beam": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
"integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==",
"license": "MIT",
"engines": {
"node": ">= 14.0.0"
}
},
"node_modules/tslib": { "node_modules/tslib": {
"version": "2.8.1", "version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD", "license": "0BSD"
"optional": true
}, },
"node_modules/tunnel-agent": { "node_modules/tunnel-agent": {
"version": "0.6.0", "version": "0.6.0",
@@ -10113,6 +10566,100 @@
"node": "^18.17.0 || >=20.5.0" "node": "^18.17.0 || >=20.5.0"
} }
}, },
"node_modules/winston": {
"version": "3.19.0",
"resolved": "https://registry.npmjs.org/winston/-/winston-3.19.0.tgz",
"integrity": "sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA==",
"license": "MIT",
"dependencies": {
"@colors/colors": "^1.6.0",
"@dabh/diagnostics": "^2.0.8",
"async": "^3.2.3",
"is-stream": "^2.0.0",
"logform": "^2.7.0",
"one-time": "^1.0.0",
"readable-stream": "^3.4.0",
"safe-stable-stringify": "^2.3.1",
"stack-trace": "0.0.x",
"triple-beam": "^1.3.0",
"winston-transport": "^4.9.0"
},
"engines": {
"node": ">= 12.0.0"
}
},
"node_modules/winston-daily-rotate-file": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/winston-daily-rotate-file/-/winston-daily-rotate-file-5.0.0.tgz",
"integrity": "sha512-JDjiXXkM5qvwY06733vf09I2wnMXpZEhxEVOSPenZMii+g7pcDcTBt2MRugnoi8BwVSuCT2jfRXBUy+n1Zz/Yw==",
"license": "MIT",
"dependencies": {
"file-stream-rotator": "^0.6.1",
"object-hash": "^3.0.0",
"triple-beam": "^1.4.1",
"winston-transport": "^4.7.0"
},
"engines": {
"node": ">=8"
},
"peerDependencies": {
"winston": "^3"
}
},
"node_modules/winston-transport": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz",
"integrity": "sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==",
"license": "MIT",
"dependencies": {
"logform": "^2.7.0",
"readable-stream": "^3.6.2",
"triple-beam": "^1.3.0"
},
"engines": {
"node": ">= 12.0.0"
}
},
"node_modules/winston-transport/node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/winston/node_modules/is-stream": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
"license": "MIT",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/winston/node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/wrap-ansi": { "node_modules/wrap-ansi": {
"version": "8.1.0", "version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",

6
package.json
View File

@@ -12,8 +12,12 @@
"dependencies": { "dependencies": {
"@nuxt/image": "^1.11.0", "@nuxt/image": "^1.11.0",
"nuxt": "^4.1.3", "nuxt": "^4.1.3",
"printf": "^0.6.1",
"radix-vue": "^1.9.17",
"vue": "^3.5.22", "vue": "^3.5.22",
"vue-router": "^4.5.1" "vue-router": "^4.5.1",
"winston": "^3.19.0",
"winston-daily-rotate-file": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.93.2" "sass": "^1.93.2"

1
public/img/icones/arrow_right.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path opacity=".4" d="M64 320C64 337.7 78.3 352 96 352L466.7 352L498.7 320L466.7 288L96 288C78.3 288 64 302.3 64 320z"/><path d="M566.6 297.4C579.1 309.9 579.1 330.2 566.6 342.7L406.6 502.7C394.1 515.2 373.8 515.2 361.3 502.7C348.8 490.2 348.8 469.9 361.3 457.4L498.7 320L361.4 182.6C348.9 170.1 348.9 149.8 361.4 137.3C373.9 124.8 394.2 124.8 406.7 137.3L566.7 297.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

14
public/img/icones/facebook_rond_bleu.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="667px" height="667px" viewBox="0 0 667 667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>facebook</title>
<g id="Reseaux-sociaux" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="facebook" transform="translate(489.2222, 178.1111) scale(-1, 1) rotate(-180) translate(-489.2222, -178.1111)translate(-133, -444.1111)" fill-rule="nonzero">
<g id="g20" transform="translate(800, 466.6667)" fill="#0866FF">
<path d="M0,0 C0,184.094662 -149.238663,333.333325 -333.333325,333.333325 C-517.427987,333.333325 -666.66665,184.094662 -666.66665,0 C-666.66665,-156.326663 -559.046653,-287.495993 -413.858656,-323.517325 L-413.858656,-101.861331 L-482.594655,-101.861331 L-482.594655,0 L-413.858656,0 L-413.858656,43.8919989 C-413.858656,157.347996 -362.514658,209.934661 -251.127994,209.934661 C-230.010661,209.934661 -193.571995,205.794662 -178.665329,201.653328 L-178.665329,109.314664 C-186.533329,110.142664 -200.197328,110.557331 -217.174661,110.557331 C-271.831993,110.557331 -292.950659,89.8533311 -292.950659,36.0239991 L-292.950659,0 L-184.071995,0 L-202.775995,-101.861331 L-292.950659,-101.861331 L-292.950659,-330.891992 C-127.902663,-310.957326 0,-170.423996 0,0" id="path22"></path>
</g>
<g id="g24" transform="translate(597.2233, 364.8048)" fill="#FFFFFF">
<path d="M5.68434189e-14,0 L18.7053329,101.861331 L-90.1733311,101.861331 L-90.1733311,137.886663 C-90.1733311,191.715995 -69.0559983,212.418661 -14.3986663,212.418661 C2.5786666,212.418661 16.2426663,212.005328 24.1106661,211.177328 L24.1106661,303.514659 C9.20399977,307.655992 -27.234666,311.797326 -48.3519988,311.797326 C-159.737329,311.797326 -211.082661,259.209327 -211.082661,145.75333 L-211.082661,101.861331 L-279.81866,101.861331 L-279.81866,0 L-211.082661,0 L-211.082661,-221.655994 C-185.291995,-228.053328 -158.325329,-231.471994 -130.55733,-231.471994 C-116.88533,-231.471994 -103.413331,-230.629328 -90.1733311,-229.030661 L-90.1733311,0 L5.68434189e-14,0 Z" id="path26"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
public/img/icones/instagram_gradient.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 MiB

BIN
public/img/icones/linkedin_bleu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

16
public/img/icones/youtube_play_rouge.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="263px" height="185px" viewBox="0 0 263 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>g12</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-Large-Copy" transform="translate(-3179, -3268)">
<g id="yt_logo_fullcolor_almostblack_digital" transform="translate(3179, 3268)">
<g id="g10" transform="translate(552, 61.3822) scale(-1, 1) rotate(-180) translate(-552, -61.3822)translate(-0, -61.3822)" fill-rule="nonzero">
<g id="g12">
<path d="M105.224531,52.6130654 L173.390662,92.1682644 L105.224531,131.531197 L105.224531,52.6130654 Z M28.8026659,5.56822653 C17.4734662,8.64114645 8.64062645,17.6650662 5.37655987,28.8026659 C0,49.3478654 0,92.1682644 0,92.1682644 C0,92.1682644 0,134.987997 5.37655987,155.341329 C8.64062645,166.669329 17.4734662,175.503996 28.8026659,178.575996 C49.1562654,184.143995 131.339063,184.143995 131.339063,184.143995 C131.339063,184.143995 213.714661,184.143995 234.067994,178.575996 C245.589327,175.503996 254.229327,166.669329 257.30266,155.341329 C262.87066,134.987997 262.87066,92.1682644 262.87066,92.1682644 C262.87066,92.1682644 262.87066,49.3478654 257.30266,28.8026659 C254.229327,17.6650662 245.589327,8.64114645 234.067994,5.56822653 C213.714661,0 131.339063,0 131.339063,0 C131.339063,0 49.1562654,0 28.8026659,5.56822653" id="path14" fill="#ED1838"></path>
<polygon id="path16" fill="#FFFFFF" points="105.224531 52.6130654 173.390662 92.1682644 105.224531 131.531197"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/img/logos/logo_orchestre_blanc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

17
server/api/log.post.js Normal file
View File

@@ -0,0 +1,17 @@
import logger from '~~/server/utils/logger';
const ALLOWED_LEVELS = ['info', 'warn', 'error'];
export default defineEventHandler(async (event) => {
const body = await readBody(event);
const { level, message, meta } = body || {};
const logLevel = ALLOWED_LEVELS.includes(level) ? level : 'info';
logger[logLevel](message, {
label: 'front-end',
...meta,
});
return { status: 'ok' };
});

30
server/plugins/logger_global.js Normal file
View File

@@ -0,0 +1,30 @@
import { getRequestIP } from 'h3';
import logger from '~~/server/utils/logger';
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('request', (event) => {
// 1. On ignore les requêtes internes de Nuxt Image
if (event.path.startsWith('/_ipx')) return;
// 2. On ignore l’endpoint de log, qui est déjà tracé par logger client_log
if (event.path === '/api/log') return;
// message: 'logger_global',
logger.info('logger_global', {
label: 'back-end',
internal: event._internal,
method: event.method,
url: event.path,
ip: getRequestIP(event) || 'unknown',
});
});
nitroApp.hooks.hook('error', (error, { event }) => {
logger.error('Unhandled error', {
message: error.message,
stack: error.stack,
internal: event._internal,
method: event?.method,
url: event?.path,
});
});
});

6
server/services/test.js Normal file
View File

@@ -0,0 +1,6 @@
import logger from '~~/server/utils/logger';
import path from 'path';
const filename = path.basename(new URL(import.meta.url).pathname);
logger.info('test de log avec winston', { label: filename });

81
server/utils/logger.js Normal file
View File

@@ -0,0 +1,81 @@
import winston from 'winston';
import DailyRotateFile from 'winston-daily-rotate-file';
const { createLogger, format, transports } = winston;
const { combine, timestamp, label, printf } = format;
const myFormatFile = printf((info) => {
const { level, message, timestamp, ...meta } = info;
const label = meta.label || 'toto';
delete meta.label; // pour ne pas le répéter dans le JSON
const base = `${timestamp} ${level} [${label}] ${message}`;
const metaString = Object.keys(meta).length ? ` ${JSON.stringify(meta)}` : '';
return base + metaString;
});
const myFormatConsole = printf(({ level, message, label, timestamp }) => {
return `${timestamp} ${level} [${label}] ${message}`;
});
const logger = winston.createLogger({
//level: 'info',
format: combine(
timestamp({format: 'YYYY-MM-DD HH:mm:ss'}),
myFormatFile
),
defaultMeta: { service: 'user-service' },
transports: [
new DailyRotateFile({
dirname: 'logs',
filename: 'log_global-%DATE%.log',
datePattern: 'YYYY-MM-DD',
zippedArchive: true,
maxFiles: '14d',
}),
],
exceptionHandlers: [
new DailyRotateFile({
dirname: 'logs',
filename: 'log_global-%DATE%.log',
datePattern: 'YYYY-MM-DD',
zippedArchive: true,
maxFiles: '14d',
}),
new winston.transports.Console()
],
rejectionHandlers: [
new DailyRotateFile({
dirname: 'logs',
filename: 'log_global-%DATE%.log',
datePattern: 'YYYY-MM-DD',
zippedArchive: true,
maxFiles: '14d',
}),
new winston.transports.Console()
]
});
if (process.env.ENV !== 'production' ) {
logger.add(new winston.transports.Console(
{
format: combine(
label({ label: '' }),
timestamp({format: 'YYYY-MM-DD HH:mm:ss'}),
myFormatConsole
),
handleExceptions: true //pour afficher également les exceptions dans la console
})
);
}
/////////////////////////////////////////////////
// EXPORT DE MODULE POUR QU'IL SOIT LU DANS LES AUTRES FICHIERS JS
/////////////////////////////////////////////////
export default logger;