diff --git a/fr/actualites.html b/fr/actualites.html
new file mode 100644
index 0000000..8b35637
--- /dev/null
+++ b/fr/actualites.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>kosmopolit - actualités</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/actualites.css" type="text/css" rel="stylesheet">
+	</head>
+	<body>
+		<nav class="sticky">
+			<iframe src="./fr/navbar.html"></iframe>
+		</nav>
+
+		<div class="container_main">
+
+			<aside class="aside_left sticky">
+				<div class="table_box"> <!-- container use to adjust padding -->
+					<h2>sommaire</h2>
+					<a href="./fr/actualites.html#anchor_actualites"><p>actualités</p></a>
+				</div>
+			</aside>
+
+			<main>
+				<div class="page_title">
+					<h1 id="anchor_actualites">actualités</h1>
+				</div>
+				<div class="quote">
+			</main>
+
+			<aside class="aside_right">
+				<div class="relative_box">
+				</div>
+			</aside>
+
+		</div>
+		<footer class="page_footer">
+		</footer>
+	</body>
+</html>
+
+
diff --git a/fr/evenements.html b/fr/evenements.html
deleted file mode 100644
index b804e9a..0000000
--- a/fr/evenements.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" dir="ltr">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>kosmopolit - evenements</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/evenements.css" type="text/css" rel="stylesheet">
-	</head>
-	<body>
-		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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="aside_left sticky">
-				<div class="table_box"> <!-- container use to adjust padding -->
-					<h2>sommaire</h2>
-					<a href="./fr/evenements.html#anchor_evenements"><p>evenements</p></a>
-				</div>
-			</aside>
-
-			<main>
-				<div class="page_title">
-					<h1 id="anchor_evenements">evenements</h1>
-				</div>
-				<div class="quote">
-			</main>
-
-			<aside class="aside_right">
-				<div class="relative_box">
-				</div>
-			</aside>
-
-		</div>
-		<footer class="page_footer">
-		</footer>
-	</body>
-</html>
-
-
diff --git a/fr/kosmopolit.html b/fr/kosmopolit.html
index a7491d1..da9bf4e 100644
--- a/fr/kosmopolit.html
+++ b/fr/kosmopolit.html
@@ -12,31 +12,7 @@
 	</head>
 	<body>
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
 
 		<div class="container_main">
diff --git a/fr/lettres.html b/fr/lettres.html
index 1b3be23..aee41b8 100644
--- a/fr/lettres.html
+++ b/fr/lettres.html
@@ -12,31 +12,7 @@
 	</head>
 	<body>
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
 
 		<div class="container_main">
diff --git a/fr/litterall.html b/fr/litterall.html
index b2fc440..4cb6b13 100644
--- a/fr/litterall.html
+++ b/fr/litterall.html
@@ -12,31 +12,7 @@
 	</head>
 	<body>
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
 		<div class="container_main">
 
diff --git a/fr/litterall/litterall_26.html b/fr/litterall/litterall_26.html
index fc009d1..89fcc0e 100644
--- a/fr/litterall/litterall_26.html
+++ b/fr/litterall/litterall_26.html
@@ -18,32 +18,9 @@
 	<body>
 
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
+
 		<div class="container_main">
 
 			<aside class="aside_left sticky">
diff --git a/fr/litterall/litterall_27.html b/fr/litterall/litterall_27.html
index be8d909..6f446fc 100644
--- a/fr/litterall/litterall_27.html
+++ b/fr/litterall/litterall_27.html
@@ -18,32 +18,9 @@
 	<body>
 
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
+
 		<div class="container_main">
 
 			<aside class="aside_left sticky">
diff --git a/fr/navbar.html b/fr/navbar.html
new file mode 100644
index 0000000..3c23807
--- /dev/null
+++ b/fr/navbar.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<base href="../"/>
+		<link href="./styles/style.css" type="text/css" rel="stylesheet">
+	</head>
+	<body>
+		<div class="navbar">
+			<div class="nav_left">
+				<a id="nav_logo" href="index.html"	target="_parent"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
+				<a href="./fr/kosmopolit.html"		target="_parent"><p>KOSMOPOLIT</p></a>
+				<a href="./fr/litterall.html"		target="_parent"><p>LITTER<i>all</i></p></a>
+				<a href="./fr/lettres.html"			target="_parent"><p>l.e.a</p></a>
+				<a href="./fr/actualites.html"		target="_parent"><p>actualités</p></a>
+			</div>
+			<div class="nav_right">
+				<div class="dropdown">
+					<a class="drop_title drop horizontal" tabindex="0" target="_parent">
+						<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" target="_parent">
+							<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" target="_parent">
+							<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
+							<p>de</p>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/fr/publications/traduire_retraduire.html b/fr/publications/traduire_retraduire.html
index 69cf677..7054a86 100644
--- a/fr/publications/traduire_retraduire.html
+++ b/fr/publications/traduire_retraduire.html
@@ -11,33 +11,11 @@
 		<link href="./styles/traduire_retraduire.css" type="text/css" rel="stylesheet">
 	</head>
 	<body>
+
 		<nav class="sticky">
-			<div class="nav_left">
-				<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/lettres.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>
+			<iframe src="./fr/navbar.html"></iframe>
 		</nav>
+
 		<div class="container_main">
 
 			<aside class="aside_left sticky">
diff --git a/styles/evenements.css b/styles/actualites.css
similarity index 100%
rename from styles/evenements.css
rename to styles/actualites.css
diff --git a/styles/nav.css b/styles/nav.css
index ffb91ef..029d56d 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -1,38 +1,41 @@
 
 /*---------------------------------------------*/
 /*NAVBAR*/
-nav {
-	border-bottom: 1px solid var(--color-lines-4);
+.navbar {
+	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);
 }
-nav * {
+.navbar * {
 	display: flex;
 	flex-direction: row;
 	margin: auto;
 	height: 100%;
 }
 /* nav_left is used for links to pages*/
-nav .nav_left {
+.navbar .nav_left {
 	margin-left: 0px;
 }
-nav .nav_left a {
+.navbar .nav_left a {
 	padding: 0px 20px;
 }
-nav .nav_left #nav_logo {
+.navbar .nav_left #nav_logo {
 	padding-left: 40px;
 	padding-right: 40px;
 }
-nav a p {
+.navbar a p {
 	/*to center vertically the text*/
 	height: auto;
 }
-nav .nav_left img {
+.navbar .nav_left img {
 	height: calc(100% - 4px);
 }
-nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
+.navbar a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
 	background-color: var(--color-back-dark);
 }
 /* nav_right is used for actions such as connection, search or language*/
-nav .nav_right {
+.navbar .nav_right {
 	margin-right: 2px;
 }
 
@@ -50,17 +53,17 @@ nav .nav_right {
 			.drop
 			.drop
 */
-nav .nav_right .dropdown {
+.navbar .nav_right .dropdown {
 	position: relative;
 	height: 100%;
 	flex-direction: column;
 }
-nav .nav_right .dropdown .drop {
+.navbar .nav_right .dropdown .drop {
 	position: relative;
 	padding: 0px 20px;
 	background-color: var(--color-back-base);
 }
-nav .nav_right .dropdown .drop_items {
+.navbar .nav_right .dropdown .drop_items {
 	position: absolute;
 	top: 100%;
 	left: 0px;
@@ -69,23 +72,23 @@ nav .nav_right .dropdown .drop_items {
 	display: none;
 }
 /* horizontal space between flag and name*/
-nav .nav_right .dropdown .drop > * {
+.navbar .nav_right .dropdown .drop > * {
 	margin: auto 3px;
 }
 /*flag size*/
-nav .nav_right .dropdown img.flag {
+.navbar .nav_right .dropdown img.flag {
 	height:  12px;
 }
 /*flag size*/
-nav .nav_right .dropdown .drop p {
+.navbar .nav_right .dropdown .drop p {
 	font-size:  1.6em;
 }
 /*the menu appears when focus on an element inside*/
-nav .nav_right .dropdown:focus-within * {
+.navbar .nav_right .dropdown:focus-within * {
 	display: flex;
 }
 /*a rectangle cover the div when focus, so you can click on it to unfocus*/
-nav .nav_right .dropdown:focus-within:after {
+.navbar .nav_right .dropdown:focus-within:after {
 	content: "";
 	position: absolute;
 	top: 0px;
@@ -94,7 +97,7 @@ nav .nav_right .dropdown:focus-within:after {
 	height: 100%;
 }
 /*the little arrow point down*/
-nav .nav_right .dropdown .drop_title:after {
+.navbar .nav_right .dropdown .drop_title:after {
 	content: "▼"; /* ▲ */
 	content: "v";
 	position: absolute;
@@ -103,7 +106,7 @@ nav .nav_right .dropdown .drop_title:after {
 	transform: translateY(-50%);
 }
 /*the little arrow point up*/
-nav .nav_right .dropdown .drop_title:focus:after {
+.navbar .nav_right .dropdown .drop_title:focus:after {
 	transform: rotate(180deg) translateY(20%);
 }
 
diff --git a/styles/skeleton.css b/styles/skeleton.css
index 675e2a6..6d8b431 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -21,6 +21,10 @@ nav {
 	height: var(--nav-height);
 	background-color: var(--color-back-base);
 	z-index: 10;
+	border-bottom: 1px solid var(--color-lines-4);
+}
+nav iframe {
+	width: 100%;
 }
 .container_main {
 	flex-direction: row;
