diff --git a/index.html b/index.html
index 615a09f..23ec77a 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
 	</head>
 	<body>
 		<main class="index">
-			<div class="all_container">
+
+			<div class="all_container _1">
+			<div class="moment_center_wrapper">
 				<div class="logo_txt">
 					<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
 				</div>
@@ -33,6 +35,58 @@
 					<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
 				</div>
 			</div>
+			</div>
+
+			<div class="all_container _2">
+			<div class="moment_center_wrapper">
+				<div class="logo_txt">
+					<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
+				</div>
+				<div class="logo_bubbles">
+					<div class="_ratio">
+						<div class="circle _2"><div class="_ratio"></div></div>
+						<div class="circle _3"><div class="_ratio"></div></div>
+						<div class="circle _1"><div class="_ratio"></div></div>
+						<div class="circle _blend _2"><div class="_ratio"></div></div>
+						<div class="circle _blend _3"><div class="_ratio"></div></div>
+						<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
+						<div class="circle _4"><div class="_ratio"></div></div>
+					</div>
+				</div>
+				<div class="logo_links">
+					<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
+					<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
+					<h3 id="lea"><a href="./fr/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
+					<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
+				</div>
+			</div>
+			</div>
+
+			<div class="all_container _3">
+			<div class="moment_center_wrapper">
+				<div class="logo_txt">
+					<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
+				</div>
+				<div class="logo_bubbles">
+					<div class="_ratio">
+						<div class="circle _2"><div class="_ratio"></div></div>
+						<div class="circle _3"><div class="_ratio"></div></div>
+						<div class="circle _1"><div class="_ratio"></div></div>
+						<div class="circle _blend _2"><div class="_ratio"></div></div>
+						<div class="circle _blend _3"><div class="_ratio"></div></div>
+						<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
+						<div class="circle _4"><div class="_ratio"></div></div>
+					</div>
+				</div>
+				<div class="logo_links">
+					<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
+					<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
+					<h3 id="lea"><a href="./fr/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
+					<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
+				</div>
+			</div>
+			</div>
+
 		</main>
 	</body>
 </html>
diff --git a/styles/index.css b/styles/index.css
index 56292e1..e4a0dcc 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,21 +1,22 @@
 
 /*------------------------------------------*/
 /*ACCUEIL*/
-body {
-	background-color: white;
-}
-main {
+body main {
 	display: flex;
 	flex-direction: column;
 	width: auto;
 	margin: auto;
-	background-color: white;
+	padding: 0px;
 }
 .all_container {
 	width: 550px;
-	margin: 20px auto;
+	margin: 0px auto 100px auto;
+	height: 100vh;
+}
+.moment_center_wrapper {
+	width: 100%;
+	margin: auto;
 }
-
 /*------------------------------------------*/
 .logo_txt {
 	height: auto;
@@ -121,15 +122,21 @@ main {
 	100%	{transform: translate( 0%,  0%);}
 }
 .logo_bubbles .circle {
-	animation-name: position;
-	animation-name: shape;
-	animation-name: size;
 	animation-duration: 4s;
 	animation-delay: 0s;
 	animation-timing-function: linear;
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }
+.all_container._1 .logo_bubbles .circle {
+	animation-name: shape;
+}
+.all_container._2 .logo_bubbles .circle {
+	animation-name: size;
+}
+.all_container._3 .logo_bubbles .circle {
+	animation-name: position;
+}
 .logo_bubbles .circle._1 {
 	animation-delay: -0.8s;
 }
