reparer missions

.cspell/custom-dictionary.txt

@@ -1,12 +1,23 @@
 #CustomDictionaryWords
-Orbis
-Grineers
+archwing
+deimos
 Dezothez
-Warframe
-warframe
-Warframes
-warframes
+duviri
+entete
+Equipe
+Escorcia
+Grineers
+Hébert
+Koumei
 natah
 Natah
-Hébert
-Escorcia
+Orbis
+reponse
+Sevagoth
+soustitre
+vors
+Voruna
+warframe
+Warframe
+warframes
+Warframes

.gitattributes

@@ -2,4 +2,5 @@
 *.webm filter=lfs diff=lfs merge=lfs -text
 *.avi filter=lfs diff=lfs merge=lfs -text
 *.flv filter=lfs diff=lfs merge=lfs -text
-*.mpg filter=lfs diff=lfs merge=lfs -text
+*.mpg filter=lfs diff=lfs merge=lfs -text
+*.mkv filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -57,8 +57,8 @@
 .nfs*
 
 # ---> NotepadPP
-# Notepad++ backups #
-*.bak
+# Notepad++ backups #
+*.bak
 
 # ---> PuTTY
 # Private key
@@ -506,3 +506,35 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+www/medias/mediasCredits/warframeDuviriRide.mp4
+www/medias/mediasHistoireDE/warframeRailjackRide.mp4
+www/multimedia/mediasCredits/warframeDuviriRide.mp4
+www/multimedia/mediasHistoireDE/warframeRailjackRide.mp4
+COMPRESS/warframeRailjackRide.mp4
+COMPRESS/Ember.mp4
+COMPRESS/Equinox.mp4
+COMPRESS/Frost.mp4
+COMPRESS/Koumei.mp4
+COMPRESS/Rhino.mp4
+COMPRESS/Sevagoth.mp4
+COMPRESS/Voruna.mp4
+COMPRESS/warframeDuviriRide.mp4
+www/multimediaHQ/we_All_Lift_Together_mPTCq3LiZSE.mp3
+www/multimediaHQ/mediasAndres/Ember.mp4
+www/multimediaHQ/mediasAndres/EmberVid.webm
+www/multimediaHQ/mediasAndres/Equinox.mp4
+www/multimediaHQ/mediasAndres/equinox.webm
+www/multimediaHQ/mediasAndres/Frost.mp4
+www/multimediaHQ/mediasAndres/FrostVid.webm
+www/multimediaHQ/mediasAndres/Koumei.mp4
+www/multimediaHQ/mediasAndres/KoumeiVid.webm
+www/multimediaHQ/mediasAndres/nokko.webm
+www/multimediaHQ/mediasAndres/Rhino.mp4
+www/multimediaHQ/mediasAndres/RhinoVid.webm
+www/multimediaHQ/mediasAndres/Sevagoth.mp4
+www/multimediaHQ/mediasAndres/SevagothVid.webm
+www/multimediaHQ/mediasAndres/Voruna.mp4
+www/multimediaHQ/mediasAndres/VorunaVid.webm
+www/multimediaHQ/mediasCredits/warframeDuviriRide.mp4
+www/multimediaHQ/mediasHistoireDE/warframeRailjackRide.mp4
+www/multimediaHQ/mediasLea/warframeIntro.mp4

.vscode/extensions.json

@@ -25,6 +25,8 @@
         "nhoizey.gremlins",
         "s2junn.image-essentials",
         "shardulm94.trailing-spaces",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "wassim-k.rename-replace-extension",
+        "karenpommeroy.batch-rename"
     ]
 }

README.md

@@ -6,7 +6,7 @@
 
 - [x] Planification du travail connecté - Par Stan
 - [x] Coder le menu de navigation commun a toutes les pages - Jeremy
-- [ ] Coder le pied de page commun a toutes les pages - Jeremy
+- [x] Coder le pied de page commun a toutes les pages - Jeremy
 - [x] Création d’un favicon.ico pour le site - Jeremy
 - [ ] Glitch images LOGO - Stanislas
 - [ ] Formulaires dans aPropos.html - Stanislas
@@ -17,8 +17,8 @@
 
   - [ ] Rédaction du texte pour la page « Accueil » - Léa
   - [ ] Rédaction du texte pour la page « à Propos » **ET FORMULAIRE** - Stanislas
-  - [ ] Rédaction du texte pour la page « L’équipe » - Jérémy et Andres>
-  - [ ] Rédaction du texte pour la page « Histoire de DE » - Jérémy
+  - [x] Rédaction du texte pour la page « L’équipe » - Jérémy
+  - [x] Rédaction du texte pour la page « Histoire de DE » - Jérémy
   - [ ] Rédaction du texte pour la page « Univers Sci-fi » - // Avancement de 70% Léa
   - [ ] Rédaction du texte pour la page « Missions » - Stanislas
   - [ ] Rédaction du texte pour la page « Armures » - Andres
@@ -27,13 +27,66 @@
   - [ ] Andres
   - [ ] Lea
   - [ ] Stan
-  - [ ] Jeremy
+  - [x] Jeremy
+  - [ ]
 
+ <header> – Un entête incluant :
+▪ Un logo conçu par vous
+▪ Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
+▪ Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
+▪ Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
+o <nav> – Un menu de navigation incluant :
+▪ Un bouton pour chaque page du site Web (sous la forme d’une liste <ul>) avec des effets de CSS
+▪ Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un 
+fil d’Ariane.
+o <footer> – Un pied de page incluant le copyright :
+▪ Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
+▪ La date de conception
+o <main> – Le contenu principal de la page
 ---
 
 ## En dernier
 
-- [ ] Tester les sites avec trois navigateurs (Brave, Firefox, Chrome)
+- [ ] Verifier Structure respectent ENONCÉ
+
+  - [x] Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
+  - [ ] balise `<header>`
+    - [x] Logo
+    - [ ] Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
+    - [x] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
+  - [x] balise `<nav>`
+    - [x] Un bouton pour chaque page du site Web (sous la forme d’une liste `<ul>`) avec des effets de CSS
+    - [x] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
+  - [x] balise `<footer>`
+    - [x] copyright
+    - [x] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
+    - [x] La date de conception
+  - [x] balise `<main>`
+    - [ ] class dans balise `<body>`
+  - [x] Inclure les references pour chaques fichier multimedia
+  - [ ] Au moins un lien de téléchargement
+  - [ ] Un tableau
+    - [x] • La dimension du tableau doit être au moins de 4 colonnes et 4 lignes.
+    - [x] • Il doit y avoir de la fusion à l’intérieur du tableau.
+    - [x] • Les bordures doivent être faites par CSS.
+  - [ ] Des listes
+    - [x] • Au moins une liste à puce contenant au moins 3 éléments.
+    - [ ] • Au moins une liste numérotée contenant au moins 3 éléments.
+    - [ ] • Au moins une d’entre elle doit être une liste imbriquée d’au moins 2 éléments supplémentaires.
+  - [ ] Du contenu multimédia
+    - [ ] • Au moins un fichier audio
+    - [x] • Au moins deux fichiers vidéo
+    - [ ] • Au moins de cinq images différentes (excluant les photos des membres de l’équipe, le logo et la
+          bannière)
+  - [x] Aucun texte bidon de type Lorem Ipsum ne sera accepté dans le site Web.
+  - [ ]
+
+  ```md
+  . Vous pouvez les ajouter sur une page différente ou sur chaque page contenant les éléments concernés.
+  ```
+
+- [ ] Tester le site avec trois navigateurs (Brave, Firefox, Chrome)
+- [ ] Tester le site avec Safari (Si possible)
 
 - [ ] 💣💥💥Revérifier les sources pour les images et vidéo (Identifier) 💥💥💣
 
@@ -48,7 +101,7 @@
 
 ### En dernier, si on a le temps
 
-- [ ] Revérifier le footer
+- [x] Revérifier le footer
 
   ```note
 
@@ -63,6 +116,36 @@
 
 - [ ] Autres ...
 
+HTML
+
+```html
+<!-- /**********************************************************************************/
+/* Fichier
+ : page_web.html
+ */
+/* Titre
+ : Exercice de création d'une page Web HTML 5
+ */
+/* Auteur
+ : © Josianne Fortin, Cégep de Sherbrooke
+ */
+/* Date
+ : 2025-08-22
+ */
+/* Description : Ce document réalise une page Web sur les balises et attributs HTML 5 */
+/*************************************************************************************-->
+```
+
+CSS
+
+```css
+/* Fichier : style.css
+Auteur : Alex Tremblay
+Date : 2025-09-15
+Description : CSS principale pour le
+site Comiccon */
+```
+
 ---
 
 ---

www/aPropos.html

@@ -1,40 +1,177 @@
+<!-- /**********************************************************/
+/* Fichier : aPropos.html */
+/* Titre : À propos */
+/* Auteur : © Stanislas Royal, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <title>À propos</title>
     <script src="js/script.js"></script>
 </head>
 
-<body>
+<body class="aProposBG">
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
-            <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="aPropos.html" class="active">À propos</a></li>
+            <li><a href="team.html">L’équipe</a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
-            <li><a href="warframes.html">Warframes</a></li>
+            <li><a href="armures.html">Armures</a></li>
         </ul>
     </nav>
 
     <main class="aPropos">
-        <p id="message">Coming soon...</p>
+        <h1>Contactez l’équipe!</h1>
+        <div class="sidebyside">
+            <section class="commentaire">
+                <!-- 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">
+                    <h2>Commentaire</h2>
+                    <fieldset id="infoContact">
+                        <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ée :</label>
+                                    <div>
+                                        <select name="page" id="pagePrefs">
+                                            <option value="index" selected>Page d'accueil</option>
+                                            <option value="aPropos">À Propos</option>
+                                            <option value="team">L'équipe</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>
+                                            <option value="credits">Crédits</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <label>Quel personnage voudriez-vous essayer : </label>
+                                <div class="sidebyside">
+                                    <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>
+
+                                    <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>
+
+
+                                    <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>
+                                <label>Niveau de satisfaction</label>
+                                <input name="niveau" type="range" value="100">
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Votre appréciation</legend>
+                        <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>
+            </section>
+
+            <section class="coordonnees">
+                <div id="contactInfo">
+                    <div>
+                        <h2>Coordonnées</h2>
+                        <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 class="conteneurMaps">
+                            <iframe id="mapsFrame" title="Maps pour cégep" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
     </main>
 
     <footer>
-        <p>
-            © Stanislas Royal. Tout droits réservés. <br>
-            Novembre 2025 <br>
-            Page créée par Les Alt-F4
-        </p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
+        <p>Page créée par Stanislas Royal.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>
 

www/armures.html

@@ -0,0 +1,415 @@
+<!-- /**********************************************************/
+/* Fichier : armures.html */
+/* Titre : Armures */
+/* Auteur : © Andres David Herrera Escorcia, Cégep de Sherbrooke */
+/*************************************************************-->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="images/f4vicon.ico">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
+    <title>Armures</title>
+</head>
+
+<body>
+    <nav>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
+
+        <ul>
+            <li><a href="aPropos.html">À propos</a></li>
+            <li><a href="team.html">L’équipe</a></li>
+            <li><a href="histoire.html">Histoire de DE</a></li>
+            <li><a href="lore.html">Univers Sci-fi</a></li>
+            <li><a href="missions.html">Missions</a></li>
+            <li><a href="armures.html" class="active">Armures</a></li>
+        </ul>
+    </nav>
+
+    <main class="armures">
+        <header class="video-header">
+            <video id="entete" src="multimedia/mediasAndres/nokko.webm" autoplay muted loop></video>
+            <h1 id="title">Armures</h1>
+
+            <nav class="wf-nav">
+                <ul>
+                    <li><a href="#Ember">Ember</a></li>
+                    <li><a href="#Equinox">Equinox</a></li>
+                    <li><a href="#Frost">Frost</a></li>
+                    <li><a href="#Koumei">Koumei</a></li>
+                    <li><a href="#Sevagoth">Sevagoth</a></li>
+                    <li><a href="#Voruna">Voruna</a></li>
+                    <li><a href="#Autres">Autres</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <section class="descarmure">
+            <div class="armtxt">
+                <h2>Que sont les armures (Warframes)?</h2>
+                <p>Les Warframes sont des armes vivantes, des armures de combat biomécaniques façonnées pour incarner la
+                    volonté des Tennos. Mi-technologie, mi-créature, chacune d’elles canalise l’énergie du Néant pour
+                    déchaîner des pouvoirs dévastateurs et accomplir des prouesses physiques impossibles. Nées des
+                    expérimentations de l’ère Orokin, les Warframes sont le reflet de la discipline, de la personnalité
+                    ou
+                    de l’essence du Tenno qui les contrôle.
+
+                    Plus que de simples armures, elles sont des extensions de l’âme du Tenno : rapides, agiles,
+                    destructrices, ou protectrices. Chaque Warframe possède son propre style de combat, ses capacités
+                    uniques et son histoire profondément liée aux cicatrices du passé. Ensemble, Tenno et Warframe
+                    forment
+                    une symbiose parfaite, forgeant les guerriers les plus redoutables de la galaxie.</p>
+            </div>
+        </section>
+
+        <section id="Ember" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/emberVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Ember</h2>
+                <p>
+                    Des étoiles flamboyantes embrasent nos mondes. Aussi ardente que le soleil, la rage d’Ember consume
+                    ses
+                    ennemis et disperse leurs cendres dans
+                    le vent solaire. Impératrice des flammes élémentaires, embrase la terre de ses feux sauvages.
+                    Maîtrisez
+                    sa fureur ou attisez-la pour déchaîner une
+                    incinération destructrice, laissant des cadavres calcinés et des cendres dériver dans sa mer
+                    écarlate. <a href="https://www.warframe.com/" target="_blank">Site officiel de Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Ember/habEmber.PNG" alt="hh">
+                    </div>
+
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/ember.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Equinox" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/equinox.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Equinox</h2>
+                <p>
+                    Incarnation de forces opposées en une seule entité, Equinox déchaîne sa colère comme l’aube
+                    naissante,
+                    ou marque la fin de la vie comme le crépuscule.
+                    Alternant entre deux formes, elle peut renforcer les Tenno dans la lumière ou leur offrir un répit
+                    réparateur dans l’obscurité. <a href="https://www.warframe.com/" target="_blank">Site officiel de
+                        Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Equinox/equinoxHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/equinox.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Frost" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/frostVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Frost</h2>
+                <p>
+                    Frost est un Warframe lent et lourdement blindé, capable d’utiliser ses compétences offensives et
+                    défensives à son avantage et à celui de
+                    son équipe. Il déchaîne de furieux blizzards qui terrassent et gèlent ses ennemis, tout en offrant
+                    répit
+                    et réconfort à ses alliés. <a href="https://www.warframe.com/" target="_blank">Site officiel de
+                        Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Frost/frostHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/frost.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Koumei" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/koumeiVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Koumei</h2>
+                <p>
+                    Tisse les fils du destin, à la fois couturière, prophétesse et marionnette. Ose miser sur l’avenir
+                    d’Origin, prends des risques,
+                    laisse la chance te guider. Défie le destin, recommence et échappe à sa spirale indemne, comme la
+                    Vierge aux Dés, Koumei.
+                    Protège-toi par des charmes providentiels, puis répands le malheur sur tes ennemis, afin qu’eux
+                    aussi soient suspendus aux ficelles des
+                    Tenno. <a href="https://www.warframe.com/" target="_blank">Site officiel de Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Koumei/koumeiHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/koumei.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Rhino" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/rhinoVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Rhino</h2>
+                <p>Rhino est un Warframe lourdement blindé, doté de la force et de la robustesse de son homonyme
+                    intrépide et impétueux. Privilégiant la
+                    puissance à la vitesse, Rhino est conçu pour jouer le rôle de tank au sein d’une cellule. Capable de
+                    foncer dans la mêlée, d’attirer
+                    les tirs ennemis et de plier le champ de bataille à sa volonté par la seule force brute, il est
+                    capable de tout contrôler. <a href="https://www.warframe.com/" target="_blank">Site officiel de
+                        Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Rhino/rhinoHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/rhino.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Sevagoth" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/sevagothVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Sevagoth</h2>
+                <p>
+                    Perdu dans un voyage à la dérive à travers le Vaste intemporel, le sombre timonier Sevagoth
+                    apprivoise l’inéluctable mortalité au milieu
+                    des tempêtes traîtresses du Néant. Il revient éternellement d’outre-tombe, tandis que son Ombre
+                    éclipse la lumière et moissonne
+                    les âmes damnées pour assouvir sa soif insatiable de ténèbres. <a href="https://www.warframe.com/"
+                        target="_blank">Site officiel de Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/sevagoth.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Voruna" class="perso">
+
+            <video class="bg-video" autoplay muted loop playsinline>
+                <source src="multimedia/mediasAndres/vorunaVid.webm" type="video/webm">
+            </video>
+
+            <div class="bg-overlay"></div>
+
+            <div class="content">
+                <h2>Voruna</h2>
+                <p>
+                    Faites attention au hurlement glacial qui annonce la reprise de la chasse primordiale. La nuit tombe
+                    sur le sanctuaire sacré éclairé par la
+                    lune, où rôdent des bêtes sacrées aux griffes et aux crocs acérés. Écoutez la reine des loups,
+                    Voruna, car c’est ici qu’elle décrète
+                    son festin de minuit. Se délectant d’un carnage sauvage, ses fidèles loups, les silencieux Dynar,
+                    les chaotiques Raksh,
+                    les voraces Lycath et les féroces Ulfrun, ravagent leurs proies une fois lâchées. Sous la lueur
+                    lunaire, sur un sol écarlate,
+                    tremblez devant son sourire monstrueux. <a href="https://www.warframe.com/" target="_blank">Site
+                        officiel de Warframe</a>
+                </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
+                <div class="habilites-row">
+                    <div class="habilites">
+                        <img src="./images/imagesAndres/Voruna/vorunaHab.PNG" alt="hh">
+                    </div>
+                    <div class="habilites-video">
+                        <video src="multimedia/mediasAndres/voruna.mp4" autoplay muted loop playsinline></video>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="Autres" class="infoarm">
+            <div class="titlewar">
+                <h2>Autres Warframes</h2>
+            </div>
+            <div class="tablearm">
+                <table class="wf-table-simple">
+                    <tr>
+                        <th colspan="4">Warframes</th>
+                    </tr>
+
+                    <tr>
+                        <th>Excalibur</th>
+                        <th>Mag</th>
+                        <th>Nokko</th>
+                        <th>Nova</th>
+                    </tr>
+
+                    <tr>
+                        <td>
+                            <img src="./images/imagesAndres/Excalibur.PNG" alt="Excalibur">
+                        </td>
+                        <td>
+                            <img src="./images/imagesAndres/mag.PNG" alt="Mag">
+                        </td>
+                        <td>
+                            <img src="./images/imagesAndres/Nokko.PNG" alt="Nokko">
+                        </td>
+                        <td>
+                            <img src="./images/imagesAndres/Nova.PNG" alt="Nova">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="4">Compétences</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Coupe éphémère</li>
+                                    <li>Flash radial</li>
+                                    <li>Javelot radial</li>
+                                    <li>Épée exaltée</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Abruti</li>
+                                    <li>Magnétiser</li>
+                                    <li>Polariser</li>
+                                    <li>Écraser</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Peste fongique</li>
+                                    <li>Béret lumineux</li>
+                                    <li>Enracinement</li>
+                                    <li>Rebond de Spore</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <ul>
+                                <li>Étoile nulle</li>
+                                <li>Goutte d'antimatière</li>
+                                <li>Trou de ver</li>
+                                <li>Imprégnation moléculaire</li>
+                            </ul>
+                            </li>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </section>
+
+        <section class="wikiwar">
+            <div class="wikiinfo">
+                <h2>⬇️Pour plus d’informations, vous pouvez consulter le wiki de Warframe⬇️</h2>
+                <p>Faite clic sur l’image pour se rendre!</p>
+            </div>
+
+            <div class="accueilwiki">
+                <a target="_blank" href="https://wiki.warframe.com/">
+                    <img src="./images/imagesAndres/accueilWiki.PNG" alt="jdjj">
+                </a>
+            </div>
+
+            <div class="accueilwiki">
+                <a target="_blank" href="https://wiki.warframe.com/w/Warframes">
+                    <img src="./images/imagesAndres/warframeWiki.PNG" alt="fsfsf">
+                </a>
+            </div>
+    </main>
+
+    <footer>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
+        <p>Page créée par Andres David Herrera Escorcia.</p>
+        <a href="credits.html">Crédits</a>
+
+    </footer>
+</body>
+
+</html>

www/credits.html

@@ -0,0 +1,312 @@
+<!-- /**********************************************************/
+/* Fichier : credits.html */
+/* Titre : Crédits */
+/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
+/*************************************************************-->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="images/f4vicon.ico">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
+    <title>Crédits</title>
+</head>
+
+<body>
+    <nav>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
+
+        <ul>
+            <li><a href="aPropos.html">À propos</a></li>
+            <li><a href="team.html">L’équipe</a></li>
+            <li><a href="histoire.html">Histoire de DE</a></li>
+            <li><a href="lore.html">Univers Sci-fi</a></li>
+            <li><a href="missions.html">Missions</a></li>
+            <li><a href="armures.html">Armures</a></li>
+        </ul>
+    </nav>
+
+    <main class="credits">
+        <header class="introduction">
+            <div class="introduction">
+                <h1>Crédits</h1>
+                <p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
+                <a href="#premiereBox">Plus d’infos</a>
+            </div>
+        </header>
+
+        <section>
+            <article id="premiereBox">
+                <div class="box">
+                    <h2>Warframe</h2>
+                    <p class="contenu">
+                        Le site internet de Warframe a été consulté afin d’obtenir des images et vidéos authentiques du
+                        jeu.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.warframe.com/fr/game/about">Voir la
+                            source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Léa Dezothez</h2>
+                    <ul>
+                        <li class="contenu">
+                            Pour connaître le rôle de Léa, rendez-vous sur la page de l’équipe en cliquant sur le
+                            bouton.
+                        </li>
+                        <li class="contenu">
+                            Léa a également fourni la vaste majorité des images.
+                        </li>
+                    </ul>
+                    <div class="bouton"><a href="team.html#lea">Voir la personne</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Jérémy Hébert</h2>
+                    <ul>
+                        <li class="contenu">
+                            Pour connaître le rôle de Jérémy, rendez-vous sur la page de l’équipe en cliquant sur le
+                            bouton.
+                        </li>
+                        <li class="contenu">
+                            Jérémy a également fourni les logos ainsi que l’image se trouvant dans la page de réponse au
+                            formulaire.
+                        </li>
+                    </ul>
+                    <div class="bouton"><a href="team.html#jeremy">Voir la personne</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Andres David Herrera Escorcia</h2>
+                    <p class="contenu">
+                        Pour connaître le rôle de Andres, rendez-vous sur la page de l’équipe en cliquant sur le bouton.
+                    </p>
+                    <div class="bouton"><a href="team.html#andres">Voir la personne</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Stanislas Royal</h2>
+                    <p class="contenu">
+                        Pour connaître le rôle de Stanislas, rendez-vous sur la page de l’équipe en cliquant sur le
+                        bouton.
+                    </p>
+                    <div class="bouton"><a href="team.html#stanislas">Voir la personne</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>discotools.xyz</h2>
+                    <p class="contenu">
+                        Discotools.xyz a permis la création du bouclier présent dans le logo ainsi que le favicon.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://discotools.xyz/fr/icons-editor">Voir la
+                            source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Figma</h2>
+                    <p class="contenu">
+                        Figma a été utilisé dans la conception du logo, du favicon et de l’image de remerciement pour
+                        avoir rempli le formulaire.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.figma.com/fr-fr/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Lyco Canario</h2>
+                    <p class="contenu">
+                        Lyco Canario est derrière la poule utilisée dans l’image de remerciement pour avoir rempli le
+                        formulaire.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://dribbble.com/lycocanario">Voir la source</a>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Visual Studio Code</h2>
+                    <p class="contenu">
+                        Visual Studio Code a été l’outil de développement utilisé pour l’ensemble du projet.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://code.visualstudio.com/">Voir la source</a>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>/noclip</h2>
+                    <p class="contenu">
+                        Le documentaire sur Warframe conçu par /noclip a servi à rédiger la page sur l’histoire de
+                        Digital Extremes.
+                    </p>
+                    <div class="bouton"><a target="_blank"
+                            href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir
+                            la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Jacob Deschamps & Josianne Fortin</h2>
+                    <p class="contenu">
+                        La théorie fournie par le corps professoral a dépanné l’équipe à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank"
+                            href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la
+                            source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gitea</h2>
+                    <p class="contenu">
+                        Les systèmes de Gitea ont permis un travail connecté durant l’ensemble du projet.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://about.gitea.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>ChatGPT</h2>
+                    <p class="contenu">
+                        ChatGPT a permis la rédaction de certains textes du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://chatgpt.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gemini</h2>
+                    <p class="contenu">
+                        Gemini a permis la rédaction de certains textes du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://gemini.google.com/app">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Moqups</h2>
+                    <p class="contenu">
+                        Moqups a permis la création de la maquette, afin de rendre prévisible le style artistique du
+                        site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://moqups.com/fr/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google Maps</h2>
+                    <p class="contenu">
+                        Google Maps a permis l’intégration de la carte géographique sur le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/maps">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>World Wide Web Consortium</h2>
+                    <p class="contenu">
+                        Les valideurs du World Wide Web Consortium ont permis la révision du code de l’ensemble du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://validator.w3.org/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Brave Search</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Brave Search a dépanné a de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://search.brave.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Google a dépanné à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>DuckDuckGo</h2>
+                    <p class="contenu">
+                        Le moteur de recherche DuckDuckGo a dépanné à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://duckduckgo.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>paint.net</h2>
+                    <p class="contenu">
+                        L’outil paint.net a permis l’édition de plusieurs images présentes sur le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.getpaint.net/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google Fonts</h2>
+                    <p class="contenu">
+                        Le site de Google Fonts a permis de trouver une police pour le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://fonts.google.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>PlayWarframe</h2>
+                    <p class="contenu">
+                        La chaine Youtube officielle de Waframe a permis d'obtenir la musique «We All Lift Together».
+                    </p>
+                    <div class="bouton"><a target="_blank" href="multimedia/we_All_Lift_Together_mPTCq3LiZSE.mp3"
+                            download>Télécharger la musique</a></div>
+                </div>
+            </article>
+        </section>
+    </main>
+
+    <footer>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
+        <p>Page créée par Jérémy Hébert.</p>
+        <a href="credits.html">Crédits</a>
+
+    </footer>
+</body>
+
+</html>

www/histoire.html

@@ -1,10 +1,16 @@
+<!-- /**********************************************************/
+/* Fichier : histoire.html */
+/* Titre : Histoire de DE */
+/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
     <title>Histoire de DE</title>
@@ -12,25 +18,170 @@
 
 <body>
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
-            <li><a href="histoire.html">Histoire de DE</a></li>
+            <li><a href="team.html">L’équipe</a></li>
+            <li><a href="histoire.html" class="active">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
-            <li><a href="warframes.html">Warframes</a></li>
+            <li><a href="armures.html">Armures</a></li>
         </ul>
     </nav>
 
     <main class="histoire">
-        <p>Coming soon...</p>
+        <header class="introduction">
+            <div class="introduction">
+                <h1>L’histoire de Digital Extremes</h1>
+                <p>Plonger dans l’histoire fascinante de Digital Extremes.</p>
+                <a href="#contexte">Plus d’infos</a>
+            </div>
+        </header>
+
+        <section>
+
+            <article class="grilleGauche" id="contexte">
+                <div class="box">
+                    <h2 class="titre">La face cachée de Warframe</h2>
+                    <p class="contenuChapitre">
+                        Warframe est aujourd’hui un pilier du jeu en ligne, un univers singulier mêlant science-fiction
+                        organique et combats rapides. Pourtant, derrière son apparence futuriste, son existence même
+                        tient du miracle. Le jeu est né à une époque où Digital Extremes, son studio créateur, était au
+                        bord de l’effondrement après dix années difficiles. L’histoire de Warframe est celle d’un
+                        sauvetage inattendu, d’une idée persistante et d’une équipe déterminée à se réinventer.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="chapitre1">
+                <div class="box">
+                    <h3 class="nomChapitre">Les premiers pas de James Schmalz</h3>
+                    <p class="contenuChapitre">
+                        L’histoire commence avec James Schmalz, un passionné qui crée des jeux par loisir bien avant
+                        d’en faire une profession. Pendant ses études universitaires, il réalise un petit jeu, Legends
+                        of Murder, vendu à un magazine pour un montant modeste, mais révélateur de son potentiel.
+                        Inspiré par des œuvres de science-fiction, il conçoit ensuite Solar Winds, qui attire
+                        l’attention d’Epic MegaGames. Ce premier succès est suivi d’un autre encore plus important, Epic
+                        Pinball, qui lui apporte une notoriété suffisante pour fonder Digital Extremes.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="chapitre2">
+                <div class="box">
+                    <h3 class="nomChapitre">La décennie Unreal Tournament</h3>
+                    <p class="contenuChapitre">
+                        Durant près de dix ans, Digital Extremes collabore étroitement avec Epic Games sur la franchise
+                        Unreal Tournament. Les deux studios travaillent presque comme une seule entité, partageant leurs
+                        équipes et leurs talents. Cette période voit naître certains des jeux multijoueurs les plus
+                        marquants de leur époque. Cependant, lorsque les deux entreprises prennent des chemins
+                        différents, Digital Extremes cherche à établir son propre projet ambitieux.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="chapitre3">
+                <div class="box">
+                    <h3 class="nomChapitre">Le piège du Travail à louer</h3>
+                    <p class="contenuChapitre">
+                        Le studio décide alors de se lancer dans un projet interne, Dark Sector, voulu comme une
+                        nouvelle grande franchise de science-fiction. Au lieu de leur offrir l’indépendance créative, ce
+                        prototype les enferme dans un cycle de travail à la demande pour différents éditeurs. Pariah,
+                        Warpath, l’adaptation PlayStation 3 de Bioshock et une version transformée de Dark Sector sont
+                        produits durant cette période. Le studio survit, mais la créativité s’érode. Pourtant, au cœur
+                        de ces années difficiles, un concept refuse de disparaître : celui d’un monde de science-fiction
+                        sombre, évolutif, formé d’armures vivantes et de technologie organique. C’était la racine de
+                        Warframe.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="chapitre4">
+                <div class="box">
+                    <h3 class="nomChapitre">Neuf mois pour recommencer</h3>
+                    <p class="contenuChapitre">
+                        Lorsque le marché du jeu vidéo se transforme et que les contrats se raréfient, Digital Extremes
+                        se retrouve en situation critique. La décision est prise de ressusciter l’ancienne idée de Dark
+                        Sector et d’en faire un nouveau jeu en ligne. Le studio dispose de neuf mois pour créer un
+                        prototype jouable, concevoir un site fonctionnel, bâtir une infrastructure en ligne complète et
+                        construire les fondations d’un modèle économique. Sans expérience dans le domaine des jeux
+                        persistants, l’équipe se lance dans une course contre la montre. L’objectif est clair : sortir
+                        un jeu minimal, mais fonctionnel, capable de servir de base pour l’avenir.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="chapitre5">
+                <div class="box">
+                    <h3 class="nomChapitre">Les premiers soutiens de la communauté</h3>
+                    <p class="contenuChapitre">
+                        À son lancement, Warframe avance timidement. Digital Extremes propose alors un Pack fondateur
+                        permettant de soutenir le développement du jeu. Les premiers achats surprennent l’équipe et leur
+                        offrent un encouragement vital. En parallèle, le studio réévalue rapidement son modèle
+                        économique. Les premiers systèmes favorisaient trop fortement les joueurs payants, ce qui
+                        menaçait de briser la confiance naissante. En janvier 2013, la décision est prise d’abandonner
+                        ces éléments, marquant la transition vers un modèle plus équitable. L’arrivée du jeu sur Steam
+                        quelques mois plus tard marque un tournant décisif : le public s’élargit brusquement et les
+                        revenus permettent enfin au studio de stabiliser sa situation.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="chapitre6">
+                <div class="box">
+                    <h3 class="nomChapitre">L’évolution continue</h3>
+                    <p class="contenuChapitre">
+                        Une fois l’urgence de la survie passée, Digital Extremes adopte une philosophie simple :
+                        Warframe doit évoluer constamment pour rester attractif. Le studio développe de nouvelles zones,
+                        enrichit le système de mouvement, ajoute régulièrement des Warframes et ouvre la porte aux
+                        créations de la communauté à travers le programme Tennogen. Cette dynamique s’accompagne d’un
+                        dialogue constant avec les joueurs, rendu possible par des diffusions en direct, des événements
+                        communautaires et des mises à jour fréquentes. Les développeurs apprennent à intégrer certaines
+                        pratiques inventées par les joueurs eux-mêmes, transformant des exploits en mécaniques
+                        officielles lorsque celles-ci améliorent le plaisir de jeu.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="chapitre7">
+                <div class="box">
+                    <h3 class="nomChapitre">Un univers bizarre et unique</h3>
+                    <p class="contenuChapitre">
+                        L’une des forces de Warframe réside dans son identité visuelle et narrative. Plutôt que de
+                        s’inspirer des productions hollywoodiennes, les artistes du studio se tournent vers des
+                        influences européennes, notamment le travail de Moebius. Le résultat est un univers étrange,
+                        biomécanique, parfois déroutant, mais toujours distinctif. Chaque élément possède un vocabulaire
+                        propre, des Syandanas aux Kavats en passant par les factions dotées de leurs propres
+                        caractéristiques culturelles. Ce choix esthétique, parfois clivant, est devenu l’une des
+                        signatures essentielles du jeu. Ce qui semblait être une barrière à l’entrée est devenu un
+                        atout, un monde si singulier que ceux qui s’y plongent s’y attachent profondément.
+                    </p>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="chapitre8">
+                <div class="box">
+                    <h3 class="nomChapitre">La transformation en succès durable</h3>
+                    <p class="contenuChapitre">
+                        Avec le temps, Warframe devient un exemple rare de jeu en ligne porté par la passion,
+                        l’adaptabilité et le lien avec sa communauté. Ce qui aurait pu être le dernier espoir d’un
+                        studio en difficulté devient une œuvre en perpétuelle expansion, façonnée par ses créateurs
+                        comme par ses joueurs. L’histoire de Digital Extremes et de Warframe illustre qu’un projet né de
+                        la nécessité peut devenir une référence, à condition d’être animé par une vision forte et la
+                        volonté de toujours se réinventer.
+                    </p>
+                </div>
+            </article>
+        </section>
     </main>
 
     <footer>
-        <p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
+        <p>Page créée par Jérémy Hébert.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>