investigation, video first

assets/css/components/_buttons.scss

@@ -70,10 +70,17 @@ button:disabled{
     line-height: 1;
     overflow: hidden;
     white-space: nowrap;
+    svg{
+        width: 18px;
+        height: 18px;
+        position: relative;
+        top: -1px;
+    }
     a{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         width: 100%;
         height: 100%;
         padding: 0 2ch;
@@ -83,10 +90,12 @@ button:disabled{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         padding: 0 2ch;
         padding-top: 4px;
 
     }
+ 
     
 }
 
@@ -95,29 +104,33 @@ button:disabled{
 .btn--bold{
     background-color: var(--color-txt);
     color: var(--color-bg);
+    svg{ fill: var(--color-bg); }
     &:hover{
         background-color: var(--color-accent);
         border-color: var(--color-accent);
         a{
             color: var(--color-bg);  
         }
+        svg{ fill: var(--color-bg); }
     }
   
 }
 
 .btn--bold-inline{
     background-color: var(--color-bg);
-}
+    svg{ fill: var(--color-txt); }
-
+    &:hover{
-.btn--bold-inline:hover{
-    background-color: var(--grey-800);
-    color: var(--color-txt);
-    a{
         background-color: var(--grey-800);
         color: var(--color-txt);
+        a{
+            background-color: var(--grey-800);
+            color: var(--color-txt);
+        }
     }
+    
 }
 
+
 .btn--light{
     border: var(--border-light);
 }
@@ -151,7 +164,6 @@ button:disabled{
 
     cursor: pointer;
 
-
     .icon, .txt{ z-index: 10; }
 
     .icon{

assets/css/components/_hero.scss

@@ -1,13 +1,24 @@
    #hero{
-        width: calc(100vw - var(--padding-body)*4);
+        width: calc(100vw - var(--padding-body)*2);
         position: relative;
-       left: calc(var(--padding-body)*1);
+       left: 0;
 
-        @media #{$medium}{
+       .page-title-small{
-            width: calc(100vw - var(--padding-body)*2);
+        color: var(--color-txt-light);
-            position: relative;
+        font-size: var(--fs-small);
-            left: 0;
+       top: calc(var(--spacing)*0.25);
-        }
+       right: calc(var(--spacing)*0.25);
+        text-align: right;
+        position: absolute;
+        z-index: 200;
+    }
+
+
+        // @media #{$medium}{
+        //     width: calc(100vw - var(--padding-body)*2);
+        //     position: relative;
+        //     left: 0;
+        // }
 
         @media #{$small}{
             width: 100vw;

assets/css/components/_text.scss

@@ -2,7 +2,7 @@
     font-size: var(--fs-big);
     font-weight: normal;
     text-transform: uppercase;
-    margin: calc(var(--spacing)*2) auto;
+    margin: calc(var(--spacing)*1.5) auto;
     text-align: center;
     max-width: var(--max-w-container);
 

assets/css/style.css

@@ -332,11 +332,19 @@ button:disabled {
   overflow: hidden;
   white-space: nowrap;
 }
+.btn--bold svg,
+.btn--bold-inline svg {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  top: -1px;
+}
 .btn--bold a,
 .btn--bold-inline a {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   width: 100%;
   height: 100%;
   padding: 0 2ch;
@@ -347,6 +355,7 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   padding: 0 2ch;
   padding-top: 4px;
 }
@@ -355,6 +364,9 @@ button:disabled {
   background-color: var(--color-txt);
   color: var(--color-bg);
 }
+.btn--bold svg {
+  fill: var(--color-bg);
+}
 .btn--bold:hover {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
@@ -362,11 +374,16 @@ button:disabled {
 .btn--bold:hover a {
   color: var(--color-bg);
 }
+.btn--bold:hover svg {
+  fill: var(--color-bg);
+}
 
 .btn--bold-inline {
   background-color: var(--color-bg);
 }
-
+.btn--bold-inline svg {
+  fill: var(--color-txt);
+}
 .btn--bold-inline:hover {
   background-color: var(--grey-800);
   color: var(--color-txt);
@@ -531,16 +548,18 @@ button:disabled {
 }
 
 #hero {
-  width: calc(100vw - var(--padding-body) * 4);
+  width: calc(100vw - var(--padding-body) * 2);
   position: relative;
-  left: calc(var(--padding-body) * 1);
+  left: 0;
 }
-@media screen and (max-width: 1080px) {
+#hero .page-title-small {
-  #hero {
+  color: var(--color-txt-light);
-    width: calc(100vw - var(--padding-body) * 2);
+  font-size: var(--fs-small);
-    position: relative;
+  top: calc(var(--spacing) * 0.25);
-    left: 0;
+  right: calc(var(--spacing) * 0.25);
-  }
+  text-align: right;
+  position: absolute;
+  z-index: 200;
 }
 @media screen and (max-width: 768px) {
   #hero {
@@ -954,7 +973,7 @@ button:disabled {
   font-size: var(--fs-big);
   font-weight: normal;
   text-transform: uppercase;
-  margin: calc(var(--spacing) * 2) auto;
+  margin: calc(var(--spacing) * 1.5) auto;
   text-align: center;
   max-width: var(--max-w-container);
 }
@@ -1759,7 +1778,8 @@ body main {
     cursor: pointer;
   }
   [data-template=investigation-summary] main #hero {
-    margin: calc(var(--spacing) * 3) 0;
+    margin-top: calc(var(--spacing) * 1);
+    margin-bottom: calc(var(--spacing) * 3);
   }
   [data-template=investigation-summary] main .section__article {
     margin-left: var(--banner-medium);
@@ -1791,7 +1811,8 @@ body main {
     width: calc((100% - var(--max-w-content)) / 2);
   }
   [data-template=investigation-summary] main #hero {
-    margin: calc(var(--spacing) * 3) 0;
+    margin-top: 0;
+    margin-bottom: calc(var(--spacing) * 3);
   }
   [data-template=investigation-summary] main #hero figcaption {
     max-width: var(--max-w-content);
@@ -1818,11 +1839,6 @@ body main {
   max-width: calc(var(--max-w-content) + var(--rapport-w));
 }
 #rapport .rapport__header {
-  display: grid;
-  grid-template-columns: 1fr 140px;
-  -moz-column-gap: calc(var(--spacing) * 1.5);
-       column-gap: calc(var(--spacing) * 1.5);
-  row-gap: calc(var(--spacing) * 2);
   margin-top: calc(var(--spacing) * 2);
   max-width: var(--max-w-content);
   padding-bottom: calc(var(--spacing) * 0.5);
@@ -1830,7 +1846,7 @@ body main {
 #rapport .rapport__header .rapport__title-group {
   grid-column: span 2;
 }
-#rapport .rapport__header .title {
+#rapport .rapport__header .rapport__title-group .title {
   text-transform: uppercase;
   font-weight: normal;
   font-size: var(--fs-big);
@@ -1838,20 +1854,32 @@ body main {
   font-weight: normal;
   margin-top: calc(var(--spacing) * 1);
 }
-#rapport .rapport__header .subtitle {
+#rapport .rapport__header .rapport__title-group .subtitle {
   font-size: var(--fs-big);
   line-height: var(--leading-tight);
   margin-top: calc(var(--spacing) * 0.5);
   font-weight: normal;
 }
-#rapport .rapport__header dl {
+#rapport .rapport__header .rapport__figure {
-  align-self: end;
+  width: 100%;
+  aspect-ratio: 2/1;
+  margin-top: calc(var(--spacing) * 2);
+}
+#rapport .rapport__header .rapport__figure img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+#rapport .rapport__header .rapport__dl {
+  align-self: start;
   font-size: var(--fs-small);
   border-bottom: var(--border-light);
   flex-grow: 2;
   align-items: flex-start;
+  margin-top: calc(var(--spacing) * 0.5);
 }
-#rapport .rapport__header dl .dl__group {
+#rapport .rapport__header .rapport__dl .dl__group {
   display: grid;
   grid-gap: var(--padding-inner);
   grid-template-columns: 2fr 3fr;
@@ -1859,20 +1887,59 @@ body main {
   border-top: var(--border-light);
   padding: calc(var(--spacing) * 0.5) 0;
 }
-#rapport .rapport__header dl dt {
+#rapport .rapport__header .rapport__dl dt {
   color: var(--color-txt-light);
   padding-right: 1ch;
 }
-#rapport .rapport__header .thumbnail-pdf {
+#rapport .rapport__header .thumbnail--group {
-  width: 140px;
-}
-#rapport .rapport__header .thumbnail-pdf figure {
-  border: var(--border-medium);
   display: flex;
+  gap: calc(var(--spacing) * 0.5);
+  margin-top: calc(var(--spacing) * 1);
 }
-#rapport .rapport__header .thumbnail-pdf .btn--small {
+#rapport .rapport__header .btn--group {
+  display: flex;
+  gap: calc(var(--spacing) * 0.5);
+}
+#rapport .rapport__header .thumbnail {
+  max-width: 260px;
+  display: grid;
+  display: none;
+  grid-template-columns: 2fr 3fr;
+  -moz-column-gap: calc(var(--padding-inner) * 1);
+       column-gap: calc(var(--padding-inner) * 1);
+  padding: calc(var(--padding-inner) * 0.5);
+  border: var(--border-light);
+}
+#rapport .rapport__header .thumbnail figure {
+  display: flex;
+  aspect-ratio: 4/3;
+  grid-column: 1;
+  grid-row: 1/3;
+}
+#rapport .rapport__header .thumbnail figure img {
   width: 100%;
-  margin-top: calc(var(--spacing) * 0.25);
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+#rapport .rapport__header .thumbnail .thumbnail__title {
+  padding-top: calc(var(--padding-inner) * 0.5);
+}
+#rapport .rapport__header .thumbnail .thumbnail__title a {
+  text-decoration: none;
+}
+#rapport .rapport__header .thumbnail button {
+  align-self: end;
+  display: flex;
+  align-items: end;
+  justify-content: end;
+  padding-right: calc(var(--padding-inner) * 0.5);
+  padding-bottom: calc(var(--padding-inner) * 0.5);
+}
+#rapport .rapport__header .thumbnail button svg {
+  width: 15px;
+  height: 15px;
+  fill: var(--color-txt);
 }
 #rapport .rapport__content {
   max-width: var(--max-w-content);
@@ -1893,18 +1960,20 @@ body main {
 #rapport .rapport__content ul {
   padding-left: 3ch;
 }
+#rapport .rapport__content:target {
+  padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
+}
 
 #rapport__aside {
   width: var(--rapport-w);
   position: fixed;
   top: calc(var(--header-h) + var(--padding-body));
   left: var(--padding-body);
-  border: var(--border-light);
+  height: calc(100vh - var(--header-h) - var(--padding-body) * 4);
-  height: calc(100vh - var(--header-h) - var(--padding-body) * 2);
 }
 #rapport__aside .tabs {
   display: flex;
-  border-bottom: var(--border-light);
+  border: var(--border-light);
   height: calc(var(--h-block) * 1.25);
 }
 #rapport__aside .tabs .tab {
@@ -1929,6 +1998,8 @@ body main {
   padding: var(--padding-body);
   height: calc(100% - var(--h-block) * 1.25);
   overflow: scroll;
+  border: var(--border-light);
+  border-top: none;
 }
 #rapport__aside #toc ul {
   list-style: none;
@@ -1941,6 +2012,9 @@ body main {
 #rapport__aside #toc li.selected {
   background-color: var(--grey-800);
 }
+#rapport__aside #toc li:hover {
+  background-color: var(--grey-800);
+}
 #rapport__aside #toc .toc-level-1 {
   margin-bottom: calc(var(--spacing) * 0.5);
   font-weight: bold;
@@ -1952,6 +2026,10 @@ body main {
 #rapport__aside #toc a {
   text-decoration: none;
 }
+#rapport__aside #download-pdf {
+  margin: 0 auto;
+  margin-top: calc(var(--spacing) * 0.5);
+}
 
 #tab-print, #tab-toc {
   display: none;
@@ -1971,4 +2049,27 @@ body main {
 
 #tab-toc:checked ~ .content-aside #print-features {
   display: none;
+}
+
+#rapport {
+  --fig-outside: calc(var(--spacing)*2);
+}
+#rapport .container-figure {
+  width: calc(100% + var(--fig-outside) * 2);
+  position: relative;
+  left: calc(var(--fig-outside) * -1);
+}
+#rapport .fig-simple {
+  height: calc(100vh - var(--header-h) - var(--spacing) * 2);
+}
+#rapport .fig-simple figure {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#rapport .fig-simple figure img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
 }/*# sourceMappingURL=style.css.map */

assets/css/style.scss

@@ -34,6 +34,6 @@
 
 @import 'template/investigations';
 @import 'template/investigation-summary';
-@import 'template/investigation';
+@import 'template/rapport';
 
 

assets/css/template/_investigation-summary.scss

@@ -1,6 +1,7 @@
 [data-template="investigation-summary"]  main{
 
-        position: relative;
+  
+    position: relative;
     
 
 
@@ -261,8 +262,8 @@
         }
 
         #hero{
-            margin: calc(var(--spacing)*3) 0;
+            margin-top: calc(var(--spacing)*1);
-
+            margin-bottom: calc(var(--spacing)*3);
         }
 
       .section__article{
@@ -310,7 +311,8 @@
         }
 
         #hero{
-            margin: calc(var(--spacing)*3) 0;
+            margin-top: 0;
+            margin-bottom: calc(var(--spacing)*3);
             figcaption{ 
                 max-width: var(--max-w-content);
                 margin: 0 auto;

assets/css/template/_investigations.scss

@@ -1,6 +1,8 @@
 
 [data-template="investigations"] main{
+    
 
+  
     #container-cards{
      
         @media #{$x-small-up}{
@@ -11,6 +13,12 @@
             grid-auto-rows: minmax(100px, auto);
             grid-gap: calc(var(--padding-body)*1.5);
             margin-bottom: 10vh;
+
+
+
+         
+
+
         }
         @media #{$x-small}{
             margin-bottom: 10vh;
@@ -39,4 +47,7 @@
 
     }
 
+
+ 
+
 }

assets/css/template/_rapport.scss

@@ -11,10 +11,10 @@
 
     .rapport__header{
 
-        display: grid;
+        // display: grid;
-        grid-template-columns: 1fr 140px;
+        // grid-template-columns: 1fr 140px;
-        column-gap: calc(var(--spacing)*1.5);
+        // column-gap: calc(var(--spacing)*1.5);
-        row-gap: calc(var(--spacing)*2);
+        // row-gap: calc(var(--spacing)*2);
 
         margin-top: calc(var(--spacing)*2);
         max-width: var(--max-w-content);
@@ -23,34 +23,48 @@
 
         .rapport__title-group{
             grid-column: span 2;
+
+            .title{
+                text-transform: uppercase;
+                font-weight: normal;
+                font-size: var(--fs-big);
+                line-height: var(--leading-tight);
+                font-weight: normal;
+                margin-top: calc(var(--spacing)*1);
+            }
+    
+            .subtitle{
+                font-size: var(--fs-big);
+                line-height: var(--leading-tight);
+                margin-top: calc(var(--spacing)*0.5);
+                font-weight: normal;
+           
+            }
+    
         }
     
-        .title{
-            text-transform: uppercase;
-            font-weight: normal;
-            font-size: var(--fs-big);
-            line-height: var(--leading-tight);
-            font-weight: normal;
-            margin-top: calc(var(--spacing)*1);
-        }
-
-        .subtitle{
-            font-size: var(--fs-big);
-            line-height: var(--leading-tight);
-            margin-top: calc(var(--spacing)*0.5);
-            font-weight: normal;
-       
-        }
 
  
 
+        .rapport__figure{
+            width: 100%;
+            aspect-ratio: 2/1;
+            margin-top: calc(var(--spacing)*2);
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
 
-        dl{
+        }
-            align-self: end;
+
+        .rapport__dl{
+            align-self: start;
             font-size: var(--fs-small);
             border-bottom: var(--border-light);
             flex-grow: 2;
             align-items: flex-start;
+            margin-top: calc(var(--spacing)*0.5);
             .dl__group{
                 @include grid-content();
                 border-top: var(--border-light);
@@ -63,16 +77,61 @@
             }
         }
 
-        .thumbnail-pdf{
+
-            width: 140px;
+        .thumbnail--group{
+            display: flex;
+            gap: calc(var(--spacing)*0.5);
+            margin-top: calc(var(--spacing)*1);
+        }
+
+   
+
+        .btn--group{
+            display: flex;
+            gap: calc(var(--spacing)*0.5);
+        }
+
+        .thumbnail{ 
+            max-width: 260px;
+            display: grid;
+            display: none;
+            grid-template-columns: 2fr 3fr;
+            column-gap: calc(var(--padding-inner)*1);
+            padding: calc(var(--padding-inner)*0.5);
+            border: var(--border-light);
             figure{
-                border: var(--border-medium);
                 display: flex;
+                aspect-ratio: 4/3;
+                grid-column: 1;
+                grid-row: 1/3;
+                img{
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
             }
-        
+
-            .btn--small{
+            .thumbnail__title{
-                width: 100%;
+                padding-top: calc(var(--padding-inner)*0.5);
-                margin-top: calc(var(--spacing)*0.25);
+                a{
+                    text-decoration: none;
+                }
+            }
+
+            button{
+                align-self: end;
+                display: flex;
+                align-items: end;
+                justify-content: end;
+                padding-right: calc(var(--padding-inner)*0.5);
+                padding-bottom: calc(var(--padding-inner)*0.5);
+            }
+ 
+
+            button svg{
+                width: 15px;
+                height: 15px;
+                fill: var(--color-txt);
             }
         
         }
@@ -109,6 +168,10 @@
         }
     }
 
+    .rapport__content:target{
+        padding-top: calc(var(--header-h)*2 + var(--spacing))!important;
+    }
+
     
 
 
@@ -125,13 +188,13 @@
     position: fixed;
     top: calc(var(--header-h) + var(--padding-body));
     left: var(--padding-body);
-    border: var(--border-light);
+   
     // border-radius: var(--radius-small);
-    height: calc(100vh - var(--header-h) - var(--padding-body)*2);
+    height: calc(100vh - var(--header-h) - var(--padding-body)*4);
 
     .tabs{
         display: flex;
-        border-bottom: var(--border-light);
+        border: var(--border-light);
         height: calc(var(--h-block)*1.25);
 
         .tab{
@@ -162,6 +225,8 @@
         padding: var(--padding-body);
         height: calc(100% - var(--h-block)*1.25);
         overflow: scroll;
+        border: var(--border-light);
+        border-top: none;
     }
 
 
@@ -181,6 +246,10 @@
             background-color: var(--grey-800);
         }
 
+        li:hover{
+            background-color: var(--grey-800);
+        }
+
         .toc-level-1{
             margin-bottom: calc(var(--spacing)*0.5);
             font-weight: bold;
@@ -194,6 +263,11 @@
         }
 
     }
+
+    #download-pdf{
+        margin: 0 auto;
+        margin-top: calc(var(--spacing)*0.5);
+    }
 }
 
 
@@ -203,4 +277,31 @@
 #tab-print:checked ~ .content-aside #print-features{ display: block; }
 
 #tab-toc:checked ~ .content-aside #toc{ display: block; }
-#tab-toc:checked ~ .content-aside #print-features{ display: none; }
+#tab-toc:checked ~ .content-aside #print-features{ display: none; }
+
+
+
+
+#rapport{
+    --fig-outside: calc(var(--spacing)*2);
+    .container-figure{
+        width: calc(100% + var(--fig-outside)*2);
+        position: relative;
+        left: calc(var(--fig-outside)*-1);
+    }
+    .fig-simple{
+        height: calc(100vh - var(--header-h) - var(--spacing)*2);
+
+        figure{
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+        }
+    }
+}

assets/icons/pdf.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="550.801px" height="550.801px" viewBox="0 0 550.801 550.801" style="enable-background:new 0 0 550.801 550.801;"
+	 xml:space="preserve">
+<g>
+	<path d="M160.381,282.225c0-14.832-10.299-23.684-28.474-23.684c-7.414,0-12.437,0.715-15.071,1.432V307.6
+		c3.114,0.707,6.942,0.949,12.192,0.949C148.419,308.549,160.381,298.74,160.381,282.225z"/>
+	<path d="M272.875,259.019c-8.145,0-13.397,0.717-16.519,1.435v105.523c3.116,0.729,8.142,0.729,12.69,0.729
+		c33.017,0.231,54.554-17.946,54.554-56.474C323.842,276.719,304.215,259.019,272.875,259.019z"/>
+	<path d="M488.426,197.019H475.2v-63.816c0-0.398-0.063-0.799-0.116-1.202c-0.021-2.534-0.827-5.023-2.562-6.995L366.325,3.694
+		c-0.032-0.031-0.063-0.042-0.085-0.076c-0.633-0.707-1.371-1.295-2.151-1.804c-0.231-0.155-0.464-0.285-0.706-0.419
+		c-0.676-0.369-1.393-0.675-2.131-0.896c-0.2-0.056-0.38-0.138-0.58-0.19C359.87,0.119,359.037,0,358.193,0H97.2
+		c-11.918,0-21.6,9.693-21.6,21.601v175.413H62.377c-17.049,0-30.873,13.818-30.873,30.873v160.545
+		c0,17.043,13.824,30.87,30.873,30.87h13.224V529.2c0,11.907,9.682,21.601,21.6,21.601h356.4c11.907,0,21.6-9.693,21.6-21.601
+		V419.302h13.226c17.044,0,30.871-13.827,30.871-30.87v-160.54C519.297,210.838,505.47,197.019,488.426,197.019z M97.2,21.605
+		h250.193v110.513c0,5.967,4.841,10.8,10.8,10.8h95.407v54.108H97.2V21.605z M362.359,309.023c0,30.876-11.243,52.165-26.82,65.333
+		c-16.971,14.117-42.82,20.814-74.396,20.814c-18.9,0-32.297-1.197-41.401-2.389V234.365c13.399-2.149,30.878-3.346,49.304-3.346
+		c30.612,0,50.478,5.508,66.039,17.226C351.828,260.69,362.359,280.547,362.359,309.023z M80.7,393.499V234.365
+		c11.241-1.904,27.042-3.346,49.296-3.346c22.491,0,38.527,4.308,49.291,12.928c10.292,8.131,17.215,21.534,17.215,37.328
+		c0,15.799-5.25,29.198-14.829,38.285c-12.442,11.728-30.865,16.996-52.407,16.996c-4.778,0-9.1-0.243-12.435-0.723v57.67H80.7
+		V393.499z M453.601,523.353H97.2V419.302h356.4V523.353z M484.898,262.127h-61.989v36.851h57.913v29.674h-57.913v64.848h-36.593
+		V232.216h98.582V262.127z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

assets/js/header.js

@@ -14,16 +14,26 @@ export function headerScrollVisibility() {
   const header = document.getElementById("site-header");
   const hero = document.getElementById("hero");
 
-  if (!header || !hero) return;
+  if (!header) return;
 
   function checkScroll() {
-    const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
+    if (hero) {
-    const heroBottom = hero.getBoundingClientRect().bottom;
+      // Comportement avec hero
+      const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
+      const heroBottom = hero.getBoundingClientRect().bottom;
 
-    if (heroBottom <= headerHeight) {
+      if (heroBottom <= headerHeight) {
-      header.classList.add("is-visible");
+        header.classList.add("is-visible");
+      } else {
+        header.classList.remove("is-visible");
+      }
     } else {
-      header.classList.remove("is-visible");
+      // Comportement sans hero \
+      if (window.scrollY >= 300) {
+        header.classList.add("is-visible");
+      } else {
+        header.classList.remove("is-visible");
+      }
     }
   }
 

site/snippets/header.php

@@ -39,7 +39,7 @@
 
     <nav id="nav-highlight">
         <ul>
-            <li><a href="#">Enquêtes</a></li>
+            <li><a href="/enquetes">Enquêtes</a></li>
             <li><a href="#">Impact</a></li>
             <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
         </ul>

site/templates/investigation-summary.php

@@ -1,11 +1,6 @@
 <?php snippet('header') ?>
 
 
-        <header>
-            <p class="tag-inline">Enquête</p>
-            <h2 class="page-title">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
-            <p class="date-publish"></p>
-        </header>
 
 
 
@@ -54,6 +49,9 @@
              <!-- HERO VIDEO ------------------------------ -->
             <div id="hero" class="hero-video">
 
+            <p class="page-title-small">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
+
+
             <div class="player-container">
 
                 <div class="extract">
@@ -75,6 +73,13 @@
 
 
 
+        <header>
+            <p class="tag-inline">Enquête</p>
+            <h2 class="page-title">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
+            <p class="date-publish"></p>
+        </header>
+
+
             <div id="banner--page">
                 <nav id="nav--page">
                     <ul>

site/templates/investigation.php

@@ -14,31 +14,38 @@
 
     <div class="content-aside">
 
-    <nav id="toc">
+        <nav id="toc">
-    <ul>
+            <ul>
-        <li class="toc-level-1"><a href="#auteurs">Les auteurs de ce rapport</a></li>
+                <li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</a></li>
-        <li class="toc-level-1 selected"><a href="#rappel-faits">Rappel des faits</a></li>
+                <li class="toc-level-1"><a href="#rappel-faits">Rappel des faits</a></li>
-        <li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
+                <li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
-        <li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
+                <li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
-        <li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
+                <li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
-        <li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
+                <li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
-        <li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
+                <li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
-        <li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
+                <li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
-        <li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
+                <li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
-        <li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
+                <li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
-        <li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
+                <li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
-        <li class="toc-level-1"><a href="#observations">3. Observations</a></li>
+                <li class="toc-level-1"><a href="#observations">3. Observations</a></li>
-        <li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
+                <li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
-        <li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
+                <li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
-        <li class="toc-level-1"><a href="#contact">Contact</a></li>
+                <li class="toc-level-1"><a href="#contact">Contact</a></li>
-        </ul>
+            </ul>
-    </nav>
+        </nav>
 
-    <div id="print-features">
+        <div id="print-features">
-        <p>Paramétrage impression</p>
+            <p>Paramétrage impression</p>
-    </div>
+        </div>
 
     </div>
+
+    <button id="download-pdf" class="btn--bold">
+                <a href="#">
+                <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
+                <span class="text">Télégarcher le&nbsp;PDF</span>
+                </a>
+            </button>
 </aside>
 
 
@@ -52,8 +59,9 @@
         </div>
 
 
+        <figure class="rapport__figure"><img src="/assets/images/image-rapport.png"></figure>
 
-        <dl>
+        <dl class="rapport__dl">
             <div class="dl__group">
                 <dt>Auteurs du rapport</dt>
                 <dd>INDEX Investigation</dd>
@@ -62,13 +70,45 @@
                 <dt>Date du rapport</dt>
                 <dd><time datetime="2025-06-10">10 juin 2025</time></dd>
             </div>
+
         </dl>
 
 
-        <div class="thumbnail-pdf">
+        <div class="thumbnail--group">
-            <figure><img src="/assets/images/cover-rapport.png"></figure>
+            <div class="thumbnail thumbnail-pdf">
-            <button class="btn--small"><a href="#">Télégarcher le PDF</a></button>
+                <figure><img src="/assets/images/cover-rapport.png"></figure>
+                <p class="thumbnail__title"><a href="#">Télégarcher le&nbsp;PDF</a></p>
+                <button><?= svg('assets/icons/arrow-left.svg') ?></button>
+                <a class="link-block" href="#"></a>
+            </div>
+            <div class="thumbnail thumbnail-summary">
+                <figure><img src="/assets/images/Nidal-Khaled-Amirah.png"></figure>
+                <p class="thumbnail__title"><a href="#">Voir la&nbsp;synthèse</a></p>
+                <button><?= svg('assets/icons/arrow-left.svg') ?></button>
+                <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"></a>
+            </div>
         </div>
+
+
+
+        <div class="btn--group">
+            <button class="btn--bold-inline btn--light">
+                <a href="#">
+                <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
+                <span class="text">Télégarcher le&nbsp;PDF</span>
+                </a>
+            </button>
+
+            <button class="btn--bold-inline btn--light">
+                <a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
+                <span class="icon"><?= svg('assets/icons/play.svg') ?></span>
+                <span class="text">Voir la&nbsp;synthèse</span>
+                </a>
+            </button>
+        </div>
+
+               
+      
     </header> 
 
     
@@ -77,7 +117,7 @@
 
     <div class="rapport__content">
 
-    <div class="section-content">
+    <div class="section-content" id="auteurs">
         <h3 class="section-title">Les auteurs de ce rapport</h3>
    
 
@@ -107,28 +147,133 @@ du présent rapport sont : </p>
     <div class="section-content">
         <h3 class="section-title">Rappel des faits</h3>
     <p>
-    Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
+        Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
-lors d'une intervention policière à Châlette-sur-Loing.
+    lors d'une intervention policière à Châlette-sur-Loing.
-</p>
+    </p>
-<p>
+    <p>
-Atteint de schizophrénie dysthymique et suivi pour des troubles
+    Atteint de schizophrénie dysthymique et suivi pour des troubles
-bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
+    bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
-avec un couteau le 19 août 2017, déclenchant une alerte auprès
+    avec un couteau le 19 août 2017, déclenchant une alerte auprès
-des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
+    des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
-Loing, M. BICO, dans un état d’agitation extrême et tenant des
+    Loing, M. BICO, dans un état d’agitation extrême et tenant des
-propos incohérents, s'était enfermé dans son véhicule, exhibant un
+    propos incohérents, s'était enfermé dans son véhicule, exhibant un
-couteau. Deux équipages de police, soit sept agents, sont intervenus.
+    couteau. Deux équipages de police, soit sept agents, sont intervenus.
-Face à son refus de se rendre, les policiers ont tenté de le maîtriser
+    Face à son refus de se rendre, les policiers ont tenté de le maîtriser
-en usant de gaz lacrymogène et en tentant de briser le pare-brise
+    en usant de gaz lacrymogène et en tentant de briser le pare-brise
-de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
+    de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
-plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
+    plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
-déplacé un second véhicule de police qui obstruait la voie située sur
+    déplacé un second véhicule de police qui obstruait la voie située sur
-sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
+    sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
-policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
+    policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
-mortellement atteint par deux projectiles et son décès a été constaté
+    mortellement atteint par deux projectiles et son décès a été constaté
-sur place. L'incident a été observé par plusieurs témoins et filmé sous
+    sur place. L'incident a été observé par plusieurs témoins et filmé sous
-divers angles.
+    divers angles.
-</p>
+    </p>
+</div>
+
+
+<div class="section-content" id="rappel-faits">
+<h3 class="section-title">MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
+
+    <p>
+    Les faits examinés dans ce rapport se sont déroulés sur le parking du
+centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
+à Vénissieux (69), dans la proche banlieue de Lyon. Nous avons procédé
+à une modélisation numérique en 3D dudit parking et des bâtiments qui
+l’entourent.</p>
+
+
+<div class="container-figure fig-simple">
+    <figure><img src="/assets/images/adam-raihane/fig-1-a.png"></figure>
+    <!-- <figure><img src="/assets/images/adam-raihane/fig-1-b.png"></figure> -->
+</div>
+</div>
+
+
+
+
+<div class="section-content">
+        <h3 class="section-title">Rappel des faits</h3>
+    <p>
+        Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
+    lors d'une intervention policière à Châlette-sur-Loing.
+    </p>
+    <p>
+    Atteint de schizophrénie dysthymique et suivi pour des troubles
+    bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
+    avec un couteau le 19 août 2017, déclenchant une alerte auprès
+    des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
+    Loing, M. BICO, dans un état d’agitation extrême et tenant des
+    propos incohérents, s'était enfermé dans son véhicule, exhibant un
+    couteau. Deux équipages de police, soit sept agents, sont intervenus.
+    Face à son refus de se rendre, les policiers ont tenté de le maîtriser
+    en usant de gaz lacrymogène et en tentant de briser le pare-brise
+    de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
+    plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
+    déplacé un second véhicule de police qui obstruait la voie située sur
+    sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
+    policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
+    mortellement atteint par deux projectiles et son décès a été constaté
+    sur place. L'incident a été observé par plusieurs témoins et filmé sous
+    divers angles.
+    </p>
+</div>
+
+
+
+<div class="section-content">
+        <h3 class="section-title">Rappel des faits</h3>
+    <p>
+        Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
+    lors d'une intervention policière à Châlette-sur-Loing.
+    </p>
+    <p>
+    Atteint de schizophrénie dysthymique et suivi pour des troubles
+    bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
+    avec un couteau le 19 août 2017, déclenchant une alerte auprès
+    des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
+    Loing, M. BICO, dans un état d’agitation extrême et tenant des
+    propos incohérents, s'était enfermé dans son véhicule, exhibant un
+    couteau. Deux équipages de police, soit sept agents, sont intervenus.
+    Face à son refus de se rendre, les policiers ont tenté de le maîtriser
+    en usant de gaz lacrymogène et en tentant de briser le pare-brise
+    de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
+    plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
+    déplacé un second véhicule de police qui obstruait la voie située sur
+    sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
+    policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
+    mortellement atteint par deux projectiles et son décès a été constaté
+    sur place. L'incident a été observé par plusieurs témoins et filmé sous
+    divers angles.
+    </p>
+</div>
+
+
+<div class="section-content">
+        <h3 class="section-title">Rappel des faits</h3>
+    <p>
+        Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
+    lors d'une intervention policière à Châlette-sur-Loing.
+    </p>
+    <p>
+    Atteint de schizophrénie dysthymique et suivi pour des troubles
+    bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
+    avec un couteau le 19 août 2017, déclenchant une alerte auprès
+    des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
+    Loing, M. BICO, dans un état d’agitation extrême et tenant des
+    propos incohérents, s'était enfermé dans son véhicule, exhibant un
+    couteau. Deux équipages de police, soit sept agents, sont intervenus.
+    Face à son refus de se rendre, les policiers ont tenté de le maîtriser
+    en usant de gaz lacrymogène et en tentant de briser le pare-brise
+    de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
+    plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
+    déplacé un second véhicule de police qui obstruait la voie située sur
+    sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
+    policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
+    mortellement atteint par deux projectiles et son décès a été constaté
+    sur place. L'incident a été observé par plusieurs témoins et filmé sous
+    divers angles.
+    </p>
 </div>
 
 </article>