diff --git a/www/aPropos.html b/www/aPropos.html
index 00f0066..5dae76c 100644
--- a/www/aPropos.html
+++ b/www/aPropos.html
@@ -26,7 +26,6 @@
     </nav>
 
     <main class="aPropos">
-        <p id="message">Coming soon...</p>
         <div class="sidebyside">
             <div>
                 <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
@@ -86,29 +85,33 @@
                             <div>
                                 <label>Quel personnage voudriez-vous essayer : </label>
                                 <div class="sidebyside">
-                                    <!-- test clickable region -->
+                                    <!-- test clickable region no need for in label when surrounding input ?? -->
                                     <label class="clickLabel" for="persoOne">
                                         <input type="checkbox" id="persoOne" name="persoOne" value="1">
                                         Ember</label>
+                                    <label for="persoTwo">
+                                        <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
+                                        Equinox</label>
 
-                                    <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
-                                    <label for="persoTwo">Equinox</label>
+                                    <label for="persoThree">
+                                        <input type="checkbox" id="persoThree" name="persoThree" value="1">
+                                        Frost</label>
+
+                                    <label for="persoFour">
+                                        <input type="checkbox" id="persoFour" name="persoFour" value="1">
+                                        Koumei</label>
+
+                                    <label for="persoFive">
+                                        <input type="checkbox" id="persoFive" name="persoFive" value="1">
+                                        Rhino</label>
 
 
-                                    <input type="checkbox" id="persoThree" name="persoThree" value="1">
-                                    <label for="persoThree">Frost</label>
-
-
-                                    <input type="checkbox" id="persoFour" name="persoFour" value="1">
-                                    <label for="persoFour">Koumei</label>
-
-
-                                    <input type="checkbox" id="persoFive" name="persoFive" value="1">
-                                    <label for="persoFive">Rhino</label>
-                                    <input type="checkbox" id="persoSix" name="persoSix" value="1">
-                                    <label for="persoSix">Sevagoth</label>
-                                    <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
-                                    <label for="persoSeven">Voruna</label>
+                                    <label for="persoSix">
+                                        <input type="checkbox" id="persoSix" name="persoSix" value="1">
+                                        Sevagoth</label>
+                                    <label for="persoSeven">
+                                        <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
+                                        Voruna</label>
                                 </div>
                             </div>
                             <div>
@@ -131,33 +134,36 @@
             </div>
             <div>
 
-                <div>
+                <div id="contactInfo">
                     <h1>Contactez l'équipe!</h1>
                     <div>
                         <div>
                             <h2>Coordonnées</h2>
                             <div>
-                                <p>Adresse : 475 Rue du Cégep, Sherbrooke, QC J1E 4K1</p>
+                                <p>Adresse : <a target="_blank"
+                                        href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
+                                        475 Rue du Cégep, Sherbrooke, QC J1E 4K1</a></p>
                                 <p>Pour plus d'information sur les créateurs : <a target="_blank"
                                         href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
-                                <p>Téléphone : +18195646350</p>
+                                <p>Téléphone : <a href="tel:+18195646350">+18195646350</a></p>
                             </div>
                         </div>
 
                         <div>
                             <div>
-                                Contact
-                            </div>
-                            <div class="conteneurMaps">
-                                <iframe title="Maps pour cegep"
-                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
-                                    width="600" height="450" allowfullscreen="" loading="lazy"
-                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
+                                <p>Courriel :
+                                    <a target="_blank" href="mailto:empty@zkd.ca">Equipe ALT-F4</a>
+                                </p>
+                                <div class="conteneurMaps">
+                                    <iframe title="Maps pour cegep"
+                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
+                                        width="600" height="450" allowfullscreen="" loading="lazy"
+                                        referrerpolicy="no-referrer-when-downgrade"></iframe>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <!--
+                    <!--
 
 Contenu minimal de la page de contact de votre site Web :
 • <main> – Le contenu principal de la page
@@ -185,6 +191,7 @@ pour avoir complété le formulaire (ex : reponse.html). Cette page devra être
 demandées.
 
 -->
+                </div>
             </div>
         </div>
     </main>
diff --git a/www/css/style.css b/www/css/style.css
index df34c67..9a9232f 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -275,6 +275,8 @@ footer {
 
     /* min-height: calc(100vh - 60px); */
     /* display: block; */
+    align-content: center;
+    text-align: center;
 }
 
 .aPropos .conteneurMaps {
@@ -283,9 +285,10 @@ footer {
     overflow: scroll;
 }
 
-.aPropos .conteneurMaps­>iframe {
+.aPropos .conteneurMaps­ iframe {
     border: 0;
-
+    margin: 10px;
+    display: block;
 }
 
 .aPropos .sidebyside>div {
@@ -302,14 +305,62 @@ footer {
     width: 100%;
 }
 
+.aPropos>main {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+}
 .aPropos form {
     width: 70ch;
     margin: auto;
-    background-color: #273A56;
+    background-color: #726F9A;
     border-radius: 15px;
     padding: 10px;
     color: #E6ECF3;
     overflow: scroll;
+    /*!SECTION COULEUR
+
+    #B47871
+#641A10
+#13172C
+#726F9A
+#273A56
+#C19F8A
+Couleur texte : #FFEFE5 
+
+
+*/
+}
+
+.aPropos p {
+    width: 100%;
+}
+.aPropos #contactInfo {
+    background-color: #273A56;
+    padding: 10px;
+    border-radius: 15px;
+    color: #E6ECF3;
+}
+
+.aPropos a:link {
+    color: #E6ECF3;
+    font-weight:800;
+    text-decoration: underline;
+    text-align: right;
+    float: right;
+}
+.aPropos a:visited {
+    color: #c19f8a;
+
+}
+
+.aPropos a:hover {
+    color: #726F9A;
+}
+
+.aPropos .sidebyside label {
+    margin: 10px;
+    padding: 1px;
 }
 
 .aPropos fieldset {