Conflit de styles pour les images des pages de Lore résolut

www/css/style.css

@@ -208,7 +208,7 @@ footer {
 }
 
 .lore main {
-    margin: auto;
+    margin: 0px auto;
     width: 85%;
 }
 
@@ -220,8 +220,7 @@ h3 {
 
 .lore article p,
 blockquote {
-    margin: 0px 10px;
-    margin-top: 15px;
+    margin: 10px 10px;
 }
 
 .lore blockquote {
@@ -257,6 +256,11 @@ blockquote {
     width: 90%;
 }
 
+.lore img:not(.specialAlign img) {
+    border-radius: 20px;
+    width: 30%;
+}
+
 .lore article:not(.exception) {
     margin: 15px 0px;
     scroll-margin-top: 110px;
@@ -279,8 +283,14 @@ blockquote a {
     flex-grow: 1;
 }
 
+.lore aside {
+    position: sticky;
+    bottom: 5px;
+    margin-bottom: 5px  ;
+}   
+
 .lore .nextArc {
-    width: 6%;
+    width: 6.5%;
     margin: 5px;
     display: block;
     text-align: center;
@@ -302,29 +312,34 @@ blockquote a {
     color: #ffefe5;
 }
 
-.lore aside {
-    position: sticky;
-    left: 15px;
-    bottom: 15px;
-}   
-
-.lore #awakening img,
-#professor img,
-#onceAwake img,
-#deimos img,
-#warWithin img,
-#secondDream img,
-#duviri img {
+.lore #warWithin img {
     padding: 10px;
-    margin-top: 12%;
+    margin-top: 10%;
+}
+
+.lore .specialAlign {
+    width: 30%;
+    padding: 10px;
+    margin-top: 6%;
     border-radius: 20px;
 }
 
+.lore .specialAlign img {
+    margin: 5px;
+    border-radius: 20px;
+}
+
+.lore #duviri img {
+    margin-top: 15%;
+}
+
 .lore #vorsPrize img,
+#professor img,
+#onceAwake img,
+#deimos img,
 #archwing img {
     padding: 10px;
-    margin-top: 30px;
-    border-radius: 20px;
+    margin-top: 35px;
 }
 
 .lore #voxSolaris img,
@@ -332,23 +347,22 @@ blockquote a {
 #risingTide img,
 #chainsOfHarrow img,
 #newWar img,
-#whispersInTheWalls img  {
-    width: 30%;
-    margin-top: 4.5%;
-    border-radius: 20px;
+#lotusEater img {
+    margin-top: 4%;
 }
 
 .lore #apostasy img {
-    border-radius: 20px;
     margin-top: 3.5%;
 }
 
+.lore #whispersInTheWalls img {
+    margin-top: 15px;
+}
+
 .lore #PreludeToWar img,
 #sacrifice img {
-    width: 30%;
     flex-shrink: 0;
     margin-left: 5px;
-    border-radius: 20px;
 }
 
 /****************************/

www/sousPageLore1.html

@@ -79,11 +79,11 @@
                     grineer.
                 </p>
             </div>
-            <div><img src="images/ImagesLea/awakening.jpg" alt="Les 3 warframes de départ"></div>
+            <img src="images/ImagesLea/awakening.jpg" alt="Les 3 warframes de départ" class="specialAlign">
         </article>
 
         <article id="vorsPrize">
-            <div><img src="images/ImagesLea/vorSPrize.jpg" alt="Image de Vor avec une clé du néant"></div>
+            <img src="images/ImagesLea/vorSPrize.jpg" alt="Image de Vor avec une clé du néant">
             <div>
                 <h2>Le prix de Vor</h2>
 
@@ -127,9 +127,7 @@
                     terminées.
                 </p>
             </div>
-            <div>
-                <img src="images/ImagesLea/theTeacher.jpg" alt="Quete Le professeur">
-            </div>
+            <img src="images/ImagesLea/theTeacher.jpg" alt="Quete Le professeur">
         </article>
 
         <article id="voxSolaris">
@@ -191,13 +189,11 @@
                     tout ses efforts, le Tenno n’arrive pas à éradiquer la présence des infestés sur la carte solaire.
                 </p>
             </div>
-            <div><img src="images/ImagesLea/onceAwake.jpg" alt="Image emblème de la mission Autrefois Éveillés"></div>
+            <img src="images/ImagesLea/onceAwake.jpg" alt="Image emblème de la mission Autrefois Éveillés">
         </article>
 
         <article id="deimos">
-            <div>
-                <img src="images/ImagesLea/cambionDrift.jpg" alt="image du Puy de Cambion">
-            </div>
+            <img src="images/ImagesLea/cambionDrift.jpg" alt="image du Puy de Cambion">
             <div>
                 <h2>Coeur de Deimos</h2>
 

www/sousPageLore2.html

@@ -123,7 +123,7 @@
                     intérieure.
                 </p>
             </div>
-            <div class="adjust">
+            <div class="specialAlign">
                 <img src="images/ImagesLea/secondDream.jpg" alt="Image du réceptacle de l'opérateur">
                 <img src="images/ImagesLea/secondDreamStalker.jpg" alt="Image du Stalker étranglant l'opérateur">
             </div>

www/sousPageLore4.html

@@ -46,6 +46,21 @@
                 </div>
             </div>
         </article>
+
+        <article id="lotusEater">
+            <div class="wrap">
+                <div class="text">
+                    <h2>Les dévoreurs de Lotus</h2>
+                    <blockquote>
+                        <em>« Comme Prélude à la Guerre et le Prologue Apostasie, il s'agit simplement d'un bref aperçu narratif de ce qui va arriver dans Warframe : 1999. Il n'y a pas d'énigmes ni de combats à gérer, alors profitez simplement du voyage ! » </em>
+                        <a href="https://www.warframe.com/fr/guides/quests/the-lotus-eaters">-Site officiel Warframe</a>
+                    </blockquote>
+
+                    <p>La quête commence avec une sonnerie de vieux téléphone, puis le Lotus qui dit qu’elle ne peut pas ignorer l’appel. À sa gauche se trouve l’opérateur et à sa droite est le voyageur. Le joueur doit faire des choix pour les deux, décidant qui se rendra à 1999. Peu importe le choix, le voyageur est celui qui est choisi.</p>
+                </div>
+                <img src="images/ImagesLea/lotusEaters.jpg" alt="Image officielle de la quête Lotus Eaters">
+            </div>
+        </article>
     </main>
     <aside>
         <div class="nextArc"><a href="lore.html">Menu</a></div>