From c48a22978b1380c2a3284421a8d2edb38cfa3110 Mon Sep 17 00:00:00 2001
From: Jeremy <empty@zkd.ca>
Date: Wed, 3 Dec 2025 22:03:28 -0500
Subject: [PATCH] Update a la apge aPropos pour la mis een forme

---
 www/aPropos.html  | 22 +++++++------
 www/css/style.css | 83 +++++++++++++++++++++++++++++++++++++----------
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/www/aPropos.html b/www/aPropos.html
index 7793577..809f130 100644
--- a/www/aPropos.html
+++ b/www/aPropos.html
@@ -150,21 +150,23 @@
                     <div>
                         <div>
                             <h2>Coordonnées</h2>
-                            <div>
-                                <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 : <a href="tel:+18195646350">+1 (819) 564-6350</a></p>
+                            <div class="grille">
+                                <p id="titreAdresse">Adresse :</p>
+                                <a id="contenuAdresse" 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 id="titreInfo">Pour plus d’information sur les créateurs :</p>
+                                <a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a>
+
+                                <p id="titreTelephone">Téléphone :</p>
+                                <a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
+
+                                <p id="titreCourriel">Courriel :</p>
+                                <a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
                             </div>
                         </div>
 
                         <div>
                             <div>
-                                <p>Courriel :
-                                    <a target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
-                                </p>
                                 <div class="conteneurMaps">
                                     <iframe id="mapsFrame" title="Maps pour cégep"
                                         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"
diff --git a/www/css/style.css b/www/css/style.css
index 5e7c6ae..2631c72 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -304,7 +304,6 @@ footer a:hover {
 /****************************/
 .aProposBG {
     background: url('../images/imageSR/Warframe0006.webp') center/cover fixed;
-    width: 100vw;
     height: 100vh;
 }
 
@@ -352,7 +351,7 @@ footer a:hover {
     width: 70ch;
     margin: auto;
     background-color: #726F9A;
-    border-radius: 15px;
+    border-radius: 20px;
     padding: 1em;
     color: #E6ECF3;
     overflow: none;
@@ -370,29 +369,78 @@ footer a:hover {
 .aPropos #contactInfo {
     background-color: #273A56;
     padding: 1em;
-    border-radius: 15px;
+    border-radius: 20px;
     color: #E6ECF3;
 }
 
-.aPropos a:link {
+.aPropos .grille {
+    display: grid;
+    grid-template-areas:
+        "titreAdresse contenuAdresse"
+        "titreInfo contenuInfo"
+        "titreTelephone contenuTelephone"
+        "titreCourriel contenuCourriel";
+}
+
+.aPropos .grille #titreAdresse {
+    grid-area: titreAdresse;
+    text-align: left;
+}
+
+.aPropos .grille #contenuAdresse {
+    grid-area: contenuAdresse;
+    text-align: right;
+}
+
+.aPropos .grille #titreInfo {
+    grid-area: titreInfo;
+    text-align: left;
+}
+
+.aPropos .grille #contenuInfo {
+    grid-area: contenuInfo;
+    text-align: right;
+}
+
+.aPropos .grille #titreTelephone {
+    grid-area: titreTelephone;
+    text-align: left;
+}
+
+.aPropos .grille #contenuTelephone {
+    grid-area: contenuTelephone;
+    text-align: right;
+}
+
+.aPropos .grille #titreCourriel {
+    grid-area: titreCourriel;
+    text-align: left;
+}
+
+.aPropos .grille #contenuCourriel {
+    grid-area: contenuCourriel;
+    text-align: right;
+}
+
+
+.aPropos .grille #contenuAdresse,
+.aPropos .grille #contenuInfo,
+.aPropos .grille #contenuTelephone,
+.aPropos .grille #contenuCourriel {
     color: #E6ECF3;
     font-weight: 800;
     text-decoration: underline;
-    text-align: right;
-    float: right;
+}
+
+.aPropos .grille #contenuAdresse:hover,
+.aPropos .grille #contenuInfo:hover,
+.aPropos .grille #contenuTelephone:hover,
+.aPropos .grille #contenuCourriel:hover {
+    color: #c19f8a;
 }
 
 .aPropos #mapsFrame {
-    border-radius: 15px;
-}
-
-.aPropos a:visited {
-    color: #c19f8a;
-
-}
-
-.aPropos a:hover {
-    color: #726F9A;
+    border-radius: 20px;
 }
 
 .aPropos .sidebyside label {
@@ -929,10 +977,11 @@ footer a:hover {
     color: #ffefe5;
     text-shadow: 2px 2px 2px #13172c;
 }
+
 .missions audio {
     margin: 2em auto auto auto;
     position: sticky;
-    top:65px;
+    top: 65px;
     left: 40vh;
     width: 70vh;
     text-align: center;