From ee37e0041ff66b5dd37d1269cc64c67394349707 Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Mon, 13 Apr 2026 00:34:05 +0200
Subject: [PATCH] dev

---
 app/components/Footer.vue           |  11 +-
 app/components/TextCardLeft.vue     |   2 +-
 app/components/header/HeaderNav.vue |  28 ++--
 app/pages/concerts/concert-[id].vue | 242 ++++++----------------------
 app/pages/index.vue                 |   2 +-
 5 files changed, 68 insertions(+), 217 deletions(-)

diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index df3d1b6..6ad8830 100644
--- a/app/components/Footer.vue
+++ b/app/components/Footer.vue
@@ -8,18 +8,17 @@
             <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 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 class="nav--item"><NuxtLink to="/mecenat/valeurs">Mécénat</NuxtLink></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 class="nav--item">Recrutement</div> -->
+                        <div class="nav--item"><NuxtLink to="/mediation/academie">Académie d'Orchestre</NuxtLink></div>
                     </div>
                     <div class="footer--grid--social">
                         <div class="nav--title">Nos réseaux</div>
diff --git a/app/components/TextCardLeft.vue b/app/components/TextCardLeft.vue
index f8c4b40..2337426 100644
--- a/app/components/TextCardLeft.vue
+++ b/app/components/TextCardLeft.vue
@@ -13,7 +13,7 @@
         
         <!-- Actions -->
         <div class="concert-card__actions">
-          <DsButtonArrow :to="`/concerts/concert-${id}`" variant="secondary">
+          <DsButtonArrow :to="`#`" variant="secondary">
             Découvrir
           </DsButtonArrow>
         </div>
diff --git a/app/components/header/HeaderNav.vue b/app/components/header/HeaderNav.vue
index d363b1b..7a238e0 100644
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -6,12 +6,12 @@
       <li class="header_nav_topbar_item" :class="{ 'is-active': isPro }">
         Professionnels
         <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/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/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/presse">Presse</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/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/candidats">Espace candidats</NuxtLink></li> -->
+          <!-- <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/presse">Presse</NuxtLink></li> -->
         </ul>
       </li>
       <li class="header_nav_topbar_item header_nav_lang">
@@ -38,10 +38,10 @@
             L'Orchestre
             <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/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/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>
             </ul>
           </li>
@@ -51,7 +51,7 @@
             <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/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>
           </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/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/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>
           </li>
 
@@ -167,10 +167,10 @@
               L'Orchestre
               <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/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/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>
               </ul>
             </li>
@@ -184,7 +184,7 @@
               <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/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>
             </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/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/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>
             </li>
 
diff --git a/app/pages/concerts/concert-[id].vue b/app/pages/concerts/concert-[id].vue
index 7ba4e59..da4fd97 100644
--- a/app/pages/concerts/concert-[id].vue
+++ b/app/pages/concerts/concert-[id].vue
@@ -11,7 +11,6 @@
 
 
       <section class="fiche_concert_wp">
-        <div class="fiche_header_wp_gauche"></div>
         <div class="fiche_header_inner">
             <div class="fiche_header_titres">
               <div>
@@ -342,15 +341,11 @@
 
     display: grid;
     
-    @media (min-width: 0px) and (max-width: 600px) {
+    @media (min-width: 0px) and (max-width: 700px) {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto;
       padding-top: 40px;
     }
-    @media (min-width: 600px) {
-      grid-template-columns: minmax(10px, 10px) 580px 0px;
-      grid-template-rows: 40px auto;
-    }
     @media (min-width: 700px) {
       grid-template-columns: minmax(10px, 10px) 660px 0px;
       grid-template-rows: 70px auto;
@@ -388,80 +383,69 @@
       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 {
      
-    @media (min-width: 0px) and (max-width: 600px) {
+    @media (min-width: 0px) and (max-width: 700px) {
       grid-column: 1;
       grid-row: 1/3;
     }
-    @media (min-width: 600px) {
+    @media (min-width: 700px) {
       grid-column: 2;
       grid-row: 1/3;
     }
+
     display: grid;
     
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 4fr 1fr 0.5fr;
-      grid-template-rows: auto 510px 20px 200px; 
-    }
-    @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: 0px) and (max-width: 700px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto min-content auto auto;
     }
+
     @media (min-width: 700px) {
       width: 675px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 70px 250px 90px 300px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 70px auto min-content auto auto;
     }
     @media (min-width: 800px) {
       width: 780px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 60px 280px 70px 300px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 60px auto min-content auto auto;
     }   
     @media (min-width: 900px) {
       width: 860px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 100px 250px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1000px) {
       width: 950px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 120px 270px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1100px) {
       width: 1020px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 140px 290px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1200px) {
       width: 1100px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1300px) {
       width: 1200px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1400px) {
       width: 1300px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
+      grid-template-columns: 4fr 4fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
     @media (min-width: 1500px) {
       width: 1400px;
-      grid-template-columns: 4fr 4fr 0.5fr;
+      grid-template-columns: 4fr 4fr;
       grid-template-rows: 90px auto min-content auto auto;
     }
     
@@ -470,29 +454,28 @@
   .fiche_header_titres {
     //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-row: 1;
       padding-bottom: 20px;
       padding-left: 10px;
     }
-    @media (min-width: 600px) {
+    @media (min-width: 700px) {
       grid-column: 1;
       grid-row: 2;
     }
+
     display: grid;
     align-content: start;
     gap: 0.75rem;
     padding-right: 10px;
     padding-bottom: 10px;
+
     h1 {
       font-size: 55px;
-      @media (min-width: 0px) and (max-width: 600px) {
+      @media (min-width: 0px) and (max-width: 700px) {
         font-size: 25px;  
       }
-      @media (min-width: 600px) {
-        font-size: 25px;
-      }
       @media (min-width: 700px) {
         font-size: 30px;
       }
@@ -534,11 +517,11 @@
 
   .fiche_header_img {
     
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1 / 4;
-      grid-row: 1 / 4; 
+    @media (min-width: 0px) and (max-width: 700px) {
+      grid-column: 1;
+      grid-row: 2; 
     }
-    @media (min-width: 600px) {
+    @media (min-width: 700px) {
       grid-column: 2;
       grid-row: 1 / 5;
     }
@@ -550,23 +533,25 @@
 
   .fiche_header_infos {
     background-color: var(--c-text);
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1 / 2;
+    @media (min-width: 0px) and (max-width: 700px) {
+      grid-column: 1;
       grid-row: 4;
-      margin-top: -30px;
     }
-    @media (min-width: 600px) {
+    @media (min-width: 700px) {
       grid-column: 2;
       grid-row: 5;
     }
     display: grid;
-    align-content: center;
+    align-content: start;
     justify-content: end;
     padding-top: 20px;
     padding-bottom: 20px;
     padding-right: 20px;
     padding-left: 10px;
     width: 96%;
+    @media (min-width: 0px) and (max-width: 700px) {
+      width: 100%;
+    }
     margin-top: -18px;
     @media (min-width: 0px) and (max-width: 700px) {
       gap: 7px;  
@@ -603,7 +588,10 @@
   .fiche_header_distrib_wp {
       background-color: var(--c-backgroud-brandreverse);
       grid-column: 1;
-      grid-row: 3/5;
+      grid-row: 3;
+      @media (min-width: 0px) and (max-width: 700px) {
+        width: 96%;
+      }
       .programme_list {
         display: flex;
         flex-wrap: wrap;
@@ -635,7 +623,7 @@
     padding-top: 20px;
     padding-right: 20px;
     padding-left: 20px;
-    @media (min-width: 0px) and (max-width: 600px) {
+    @media (min-width: 0px) and (max-width: 700px) {
       padding-left: 20px;
       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 */
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7283c7c..6d82ddc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -333,7 +333,7 @@
         {
           id: '3',
           title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-D’OEUVRE À 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 d’abord é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 d’abord été créée dans le palais du prince Lobkowitz en mars 1807.`,
           url:"#",
         },
   ])