diff --git a/docs/imp_couv-18p.jpg b/docs/imp_couv-18p.jpg
new file mode 100644
index 0000000..1c289ba
Binary files /dev/null and b/docs/imp_couv-18p.jpg differ
diff --git a/docs/revues/litt17.jpg b/docs/revues/litt17.jpg
new file mode 100644
index 0000000..a0f7c5e
Binary files /dev/null and b/docs/revues/litt17.jpg differ
diff --git a/docs/revues/litt19.jpg b/docs/revues/litt19.jpg
new file mode 100644
index 0000000..40dba0c
Binary files /dev/null and b/docs/revues/litt19.jpg differ
diff --git a/docs/revues/litt20.jpg b/docs/revues/litt20.jpg
new file mode 100644
index 0000000..696557c
Binary files /dev/null and b/docs/revues/litt20.jpg differ
diff --git a/docs/revues/litt21.jpg b/docs/revues/litt21.jpg
new file mode 100644
index 0000000..18e1f2f
Binary files /dev/null and b/docs/revues/litt21.jpg differ
diff --git a/docs/revues/litt22.jpg b/docs/revues/litt22.jpg
new file mode 100644
index 0000000..849e743
Binary files /dev/null and b/docs/revues/litt22.jpg differ
diff --git a/docs/exemple_litterall.jpg b/docs/revues/litt23.jpg
similarity index 100%
rename from docs/exemple_litterall.jpg
rename to docs/revues/litt23.jpg
diff --git a/pages/litterall.html b/pages/litterall.html
index 27a3956..9a406f7 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -15,76 +15,82 @@
 		<style>
 			body {
 				margin: 0px;
-				padding: 20px;
-				width: calc(100% - 40px);
+				padding: 1%;
+				width: calc(98%);
 			}
-			#main, #main * {
-				display: flex;
-				flex-wrap: wrap;
+			.horizontal {
+				flex-direction: raw;
+			}
+			.horizontal > * {
+				margin: 20px auto;
 			}
 			.vertical {
 				flex-direction: column;
 			}
 			.vertical > * {
-				margin: auto;
+				margin: 20px auto;
 			}
 			.img_container {
-				border: 1px solid red;
-
+				flex-grow: 0;
+				justify-content: flex-start;
+				margin-left: -2px;
+			/*
 				display: grid;
-      			grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
+      			grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
 	    	    grid-gap: 16px;
 		        justify-content: center;
 		        padding: initial;
-			/*
-				flex-grow: 0;
-				justify-content: flex-start;
-				margin: 20px;
 			*/
 			}
 			.img_container img {
 				margin: 2px;
+				border: 1px solid grey;
 			}
 		</style>
 	</head>
 	<body>
-		<!-- la barre de navigation -->
-		<nav>
-		</nav>
-
-		<!--  -->
-		<header>
-		</header>
-
-		<!--  -->
-		<aside>
-		</aside>
-
-		<!--  -->
-		<main>
-			<!--  -->
+		<!-- main
+		ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
+		ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
+		-->
+		<main class="vertical">
+			<!-- article
+			-->
 			<article class="vertical">
 				<h1>
 					texte de presentation
 				</h1>
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus. Praesent sit amet augue interdum, laoreet magna sit amet, dignissim eros. Sed nec enim condimentum, condimentum nunc sed, congue elit. Nullam tellus lorem, faucibus vitae eros in, ultricies luctus ligula. Aenean tristique, ante sed dictum faucibus, risus nisl pretium quam, quis consequat ipsum risus a lacus. Integer pulvinar, ex nec lacinia vulputate, est elit dictum risus, sit amet sollicitudin metus turpis nec odio. Morbi orci felis, sollicitudin eu enim id, sollicitudin viverra dolor. Ut vestibulum quis mauris vitae faucibus. Suspendisse ultricies diam est, sit amet tempor est tristique ac. Ut at posuere magna. Fusce ut bibendum elit. Pellentesque vulputate, leo ac bibendum suscipit, quam magna consectetur odio, hendrerit convallis elit eros ac leo. Suspendisse interdum libero id mi molestie sollicitudin. Praesent auctor quis lorem non cursus. Nullam sit amet semper turpis. Maecenas sed hendrerit erat.
-					Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis. 
 				</p>
-				<img class="centre" src="./docs/exemple_litterall.jpg" alt="revue litterall">
+				<p>
+					Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
+				</p>
+				<img class="centre" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240">
 				<div class="img_container">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
-					<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
 				</div>
 			</article>
 		</main>
-
-		<!--  -->
-		<footer>
-		</footer>
 	</body>
 </html>
