diff --git a/docs/kosmopolit/Beitrittserklärung.pdf b/docs/kosmopolit/Beitrittserklärung.pdf
new file mode 100644
index 0000000..68d860f
Binary files /dev/null and b/docs/kosmopolit/Beitrittserklärung.pdf differ
diff --git a/docs/kosmopolit/Formulaire d adhesion.pdf b/docs/kosmopolit/Formulaire d adhesion.pdf
new file mode 100644
index 0000000..2a5fc10
Binary files /dev/null and b/docs/kosmopolit/Formulaire d adhesion.pdf differ
diff --git a/docs/kosmopolit/Membership form.pdf b/docs/kosmopolit/Membership form.pdf
new file mode 100644
index 0000000..911731e
Binary files /dev/null and b/docs/kosmopolit/Membership form.pdf differ
diff --git a/docs/litterall/litterall_10.jpg b/docs/litterall/litterall_10.jpg
new file mode 100644
index 0000000..a44ee86
Binary files /dev/null and b/docs/litterall/litterall_10.jpg differ
diff --git a/docs/litterall/litterall_14.jpg b/docs/litterall/litterall_14.jpg
new file mode 100644
index 0000000..95659c1
Binary files /dev/null and b/docs/litterall/litterall_14.jpg differ
diff --git a/docs/litterall/litterall_15_16.jpg b/docs/litterall/litterall_15_16.jpg
new file mode 100644
index 0000000..76d596d
Binary files /dev/null and b/docs/litterall/litterall_15_16.jpg differ
diff --git a/docs/litterall/litterall_19.jpg b/docs/litterall/litterall_19.jpg
new file mode 100644
index 0000000..3cbeaf4
Binary files /dev/null and b/docs/litterall/litterall_19.jpg differ
diff --git a/docs/litterall/litterall_5.jpg b/docs/litterall/litterall_5.jpg
new file mode 100644
index 0000000..327bf03
Binary files /dev/null and b/docs/litterall/litterall_5.jpg differ
diff --git a/pages/litterall.html b/pages/litterall.html
index 06d14c8..6a5e7d5 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -20,12 +20,25 @@
 				<a href="./pages/evenements.html"><p>evenements</p></a>
 			</div>
 			<div class="nav_right">
-				<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
+				<div class="dropdown vertical">
+					<div class="drop_title horizontal">
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
+						<p>fr</p>
+					</div>
+					<div class="horizontal">
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
+						<p>fr</p>
+					</div>
+					<div class="horizontal">
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
+						<p>fr</p>
+					</div>
+				</div>
 			</div>
 		</nav>
 		<div class="container_main">
 
-			<aside class="page_content sticky">
+			<aside class="aside_left sticky">
 				<div class="table_box"> <!-- container use to adjust padding -->
 					<h2>sommaire</h2>
 					<a href="./pages/litterall.html#anchor_litterall"><p>LITTE<i>rall</i></p></a>
@@ -73,117 +86,33 @@
 					</div>
 				</div>
 	
-				<h2 id="anchor_archives">anciens numeros</h2>
+				<h2 id="anchor_archives">archives</h2>
 				<div class="gallery">
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 26</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 25</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 24</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 23</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 22</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 21</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 20</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<img src="./docs/litterall/litterall_19.jpg" alt="revue litterall 19">
 						<p>litterall numero 19</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 18</p>
+						<img src="./docs/litterall/litterall_15_16.jpg" alt="revue litterall 15 16">
+						<p>litterall numero 15-16</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 17</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 16</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 15</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<img src="./docs/litterall/litterall_14.jpg" alt="revue litterall 14">
 						<p>litterall numero 14</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 13</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 12</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 11</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<img src="./docs/litterall/litterall_10.jpg" alt="revue litterall 10">
 						<p>litterall numero 10</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 09</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 08</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 07</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 06</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 05</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 04</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 03</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 02</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>litterall numero 01</p>
+						<img src="./docs/litterall/litterall_5.jpg" alt="revue litterall 5">
+						<p>litterall numero 5</p>
 					</div>
 				</div>
 				<p class="date right"><i><small>le 01/03/2021</small></i></p>
 			</main>
 
-			<aside class="relative_content">
+			<aside class="aside_right">
 				<div class="relative_box">
 					<h2 class="box_name">autres publications</h2>
 					<a>
diff --git a/styles/aside_left.css b/styles/aside_left.css
index 056e513..fc351c9 100644
--- a/styles/aside_left.css
+++ b/styles/aside_left.css
@@ -2,13 +2,13 @@
 /*---------------------------------------------*/
 /*ASIDE LEFT*/
 /* aside left is for page table of content */
-body aside.page_content {
+body aside.aside_left {
 	top: calc(var(--nav-height) + 1px);
 	height: calc(100vh - var(--nav-height));
 	padding: calc(var(--gap-unit) / 2);
 }
 /* asides elements only have width if they have a child*/
-body aside.page_content .table_box {
+body aside.aside_left .table_box {
 	min-width: var(--aside-left-width);
 	margin: var(--aside-margin) auto var(--aside-margin) var(--aside-margin);
 	padding: var(--gap-unit);
@@ -16,10 +16,10 @@ body aside.page_content .table_box {
 	border-left: 1px solid var(--color-lines-3);
 }
 /*to put space between elements*/
-body aside.page_content .table_box > * {
+body aside.aside_left .table_box > * {
 	margin-bottom: var(--gap-unit);
 }
-body aside.page_content .table_box h2 {
+body aside.aside_left .table_box h2 {
 	color: var(--color-text-1);
 }
 
diff --git a/styles/aside_right.css b/styles/aside_right.css
index b1d2898..44b1a4f 100644
--- a/styles/aside_right.css
+++ b/styles/aside_right.css
@@ -2,23 +2,26 @@
 /*---------------------------------------------*/
 /*ASIDE RIGHT RELATIVES*/
 /* aside right is for links to relatives content*/
-body aside.relative_content {
+aside.aside_right {
 	padding: calc(var(--gap-unit) / 2);
 }
 /* asides elements only have width if they have a child*/
-body aside.relative_content *:first-child {
+aside.aside_right *:first-child {
 	width: var(--aside-right-width);
 }
-body aside.relative_content .relative_box {
+aside.aside_right .relative_box {
 	margin: var(--aside-margin);
 	padding: var(--gap-unit);
 	width: fit-content;
 	border: 1px solid var(--color-lines-2);
 }
-body aside.relative_content .box_name {
+aside.aside_right .box_name {
 	border-bottom: 1px solid var(--color-lines-2);
 	padding-bottom: var(--gap-unit);
 }
-body aside.relative_content .relative_box > * {
+aside.aside_right .relative_box > * {
 	margin-bottom: var(--gap-unit);
 }
+aside.aside_right .relative_box a h2 {
+	color: var(--color-text-2);
+}
diff --git a/styles/main.css b/styles/main.css
index e8be972..7c8a9cb 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -3,6 +3,7 @@
 /*MAIN*/
 body main {
 	padding: calc(var(--gap-unit) / 2);
+	max-width: 600px;
 }
 body main > * {
 	margin: var(--gap-unit) 0px;
diff --git a/styles/nav.css b/styles/nav.css
index c33c5dc..d742810 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -36,7 +36,7 @@ body nav .nav_right {
 	margin-right: 2px;
 }
 body nav .nav_right img.flag {
-	height:  calc(var(--nav-height) / 2);
+	height:  15px;
 }
 
 
diff --git a/styles/skeleton.css b/styles/skeleton.css
index e4db4c2..a6a9455 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -15,30 +15,31 @@ html {
 body {
 	background-color: var(--color-back-base);
 }
-body nav {
+nav {
 	flex-direction: row;
 	/*we have to set the height to use the height % for childs elements*/
 	height: var(--nav-height);
 	background-color: var(--color-back-base);
 	z-index: 10;
 }
-body .container_main {
+.container_main {
 	flex-direction: row;
-	/*the page is designed for a maximum screen*/
-	max-width: var(--max-screen);
 }
-body aside.page_content {
+.container_main > * {
+	margin: 0px auto;
+}
+aside.aside_left {
 	top: calc(var(--nav-height) + 1px);
 	height: calc(100vh - var(--nav-height) - 1px);
 	background-color: var(--color-back-base);
 }
-body main {
+main {
 	background-color: var(--color-back-base);
 }
-body aside.relative_content {
+aside.aside_right {
 	background-color: var(--color-back-base);
 }
-body footer.page_footer {
+footer.page_footer {
 	background-color: var(--color-back-dark);
 }