impacts with keywords

assets/css/base/_body.scss

@@ -104,6 +104,7 @@ body, #site-header, #site-footer{
 
 @mixin pin(){
     .pin{
+        z-index: 90;
         width: 18px;
         height: 18px;
         transform: rotate(45deg);

assets/css/base/_var.scss

@@ -53,7 +53,7 @@
 
   --border: 1px solid var(--color-txt);
   --border-medium: 1px solid var(--grey-600);
-  --border-light: 1px solid var(--grey-800);
+  --border-light: 1px solid #414141;
 
 
   --header-h: 80px;

assets/css/components/_card-article.scss

@@ -9,6 +9,14 @@
     
 
     @include figure-16-9();
+    @include pin();
+   
+    & > figure{
+        width: calc(100% + var(--padding-inner)*2);
+        position: relative;
+        left: calc(var(--padding-inner)*-1);
+        top: calc(var(--padding-inner)*-1);
+    }
 
     .content{
         // padding: var(--padding-inner);
@@ -17,20 +25,8 @@
     }
     .pin{
         position: absolute;
-        top: calc(var(--padding-inner)*1.5);
+        top: var(--padding-inner);
-        left: calc(var(--padding-inner)*1.5);
+        right: var(--padding-inner);
-        z-index: 10;
-        width: 24px;
-        height: 24px;
-        border-radius: var(--radius-small);
-        background-color: rgba(255, 255, 255, 0.27);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        svg{
-            width: 16px;
-            fill: var(--color-txt);
-             }
     }
 
     .time-alone{

assets/css/components/_card-impact.scss

@@ -3,7 +3,7 @@
     container-type: inline-size;
     container-name: impact;
     border: var(--border-light);
-    margin-bottom: calc(var(--spacing)*1);
+    margin-bottom: calc(var(--padding-body)*1);
     padding: var(--padding-inner);
 
     display: flex;
@@ -13,7 +13,6 @@
     gap: calc(var(--spacing)*0.25);
 
 
-
     @include hover-card-line();
     @include figure-3-1();
     @include pin();
@@ -56,129 +55,31 @@
         position: absolute;
         top: var(--padding-inner);
         right: var(--padding-inner);
-  
     }
 
-    figure{
+    & > figure{
         width: calc(100% + var(--padding-inner)*2);
         position: relative;
         left: calc(var(--padding-inner)*-1);
         top: calc(var(--padding-inner)*-1);
     }
 
+    .tag{
+        position: relative;
+        top: 3px;
+    }
+
    
 
 
 }
 
 
+@media #{$small-up}{
+.card--impact,
+.grid-sizer{
+    width: calc(50% - 13px);
+}
 
-// @container impact (width < 460px) {
+}
-//     .card--impact__inner{
-//         display: block!important;
-//         padding-top: var(--padding-inner)!important;
-//         padding-bottom: calc(var(--padding-inner)*0.75)!important;
-  
 
-//     .tag, .date{
-//         display: inline-flex;
-//         margin-right: 2ch;
-//         top: 0px!important;
-//     }
-
-//     .card--impact__inner > .content{
-//         margin-top: calc(var(--spacing)*0.75);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//         padding-right: 0!important;
-//     }
-
-//     .card--open-graph{
-//         margin-top: calc(var(--spacing)*0.75);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//     }
-
-//     .investigations{
-//         margin-top: calc(var(--spacing)*0.25);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//     }
-
-//     .keywords-wrapper {
-//         margin-top: calc(var(--spacing)*1);
-
-//     }
-//     .content,
-//     details {
-//         font-size: var(--fs-small) !important;
-//     }
-
-//      .date{
-//          font-size: var(--fs-xsmall) !important;
-//      }
-
-//     .btn--go-to {
-//         top: calc(var(--padding-inner)*1.25)!important;
-//         bottom: auto;
-//         right: calc(var(--padding-inner)*1.25)!important;
-//     }
-// }
-// }
-
-
-// @media #{$x-small}{
-//     .card--impact__inner{
-//         display: block!important;
-//         padding-top: var(--padding-inner)!important;
-//         padding-bottom: calc(var(--padding-inner)*0.75)!important;
-    
-
-//     .tag, .date{
-//         display: inline-flex;
-//         margin-right: 2ch;
-//         top: 0px!important;
-//     }
-
-//     .content{
-//         margin-top: calc(var(--spacing)*0.75);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//         padding-right: 0!important;
-//     }
-
-//     .card--open-graph{
-//         margin-top: calc(var(--spacing)*0.75);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//     }
-
-//     .investigations{
-//         margin-top: calc(var(--spacing)*0.25);
-//         margin-bottom: calc(var(--spacing)*0.25);
-//     }
-
-//     .keywords-wrapper {
-//         margin-top: calc(var(--spacing)*1);
-
-//     }
-//     .date,
-//     .content,
-//     details {
-//         font-size: 14px !important;
-//     }
-
-//     .btn--go-to {
-//         top: calc(var(--padding-inner)*1.25)!important;
-//         bottom: auto;
-//         right: calc(var(--padding-inner)*1.25)!important;
-//     }
-// }
-// }
-
-
-
-
-
-
-[data-template="impacts"] .page__content{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--padding-inner);
-
-}

assets/css/style.css

@@ -35,7 +35,7 @@
   --color-form: white;
   --border: 1px solid var(--color-txt);
   --border-medium: 1px solid var(--grey-600);
-  --border-light: 1px solid var(--grey-800);
+  --border-light: 1px solid #414141;
   --header-h: 80px;
   --header-h-shrinked: 50px;
   --menu-w: 420px;
@@ -1235,26 +1235,32 @@ button.sort[data-sort-type=up] .arrow {
      object-fit: cover;
   transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
+.card--article .pin {
+  z-index: 90;
+  width: 18px;
+  height: 18px;
+  transform: rotate(45deg);
+  transform-origin: center;
+}
+.card--article .pin svg {
+  width: 100%;
+  height: 100%;
+  fill: var(--color-txt);
+}
+.card--article > figure {
+  width: calc(100% + var(--padding-inner) * 2);
+  position: relative;
+  left: calc(var(--padding-inner) * -1);
+  top: calc(var(--padding-inner) * -1);
+}
 .card--article .content {
   display: flex;
   flex-direction: column;
 }
 .card--article .pin {
   position: absolute;
-  top: calc(var(--padding-inner) * 1.5);
+  top: var(--padding-inner);
-  left: calc(var(--padding-inner) * 1.5);
+  right: var(--padding-inner);
-  z-index: 10;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-small);
-  background-color: rgba(255, 255, 255, 0.27);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.card--article .pin svg {
-  width: 16px;
-  fill: var(--color-txt);
 }
 .card--article .time-alone {
   display: none;
@@ -1478,7 +1484,7 @@ button.sort[data-sort-type=up] .arrow {
   container-type: inline-size;
   container-name: impact;
   border: var(--border-light);
-  margin-bottom: calc(var(--spacing) * 1);
+  margin-bottom: calc(var(--padding-body) * 1);
   padding: var(--padding-inner);
   display: flex;
   flex-direction: column;
@@ -1517,6 +1523,7 @@ button.sort[data-sort-type=up] .arrow {
      object-fit: cover;
 }
 .card--impact .pin {
+  z-index: 90;
   width: 18px;
   height: 18px;
   transform: rotate(45deg);
@@ -1562,19 +1569,23 @@ button.sort[data-sort-type=up] .arrow {
   top: var(--padding-inner);
   right: var(--padding-inner);
 }
-.card--impact figure {
+.card--impact > figure {
   width: calc(100% + var(--padding-inner) * 2);
   position: relative;
   left: calc(var(--padding-inner) * -1);
   top: calc(var(--padding-inner) * -1);
 }
-
+.card--impact .tag {
-[data-template=impacts] .page__content {
+  position: relative;
-  display: grid;
+  top: 3px;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: var(--padding-inner);
 }
 
+@media screen and (min-width: 768px) {
+  .card--impact,
+  .grid-sizer {
+    width: calc(50% - 13px);
+  }
+}
 .card--impact-small {
   border-bottom: var(--border-light);
   display: grid;

assets/js/script.js

@@ -31,4 +31,33 @@ window.onload = async function () {
   playVideo();
   initDropdowns(responsiveSmall);
   initSwipers();
+
+
+  var elem = document.querySelector('.grid-masonry');
+  var msnry = null;
+
+  function initMasonry() {
+    if (!elem) return;
+    if (window.innerWidth >= responsiveSmall) {
+      if (!msnry) {
+        msnry = new Masonry(elem, {
+          itemSelector: '.card--impact',
+          columnWidth: '.grid-sizer',
+          percentPosition: true,
+          gutter: 26
+        });
+      }
+    } else {
+      if (msnry) {
+        msnry.destroy();
+        msnry = null;
+      }
+    }
+  }
+
+  initMasonry();
+  window.addEventListener('resize', initMasonry);
+
+
+
 }

site/snippets/header.php

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?= url('assets/css/style.css') ?>?version-cache-prevent<?= rand(0, 1000) ?>">
   <link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>">
+  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
   <meta name="robots" content="noindex,nofollow">
   <title>
     <?php if ($page->isHomePage() == false): ?>

site/templates/impacts.php

@@ -28,21 +28,20 @@
     </div>
 </div>
 
-<div class="page__content">
+<div class="page__content grid-masonry">
+
+<div class="grid-sizer"></div>
 
     <!-- Contenu statique temporaire -->
-    <div class="card--impact" data-impact-type="media">
-        <h3 class="title">Index dans le Monde</h3>
-         <p class="tag">Médiatique</p>
-                     <p class="date">24 janvier 2026</p>
-        <?php snippet('card-open-graph') ?>
-    </div>
-
 
     <div class="card--impact has-link" data-impact-type="judiciaire">
-            <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
+        <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
         <h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3>
-        <p class="tag">Judiciaire</p>
+            <ul class="keywords">
+                <li class="tag">Judiciaire</li>
+                <li><a href="#keyword" target="_blank">Reportage</a></li>
+                <li><a href="#keyword" target="_blank">Monde</a></li>
+            </ul>
         <p class="date">24 janvier 2026</p>
         <ul class="investigations">
             <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
@@ -52,8 +51,14 @@
 
      <div class="card--impact has-link" data-impact-type="judiciaire">
             <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
-            <h3 class="title">Ouverture d’une imformation judiciaire</h3>
+            <h3 class="title">Ouverture d’une information judiciaire</h3>
-            <p class="tag">Judiciaire</p>
+
+            <ul class="keywords">
+                <li class="tag">Judiciaire</li>
+                <li><a href="#keyword" target="_blank">Refus d’obtempérer</a></li>
+                <li><a href="#keyword" target="_blank">Homicide</a></li>
+            </ul>
+           
             <p class="date">24 janvier 2026</p>
             <ul class="investigations">
                 <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
@@ -62,9 +67,13 @@
         </div>
 
          <div class="card--impact has-link" data-impact-type="judiciaire">
+            <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
             <figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure>
             <h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3>
-            <p class="tag">Judiciaire</p>
+               <ul class="keywords">
+                 <li class="tag">Judiciaire</li>
+                <li><a href="#keyword" target="_blank">restitution</a></li>
+            </ul>
             <p class="date">24 janvier 2026</p>
             <ul class="investigations">
                     <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
@@ -75,7 +84,11 @@
 
         <div class="card--impact has-link" data-impact-type="judiciaire">
             <h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3>
-            <p class="tag">Médiathique</p>
+             <ul class="keywords">
+                 <li class="tag">Médiathique</li>
+                <li><a href="#keyword" target="_blank">Reportage</a></li>
+                <li><a href="#keyword" target="_blank">Arte</a></li>
+            </ul>
             <p class="date">24 janvier 2026</p>
 
             <ul class="investigations">
@@ -86,16 +99,29 @@
 
         <div class="card--impact has-link" data-impact-type="judiciaire">
             <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
-            <p class="tag">Public</p>
+            <ul class="keywords">
+                <li class="tag">Public</li>
+            </ul>
             <p class="date">24 janvier 2026</p>
             <a class="link-block" href="#" target="_blank"></a>
         </div>
 
+            <div class="card--impact" data-impact-type="media">
+        <h3 class="title">Index dans le Monde</h3>
+         <p class="tag">Médiatique</p>
+                     <p class="date">24 janvier 2026</p>
+        <?php snippet('card-open-graph') ?>
+    </div>
+
+
+
 
         <div class="card--impact has-link" data-impact-type="judiciaire">
             <figure><img src="/assets/images/eclairages.png"></figure>
             <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
-            <p class="tag">Public</p>
+              <ul class="keywords">
+                <li class="tag">Public</li>
+            </ul>
             <p class="date">24 janvier 2026</p>
             <a class="link-block" href="#" target="_blank"></a>
         </div>