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

dev

Browse Source
This commit is contained in:
Julie
2026-04-08 02:56:59 +02:00
parent e320feb2d7
commit 913ae480ce
14 changed files with 576 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -56,7 +56,8 @@ git push origin main
2. cd /var/www/wondif_vue
3.
git pull origin main # récupère le dernier code
npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
si besoin
npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
npm run build # rebuild Nuxt
pm2 reload ecosystem.config.cjs --only wondif_vue # redémarre le process avec les nouvelles variables d'environnement de ecosystem

296
app/assets/scss/component/_header_page_simple.scss Normal file
View File

@@ -0,0 +1,296 @@
.fiche_header_simple_wp {
display: grid;
justify-content: center;
padding-bottom: 100px;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px;
padding-top: 40px;
}
@media (min-width: 600px) {
grid-template-columns: minmax(10px, 10px) 580px 0px;
grid-template-rows: 40px 380px;
}
@media (min-width: 700px) {
grid-template-columns: minmax(10px, 10px) 660px 0px;
grid-template-rows: 40px 380px;
}
@media (min-width: 800px) {
grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
grid-template-rows: 40px 340px;
}
@media (min-width: 900px) {
grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
grid-template-rows: 40px 400px;
}
@media (min-width: 1000px) {
grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1100px) {
grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1200px) {
grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1300px) {
grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1400px) {
grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1500px) {
grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
.fiche_header_wp_gauche {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
}
}
.fiche_header_wp_gauche_carre {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
}
}
.fiche_header_wp_droite {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 3;
}
}
.fiche_header_inner {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1/3;
}
@media (min-width: 600px) {
grid-column: 2;
grid-row: 1/3;
}
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px;
}
@media (min-width: 600px) {
width: 575px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 380px;
}
@media (min-width: 700px) {
width: 675px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 380px;
}
@media (min-width: 800px) {
width: 780px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 340px;
}
@media (min-width: 900px) {
width: 860px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1000px) {
width: 950px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1100px) {
width: 1020px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1200px) {
width: 1100px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1300px) {
width: 1200px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1400px) {
width: 1300px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1500px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1600px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1700px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1800px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
}
.fiche_header_titres {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1;
padding-bottom: 20px;
padding-left: 10px;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 2;
}
display: grid;
align-content: start;
gap: 0.75rem;
max-width: 475px;
h1 {
font-size: 55px;
@media (min-width: 0px) and (max-width: 600px) {
font-size: 25px;
}
@media (min-width: 600px) {
font-size: 25px;
}
@media (min-width: 700px) {
font-size: 30px;
}
@media (min-width: 800px) {
font-size: 30px;
}
@media (min-width: 900px) {
font-size: 40px;
}
@media (min-width: 1000px) {
font-size: 40px;
}
@media (min-width: 1100px) {
font-size: 40px;
}
@media (min-width: 1200px) {
font-size: 50px;
}
@media (min-width: 1300px) {
font-size: 55px;
}
@media (min-width: 1400px) {
font-size: 55px;
}
@media (min-width: 1500px) {
font-size: 55px;
}
@media (min-width: 1600px) {
font-size: 55px;
}
@media (min-width: 1700px) {
font-size: 55px;
}
@media (min-width: 1800px) {
font-size: 55px;
}
}
}
.fiche_header_img {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 4;
grid-row: 2 / 3;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 600px) {
grid-column: 3 / 5;
grid-row: 1 / 3;
}
overflow: hidden;
.ds-media {
@media (min-width: 600px) {
height: 100%;
}
}
}
.fiche_header_infos {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 2;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
}
display: grid;
align-content: center;
justify-content: end;
@media (min-width: 0px) and (max-width: 700px) {
gap: 7px;
}
@media (min-width: 700px) {
gap: 20px;
}
text-align: right;
.fiche_header_infos_genre {
font-weight: 900;
}
}
.fiche_header_bandeau {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 3;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1 / 4;
grid-row: 4;
}
background-color: var(--c-backgroud-black);
}
.fiche_description > * {
max-width: 640px;
display: flex;
flex-direction: column;
}
.fiche_description {
.page-section--inner {
@media (max-width: 599px) {
padding-left: 10px;
padding-right: 10px;
}
}
}
}

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

@@ -16,3 +16,4 @@
@use 'component/_header_layout';
@use 'component/header_nav';
@use 'component/header_page_simple';

88
app/components/ContactSpecifique.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<section class="contact_spe_cont">
<DsHeading as="h1" tone="default" textcase="uppercase">
{{titre}}
</DsHeading>
<div class="confetti"></div>
<div class="contact_spe_descripion">
<div class="contact_spe_descripion_item contact_spe_descripion_item--nom">{{ nom }}</div>
<div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
<div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
<div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
</div>
</section>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
defineProps({
titre: {
type: String,
required: true
},
nom: {
type: String,
required: true
},
poste: {
type: String,
required: true
},
numero: {
type: String,
required: true
},
mail: {
type: String,
required: true
}
})
</script>
<style lang="scss">
.contact_spe_cont {
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 599px) {
padding-left: 10px;
padding-right: 10px;
}
font-family: var(--font-roboto);
margin-top: 30px;
h1 {
text-align: center;
}
.contact_spe_descripion {
max-width: 370px;
.contact_spe_descripion_item {
padding-bottom: 10px;
&--nom {
font-weight: var(--fw-semibold);
}
&--poste {
font-weight: var(--fw-light);
}
}
}
}
.confetti {
height: 20px;
width: 50px;
margin-top: 15px;
margin-bottom: 30px;
background-color: var(--c-brand_rouge);
transform: rotate(20deg);
}
</style>

3
app/components/concert/ConcertCard.vue
View File

@@ -3,7 +3,8 @@
<div class="concert-card__grid">
<!-- Image -->
<div class="concert-card__media">
<DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
<DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
</div>
<!-- Content -->

5
app/components/concert/ConcertCardList.vue
View File

@@ -94,7 +94,6 @@
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 340px;
min-width: 500px;
}
}
@@ -105,7 +104,6 @@
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 380px;
min-width: 500px;
}
}
@@ -125,8 +123,7 @@
}
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 440px;
min-width: 500px;
flex: 2 1 370px;
}
}

9
app/pages/concerts/agenda.vue
View File

@@ -35,6 +35,13 @@
const runtimeConfig = useRuntimeConfig()
import { formatDateLong } from "@/utils/dateFormat.js"
const saisonsFiltre = computed(() => {
const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
.filter(Boolean)
return [...new Set(values)]
})
const { concerts, refresh } = useConcerts({
locale: "fr-FR",
populate: {
@@ -56,7 +63,7 @@
filters: {
saison_concert: {
nom_saison: {
$eq: String(runtimeConfig.public.saison),
$in: saisonsFiltre.value,
},
},
},

150
app/pages/concerts/saison.vue
View File

@@ -2,9 +2,22 @@
<div>
<PageSection tone="dark" content-size="default">
<SectionTitle tone="invert" pad="md">
SAISON 2025/2026
</SectionTitle>
<SectionTitle tone="invert" pad="md">
SAISON
<div class="saison-select-wrap">
<select
id="saison-select"
v-model="selectedSeason"
class="saison-select"
@change="hasUserSelectedSeason = true"
>
<option v-for="season in seasonOptions" :key="season" :value="season">
{{ season }}
</option>
</select>
</div>
</SectionTitle>
</PageSection>
<PageSection padded_size="md" content-size="default" class="remonter_concert_list">
<ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
@@ -31,10 +44,60 @@
<script setup>
import { onMounted } from "vue"
import { computed, onMounted, ref, watch, watchEffect } from "vue"
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const router = useRouter()
import { formatDateLong } from "@/utils/dateFormat.js"
const defaultSeason = computed(() => String(runtimeConfig.public.saison || "").trim())
const selectedSeason = ref(String(route.query.saison || defaultSeason.value || "").trim())
const hasUserSelectedSeason = ref(false)
const seasonFilters = computed(() => {
if (!selectedSeason.value) return null
return {
saison_concert: {
nom_saison: {
$eq: selectedSeason.value,
},
},
}
})
const { items: seasonSource } = useStrapi("/api/__strapi__/concerts", {
locale: "fr-FR",
populate: {
saison_concert: true,
},
})
const seasonOptions = computed(() => {
const seasons = new Set()
;(seasonSource.value || []).forEach((concert) => {
const season = concert?.saison_concert?.nom_saison
if (season) seasons.add(String(season).trim())
})
const values = Array.from(seasons).sort((a, b) => b.localeCompare(a, "fr"))
if (selectedSeason.value && !values.includes(selectedSeason.value)) {
values.unshift(selectedSeason.value)
}
if (!values.length && defaultSeason.value) {
values.push(defaultSeason.value)
}
return values
})
watchEffect(() => {
if (route.query.saison) return
if (hasUserSelectedSeason.value) return
if (!defaultSeason.value) return
if (selectedSeason.value !== defaultSeason.value) {
selectedSeason.value = defaultSeason.value
}
})
const { concerts, refresh } = useConcerts({
locale: "fr-FR",
populate: {
@@ -53,13 +116,7 @@
representation_concert: { lieu_representation: true },
liens_youtube_concert: true,
},
filters: {
saison_concert: {
nom_saison: {
$eq: String(runtimeConfig.public.saison),
},
},
},
filters: seasonFilters,
upcomingOnly: false,
})
@@ -69,4 +126,75 @@
}
})
watch(
selectedSeason,
(value) => {
const saison = String(value || "").trim()
router.replace({
query: {
...route.query,
...(saison ? { saison } : {}),
},
})
},
{ immediate: true }
)
</script>
<style lang="scss">
.saison-header {
display: flex;
align-items: center;
gap: 12px;
padding: var(--sp-16) 0;
}
.saison-select-label {
color: var(--c-text-invert);
font-family: var(--font-barlow-condensed);
font-size: 1.75rem;
line-height: 1;
text-transform: uppercase;
}
.saison-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 220px;
padding: 10px 42px 10px 14px;
border: 1px solid var(--c-text);
border-radius: 0;
background: transparent;
color: var(--c-text-invert);
font-family: var(--font-roboto);
font-weight: var(--fw-extrabold);
font-size: 40px;
line-height: 1;
text-transform: uppercase;
}
.saison-select-wrap {
position: relative;
display: inline-block;
}
.saison-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 12px;
height: 12px;
border-right: 4px solid var(--c-text-invert);
border-bottom: 4px solid var(--c-text-invert);
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.saison-select option {
color: var(--c-text);
}
</style>

8
app/pages/index.vue
View File

@@ -196,6 +196,12 @@
//--------------------
// DONNÉES POUR LES CONCERTS À VENIR …
//--------------------
const saisonsFiltre = computed(() => {
const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
.filter(Boolean)
return [...new Set(values)]
})
const { concerts, refresh } = useConcerts({
locale: "fr-FR",
populate: {
@@ -206,7 +212,7 @@
filters: {
saison_concert: {
nom_saison: {
$eq: String(runtimeConfig.public.saison),
$in: saisonsFiltre.value,
},
},
},

22
app/pages/mediation/scolaires.vue
View File

@@ -10,7 +10,7 @@
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_wp">
<section class="fiche_header_simple_wp">
<div class="fiche_header_wp_gauche"></div>
<div class="fiche_header_inner">
@@ -111,6 +111,22 @@
</PageSection>
</template>
<!-- ================== -->
<!-- CONTACT -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Contacter le service des actions culturelles"
nom="Vanessa Gasztowtt"
poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
/>
</PageSection>
</div>
</template>
@@ -241,6 +257,10 @@
background-color: var(--c-background-jaune);
margin-bottom: 50px;
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-bottom: 20px;
}
}
/* ============================ */

11
app/pages/orchestre/artistesinvitees.vue
View File

@@ -129,13 +129,18 @@
import DsText from '@root/design-system/primitives/DsText.vue'
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
const runtimeConfig = useRuntimeConfig()
const saisonFiltre = computed(() => String(runtimeConfig.public.saison || '').trim())
const saisonsFiltre = computed(() => {
const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
.filter(Boolean)
return [...new Set(values)]
})
const artistesFilters = computed(() => {
if (!saisonFiltre.value) return null
if (!saisonsFiltre.value) return null
return {
saisons_artiste_invite: {
nom_saison: {
$eq: saisonFiltre.value,
$in: saisonsFiltre.value,
},
},
}

297
app/pages/orchestre/missions.vue
View File

@@ -10,7 +10,7 @@
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_wp">
<section class="fiche_header_simple_wp">
<div class="fiche_header_wp_gauche"></div>
<div class="fiche_header_inner">
@@ -186,303 +186,8 @@
padding-top: 30px;
}
.fiche_header_wp {
display: grid;
justify-content: center;
padding-bottom: 100px;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px;
padding-top: 40px;
}
@media (min-width: 600px) {
grid-template-columns: minmax(10px, 10px) 580px 0px;
grid-template-rows: 40px 380px;
}
@media (min-width: 700px) {
grid-template-columns: minmax(10px, 10px) 660px 0px;
grid-template-rows: 40px 380px;
}
@media (min-width: 800px) {
grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
grid-template-rows: 40px 340px;
}
@media (min-width: 900px) {
grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
grid-template-rows: 40px 400px;
}
@media (min-width: 1000px) {
grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1100px) {
grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1200px) {
grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1300px) {
grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1400px) {
grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
@media (min-width: 1500px) {
grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
grid-template-rows: 40px 400px;
}
}
.fiche_header_wp_gauche {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
}
}
.fiche_header_wp_gauche_carre {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
}
}
.fiche_header_wp_droite {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 3;
}
}
.fiche_header_inner {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1/3;
}
@media (min-width: 600px) {
grid-column: 2;
grid-row: 1/3;
}
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px;
}
@media (min-width: 600px) {
width: 575px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 380px;
}
@media (min-width: 700px) {
width: 675px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 380px;
}
@media (min-width: 800px) {
width: 780px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 340px;
}
@media (min-width: 900px) {
width: 860px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1000px) {
width: 950px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1100px) {
width: 1020px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1200px) {
width: 1100px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1300px) {
width: 1200px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1400px) {
width: 1300px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1500px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1600px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1700px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
@media (min-width: 1800px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 3.5fr;
grid-template-rows: 40px 400px;
}
}
.fiche_header_titres {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1;
padding-bottom: 20px;
padding-left: 10px;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 2;
}
display: grid;
align-content: start;
gap: 0.75rem;
max-width: 475px;
h1 {
font-size: 55px;
@media (min-width: 0px) and (max-width: 600px) {
font-size: 25px;
}
@media (min-width: 600px) {
font-size: 25px;
}
@media (min-width: 700px) {
font-size: 30px;
}
@media (min-width: 800px) {
font-size: 30px;
}
@media (min-width: 900px) {
font-size: 40px;
}
@media (min-width: 1000px) {
font-size: 40px;
}
@media (min-width: 1100px) {
font-size: 40px;
}
@media (min-width: 1200px) {
font-size: 50px;
}
@media (min-width: 1300px) {
font-size: 55px;
}
@media (min-width: 1400px) {
font-size: 55px;
}
@media (min-width: 1500px) {
font-size: 55px;
}
@media (min-width: 1600px) {
font-size: 55px;
}
@media (min-width: 1700px) {
font-size: 55px;
}
@media (min-width: 1800px) {
font-size: 55px;
}
}
}
.fiche_header_img {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 4;
grid-row: 2 / 3;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 600px) {
grid-column: 3 / 5;
grid-row: 1 / 3;
}
overflow: hidden;
.ds-media {
@media (min-width: 600px) {
height: 100%;
}
}
}
.fiche_header_infos {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 2;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
}
display: grid;
align-content: center;
justify-content: end;
@media (min-width: 0px) and (max-width: 700px) {
gap: 7px;
}
@media (min-width: 700px) {
gap: 20px;
}
text-align: right;
.fiche_header_infos_genre {
font-weight: 900;
}
}
.fiche_header_bandeau {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 3;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1 / 4;
grid-row: 4;
}
background-color: var(--c-backgroud-black);
}
.fiche_description > * {
max-width: 640px;
display: flex;
flex-direction: column;
}
.fiche_description {
.page-section--inner {
@media (max-width: 599px) {
padding-left: 10px;
padding-right: 10px;
}
}
}
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================

1
design-system/tokens/_colors.scss
View File

@@ -15,6 +15,7 @@
--c-backgroud-brandreverse: #ACCFCF;
--c-background-blanc-casse: #FCFCFC;
--c-background-jaune: #fac020;
--c-background-jaune-clair: #fac0201f;
--c-background-vert: #51d43d;
/* États */

2
ecosystem.config.cjs
View File

@@ -14,7 +14,7 @@ module.exports = {
// Auto-mapping Nuxt runtimeConfig.strapiToken
// (si tu l'utilises vraiment)
NUXT_STRAPI_TOKEN: "",
NUXT_PUBLIC_SAISON: "2025/2026"
NUXT_PUBLIC_SAISON: "2026/2027"
},
},
],