diff --git a/www/armures.html b/www/armures.html
index f359eca..db9d9bb 100644
--- a/www/armures.html
+++ b/www/armures.html
@@ -48,18 +48,25 @@
                     incinération destructrice, laissant des cadavres calcinés et des cendres dériver dans sa mer
                     écarlate.
                 </p>
-            </div>
-            <div class="habilites">
-                <h3>Habilités</h3>
-                <p>Boule de feu : Lance un projectile enflammé qui embrase les ennemis au contact.</p>
-                <p>Immolation : Protégez Ember avec une armure de flammes dont la combustion s’intensifie avec le temps,
-                    consommant de l’énergie une fois sa
-                    jauge pleine. Relancez le sort pour éteindre les flammes.
-                </p>
-                <p>Explosion de feu : Frappez le sol pour créer une vague de plasma incinérant qui repousse les ennemis
-                    et détruit leur armure.</p>
-                <p>Inferno : Commandez une comète enflammée qui s'écrasera devant des braises, engloutissant les ennemis
-                    dans un feu capable de se propager dans leurs rangs.</p>
+                <div class="habilites">
+                    <h3>Habilités</h3>
+                    <p>Boule de feu : Lance un projectile enflammé qui embrase les ennemis au contact.</p>
+                    <p>Immolation : Protégez Ember avec une armure de flammes dont la combustion s’intensifie avec le
+                        temps,
+                        consommant de l’énergie une fois sa
+                        jauge pleine. Relancez le sort pour éteindre les flammes.
+                    </p>
+                    <p>Explosion de feu : Frappez le sol pour créer une vague de plasma incinérant qui repousse les
+                        ennemis
+                        et détruit leur armure.</p>
+                    <p>Inferno : Commandez une comète enflammée qui s'écrasera devant des braises, engloutissant les
+                        ennemis
+                        dans un feu capable de se propager dans leurs rangs.</p>
+                </div>
+
+                <div class="habilites-video">
+                    <video src="./medias/mediasAndres/Ember.mp4" autoplay muted loop playsinline></video>
+                </div>
             </div>
         </section>
 
diff --git a/www/css/style.css b/www/css/style.css
index 76ea734..ecf74ba 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -12,6 +12,9 @@
     box-sizing: border-box;
 }
 
+
+
+/** SECTION modifier par script  **/
 #updateDate {
     visibility: hidden;
     display: none;
@@ -32,6 +35,13 @@
     color: white;
 }
 
+#pageCouranteNAV {
+    text-shadow: violet 2px;
+    box-shadow: #ffefe5;
+}
+
+/** FIN DE SECTION modifier par script  **/
+
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -104,12 +114,66 @@ footer {
 /****************************/
 .accueil {
     background-color: rgb(138, 43, 226);
+    color: #ffefe5;
 }
 
-.accueil article p {
+.accueil h1 {
+    font-size: 3.5rem;
+}
+
+.accueil p:not(#rencontreEquipe p) {
     margin: auto;
+    padding: 1% 45% 1% 0%;
+}
+
+.accueil section {
+    width: 100%;
+}
+
+.accueil #intro {
+    background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") no-repeat center;
+}
+
+.accueil header {
+    background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") center/cover;
+}
+
+.accueil header div {
+    background-color: #13172cb0;
+    height: 75vh;
+    padding: 5%;
+}
+
+.accueil #rencontreEquipe {
     display: flex;
-    width: 45%;
+    flex-wrap: wrap;
+    background-color: #E6ECF3;
+    color: #606060;
+    height: 85vh;
+}
+
+.accueil #rencontreEquipe div {
+    width: 25%;
+    margin: 0px auto;
+    align-content: center;
+}
+
+.accueil #rencontreEquipe div p {
+    margin: 5px;
+    text-align: center;
+}
+
+.accueil #rencontreEquipe h2 {
+    width: 100%;
+    margin: 25px;
+    text-align: center;
+}
+
+.accueil #rencontreEquipe div img {
+    width: 80%;
+    border-radius: 50%;
+    padding: 15px;
+    margin: 0px 10% 0px 10%;
 }
 
 /****************************/
@@ -420,8 +484,8 @@ footer {
 }
 
 .lore h1,
-h2,
-h3 {
+.lore h2,
+.lore h3 {
     margin: 10px;
 }
 
@@ -635,8 +699,26 @@ blockquote a {
 .armures .perso .content {
     position: relative;
     z-index: 10;
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    align-items: flex-start;
+}
+
+.armures .perso .habilites-video {
+    flex: 1;
+    position: relative;
+    z-index: 20;
+}
+
+.armures .perso .habilites-video video {
+    width: 30%;
+    height: auto;
+    border-radius: 10px;
+    display: block;
 }
 
 .armures .habilites {
-    position: absolute;
+    position: relative;
+    z-index: 15;
 }
\ No newline at end of file
diff --git a/www/images/ImagesLea/warframeEnvironment.jpg b/www/images/ImagesLea/warframeEnvironment.jpg
new file mode 100644
index 0000000..f2e43a3
Binary files /dev/null and b/www/images/ImagesLea/warframeEnvironment.jpg differ
diff --git a/www/index.html b/www/index.html
index 2694459..2e121ef 100644
--- a/www/index.html
+++ b/www/index.html
@@ -10,7 +10,7 @@
 	<title>Les ALT-F4</title>
 </head>
 
-<body>
+<body class="accueil">
 	<nav>
 		<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
 
@@ -24,17 +24,52 @@
 		</ul>
 	</nav>
 
-	<main class="accueil">
+	<main>
+		<header>
+			<div>
+				<h1>WARFRAME : <br> Toute une histoire</h1>
+				<p> Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un guerrier
+					d’élite
+					utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques
+					mêlant
+					tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en
+					constante
+					évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi,
+					Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.</p>
+			</div>
+		</header>
 
-		<article>
-			<h1>Warframe : <br> Toute une histoire</h1>
-			<p> Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un guerrier
-				d’élite
-				utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques mêlant
-				tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en constante
-				évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi,
-				Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.</p>
-		</article>
+		<section>
+			<article id="rencontreEquipe">
+				<h2>Rencontrez l'équipe!</h2>
+
+
+				<div>
+					<img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas">
+					<p>Stanislas Royal</p>
+					<p>Programmeur</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa">
+					<p>Léa Dezothez</p>
+					<p>Directrice Artistique</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy">
+					<p>Jérémy Hébert</p>
+					<p>Coordonateur</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres">
+					<p>Andres David Herrera Escorcia</p>
+					<p>Conseiller</p>
+				</div>
+
+			</article>
+		</section>
 
 		<section>
 			<article>
@@ -50,7 +85,7 @@
 					Extremes continue d’insuffler sa passion pour le développement et le partage, en gardant comme
 					moteur la créativité, l’excellence et l’esprit communautaire.</p> <!--Texte généré avec ChatGPT-->
 
-				<a href="histoire.html"><button>Plus d'infos</button></a>
+				<a href="histoire.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 
@@ -66,7 +101,7 @@
 					du jeu.
 					Pour débloquer plus de quêtes d’histoire, il faut que le joueur progresse sur le système solaire et
 					qu’il débloque des jonctions qui lient les planètes entre elles.</p>
-				<a href="lore.html"><button>Plus d'infos</button></a>
+				<a href="lore.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 		<section>
@@ -81,7 +116,7 @@
 					ou la Capture, misent davantage sur la discrétion et la rapidité. Cette diversité permet d’adopter
 					des approches variées, de s’adapter à différents styles de jeu et de tirer parti des capacités
 					uniques de chaque Warframe.</p>
-				<a href="missions.html"><button>Plus d'infos</button></a>
+				<a href="missions.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 
@@ -98,7 +133,7 @@
 					Grâce aux mods, aux variantes Prime et aux options de personnalisation esthétique, chaque Warframe
 					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"><button>Plus d'infos</button></a>
+				<a href="warframes.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 	</main>
diff --git a/www/js/script.js b/www/js/script.js
index 1169768..231c6da 100644
--- a/www/js/script.js
+++ b/www/js/script.js
@@ -1,3 +1,39 @@
+
+// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+// Performance for my useCase (modify NAV and FOOTER)
+
+document.addEventListener("DOMContentLoaded", 
+    function(e) {
+        console.log("DOMContentLoaded triggered !");
+            // for (document.querySelector("nav")
+    });
+
+
+// javascript console output DOM tree
+// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
+// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+
+var walker = document.createTreeWalker(
+  document.documentElement,
+  NodeFilter.SHOW_ELEMENT // only elements
+);
+
+while (walker.nextNode()) {
+  let current = walker.currentNode;
+  console.log(
+    current.tagName,
+    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
+  );
+}
+
+
+// Needed for image loaded and fetched : Not on local computer.
+/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+document.addEventListener("load", function(e) {
+  console.log("The page has completely loaded.");
+});
+*/
+
 window.onload = function () {
             setTimeout(function () {
 /*                document.getElementById('message').innerHTML =
@@ -11,7 +47,26 @@ window.onload = function () {
                         document.getElementById("updateDate").setAttribute("id", "updateDateW");
                         document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
                     }
-            }, 1000);
+
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
+                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
+                    myNav = document.getElementsByTagName("nav");
+                    console.log(myNav.length());
+
+                    for (var i = 0; i < myNav.children.length(); i++) {
+                        var tableChild = myNav.children[i];
+                        console.log(tableChild.tagName);
+                        // Do stuff
+                    }
+
+/*                    for (const child of myNav.children) {
+                    console.log(child.tagName);
+                    }
+*/
+            }, 2000);
+            // NOTE: Change Current Page based on url in <NAV>
+
+
             // TODO Add timer for glitch
             // NOTE Track mouse mouvement and show after a percentage of ?
             // NOTE une page sur deux, ...