diff --git a/docs/autres/.~lock.Textes trois onglets principaux.odt# b/docs/autres/.~lock.Textes trois onglets principaux.odt#
new file mode 100644
index 0000000..1397ec9
--- /dev/null
+++ b/docs/autres/.~lock.Textes trois onglets principaux.odt#	
@@ -0,0 +1 @@
+,simplonco,simplonco-Latitude-E6320,14.03.2021 14:24,file:///home/simplonco/.config/libreoffice/4;
\ No newline at end of file
diff --git a/docs/autres/Documents sites/.~lock.Onglet LITTERall 26.odt# b/docs/autres/Documents sites/.~lock.Onglet LITTERall 26.odt#
deleted file mode 100644
index 8dd0baa..0000000
--- a/docs/autres/Documents sites/.~lock.Onglet LITTERall 26.odt#	
+++ /dev/null
@@ -1 +0,0 @@
-,simplonco,simplonco-Latitude-E6320,25.02.2021 11:53,file:///home/simplonco/.config/libreoffice/4;
\ No newline at end of file
diff --git a/docs/autres/Documents sites/.~lock.Textes trois onglets principaux.odt# b/docs/autres/Documents sites/.~lock.Textes trois onglets principaux.odt#
deleted file mode 100644
index ab4f080..0000000
--- a/docs/autres/Documents sites/.~lock.Textes trois onglets principaux.odt#	
+++ /dev/null
@@ -1 +0,0 @@
-,simplonco,simplonco-Latitude-E6320,03.03.2021 11:41,file:///home/simplonco/.config/libreoffice/4;
\ No newline at end of file
diff --git a/docs/autres/Documents sites/Textes trois onglets principaux.odt b/docs/autres/Textes trois onglets principaux.odt
similarity index 100%
rename from docs/autres/Documents sites/Textes trois onglets principaux.odt
rename to docs/autres/Textes trois onglets principaux.odt
diff --git a/docs/autres/Documents sites/Onglet KOSMOPOLIT visuel kaléidoscope.png b/docs/kosmopolit/kaleidoscope.png
similarity index 100%
rename from docs/autres/Documents sites/Onglet KOSMOPOLIT visuel kaléidoscope.png
rename to docs/kosmopolit/kaleidoscope.png
diff --git a/docs/autres/Documents sites/Onglet LEA 2021.odt b/docs/lea/Onglet LEA 2021.odt
similarity index 100%
rename from docs/autres/Documents sites/Onglet LEA 2021.odt
rename to docs/lea/Onglet LEA 2021.odt
diff --git a/fr/kosmopolit.html b/fr/kosmopolit.html
index 759b334..e50185a 100644
--- a/fr/kosmopolit.html
+++ b/fr/kosmopolit.html
@@ -1,42 +1,117 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="fr" dir="ltr">
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>kosmopolit</title>
+		<title>kosmopolit - l'association</title>
 		<base href="../"/>
 		<meta name="description" content="description du site web">
 		<meta name="keywords" content="truc, bidule, chouette">
 		<link href="./styles/style.css" type="text/css" rel="stylesheet">
+		<link href="./styles/kosmopolit.css" type="text/css" rel="stylesheet">
 	</head>
 	<body>
 		<nav class="sticky">
 			<div class="nav_left">
-				<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
-				<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
-				<a href="./pages/litterall.html"><p>litterall</p></a>
-				<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
+				<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
+				<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
+				<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
+				<a href="./fr/lettredeeda.html"><p>l.e.a</p></a>
+				<a href="./fr/evenements.html"><p>evenements</p></a>
 			</div>
 			<div class="nav_right">
+				<div class="dropdown">
+					<a class="drop_title drop horizontal" tabindex="0">
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
+						<p>fr</p>
+					</a>
+					<div class="drop_items">
+						<a class="drop horizontal" href="./en/litterall.html">
+							<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
+							<p>en</p>
+						</a>
+						<a class="drop horizontal" href="./de/litterall.html">
+							<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
+							<p>de</p>
+						</a>
+					</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/kosmopolit.html#kosmopolit"><p>kosmopolit</p></a>
+					<a href="./fr/kosmopolit.html#anchor_kosmopolit"><p>kosmopolit</p></a>
+					<a href="./fr/kosmopolit.html#anchor_contact"><p>contacts</p></a>
+					<a href="./fr/kosmopolit.html#anchor_equipe"><p>l'équipe</p></a>
+					<a href="./fr/kosmopolit.html#anchor_credits"><p>crédits</p></a>
 				</div>
 			</aside>
 
 			<main>
 				<div class="page_title">
-					<h1 id="anchor_kosmopolit">KOSMOPOLIT</i></h1>
-					<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
+					<h1 id="anchor_kosmopolit">kosmopolit</h1>
 				</div>
+				<div class="quote">
+					<p>“Une fois j’ai dit à Eratosthène : Le propre de l’esprit est de désirer l’infini ; or une surface plane est plus infinie qu’une sphère, donc la terre devrait être plate. Et je lui demandais avec impatience s’il ne se rendait pas compte que ce serait terrible si on achevait un jour d’explorer la surface de la sphère ?”</p>
+					<div class="quote_credit">
+						<p>Arno Schmidt, <i>Enthymesis</i></p>
+					</div>
+				</div>
+				<br><br>
+				<p>Il y a ce désir pour l’infini des langues et des littératures.</p>
+				<p>Il y a cette limite du corps, de l’esprit, ces barrières réelles et imaginaires.</p>
+				<p>Il y a cet espace à trouver, ce temps à chercher.</p>
+				<p>KOSMOPOLIT propose d’autres manières de lire le monde, grâce à la traduction et à la parole publique d’auteur.e.s.</p>
+				<p>C’est un pari auquel vous êtes invité.e.s.</p>
+				<div class="image full">
+					<img src="./docs/kosmopolit/kaleidoscope.png" alt="kaleidoscope">
+					<p class="right"><small>credit: Jeffrey Trehudic</small></p>
+				</div>
+				<h2 id="anchor_contact">contact :</h2>
+				<p>
+					Pour nous contacter : kosmopolit.contact@protonmail.com
+					<br>
+					Bulletin d'adhésion [lien vers un doc texte]
+				</p>
+				<h2 id="anchor_equipe">L’équipe :</h2>
+				<p>
+					Jean-Philippe Rossignol – directeur artistique
+					<br>
+					Miléna Yung – coordinatrice
+				</p>
+				<p>
+					Françoise Toraille – présidente
+					<br>
+					Joachim Umlauf – vice-président
+					<br>
+					Lucie Lamy – secrétaire
+					<br>
+					Evelyne Maes – trésorière
+					<br>
+					Dominique Petit – membre du conseil d’administration
+				</p>
+				<p>
+					Bernard Banoun – conseiller
+					<br>
+					Francesca Isidori – conseillère
+				</p>
+				<h2 id="anchor_credits">Crédits :</h2>
+				<p>
+					Marie-Charlotte Gain-Hautbois pour le graphisme du logo
+					<br>
+					Hugo Lamy pour le site internet
+				</p>
+				<p class="date right"><i><small>le 01/04/2021</small></i></p>
 			</main>
 
-			<aside class="relative_content">
+			<aside class="aside_right">
+				<div class="relative_box">
+				</div>
 			</aside>
+
 		</div>
 		<footer class="page_footer">
 		</footer>
diff --git a/fr/litterall.html b/fr/litterall.html
index a56104f..76e1eda 100644
--- a/fr/litterall.html
+++ b/fr/litterall.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="fr" dir="ltr">
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>kosmopolit</title>
+		<title>kosmopolit - litterall</title>
 		<base href="../"/>
 		<meta name="description" content="description du site web">
 		<meta name="keywords" content="truc, bidule, chouette">
@@ -111,7 +111,7 @@
 						<p>litterall numero 5</p>
 					</div>
 				</div>
-				<p class="date right"><i><small>le 01/03/2021</small></i></p>
+				<p class="date right"><i><small>le 01/04/2021</small></i></p>
 			</main>
 
 			<aside class="aside_right">
diff --git a/styles/kosmopolit.css b/styles/kosmopolit.css
new file mode 100644
index 0000000..915c558
--- /dev/null
+++ b/styles/kosmopolit.css
@@ -0,0 +1,4 @@
+
+aside.aside_right .relative_box {
+	border-style: none;
+}
diff --git a/styles/main.css b/styles/main.css
index 7c8a9cb..64a02cd 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -13,6 +13,7 @@ body main h1 {
 	border-bottom: 1px solid var(--color-lines-1);
 }
 body main h2 {
+	margin-top: calc(var(--gap-unit) * 2);
 	padding: 10px 0px;
 	border-bottom: 1px solid var(--color-lines-1);
 }
