From 4163ffa6cd296f1a21df1ee90b307e2463ed8116 Mon Sep 17 00:00:00 2001
From: Pontoporeia <spam3@happyngreen.fr>
Date: Fri, 3 Mar 2023 12:56:26 +0100
Subject: [PATCH] changement non connue

---
 formulaire.html | 158 ++++++++++++++++++++++++++----------------------
 style.css       |  31 +++++++++-
 2 files changed, 115 insertions(+), 74 deletions(-)

diff --git a/formulaire.html b/formulaire.html
index 48b6e66..57ade12 100644
--- a/formulaire.html
+++ b/formulaire.html
@@ -30,94 +30,106 @@
         <h3>Partager son mémoire</h3>
         <form action=" partager.php" method="get">
 
-            <div class="button">
-                <label>Votre nom/prénom/pseudo</label>
-                <input type="text" name="nom" placeholder="...">
-            </div>
+            <details>
+                <summary>Informations personnelles</summary>
 
-            <div class="button">
-                <label>Année diplômante (2020, 2021, ...)</label>
-                <input type="text" name="année" placeholder="...">
-            </div>
+                <div class="button">
+                    <label>Votre nom/prénom/pseudo</label>
+                    <input type="text" name="nom" placeholder="...">
+                </div>
 
-            <div class="button">
-                <label>Contact : mail, insta, ...</label>
-                <input type="email" name="mail" placeholder="Votre contact">
-            </div>
+                <div class="button">
+                    <label>Année diplômante (2020, 2021, ...)</label>
+                    <input type="text" name="année" placeholder="...">
+                </div>
 
-            <div class="button">
-                <label>Titre du mémoire</label>
-                <input type="titre" name="mémoire" placeholder="...">
-            </div>
+                <div class="button">
+                    <label>Orientation principale</label>
+                    <select name="Orientation">
+                        <option value="typographie">Typographie</option>
+                        <option value="graphisme">Graphisme</option>
+                        <option value="designnumérique">Design Numérique</option>
+                        <option value="Cinéma d'animation">Cinéma d'animation</option>
+                        <option value="Illustration">Illustration</option>
+                        <option value="BD">Bande dessinée</option>
+                        <option value="Photographie">Photographie</option>
+                        <option value="Vidéographie">Vidéographie</option>
+                        <option value="Sculpture">Sculpture</option>
+                        <option value="Peinture">Peinture</option>
+                        <option value="Art numérique">Art numérique</option>
+                        <option value="Vidéographie">Vidéographie</option>
+                        <option value="Photographie">Photographie</option>
+                        <option value="Dessin">Dessin</option>
+                        <option value="Installation performance">Installation performance</option>
+                    </select>
+                </div>
 
-            <div class="button">
-                <label>Tag/mots-clefs sur le mémoire</label>
-                <input type="text" name="tag" placeholder="typographie, photographie, outils libre, post-colonial,..">
-            </div>
+                <div class="button">
+                    <label>Atelier Pratique</label>
+                    <select name="AP">
+                        <option value="DPM">Design et politique du multiple</option>
+                        <option value="APS">Art et pratique situé</option>
+                        <option value="R&E">Récits et expérimentation</option>
+                        <option value="PAOC">Pratique de l'art et outils critiques</option>
+                    </select>
+                </div>
 
-            <div class="button">
-                <label>Promoteur.rice</label>
-                <input type="text" name="nom" placeholder="nom/prénom/pseudo">
-            </div>
+                <div class="button">
+                    <label>Contact : mail, insta, ...</label>
+                    <input type="email" name="mail" placeholder="Votre contact">
+                </div>
+            </details>
 
-            <div class="button">
-                <label>Problématique</label>
-                <input type="text" name="problématique" placeholder="...">
-            </div>
 
-            <div class="button">
-                <label>Résumé en quelque lignes</label>
-                <input type="text" name="résumé" placeholder="...">
-            </div>
+            <details>
+                <summary>Information à propos du mémoire</summary>
+                <div class="button">
+                    <label>Titre du mémoire</label>
+                    <input type="titre" name="mémoire" placeholder="...">
+                </div>
 
-            <div class="button">
-                <label>Orientation principale</label>
-                <select name="Orientation">
-                    <option value="typographie">Typographie</option>
-                    <option value="graphisme">Graphisme</option>
-                    <option value="designnumérique">Design Numérique</option>
-                    <option value="Cinéma d'animation">Cinéma d'animation</option>
-                    <option value="Illustration">Illustration</option>
-                    <option value="BD">Bande dessinée</option>
-                    <option value="Photographie">Photographie</option>
-                    <option value="Vidéographie">Vidéographie</option>
-                    <option value="Sculpture">Sculpture</option>
-                    <option value="Peinture">Peinture</option>
-                    <option value="Art numérique">Art numérique</option>
-                    <option value="Vidéographie">Vidéographie</option>
-                    <option value="Photographie">Photographie</option>
-                    <option value="Dessin">Dessin</option>
-                    <option value="Installation performance">Installation performance</option>
-                </select>
-            </div>
+                <div class="button">
+                    <label>Tag/mots-clefs sur le mémoire</label>
+                    <input type="text" name="tag"
+                        placeholder="typographie, photographie, outils libre, post-colonial,..">
+                </div>
 
-            <div class="button">
-                <label>Atelier Pratique</label>
-                <select name="AP">
-                    <option value="DPM">Design et politique du multiple</option>
-                    <option value="APS">Art et pratique situé</option>
-                    <option value="R&E">Récits et expérimentation</option>
-                    <option value="PAOC">Pratique de l'art et outils critiques</option>
-                </select>
-            </div>
+                <div class="button">
+                    <label>Problématique</label>
+                    <input type="text" name="problématique" placeholder="...">
+                </div>
 
-            <div class="button">
-                <label>Formats de fichiers de mémoire</label>
-                <input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
-            </div>
+                <div class="button">
+                    <label>Résumé en quelque lignes</label>
+                    <input type="text" name="résumé" placeholder="...">
+                </div>
+            </details>
 
-            <div class="button">
-                <label>Importer les divers fichers de son mémoire</label>
-                <input type="text" name="upload" placeholder="upload ">
-            </div>
+            <details>
+                <summary>Information équipe autour du mémoire</summary>
+                <div class="button">
+                    <label>Promoteur.rice</label>
+                    <input type="text" name="nom" placeholder="nom/prénom/pseudo">
+                </div>
+            </details>
 
-            <div id="enter"class="button">
+            <details>
+                <summary>Upload de fichier</summary>
+                <div class="button">
+                    <label>Formats de fichiers de mémoire</label>
+                    <input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
+                </div>
+
+                <div class="button">
+                    <label>Importer les divers fichers de son mémoire</label>
+                    <input type="text" name="upload" placeholder="upload ">
+                </div>
+            </details>
+
+            <div id="enter" class="button">
                 <input type="submit" name="go" value="envoyer">
             </div>
 
-
-
-
         </form>
     </div>
 </body>
diff --git a/style.css b/style.css
index 8cea227..372f9eb 100644
--- a/style.css
+++ b/style.css
@@ -49,6 +49,8 @@
     text-decoration: none;
     outline: none;
     font-size: 2rem;
+    box-shadow: 2px 4px 8px 6px rgba(218, 109, 109, 0.2), 0 6px 20px 0 rgba(216, 24, 24, 0.19);
+
   }
 
   header a {
@@ -329,4 +331,31 @@
   .memoire img {
     max-width: 40%;
     margin: 0.5rem;
-  }
\ No newline at end of file
+  }
+
+  #page_content h1,h2,h3,h4,h5{
+    font-family: police1;
+  }
+
+  #page_content {
+    font-family: sans-serif;
+  }
+
+  /* form h1,h2,h3,h4,h5{
+    font-family: sans-serif;
+  } */
+
+  details{
+   padding: 1rem;
+    margin: 0.5rem;
+    border-radius: 16px;
+    box-shadow: 2px 4px 8px 2px rgba(218, 109, 109, 0.2), 0 6px 20px 0 rgba(216, 24, 24, 0.19);
+  }
+
+  details input {
+    width: auto;
+  }
+
+  details summary::-webkit-details-marker {
+  display:none;
+}