diff --git a/templates/template-portfolio-old.php b/templates/template-portfolio-old.php
new file mode 100644
index 0000000..035e962
--- /dev/null
+++ b/templates/template-portfolio-old.php
@@ -0,0 +1,217 @@
+<?php
+/*
+Template Name: Portfolio
+*/
+get_header();
+?>
+<div class="container">
+	<div class="row">
+		<div class="col-lg-12 accroche">
+			<h1><?php echo get_field('nom_de_la_page'); ?></h1>
+		</div>
+		<div class="offset-lg-8 col-lg-1">
+			<div class="circleTop"></div>
+		</div>
+		<div class="col-12">
+			<div class="button-group">
+				<button class="tout is-checked" data-target="*">tout</button>
+				<button class="web" data-target=".web">web</button>
+				<button class="print" data-target=".print">print</button>
+				<button class="video" data-target=".video">vidéo</button>
+				<button class="motiondesign" data-target=".motiondesign">motion design</button>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="container">
+	<div class="row grid">
+
+
+		<?php
+		$args = array(
+			'post_type' => 'portfolio',
+			'posts_per_page' => -1,
+		);
+		$portfolio_post = new WP_Query($args);
+
+		?>
+
+		<?php if ($portfolio_post->have_posts()) : while ($portfolio_post->have_posts()) : the_post(); ?>
+				<?php echo get_the_title(); ?>
+			<?php endwhile; ?>
+		<?php endif; ?>
+
+
+
+		<!-- MA CUSTOM -->
+		<?php
+		$cat_colors = array(
+			'web' => '#1CC7C7',
+			'print' => '#C14FE3',
+			'motiondesign' => '#21D5F5',
+			'video' => '#21D5F5',
+		);
+		$portfolio_post = get_post(18150);
+		$projectUrl = get_permalink($portfolio_post);
+		$thumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
+		$mobileThumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
+		$projectDescription = get_field('project_description', $portfolio_post);
+
+		$pousseBoule = 'offset-lg-8';
+		$projectType = 'web';
+		$projectTitle = get_the_title($portfolio_post);
+		$clientName = get_field('client_name', $portfolio_post);
+
+		$currentProjectColor = $cat_colors[$projectType];
+
+		$mouse = $categorie === 'video' ? 'Mouseactive' : null;
+		$i = 3;
+		$ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
+		?>
+		<div class="col-12 element-item grid-sizer project-type--<?php echo $projectType; ?> <?php echo $projectType; ?>" data-category="transition">
+			<div class="row">
+
+				<div class="<?php echo $ballOffset; ?> col-lg-1">
+					<div style="background-color: <?php echo $couleur; ?>" class="circleTop"></div>
+				</div>
+				<div class="col-12 <?php
+														if ($categorie === 'video'):
+															echo ("openSlickModal-" . $compteurVideo);
+														endif;
+														if (empty($lienvideo)) {
+															echo ' clickno';
+														}
+														?>">
+					<img class="large <?php echo $mouse; ?>" src="<?php echo $thumbnailUrl ?>" alt="alt">
+					<img class="mobile" src="<?php echo $mobileThumbnailUrl ?>" alt="alt">
+				</div>
+
+				<div style="color: <?php echo $currentProjectColor; ?>" class="col-lg-4 <?php echo $i % 2 == 0 ? '' : 'offset-lg-4' ?> ">
+					<div style="background-color: <?php echo $currentProjectColor ?>" class="barre"></div>
+					<h3><?php echo $projectTitle ?></h3>
+					<p class="client"><?php echo $clientName ?></p>
+				</div>
+				<div class="col-lg-4 contenu">
+					<?php echo $projectDescription ?>
+					<a class="case-button" href="<?php echo $projectUrl ?>">Lire le Case</a>
+				</div>
+
+
+			</div>
+		</div>
+		<?php
+		// check if the repeater field has rows of data
+		$couleur = array(
+			'web' => '#1CC7C7',
+			'print' => '#C14FE3',
+			'motiondesign' => '#21D5F5',
+			'video' => '#21D5F5',
+		);
+		$i = 1;
+		$compteurBoule = 1;
+		$compteurVideo = 1;
+
+		if (have_rows('portfolio_beta')):
+			// loop through the rows of data
+
+			while (have_rows('portfolio_beta')) : the_row();
+				$image = get_sub_field('image_du_projet');
+				$imageMobile = get_sub_field('image_du_projet_mobile');
+				$categorie = get_sub_field('categorie_du_projet');
+				$mouse = 'Mousenonactif';
+				//print_r($categorie);
+				$valeur = $categorie['value'];
+
+				// COMPTEUR BOULE
+				if ($compteurBoule == 1):
+				elseif ($compteurBoule == 2):
+					$pousseBoule = 'offset-lg-4';
+				elseif ($compteurBoule == 3):
+					$pousseBoule = 'offset-lg-8';
+					$compteurBoule = 1;
+				endif;
+				// FIN COMPTEUR BOULE
+
+				// COMPTEUR VIDEO ET MOUSE VIDEO
+				if ($categorie['value'] === 'video'):
+					$mouse = 'Mouseactive';
+				endif;
+				// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
+				// LIEN VIDEO VIDE
+				$lienvideo = get_sub_field('url_de_la_video');
+				// FIN LIEN VIDEO VIDE
+		?>
+				<div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
+					<div class="row">
+
+						<div class="<?php echo $pousseBoule; ?> col-lg-1">
+							<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="circleTop"></div>
+						</div>
+						<div class="col-12 <?php
+																if ($categorie['value'] === 'video'):
+																	echo ("openSlickModal-" . $compteurVideo);
+																endif;
+																if (empty($lienvideo)) {
+																	echo ' clickno';
+																}
+																?>">
+							<img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
+							<img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
+						</div>
+						<?php
+						if ($i % 2 == 0):
+						?>
+							<div style="color: <?php echo $couleur[$valeur]; ?>" class="col-lg-4">
+								<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
+								<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
+								<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
+							</div>
+							<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
+						<?php
+						else:
+						?>
+							<div style="color: <?php echo $couleur[$valeur]; ?>" class="offset-lg-4 col-lg-4">
+								<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
+								<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
+								<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
+							</div>
+							<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
+						<?php
+						endif;
+						?>
+
+					</div>
+				</div>
+				<?php
+
+				if ($categorie['value'] === 'video'):
+				?>
+					<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
+						<div class="slickWindow">
+							<!-- Your popup content -->
+							<iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
+							</iframe>
+							<!-- / Your popup content -->
+						</div>
+					</div>
+		<?php
+					$compteurVideo++;
+				endif;
+
+				$i++;
+				$compteurBoule++;
+			endwhile;
+		else :
+		// no rows found
+		endif;
+		?>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			<div class="circleEnd"></div>
+		</div>
+	</div>
+</div>
+
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/templates/template-portfolio-prod.php b/templates/template-portfolio-prod.php
new file mode 100644
index 0000000..6c4b879
--- /dev/null
+++ b/templates/template-portfolio-prod.php
@@ -0,0 +1,139 @@
+<?php 
+/*
+Template Name: Portfolio
+*/
+get_header();
+?>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12 accroche">
+            <h1><?php echo get_field('nom_de_la_page');?></h1>
+        </div>
+        <!-- <div class="offset-lg-8 col-lg-1"><div class="circleTop"></div></div>
+        <div class="col-12">
+            <div class="button-group">
+                <button class="tout is-checked" data-target="*">tout</button>
+                <button class="web" data-target=".web">web</button>
+                <button class="print" data-target=".print">print</button>
+                <button class="video" data-target=".video">vidéo</button>
+                <button class="motiondesign" data-target=".motiondesign">motion design</button>
+            </div>
+        </div> -->
+    </div>
+</div>
+<div class="container">
+    <div class="row grid">
+    <?php
+        // check if the repeater field has rows of data
+        $couleur = array(
+            'web' => '#1CC7C7' ,
+            'print' => '#C14FE3' ,
+            'motiondesign' => '#21D5F5', 
+            'video' => '#21D5F5',
+        );
+        $i = 1;
+        $compteurBoule = 1;
+        $compteurVideo = 1;
+
+        if( have_rows('portfolio_beta') ):
+            // loop through the rows of data
+
+            while ( have_rows('portfolio_beta') ) : the_row();
+            $image = get_sub_field('image_du_projet');
+            $imageMobile = get_sub_field('image_du_projet_mobile');
+            $categorie = get_sub_field('categorie_du_projet');
+            $mouse = 'Mousenonactif';
+            //print_r($categorie);
+            $valeur = $categorie['value'];
+
+            // COMPTEUR BOULE
+            if($compteurBoule == 1):
+            elseif($compteurBoule == 2):
+                $pousseBoule = 'offset-lg-4';
+            elseif($compteurBoule == 3):
+                $pousseBoule = 'offset-lg-8';
+                $compteurBoule = 1;
+            endif;
+            // FIN COMPTEUR BOULE
+
+            // COMPTEUR VIDEO ET MOUSE VIDEO
+            if($categorie['value']=== 'video'):
+                $mouse = 'Mouseactive';
+            endif;
+            // FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
+            // LIEN VIDEO VIDE
+            $lienvideo = get_sub_field('url_de_la_video');
+            // FIN LIEN VIDEO VIDE
+            ?>
+            <div class="col-12 element-item grid-sizer <?php echo $categorie['value'];?>" data-category="transition">
+                <div class="row">
+
+                    <div class="<?php echo $pousseBoule; ?> col-lg-1"><div style="background-color: <?php echo $couleur[$valeur];?>" class="circleTop"></div></div>
+                    <div class="col-12 <?php 
+                    if($categorie['value']=== 'video'):
+                        echo("openSlickModal-".$compteurVideo);
+                    endif;
+                    if(empty($lienvideo)){
+                        echo ' clickno';
+                    }
+                    ?>">
+                        <img class="large <?php echo $mouse; ?>" src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']?>">
+                        <img class="mobile" src="<?php echo $imageMobile['url'];?>" alt="<?php echo $imageMobile['alt']?>">
+                    </div>
+                    <?php 
+                        if($i % 2 == 0):
+                        ?>
+                        <div style="color: <?php echo $couleur[$valeur];?>" class="col-lg-4">
+                            <div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
+                            <h3><?php echo get_sub_field('nom_du_projet');?></h3>
+                            <p class="client"><?php echo get_sub_field('nom_du_client');?></p>
+                        </div>
+                        <div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
+                        <?php
+                        else:
+                        ?>
+                        <div style="color: <?php echo $couleur[$valeur];?>" class="offset-lg-4 col-lg-4">
+                            <div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
+                            <h3><?php echo get_sub_field('nom_du_projet');?></h3>
+                            <p class="client"><?php echo get_sub_field('nom_du_client');?></p>
+                        </div>
+                        <div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
+                        <?php
+                        endif;
+                    ?>
+                    
+                </div>
+            </div>
+            <?php
+           
+            if($categorie['value']=== 'video'):
+                ?>
+                <div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
+                    <div class="slickWindow">
+                        <!-- Your popup content -->
+                        <iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video');?>" frameborder="0"	allowfullscreen>
+                        </iframe>
+                        <!-- / Your popup content -->
+                    </div>
+                </div>
+                <?php
+                $compteurVideo++;
+            endif;
+
+            $i++;
+            $compteurBoule++;
+            endwhile;
+        else :
+            // no rows found
+        endif;
+        ?>
+    </div>
+    <div class="row">
+    <div class="col-12">
+    <div class="circleEnd"></div>
+    </div>
+    </div>
+</div>
+
+
+<?php get_footer();?>
\ No newline at end of file
diff --git a/templates/template-portfolio.php b/templates/template-portfolio.php
index 19e2642..859aa8a 100644
--- a/templates/template-portfolio.php
+++ b/templates/template-portfolio.php
@@ -1,15 +1,21 @@
-<?php 
+<?php
 /*
 Template Name: Portfolio
 */
 get_header();
+
+$currentPageId = get_the_ID();
+
+
 ?>
 <div class="container">
     <div class="row">
         <div class="col-lg-12 accroche">
-            <h1><?php echo get_field('nom_de_la_page');?></h1>
+            <h1><?php echo get_field('nom_de_la_page'); ?></h1>
+        </div>
+        <div class="offset-lg-8 col-lg-1">
+            <div class="circleTop"></div>
         </div>
-        <div class="offset-lg-8 col-lg-1"><div class="circleTop"></div></div>
         <div class="col-12">
             <div class="button-group">
                 <button class="tout is-checked" data-target="*">tout</button>
@@ -21,119 +27,192 @@ get_header();
         </div>
     </div>
 </div>
-<div class="container">
-    <div class="row grid">
+
+<section class="projects-overview">
+
     <?php
-        // check if the repeater field has rows of data
-        $couleur = array(
-            'web' => '#1CC7C7' ,
-            'print' => '#C14FE3' ,
-            'motiondesign' => '#21D5F5', 
-            'video' => '#21D5F5',
-        );
-        $i = 1;
-        $compteurBoule = 1;
-        $compteurVideo = 1;
-
-        if( have_rows('portfolio_beta') ):
-            // loop through the rows of data
-
-            while ( have_rows('portfolio_beta') ) : the_row();
-            $image = get_sub_field('image_du_projet');
-            $imageMobile = get_sub_field('image_du_projet_mobile');
-            $categorie = get_sub_field('categorie_du_projet');
-            $mouse = 'Mousenonactif';
-            //print_r($categorie);
-            $valeur = $categorie['value'];
-
-            // COMPTEUR BOULE
-            if($compteurBoule == 1):
-            elseif($compteurBoule == 2):
-                $pousseBoule = 'offset-lg-4';
-            elseif($compteurBoule == 3):
-                $pousseBoule = 'offset-lg-8';
-                $compteurBoule = 1;
-            endif;
-            // FIN COMPTEUR BOULE
-
-            // COMPTEUR VIDEO ET MOUSE VIDEO
-            if($categorie['value']=== 'video'):
-                $mouse = 'Mouseactive';
-            endif;
-            // FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
-            // LIEN VIDEO VIDE
-            $lienvideo = get_sub_field('url_de_la_video');
-            // FIN LIEN VIDEO VIDE
-            ?>
-            <div class="col-12 element-item grid-sizer <?php echo $categorie['value'];?>" data-category="transition">
-                <div class="row">
-
-                    <div class="<?php echo $pousseBoule; ?> col-lg-1"><div style="background-color: <?php echo $couleur[$valeur];?>" class="circleTop"></div></div>
-                    <div class="col-12 <?php 
-                    if($categorie['value']=== 'video'):
-                        echo("openSlickModal-".$compteurVideo);
-                    endif;
-                    if(empty($lienvideo)){
-                        echo ' clickno';
-                    }
-                    ?>">
-                        <img class="large <?php echo $mouse; ?>" src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']?>">
-                        <img class="mobile" src="<?php echo $imageMobile['url'];?>" alt="<?php echo $imageMobile['alt']?>">
-                    </div>
-                    <?php 
-                        if($i % 2 == 0):
-                        ?>
-                        <div style="color: <?php echo $couleur[$valeur];?>" class="col-lg-4">
-                            <div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
-                            <h3><?php echo get_sub_field('nom_du_projet');?></h3>
-                            <p class="client"><?php echo get_sub_field('nom_du_client');?></p>
-                        </div>
-                        <div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
-                        <?php
-                        else:
-                        ?>
-                        <div style="color: <?php echo $couleur[$valeur];?>" class="offset-lg-4 col-lg-4">
-                            <div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
-                            <h3><?php echo get_sub_field('nom_du_projet');?></h3>
-                            <p class="client"><?php echo get_sub_field('nom_du_client');?></p>
-                        </div>
-                        <div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
-                        <?php
-                        endif;
-                    ?>
-                    
-                </div>
-            </div>
+    $args = array(
+        'post_type' => 'portfolio',
+        'posts_per_page' => -1,
+    );
+    $portfolio_post = new WP_Query($args);
+    ?>
+    <?php if ($portfolio_post->have_posts()) : while ($portfolio_post->have_posts()) : $portfolio_post->the_post(); ?>
             <?php
-           
-            if($categorie['value']=== 'video'):
-                ?>
-                <div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
-                    <div class="slickWindow">
-                        <!-- Your popup content -->
-                        <iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video');?>" frameborder="0"	allowfullscreen>
-                        </iframe>
-                        <!-- / Your popup content -->
-                    </div>
+            $projectThumbnailUrl = get_the_post_thumbnail_url($portfolio_post->ID, 'full');
+            $projectPermLink = get_the_permalink($portfolio_post->ID);
+
+            ?>
+            <div class="project-card">
+                <a href="<?php echo $projectPermLink ?>">
+                    <img src="<?php echo $projectThumbnailUrl ?>" alt="">
+                </a>
+                <h2><?php the_title(); ?></h2>
+                <p><?php the_content(); ?></p>
+                <a href="<?php the_permalink(); ?>">Voir le projet</a>
+            </div>
+        <?php endwhile; ?>
+    <?php endif; ?>
+</section>
+
+<section class="old-project container">
+    <?php
+    $portfolio_beta = get_field('portfolio_beta', $currentPageId);
+
+    $cat_colors = array(
+        'web' => '#1CC7C7',
+        'print' => '#C14FE3',
+        'motiondesign' => '#21D5F5',
+        'video' => '#21D5F5',
+    );
+    ?>
+
+    <?php
+    $project_id = $portfolio_post->ID;
+    $projectUrl = get_permalink($project_id);
+    $thumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
+    $mobileThumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
+    $projectDescription = get_field('project_description', $project_id);
+
+    $pousseBoule = 'offset-lg-8';
+    $projectType = 'web';
+    $projectTitle = get_the_title($project_id);
+    $clientName = get_field('client_name', $project_id);
+
+    $currentProjectColor = $cat_colors[$projectType];
+
+    $mouse = $categorie === 'video' ? 'Mouseactive' : null;
+    $i = 3;
+    $ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
+    ?>
+
+
+    <?php
+    // check if the repeater field has rows of data
+    $couleur = array(
+        'web' => '#1CC7C7',
+        'print' => '#C14FE3',
+        'motiondesign' => '#21D5F5',
+        'video' => '#21D5F5',
+    );
+    $i = 1;
+    $compteurBoule = 1;
+    $compteurVideo = 1;
+    ?>
+
+    <?php foreach ($portfolio_beta as $portfolio_project): ?>
+        <?php
+
+        $projectName =   $portfolio_project['nom_du_projet'];
+        $clientName =   $portfolio_project['nom_du_client'];
+        $projectDescription =   $portfolio_project['description_du_projet'];
+        $image = $portfolio_project['image_du_projet'];
+        $imageMobile = $portfolio_project['image_du_projet_mobile'];
+        $categorie = $portfolio_project['categorie_du_projet'];
+        $mouse = 'Mousenonactif';
+        $valeur = $categorie['value'];
+
+
+
+        // COMPTEUR BOULE
+        if ($compteurBoule == 1):
+        elseif ($compteurBoule == 2):
+            $pousseBoule = 'offset-lg-4';
+        elseif ($compteurBoule == 3):
+            $pousseBoule = 'offset-lg-8';
+            $compteurBoule = 1;
+        endif;
+        // FIN COMPTEUR BOULE
+
+        // COMPTEUR VIDEO ET MOUSE VIDEO
+        if ($categorie['value'] === 'video'):
+            $mouse = 'Mouseactive';
+        endif;
+        // FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
+        // LIEN VIDEO VIDE
+        $lienvideo =  $portfolio_project['url_de_la_video'];
+
+        // FIN LIEN VIDEO VIDE
+        ?>
+        <div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
+            <div class="row">
+
+                <div class="<?php echo $pousseBoule; ?> col-lg-1">
+                    <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="circleTop"></div>
+                </div>
+                <div class="col-12 <?php
+                                    if ($categorie['value'] === 'video'):
+                                        echo ("openSlickModal-" . $compteurVideo);
+                                    endif;
+                                    if (empty($lienvideo)) {
+                                        echo ' clickno';
+                                    }
+                                    ?>">
+                    <img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
+                    <img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
                 </div>
                 <?php
-                $compteurVideo++;
-            endif;
+                if ($i % 2 == 0):
+                ?>
+                    <div style="color: <?php echo $cat_colors[$valeur]; ?>" class="col-lg-4">
+                        <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
+                        <h3><?php echo  $projectName  ?></h3>
+                        <p class="client"><?php echo $clientName ?></p>
+                    </div>
+                    <div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
+                <?php
+                else:
+                ?>
+                    <div style="color: <?php echo $cat_colors[$valeur]; ?>" class="offset-lg-4 col-lg-4">
+                        <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
+                        <h3><?php echo  $projectName  ?></h3>
+                        <p class="client"><?php echo $clientName ?></p>
+                    </div>
+                    <div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
+                <?php
+                endif;
+                ?>
 
-            $i++;
-            $compteurBoule++;
-            endwhile;
-        else :
-            // no rows found
+            </div>
+        </div>
+        <?php if ($categorie['value'] === 'video'): ?>
+            <div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
+                <div class="slickWindow">
+                    <!-- Your popup content -->
+                    <iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
+                    </iframe>
+                    <!-- / Your popup content -->
+                </div>
+            </div>
+        <?php
+            $compteurVideo++;
         endif;
+
+        $i++;
+        $compteurBoule++;
         ?>
+    <?php endforeach; ?>
+
+
     </div>
     <div class="row">
-    <div class="col-12">
-    <div class="circleEnd"></div>
+        <div class="col-12">
+            <div class="circleEnd"></div>
+        </div>
     </div>
     </div>
-</div>
 
 
-<?php get_footer();?>
\ No newline at end of file
+
+
+
+
+
+
+
+
+</section>
+
+
+
+<?php get_footer(); ?>
\ No newline at end of file