diff --git a/templates/template-portfolio.php b/templates/template-portfolio.php
index 859aa8a..be97688 100644
--- a/templates/template-portfolio.php
+++ b/templates/template-portfolio.php
@@ -5,30 +5,9 @@ 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>
-        </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>
 
-<section class="projects-overview">
+<section class="portfolio-archive projects-overview">
 
     <?php
     $args = array(
@@ -41,178 +20,85 @@ $currentPageId = get_the_ID();
             <?php
             $projectThumbnailUrl = get_the_post_thumbnail_url($portfolio_post->ID, 'full');
             $projectPermLink = get_the_permalink($portfolio_post->ID);
+            $excerpt = get_the_excerpt();
+            $clientName = get_field('client_name', $portfolio_post->ID);
+            $terms = get_the_terms($portfolio_post->ID, 'project_type');
 
             ?>
-            <div class="project-card">
-                <a href="<?php echo $projectPermLink ?>">
+            <div class="portfolio-project-card portfolio-project-card--active">
+                <a class="portfolio-project-card__cover" 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 class="portfolio-project-card__details">
+                    <div>
+                        <h2 class="client-name"><?php echo $clientName ?></h2>
+                        <div class="terms">
+                            <?php foreach ($terms as $term): ?>
+                                <span>#<?php echo $term->name ?></span>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+
+                    <div class='excerpt'>
+                        <h3><?php the_title(); ?></h3>
+                        <p><?php echo $excerpt ?></p>
+                        <a class="cta--read-project" href="<?php the_permalink(); ?>">
+                            <span>Voir le projet</span>
+                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/graphic-assets/arrow-see-project.svg" alt="Voir le projet">
+                        </a>
+                    </div>
+                </div>
+
             </div>
         <?php endwhile; ?>
     <?php endif; ?>
 </section>
 
-<section class="old-project container">
+<section class="old-projects ">
     <?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
-
+        $image = get_sub_field('image_du_projet');
+        $imageMobile = get_sub_field('image_du_projet_mobile');
         $projectName =   $portfolio_project['nom_du_projet'];
         $clientName =   $portfolio_project['nom_du_client'];
         $projectDescription =   $portfolio_project['description_du_projet'];
-        $image = $portfolio_project['image_du_projet'];
+        $projectThumbnail = $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
-                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;
-                ?>
 
+        <div class="portfolio-project-card portfolio-project-card--inactive">
+            <div class="portfolio-project-card__cover" href="<?php echo $projectPermLink ?>">
+                <!-- <img src="<?php echo $projectThumbnailUrl ?>" alt=""> -->
+                <img class="large <?php echo $mouse; ?>" src="<?php echo $projectThumbnail['url']; ?>" alt="<?php echo $projectThumbnail['alt'] ?>">
+                <img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
             </div>
+            <div class="portfolio-project-card__details">
+                <div>
+                    <h2 class="client-name"><?php echo $clientName ?></h2>
+                    <div class="terms">
+                        <?php if (isset($categorie['value'])): ?>
+                            <span>#<?php echo $categorie['value'] ?></span>
+                        <?php endif; ?>
+                    </div>
+                </div>
+
+                <div class='excerpt'>
+                    <h3><?php echo $projectName ?></h3>
+                    <p><?php echo $projectDescription ?></p>
+                </div>
+            </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>
-    </div>
-    </div>
-
-
-
-
-
-
-
-
-
-
 </section>
 
-
-
 <?php get_footer(); ?>
\ No newline at end of file