This commit is contained in:
2026-04-13 00:34:05 +02:00
parent ef126bc177
commit ee37e0041f
5 changed files with 68 additions and 217 deletions

View File

@@ -8,18 +8,17 @@
<SectionContent pad="xs"> <SectionContent pad="xs">
<div class="footer--grid"> <div class="footer--grid">
<div class="footer--grid--orchestre"> <div class="footer--grid--orchestre">
<div class="nav--item">L'équipe</div> <!-- <div class="nav--item">L'équipe</div> -->
<div class="nav--item">Nous contacter</div> <!-- <div class="nav--item">Nous contacter</div> -->
</div> </div>
<div class="footer--grid--nav1"> <div class="footer--grid--nav1">
<div class="nav--title">Nous soutenir</div> <div class="nav--title">Nous soutenir</div>
<div class="nav--item">Mécénat</div> <div class="nav--item"><NuxtLink to="/mecenat/valeurs">Mécénat</NuxtLink></div>
<div class="nav--item">XXXX</div>
</div> </div>
<div class="footer--grid--nav2"> <div class="footer--grid--nav2">
<div class="nav--title">Rejoignez-nous</div> <div class="nav--title">Rejoignez-nous</div>
<div class="nav--item">Recrutement</div> <!-- <div class="nav--item">Recrutement</div> -->
<div class="nav--item">Académie d'Orchestre</div> <div class="nav--item"><NuxtLink to="/mediation/academie">Académie d'Orchestre</NuxtLink></div>
</div> </div>
<div class="footer--grid--social"> <div class="footer--grid--social">
<div class="nav--title">Nos réseaux</div> <div class="nav--title">Nos réseaux</div>

View File

@@ -13,7 +13,7 @@
<!-- Actions --> <!-- Actions -->
<div class="concert-card__actions"> <div class="concert-card__actions">
<DsButtonArrow :to="`/concerts/concert-${id}`" variant="secondary"> <DsButtonArrow :to="`#`" variant="secondary">
Découvrir Découvrir
</DsButtonArrow> </DsButtonArrow>
</div> </div>

View File

@@ -6,12 +6,12 @@
<li class="header_nav_topbar_item" :class="{ 'is-active': isPro }"> <li class="header_nav_topbar_item" :class="{ 'is-active': isPro }">
Professionnels Professionnels
<ul class="header_nav_topbar_submenu"> <ul class="header_nav_topbar_submenu">
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/programmer-orchestre">Programmer l'Orchestre</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/programmer-orchestre">Programmer l'Orchestre</NuxtLink></li> -->
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/studio">Le studio et les espaces</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/studio">Le studio et les espaces</NuxtLink></li> -->
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/louer">Louer des instruments</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/louer">Louer des instruments</NuxtLink></li> -->
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/recrutement">Recrutement / Concours</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/recrutement">Recrutement / Concours</NuxtLink></li> -->
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/candidats">Espace candidats</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/candidats">Espace candidats</NuxtLink></li> -->
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/presse">Presse</NuxtLink></li> <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/presse">Presse</NuxtLink></li> -->
</ul> </ul>
</li> </li>
<li class="header_nav_topbar_item header_nav_lang"> <li class="header_nav_topbar_item header_nav_lang">
@@ -38,10 +38,10 @@
L'Orchestre L'Orchestre
<ul class="header_nav_sub_menu"> <ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
</ul> </ul>
</li> </li>
@@ -51,7 +51,7 @@
<ul class="header_nav_sub_menu"> <ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li> <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li> -->
</ul> </ul>
</li> </li>
@@ -64,7 +64,7 @@
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li> <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li> <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li> -->
</ul> </ul>
</li> </li>
@@ -167,10 +167,10 @@
L'Orchestre L'Orchestre
<ul class="header_drawer_sub_menu"> <ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
</ul> </ul>
</li> </li>
@@ -184,7 +184,7 @@
<ul class="header_drawer_sub_menu"> <ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li> <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li> -->
</ul> </ul>
</li> </li>
@@ -201,7 +201,7 @@
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li> <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li> <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li> -->
</ul> </ul>
</li> </li>

View File

@@ -11,7 +11,6 @@
<section class="fiche_concert_wp"> <section class="fiche_concert_wp">
<div class="fiche_header_wp_gauche"></div>
<div class="fiche_header_inner"> <div class="fiche_header_inner">
<div class="fiche_header_titres"> <div class="fiche_header_titres">
<div> <div>
@@ -342,15 +341,11 @@
display: grid; display: grid;
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding-top: 40px; padding-top: 40px;
} }
@media (min-width: 600px) {
grid-template-columns: minmax(10px, 10px) 580px 0px;
grid-template-rows: 40px auto;
}
@media (min-width: 700px) { @media (min-width: 700px) {
grid-template-columns: minmax(10px, 10px) 660px 0px; grid-template-columns: minmax(10px, 10px) 660px 0px;
grid-template-rows: 70px auto; grid-template-rows: 70px auto;
@@ -388,80 +383,69 @@
grid-template-rows: 90px auto; grid-template-rows: 90px auto;
} }
.fiche_header_wp_gauche {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
}
}
.fiche_header_inner { .fiche_header_inner {
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-column: 1; grid-column: 1;
grid-row: 1/3; grid-row: 1/3;
} }
@media (min-width: 600px) { @media (min-width: 700px) {
grid-column: 2; grid-column: 2;
grid-row: 1/3; grid-row: 1/3;
} }
display: grid; display: grid;
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-template-columns: 4fr 1fr 0.5fr; grid-template-columns: 1fr;
grid-template-rows: auto 510px 20px 200px; grid-template-rows: auto auto min-content auto auto;
}
@media (min-width: 600px) {
width: 575px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 40px 280px 20px 230px;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
width: 675px; width: 675px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 70px 250px 90px 300px; grid-template-rows: 70px auto min-content auto auto;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
width: 780px; width: 780px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 60px 280px 70px 300px; grid-template-rows: 60px auto min-content auto auto;
} }
@media (min-width: 900px) { @media (min-width: 900px) {
width: 860px; width: 860px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 100px 250px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
width: 950px; width: 950px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 120px 270px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1100px) { @media (min-width: 1100px) {
width: 1020px; width: 1020px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 140px 290px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
width: 1100px; width: 1100px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 160px 330px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1300px) { @media (min-width: 1300px) {
width: 1200px; width: 1200px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 160px 330px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
width: 1300px; width: 1300px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px 340px 160px 380px; grid-template-rows: 90px auto min-content auto auto;
} }
@media (min-width: 1500px) { @media (min-width: 1500px) {
width: 1400px; width: 1400px;
grid-template-columns: 4fr 4fr 0.5fr; grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto; grid-template-rows: 90px auto min-content auto auto;
} }
@@ -470,29 +454,28 @@
.fiche_header_titres { .fiche_header_titres {
//background-color: rgba(255, 166, 0, 0.674); //background-color: rgba(255, 166, 0, 0.674);
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
padding-bottom: 20px; padding-bottom: 20px;
padding-left: 10px; padding-left: 10px;
} }
@media (min-width: 600px) { @media (min-width: 700px) {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
display: grid; display: grid;
align-content: start; align-content: start;
gap: 0.75rem; gap: 0.75rem;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px; padding-bottom: 10px;
h1 { h1 {
font-size: 55px; font-size: 55px;
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
font-size: 25px; font-size: 25px;
} }
@media (min-width: 600px) {
font-size: 25px;
}
@media (min-width: 700px) { @media (min-width: 700px) {
font-size: 30px; font-size: 30px;
} }
@@ -534,11 +517,11 @@
.fiche_header_img { .fiche_header_img {
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-column: 1 / 4; grid-column: 1;
grid-row: 1 / 4; grid-row: 2;
} }
@media (min-width: 600px) { @media (min-width: 700px) {
grid-column: 2; grid-column: 2;
grid-row: 1 / 5; grid-row: 1 / 5;
} }
@@ -550,23 +533,25 @@
.fiche_header_infos { .fiche_header_infos {
background-color: var(--c-text); background-color: var(--c-text);
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
grid-column: 1 / 2; grid-column: 1;
grid-row: 4; grid-row: 4;
margin-top: -30px;
} }
@media (min-width: 600px) { @media (min-width: 700px) {
grid-column: 2; grid-column: 2;
grid-row: 5; grid-row: 5;
} }
display: grid; display: grid;
align-content: center; align-content: start;
justify-content: end; justify-content: end;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
padding-right: 20px; padding-right: 20px;
padding-left: 10px; padding-left: 10px;
width: 96%; width: 96%;
@media (min-width: 0px) and (max-width: 700px) {
width: 100%;
}
margin-top: -18px; margin-top: -18px;
@media (min-width: 0px) and (max-width: 700px) { @media (min-width: 0px) and (max-width: 700px) {
gap: 7px; gap: 7px;
@@ -603,7 +588,10 @@
.fiche_header_distrib_wp { .fiche_header_distrib_wp {
background-color: var(--c-backgroud-brandreverse); background-color: var(--c-backgroud-brandreverse);
grid-column: 1; grid-column: 1;
grid-row: 3/5; grid-row: 3;
@media (min-width: 0px) and (max-width: 700px) {
width: 96%;
}
.programme_list { .programme_list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -635,7 +623,7 @@
padding-top: 20px; padding-top: 20px;
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
@media (min-width: 0px) and (max-width: 600px) { @media (min-width: 0px) and (max-width: 700px) {
padding-left: 20px; padding-left: 20px;
padding-right: 5px; padding-right: 5px;
} }
@@ -690,143 +678,7 @@
} }
} }
/* ============================ */
/* DISTRIBUTION / PROGRAMME */
/* ============================ */
.fiche_details_wp {
.distribution_wp {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
.distribution_item {
display: flex;
.distribution_item_poste {
padding-right: 10px;
font-weight: 200;
}
.direction {
font-weight: 400;
}
}
}
.programme_wp {
background-color: var(--c-backgroud-brandreverse);
margin-bottom: 70px;
padding-top: 50px;
padding-right: 30px;
padding-left: 50px;
@media (max-width: 599px) {
padding-left: 40px;
}
padding-bottom: 50px;
/* DÉCALAGE DU BLOC VERS LA DROITE */
position: relative;
@media (min-width: 0px) and (max-width: 700px) {
width: 89vw;
left: 5%;
}
@media (min-width: 700px) {
width: 67vw;
left: 30%;
}
@media (min-width: 800px) {
width: 50vw;
left: 49%;
}
transform: translateX(0px);
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
display: block;
justify-content: initial;
align-items: initial;
.programme_titre {
padding-bottom: 20px;
}
.programme_list {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
}
.programme_item {
flex: 1 0 200px;
background-color: var(--c-surface);
padding-top: 14px;
padding-right: 20px;
padding-left: 18px;
padding-bottom: 10px;
}
}
}
/* ============================ */
/* REPRÉSENTATIONS */
/* ============================ */
.representation_wp {
display: flex;
flex-wrap: wrap;
/* justify-content: center; */
column-gap: 30px;
row-gap: 30px;
padding-bottom: 70px;
@media (min-width: 0px) and (max-width: 600px) {
padding-left: 20px;
padding-right: 5px;
}
.representation_item {
@media (min-width: 0px) and (max-width: 500px) {
width: 100%;
}
@media (min-width: 500px) {
max-width: 215px;
}
@media (min-width: 600px) {
max-width: 262px;
}
@media (min-width: 700px) {
max-width: 300px;
}
flex: 1 1 300px;
display: grid;
border: 2px var(--c-brand_rouge) solid;
padding-top: 20px;
> * {
padding-left: 20px;
padding-right: 20px;
}
.representation_item_comment_wp {
padding-top: 5px;
}
.representation_item_comment {
background-color: lightgray;
padding: 5px;
}
}
.representation_cta {
color: var(--c-surface);
background-color: var(--c-brand_rouge);
margin-top: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
a {
font-family: var(--font-roboto);
font-weight: 600;
font-size: 18px;
}
}
}
/* ============================ */ /* ============================ */
/* GALERIES */ /* GALERIES */

View File

@@ -333,7 +333,7 @@
{ {
id: '3', id: '3',
title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-DOEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE", title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-DOEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
description: `Avant la première exécution publique de lœuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait dabord été créée dans le palais du prince Lobkowitz en mars 1807.`, description: `Avant la première exécution publique de lœuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait dabord été créée dans le palais du prince Lobkowitz en mars 1807.`,
url:"#", url:"#",
}, },
]) ])