diff --git a/docs/projects/fdf_demo.gif b/docs/projects/fdf_demo.gif
new file mode 100644
index 0000000..62e3f78
Binary files /dev/null and b/docs/projects/fdf_demo.gif differ
diff --git a/docs/projects/fdf_pyramide_2.gif b/docs/projects/fdf_pyramide_2.gif
new file mode 100644
index 0000000..75ba394
Binary files /dev/null and b/docs/projects/fdf_pyramide_2.gif differ
diff --git a/index.html b/index.html
index 6aad56e..ec8835f 100644
--- a/index.html
+++ b/index.html
@@ -136,24 +136,11 @@
 				<a href="https://bitbucket.org/hugogogo" target="_blank" rel="noopener noreferrer" title="link to git repositories on bitbucket"></a>
 			</header>
 
+			<h2>quelques projets réalisés</h2>
+
 			<article>
-				<h2>projets réalisés</h2>
-				<figure class="project" id="ljdp">
-					<figcaption class="project_description">
-						<h3>extension wordpress :</h3><p>extension wordpress affichant les articles du site sur une carte, et permettant d'affiner la selection avec des critères</p>
-						<ul>
-							<li>lien du site : <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to the webpage the running plugin"></a></li>
-							<li>lien du code : <a href="incomming" target="_blank" rel="noopener noreferrer" title="link to the source code of the plugin"></a></li>
-							<li>technologies : wordpress backend, php, javascript, html, css, google maps javascript API, google maps geocoding API, google maps markerclusterer</li>
-						</ul>
-					</figcaption>
-					<iframe
-						src="https://2022.lejourdesprofs.org/hugogogo/"
-						data-flex="center"
-						title="embedded plugin from it's original website"
-						sandbox="allow-scripts allow-popups"
-					></iframe> 
-				</figure>
+				<img src="./docs/projects/fdf_pyramide_2.gif"/>
+				<img src="./docs/projects/fdf_demo.gif"/>
 			</article>
 
 			<div class="mouse"><div class="mouse_2 pre"></div></div>
diff --git a/styles/elements/projects.css b/styles/elements/projects.css
index 2649e37..a6a1ee8 100644
--- a/styles/elements/projects.css
+++ b/styles/elements/projects.css
@@ -1,31 +1,45 @@
 
-#projects header {
-	height: 300px;
-}
-#projects .project {
-	max-width: 900px;
-	display: flex;
-	flex-direction: column;
-}
-#projects article h2 {
-	text-align: center;
-}
-#projects .project_description {
-	padding: 20px 0px;
-}
-#projects #ljdp iframe {
-	height: 550px;
-	border: none;
-	overflow: hidden;
-}
-@media only screen and (min-width: 741px) {
-	#projects #ljdp iframe {
-		height: 660px;
+/*
+
+		<section id="projects" class="section">
+			<div class="mouse"><div class="mouse_3 pre"></div></div>
+
+			<header>
+				<h1 aria-label="projets">
+					<span aria-hidden="true" class="pre"></span>
+				</h1>
+				<a href="https://bitbucket.org/hugogogo" target="_blank" rel="noopener noreferrer" title="link to git repositories on bitbucket"></a>
+			</header>
+
+			<h2>quelques projets réalisés</h2>
+
+			<article>
+				<img src="./docs/projects/fdf_pyramide_2.gif"/>
+				<img src="./docs/projects/fdf_demo.gif"/>
+			</article>
+
+			<div class="mouse"><div class="mouse_2 pre"></div></div>
+			<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
+
+		</section>
+*/
+
+#projects {
+	header {
+		height: 300px;
+	}
+	article {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 20px;
+		img {
+			max-height: 500px;
+			max-width: 500px;
+			margin: 0px auto;
+		}
+	}
+	.mouse {
+		margin-top: 100px;
 	}
 }
-#projects .project_description p {
-	margin: 0px 0px 10px 0px;
-}
-#projects .mouse {
-	margin-top: 100px;
-}