blueprint & templates Impacts

assets/css/components/_card-block.scss

@@ -65,15 +65,32 @@
     .investigations{
         text-decoration: none;
         list-style: none;
+        // border-top: var(--border-light);
+        padding-top: calc(var(--spacing)*0.5);
+        width: 100%;
+
+        z-index: 100;
         li{
-            font-size: var(--fs-small);
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             color: var(--color-txt-light);
+            font-size: var(--fs-small);
             a{
                 text-decoration: none;
+                color: var(--color-txt-light);
             }
             a::before{
                 content: "↪ "
             }
+            &:hover{
+                a{
+                    text-decoration: underline 1px;
+                    text-underline-offset: 2px;
+                    color: var(--color-txt);
+                }
+            }
         }
     }
 
@@ -100,6 +117,10 @@
         top: 3px;
     }
 
+    // .link-block{
+    //     background-color: rgba(255, 0, 0, 0.781);
+    // }
+
    
 
 

assets/css/components/_category.scss

@@ -23,3 +23,69 @@
 
 
 
+
+.page__type{
+    
+    height: calc(var(--h-block)*1);
+    border-radius: var(--radius-small);
+    border: var(--border-medium);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5ch;
+    padding-top: 5px;
+
+    font-size: var(--fs-small);
+
+    background-color: var(--color-bg);
+    color: var(--color-txt-light);
+    font-weight: 500;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-transform: uppercase;
+
+      @media #{$small} {
+          height: calc(var(--h-block)*0.75);
+       font-size: var(--fs-xsmall);
+           padding: 0 1ch;
+             padding-top: 3px;
+
+    }
+
+}
+
+
+.page__category{
+    
+    height: calc(var(--h-block)*1);
+    border-radius: var(--radius-small);
+    margin-left: calc(var(--padding-inner)*0.25);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5ch;
+    padding-top: 5px;
+
+    font-size: var(--fs-small);
+
+    background-color: var(--color-txt);
+    color: var(--color-bg);
+    font-weight: 500;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-transform: uppercase;
+
+      @media #{$small} {
+          height: calc(var(--h-block)*0.75);
+       font-size: var(--fs-xsmall);
+           padding: 0 1ch;
+             padding-top: 3px;
+
+    }
+}
+
+

assets/css/components/_figures.scss

@@ -1,11 +1,10 @@
 
 @mixin figure-16-9{ 
-    & > picture, 
     & > figure{
         aspect-ratio: 16/9;
         display: flex;
         overflow: hidden;
-        img{
+        img, picture{
             width: 100%;
             height: 100%;
             object-fit: cover;
@@ -16,49 +15,3 @@
 }
 
 
-
-@mixin figure-3-1(){
-    & > picture,
-    & > figure{
-        aspect-ratio: 3/1;
-        overflow: hidden;
-        img{
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    }
-}
-
-
-
-// @mixin figure-2-1(){
-//     & > picture,
-//     & > figure{
-//         aspect-ratio: 2/1;
-//         overflow: hidden;
-//         img{
-//             width: 100%;
-//             height: 100%;
-//             object-fit: cover;
-//         }
-//     }
-// }
-
-// @mixin figure-16-9-hover{
-//     figure{
-//         aspect-ratio: 16/9;
-//         display: flex;
-//         overflow: hidden;
-//         img{
-//             width: 100%;
-//             height: 100%;
-//             object-fit: cover;
-//             transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-
-//         }
-//     }
-//     &:hover{
-//         figure img{  transform: scale(1.05);  }
-//     }
-// }

assets/css/partials/_main-layout.scss

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

assets/css/partials/_page-header.scss

@@ -1,41 +1,10 @@
-.page__type{
-    
-    height: calc(var(--h-block)*1);
-    border-radius: var(--radius-small);
-    border: var(--border-medium);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1.5ch;
-    padding-top: 5px;
-
-    font-size: var(--fs-small);
-
-    background-color: var(--color-bg);
-    color: var(--color-txt-light);
-    font-weight: 500;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-transform: uppercase;
-
-      @media #{$small} {
-          height: calc(var(--h-block)*0.75);
-       font-size: var(--fs-xsmall);
-           padding: 0 1ch;
-             padding-top: 3px;
-
-    }
-
-}
-
 
 
 main .page__header {
     margin-top: calc(var(--spacing) * 3);
     margin-bottom: calc(var(--spacing) * 2);
   
+ 
     @media #{$small} {
       margin-top: calc(var(--spacing) * 1);
 
@@ -61,11 +30,18 @@ main .page__header {
       
     }
 
-    .description {
+    .date{
+      display: block;
+       margin-top: calc(var(--spacing) * -1);
+      margin-bottom: calc(var(--spacing) * 1.5);
+      color: var(--color-txt-light);
+    }
+
+    .page__description {
       font-size: var(--fs-text);
       margin-bottom: calc(var(--spacing) * 3);
 
-
+   max-width: var(--max-w-content);
       // @media #{$small} {
       //   font-size: var(--fs-small);
       //   font-weight: 500;

assets/css/style.css

@@ -668,6 +668,58 @@ button:disabled {
   white-space: nowrap;
 }
 
+.page__type {
+  height: calc(var(--h-block) * 1);
+  border-radius: var(--radius-small);
+  border: var(--border-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5ch;
+  padding-top: 5px;
+  font-size: var(--fs-small);
+  background-color: var(--color-bg);
+  color: var(--color-txt-light);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+@media screen and (max-width: 768px) {
+  .page__type {
+    height: calc(var(--h-block) * 0.75);
+    font-size: var(--fs-xsmall);
+    padding: 0 1ch;
+    padding-top: 3px;
+  }
+}
+
+.page__category {
+  height: calc(var(--h-block) * 1);
+  border-radius: var(--radius-small);
+  margin-left: calc(var(--padding-inner) * 0.25);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5ch;
+  padding-top: 5px;
+  font-size: var(--fs-small);
+  background-color: var(--color-txt);
+  color: var(--color-bg);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+@media screen and (max-width: 768px) {
+  .page__category {
+    height: calc(var(--h-block) * 0.75);
+    font-size: var(--fs-xsmall);
+    padding: 0 1ch;
+    padding-top: 3px;
+  }
+}
+
 .keywords {
   list-style: none;
   display: flex;
@@ -1316,12 +1368,12 @@ button.sort[data-sort-type=up] .arrow {
   flex-direction: column;
   padding: var(--padding-inner);
 }
-.card--article > picture, .card--article > figure {
+.card--article > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--article > picture img, .card--article > figure img {
+.card--article > figure img, .card--article > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1485,16 +1537,15 @@ button.sort[data-sort-type=up] .arrow {
 .card--article-small:first-of-type {
   border-top: var(--border-light);
 }
-.card--package > picture, .card--package > figure,
+.card--package > figure,
-.card--article-small > picture,
 .card--article-small > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--package > picture img, .card--package > figure img,
+.card--package > figure img, .card--package > figure picture,
-.card--article-small > picture img,
+.card--article-small > figure img,
-.card--article-small > figure img {
+.card--article-small > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1713,12 +1764,12 @@ button.sort[data-sort-type=up] .arrow {
 .card--block:hover::before {
   border-color: var(--color-txt);
 }
-.card--block > picture, .card--block > figure {
+.card--block > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--block > picture img, .card--block > figure img {
+.card--block > figure img, .card--block > figure picture {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1772,17 +1823,31 @@ button.sort[data-sort-type=up] .arrow {
 .card--block .investigations {
   text-decoration: none;
   list-style: none;
+  padding-top: calc(var(--spacing) * 0.5);
+  width: 100%;
+  z-index: 100;
 }
 .card--block .investigations li {
-  font-size: var(--fs-small);
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-txt-light);
+  font-size: var(--fs-small);
 }
 .card--block .investigations li a {
   text-decoration: none;
+  color: var(--color-txt-light);
 }
 .card--block .investigations li a::before {
   content: "↪ ";
 }
+.card--block .investigations li:hover a {
+  -webkit-text-decoration: underline 1px;
+          text-decoration: underline 1px;
+  text-underline-offset: 2px;
+  color: var(--color-txt);
+}
 .card--block .card--open-graph {
   width: 100%;
   margin: calc(var(--spacing) * 0.5) 0;
@@ -2691,36 +2756,13 @@ 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;
 }
-
+body main .page__header {
-.page__type {
+  max-width: var(--max-w-cards);
-  height: calc(var(--h-block) * 1);
+  margin-inline: auto;
-  border-radius: var(--radius-small);
-  border: var(--border-medium);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5ch;
-  padding-top: 5px;
-  font-size: var(--fs-small);
-  background-color: var(--color-bg);
-  color: var(--color-txt-light);
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-transform: uppercase;
-}
-@media screen and (max-width: 768px) {
-  .page__type {
-    height: calc(var(--h-block) * 0.75);
-    font-size: var(--fs-xsmall);
-    padding: 0 1ch;
-    padding-top: 3px;
-  }
 }
 
 main .page__header {
@@ -2752,9 +2794,16 @@ main .page__header .page__title {
     margin-bottom: calc(var(--spacing) * 1);
   }
 }
-main .page__header .description {
+main .page__header .date {
+  display: block;
+  margin-top: calc(var(--spacing) * -1);
+  margin-bottom: calc(var(--spacing) * 1.5);
+  color: var(--color-txt-light);
+}
+main .page__header .page__description {
   font-size: var(--fs-text);
   margin-bottom: calc(var(--spacing) * 3);
+  max-width: var(--max-w-content);
 }
 
 .container-cards {
@@ -2873,7 +2922,7 @@ main .page__header .description {
   max-width: var(--max-w-content);
   margin-bottom: 0px;
 }
-[data-template=investigation] main .page__header .description {
+[data-template=investigation] main .page__header .page__description {
   margin-bottom: 0px;
 }
 [data-template=investigation] main .page__content {

assets/css/template/_investigation.scss

@@ -8,7 +8,7 @@
     margin-bottom: 0px;
 
  
-    .description{
+    .page__description{
       margin-bottom: 0px;
     }
   }

site/blueprints/pages/database.yml

@@ -24,6 +24,9 @@ columns:
       methodologies:
         label: Méthodologies
         type: tags
+      impactCategories:
+        label: Catégories des impacts
+        type: tags
       robots:
         type: hidden
         default: noindex, nofollow

site/blueprints/pages/impact.yml

@@ -2,9 +2,63 @@ title: Impact
 
 tabs:
   contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').impactCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des impacts
+              
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
           linkedInvestigations:
+            label: Enquêtes liées
             type: pages
-      template: investigation
+            query: page('enquetes').children.listed
-    linkedMedias:
+            multiple: true
-      type: url
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
   seo: seo/page

site/blueprints/pages/impacts.yml

@@ -3,4 +3,25 @@ title: Impacts
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          impactsSection:
+            type: pages
+            label: Liste des impacts
+            template: impact
+            create: impact
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
   seo: seo/page

site/snippets/header.php

@@ -50,6 +50,7 @@
         </ul>
     </nav>
 
+    <?php if ($page->template() == 'investigation'): ?>
     <nav id="nav-investigation">
       <!-- <p class="title"><?= $page->title()->esc() ?></p> -->
       <ul>
@@ -60,6 +61,7 @@
              <li><a href="#related-investigations">En lien</a></li>
       </ul>
     </nav>
+    <?php endif ?>
       
     <button id="theme-toggle">
         <svg style="fill: var(--color-txt)" class="switch" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">

site/templates/impact.php

@@ -0,0 +1,53 @@
+<?php snippet('header') ?>
+
+<main>
+
+<header class="page__header">
+    <p class="page__type">Impact</p>
+    <?php
+        $categories = $page->category()->split();
+        $category   = $categories[0] ?? '';
+    ?>
+    <?php if ($category): ?>
+    <p class="page__category"><?= esc($category) ?></p>
+    <?php endif ?>
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+    <?php if ($page->created()->isNotEmpty()): ?>
+    <time class="date" datetime="<?= $page->created()->toDate('yyyy-MM-dd') ?>"><?= $page->created()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
+    <?php endif ?>
+    <?php if ($page->chapo()->isNotEmpty()): ?>
+    <p class="page__description"><?= $page->chapo()->inline() ?></p>
+    <?php endif ?>
+</header>
+
+
+<div class="page__content">
+
+    <?php if ($cover = $page->cover()->toFile()): ?>
+    <figure class="impact__cover">
+        <?php snippet('picture', ['file' => $cover]) ?>
+    </figure>
+    <?php endif ?>
+
+    <?php if ($page->body()->isNotEmpty()): ?>
+    <div class="impact__body">
+        <?= $page->body()->toBlocks() ?>
+    </div>
+    <?php endif ?>
+
+    <?php $investigations = $page->linkedInvestigations()->toPages() ?>
+    <?php if ($investigations->isNotEmpty()): ?>
+    <aside class="impact__investigations">
+        <h3>Enquêtes liées</h3>
+        <ul class="investigations">
+            <?php foreach ($investigations as $investigation): ?>
+            <li><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></li>
+            <?php endforeach ?>
+        </ul>
+    </aside>
+    <?php endif ?>
+
+</div>
+
+</main>
+<?php snippet('footer') ?>

site/templates/impacts.php

@@ -6,7 +6,7 @@
     <h2 class="page__title"><?= $page->title() ?></h2>
 
     <?php if ($page->chapo()->isNotEmpty()): ?>
-    <div class="description-medium">
+    <div class="page__description">
         <p><?= $page->chapo() ?></p>
     </div>
     <?php endif ?>
@@ -19,10 +19,9 @@
         <button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Filtrer par type</p></button>
         <div class="dropdown__content">
             <ul>
-                <li><button type="button" data-filter="france">Médiatique</button></li>
+                <?php foreach (page('database')->impactCategories()->split() as $cat): ?>
-                <li><button type="button" data-filter="cisjordanie">Judiciaire</button></li>
+                <li><button type="button" data-filter="<?= esc(Str::slug($cat)) ?>"><?= esc($cat) ?></button></li>
-                <li><button type="button" data-filter="etats-unis">Institutionnel</button></li>
+                <?php endforeach ?>
-                <li><button type="button" data-filter="gaza">Public</button></li>
             </ul>
         </div>
     </div>
@@ -32,100 +31,46 @@
 
     <div class="grid-sizer"></div>
 
-    <!-- Contenu statique temporaire -->
+    <?php foreach ($page->children()->listed()->sortBy('created', 'desc') as $impact): ?>
 
-    <div class="card--block has-link" data-impact-type="judiciaire">
+    <?php
-        <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
+        $categories = $impact->category()->split();
+        $category   = $categories[0] ?? '';
+        $cover      = $impact->cover()->toFile();
+        $investigations = $impact->linkedInvestigations()->toPages();
+    ?>
 
+    <div class="card--block has-link" data-impact-type="<?= esc(Str::slug($category)) ?>">
+
+        <?php if ($cover): ?>
+        <figure><?php snippet('picture', ['file' => $cover]) ?></figure>
+        <?php endif ?>
 
         <div class="group-top">
             <p class="type">Impact</p>
-            <p class="category">Judiciaire</p>
+            <?php if ($category): ?>
+            <p class="category"><?= esc($category) ?></p>
+            <?php endif ?>
         </div>
-        <h3 class="title">L’analyse d’INdex fait l’objet d’un reportage par CNN</h3>
 
-        <p class="date">24 janvier 2026</p>
+        <h3 class="title"><?= $impact->title()->esc() ?></h3>
 
+        <?php if ($impact->created()->isNotEmpty()): ?>
+        <p class="date"><?= $impact->created()->toDate('d MMMM yyyy', 'fr_FR') ?></p>
+        <?php endif ?>
+
+        <?php if ($investigations->isNotEmpty()): ?>
         <ul class="investigations">
-            <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">L'homicide de Renée Goof</a></li>
+            <?php foreach ($investigations as $investigation): ?>
+            <li><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></li>
+            <?php endforeach ?>
         </ul>
-        <a class="link-block" href="#" target="_blank"></a>
+        <?php endif ?>
+
+        <a class="link-block" href="<?= $impact->url() ?>"></a>
     </div>
 
-     <div class="card--block has-link" data-impact-type="judiciaire">
+    <?php endforeach ?>
-         <div class="group-top">
-            <p class="type">Impact</p>
-            <p class="category">Judiciaire</p>
-        </div>
-            <h3 class="title">Ouverture d’une information judiciaire</h3>
-
-
-            
-           
-            <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>
-            </ul>
-            <a class="link-block" href="#" target="_blank"></a>
-        </div>
-
-         <div class="card--block has-link" data-impact-type="judiciaire">
-         
-            <figure><img src="/assets/images/SequenceOrbit_Finale_1245.png"></figure>
-                <div class="group-top">
-            <p class="type">Impact</p>
-            <p class="category">Judiciaire</p>
-        </div>
-            <h3 class="title">LA RECONSTITUTION D’INDEX PROJETÉE EN AUDIENCE AU TRIBUNAL DE BOBIGNY</h3>
-                    
-            <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>
-            </ul>
-            <a class="link-block" href="#" target="_blank"></a>
-        </div>
-
-
-        <div class="card--block has-link" data-impact-type="judiciaire">
-             <div class="group-top">
-            <p class="type">Impact</p>
-            <p class="category">Médiathique</p>
-        </div>
-            <h3 class="title">INDEX DANS L’ÉMISSION “LE DESSOUS DES IMAGES” (ARTE)</h3>
-                                   
-
-            <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>
-            </ul>
-            <a class="link-block" href="#" target="_blank"></a>
-        </div>
-
-   
-
-
-
-
-        <div class="card--block has-link" data-impact-type="judiciaire">
-            <figure><img src="/assets/images/eclairages.png"></figure>
-               <div class="group-top">
-            <p class="type">Impact</p>
-            <p class="category">Public</p>
-        </div>
-            <h3 class="title">“CONTRE-ENQUÊTES NUMÉRIQUES” : CONFÉRENCE À L’ENSAD (PARIS)</h3>
-                   
-
-            <p class="date">24 janvier 2026</p>
-            <a class="link-block" href="#" target="_blank"></a>
-        </div>
-
-
-
-  
-
-
-
 
 </div>
 

site/templates/investigation.php

@@ -1,20 +1,5 @@
 <?php snippet('header') ?>
 
-<!-- 
-<div class="btn--group__mobile">
-<div class="dropdown dropdown--position-mobile">
-    <button class="dropdown__trigger btn--bold-inline no-link">
-        <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
-        <span class="text">Partager</span>
-    </button>
-    <div class="dropdown__content">
-        <?php snippet('modal-share') ?>
-    </div>
-</div>
-</div> -->
-
-
-
 
 <main>
 
@@ -23,7 +8,7 @@
     <p class="page__type">Enquête</p>
     <h2 class="page__title"><?= $page->title()->esc() ?></h2>
     <?php if ($page->chapo()->isNotEmpty()): ?>
-    <p class="description"><?= $page->chapo()->inline() ?></p>
+    <p class="page__description"><?= $page->chapo()->inline() ?></p>
     <?php endif ?>
 </header>