ajout de bouton réserver et ajout du formulaire lycée

2026-05-25 17:15:17 +02:00
parent 107093f7bb
commit c2a11f1b61
12 changed files with 929 additions and 26 deletions
--- a/app/components/Breadcrumb.vue
+++ b/app/components/Breadcrumb.vue
@@ -32,6 +32,8 @@
    mediation: "Médiation",
    mecenat: "Mécénat",
    professionnels: "Professionnels",
+    inscriptions: "Inscriptions",
+    projet_lycee: "Inscription projet lycée",
    actus: "Actualités"
  }

@@ -75,7 +77,7 @@
        ? props.currentLabel
        : (labelMap[part] || humanize(decodeURIComponent(part)))

-      const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'professionnels' || part === 'mecenat'
+      const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'professionnels' || part === 'mecenat' || part === 'inscriptions'
      crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })

      if (part === 'concerts') {
--- a/app/components/concert/ConcertCard.vue
+++ b/app/components/concert/ConcertCard.vue
@@ -3,15 +3,19 @@
    <div class="concert-card__grid">
      <!-- Image -->
      <div class="concert-card__media">
-        <DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
+        <NuxtLink v-if="href" :to="href" class="concert-card__link">
+          <DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
+        </NuxtLink>
        <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
      </div>

      <!-- Content -->
      <div class="concert-card__content">
-        <DsHeading as="h4" tone="default" class="concert-card__title">
-          {{ title }}
-        </DsHeading>
+        <NuxtLink v-if="href" :to="href" class="concert-card__link">
+          <DsHeading as="h4" tone="default" class="concert-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>

        <!-- Meta : date + lieu -->
        <div class="concert-card__meta">
@@ -33,6 +37,9 @@
          <DsButtonArrow :to="`${href}`" variant="secondary">
            Découvrir
          </DsButtonArrow>
+          <DsButton :href="`${lien_billetterie_representation}`" variant="third" size="xs" class="concert-card__actions--reserver" target="_blank" rel="noopener noreferrer">
+            Réserver
+          </DsButton>
        </div>
      </div>
    </div>
@@ -45,6 +52,7 @@
  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'
+  import DsButton from '@root/design-system/primitives/DsButton.vue'


  defineProps({
@@ -53,6 +61,7 @@
    lieu: { type: String, default: '' },
    dateISO: { type: String, required: true },      // ex: "2026-01-15T20:00:00+01:00"
    dateLabel: { type: String, required: true },    // ex: "Jeu. 15 jan. 2026 — 20h"
+    lien_billetterie_representation: { type: String, default: '' },
    description: { type: String, default: '' },
    imageUrl: { type: String, default: '' },
    imageAlt: { type: String, default: '' },
@@ -83,21 +92,34 @@

  .concert-card__content {
    display: grid;
-    gap: var(--sp-6);
+    gap: var(--sp-4);
    max-width: 518px;
    padding-left: 5px;
    padding-right: 5px;
  }

+  .concert-card__link:hover,
+  .concert-card__link:focus-visible {
+    color: var(--c-brand_rouge) !important;
+    .ds-heading--default {
+      color: var(--c-brand_rouge) !important;
+    }
+  }
  .concert-card__meta {
    margin-top: calc(var(--sp-4) * -1);
  }
  .concert-card__description {
-    margin-top: 10px;
-    margin-bottom: 20px;
+    margin-top: 3px;
+    margin-bottom: 4px;
  }
  .concert-card__actions {
    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &--reserver {
+      margin-right: 5px;
+    }
  }

 </style>
--- a/app/components/section/Decalage.vue
+++ b/app/components/section/Decalage.vue
@@ -15,11 +15,13 @@
                  <slot name="title" />
                </DsHeading>
                <slot />
-                <div v-if="$slots.button" class="decalage_button">
-                    <slot name="button" />
-                </div>
-                <div v-if="ensavoirplusTarget" class="decalage_button">
-                    <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
+                <div class="decalage_button_wp">
+                    <div v-if="resolvedLienCta" class="decalage_button">
+                        <DsButton :to="resolvedLienCta" variant="white" textColor="default" borderColor="none">Candidater à nos projets</DsButton>
+                    </div>
+                    <div v-if="ensavoirplusTarget" class="decalage_button">
+                        <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
+                    </div>
                </div>
            </div>
        </div>
@@ -27,17 +29,23 @@
 </template>

 <script setup>
+    import { computed } from 'vue'
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'
    import DsButton from '@root/design-system/primitives/DsButton.vue'
-    defineProps({
+    const props = defineProps({
        tone: { type: String, default: 'default' },
        titleTone: { type: String, default: 'default' },
        buttonTone: { type: String, default: 'default' },
        position: { type: String, default: 'left' },
+        cta: { type: String, default: '' },
+        lienCta: { type: String, default: '' },
        ensavoirplusTarget: { type: String, default: '' },
-        ensavoirplusGroup: { type: String, default: '' }
+        ensavoirplusGroup: { type: String, default: '' },
    })
+
+    const resolvedLienCta = computed(() => props.lienCta || props.cta)
+
    function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
        const target = document.getElementById(ensavoirplusTarget)
        if (!target) return
@@ -134,10 +142,17 @@
            .decalage_button {
                text-align: right;
            }
+            .decalage_button_wp {
+                justify-content: flex-end;
+            }
            
        }
-        .decalage_button {
+
+        .decalage_button_wp {
            margin-top: 32px;
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
        }
    }

--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -23,6 +23,7 @@
          :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
          :dateISO="c.representation_concert?.[0]?.date_debut_representation"
          :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
+          :lien_billetterie_representation="c.representation_concert?.[0]?.lien_billetterie_representation"
          :description="c.resume_concert"
          :imageUrl="c.image_illustration_concert?.url"
          :imageAlt="c.image_illustration_concert?.alternativeText"
--- a/app/pages/inscriptions/projet_lycee.vue
+++ b/app/pages/inscriptions/projet_lycee.vue
@@ -0,0 +1,588 @@
+<template>
+    <div class="inscription-page">
+        <!-- ================== -->
+        <!-- FILS D'ARIANE -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" class="breadcrum_wp">
+          <Breadcrumb/>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- EN-TÊTE -->
+        <!-- ================== -->
+        <PageSection tone="jaune" content-size="default" class="theme_bandeau--grid">
+          <SectionContent pad="xs" class="theme_bandeau--grid--left">
+            <SectionTitle tone="invert" pad="">
+              CANDIDATER À UN PROJET AVEC L'ORCHESTRE
+            </SectionTitle>
+            <DsHeading as="h3" tone="invert">
+            </DsHeading>
+          </SectionContent>
+
+
+          <SectionContent pad="xs" class="theme_bandeau--grid--right">
+            <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
+              Renseignez ce formulaire pour soumettre la candidature de votre établissement à un programme d'action culturelle de l'Orchestre national d'Île-de-France.
+            </DsText>
+          </SectionContent>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- FORMULAIRE -->
+        <!-- ================== -->
+        <div class="programmer-orchestre-page text-on-surface">
+          <!-- FORM -->
+          <form class="space-y-6" @submit.prevent="submitQuoteRequest">
+            <div class="px-12 py-8 max-w-7xl mx-auto">
+              <!-- SOUS-TITRE -->
+              <section class="mb-8">
+                <div class="flex items-center gap-4 mb-8">
+                  <h3 class="text-2xl font-bold tracking-tight uppercase">Établissement scolaire</h3>
+                  <div class="h-[2px] flex-1 bg-surface-container"></div>
+                </div>
+              </section>
+              <!-- SOUS-TITRE QUESTIONS -->
+              <section>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="space-y-2">
+                      <label for="quote-etablissement" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Nom de l'établissement scolaire *
+                      </label>
+                      <input
+                        id="quote-etablissement"
+                        v-model.trim="quoteForm.schoolName"
+                        type="text"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.schoolName" class="text-xs text-error">{{ quoteFormErrors.schoolName }}</p>
+                    </div>
+                    <div class="space-y-2">
+                      <label for="quote-departement" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Département *
+                      </label>
+                      <select
+                        id="quote-departement"
+                        v-model="quoteForm.department"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                      >
+                        <option value="">Choisir un département</option>
+                        <option value="75">75 – Paris</option>
+                        <option value="77">77 – Seine-et-Marne</option>
+                        <option value="78">78 – Yvelines</option>
+                        <option value="91">91 – Essonne</option>
+                        <option value="92">92 – Hauts-de-Seine</option>
+                        <option value="93">93 – Seine-Saint-Denis</option>
+                        <option value="94">94 – Val-de-Marne</option>
+                      </select>
+                      <p v-if="quoteFormErrors.department" class="text-xs text-error">{{ quoteFormErrors.department }}</p>
+                    </div>
+                    <div class="space-y-2">
+                      <label for="quote-ville" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Ville *
+                      </label>
+                      <input
+                        id="quote-ville"
+                        v-model.trim="quoteForm.city"
+                        type="text"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.city" class="text-xs text-error">{{ quoteFormErrors.city }}</p>
+                    </div>
+                  </div>
+              </section>
+
+              <!-- SOUS-TITRE -->
+              <section class="mb-8 mt-10">
+                <div class="flex items-center gap-4 mb-8">
+                  <h3 class="text-2xl font-bold tracking-tight uppercase">Enseignant coordinateur du projet</h3>
+                  <div class="h-[2px] flex-1 bg-surface-container"></div>
+                </div>
+              </section>
+              <!-- SOUS-TITRE QUESTIONS -->
+              <section>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="space-y-2">
+                      <label for="quote-name" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Nom et prénom *
+                      </label>
+                      <input
+                        id="quote-name"
+                        v-model.trim="quoteForm.coordinatorName"
+                        type="text"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.coordinatorName" class="text-xs text-error">{{ quoteFormErrors.coordinatorName }}</p>
+                    </div>
+
+                    <div class="space-y-2">
+                      <label for="quote-email" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Adresse mail *
+                      </label>
+                      <input
+                        id="quote-email"
+                        v-model.trim="quoteForm.email"
+                        type="email"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.email" class="text-xs text-error">{{ quoteFormErrors.email }}</p>
+                    </div>
+
+                    <div class="space-y-2">
+                      <label for="quote-phone" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Téléphone *
+                      </label>
+                      <input
+                        id="quote-phone"
+                        v-model.trim="quoteForm.phone"
+                        type="tel"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.phone" class="text-xs text-error">{{ quoteFormErrors.phone }}</p>
+                    </div>
+
+                    <div class="space-y-2">
+                      <label for="quote-discipline" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Discipline enseignée *
+                      </label>
+                      <input
+                        id="quote-discipline"
+                        v-model.trim="quoteForm.discipline"
+                        type="text"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.discipline" class="text-xs text-error">{{ quoteFormErrors.discipline }}</p>
+                    </div>
+
+                    <div class="space-y-2">
+                      <label for="quote-niveau" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Niveau de classe *
+                      </label>
+                      <input
+                        id="quote-niveau"
+                        v-model.trim="quoteForm.classLevel"
+                        type="text"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.classLevel" class="text-xs text-error">{{ quoteFormErrors.classLevel }}</p>
+                    </div>
+
+                    <div class="space-y-2">
+                      <label for="quote-nb_eleves" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Nombre probable d'élèves concernés *
+                      </label>
+                      <input
+                        id="quote-nb_eleves"
+                        v-model.trim="quoteForm.studentCount"
+                        type="number"
+                        min="1"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      >
+                      <p v-if="quoteFormErrors.studentCount" class="text-xs text-error">{{ quoteFormErrors.studentCount }}</p>
+                    </div>
+
+
+                  </div>
+
+              </section>
+
+              <!-- SOUS-TITRE -->
+              <section class="mb-8 mt-10">
+                <div class="flex items-center gap-4 mb-8">
+                  <h3 class="text-2xl font-bold tracking-tight uppercase">Souhaits de projet</h3>
+                  <div class="h-[2px] flex-1 bg-surface-container"></div>
+                </div>
+              </section>
+              <!-- SOUS-TITRE QUESTIONS -->
+              <section>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+                    <div class="space-y-2">
+                      <label for="quote-type_rencontre" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Concert-rencontre
+                      </label>
+                      <select
+                        id="quote-type_rencontre"
+                        v-model="quoteForm.concertRencontrePriority"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                      >
+                        <option value="">Priorité</option>
+                        <option value="concert_rencontre_priorite_0">non souhaité</option>
+                        <option value="concert_rencontre_priorite_1">1</option>
+                        <option value="concert_rencontre_priorite_2">2</option>
+                        <option value="concert_rencontre_priorite_3">3</option>
+                        <option value="concert_rencontre_priorite_4">4</option>
+                      </select>
+                    </div>
+                    <div class="space-y-2">
+                      <label for="quote-type_immersion" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Parcours Entrer dans la peau d'un professionnel du spectacle
+                      </label>
+                      <select
+                        id="quote-type_immersion"
+                        v-model="quoteForm.immersionPriority"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                      >
+                        <option value="">Priorité</option>
+                        <option value="immersion_0">non souhaité</option>
+                        <option value="immersion_1">1</option>
+                        <option value="immersion_2">2</option>
+                        <option value="immersion_3">3</option>
+                        <option value="immersion_4">4</option>
+                      </select>
+                    </div>
+                    <div class="space-y-2">
+                      <label for="quote-type_eac" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Parcours EAC
+                      </label>
+                      <select
+                        id="quote-type_eac"
+                        v-model="quoteForm.eacPriority"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                      >
+                        <option value="">Priorité</option>
+                        <option value="eac_0">non souhaité</option>
+                        <option value="eac_1">1</option>
+                        <option value="eac_2">2</option>
+                        <option value="eac_3">3</option>
+                        <option value="eac_4">4</option>
+                      </select>
+                    </div>
+                    <div class="space-y-2">
+                      <label for="quote-type_commente" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Concert commenté
+                      </label>
+                      <select
+                        id="quote-type_commente"
+                        v-model="quoteForm.concertCommentePriority"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                      >
+                        <option value="">Priorité</option>
+                        <option value="concert_commente_0">non souhaité</option>
+                        <option value="concert_commente_1">1</option>
+                        <option value="concert_commente_2">2</option>
+                        <option value="concert_commente_3">3</option>
+                        <option value="concert_commente_4">4</option>
+                      </select>
+                    </div>
+                  </div>
+
+              </section>
+
+              <!-- SOUS-TITRE -->
+              <section class="mb-8 mt-10">
+                <div class="flex items-center gap-4 mb-8">
+                  <h3 class="text-2xl font-bold tracking-tight uppercase">Période souhaitée</h3>
+                  <div class="h-[2px] flex-1 bg-surface-container"></div>
+                </div>
+              </section>
+              <!-- SOUS-TITRE QUESTIONS -->
+              <section>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="space-y-2">
+                      <label for="quote-periode" class="block text-sm font-medium text-on-surface pl-[2px]">
+                        Période souhaitée de déroulement du projet *
+                      </label>
+                      <textarea
+                        id="quote-periode"
+                        v-model.trim="quoteForm.projectPeriod"
+                        rows="6"
+                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
+                        placeholder=""
+                      ></textarea>
+                      <p v-if="quoteFormErrors.projectPeriod" class="text-xs text-error">{{ quoteFormErrors.projectPeriod }}</p>
+                    </div>
+                  </div>
+
+              </section>
+
+              <!-- ENVOYER LE FORMULAIRE -->
+              <section class="mb-12 mt-12">
+                <div v-if="quoteSubmitError" class="mb-8 rounded-xl border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
+                  {{ quoteSubmitError }}
+                </div>
+                <div v-if="quoteSubmitSuccess" class="mb-8 rounded-xl border border-primary/20 bg-primary-container/40 px-4 py-3 text-sm text-on-surface">
+                  <span v-if="quoteEmailsSent">Votre demande a bien été envoyée. Un email de confirmation vous a été adressé.</span>
+                  <span v-else>Votre demande a bien été enregistrée et transmise à l’équipe de la médiation scolaire.</span>
+                </div>
+                <div v-if="quoteSubmitting" class="mb-8 rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface">
+                  Envoi de votre demande en cours...
+                </div>
+                <div class="flex items-center gap-4">
+                  <button
+                    type="submit"
+                    class="inline-flex items-center justify-center rounded-full bg-primary px-6 py-3 text-sm font-bold text-on-primary transition-colors hover:bg-primary-dim disabled:cursor-not-allowed disabled:opacity-60"
+                    :disabled="quoteSubmitting"
+                  >
+                    {{ quoteSubmitting ? 'Envoi en cours...' : 'Envoyer la demande' }}
+                  </button>
+                  <p class="text-xs text-on-surface-variant">
+                    L'équipe d'action culturelle de l'Ondif reviendra vers vous d'ici fin juin 2026 afin de vous informer de la suite donnée à votre candidature.
+                    <br>
+                    En soumettant ce formulaire, j’accepte que les informations saisies soient utilisées dans le cadre de cette demande.
+                  </p>
+                </div>
+              </section>
+            </div>
+          </form>
+        </div>
+
+
+
+
+
+    </div>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+
+
+  useHead({
+    link: [
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+      },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: '',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
+      },
+    ],
+  })
+
+  //--------------------
+  // RÉCUPÉRATION DES DONNÉES STRAPI
+  //--------------------
+
+
+
+  const quoteForm = reactive({
+    schoolName: "",
+    department: "",
+    city: "",
+    coordinatorName: "",
+    email: "",
+    phone: "",
+    discipline: "",
+    classLevel: "",
+    studentCount: "",
+    concertRencontrePriority: "",
+    immersionPriority: "",
+    eacPriority: "",
+    concertCommentePriority: "",
+    projectPeriod: "",
+  })
+
+  const quoteFormErrors = reactive({
+    schoolName: "",
+    department: "",
+    city: "",
+    coordinatorName: "",
+    email: "",
+    phone: "",
+    discipline: "",
+    classLevel: "",
+    studentCount: "",
+    projectPeriod: "",
+  })
+
+  const quoteSubmitting = ref(false)
+  const quoteSubmitSuccess = ref(false)
+  const quoteSubmitError = ref("")
+  const quoteEmailsSent = ref(false)
+
+
+  function resetQuoteFormErrors() {
+    quoteFormErrors.schoolName = ""
+    quoteFormErrors.department = ""
+    quoteFormErrors.city = ""
+    quoteFormErrors.coordinatorName = ""
+    quoteFormErrors.email = ""
+    quoteFormErrors.phone = ""
+    quoteFormErrors.discipline = ""
+    quoteFormErrors.classLevel = ""
+    quoteFormErrors.studentCount = ""
+    quoteFormErrors.projectPeriod = ""
+  }
+
+  function validateQuoteForm() {
+    resetQuoteFormErrors()
+
+    let isValid = true
+
+    if (!quoteForm.schoolName) {
+      quoteFormErrors.schoolName = "Le nom de l'établissement scolaire est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.department) {
+      quoteFormErrors.department = "Le département est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.city) {
+      quoteFormErrors.city = "La ville est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.coordinatorName) {
+      quoteFormErrors.coordinatorName = "Le nom et le prénom de l'enseignant coordinateur sont obligatoires."
+      isValid = false
+    }
+
+    if (!quoteForm.email) {
+      quoteFormErrors.email = "L’email est obligatoire."
+      isValid = false
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(quoteForm.email)) {
+      quoteFormErrors.email = "L’email n’est pas valide."
+      isValid = false
+    }
+
+    if (!quoteForm.phone) {
+      quoteFormErrors.phone = "Le téléphone est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.discipline) {
+      quoteFormErrors.discipline = "La discipline enseignée est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.classLevel) {
+      quoteFormErrors.classLevel = "Le niveau de classe est obligatoire."
+      isValid = false
+    }
+
+    if (!quoteForm.studentCount) {
+      quoteFormErrors.studentCount = "Le nombre probable d'élèves concernés est obligatoire."
+      isValid = false
+    } else if (Number(quoteForm.studentCount) <= 0) {
+      quoteFormErrors.studentCount = "Le nombre d'élèves doit être supérieur à 0."
+      isValid = false
+    }
+
+    if (!quoteForm.projectPeriod) {
+      quoteFormErrors.projectPeriod = "La période souhaitée est obligatoire."
+      isValid = false
+    }
+
+    return isValid
+  }
+
+  async function submitQuoteRequest() {
+    quoteSubmitSuccess.value = false
+    quoteSubmitError.value = ""
+    quoteEmailsSent.value = false
+
+    if (!validateQuoteForm()) {
+      return
+    }
+
+    quoteSubmitting.value = true
+
+    try {
+      const response = await $fetch("/api/projet-lycee", {
+        method: "POST",
+        body: {
+          schoolName: quoteForm.schoolName,
+          department: quoteForm.department,
+          city: quoteForm.city,
+          coordinatorName: quoteForm.coordinatorName,
+          email: quoteForm.email,
+          phone: quoteForm.phone,
+          discipline: quoteForm.discipline,
+          classLevel: quoteForm.classLevel,
+          studentCount: quoteForm.studentCount,
+          concertRencontrePriority: quoteForm.concertRencontrePriority,
+          immersionPriority: quoteForm.immersionPriority,
+          eacPriority: quoteForm.eacPriority,
+          concertCommentePriority: quoteForm.concertCommentePriority,
+          projectPeriod: quoteForm.projectPeriod,
+        },
+      })
+
+      quoteSubmitSuccess.value = true
+      quoteEmailsSent.value = Boolean(response?.emailsSent)
+      quoteForm.schoolName = ""
+      quoteForm.department = ""
+      quoteForm.city = ""
+      quoteForm.coordinatorName = ""
+      quoteForm.email = ""
+      quoteForm.phone = ""
+      quoteForm.discipline = ""
+      quoteForm.classLevel = ""
+      quoteForm.studentCount = ""
+      quoteForm.concertRencontrePriority = ""
+      quoteForm.immersionPriority = ""
+      quoteForm.eacPriority = ""
+      quoteForm.concertCommentePriority = ""
+      quoteForm.projectPeriod = ""
+      resetQuoteFormErrors()
+    } catch (error) {
+      quoteSubmitError.value = error?.data?.statusMessage || "L’envoi de la demande a échoué."
+    } finally {
+      quoteSubmitting.value = false
+    }
+  }
+
+
+</script>
+
+<style lang="scss">
+
+
+  .breadcrum_wp {
+    padding-top: 30px;
+  }
+
+
+
+// =======================
+// SPÉCIFIQUE À CETTE PAGE
+// =======================
+.inscription-page {
+
+
+  .fiche_description {
+    display: flex;
+    justify-content: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    > * {
+      max-width: 640px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 20px;
+    }
+
+
+}
+
+</style>
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -64,6 +64,7 @@
            button-tone="invert"
            :ensavoirplus-target="`texte_cache_${index + 3}`"
            ensavoirplus-group="scolaires-details"
+            :lien-cta="t.lien_cta"
          >
            <template #title>
              {{ t.decalage_titre }}
@@ -187,6 +188,7 @@ et de la programmation jeune public"
            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
              ? "jaune"
              : "dark",
+      lien_cta: tiroir_item.decalage_parametres?.lien_cta || "",
      tiroir_description: tiroir_item.tiroir_description,
      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
        id: tiroir_item_img.id,
--- a/app/pages/professionnels/parc.vue
+++ b/app/pages/professionnels/parc.vue
@@ -205,7 +205,7 @@
              <form class="space-y-6" @submit.prevent="submitQuoteRequest">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div class="space-y-2">
-                    <label for="quote-request-type" class="block text-sm font-medium text-on-surface">
+                    <label for="quote-request-type" class="block text-sm font-medium text-on-surface pl-[2px]">
                      Type de demande *
                    </label>
                    <select
@@ -220,7 +220,7 @@
                    <p v-if="quoteFormErrors.requestType" class="text-xs text-error">{{ quoteFormErrors.requestType }}</p>
                  </div>
                  <div class="space-y-2">
-                    <label for="quote-name" class="block text-sm font-medium text-on-surface">
+                    <label for="quote-name" class="block text-sm font-medium text-on-surface pl-[2px]">
                      Nom complet *
                    </label>
                    <input
@@ -233,7 +233,7 @@
                    <p v-if="quoteFormErrors.name" class="text-xs text-error">{{ quoteFormErrors.name }}</p>
                  </div>
                  <div class="space-y-2">
-                    <label for="quote-email" class="block text-sm font-medium text-on-surface">
+                    <label for="quote-email" class="block text-sm font-medium text-on-surface pl-[2px]">
                      Email *
                    </label>
                    <input
@@ -246,7 +246,7 @@
                    <p v-if="quoteFormErrors.email" class="text-xs text-error">{{ quoteFormErrors.email }}</p>
                  </div>
                  <div class="space-y-2">
-                    <label for="quote-phone" class="block text-sm font-medium text-on-surface">
+                    <label for="quote-phone" class="block text-sm font-medium text-on-surface pl-[2px]">
                      Téléphone *
                    </label>
                    <input
@@ -259,7 +259,7 @@
                    <p v-if="quoteFormErrors.phone" class="text-xs text-error">{{ quoteFormErrors.phone }}</p>
                  </div>
                  <div class="space-y-2">
-                    <label for="quote-organisation" class="block text-sm font-medium text-on-surface">
+                    <label for="quote-organisation" class="block text-sm font-medium text-on-surface pl-[2px]">
                      Structure / organisme *
                    </label>
                    <input
@@ -273,7 +273,7 @@
                  </div>
                </div>
                <div class="space-y-2">
-                  <label for="quote-message" class="block text-sm font-medium text-on-surface">
+                  <label for="quote-message" class="block text-sm font-medium text-on-surface pl-[2px]">
                    Message *
                  </label>
                  <textarea
@@ -838,7 +838,6 @@
 // =======================
 .parc-page {

-
  .fiche_description {
    display: flex;
    justify-content: center;
@@ -853,7 +852,6 @@
    }
  }

-
    .contact_spe_wp {
      background-color: var(--c-background-jaune-clair);
      margin-top: 50px;