diff --git a/www/aPropos.html b/www/aPropos.html
index 7ef5c5d..3145b90 100644
--- a/www/aPropos.html
+++ b/www/aPropos.html
@@ -26,12 +26,137 @@
 
     <main class="aPropos">
         <p id="message">Coming soon...</p>
-        <div>
-
+        <div class="sidebyside">
             <div>
-                <h1>Contactez l'équipe!</h1>
+                <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
+                <!-- si utilisation de serveur dynamique, changer pour POST -->
+                <form method="get" action="reponse.html">
+                    <fieldset>
+                        <legend>Informations de contact</legend>
+                        <div>
+                            <label for="nomComplet">Votre nom complet :</label>
+                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
+                                placeholder="Prénom Nom">
+                        </div>
+                        <div>
+                            <label for="email">Votre adresse courriel : </label>
+                            <input id="email" name="email" type="email" required
+                                placeholder="(ex. vous@fournisseur.com)" size="30">
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Réponse courte</legend>
+                        <div>
+                            <div class="sidebyside">
+                                <div>
+                                    <label class="formInfo">Reviendriez-vous? :</label>
+
+                                    <div class="selecteurRadio">
+                                        <input id="radOui" name="rad" type="radio" value="5">
+                                        <label for="radOui">Oui</label>
+                                        <input id="radNon" name="rad" type="radio" value="10">
+                                        <label for="radNon">Non</label>
+                                        <input id="radMB" name="rad" type="radio" value="15">
+                                        <label for="radMB">Peut-être</label>
+                                    </div>
+                                </div>
+                                <div>
+                                    <label for="pagePrefs" class="formInfo">Page préféré :</label>
+                                    <div>
+                                        <select name="page" id="pagePrefs">
+                                            <option value="accueil" selected>Page d'accueil</option>
+                                            <option value="aPropos">À Propos</option>
+                                            <option value="reponse" disabled>Réponse</option>
+                                            <option value="histoire">Histoire de DE</option>
+                                            <optgroup label="Univers Sci-fi">
+                                                <option value="sousPageLore1">Arc 1 : Éveil</option>
+                                                <option value="sousPageLore2">Arc 2: Saga de la guerre intérieure
+                                                </option>
+                                                <option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
+                                                <option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
+
+                                            </optgroup>
+                                            <option value="missions">Missions</option>
+                                            <option value="armures">Armures</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <label>Quel personnage voudriez-vous essayer : </label>
+                                <div class="sidebyside">
+                                    <!-- test clickable region -->
+                                    <label class="clickLabel" for="persoOne">
+                                        <input type="checkbox" id="persoOne" name="persoOne" value="1">
+                                        Ember</label>
+
+                                    <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
+                                    <label for="persoTwo">Equinox</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>
+                                </div>
+                            </div>
+                            <div>
+                                <label>Niveau de satisfaction</label>
+                                <input name="niveau" type="range" value="100">
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Votre appreciations</legend>
+                        <!-- TODO : for="niveau" -->
+                        <textarea name="zoneComment" rows="10" cols="80"
+                            placeholder="Quelque chose à ajouter?"></textarea>
+                    </fieldset>
+                    <div class="sidebyside centered">
+                        <button type="submit">Envoyer</button>
+                        <button type="reset">Réinitialiser</button>
+                    </div>
+                </form>
             </div>
-            <!--
+            <div>
+
+                <div>
+                    <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>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>
+                            </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>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--
 
 Contenu minimal de la page de contact de votre site Web :
 • <main> – Le contenu principal de la page
@@ -40,6 +165,11 @@ o Des informations de contact sous forme de :
 ▪ Une carte interactive (Google maps, etc.)
 
 
+475 Rue du Cégep, Sherbrooke, QC J1E 4K1
+https://www.cegepsherbrooke.qc.ca/
++18195646350
+
+
 
 o Un formulaire de type « contactez-nous » :
 ▪ Deux zones de texte monolignes
@@ -54,105 +184,7 @@ pour avoir complété le formulaire (ex : reponse.html). Cette page devra être
 demandées.
 
 -->
-        </div>
-        <div>
-            <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
-            <!-- si utilisation de serveur dynamique, changer pour POST -->
-            <form method="get" action="reponse.html">
-                <fieldset>
-                    <legend>Informations de contact</legend>
-                    <div>
-                        <label for="nomComplet">Votre nom complet :</label>
-                        <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
-                            placeholder="Prénom Nom">
-                    </div>
-                    <div>
-                        <label for="email">Votre adresse courriel : </label>
-                        <input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)"
-                            size="30">
-                    </div>
-                </fieldset>
-                <fieldset>
-                    <legend>Réponse courte</legend>
-                    <div>
-                        <div class="sidebyside">
-                            <div>
-                                <label class="formInfo">Reviendriez-vous? :</label>
-
-                                <div class="selecteurRadio">
-                                    <input id="radOui" name="rad" type="radio" value="5">
-                                    <label for="radOui">Oui</label>
-                                    <input id="radNon" name="rad" type="radio" value="10">
-                                    <label for="radNon">Non</label>
-                                    <input id="radMB" name="rad" type="radio" value="15">
-                                    <label for="radMB">Peut-être</label>
-                                </div>
-                            </div>
-                            <div>
-                                <label for="pagePrefs" class="formInfo">Page préféré :</label>
-                                <div>
-                                    <select name="page" id="pagePrefs">
-                                        <option value="accueil" selected>Page d'accueil</option>
-                                        <option value="aPropos">À Propos</option>
-                                        <option value="reponse" disabled>Réponse</option>
-                                        <option value="histoire">Histoire de DE</option>
-                                        <optgroup label="Univers Sci-fi">
-                                            <option value="sousPageLore1">Arc 1 : Éveil</option>
-                                            <option value="sousPageLore2">Arc 2: Saga de la guerre intérieure</option>
-                                            <option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
-                                            <option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
-
-                                        </optgroup>
-                                        <option value="missions">Missions</option>
-                                        <option value="armures">Armures</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label>Quel personnage voudriez-vous essayer : </label>
-                            <div class="sidebyside">
-                                <!-- test clickable region -->
-                                <label class="clickLabel" for="persoOne" style="background-color: blue;">
-                                    <input type="checkbox" id="persoOne" name="persoOne" value="1">
-                                    Ember</label>
-
-                                <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
-                                <label for="persoTwo">Equinox</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>
-                            </div>
-                        </div>
-                        <div>
-                            <label>Niveau de satisfaction</label>
-                            <input name="niveau" type="range" value="100">
-                        </div>
-                    </div>
-                </fieldset>
-                <fieldset>
-                    <legend>Votre appreciations</legend>
-                    <!-- TODO : for="niveau" -->
-                    <textarea name="zoneComment" rows="10" cols="80" placeholder="Quelque chose à ajouter?"></textarea>
-                </fieldset>
-                <div class="sidebyside centered">
-                    <button type="submit">Envoyer</button>
-                    <button type="reset">Réinitialiser</button>
-                </div>
-            </form>
+            </div>
         </div>
     </main>
 
diff --git a/www/css/style.css b/www/css/style.css
index 187e35f..d3e2dc6 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -117,6 +117,7 @@ footer {
 ::selection {
     /*Source: https://openclassrooms.com/forum/sujet/couleur-surlignage-34526*/
     background-color: #641a10;
+    color: #ffefe5;
 }
 
 /****************************/
@@ -277,10 +278,26 @@ footer {
 
 }
 
+.aPropos .conteneurMaps {
+    max-width: 700px;
+    max-height: 600px;
+    overflow: scroll;
+}
+
+.aPropos .conteneurMaps­>iframe {
+    border: 0;
+
+}
+
 .aPropos .sidebyside>div {
     margin: 5px 20px;
 }
 
+.aPropos .sidebyside>h1 {
+    width: 120%;
+
+}
+
 .aPropos textarea {
     resize: none;
     width: 100%;
@@ -312,49 +329,44 @@ footer {
 /* AUTEUR: Jérémy */
 /****************************/
 .team {
-    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background: #13172c center;
     background-size: cover;
     background-position: top;
     color: #ffefe5;
 }
 
 .team header.introduction {
-    background: #13172c url("../images/imagesTeam/Introduction.png") center/cover fixed;
+    background: #13172c url("../images/imagesTeam/BackgroundHeader.webp") center/cover fixed;
     background-position: top;
     height: 100vh;
     display: block;
     text-align: center;
     align-content: center;
+}
+
+.team header.introduction h1,
+.team header.introduction p {
     line-height: 5;
     font-size: 2rem;
 }
 
+
 .team header.introduction div.introduction {
     background-color: #13172cd5;
     height: 100vh;
 }
 
-.team header.introduction button {
-    color: #ffefe5;
-    padding: 0 16px;
-    margin: 0 4px;
-
-    height: 40px;
-    border: none;
-    border-radius: 20px;
-    background-color: #13172c;
-}
-
-.team header.introduction button a {
-    display: flex;
-    align-items: center;
-    align-content: center;
+.team header.introduction div.introduction a {
+    display: inline-block;
     text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 160px 4px;
+    background-color: #13172c;
+    border-radius: 20px;
 }
 
-
-.team header.introduction button:hover {
-    height: 40px;
+.team header.introduction div.introduction a:hover {
     border-radius: 20px;
     background-color: #b47871;
 }
@@ -363,73 +375,65 @@ footer {
     margin: auto;
 }
 
-.team div.titre {
-    grid-area: titre;
-    text-align: center;
-    font-size: 2rem;
-    padding-top: 66px;
-}
-
-.team div.grilleGauche {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "avatar nom"
-        "avatar description";
-    grid-template-columns: 1fr 5fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.team div.grilleDroite {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "nom avatar"
-        "description avatar";
-    grid-template-columns: 5fr 1fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.team div.avatar {
-    grid-area: avatar;
-    grid-template-columns: 15%;
+.team section article {
     display: flex;
-    justify-content: center;
+    padding: 16px;
+    height: 100vh;
     align-items: center;
 }
 
-.team div.nom {
-    grid-area: nom;
-    grid-template-columns: 85%;
-    text-align: center;
+.team section article.grilleGauche {
+    text-align: left;
 }
 
-.team div.description {
-    grid-area: description;
-    grid-template-columns: 85%;
+.team section article.grilleDroite {
+    text-align: right;
 }
 
-.team div.avatar img {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    /* hauteur = largeur */
-    border-radius: 20%;
+.team section article#lea {
+    background: #13172c url("../images/imagesTeam/BackgroundLea.webp") center/cover fixed;
+}
+
+.team section article#jeremy {
+    background: #13172c url("../images/imagesTeam/BackgroundJeremy.webp") center/cover fixed;
+}
+
+.team section article#andres {
+    background: #13172c url("../images/imagesTeam/BackgroundAndres.webp") center/cover fixed;
+}
+
+.team section article#stanislas {
+    background: #13172c url("../images/imagesTeam/BackgroundStanislas.webp") center/cover fixed;
+}
+
+
+.team section article div.box {
+    background-color: rgba(19, 23, 44, 0.8);
     padding: 16px;
+    margin: 16px;
+    border-radius: 20px;
 }
 
-.team div.grilleDroite:hover,
-.team div.grilleGauche:hover {
-    background-color: rgba(39, 58, 86, 90%);
+.team section article div.box:hover {
+    background-color: rgba(39, 58, 86, 0.9);
+}
+
+.team section article.grilleGauche div.box {
+    margin-right: 50%;
+}
+
+.team section article.grilleDroite div.box {
+    margin-left: 50%;
+}
+
+.team section article h2,
+.team section article h3,
+.team section article p {
+    padding: 8px 0;
+}
+
+.team section article h3 {
+    color: #f1f1f1af;
 }
 
 /****************************/
diff --git a/www/images/imagesTeam/BackgroundAndres.webp b/www/images/imagesTeam/BackgroundAndres.webp
new file mode 100644
index 0000000..f4b2533
Binary files /dev/null and b/www/images/imagesTeam/BackgroundAndres.webp differ
diff --git a/www/images/imagesTeam/BackgroundHeader.webp b/www/images/imagesTeam/BackgroundHeader.webp
new file mode 100644
index 0000000..725f0ed
Binary files /dev/null and b/www/images/imagesTeam/BackgroundHeader.webp differ
diff --git a/www/images/imagesTeam/BackgroundJeremy.webp b/www/images/imagesTeam/BackgroundJeremy.webp
new file mode 100644
index 0000000..eb75f09
Binary files /dev/null and b/www/images/imagesTeam/BackgroundJeremy.webp differ
diff --git a/www/images/imagesTeam/BackgroundLea.webp b/www/images/imagesTeam/BackgroundLea.webp
new file mode 100644
index 0000000..053f143
Binary files /dev/null and b/www/images/imagesTeam/BackgroundLea.webp differ
diff --git a/www/images/imagesTeam/BackgroundStanislas.webp b/www/images/imagesTeam/BackgroundStanislas.webp
new file mode 100644
index 0000000..6d3be4a
Binary files /dev/null and b/www/images/imagesTeam/BackgroundStanislas.webp differ
diff --git a/www/index.html b/www/index.html
index 9158d88..2a58c07 100644
--- a/www/index.html
+++ b/www/index.html
@@ -160,7 +160,7 @@
 						peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un
 						élément
 						clé de la progression.</p>
-					<a href="warframes.html">PLUS D'INFOS</a>
+					<a href="armures.html">PLUS D'INFOS</a>
 				</div>
 			</article>
 		</section>
diff --git a/www/team.html b/www/team.html
index 2a59401..92b2e8a 100644
--- a/www/team.html
+++ b/www/team.html
@@ -29,93 +29,92 @@
             <div class="introduction">
                 <h1>L'équipe</h1>
                 <p>Les ALT-F4 forment une équipe dans le cadre du projet intégrateur.</p>
-                <a href="#goToTitre"><button>Plus d'infos</button></a>
+                <a href="#lea">Plus d'infos</a>
             </div>
         </header>
 
-        <div class="titre" id="goToTitre">
-            <h2>Nos membres</h2>
-        </div>
+        <section>
 
-        <div class="grilleGauche" id="goToLea">
-            <div class="avatar"><img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa Dezothez"></div>
-            <div class="nom">
-                <h3>Léa Dezothez</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
+            <article class="grilleGauche" id="lea">
+                <div class="box">
+                    <h2 class="nom">Léa Dezothez</h3>
+                    <h3 class="role">Directrice artistique</h4>
+                    <div class="description">
+                        <p>
+                            Léa est une personne passionnée par le Gaming, la Lecture et les Chevaux. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’elle apprécie le plus au quotidien, montrant un bel équilibre entre l'univers virtuel, la soif de connaissance et le monde équestre.
+                        </p>
 
-        <div class="grilleDroite" id="goToJeremy">
-            <div class="avatar"><img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy Hébert"></div>
-            <div class="nom">
-                <h3>Jérémy Hébert</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
+                        <p>
+                            Elle a choisi de rejoindre le programme d’informatique parce qu'elle souhaite prendre part à la création d'un jeu vidéo et, à terme, voir son nom dans les crédits. Son rêve ultime est de pouvoir peut-être un jour créer le jeu qui lui tient le plus à cœur. C'est cet objectif créatif et ambitieux qui l'a menée à s'inscrire au programme.
+                        </p>
 
-        <div class="grilleGauche" id="goToAndres">
-            <div class="avatar"><img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres David Herrera Escorcia"></div>
-            <div class="nom">
-                <h3>Andres David Herrera Escorcia</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
+                        <p>
+                            Après l’obtention de son diplôme de TI, Léa aspire principalement à se faire embaucher par une firme de jeux vidéo pour commencer sa carrière. Si ce n'est pas possible immédiatement, son plan de secours est d'aller faire un diplôme à l'université. Son objectif principal est donc de s'intégrer, d’une manière ou d’une autre, dans l’industrie du jeu vidéo.
+                        </p>
+                    </div>
+                </div>
+            </article>
 
-        <div class="grilleDroite" id="goToStanislas">
-            <div class="avatar"><img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas Royal"></div>
-            <div class="nom">
-                <h3>Stanislas Royal</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
+            <article class="grilleDroite" id="jeremy">
+                <div class="box">
+                    <h2 class="nom">Jérémy Hébert</h3>
+                    <h3 class="role">Coordonnateur</h4>
+                    <div class="description">
+                        <p>
+                            Jérémy est une personne passionnée par la Programmation, la Cuisine et la Politique. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien, combinant une aptitude technique, un plaisir créatif et une conscience des enjeux sociaux.
+                        </p>
+
+                        <p>
+                            Il a choisi de rejoindre le programme d’informatique après avoir hésité avec la comptabilité, car il cherchait initialement un domaine faisant appel à la logique (comme les mathématiques). Son choix s'est finalement porté sur l'informatique parce qu'il a toujours apprécié le domaine et qu'il avait une soif d’en apprendre plus sur le sujet..
+                        </p>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Jérémy aspire à deux chemins principaux : soit poursuivre ses études à l'université, soit rejoindre une entreprise dans le domaine. Il est ouvert à des rôles en cybersécurité ou en développement d’application, pourvu que cela n'implique pas de la réseautique, définissant ainsi clairement la portée de ses aspirations professionnelles.
+                        </p>
+                    </div>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="andres">
+                <div class="box">
+                    <h2 class="nom">Andres David Herrera Escorcia</h3>
+                    <h3 class="role">Conseiller</h4>
+                    <div class="description">
+                        <p>
+                            Andres est une personne passionnée par le soccer, les sports et la poésie. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien.
+                        </p>
+
+                        <p>
+                            Il a choisi de rejoindre le programme d’informatique parce qu’il a beaucoup joué à des jeux vidéo au cours de sa vie. Cela l’a amené à penser qu’il pourrait aimer programmer, tout simplement.
+                        </p>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Andres aspire principalement à gagner beaucoup d’argent grâce à l’investissement. Il aimerait aussi développer un jeu de style Pokémon ou un jeu RPG, même s’il n’a pas encore décidé. Dans tous les cas, il souhaite atteindre une liberté financière, soit par la création d’un jeu, soit par ses investissements.
+                        </p>
+                    </div>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="stanislas">
+                <div class="box">
+                    <h2 class="nom">Stanislas Royal</h3>
+                    <h3 class="role">Programmeur</h4>
+                    <div class="description">
+                        <p>
+                            Stanislas est une personne passionnée par l'informatique, la lecture et le respect de la vie privée. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien, notamment l'équilibre entre la technologie et l'éthique.
+                        </p>
+
+                        <p>
+                            Il a choisi de rejoindre le programme d’informatique parce que la cybersécurité l’a beaucoup attiré. C'est ce domaine précis qui l'a mené à s'inscrire au programme. Cela démontre une motivation très ciblée pour une expertise technique et cruciale.
+                        </p>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Stanislas aspire principalement à travailler. Son objectif est donc de passer directement à l'application professionnelle de ses compétences et de contribuer concrètement au marché de l'emploi.
+                        </p>
+                    </div>
+                </div>
+            </article>
+        </section>
     </main>
 
     <footer>