generated from gitea_admin/default
590 lines
24 KiB
Vue
590 lines
24 KiB
Vue
<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-4 md:px-8 lg:px-16 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>
|
||
<option value="95">95 – Val d’Oise</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>
|