page folder

assets/css/components/_buttons.scss

@@ -3,6 +3,9 @@ button{
     font-family: var(--font);
     font-size: var(--fons-normal);
     color: var(--color-txt);
+    svg{
+        fill: var(--color-txt);
+    }
     &:hover{
         color: var(--grey-100);
         svg{ fill: var(--grey-100); }

assets/css/components/_card-article.scss

@@ -3,20 +3,21 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    padding: var(--padding-inner);
 
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
 
     .content{
-        padding: var(--padding-inner);
+        // padding: var(--padding-inner);
         display: flex;
         flex-direction: column;
         flex-grow: 2;
     }
     .pin{
         position: absolute;
-        top: var(--padding-inner);
-        left: var(--padding-inner);
+        top: calc(var(--padding-inner)*1.5);
+        left: calc(var(--padding-inner)*1.5);
         z-index: 10;
         width: 24px;
         height: 24px;

assets/css/components/_card-folder.scss

@@ -1,14 +1,13 @@
 .card--folder{
     position: relative;
     max-width: var(--max-w-cards);
-
     border: var(--border-light);
     padding: var(--padding-inner);
-
-
     @include grid-content();
     @include figure-16-9();
 
+
+
     .content{
         display: flex;
         flex-direction: column;
@@ -73,6 +72,7 @@
         display: flex;
         flex-direction: column;
         padding: calc(var(--padding-inner)*0.5);
+        background-color: yellow;
         // .short{ display: none; }
 
         .content{ display: contents;}
@@ -87,3 +87,5 @@
  
 }
 
+
+

assets/css/components/_card-impact.scss

@@ -2,6 +2,10 @@
     @include grid-content();
     padding: calc(var(--spacing)*0.5) 0;
     border-bottom: var(--border-light);
+
+    container-type: inline-size;
+    container-name: impact;
+
     &:first-of-type{
         border-top: var(--border-light);
     }
@@ -44,7 +48,6 @@
     }
 
 
-        // @media #{$x-small-up}{
 
             .open-graph__details{
                 summary{
@@ -68,10 +71,12 @@
               
             }
         
-
-        // }
+}
 
 
-   
 
+@container impact (width < 420px) {
+    .date, .content, details{
+        font-size: 14px!important;
+    }
 }

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

@@ -1,5 +1,7 @@
 .card--open-graph{
 
+
+
     @include grid-content();
     
     border: var(--border-light);
@@ -9,11 +11,9 @@
     figure{
         grid-column: 1;
         grid-row: 1;
-
-    
     }
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
     
 
     @media #{$x-small}{
@@ -33,11 +33,14 @@
     .site-name{
         color: var(--color-txt-light);
         font-size: var(--fs-small);
+        margin-bottom: 3px;
     }
 
     .title{
         font-size: var(--fs-normal);
         font-weight: normal;
+        line-height: 1.1;
+        padding-top: 2px;
         display: -webkit-box;
         -webkit-line-clamp: 2;    
         -webkit-box-orient: vertical;
@@ -57,7 +60,26 @@
     }
 
     &:hover{
-        .title{ text-decoration: underline;}
+        border-color: var(--color-txt);
 
     }
+}
+
+
+.open-graph__inner{
+
+    container-type: inline-size;
+    container-name: opengraph;
+}
+@container opengraph (width < 500px) {
+    .card--open-graph{
+
+        .content{
+            padding: calc(var(--padding-inner)*0.5);
+        }
+
+        figure{
+            aspect-ratio: inherit;
+        }
+    }
 }

assets/css/partials/_container-cards.scss

@@ -11,7 +11,7 @@
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
       grid-auto-rows: minmax(100px, auto);
-      grid-gap: calc(var(--padding-body) * 1.5);
+      grid-gap: var(--padding-body);
       margin-bottom: 10vh;
     }
     @media #{$x-small} {

assets/css/style.css

@@ -250,6 +250,9 @@ button {
   font-size: var(--fons-normal);
   color: var(--color-txt);
 }
+button svg {
+  fill: var(--color-txt);
+}
 button:hover {
   color: var(--grey-100);
 }
@@ -1128,6 +1131,7 @@ button.sort[data-sort-type=up] .arrow {
   position: relative;
   display: flex;
   flex-direction: column;
+  padding: var(--padding-inner);
 }
 .card--article figure {
   aspect-ratio: 16/9;
@@ -1141,19 +1145,15 @@ 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:hover figure img {
-  transform: scale(1.05);
-}
 .card--article .content {
-  padding: var(--padding-inner);
   display: flex;
   flex-direction: column;
   flex-grow: 2;
 }
 .card--article .pin {
   position: absolute;
-  top: var(--padding-inner);
-  left: var(--padding-inner);
+  top: calc(var(--padding-inner) * 1.5);
+  left: calc(var(--padding-inner) * 1.5);
   z-index: 10;
   width: 24px;
   height: 24px;
@@ -1345,6 +1345,8 @@ button.sort[data-sort-type=up] .arrow {
   position: relative;
   padding: calc(var(--spacing) * 0.5) 0;
   border-bottom: var(--border-light);
+  container-type: inline-size;
+  container-name: impact;
 }
 .card--impact:first-of-type {
   border-top: var(--border-light);
@@ -1428,6 +1430,11 @@ button.sort[data-sort-type=up] .arrow {
   margin-bottom: calc(var(--spacing) * 0.5);
 }
 
+@container impact (width < 420px) {
+  .date, .content, details {
+    font-size: 14px !important;
+  }
+}
 .card--folder {
   position: relative;
   max-width: var(--max-w-cards);
@@ -1537,6 +1544,7 @@ button.sort[data-sort-type=up] .arrow {
     display: flex;
     flex-direction: column;
     padding: calc(var(--padding-inner) * 0.5);
+    background-color: yellow;
   }
   .card--folder .content {
     display: contents;
@@ -1580,9 +1588,6 @@ button.sort[data-sort-type=up] .arrow {
      object-fit: cover;
   transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
-.card--open-graph:hover figure img {
-  transform: scale(1.05);
-}
 @media screen and (max-width: 560px) {
   .card--open-graph figure {
     height: 100%;
@@ -1598,10 +1603,13 @@ button.sort[data-sort-type=up] .arrow {
 .card--open-graph .site-name {
   color: var(--color-txt-light);
   font-size: var(--fs-small);
+  margin-bottom: 3px;
 }
 .card--open-graph .title {
   font-size: var(--fs-normal);
   font-weight: normal;
+  line-height: 1.1;
+  padding-top: 2px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1618,10 +1626,23 @@ button.sort[data-sort-type=up] .arrow {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.card--open-graph:hover .title {
-  text-decoration: underline;
+.card--open-graph:hover {
+  border-color: var(--color-txt);
 }
 
+.open-graph__inner {
+  container-type: inline-size;
+  container-name: opengraph;
+}
+
+@container opengraph (width < 500px) {
+  .card--open-graph .content {
+    padding: calc(var(--padding-inner) * 0.5);
+  }
+  .card--open-graph figure {
+    aspect-ratio: inherit;
+  }
+}
 #site-header {
   z-index: var(--z-header);
   --gap: 3ch;
@@ -1926,7 +1947,7 @@ main .page__header .description-medium {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
     grid-auto-rows: minmax(100px, auto);
-    grid-gap: calc(var(--padding-body) * 1.5);
+    grid-gap: var(--padding-body);
     margin-bottom: 10vh;
   }
 }
@@ -2418,4 +2439,86 @@ main .page__header .description-medium {
   height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
+}
+
+.content-folder {
+  max-width: var(--max-w-cards);
+  margin: 0 auto;
+  display: grid;
+  grid-gap: calc(var(--padding-body) * 1.5);
+  position: relative;
+}
+.content-folder .container-cards {
+  display: block;
+  align-self: start;
+}
+.content-folder #section__investigations article {
+  margin-bottom: calc(var(--spacing) * 1);
+}
+.content-folder .container__title {
+  font-weight: normal;
+  font-size: var(--fs-normal);
+  text-transform: uppercase;
+  margin-bottom: calc(var(--spacing) * 0.75);
+}
+.content-folder section:target {
+  padding-top: calc(var(--header-h) + var(--spacing));
+}
+@media screen and (max-width: 1080px) {
+  .content-folder #section__investigations {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: calc(var(--padding-inner) * 1.5) !important;
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .content-folder #section__investigations article {
+    margin-bottom: 0px;
+  }
+  .content-folder #section__investigations .container__title {
+    grid-column: span 2;
+    margin-bottom: 0px;
+  }
+}
+@media screen and (min-width: 1080px) {
+  .content-folder {
+    grid-template-columns: 1fr 1fr;
+  }
+  .content-folder #nav-folder {
+    display: none;
+  }
+  .content-folder #section__investigations {
+    display: block;
+    margin-bottom: 0px;
+  }
+  .content-folder #section__investigations article {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+}
+@media screen and (max-width: 768px) {
+  .content-folder {
+    display: block;
+  }
+  .content-folder #section__investigations {
+    display: block;
+  }
+  .content-folder .container__title {
+    margin-bottom: calc(var(--spacing) * 0.5) !important;
+  }
+}
+
+#nav-folder {
+  display: flex;
+  margin-top: calc(var(--spacing) * -1);
+  margin-bottom: calc(var(--spacing) * 2);
+}
+#nav-folder svg {
+  width: 10px;
+  height: 10px;
+  transform: rotate(90deg);
+}
+
+@media screen and (min-width: 1080px) {
+  #nav-folder {
+    display: none;
+  }
 }/*# sourceMappingURL=style.css.map */

assets/css/style.scss

@@ -42,3 +42,4 @@
 @import "template/home";
 @import "template/investigation-summary";
 @import "template/report";
+@import "template/folder";

assets/css/template/_folder.scss

@@ -0,0 +1,91 @@
+.content-folder{
+    // max-width: 1300px;
+    max-width: var(--max-w-cards);
+    margin: 0 auto;
+    display: grid;
+    grid-gap: calc(var(--padding-body)*1.5);
+    // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
+
+    position: relative;
+    
+    .container-cards{
+        display: block;
+        align-self: start;
+    }
+
+    #section__investigations article{
+        margin-bottom: calc(var(--spacing)*1);
+    }
+    
+
+    .container__title{
+        font-weight: normal;
+        font-size: var(--fs-normal);
+        text-transform: uppercase;
+        margin-bottom: calc(var(--spacing)*0.75);
+    
+    }
+
+    section:target{
+        padding-top: calc(var(--header-h) + var(--spacing));
+
+    }
+
+
+   
+    @media #{$medium}{
+        #section__investigations{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: calc(var(--padding-inner)*1.5)!important;
+            margin-bottom: calc(var(--spacing)*3);
+            article{ margin-bottom: 0px;}
+            .container__title{
+                grid-column: span 2;
+                margin-bottom: 0px;
+            }
+        }
+    }
+
+    @media #{$medium-up}{
+        #nav-folder{ display: none; }
+        grid-template-columns: 1fr 1fr;
+        #section__investigations{
+            display: block;
+            margin-bottom: 0px;
+            article{
+                margin-bottom: calc(var(--spacing)*1);
+            }
+        }
+    }
+
+
+    @media #{$small}{
+        display: block;
+        #section__investigations{
+            display: block;
+        }
+        .container__title{
+            margin-bottom: calc(var(--spacing)*0.5)!important;
+        }
+    }
+
+
+
+}
+
+
+#nav-folder{ 
+    display: flex; 
+    margin-top: calc(var(--spacing)*-1);
+    margin-bottom: calc(var(--spacing)*2);
+
+    svg{
+        width: 10px;
+        height: 10px;
+        transform: rotate(90deg);
+    }
+}
+@media #{$medium-up}{
+    #nav-folder{ display: none;}
+}

site/templates/folder.php

@@ -20,79 +20,144 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
 });
 ?>
 
+
+<div class="btn--group" id="nav-folder">
+<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
+<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
+</div>
+
+<div class="content-folder">
+
+
 <?php if ($investigations->isNotEmpty()): ?>
-<section class="container-cards">
+<section class="container-cards" id="section__investigations">
 
-<?php foreach ($investigations as $investigation): ?>
-<article class="card--article">
+    <h3 class="container__title">2 enquêtes</h3>
 
-    <?php if ($cover = $investigation->cover()->toFile()): ?>
-    <figure>
-        <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
-    </figure>
-    <?php endif ?>
+    <?php foreach ($investigations as $investigation): ?>
+    <article class="card--article">
 
-    <div class="content">
-
-    <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
-
-    <?php if ($investigation->chapo()->isNotEmpty()): ?>
-    <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
-    <?php endif ?>
-
-    <dl class="dl">
-        <?php if ($investigation->incidentDate()->isNotEmpty()): ?>
-        <div class="dl__group">
-            <dt>Date de l'incident</dt>
-            <dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
-        </div>
+        <?php if ($cover = $investigation->cover()->toFile()): ?>
+        <figure>
+            <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
+        </figure>
         <?php endif ?>
 
-        <?php if ($partners = $investigation->partners()->toStructure()): ?>
-        <?php if ($partners->isNotEmpty()): ?>
-        <div class="dl__group">
-            <dt>Partenaire(s)</dt>
-            <dd>
-                <?php $partnerNames = [] ?>
-                <?php foreach ($partners as $partner): ?>
-                    <?php $partnerNames[] = $partner->name()->value() ?>
+        <div class="content">
+
+        <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
+
+        <?php if ($investigation->chapo()->isNotEmpty()): ?>
+        <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
+        <?php endif ?>
+
+        <dl class="dl">
+            <?php if ($investigation->incidentDate()->isNotEmpty()): ?>
+            <div class="dl__group">
+                <dt>Date de l'incident</dt>
+                <dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
+            </div>
+            <?php endif ?>
+
+            <?php if ($partners = $investigation->partners()->toStructure()): ?>
+            <?php if ($partners->isNotEmpty()): ?>
+            <div class="dl__group">
+                <dt>Partenaire(s)</dt>
+                <dd>
+                    <?php $partnerNames = [] ?>
+                    <?php foreach ($partners as $partner): ?>
+                        <?php $partnerNames[] = $partner->name()->value() ?>
+                    <?php endforeach ?>
+                    <?= implode(', ', $partnerNames) ?>
+                </dd>
+            </div>
+            <?php endif ?>
+            <?php endif ?>
+
+            <?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
+            <div class="dl__group">
+                <dt>Lieu de l'incident</dt>
+                <dd><?= $investigation->incidentLocation()->esc() ?></dd>
+            </div>
+            <?php endif ?>
+        </dl>
+
+        </div>
+
+        <?php if ($keywords = $investigation->keywords()->split()): ?>
+        <?php if (count($keywords) > 0): ?>
+        <div class="keywords-wrapper">
+            <ul class="keywords">
+                <?php foreach ($keywords as $keyword): ?>
+                <li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
                 <?php endforeach ?>
-                <?= implode(', ', $partnerNames) ?>
-            </dd>
+            </ul>
         </div>
         <?php endif ?>
         <?php endif ?>
 
-        <?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
-        <div class="dl__group">
-            <dt>Lieu de l'incident</dt>
-            <dd><?= $investigation->incidentLocation()->esc() ?></dd>
-        </div>
-        <?php endif ?>
-    </dl>
-
-    </div>
-
-    <?php if ($keywords = $investigation->keywords()->split()): ?>
-    <?php if (count($keywords) > 0): ?>
-    <div class="keywords-wrapper">
-        <ul class="keywords">
-            <?php foreach ($keywords as $keyword): ?>
-            <li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
-            <?php endforeach ?>
-        </ul>
-    </div>
-    <?php endif ?>
-    <?php endif ?>
-
-    <a class="link-block" href="<?= $investigation->url() ?>"></a>
-</article>
-<?php endforeach ?>
+        <a class="link-block" href="<?= $investigation->url() ?>"></a>
+    </article>
+    <?php endforeach ?>
 
 </section>
 <?php else: ?>
 <p>Aucune enquête associée à ce dossier pour le moment.</p>
 <?php endif ?>
 
+
+
+    <section id="section__impacts">
+ 
+
+    <h3 class="container__title">4 impacts</h3>
+
+    <!-- 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">
+            <p>12 articles et reprises</p>
+            <p>1.5M de vues cumulées</p>
+        </div>
+        <details class="open-graph__details">
+        <summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
+            <div class="open-graph__inner">
+                <?php snippet('card-open-graph') ?>
+            </div>
+        </details>
+    </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>
+    </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>
+
+    </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>
+        </div>
+    </div>
+</section>
+</div>
+
+
+
 </main>
 <?php snippet('footer') ?>