hover card with bg

assets/css/components/_card-article-small.scss

@@ -46,7 +46,7 @@
     }
 
     &:hover{
-        .title{ text-decoration: underline;}
+        background-color: var(--grey-950);
     }
 
     @include btn--go-to();

assets/css/components/_card-impact.scss

@@ -1,15 +1,24 @@
 .card--impact{
     @include grid-content();
+    // grid-row-gap: 0;
     padding: calc(var(--spacing)*0.5) 0;
     border-bottom: var(--border-light);
+    &:first-of-type{
+        border-top: var(--border-light);
+    }
 
     container-type: inline-size;
     container-name: impact;
 
-    &:first-of-type{
+    @include btn--go-to();
-        border-top: var(--border-light);
+    .btn--go-to{
+        top: calc(var(--padding-inner)*1);
+        bottom: auto;
+
     }
 
+   
+
     .content{
         grid-column: 2;
     }
@@ -26,45 +35,81 @@
       
     }
 
-    .content{
+    &:not([data-impact-type="media"]){
-        .see-more{
+        .content{
-            color: var(--color-txt-light);
+            padding-right: calc(var(--padding-inner)*2.5);
+        }
+       
+    }
+
+    
+
+
+    .investigations{
+        z-index: 10;
+        grid-column: 2;
+        list-style: none;
+        font-size: var(--fs-small);
+    
+        
+        a{
             text-decoration: none;
-            white-space: nowrap;
+            color: var(--color-txt-light);
-            &::after{
+            
-                content: ' +'
+        }
+        .icon{
+            position: relative;
+            top: 2px;
+            svg{
+                width: 14px;
+                height: 14px;
+                fill: var(--color-txt-light);
             }
         }
+        li:hover{
+            a{
+                color: var(--color-txt);
+            }
+            .icon svg{ fill: var(--color-txt); }
+        }
+
+    }
+
+    &.has-link:hover{
+        background-color: var(--grey-950);
     }
 
 
+      
+
+
+
     .open-graph__details{
-        grid-column: span 2;
+        grid-column: 2;
         @include details-summary();
         summary{
             color: var(--color-txt-light);
             .arrow-details svg{ fill: var(--color-txt-light);}
         }
+        @media #{$x-small}{
+            summary{
+                @include grid-content();
+                grid-row-gap: 0;
+                .summary-inner{
+                    grid-column: 2;
+                }
+            }
+            grid-column: 1/3;
+        }
     }
 
 
 
-            .open-graph__details{
+      
-                summary{
-                    @include grid-content();
-                    .summary-inner{
-                        grid-column: 2;
-                       
-                    }
-                }
-        
-            }
             .open-graph__inner{
                 margin-top: calc(var(--spacing)*0.5);
-                margin-bottom: calc(var(--spacing)*1);
+                // margin-bottom: calc(var(--spacing)*1);
-                @media #{$small-up}{
+               
-                    margin-bottom: calc(var(--spacing)*2);
-                }
                 .card--open-graph{
                     margin-bottom: calc(var(--spacing)*0.5);
                 }
@@ -79,4 +124,15 @@
     .date, .content, details{
         font-size: 14px!important;
     }
-}
+}
+
+
+[data-template="impacts"]{
+
+    .card--impact:not([data-impact-type="media"]):hover{
+        background-color: var(--grey-950);
+    }
+
+}
+
+

assets/css/components/_card-open-graph.scss

@@ -1,9 +1,7 @@
 .card--open-graph{
 
-
-
     @include grid-content();
-    
+
     border: var(--border-light);
     border-radius: var(--radius-small);
     position: relative;
@@ -11,9 +9,17 @@
     figure{
         grid-column: 1;
         grid-row: 1;
+        width: 100%;
+        height: 100%;
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;  
+        }
+    
     }
 
-    @include figure-16-9();
+    // @include figure-16-9();
     
 
     @media #{$x-small}{
@@ -61,7 +67,7 @@
 
     &:hover{
         border-color: var(--color-txt);
-
+        background-color: var(--grey-950);
     }
 }
 

assets/css/components/_details-summary.scss

@@ -31,6 +31,13 @@
         
     }
 
+    summary:hover{
+        color: var(--color-txt);
+        .arrow-details svg{
+            fill: var(--color-txt);
+        } 
+    }
+
     &[open]{
         .arrow-details svg{
             transform: rotate(90deg);

assets/css/partials/_main-layout.scss

@@ -16,8 +16,17 @@ body{
 
         min-height: 100dvh;
         min-height: 100vh;
+
+        .page__header,
+        .page__content{
+            max-width: var(--max-w-cards);
+            margin-inline: auto;
+        }
     }
 
    
+
+
+   
     
 }

assets/css/partials/_page-header.scss

@@ -22,9 +22,9 @@
 
 }
 
+
+
 main .page__header {
-    max-width: var(--max-w-cards);
-    margin-inline: auto;
     margin-top: calc(var(--spacing) * 3);
     margin-bottom: calc(var(--spacing) * 2);
  

assets/css/style.css

@@ -1296,8 +1296,8 @@ button.sort[data-sort-type=up] .arrow {
   z-index: 1000;
   max-width: 32ch;
 }
-.card--article-small:hover .title {
+.card--article-small:hover {
-  text-decoration: underline;
+  background-color: var(--grey-950);
 }
 .card--article-small .btn--go-to {
   position: absolute;
@@ -1361,10 +1361,44 @@ button.sort[data-sort-type=up] .arrow {
   border-bottom: var(--border-light);
   container-type: inline-size;
   container-name: impact;
+  position: relative;
 }
 .card--impact:first-of-type {
   border-top: var(--border-light);
 }
+.card--impact .btn--go-to {
+  position: absolute;
+  right: var(--padding-inner);
+  bottom: calc(var(--padding-inner) - 3px);
+}
+.card--impact .btn--go-to svg {
+  width: 15px;
+  height: 15px;
+  fill: var(--color-txt);
+}
+@media screen and (max-width: 768px) {
+  .card--impact .btn--go-to svg {
+    width: 11px;
+    height: 11px;
+  }
+}
+@media screen and (max-width: 560px) {
+  .card--impact .btn--go-to {
+    right: calc(var(--padding-inner) * 0.5);
+    bottom: calc(var(--padding-inner) * 0.25);
+  }
+  .card--impact .btn--go-to svg {
+    width: 11px;
+    height: 11px;
+  }
+}
+.card--impact:hover .btn--go-to {
+  animation: wiggle-left 0.8s ease-in-out;
+}
+.card--impact .btn--go-to {
+  top: calc(var(--padding-inner) * 1);
+  bottom: auto;
+}
 .card--impact .content {
   grid-column: 2;
 }
@@ -1379,16 +1413,39 @@ button.sort[data-sort-type=up] .arrow {
   position: relative;
   top: -5px;
 }
-.card--impact .content .see-more {
+.card--impact:not([data-impact-type=media]) .content {
-  color: var(--color-txt-light);
+  padding-right: calc(var(--padding-inner) * 2.5);
-  text-decoration: none;
-  white-space: nowrap;
 }
-.card--impact .content .see-more::after {
+.card--impact .investigations {
-  content: " +";
+  z-index: 10;
+  grid-column: 2;
+  list-style: none;
+  font-size: var(--fs-small);
+}
+.card--impact .investigations a {
+  text-decoration: none;
+  color: var(--color-txt-light);
+}
+.card--impact .investigations .icon {
+  position: relative;
+  top: 2px;
+}
+.card--impact .investigations .icon svg {
+  width: 14px;
+  height: 14px;
+  fill: var(--color-txt-light);
+}
+.card--impact .investigations li:hover a {
+  color: var(--color-txt);
+}
+.card--impact .investigations li:hover .icon svg {
+  fill: var(--color-txt);
+}
+.card--impact.has-link:hover {
+  background-color: var(--grey-950);
 }
 .card--impact .open-graph__details {
-  grid-column: span 2;
+  grid-column: 2;
 }
 .card--impact .open-graph__details summary,
 .card--impact .open-graph__details .summary-inner {
@@ -1413,6 +1470,12 @@ button.sort[data-sort-type=up] .arrow {
   width: 100%;
   fill: var(--color-txt);
 }
+.card--impact .open-graph__details summary:hover {
+  color: var(--color-txt);
+}
+.card--impact .open-graph__details summary:hover .arrow-details svg {
+  fill: var(--color-txt);
+}
 .card--impact .open-graph__details[open] .arrow-details svg {
   transform: rotate(90deg);
 }
@@ -1422,23 +1485,23 @@ button.sort[data-sort-type=up] .arrow {
 .card--impact .open-graph__details summary .arrow-details svg {
   fill: var(--color-txt-light);
 }
-.card--impact .open-graph__details summary {
+@media screen and (max-width: 560px) {
-  display: grid;
+  .card--impact .open-graph__details {
-  grid-gap: var(--padding-inner);
+    grid-column: 1/3;
-  grid-template-columns: 2fr 3fr;
+  }
-  position: relative;
+  .card--impact .open-graph__details summary {
-}
+    display: grid;
-.card--impact .open-graph__details summary .summary-inner {
+    grid-gap: var(--padding-inner);
-  grid-column: 2;
+    grid-template-columns: 2fr 3fr;
+    position: relative;
+    grid-row-gap: 0;
+  }
+  .card--impact .open-graph__details summary .summary-inner {
+    grid-column: 2;
+  }
 }
 .card--impact .open-graph__inner {
   margin-top: calc(var(--spacing) * 0.5);
-  margin-bottom: calc(var(--spacing) * 1);
-}
-@media screen and (min-width: 768px) {
-  .card--impact .open-graph__inner {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
 }
 .card--impact .open-graph__inner .card--open-graph {
   margin-bottom: calc(var(--spacing) * 0.5);
@@ -1449,6 +1512,10 @@ button.sort[data-sort-type=up] .arrow {
     font-size: 14px !important;
   }
 }
+[data-template=impacts] .card--impact:not([data-impact-type=media]):hover {
+  background-color: var(--grey-950);
+}
+
 .card--folder {
   position: relative;
   max-width: var(--max-w-cards);
@@ -1597,18 +1664,14 @@ button.sort[data-sort-type=up] .arrow {
 .card--open-graph figure {
   grid-column: 1;
   grid-row: 1;
-}
+  width: 100%;
-.card--open-graph figure {
+  height: 100%;
-  aspect-ratio: 16/9;
-  display: flex;
-  overflow: hidden;
 }
 .card--open-graph figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
 @media screen and (max-width: 560px) {
   .card--open-graph figure {
@@ -1650,6 +1713,7 @@ button.sort[data-sort-type=up] .arrow {
 }
 .card--open-graph:hover {
   border-color: var(--color-txt);
+  background-color: var(--grey-950);
 }
 
 .open-graph__inner {
@@ -1972,6 +2036,11 @@ body main {
   min-height: 100dvh;
   min-height: 100vh;
 }
+body main .page__header,
+body main .page__content {
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+}
 
 .page__type {
   height: calc(var(--h-block) * 0.75);
@@ -1992,8 +2061,6 @@ body main {
 }
 
 main .page__header {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
   margin-top: calc(var(--spacing) * 3);
   margin-bottom: calc(var(--spacing) * 2);
 }
@@ -2188,10 +2255,6 @@ main .page__header .description-medium {
 [data-template=investigation-summary] main {
   position: relative;
 }
-[data-template=investigation-summary] main #hero, [data-template=investigation-summary] main .section__article {
-  max-width: var(--max-w-cards);
-  margin-inline: auto;
-}
 [data-template=investigation-summary] main .panel-left {
   width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
 }

assets/css/style.scss

@@ -43,3 +43,4 @@
 @import "template/investigation-summary";
 @import "template/report";
 @import "template/folder";
+@import "template/impacts";

assets/css/template/_investigation-summary.scss

@@ -2,10 +2,7 @@
   position: relative;
 
 
-  #hero, .section__article{
+
-    max-width: var(--max-w-cards);
-    margin-inline: auto;
-  }
 
 
   .panel-left{
@@ -16,7 +13,6 @@
     margin-left: auto;
     margin-right: calc(var(--padding-body)*3);
        .panel-left{
-
         width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6);
      }
   }
@@ -27,7 +23,6 @@
     margin-right: 0px;
     width: calc(100% - var(--panel-w)*0.5 - var(--padding-body));
        .panel-left{
-    
         width: calc(var(--panel-w)*0.5);
      }
   }

assets/icons/article.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z"/></svg>

site/templates/impacts.php

@@ -13,5 +13,69 @@
 </header>
 
 
+<div class="page__content">
+
+    <!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
+    <div class="card--impact" data-impact-type="media">
+        <p class="tag">Médiatique</p>
+        <div class="content">
+        <?php snippet('card-open-graph') ?>
+       
+        </div>
+        <ul class="investigations">
+                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
+                <li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
+
+                
+            </ul>
+    </div>
+
+
+    <div class="card--impact" data-impact-type="judiciaire">
+        <p class="tag">Judiciaire</p>
+        <p class="date">12 Dec 2025</p>
+        <div class="content">
+            <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
+            </p>
+           
+        </div>
+        <ul class="investigations">
+                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
+            </ul>
+            <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+            <a class="link-block" href="#" target="_blank"></a>
+
+    </div>
+
+    <div class="card--impact" data-impact-type="judiciaire">
+        <p class="tag">Judiciaire</p>
+        <p class="date">12 Dec 2025</p>
+        <div class="content">
+            <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
+            </p>
+            
+        </div>
+        <ul class="investigations">
+                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
+            </ul>
+            <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+            <a class="link-block" href="#" target="_blank"></a>
+
+    </div>
+
+    <div class="card--impact" data-impact-type="public">
+        <p class="tag">Judiciaire</p>
+        <p class="date">12 Dec 2025</p>
+        <div class="content">
+            <p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
+            </p>
+           
+        </div>
+        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <a class="link-block" href="#" target="_blank"></a>
+
+    </div>
+</div>
+
 </main>
 <?php snippet('footer') ?>

site/templates/investigation-summary.php

@@ -67,6 +67,10 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
     <?php endif ?>
 </header>
 
+
+<div class="page__content">
+
+
 <?php if ($page->heroType()->value() == 'image'): ?>
     <?php if ($heroImage = $page->heroImages()->toFile()): ?>
     <!-- HERO IMAGE SIMPLE -->
@@ -243,30 +247,33 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
         </details>
     </div>
 
-    <div class="card--impact" data-impact-type="judiciaire">
+    <div class="card--impact has-link" data-impact-type="judiciaire">
         <p class="tag">Judiciaire</p>
         <p class="date">12 Dec 2025</p>
         <div class="content">
             <p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
             </p>
         </div>
+        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <a class="link-block" href="#" target="_blank"></a>
     </div>
 
-    <div class="card--impact" data-impact-type="judiciaire">
+    <div class="card--impact has-link" data-impact-type="judiciaire">
         <p class="tag">Judiciaire</p>
         <p class="date">12 Dec 2025</p>
         <div class="content">
             <p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
             </p>
         </div>
-
+        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <a class="link-block" href="#" target="_blank"></a>
     </div>
 
     <div class="card--impact" data-impact-type="public">
         <p class="tag">Judiciaire</p>
         <p class="date">12 Dec 2025</p>
         <div class="content">
-            <p>Index présente une série d'enquêtes récentes au Festival du Réel 2025. <a class="see-more" href="#">Voir plus</a>
+            <p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.</a>
             </p>
         </div>
     </div>
@@ -372,6 +379,8 @@ if ($folder):
     <?php endforeach ?>
 
 </aside>
+
+</div>
 <?php endif ?>
 
 </main>