diff --git a/README.md b/README.md
index ec2f637..43c0c3b 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,8 @@ git push origin main
2. cd /var/www/wondif_vue
3.
git pull origin main # récupère le dernier code
-npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
+si besoin
+ npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
npm run build # rebuild Nuxt
pm2 reload ecosystem.config.cjs --only wondif_vue # redémarre le process avec les nouvelles variables d'environnement de ecosystem
diff --git a/app/assets/scss/component/_header_page_simple.scss b/app/assets/scss/component/_header_page_simple.scss
new file mode 100644
index 0000000..94fc9c0
--- /dev/null
+++ b/app/assets/scss/component/_header_page_simple.scss
@@ -0,0 +1,296 @@
+.fiche_header_simple_wp {
+ display: grid;
+ justify-content: center;
+ padding-bottom: 100px;
+
+
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 510px;
+ padding-top: 40px;
+ }
+ @media (min-width: 600px) {
+ grid-template-columns: minmax(10px, 10px) 580px 0px;
+ grid-template-rows: 40px 380px;
+ }
+ @media (min-width: 700px) {
+ grid-template-columns: minmax(10px, 10px) 660px 0px;
+ grid-template-rows: 40px 380px;
+ }
+ @media (min-width: 800px) {
+ grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
+ grid-template-rows: 40px 340px;
+ }
+ @media (min-width: 900px) {
+ grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1000px) {
+ grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1100px) {
+ grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1200px) {
+ grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1300px) {
+ grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1400px) {
+ grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1500px) {
+ grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+ grid-template-rows: 40px 400px;
+ }
+ .fiche_header_wp_gauche {
+
+ @media (min-width: 0px) and (max-width: 600px) {
+ display: none;
+ }
+ @media (min-width: 600px) {
+ grid-column: 1;
+ }
+ }
+ .fiche_header_wp_gauche_carre {
+ @media (min-width: 0px) and (max-width: 600px) {
+ display: none;
+ }
+ @media (min-width: 600px) {
+ grid-column: 1;
+ grid-row: 4;
+ }
+ }
+ .fiche_header_wp_droite {
+ @media (min-width: 0px) and (max-width: 600px) {
+ display: none;
+ }
+ @media (min-width: 600px) {
+ grid-column: 3;
+ }
+ }
+
+ .fiche_header_inner {
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-column: 1;
+ grid-row: 1/3;
+ }
+ @media (min-width: 600px) {
+ grid-column: 2;
+ grid-row: 1/3;
+ }
+ display: grid;
+
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 510px;
+ }
+ @media (min-width: 600px) {
+ width: 575px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 380px;
+ }
+ @media (min-width: 700px) {
+ width: 675px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 380px;
+ }
+ @media (min-width: 800px) {
+ width: 780px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 340px;
+ }
+ @media (min-width: 900px) {
+ width: 860px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1000px) {
+ width: 950px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1100px) {
+ width: 1020px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1200px) {
+ width: 1100px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1300px) {
+ width: 1200px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1400px) {
+ width: 1300px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1500px) {
+ width: 1400px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1600px) {
+ width: 1400px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1700px) {
+ width: 1400px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ @media (min-width: 1800px) {
+ width: 1400px;
+ grid-template-columns: 4fr 0.5fr 3.5fr;
+ grid-template-rows: 40px 400px;
+ }
+ }
+
+ .fiche_header_titres {
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-column: 1;
+ grid-row: 1;
+ padding-bottom: 20px;
+ padding-left: 10px;
+ }
+ @media (min-width: 600px) {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ display: grid;
+ align-content: start;
+ gap: 0.75rem;
+ max-width: 475px;
+
+ h1 {
+ font-size: 55px;
+ @media (min-width: 0px) and (max-width: 600px) {
+ font-size: 25px;
+ }
+ @media (min-width: 600px) {
+ font-size: 25px;
+ }
+ @media (min-width: 700px) {
+ font-size: 30px;
+ }
+ @media (min-width: 800px) {
+ font-size: 30px;
+ }
+ @media (min-width: 900px) {
+ font-size: 40px;
+ }
+ @media (min-width: 1000px) {
+ font-size: 40px;
+ }
+ @media (min-width: 1100px) {
+ font-size: 40px;
+ }
+ @media (min-width: 1200px) {
+ font-size: 50px;
+ }
+ @media (min-width: 1300px) {
+ font-size: 55px;
+ }
+ @media (min-width: 1400px) {
+ font-size: 55px;
+ }
+ @media (min-width: 1500px) {
+ font-size: 55px;
+ }
+ @media (min-width: 1600px) {
+ font-size: 55px;
+ }
+ @media (min-width: 1700px) {
+ font-size: 55px;
+ }
+ @media (min-width: 1800px) {
+ font-size: 55px;
+ }
+ }
+ }
+
+ .fiche_header_img {
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-column: 1 / 4;
+ grid-row: 2 / 3;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ @media (min-width: 600px) {
+ grid-column: 3 / 5;
+ grid-row: 1 / 3;
+ }
+ overflow: hidden;
+ .ds-media {
+ @media (min-width: 600px) {
+ height: 100%;
+ }
+ }
+ }
+
+ .fiche_header_infos {
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-column: 1 / 2;
+ grid-row: 4;
+ margin-top: -30px;
+ }
+ @media (min-width: 600px) {
+ grid-column: 1;
+ grid-row: 4;
+ }
+ display: grid;
+ align-content: center;
+ justify-content: end;
+
+ @media (min-width: 0px) and (max-width: 700px) {
+ gap: 7px;
+ }
+ @media (min-width: 700px) {
+ gap: 20px;
+ }
+
+ text-align: right;
+ .fiche_header_infos_genre {
+ font-weight: 900;
+
+ }
+ }
+ .fiche_header_bandeau {
+ @media (min-width: 0px) and (max-width: 600px) {
+ grid-column: 1 / 3;
+ grid-row: 4;
+ margin-top: -30px;
+ }
+ @media (min-width: 600px) {
+ grid-column: 1 / 4;
+ grid-row: 4;
+ }
+ background-color: var(--c-backgroud-black);
+ }
+
+ .fiche_description > * {
+ max-width: 640px;
+ display: flex;
+ flex-direction: column;
+ }
+ .fiche_description {
+ .page-section--inner {
+ @media (max-width: 599px) {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
+ }
+}
diff --git a/app/assets/scss/main.scss b/app/assets/scss/main.scss
index 12cc1e6..db932dc 100644
--- a/app/assets/scss/main.scss
+++ b/app/assets/scss/main.scss
@@ -16,3 +16,4 @@
@use 'component/_header_layout';
@use 'component/header_nav';
+@use 'component/header_page_simple';
\ No newline at end of file
diff --git a/app/components/ContactSpecifique.vue b/app/components/ContactSpecifique.vue
new file mode 100644
index 0000000..ecac4e3
--- /dev/null
+++ b/app/components/ContactSpecifique.vue
@@ -0,0 +1,88 @@
+
+