studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: studio-variable:main
Branches Tags
studio-variable:main
studio-variable:rapport
studio-variable:back_enquete_antonin
studio-variable:correction_logo
studio-variable:back_enquetes
..
compare: studio-variable:rapport
Branches Tags
studio-variable:main
studio-variable:rapport
studio-variable:back_enquete_antonin
studio-variable:correction_logo
studio-variable:back_enquetes

No commits in common. "main" and "rapport" have entirely different histories.
main ... rapport

89 changed files with 2749 additions and 6776 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.claude/settings.local.json
View file

@ -3,9 +3,7 @@
"allow": [ "allow": [
"Bash(git add:*)", "Bash(git add:*)",
"Bash(git commit:*)", "Bash(git commit:*)",
"Bash(cat:*)", "Bash(cat:*)"
"WebFetch(domain:unicode-org.github.io)",
"Bash(git mv:*)"
], ],
"deny": [], "deny": [],
"ask": [] "ask": []

2
.forgejo/workflows/deploy.yml
View file

@ -32,7 +32,7 @@ jobs:
set ftp:ssl-allow no set ftp:ssl-allow no
open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST
mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ -x header.php site site
mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby
mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor
quit quit

2
.gitignore vendored
View file

@ -61,4 +61,4 @@ Icon
# Local # Local
local/ local/
.claude /local/*

58
assets/css/base/_body.scss
View file

@ -29,6 +29,9 @@ body{
color: var(--color-txt); color: var(--color-txt);
background-color: var(--color-bg); background-color: var(--color-bg);
width: 100vw;
overflow-x: hidden;
} }
img{ img{
@ -48,7 +51,7 @@ img{
// } // }
} }
.swiper-button-next, .swiper-button-prev,
body, #site-header, #site-footer{ body, #site-header, #site-footer{
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
@ -59,56 +62,3 @@ body, #site-header, #site-footer{
grid-template-columns: 2fr 3fr; grid-template-columns: 2fr 3fr;
position: relative; position: relative;
} }
@mixin hide-scroll(){
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
@mixin clamp($lines) {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
@mixin hover-card-line(){
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
position: relative;
&::before{
content: '';
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
&:hover{
background-color: var(--grey-950);
border-color: var(--color-txt);
&::before{
border-color: var(--color-txt);
}
}
}
body.menu-open,
body.is-hidden{
overflow-y: hidden;
main, footer, #nav-highlight, .btn--back-to-top{
transition: opacity .3s ease-in;
opacity: 0.1;
}
}

5
assets/css/base/_responsive.scss
View file

@ -11,8 +11,3 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
@media #{$medium}{ @media #{$medium}{
} }
@media #{$x-small}{
}

18
assets/css/base/_var.scss
View file

@ -9,18 +9,16 @@
// --fs-big: 38px; // --fs-big: 38px;
--fs-xsmall: 10px; --fs-xsmall: 10px;
--fs-small: 16px; --fs-small: 12px;
--fs-normal: 20px; --fs-normal: 16px;
--fs-medium: 24px; --fs-medium: 20px;
--fs-big: 30px; --fs-big: 30px;
--fs-xbig: 38px; --fs-xbig: 38px;
--fs-button-bold: 22px; --fs-button-bold: 22px;
--max-w-content: 640px; --max-w-content: 700px;
--max-w-cards: 940px; --max-w-container: 1280px;
--z-header: 2000;
--panel-w: 310px;
@media #{$small} { @media #{$small} {
--fs-medium: 20px; --fs-medium: 20px;
@ -43,7 +41,6 @@
--grey-400: #969696; --grey-400: #969696;
--grey-600: #6d6d6d; --grey-600: #6d6d6d;
--grey-800: #383838; --grey-800: #383838;
--grey-950: #222222;
--color-bg: #161616; --color-bg: #161616;
--color-txt: #ffffff; --color-txt: #ffffff;
@ -99,16 +96,15 @@
:root[data-theme="light"] { :root[data-theme="light"] {
--grey-100: #2f2f2f; --grey-100: #1f1f1f;
--grey-200: #2f2f2f; --grey-200: #2f2f2f;
--grey-300: #4a4a4a; --grey-300: #4a4a4a;
--grey-400: #6a6a6a; --grey-400: #6a6a6a;
--grey-600: #9a9a9a; --grey-600: #9a9a9a;
--grey-800: #cfcfcf; --grey-800: #cfcfcf;
--grey-950: #eaeaea;
--color-bg: #efefef; --color-bg: #efefef;
--color-txt: #161616; --color-txt: #000000;
--color-txt-light: var(--grey-400); --color-txt-light: var(--grey-400);
--color-accent: #ff00ff; --color-accent: #ff00ff;

60
assets/css/components/_btn--don.scss Normal file
View file

@ -0,0 +1,60 @@
#btn--don__mobile {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-top: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 1.5);
position: fixed;
bottom: 0px;
left: 0;
z-index: 100;
opacity: 0;
transition: opacity ease-in 0.2s;
pointer-events: none;
&.is-visible {
pointer-events: all;
opacity: 1;
}
&.is-sticky {
position: relative;
}
@media #{$small-up} {
display: none !important;
}
}
.btn--don {
--vertical-padding: 0.5ch;
height: calc(var(--h-block) + var(--vertical-padding));
border-radius: calc(var(--h-block) / 1);
padding: var(--vertical-padding) 2ch;
background-color: var(--color-accent);
color: var(--color-bg);
font-family: var(--font);
font-size: var(--fs-medium);
font-weight: var(--fw-bold);
a {
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5ch;
}
.icon {
height: 28px;
position: relative;
top: 1px;
}
svg {
fill: var(--color-bg);
width: 24px;
height: 24px;
}
}

48
assets/css/components/_btn-group-mobile.scss
View file

@ -1,48 +0,0 @@
.btn--group__mobile{
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity .3s ease-in;
&.is-visible{
opacity: 1;
}
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
// padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 75%,
transparent 100%);
// background-color: yellow;
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
button, .dropdown{
flex-grow: 1;
width: 100%;
}
}
@media #{$small-up}{
.btn--group__mobile{
display: none;
opacity: 0!important;
}
}

199
assets/css/components/_buttons.scss
View file

@ -3,9 +3,6 @@ button{
font-family: var(--font); font-family: var(--font);
font-size: var(--fons-normal); font-size: var(--fons-normal);
color: var(--color-txt); color: var(--color-txt);
svg{
fill: var(--color-txt);
}
&:hover{ &:hover{
color: var(--grey-100); color: var(--grey-100);
svg{ fill: var(--grey-100); } svg{ fill: var(--grey-100); }
@ -35,62 +32,31 @@ button:disabled{
.btn--small{ .btn--small{
height: calc(var(--h-block)*1); display: block;
border: var(--border-light); height: calc(var(--h-block)*0.75);
border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
a{ a{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 1ch; padding: 0 1ch;
padding-top: 2px; padding-top: 2px;
} }
.icon{
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&.no-link{ &.no-link{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch;
padding: 0 1ch; padding: 0 1ch;
padding-top: 2px; padding-top: 2px;
} }
&:hover{
color: currentColor;
border-color: currentColor;
background-color: var(--grey-950);
}
}
.btn--small.is-selected{
background-color: var(--color-txt);
border-color: var(--color-txt);
color: var(--color-bg);
a{ color: var(--color-bg); }
svg{ fill: var(--color-bg); }
} }
.btn--bold, .btn--bold,
@ -100,7 +66,6 @@ button:disabled{
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
@ -155,109 +120,103 @@ button:disabled{
background-color: var(--color-bg); background-color: var(--color-bg);
svg{ fill: var(--color-txt); } svg{ fill: var(--color-txt); }
&:hover{ &:hover{
background-color: var(--grey-950); background-color: var(--grey-800);
color: var(--grey-100); color: var(--color-txt);
border-color: var(--grey-100);
a{ a{
background-color: var(--grey-950); background-color: var(--grey-800);
color: var(--grey-100); color: var(--color-txt);
} }
svg{ fill: var(--grey-100); }
} }
} }
.btn--toc{
svg{ .btn--light{
width: 15px; border: var(--border-light);
height: 15px;
top: 0px;
}
} }
@mixin btn--go-to(){
// DELETE ?
.btn__default{
--size: calc(var(--h-block) - 8px);
font-size: var(--fs-normal);
font-weight: var(--fw-normal);
height: var(--size);
padding-right: 1.5ch;
position: relative; position: relative;
.btn--go-to{
position: absolute;
right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px);
svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
@media #{$small}{
svg{
width: 11px;
height: 11px;
}
}
@media #{$x-small}{
right: calc(var(--padding-inner)*0.5);
bottom: calc(var(--padding-inner)*0.25);
svg{
width: 11px;
height: 11px;
}
}
}
&:hover{
.btn--go-to{
animation: wiggle-left 0.8s ease-in-out;
}
}
}
@keyframes wiggle-left {
0% { transform: translateX(0); }
40% { transform: translateX(-10px); }
80% { transform: translateX(0); }
100% { transform: translateX(0); }
}
.btn--back-to-top{
display: flex; display: flex;
border-color: var(--color-txt); align-items: center;
width: fit-content; gap: 0ch;
margin: var(--spacing) auto; // padding-right: 0.5ch;
@media #{$small}{ color: var(--color-accent);
margin-bottom: calc(var(--spacing)*2); font-weight: var(--fw-medium);
} text-decoration: none;
cursor: pointer;
.icon, .txt{ z-index: 10; }
.icon{ .icon{
width: 12px; width: var(--size);
height: 12px; height: var(--size);
transform: rotate(-90deg); display: flex;
transform-origin: center; align-items: center;
position: relative; justify-content: center;
top: -1px; color: var(--color-bg);
text-align: center;
svg{ svg{
width: 12px; fill: var(--color-bg);
height: 12px; width: 80%;
} }
} }
.txt{
font-family: var(--font-title);
color: var(--color-accent);
font-size: var(--fs-normal);
font-weight: var(--fw-bold);
padding-left: 1ch;
}
&::after{
content: '';
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size)/2);
width: var(--size);
height: var(--size);
position: absolute;
left: 0;
z-index: 0;
transition: width .2s
}
&:hover{ &:hover{
background-color: var(--grey-950); //
color: var(--grey-100); .txt{
border-color: var(--grey-100); color: var(--color-bg);
a{ display: block;
background-color: var(--grey-950);
color: var(--grey-100);
} }
svg{ fill: var(--grey-100); } &::after{
width: 100%;
} }
}
} }

79
assets/css/components/_card-article-small.scss
View file

@ -3,46 +3,22 @@
.card--article-small{ .card--article-small{
@include grid-content(); @include grid-content();
margin-bottom: var(--spacing);
padding-top: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*0.5);
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
}
// &:first-of-type{
// padding-top: calc(var(--spacing)*0.5);
// border-top: var(--border-light);
// }
@include figure-16-9(); @include figure-16-9();
figure{
@media #{$x-small}{ margin-left: 0px; }
}
.content{ .content{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: calc(var(--spacing)*0.25); padding-top: calc(var(--spacing)*0.25);
padding-right: calc(var(--padding-inner)*3);
} }
.title{ .title{
font-weight: 400; font-weight: normal;
font-size: var(--fs-small); font-size: var(--fs-medium);
margin-bottom: 0.25em; margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
line-height: 1.1;
a{ text-decoration: none;} a{ text-decoration: none;}
} }
@ -51,19 +27,15 @@
flex-grow: 1; flex-grow: 1;
color: var(--color-txt-light); color: var(--color-txt-light);
} }
.keywords{
.description{ margin-top: 1.5em;
@include clamp(2); padding-bottom: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.75); color: var(--color-txt-light);
margin-top: calc(var(--spacing)*0.25);
} }
&:hover{
.title{ text-decoration: underline;}
@include btn--go-to(); }
@include hover-card-line();
.keywords{ display: none; }
@media #{$medium}{ @media #{$medium}{
.title{ .title{
@ -73,17 +45,6 @@
} }
@media #{$x-small}{ @media #{$x-small}{
// figure{
// aspect-ratio: inherit;
// width: 100%;
// height: 100%;
// }
.icon-article{ display: none; }
.description{
display: none;
}
.content{ .content{
padding: 0; padding: 0;
} }
@ -94,24 +55,12 @@
font-size: var(--fs-small); font-size: var(--fs-small);
margin-top: 0.25em; margin-top: 0.25em;
} }
.keywords{
.keywords { margin-top: 0.5em;
display: block; padding-bottom: 0;
line-height: 1.1;
margin-top: calc(var(--spacing)*0.5);
padding-right: calc(var(--padding-inner)*1);
li, a{
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
} }
} }
}
} }

57
assets/css/components/_card-article.scss
View file

@ -4,37 +4,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--padding-inner);
@include figure-16-9(); @include figure-16-9();
.content{ .content{
// padding: var(--padding-inner); padding: var(--padding-inner);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} flex-grow: 2;
.pin{
position: absolute;
top: calc(var(--padding-inner)*1.5);
left: calc(var(--padding-inner)*1.5);
z-index: 10;
width: 24px;
height: 24px;
border-radius: var(--radius-small);
background-color: rgba(255, 255, 255, 0.27);
display: flex;
align-items: center;
justify-content: center;
svg{
width: 16px;
fill: var(--color-txt);
}
}
.time-alone{
display: none;
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.75);
} }
.title{ .title{
@ -42,14 +19,14 @@
font-size: var(--fs-medium); font-size: var(--fs-medium);
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
text-wrap: balance;
// flex-grow: 2; // flex-grow: 2;
a{ text-decoration: none;} a{ text-decoration: none;}
} }
.description{ .description{
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*1);
font-size: var(--fs-small);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
@ -59,8 +36,7 @@
.dl{ .dl{
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*0.5);
// font-size: var(--fs-small); font-size: var(--fs-small);
border-bottom: var(--border-light);
.dl__group{ .dl__group{
@include grid-content(); @include grid-content();
border-top: var(--border-light); border-top: var(--border-light);
@ -72,37 +48,24 @@
padding-right: 1ch; padding-right: 1ch;
} }
ul{ ul:not(.keywords){
list-style: none; list-style: none;
li{ padding-bottom: 0.2em; } li{
padding-bottom: 0.2em;
} }
} }
.dl__group__keywords{
.keywords-wrapper{ padding-bottom: 0;
z-index: 3000;
margin-top: calc(var(--spacing)*0.5);
// margin-bottom: calc(var(--spacing)*0.5);
} }
.keywords{
grid-column: 2;
} }
&:hover{ &:hover{
border-color: var(--color-txt); border-color: var(--color-txt);
background-color: var(--grey-950);
} }
.link-block{
z-index: 2000;
}
} }

138
assets/css/components/_card-folder.scss
View file

@ -1,138 +0,0 @@
.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();
container-type: inline-size;
container-name: cardfolder;
.content{
display: flex;
flex-direction: column;
}
.title{
flex-grow: 1;
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
padding-top: calc(var(--spacing)*0.25);
a{ text-decoration: none;}
@media #{$small}{
font-size: var(--fs-normal);
}
.icon{
padding-right: 1ch;
position: relative;
top: 1px;
svg{
height: 15px;
width: 15px;
fill: var(--color-txt);
}
}
}
.short{
@include clamp(3);
}
ul{
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing)*0.5);
li + li{
&::before{
content: "|";
padding-right: 1ch;
}
}
@media #{$small}{
font-size: var(--fs-small);
}
}
.btn--go-to{
position: absolute;
right: calc(var(--padding-inner)*1);
bottom: var(--padding-inner);
}
@include btn--go-to();
&:hover{
background-color: var(--grey-950);
border-color: var(--color-txt);
}
}
[data-template="investigation-summary"] .card--folder{
border: none;
padding-left: 0;
padding-right: 0;
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
}
figure{
@media #{$x-small}{ margin-left: 0px; }
}
}
@container cardfolder (width < 680px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short{
margin-top: calc(var(--spacing)*0.5);
}
}
@container cardfolder (width < 520px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul{
font-size: var(--fs-small);
}
}

111
assets/css/components/_card-impact-small.scss
View file

@ -1,111 +0,0 @@
.card--impact-small {
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
@include grid-content();
padding: var(--padding-inner) 0;
&.has-link {
@include hover-card-line();
}
@include btn--go-to();
.btn--go-to {
top: calc(var(--padding-inner)*1);
bottom: auto;
}
.content {
grid-column: 2;
}
.card--open-graph {
grid-column: 2;
z-index: 10;
}
.keywords {
grid-column: 2;
z-index: 10;
@media #{$x-small} {
display: block;
line-height: 1.1;
li, a{
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
}
}
}
&:not([data-impact-type="media"]) .content,
.keywords {
@media #{$x-small} {
grid-column: span 2;
}
}
.tag {
width: auto;
justify-self: start;
position: relative;
top: -5px;
}
&:not([data-impact-type="media"]) {
.content {
padding-right: calc(var(--padding-inner)*2.5);
@media #{$x-small} {
padding-right: 0;
}
}
}
.open-graph__details {
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__inner {
margin-top: calc(var(--spacing)*0.5);
.card--open-graph {
margin-bottom: calc(var(--spacing)*0.5);
}
}
}

265
assets/css/components/_card-impact.scss
View file

@ -1,66 +1,19 @@
.card--impact { .card--impact{
container-type: inline-size;
container-name: impact;
border: var(--border-light);
margin-bottom: calc(var(--spacing)*1);
&.has-link {
@include hover-card-line();
}
.card--impact__inner {
@include grid-content(); @include grid-content();
padding: calc(var(--padding-inner)*1.5) var(--padding-inner); padding: calc(var(--spacing)*0.5) 0;
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
// border-bottom: var(--border-light);
// padding: calc(var(--spacing)*0.5) 0;
// &:first-of-type{
// border-top: var(--border-light);
// }
@include btn--go-to();
.btn--go-to {
top: calc(var(--padding-inner)*1);
bottom: auto;
} }
.content{
.content {
grid-column: 2; grid-column: 2;
} }
&:not([data-impact-type="media"]) .content{
.card--open-graph { @media #{$x-small}{ grid-column: span 2; }
grid-row: 1/3;
grid-column: 2;
z-index: 10;
} }
.keywords-wrapper { .tag{
grid-column: 1;
grid-row: 2/4;
align-self: end;
z-index: 10;
}
&:not([data-impact-type="media"]) .content {
@media #{$x-small} {
grid-column: span 2;
}
}
.tag {
width: auto; width: auto;
justify-self: start; justify-self: start;
@ -69,196 +22,56 @@
} }
&:not([data-impact-type="media"]) { .content{
.content { .see-more{
padding-right: calc(var(--padding-inner)*2.5); color: var(--color-txt-light);
}
}
.investigations {
z-index: 10;
grid-column: 2;
list-style: none;
font-size: var(--fs-small);
a {
text-decoration: none; text-decoration: none;
color: var(--color-txt-light); white-space: nowrap;
&::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 { .open-graph__details{
fill: var(--color-txt); grid-column: span 2;
}
}
}
.open-graph__details {
grid-column: 2;
@include details-summary(); @include details-summary();
summary{
summary {
color: var(--color-txt-light); color: var(--color-txt-light);
.arrow-details svg{ fill: var(--color-txt-light);}
.arrow-details svg {
fill: var(--color-txt-light);
} }
} }
@media #{$x-small} {
summary { // @media #{$x-small-up}{
.open-graph__details{
summary{
@include grid-content(); @include grid-content();
grid-row-gap: 0; .summary-inner{
.summary-inner {
grid-column: 2; grid-column: 2;
} }
} }
grid-column: 1/3;
} }
} .open-graph__inner{
.open-graph__inner {
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*0.5);
// margin-bottom: calc(var(--spacing)*1); margin-bottom: calc(var(--spacing)*1);
@media #{$small-up}{
.card--open-graph { margin-bottom: calc(var(--spacing)*2);
}
.card--open-graph{
margin-bottom: calc(var(--spacing)*0.5); margin-bottom: calc(var(--spacing)*0.5);
} }
} }
}
// }
} }
@container impact (width < 460px) {
.card--impact__inner{
display: block!important;
padding-top: var(--padding-inner)!important;
padding-bottom: calc(var(--padding-inner)*0.75)!important;
.tag, .date{
display: inline-flex;
margin-right: 2ch;
top: 0px!important;
}
.content{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
padding-right: 0!important;
}
.card--open-graph{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
}
.investigations{
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.25);
}
.keywords-wrapper {
margin-top: calc(var(--spacing)*1);
}
.date,
.content,
details {
font-size: 14px !important;
}
.btn--go-to {
top: calc(var(--padding-inner)*1.25)!important;
bottom: auto;
right: calc(var(--padding-inner)*1.25)!important;
}
}
}
@media #{$x-small}{
.card--impact__inner{
display: block!important;
padding-top: var(--padding-inner)!important;
padding-bottom: calc(var(--padding-inner)*0.75)!important;
.tag, .date{
display: inline-flex;
margin-right: 2ch;
top: 0px!important;
}
.content{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
padding-right: 0!important;
}
.card--open-graph{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
}
.investigations{
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.25);
}
.keywords-wrapper {
margin-top: calc(var(--spacing)*1);
}
.date,
.content,
details {
font-size: 14px !important;
}
.btn--go-to {
top: calc(var(--padding-inner)*1.25)!important;
bottom: auto;
right: calc(var(--padding-inner)*1.25)!important;
}
}
}

39
assets/css/components/_card-open-graph.scss
View file

@ -2,25 +2,18 @@
@include grid-content(); @include grid-content();
// border: var(--border-light); border: var(--border-light);
border: 1px solid var(--grey-600);
border-radius: var(--radius-small); border-radius: var(--radius-small);
position: relative; position: relative;
figure{ figure{
grid-column: 1; grid-column: 1;
grid-row: 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}{ @media #{$x-small}{
@ -40,14 +33,11 @@
.site-name{ .site-name{
color: var(--color-txt-light); color: var(--color-txt-light);
font-size: var(--fs-small); font-size: var(--fs-small);
margin-bottom: 3px;
} }
.title{ .title{
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: normal; font-weight: normal;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -67,26 +57,7 @@
} }
&:hover{ &:hover{
border-color: var(--color-txt); .title{ text-decoration: underline;}
background-color: var(--grey-950);
}
}
.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;
}
} }
} }

7
assets/css/components/_details-summary.scss
View file

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

170
assets/css/components/_dropdown.scss
View file

@ -1,170 +0,0 @@
.dropdown {
position: relative;
display: inline-block;
&__trigger {
cursor: pointer;
}
&__content {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: var(--padding-inner);
background-color: var(--color-bg);
border: var(--border);
border-radius: var(--radius-btn);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100;
&::before{
content: "◀";
transform: rotate(90deg);
font-size: 14px;
position: absolute;
top: -13px;
left: 16px;
}
ul {
list-style: none;
margin: 0;
padding: var(--padding-inner);
}
a, button {
display: block;
width: 100%;
padding: 0.75em 1ch;
font-size: var(--fs-small);
text-align: left;
text-decoration: none;
color: var(--color-txt);
background: none;
border: none;
cursor: pointer;
&:hover {
background-color: var(--grey-800);
}
}
}
// Positionnement par défaut : sous le bouton, aligné à gauche
// Variante : aligné à droite
&--align-right .dropdown__content {
left: auto;
right: 0;
&::before{
left: auto;
right: 16px;
}
}
&.is-open {
.dropdown__content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
// PANEL 
&--position-mobile .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
&::before{
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
}
&--position-mobile.is-open {
.dropdown__content {
transform: translateX(0);
}
}
@media #{$small-up}{
&--position-panel .dropdown__content {
top: auto;
bottom: 0;
left: calc(100% + var(--padding-inner));
margin-top: 0;
margin-left: 4px;
&::before{
font-family: Arial;
content: "◀";
transform: rotate(0deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: 4px;
left: -11px;
}
}
&--position-panel.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}
@media #{$x-small}{
.dropdown__content{
width: calc(100vw - var(--padding-body)*2);
.modal--share{
width: 100%;
}
}
}
}
@media screen and (max-width: 1280px){
[data-template="investigations"]{
.dropdown .dropdown__content {
left: auto;
right: 0;
&::before{
left: auto;
right: 16px;
}
}
}
}

17
assets/css/components/_figures.scss
View file

@ -12,23 +12,6 @@
} }
} }
}
@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{ &:hover{
figure img{ transform: scale(1.05); } figure img{ transform: scale(1.05); }
} }

18
assets/css/components/_hero.scss
View file

@ -1,14 +1,18 @@
#hero{ #hero{
width: 100%; width: calc(100vw - var(--padding-body)*4);
position: relative;
left: calc(var(--padding-body)*1);
@media #{$medium}{
width: calc(100vw - var(--padding-body)*2);
position: relative; position: relative;
left: 0; left: 0;
}
@media #{$small}{
width: 100vw;
// @media #{$small}{ left: calc(var(--padding-body)*-1);
// width: 100vw; }
// left: calc(var(--padding-body)*-1);
// }
figcaption{ figcaption{
color: var(--color-txt-light); color: var(--color-txt-light);

40
assets/css/components/_keywords.scss
View file

@ -1,50 +1,14 @@
.keywords{ .keywords{
list-style: none; list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.75ch;
a{
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(var(--h-block)*0.75);
padding: 0 1ch;
padding-top: 2px;
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
white-space: nowrap;
text-decoration: none;
&::before{
content: "#";
padding-right: 0.25ch;
}
&:hover{
border-color: currentColor;
background-color: var(--grey-800);
}
}
}
.keywords--small{
list-style: none;
li{ li{
display: inline; display: inline-block;
} padding-right: 0.75ch;
a{ a{
text-decoration: none; text-decoration: none;
&::before{ &::before{
content: "#"; content: "#";
padding-right: 0.25ch; padding-right: 0.25ch;
} }
&::after{
content: "\00a0";
} }
} }
} }

77
assets/css/components/_modal-share.scss
View file

@ -1,22 +1,29 @@
.modal--share{ .modal--share{
width: 240px; border: var(--border);
padding-bottom: var(--padding-inner); border-radius: var(--radius-btn);
background-color: var(--color-bg); background-color: var(--color-bg);
padding: var(--padding-inner);
padding-top: calc( var(--padding-inner)*0.5);
padding-bottom: calc( var(--padding-inner)*1.5);
.modal-title{
display: none;
}
.socials{ .socials{
display: block; display: block;
list-style: none; list-style: none;
li{ li{
font-size: var(--fs-normal); font-size: var(--fs-normal);
padding-bottom: 6px;
border-bottom: var(--border-light); border-bottom: var(--border-light);
&:first-of-type{ padding-top: 6px;
border-top: var(--border-light);
}
a{ a{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2ch; gap: 1ch;
text-decoration: none; text-decoration: none;
} }
.icon { .icon {
@ -31,6 +38,15 @@
position: relative; position: relative;
top: 2px; top: 2px;
} }
&:hover{
color: var(--color-accent);
.icon svg,
.icon svg path,
.icon svg rect{
fill: var(--color-accent)!important;
}
}
} }
@ -42,9 +58,7 @@
.copy-link{ .copy-link{
display: flex; display: flex;
gap: 0.5ch; gap: 0.5ch;
padding: 0 var(--padding-inner); margin-top: calc(var(--spacing)*0.75);
height: var(--h-block);
width: 100%;
.copy-link__field{ .copy-link__field{
flex-grow: 1; flex-grow: 1;
@ -85,63 +99,24 @@
&:focus{ &:focus{
border-color: var(--color-txt); border-color: var(--color-txt);
outline: none; outline: none;
}
&.is-copied{
color: var(--color-accent)!important;
} }
} }
.copy-link__btn{ button{
background-color: var(--color-txt); background-color: var(--color-txt);
color: var(--color-bg); color: var(--color-bg);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
padding: 0 1ch; padding: 0 1ch;
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: 2px; padding-top: 2px;
white-space: nowrap;
text-align: center;
width: 8ch!important;
&::after{
content: "\00a0";
}
&:hover{ &:hover{
background-color: var(--color-accent); background-color: var(--color-accent);
}
} }
}
} }
} }
// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------
#share-banner__content,
#share-banner__aside,
#share-banner__desktop{
display: none;
}
#share-banner__content ~ .modal--share,
#share-banner__aside ~ .modal--share,
#share-banner__desktop ~ .modal--share{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#share-banner__content:checked ~ .modal--share,
#share-banner__aside:checked ~ .modal--share,
#share-banner__desktop:checked ~ .modal--share{
opacity: 1;
pointer-events: auto;
}

86
assets/css/components/_slider-before-after.scss
View file

@ -1,86 +0,0 @@
.slider-before-after{
width: 100%;
max-width: 700px;
z-index: 300;
display: grid;
place-content: center;
position: relative;
overflow: hidden;
--position: 50%;
img {
display: block;
max-width: 100%;
}
.image-container {
position: relative;
width: 100%;
// max-width: 800px;
// max-height: 90vh;
// aspect-ratio: 1/1;
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
}

41
assets/css/components/_sort.scss
View file

@ -1,4 +1,9 @@
button.sort{ .sort{
display: flex;
align-items: center;
gap: 1ch;
.arrow{ .arrow{
line-height: 0; line-height: 0;
--size: 12px; --size: 12px;
@ -18,6 +23,17 @@ button.sort{
} }
.icon{
--size: 10px;
height: var(--size);
width: var(--size);
position: relative;
top: -8px;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&[data-sort-type="up"]{ &[data-sort-type="up"]{
@ -26,17 +42,20 @@ button.sort{
} }
} }
}
.page__sort {
margin-bottom: calc(var(--spacing) * 1);
display: flex; &:hover{
justify-content: right; color: var(--grey-100);
grid-gap: var(--padding-inner); svg{
width: 100%; fill: var(--grey-100);
max-width: var(--max-w-cards); }
margin-inline: auto; }
// z-index: calc(var(--z-header) - 100);
} }

77
assets/css/components/_swiper.scss
View file

@ -1,77 +0,0 @@
.swiper {
--slide-padding: 30px;
.swiper-button-prev,
.swiper-button-next {
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: var(--slide-padding);
top: 0px!important;
height: calc(100% - var(--spacing)*1);
// background-color: red;
svg {
width: 14px;
}
&.swiper-button-disabled {
opacity: 1;
svg {
opacity: 0.05;
}
}
}
.swiper-button-prev {
left: 0px!important;
top: 0px;
justify-content: flex-start;
}
.swiper-button-next {
right: 0px!important;
top: 0px;
justify-content: flex-end;
}
.swiper-slide {
padding-left: var(--slide-padding);
padding-right: var(--slide-padding);
}
.swiper-pagination {
position: relative;
margin-top: 0px!important;
margin-top: calc(var(--spacing)*0.5)!important;
.swiper-pagination-bullet {
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
}
.swiper-pagination-bullet-active {
background: var(--color-txt);
}
}
@media #{$x-small} {
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-slide {
padding: 0px;
}
}
}

23
assets/css/components/_tags.scss
View file

@ -21,4 +21,27 @@
} }
.tag-inline{
height: calc(var(--h-block)*0.75);
// border-radius: calc(var(--h-block)*0.75/2);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 3px;
font-size: var(--fs-small);
line-height: 1;
background-color: var(--color-bg);
color: var(--color-txt-light);
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}

19
assets/css/components/_text.scss
View file

@ -0,0 +1,19 @@
.page__title{
font-size: var(--fs-big);
font-weight: normal;
text-transform: uppercase;
margin: calc(var(--spacing)*1.5) auto;
text-align: center;
max-width: var(--max-w-container);
}
.page__description{
display: none;
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
p{
font-size: var(--fs-normal);
}
}

23
assets/css/partials/_container-cards.scss
View file

@ -1,23 +0,0 @@
.container-cards{
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--spacing)*1);
}
.container-cards__investigations {
@media #{$x-small-up} {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
@media #{$x-small} {
margin-bottom: 10vh;
.card--article {
// margin-bottom: calc(var(--spacing) * 1.5);
}
}
}

18
assets/css/partials/_main-layout.scss
View file

@ -1,8 +1,6 @@
body{ body{
min-height: 100dvh; min-height: 100dvh;
min-height: 100vh; min-height: 100vh;
width: 100vw;
// overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -11,22 +9,6 @@ body{
main{ main{
flex-grow: 1; flex-grow: 1;
padding: 0 var(--padding-body); padding: 0 var(--padding-body);
padding-top: var(--header-h);
padding-bottom: calc(var(--spacing)*2);
min-height: 100dvh;
min-height: 100vh;
.page__header,
.page__content{
max-width: var(--max-w-cards);
margin-inline: auto;
} }
}
} }

60
assets/css/partials/_page-header.scss
View file

@ -1,60 +0,0 @@
.page__type{
height: calc(var(--h-block)*0.75);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 3px;
font-size: var(--fs-small);
line-height: 1;
background-color: var(--color-bg);
color: var(--color-txt-light);
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
main .page__header {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 2);
@media #{$small} {
margin-top: calc(var(--spacing) * 2);
}
.page__title {
max-width: var(--max-w-content);
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 0.5);
text-wrap: balance;
}
.description {
// max-width: 68ch;
// font-size: var(--fs-medium);
max-width: 58ch;
line-height: 1.1;
}
.description-medium{
// font-size: var(--fs-medium);
max-width: 58ch;
line-height: 1.1;
}
}

12
assets/css/partials/_site-footer.scss
View file

@ -4,11 +4,6 @@
padding: calc(var(--padding-body)*2) var(--padding-body); padding: calc(var(--padding-body)*2) var(--padding-body);
z-index: 500; z-index: 500;
.site-footer__container{
max-width: var(--max-w-cards);
margin: 0 auto;
padding: 0 var(--padding-body);
}
.logo { .logo {
margin-top: calc(var(--spacing)*0.25); margin-top: calc(var(--spacing)*0.25);
@ -44,6 +39,7 @@
@media #{$small}{ @media #{$small}{
margin-top: calc(var(--spacing)*2);
.footer__socials{ .footer__socials{
@ -72,11 +68,15 @@
.site-footer__container{ .site-footer__container{
display: grid; display: grid;
grid-template-columns: 3fr 2fr; grid-template-columns: 1fr 1fr;
column-gap: calc(var(--spacing)*2); column-gap: calc(var(--spacing)*2);
max-width: 1200px;
margin: 0 auto;
} }
.footer__socials .socials{ .footer__socials .socials{
max-width: 400px;
columns: 2; columns: 2;
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*1);
} }

59
assets/css/partials/_site-header.scss
View file

@ -1,24 +1,25 @@
@keyframes add-border {
from {
border-bottom-color: transparent;
}
to {
border-bottom: var(--grey-800);
}
}
#site-header { #site-header {
z-index: var(--z-header); z-index: 900;
--gap: 3ch; --gap: 3ch;
position: fixed;
top: 0;
left: 0;
width: 100vw; width: 100vw;
height: var(--header-h); height: var(--header-h);
background-color: var(--color-bg); background-color: var(--color-bg);
padding: 0 var(--padding-body); padding: 0 var(--padding-body);
box-shadow: -1px 4px 10px 0px var(--color-bg);
.site-header__inner{ .site-header__inner{
width: 100%; width: 100%;
height: 100%; height: 100%;
// border-bottom: 1px solid var(--color-bg);
// transition: border-color ease-in .5s;
display: flex; display: flex;
align-items: center; align-items: center;
@ -37,7 +38,6 @@
#site-title { #site-title {
flex-grow: 2; flex-grow: 2;
// opacity: 0;
svg{ svg{
width: 100px; width: 100px;
@media #{$small}{ @media #{$small}{
@ -65,7 +65,6 @@
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
} }
@ -86,9 +85,6 @@
#lang-toggle{ #lang-toggle{
display: flex; display: flex;
gap: 1ch; gap: 1ch;
button{
font-weight: 500;
}
button:disabled{ color: var(--color-txt-light); } button:disabled{ color: var(--color-txt-light); }
} }
@ -96,7 +92,6 @@
cursor: pointer; cursor: pointer;
svg{ svg{
width: 30px; width: 30px;
fill: var(--color-txt);
} }
.close{ display: none; } .close{ display: none; }
@ -112,11 +107,37 @@
} }
#site-header.is-visible{ #site-header.is-visible{
// .site-header__inner{ position: fixed;
// border-color: var(--grey-800); top: 0;
// }
.site-header__inner{
border-bottom: var(--border-light);
#nav-highlight li:not(.soutenir){
display: none;
}
#site-title {
@media #{$small-up}{
flex-grow: 0;
width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2);
}
@media #{$medium}{
width: calc(var(--banner-medium) - var(--padding-body));
}
}
.header__title-page{
@media #{$small-up}{
display: block;
}
flex-grow: 2;
}
}
& ~ main{
margin-top: var(--header-h);
}
} }

16
assets/css/partials/_site-menu.scss
View file

@ -6,13 +6,10 @@
top: var(--header-h); top: var(--header-h);
right: calc(var(--menu-w)*-1); right: calc(var(--menu-w)*-1);
transition: right .3s ease-in; transition: right .3s ease-in;
@media #{$small}{
transition: right .4s ease-in;
}
background-color: var(--color-bg); background-color: var(--color-bg);
border-left: var(--border-light); border-left: var(--border-light);
padding: var(--padding-body); padding: var(--padding-body);
z-index: calc(var(--z-header) - 1); z-index: 1000;
@media #{$x-small}{ @media #{$x-small}{
width: 100vw; width: 100vw;
@ -33,7 +30,6 @@
ul{ ul{
list-style-type: none; list-style-type: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
li{ li{
font-size: var(--fs-normal); font-size: var(--fs-normal);
a{ a{
@ -54,11 +50,11 @@
} }
body.menu-open{ body.menu-open{
// overflow: hidden; overflow: hidden;
// main, footer, #nav-highlight{ main, footer, #nav-highlight{
// transition: opacity .3s ease-in; transition: opacity .3s ease-in;
// opacity: 0.1; opacity: 0.1;
// } }
#site-menu{ #site-menu{
right: 0; right: 0;

2613
assets/css/style.css
View file

File diff suppressed because it is too large Load diff

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

66
assets/css/style.scss
View file

@ -1,49 +1,39 @@
@charset "UTF-8"; @charset "UTF-8";
@import "base/responsive"; @import 'base/responsive';
@import "base/var"; @import 'base/var';
@import "base/body"; @import 'base/body';
@import "partials/site-header"; @import 'partials/site-header';
// @import 'components/nav-tabs'; // @import 'components/nav-tabs';
// @import 'components/btn--default'; // @import 'components/btn--default';
@import "components/buttons"; @import 'components/buttons';
@import "components/tags"; @import 'components/tags';
@import "components/keywords"; @import 'components/keywords';
@import "components/details-summary"; @import 'components/details-summary';
@import "components/sort"; @import 'components/sort';
@import "components/btn-group-mobile";
@import 'components/figures';
@import 'components/hero';
@import 'components/form-newsletter';
@import 'components/search-form';
@import 'components/list-socials';
@import 'components/modal-share';
@import 'components/text';
@import 'components/card-article';
@import 'components/card-article-small';
@import 'components/card-impact';
@import 'components/card-open-graph';
@import 'partials/site-header';
@import 'partials/site-menu';
@import 'partials/site-footer';
@import 'partials/main-layout';
@import "components/figures"; @import 'template/investigations';
@import "components/hero"; @import 'template/investigation-summary';
@import "components/form-newsletter"; @import 'template/rapport';
@import "components/search-form";
@import "components/list-socials";
@import "components/modal-share";
@import "components/dropdown";
@import "components/text";
@import "components/card-article";
@import "components/card-article-small";
@import "components/card-impact";
@import "components/card-impact-small";
@import "components/card-folder";
@import "components/card-open-graph";
@import "components/swiper";
@import "components/slider-before-after";
@import "partials/site-header";
@import "partials/site-menu";
@import "partials/site-footer";
@import "partials/main-layout";
@import "partials/page-header";
@import "partials/container-cards";
@import "template/home";
@import "template/investigation-summary";
@import "template/report";
@import "template/folder";
@import "template/impacts";

90
assets/css/template/_folder.scss
View file

@ -1,90 +0,0 @@
.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);
}
@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;
}
}
section:target{
padding-top: calc(var(--header-h) + var(--spacing));
}
}
@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;}
}

201
assets/css/template/_home.scss
View file

@ -1,201 +0,0 @@
.section--home {
.btn--bold-inline {
text-transform: none;
margin-top: calc(var(--spacing)*1.5);
svg {
width: 12px;
height: 12px;
top: 0px;
}
}
.title-section {
font-size: var(--fs-medium);
font-weight: normal;
text-transform: uppercase;
font-size: var(--fs-big);
margin-bottom: calc(var(--spacing)*1);
}
.description-section {
max-width: 42ch;
font-size: var(--fs-medium);
line-height: 1.1;
}
@media #{$medium-up} {
border-bottom: var(--border-light);
.section--inner {
max-width: 1280px;
margin: calc(var(--spacing)*3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: 1fr 640px;
grid-gap: var(--gap);
}
.col-left {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.col-right {
width: 100%;
height: 100%;
}
}
@media #{$medium} {
&#home__investigations,
&#home__hero {
border-bottom: var(--border-light);
}
.section--inner {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*4);
}
.col-left {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
margin-bottom: calc(var(--spacing)*2);
.title-section {
width: 100%;
}
}
}
@media #{$x-small} {
.section--inner {
margin-top: calc(var(--spacing)*2);
margin-bottom: calc(var(--spacing)*4);
margin-bottom: 0px;
}
.col-left{
margin-bottom: calc(var(--spacing)*1.5);
}
.title-section {
margin-bottom: calc(var(--spacing)*0.25);
}
.description-section {
max-width: 42ch;
font-size: var(--fs-normal);
}
.btn--bold-inline {
color: var(--color-txt-light);
border-color: var(--color-txt-light);
height: calc(var(--h-block) * 0.75);
// margin: 0 auto;
margin-top: calc(var(--spacing)*0.75);
a {
padding: 0 1ch;
padding-top: 2px;
}
svg {
fill: var(--color-txt-light);
}
}
}
}
#home__investigations {
.home-investigations-slider {
max-width: 500px;
height: auto;
}
.card--article {
.time-alone {
display: block;
}
.dl,
.pin {
display: none;
}
}
}
#home__hero {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
@media #{$x-small} {
margin-top: calc(var(--spacing)*2.5);
padding-bottom: calc(var(--spacing)*1.5);
margin-bottom: 0px;
}
.section--inner {
display: block;
}
.baseline {
font-size: 45px;
line-height: 1.1;
max-width: 32ch;
@media #{$x-small} {
font-size: 34px;
}
}
button {
margin-top: calc(var(--spacing)*1);
}
}
#home__folders {
.card--folder {
margin-bottom: calc(var(--spacing)*0.5);
}
}

0
assets/css/template/_impacts.scss
View file

431
assets/css/template/_investigation-summary.scss
View file

@ -1,217 +1,336 @@
[data-template="investigation-summary"] main { [data-template="investigation-summary"] main{
position: relative; position: relative;
.page__header{
margin-inline: auto;
max-width: var(--max-w-content);
}
header{
.page-title{
text-transform: uppercase;
.panel-left{ font-weight: normal;
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); font-size: var(--fs-big);
} line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*1);
@media screen and (max-width: 1340px){
margin-left: auto;
margin-right: calc(var(--padding-body)*3);
.panel-left{
width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6);
} }
} }
.section__article{
@media screen and (max-width: 1220px){ a:hover{
margin-left: auto;
margin-right: 0px;
width: calc(100% - var(--panel-w)*0.5 - var(--padding-body));
.panel-left{
width: calc(var(--panel-w)*0.5);
}
}
.section__article {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
margin-inline: auto;
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*1);
}
a:hover {
color: var(--grey-200); color: var(--grey-200);
} }
.section__title{
.section__title {
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 1);
padding-right: 2ch;
text-wrap: balance;
}
}
#section__dl,
#section__impacts,
#section__folder,
#section__related-articles{
font-size: var(--fs-small);
}
#section__dl {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
margin-inline: auto;
.dl__group {
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
ul:not(.keywords) {
list-style: none;
li {
padding-bottom: 0.2em;
}
}
}
#section__synthese {
max-width: var(--max-w-content);
margin-inline: auto;
p+p {
margin-top: 1em;
}
h4 {
margin-top: 2em;
margin-bottom: 1em;
font-size: var(--fs-normal);
font-weight: normal; font-weight: normal;
text-decoration: 1px underline var(--color-txt-light); text-transform: uppercase;
text-underline-offset: 3px; margin-bottom: calc(var(--spacing)*0.5)
} }
} }
#nav--page{
.panel-left{ ul{
//background-color: yellow;
height: calc(100vh - var(--header-h));
position: fixed;
left: var(--padding-body);
padding-bottom: calc(var(--padding-body)*1);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
z-index: calc(var(--z-header) - 1);
#nav--page {
padding-bottom: var(--spacing);
width: calc(var(--panel-w)*0.5);
ul {
list-style: none; list-style: none;
li{
li {
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
margin-bottom: 4px; a{
font-weight: 500;
font-size: var(--fs-small);
a {
display: block; display: block;
padding: 5px 1ch; padding: 0.3em 0;
text-decoration: none; text-decoration: none;
} }
} }
} }
} }
.btn--group{ #section__short{
width: calc(var(--panel-w)*0.5); font-size: var(--fs-medium);
display: flex; }
flex-direction: column;
gap:calc(var(--spacing)*0.25); #section__dl{
margin-top: calc(var(--spacing)*1.5);
border-bottom: var(--border-light);
.dl__group{
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
padding-right: 1ch;
}
ul:not(.keywords){
list-style: none;
li{
padding-bottom: 0.2em;
}
button, .dropdown{
flex-grow: 1;
width: 100%;
} }
} }
#section__synthese{
p + p{
margin-top: 0.5em;
} }
h4{
margin-top: 2em;
margin-bottom: 1em;
font-size: var(--fs-normal);
font-weight: normal;
text-decoration: 1px underline var(--color-txt-light);
text-underline-offset: 3px;
}
}
} }
// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------
#share-banner__desktop{ display: none; }
#share-banner__desktop ~ .modal--share{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#share-banner__desktop:checked ~ .modal--share{
opacity: 1;
pointer-events: auto;
}
// SMALL ---------------------------------------------------------- // SMALL ----------------------------------------------------------
// ---------------------------------------------------------------- // ----------------------------------------------------------------
@media #{$small} {
[data-template="investigation-summary"] main {
width: 100%;
header { @media #{$small}{
margin-bottom: calc(var(--spacing) * 1);
[data-template="investigation-summary"] main{
header{
padding-top: calc(var(--spacing)*1.5);
.page-type{
font-size: var(--fs-small);
}
} }
.section__article { .section__article{
margin-top: calc(var(--spacing) * 2); margin: calc(var(--spacing)*1.5) 0;
margin-bottom: calc(var(--spacing) * 2);
} }
#section__impacts, #section__en-lien{
margin-top: 0px;
}
#hero { #hero{
figcaption { margin: calc(var(--spacing)*1.5) 0;
figcaption{
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
} }
.panel-left { .modal--share{
position: absolute;
width: calc(100% - var(--padding-body)*2);
bottom: calc(var(--spacing) * 2);
}
#banner--page {
padding: calc(var(--spacing)*0.5) 0;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: calc(var(--spacing)*0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
z-index: 800;
#nav--page{
display: none; display: none;
} }
.btn--group{
display: flex;
gap: calc(var(--spacing)*0.25);
position: relative;
> button,
> label {
width: 50%;
cursor: pointer;
}
}
}
// action
#banner--page{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#banner--page.is-visible{
opacity: 1;
pointer-events: auto;
}
}
}
@media #{$x-small}{
[data-template="investigation-summary"] main{
#section__dl .dl__group{
column-gap: 1ch;
font-size: var(--fs-small);
padding: calc(var(--spacing)*0.25) 0;
}
} }
} }
@media #{$x-small} {
[data-template="investigation-summary"] main {
#section__dl .dl__group {
column-gap: 1ch;
font-size: var(--fs-small); // DESKTOP ----------------------------------------------------------
padding: calc(var(--spacing) * 0.25) 0; // ----------------------------------------------------------------
@media #{$small-up}{
[data-template="investigation-summary"] main{
#banner--page{
height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h));
margin-bottom: calc((100vh - var(--header-h))*-1);
margin-bottom: calc((100dvh - var(--header-h))*-1);
padding: var(--padding-body);
padding-left: 0px;
padding-bottom: calc(var(--padding-body)*2);
position: sticky;
top: var(--header-h);
width: var(--banner-medium);
display: flex;
flex-direction: column;
justify-content: space-between;
} }
#banner--page .btn--group{
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing)*0.25);
> button,
> label {
width: 100%;
max-width: 160px;
cursor: pointer;
}
}
#hero{
margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*3);
}
.section__article{
margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
}
#section__short{
margin-top: var(--padding-body);
}
header{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
}
.section__article{
.section__title{
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
}
}
#section__synthese{
font-size: var(--fs-medium);
}
}
.modal--share{
position: absolute;
bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
width: calc(100% - var(--padding-body));
}
}
@media #{$medium-up}{
[data-template="investigation-summary"] main{
#banner--page{
width: calc((100% - var(--max-w-content))/2);
}
#hero{
margin-top: 0;
margin-bottom: calc(var(--spacing)*3);
figcaption{
max-width: var(--max-w-content);
margin: 0 auto;
}
}
header{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
}
.section__article{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*3) auto;
}
} }
} }

53
assets/css/template/_investigations.scss Normal file
View file

@ -0,0 +1,53 @@
[data-template="investigations"] main{
#container-cards{
@media #{$x-small-up}{
max-width: var(--max-w-container);
margin: 0 auto;
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);
margin-bottom: 10vh;
}
@media #{$x-small}{
margin-bottom: 10vh;
.card--article{
margin-bottom: calc(var(--spacing)*1.5);
}
}
}
.search-container{
max-width: var(--max-w-content);
margin: 0 auto;
margin-bottom: calc(var(--spacing)*2);
}
.page__sort{
max-width: var(--max-w-container);
display: flex;
justify-content: right;
grid-gap: var(--padding-inner);
margin: 0 auto;
margin-bottom: calc(var(--spacing)*0.5);
}
}

307
assets/css/template/_rapport.scss Normal file
View file

@ -0,0 +1,307 @@
:root{
--rapport-w: 280px;
}
#rapport{
margin-bottom: 20vh;
padding-left: var(--rapport-w);
padding-bottom: 10vh;
margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w));
.rapport__header{
// display: grid;
// grid-template-columns: 1fr 140px;
// 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);
.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;
}
}
.rapport__figure{
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing)*2);
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.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);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
padding-right: 1ch;
}
}
.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{
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.thumbnail__title{
padding-top: calc(var(--padding-inner)*0.5);
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);
}
}
}
.rapport__content{
max-width: var(--max-w-content);
margin-top: calc(var(--spacing)*3);
.section-content{
margin-bottom: calc(var(--spacing)*3);
}
.section-title{
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
font-weight: normal;
text-transform: uppercase;
}
p {
margin: calc(var(--spacing)*0.5) 0;
}
ul{
padding-left: 3ch;
}
}
.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-radius: var(--radius-small);
height: calc(100vh - var(--header-h) - var(--padding-body)*4);
.tabs{
display: flex;
border: var(--border-light);
height: calc(var(--h-block)*1.25);
.tab{
display: flex;
align-items: center;
font-size: var(--fs-small);
font-weight: bold;
padding-left: 2ch;
padding-top: 3px;
}
.tab[for="tab-print"]{
width: calc(var(--h-block)*1.5);
border-right: var(--border-light);
padding-left: 0;
justify-content: center;
.icon{
svg{
width: 18px;
fill: var(--color-txt);
}
}
}
}
.content-aside{
padding: var(--padding-body);
height: calc(100% - var(--h-block)*1.25);
overflow: scroll;
border: var(--border-light);
border-top: none;
}
#toc{
ul{ list-style: none;}
li{
font-size: var(--fs-small);
padding: 5px 1ch;
padding-top: 7px;
}
li.selected{
// color: var(--color-accent);
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;
}
.toc-level-2{
margin-bottom: calc(var(--spacing)*0.25);
padding-left: 4ch;
}
a{
text-decoration: none;
}
}
#download-pdf{
margin: 0 auto;
margin-top: calc(var(--spacing)*0.5);
}
}
#tab-print, #tab-toc{ display: none; }
#tab-print:checked ~ .content-aside #toc{ display: none; }
#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; }
#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;
}
}
}
}

478
assets/css/template/_report.scss
View file

@ -1,478 +0,0 @@
// LAOUT -----------------------------------
@media #{$small}{
[data-template="report"] {
#toggle-panel{
display: none;
}
#report__aside{
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left .4s ease-in;
background: var(--color-bg);
.panel__header{
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
.panel__content{
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
.btn--group{
display: none;
}
}
.panel-open #report__aside{
left: 0px;
}
}
}
.arrow-report{
font-size: 14px;
color: var(--color-txt-light);
width: 20px;
height: 20px;
}
.media-anchor{
width: 100%;
height: 0px;
display: flex;
justify-content: flex-end;
.arrow-report{
position: relative;
left: 50px;
top: 8px;
}
}
@media #{$small-up}{
[data-template="report"] {
.report__header {
margin-inline: auto;
max-width: var(--max-w-cards);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
}
.report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-body)*2.5);
z-index: calc(var(--z-header) - 100);
.report__txt {
grid-row: 1;
grid-column: 1;
max-width: var(--max-w-content);
}
#report__medias {
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
// border-left: var(--border-light);
// padding-left: var(--padding-inner);
grid-row: 1;
grid-column: 2;
// border: var(--border-light);
min-height: 100px;
}
#arrow__medias{
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
grid-row: 1;
grid-column: 2;
transform: rotate(180deg);
transform-origin: center;
span{
position: relative;
left: 26px;
top: calc(var(--spacing)*-5);
}
}
}
#toggle-panel {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
z-index: calc(var(--z-header) + 100);
}
#report__aside {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
.panel__header{
border: var(--border-aside);
height: calc(var(--h-block)*1.5);
}
.panel__content {
height: calc(100% - var(--h-block)*4.25);
padding-bottom: 80px;
}
}
#report__aside {
left: calc(var(--panel-w)*-1);
transition: left ease-in-out .5s;
}
#report {
padding-left: calc(var(--padding-body)*2);
transition: padding-left ease-in-out .5s;
}
.panel-open{
#report__aside{
left: var(--padding-body);
}
#report {
padding-left: calc(var(--panel-w) + var(--padding-body)*1);
}
}
}
}
// HEADER -------------------------------------------------------------------------
.report__header {
display: grid;
column-gap: var(--padding-inner);
row-gap: calc(var(--spacing)*1);
grid-template-columns: 65% 35%;
grid-template-rows: auto auto 1fr;
position: relative;
.report__title-group {
grid-row: 1;
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);
text-wrap: balance;
}
.subtitle {
font-size: var(--fs-big);
line-height: var(--leading-tight);
font-weight: normal;
text-wrap: balance;
}
}
@include figure-16-9();
figure {
grid-row: 2;
grid-column: 2;
}
.report__dl {
grid-row: 2;
grid-column: 1;
align-self: end;
// font-size: var(--fs-small);
border-bottom: var(--border-light);
align-items: flex-start;
.dl__group {
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
}
.btn--group {
position: relative;
grid-row: 3;
grid-column: 1/3;
display: flex;
justify-content: start;
flex-wrap: wrap;
align-items: start;
gap: calc(var(--spacing)*0.25);
}
}
// CONTENT -------------------------------------------------------------------------------
.report__content {
.section-content {
padding-bottom: calc(var(--spacing)*3);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
}
}
.section-title {
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
font-weight: normal;
text-transform: uppercase;
text-wrap: balance;
max-width: 42ch;
}
p {
margin: calc(var(--spacing)*0.5) 0;
}
ul {
padding-left: 3ch;
}
}
.report__content:target {
padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
}
.media{
video{
width: 100%;
}
figure{
height: auto;
}
.caption{
font-size: var(--fs-small);
line-height: 1.1;
}
.swiper{
width: calc(100% - 60px);
max-width: 600px;
}
}
/// PANEL-LEFT  --------------------------------------------
#toggle-panel {
width: calc(var(--h-block) * 1);
padding: 0;
}
#report__aside {
--border-aside: 1px solid var(--color-txt);
.panel__header {
display: flex;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5ch;
.icon {
width: calc(var(--h-block)*1.5);
display: flex;
align-items: center;
justify-content: center;
}
svg {
width: 16px;
fill: var(--color-txt);
}
.text {
padding-top: 5px;
}
.close {
position: absolute;
right: 0;
svg {
width: 10px;
fill: var(--color-txt);
}
}
cursor: pointer;
&:hover {
.close svg {
fill: var(--grey-200);
}
}
}
.panel__content {
padding: var(--padding-body);
overflow: scroll;
@include hide-scroll();
border: var(--border-aside);
border-top: none;
}
#toc {
ul {
list-style: none;
}
li {
font-size: var(--fs-small);
color: var(--color-txt-light);
a {
display: block;
padding: 5px 1ch;
padding-top: 7px;
}
}
li.selected {
background-color: var(--grey-800);
color: var(--color-txt);
}
li:hover {
background-color: var(--grey-800);
}
.toc-level-1 {
margin-bottom: calc(var(--spacing)*0.5);
font-weight: bold;
}
.toc-level-2 {
margin-bottom: calc(var(--spacing)*0.25);
padding-left: 4ch;
}
a {
text-decoration: none;
}
}
.btn--group {
margin-top: calc(var(--spacing)*0.5);
display: flex;
gap: var(--padding-inner);
button {
flex-grow: 1;
}
}
}

8
assets/fonts/stylesheet.css
View file

@ -2,22 +2,22 @@
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-55Regular.woff") format("woff"); src: url("Executive-55Regular.woff") format("woff");
font-weight: normal; font-weight: 300;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-56Italic.woff") format("woff"); src: url("Executive-56Italic.woff") format("woff");
font-weight: normal; font-weight: 300;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-65Medium.woff") format("woff"); src: url("Executive-65Medium.woff") format("woff");
font-weight: 500; font-weight: normal;
font-style: 500; font-style: normal;
} }
@font-face { @font-face {

1
assets/icons/article.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 289 B

2
assets/icons/close.svg
View file

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg style="fill: var(--color-txt)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)" /> <rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)" />
<rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)" /> <rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 309 B

Before After
Before After

1
assets/icons/folder.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 207 B

1
assets/icons/pin.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M160 96C160 78.3 174.3 64 192 64L448 64C465.7 64 480 78.3 480 96C480 113.7 465.7 128 448 128L418.5 128L428.8 262.1C465.9 283.3 494.6 318.5 507 361.8L510.8 375.2C513.6 384.9 511.6 395.2 505.6 403.3C499.6 411.4 490 416 480 416L160 416C150 416 140.5 411.3 134.5 403.3C128.5 395.3 126.5 384.9 129.3 375.2L133 361.8C145.4 318.5 174 283.3 211.2 262.1L221.5 128L192 128C174.3 128 160 113.7 160 96zM288 464L352 464L352 576C352 593.7 337.7 608 320 608C302.3 608 288 593.7 288 576L288 464z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 711 B

1
assets/icons/share.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 679 B

8
assets/icons/toc.svg
View file

@ -1,8 +0,0 @@
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M200,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,11.866,200,16.032,200,21.163Z"/>
<path d="M38.741,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,11.866,38.741,16.032,38.741,21.163Z"/>
<path d="M200,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,88.53,200,92.696,200,97.827Z"/>
<path d="M38.741,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,88.53,38.741,92.696,38.741,97.827Z"/>
<path d="M200,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h119.292C195.834,165.195,200,169.36,200,174.491Z"/>
<path d="M38.741,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h20.488C34.575,165.195,38.741,169.36,38.741,174.491Z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/adam-raihane/fig-1-a.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 763 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Before After
Before After

BIN
assets/images/adam-raihane/fig-1-b.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 400 KiB

After

Width:  |  Height:  |  Size: 910 KiB

Before After
Before After

BIN
assets/images/adam-raihane/fig-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
assets/images/adam-raihane/fig-2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 388 KiB

After

Width:  |  Height:  |  Size: 706 KiB

Before After
Before After

BIN
assets/images/adam-raihane/fig-4.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 408 KiB

BIN
assets/images/adam-raihane/fig-5.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 236 KiB

BIN
assets/images/adam-raihane/fig-6.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 255 KiB

BIN
assets/images/adam-raihane/fig-7.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 345 KiB

31
assets/js/banner-sticky-desktop.js
View file

@ -4,14 +4,19 @@ export function bannerStickyDesktop(responsiveSmall) {
if (isInitialized) return; if (isInitialized) return;
let body = document.body; let body = document.body;
let panel = body.querySelector(".panel-left"); if (!body || body.dataset.template !== 'investigation-summary') return;
if (!panel) return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer"); let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
// Stocker la hauteur initiale du banner // Stocker la hauteur initiale du banner
const bannerInitialHeight = panel.offsetHeight; const bannerInitialHeight = bannerPage.offsetHeight;
// Stocker la position initiale du footer (calculée une seule fois au chargement)
let footerInitialTop = footer.offsetTop;
function checkScroll() { function checkScroll() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
@ -19,35 +24,33 @@ export function bannerStickyDesktop(responsiveSmall) {
// Vérifier que l'écran est plus grand que responsiveSmall // Vérifier que l'écran est plus grand que responsiveSmall
if (screenWidth <= responsiveSmall) { if (screenWidth <= responsiveSmall) {
// Réinitialiser le transform si on est en dessous de responsiveSmall // Réinitialiser le transform si on est en dessous de responsiveSmall
panel.style.transform = ''; bannerPage.style.transform = '';
return; return;
} }
// Calculer la position du bas de la fenêtre // Calculer la position du bas de la fenêtre
const windowBottom = window.scrollY + window.innerHeight; const windowBottom = window.scrollY + window.innerHeight;
// Calculer dynamiquement la position du footer à chaque scroll // Calculer de combien on dépasse le haut du footer (position initiale)
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour const overlap = windowBottom - footerInitialTop;
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
// Calculer de combien on dépasse le haut du footer
const overlap = windowBottom - footerTop;
if (overlap > 0) { if (overlap > 0) {
// Le bas de la fenêtre a atteint le haut du footer // Le bas de la fenêtre a atteint le haut du footer
// Déplacer le banner vers le haut du nombre de pixels de dépassement // Déplacer le banner vers le haut du nombre de pixels de dépassement
const translateValue = Math.min(overlap, bannerInitialHeight); const translateValue = Math.min(overlap, bannerInitialHeight);
panel.style.transform = `translateY(-${translateValue}px)`; bannerPage.style.transform = `translateY(-${translateValue}px)`;
} else { } else {
// Réinitialiser la position si on n'a pas encore atteint le footer // Réinitialiser la position si on n'a pas encore atteint le footer
panel.style.transform = 'translateY(0)'; bannerPage.style.transform = 'translateY(0)';
} }
} }
window.addEventListener('scroll', checkScroll); window.addEventListener('scroll', checkScroll);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// Recalculer la position du footer lors du resize
if (window.innerWidth > responsiveSmall) { if (window.innerWidth > responsiveSmall) {
panel.style.transform = ''; bannerPage.style.transform = '';
footerInitialTop = footer.offsetTop;
} }
checkScroll(); checkScroll();
}); });

50
assets/js/banner-sticky-mobile.js Normal file
View file

@ -0,0 +1,50 @@
let isInitialized = false;
export function bannerStickyMobile(responsiveSmall) {
if (isInitialized) return;
let body = document.body;
if (!body || body.dataset.template !== 'investigation-summary') return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
function checkScroll() {
const screenWidth = window.innerWidth;
// Vérifier que l'écran est plus petit que responsiveSmall
if (screenWidth >= responsiveSmall) {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
return;
}
const sectionTop = sectionDl.getBoundingClientRect().top;
const footerTop = footer.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
// Activer le banner quand #section__dl arrive en bas de l'écran
if (sectionTop <= windowHeight) {
bannerPage.classList.add('is-visible');
// Pousser le banner vers le haut si le footer arrive en bas de l'écran
if (footerTop < windowHeight) {
const pushUp = windowHeight - footerTop;
bannerPage.style.transform = `translateY(-${pushUp}px)`;
} else {
bannerPage.style.transform = 'translateY(0)';
}
} else {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

35
assets/js/btn-group-mobile.js
View file

@ -1,35 +0,0 @@
let isInitialized = false;
export function btnGroupMobile() {
if (isInitialized) return;
const btnGroup = document.querySelector(".btn--group__mobile");
let footer = document.querySelector("#site-footer");
if (!btnGroup) return;
function checkScroll() {
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
const footerTop = footer.getBoundingClientRect().top;
if (scrollY > windowHeight * 0.6) {
btnGroup.classList.add('is-visible');
if (footerTop < windowHeight) {
btnGroup.classList.remove('is-visible');
}
} else {
btnGroup.classList.remove('is-visible');
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

87
assets/js/dropdown.js
View file

@ -1,87 +0,0 @@
export function initDropdowns(responsiveSmall) {
const dropdowns = document.querySelectorAll('.dropdown');
function updateBodyOverflow(isOpen, dropdownElement = null) {
const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
document.body.classList.add('is-hidden');
} else {
document.body.classList.remove('is-hidden');
}
}
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger');
const content = dropdown.querySelector('.dropdown__content');
if (!trigger) return;
// Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
if (dropdown.querySelector('.modal--share') && content) {
content.addEventListener('click', (e) => {
e.stopPropagation();
});
}
trigger.addEventListener('click', (e) => {
e.stopPropagation();
// Ferme les autres dropdowns ouverts
dropdowns.forEach(other => {
if (other !== dropdown) {
other.classList.remove('is-open', 'dropdown--align-right');
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}
});
const isOpening = !dropdown.classList.contains('is-open');
if (isOpening) {
// Vérifie s'il y a la place à droite
const content = dropdown.querySelector('.dropdown__content');
const triggerRect = trigger.getBoundingClientRect();
const contentWidth = content.offsetWidth || 300;
const spaceRight = window.innerWidth - triggerRect.left;
if (spaceRight < contentWidth) {
dropdown.classList.add('dropdown--align-right');
} else {
dropdown.classList.remove('dropdown--align-right');
}
}
// Toggle le dropdown actuel
dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected');
// Gère l'overflow du body sur mobile
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
});
});
// Ferme tous les dropdowns au clic extérieur
document.addEventListener('click', (e) => {
dropdowns.forEach(dropdown => {
// Ne ferme pas si le clic est dans un dropdown contenant .modal--share
if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) {
return;
}
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
updateBodyOverflow(false);
});
// Ferme au press Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
updateBodyOverflow(false);
}
});
}

22
assets/js/header.js
View file

@ -1,29 +1,43 @@
export function headerToggle() { export function headerToggle() {
const header = document.getElementById("site-header"); const header = document.getElementById("site-header");
const buttonToggle = document.querySelector("#menu-toggle"); const buttonToggle = document.querySelector("#menu-toggle");
console.log(header);
console.log(buttonToggle);
if (!header || !buttonToggle) return; if (!header || !buttonToggle) return;
buttonToggle.addEventListener("click", () => { buttonToggle.addEventListener("click", () => {
const isOpen = document.body.classList.toggle("menu-open"); document.body.classList.toggle("menu-open");
}); });
} }
// DELETE ?
export function headerScrollVisibility() { export function headerScrollVisibility() {
const header = document.getElementById("site-header"); const header = document.getElementById("site-header");
const hero = document.getElementById("hero");
if (!header) return; if (!header) return;
function checkScroll() { function checkScroll() {
if (hero) {
// Comportement avec hero
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
const heroBottom = hero.getBoundingClientRect().bottom;
if (heroBottom <= headerHeight) {
header.classList.add("is-visible");
} else {
header.classList.remove("is-visible");
}
} else {
// Comportement sans hero \
if (window.scrollY >= 300) { if (window.scrollY >= 300) {
header.classList.add("is-visible"); header.classList.add("is-visible");
} else { } else {
header.classList.remove("is-visible"); header.classList.remove("is-visible");
} }
} }
}
window.addEventListener("scroll", checkScroll); window.addEventListener("scroll", checkScroll);
checkScroll(); checkScroll(); // Vérifier au chargement
} }

6
assets/js/hero-video.js
View file

@ -9,17 +9,11 @@ export function playVideo() {
playButton.addEventListener('click', function() { playButton.addEventListener('click', function() {
const extract = document.querySelector('.extract'); const extract = document.querySelector('.extract');
const videoFull = document.querySelector('.video-full'); const videoFull = document.querySelector('.video-full');
const titleSmall = document.querySelector('.page-title-small');
if (extract) { if (extract) {
extract.style.display = 'none'; extract.style.display = 'none';
} }
if(titleSmall){
titleSmall.style.display = 'none';
}
if (videoFull) { if (videoFull) {
videoFull.style.display = 'block'; videoFull.style.display = 'block';

60
assets/js/panel.js
View file

@ -1,60 +0,0 @@
export function panelToggle(responsiveSmall) {
const toggleBtn = document.querySelector('#toggle-panel');
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
function openPanel() {
main.classList.add('panel-open');
const screenWidth = window.innerWidth;
if (screenWidth <= responsiveSmall) {
console.log("small screen");
document.body.style.overflowY = 'hidden';
}
}
function closePanel() {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
if (toggleBtn) {
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (toggleBtnMobile) {
toggleBtnMobile.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closePanel);
}
}
export function tocMobile(responsiveSmall) {
const toc = document.querySelector('#toc');
const main = document.querySelector('main');
if (!toc) return;
const tocLinks = toc.querySelectorAll('a');
tocLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= responsiveSmall) {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
});
});
}

220
assets/js/report.js
View file

@ -1,220 +0,0 @@
import { initSwipers } from './swipers.js';
export function report(responsiveSmall) {
if (document.body.dataset.template === 'report') {
// Initialiser tous les sliders de type before-after
initSliderBeforeAfter();
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
if (window.matchMedia(responsiveSmall).matches) {
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
initSwipers();
return;
}
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
initMediaDisplay();
}
}
function initSliderBeforeAfter(container = document){
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
slidersBeforeAfter.forEach(function (sliderContainer, index) {
const sliderInput = sliderContainer.querySelector('.slider');
if (sliderInput) {
sliderInput.addEventListener('input', (e) => {
console.log('slider value:', e.target.value);
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}
function initMediaDisplay() {
const reportMedias = document.querySelector('#report__medias');
if (!reportMedias) return;
// Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
const rootStyles = getComputedStyle(document.documentElement);
const headerH = rootStyles.getPropertyValue('--header-h').trim();
const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
const spacingH = rootStyles.getPropertyValue('--spacing').trim();
// Convertir en pixels si nécessaire
const headerHPx = parseFloat(headerH);
const paddingBodyPx = parseFloat(paddingBody);
const spacingHPx = parseFloat(paddingBody);
const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
const sections = document.querySelectorAll('.section-content');
const mediaElements = [];
let mediaCounter = 0;
// 1. Pour chaque section, traiter les .media
sections.forEach((section) => {
const medias = section.querySelectorAll('.media');
medias.forEach((media) => {
// Générer un ID unique si nécessaire
if (!media.id) {
media.id = `media-${mediaCounter++}`;
}
// Créer une ancre
const anchor = document.createElement('div');
anchor.className = 'media-anchor';
anchor.dataset.mediaId = media.id;
anchor.innerHTML = '<span class="arrow-report">▶</span>'
// Vérifier si le media est précédé d'un titre
let previousElement = media.previousElementSibling;
let insertBeforeElement = media;
// Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
insertBeforeElement = previousElement;
}
// Insérer l'ancre
insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
// Stocker la référence pour l'observer
mediaElements.push({
anchor: anchor,
media: media.cloneNode(true), // Cloner le media
originalMedia: media,
section: section
});
// Masquer le media original
media.style.display = 'none';
});
});
// 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
let currentMediaId = null;
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
function updateActiveMedia() {
// Éviter les mises à jour simultanées
if (isUpdating) return;
// Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
let closestAnchor = null;
let closestDistance = Infinity;
mediaElements.forEach(({ anchor }) => {
const rect = anchor.getBoundingClientRect();
// Si l'ancre est au-dessus ou à la ligne de déclenchement
if (rect.top <= totalOffset) {
const distance = totalOffset - rect.top;
// Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
if (distance < closestDistance) {
closestDistance = distance;
closestAnchor = anchor;
}
}
});
// Si on a trouvé une ancre
if (closestAnchor) {
const mediaId = closestAnchor.dataset.mediaId;
// Si c'est déjà le media affiché, ne rien faire
if (currentMediaId === mediaId) return;
// Trouver le media correspondant
const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
if (mediaData) {
isUpdating = true;
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
requestAnimationFrame(() => {
// Vider le conteneur
reportMedias.innerHTML = '';
// Ajouter le nouveau media
const newMediaElement = mediaData.media.cloneNode(true);
reportMedias.appendChild(newMediaElement);
currentMediaId = mediaId;
// Attendre le prochain frame pour initialiser les sliders/swipers
requestAnimationFrame(() => {
initSliderBeforeAfter(reportMedias);
initSwipers(reportMedias);
// Débloquer les mises à jour après un court délai
setTimeout(() => {
isUpdating = false;
}, 100);
});
});
}
} else {
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
if (currentMediaId !== null) {
reportMedias.innerHTML = '';
currentMediaId = null;
}
}
}
// 3. Écouter le scroll
let scrollTimeout;
window.addEventListener('scroll', () => {
// Throttle pour optimiser les performances
if (scrollTimeout) return;
scrollTimeout = setTimeout(() => {
updateActiveMedia();
scrollTimeout = null;
}, 10);
});
// Appeler une première fois au chargement
updateActiveMedia();
// 4. Gérer les sections sans media immédiat
// Observer aussi les sections elles-mêmes
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const section = entry.target;
// Vérifier si cette section a un media juste après son premier titre
const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
if (firstTitle) {
let nextElement = firstTitle.nextElementSibling;
// Chercher le prochain élément qui n'est pas une ancre
while (nextElement && nextElement.classList.contains('media-anchor')) {
nextElement = nextElement.nextElementSibling;
}
// Si le prochain élément n'est pas un .media, vider #report__medias
if (!nextElement || !nextElement.classList.contains('media')) {
reportMedias.innerHTML = '';
currentMediaId = null;
}
}
}
});
}, {
root: null,
rootMargin: `-${totalOffset}px 0px 0px 0px`,
threshold: 0
});
// Observer toutes les sections
sections.forEach(section => {
sectionObserver.observe(section);
});
}

20
assets/js/script.js
View file

@ -1,15 +1,10 @@
import { headerToggle, headerScrollVisibility } from './header.js'; import { headerToggle, headerScrollVisibility } from './header.js';
import { copyLink } from './share.js'; import { copyLink } from './share.js';
import { panelToggle, tocMobile } from './panel.js'; import { bannerStickyMobile } from './banner-sticky-mobile.js';
import { btnGroupMobile } from './btn-group-mobile.js';
import { bannerStickyDesktop } from './banner-sticky-desktop.js'; import { bannerStickyDesktop } from './banner-sticky-desktop.js';
import { themeToggle } from './themeToggle.js'; import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js'; import { initHeroSlider } from './hero-slider.js';
import { playVideo } from './hero-video.js'; import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js';
import { initSwipers } from './swipers.js';
import { report } from './report.js';
const responsiveMedium = 1080; const responsiveMedium = 1080;
const responsiveSmall = 768; const responsiveSmall = 768;
@ -17,18 +12,11 @@ const responsiveSmall = 768;
window.onload = async function () { window.onload = async function () {
console.log("SCRIPT LOADED"); console.log("SCRIPT LOADED");
headerToggle(); headerToggle();
panelToggle(responsiveSmall); headerScrollVisibility();
themeToggle();
report(responsiveSmall);
tocMobile(responsiveSmall);
copyLink(); copyLink();
btnGroupMobile(responsiveSmall) themeToggle();
bannerStickyMobile(responsiveSmall);
bannerStickyDesktop(responsiveSmall); bannerStickyDesktop(responsiveSmall);
initHeroSlider(); initHeroSlider();
playVideo(); playVideo();
initDropdowns(responsiveSmall);
initSwipers();
} }

10
assets/js/share.js
View file

@ -1,16 +1,14 @@
export function copyLink() { export function copyLink() {
let buttons = document.querySelectorAll('.copy-link button'); let buttons = document.querySelectorAll('.copy-link button');
buttons.forEach(function (button, index) { buttons.forEach(function (button, index) {
let input = button.parentNode.querySelector("input"); let link = button.parentNode.querySelector("input").value;
let link = input.value;
button.addEventListener('click', function() { button.addEventListener('click', function() {
navigator.clipboard.writeText(link).then(() => { navigator.clipboard.writeText(link).then(() => {
input.value = 'Lien copié !'; const originalText = button.textContent;
input.classList.add('is-copied'); button.textContent = 'Lien copié';
setTimeout(() => { setTimeout(() => {
input.value = link; button.textContent = originalText;
input.classList.remove('is-copied');
}, 1000); }, 1000);
}).catch(err => { }).catch(err => {
console.error('Erreur lors de la copie:', err); console.error('Erreur lors de la copie:', err);

54
assets/js/swipers.js
View file

@ -1,54 +0,0 @@
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
export function initSwipers(container = document) {
const sliders = container.querySelectorAll('.swiper');
if (sliders.length === 0) {
return;
}
sliders.forEach((sliderElement) => {
// Éviter de réinitialiser un swiper déjà initialisé
if (sliderElement.swiper) {
return;
}
const swiper = new Swiper(sliderElement, {
// Optional parameters
slidesPerView: 1,
spaceBetween: 20,
speed: 600,
// Touch/Swipe settings
touchRatio: 1,
touchAngle: 45,
grabCursor: true,
simulateTouch: true,
allowTouchMove: true,
// Navigation arrows
navigation: {
nextEl: sliderElement.querySelector('.swiper-button-next'),
prevEl: sliderElement.querySelector('.swiper-button-prev'),
},
// Pagination
pagination: {
el: sliderElement.querySelector('.swiper-pagination'),
clickable: true,
},
// Keyboard control
keyboard: {
enabled: true,
},
// Accessibility
a11y: {
prevSlideMessage: 'Investigation précédente',
nextSlideMessage: 'Investigation suivante',
paginationBulletMessage: 'Aller à l\'investigation {{index}}',
},
});
});
}

21
site/blueprints/pages/folder.yml
View file

@ -1,21 +0,0 @@
title: Dossier
tabs:
contentTab:
label: Contenu
icon: page
fields:
description:
label: Description
type: textarea
size: medium
buttons: false
cover:
label: Visuel de couverture
type: files
multiple: false
layout: cards
image:
ratio: 12/7
cover: true
help: Image utilisée dans la liste des dossiers

17
site/blueprints/pages/folders.yml
View file

@ -1,17 +0,0 @@
title: Dossiers
tabs:
contentTab:
label: Contenu
sections:
folders:
type: pages
text: "{{ page.title }}"
info: "{{ page.description }}"
layout: cards
size: huge
search: true
image:
cover: true
ratio: 12/7
template: folder

127
site/blueprints/pages/investigation-summary.yml
View file

@ -1,127 +0,0 @@
title: Investigation Summary
tabs:
contentTab:
label: Contenu
icon: page
columns:
- width: 2/6
sections:
createdSection:
type: fields
fields:
created:
label: Première publication
type: date
display: DD / MM / YYYY
default: today
width: 1/2
reportSection:
label: Rapport
type: pages
template: report
- width: 4/6
fields:
chapo:
label: Chapo
type: writer
nodes: false
buttons: false
cover:
label: Visuel de couverture
type: files
multiple: false
layout: cards
image:
ratio: 12/7
cover: true
help: Image utilisée dans les listes d'enquêtes
heroType:
label: Type de hero
type: select
options:
image: Image simple
slider: Slider d'images
video: Vidéo
default: image
width: 1/3
heroImages:
label: Images hero
type: files
multiple: true
layout: cards
when:
heroType: image
heroType: slider
videoExtractUrl:
label: URL vidéo d'extrait (autoplay)
type: url
when:
heroType: video
width: 1/2
videoFullUrl:
label: URL vidéo complète (YouTube embed)
type: url
when:
heroType: video
width: 1/2
synthesis:
label: Synthèse
type: textarea
size: large
buttons: false
metadataTab:
label: Métadonnées
icon: table
fields:
folder:
label: Dossier
type: select
options: query
query:
fetch: site.find('dossiers').children
text: "{{ page.title }}"
value: "{{ page.slug }}"
empty: Aucun dossier
width: 1/3
incidentDate:
label: Date de l'incident
type: date
display: DD / MM / YYYY
width: 1/3
incidentLocation:
label: Lieu de l'incident
type: text
width: 1/3
incidentConsequences:
label: Conséquence(s)
type: text
width: 1/3
keywords:
label: Mots-clés
type: tags
width: 1/2
methodology:
label: Méthodologie
type: tags
width: 1/2
partners:
label: Partenaires
type: structure
width: 1/2
fields:
name:
label: Nom
type: text
link:
label: Lien
type: url
team:
label: Équipe Index
type: tags
width: 1/2
relatedInvestigations:
label: Enquêtes en lien
type: pages
multiple: true
query: site.find('enquetes').children

21
site/blueprints/pages/report.yml → site/blueprints/pages/investigation.yml
View file

@ -81,3 +81,24 @@ tabs:
type: link type: link
options: options:
- url - url
line:
type: line
indexTeam:
label: Équipe Index
type: structure
columns:
responsability:
width: 1/2
names:
width: 1/2
fields:
responsability:
label: Responsabilité
type: text
width: 1/2
names:
label: Nom
type: entries
width: 1/2
field:
type: text

1
site/blueprints/pages/investigations.yml
View file

@ -14,4 +14,3 @@ tabs:
image: image:
cover: true cover: true
ratio: 12/7 ratio: 12/7
template: investigation-summary

2
site/config/config.php
View file

@ -2,8 +2,6 @@
return [ return [
'debug' => true, 'debug' => true,
'locale' => 'fr_FR.UTF-8',
'date.handler' => 'intl',
'thumbs' => [ 'thumbs' => [
'quality' => 80, 'quality' => 80,
'presets' => [ 'presets' => [

1
site/snippets/back-to-top.php
View file

@ -1 +0,0 @@
<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>

2
site/snippets/footer.php
View file

@ -1,4 +1,4 @@
<?php snippet('back-to-top') ?> </main>
<footer id="site-footer"> <footer id="site-footer">
<div class="site-footer__container"> <div class="site-footer__container">
<div class="footer__newsletter"> <div class="footer__newsletter">

5
site/snippets/header.php
View file

@ -26,7 +26,7 @@
<div class="site-header__inner"> <div class="site-header__inner">
<h1 id="site-title"> <h1 id="site-title">
<a <a
href="<?= $site->url() ?>" href="https://www.index.ngo/"
aria-label="Retour à l’accueil" aria-label="Retour à l’accueil"
title="aller au site d'Index" title="aller au site d'Index"
> >
@ -40,7 +40,7 @@
<nav id="nav-highlight"> <nav id="nav-highlight">
<ul> <ul>
<li><a href="/enquetes">Enquêtes</a></li> <li><a href="/enquetes">Enquêtes</a></li>
<li><a href="/impacts">Impact</a></li> <li><a href="#">Impact</a></li>
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li> <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
</ul> </ul>
</nav> </nav>
@ -65,3 +65,4 @@
</div> </div>
</header> </header>
<?php snippet('nav') ?> <?php snippet('nav') ?>
<main>

5
site/snippets/modal-share.php
View file

@ -1,5 +1,8 @@
<div class="modal--share"> <div class="modal--share">
<div class="modal-title">
<p>Partager</p>
<button><span class="close" w3-include-html="/assets/icons/close.svg"></span></button>
</div>
<ul class="socials"> <ul class="socials">
<li class="socials__x"> <li class="socials__x">

3
site/snippets/nav.php
View file

@ -12,8 +12,7 @@ de la vérité et de la justice.</p>
<ul> <ul>
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li> <li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
<li class="highlight"><a href="/enquetes">Enquêtes</a></li> <li class="highlight"><a href="/enquetes">Enquêtes</a></li>
<li class="highlight"><a href="/impacts">Impact</a></li> <li class="highlight"><a href="#">Impact</a></li>
<li><a href="/dossiers">Dossiers</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li> <li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li> <li><a href="#">Ressources</a></li>

2
site/templates/about.php
View file

@ -1,4 +1,2 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

220
site/templates/folder.php
View file

@ -1,220 +0,0 @@
<?php snippet('header') ?>
<main>
<header class="page__header">
<p class="page__type">Dossier</p>
<h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->description()->isNotEmpty()): ?>
<div class="description">
<p><?= $page->description() ?></p>
</div>
<?php endif ?>
</header>
<?php
// Récupérer les enquêtes associées à ce dossier
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
return $investigation->folder()->value() === $page->slug();
});
?>
<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" id="section__investigations">
<h3 class="container__title">2 enquêtes</h3>
<?php foreach ($investigations as $investigation): ?>
<article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
<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()): ?>
<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 ?>
<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 -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<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 class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</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>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</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>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</main>
<?php snippet('footer') ?>

59
site/templates/folders.php
View file

@ -1,59 +0,0 @@
<?php snippet('header') ?>
<main>
<header class="page__header">
<h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->chapo()->isNotEmpty()): ?>
<div class="description-medium">
<p><?= $page->chapo() ?></p>
</div>
<?php endif ?>
</header>
<section class="container-cards">
<?php foreach ($page->children()->listed() as $folder): ?>
<article class="card--folder">
<?php if ($cover = $folder->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php endif ?>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
return $investigation->folder()->value() === $folder->slug();
})->count();
?>
<ul>
<?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>"></a>
</article>
<?php endforeach ?>
</section>
</main>
<?php snippet('footer') ?>

295
site/templates/home.php
View file

@ -1,295 +1,10 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main>
<p>
<section class="section--home" id="home__hero"> L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir.
Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine.
<div class="section--inner"> Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits.
<p class="baseline">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et de&nbsp;la&nbsp;justice.</p> Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche.
<button class="btn--bold-inline">
<a href="#">
<span class="text">En savoir plus</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
</section>
<section class="section--home" id="home__investigations">
<div class="section--inner">
<div class="col-left">
<?php $investigationsPage = site()->find('enquetes'); ?>
<h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2>
<?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
<?= $investigationsPage->chapo() ?>
</p> </p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="/enquetes">
<span class="text">Voir les enquêtes</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
<div class="col-right">
<div class="home-investigations-slider swiper">
<div class="swiper-wrapper">
<?php
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
foreach ($latestInvestigations as $investigation):
?>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
</div>
<?php if ($keywords = $investigation->keywords()->split()): ?>
<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 if ($investigation->pinned()->toBool()): ?>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
</article>
</div>
</div>
<?php endforeach ?>
</div> <!-- swiper-wrapper -->
<!-- Navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div> <!-- home-investigations-slider -->
</div> <!-- col-right-->
</div>
</section>
<section class="section--home" id="home__impacts">
<div class="section--inner">
<div class="col-left">
<?php $impactsPage = site()->find('impacts'); ?>
<h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2>
<?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
<?= $impactsPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="/impacts">
<span class="text">Voir les impacts</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
<div class="col-right">
<!-- Contenu statique temporaire -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<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 class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</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>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</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>
</div><!-- col-right -->
</div>
</section>
<section class="section--home" id="home__folders">
<div class="section--inner">
<div class="col-left">
<?php $foldersPage = site()->find('dossiers'); ?>
<h2 class="title-section"><?= $foldersPage ? $foldersPage->title() : 'Dossiers' ?></h2>
<?php if ($foldersPage && $foldersPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
<?= $foldersPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="/dossiers">
<span class="text">Voir les dossiers</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
</button>
</div>
<div class="col-right">
<?php
$latestFolders = site()->find('dossiers') ? site()->find('dossiers')->children()->listed()->sortBy('created', 'desc')->limit(2) : [];
if (count($latestFolders) > 0):
foreach ($latestFolders as $folder):
?>
<article class="card--folder">
<?php if ($cover = $folder->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php endif ?>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
return $investigation->folder()->value() === $folder->slug();
})->count();
?>
<ul>
<?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul>
</div>
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>"></a>
</article>
<?php endforeach ?>
<?php endif ?>
</div> <!-- col-right -->
</div>
</section>
</main> </main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

127
site/templates/impacts.php
View file

@ -1,129 +1,2 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
<header class="page__header">
<h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->chapo()->isNotEmpty()): ?>
<div class="description-medium">
<p><?= $page->chapo() ?></p>
</div>
<?php endif ?>
</header>
<div class="page__sort">
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
<div class="dropdown">
<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>
<li><button type="button" data-filter="cisjordanie">Judiciaire</button></li>
<li><button type="button" data-filter="etats-unis">Institutionnel</button></li>
<li><button type="button" data-filter="gaza">Public</button></li>
</ul>
</div>
</div>
</div>
<div class="page__content">
<!-- Contenu statique temporaire -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<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 class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</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>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</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>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<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>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div>
</div>
</div>
</div>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

451
site/templates/investigation-summary.php
View file

@ -1,236 +1,179 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<?php <header>
// Récupérer le rapport (première page enfant de type report) <p class="tag-inline">Enquête</p>
$report = $page->children()->filterBy('intendedTemplate', 'report')->first(); <h2 class="page-title">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
?> <p class="date-publish"></p>
</header>
<div class="btn--group__mobile">
<?php if ($report): ?>
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
<?php endif ?>
<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>
<!-- HERO IMAGE SIMPLE ------------------------------ -->
<!-- <div id="hero">
<div class="panel-left" id="banner--page">
<nav id="nav--page">
<ul>
<li><a href="#">Vidéo</a></li>
<li><a href="#section__synthese">Synthèse</a></li>
<li><a href="#section__impacts">Impacts</a></li>
<li><a href="#section__folder">Dossier</a></li>
<li><a href="#section__related-articles">En lien</a></li>
</ul>
</nav>
<div class="btn--group">
<?php if ($report): ?>
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
<?php endif ?>
<div class="dropdown dropdown--position-panel">
<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>
</div>
<header class="page__header">
<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>
<?php endif ?>
</header>
<div class="page__content">
<?php if ($page->heroType()->value() == 'image'): ?>
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
<!-- HERO IMAGE SIMPLE -->
<div id="hero">
<figure> <figure>
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>"> <img src="/assets/images/Nidal-Khaled-Amirah.png">
</figure> </figure>
<?php if ($heroImage->caption()->isNotEmpty()): ?> <figcaption>Ici la légende de l’image. À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</figcaption>
<figcaption><?= $heroImage->caption() ?></figcaption> </div> -->
<?php endif ?>
</div>
<?php endif ?>
<?php elseif ($page->heroType()->value() == 'slider'): ?>
<?php if ($heroImages = $page->heroImages()->toFiles()): ?>
<!-- HERO SLIDER --> <!-- HERO SLIDER ------------------------------ -->
<div id="hero" class="hero-slider swiper"> <!-- <div id="hero" class="hero-slider swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<?php foreach ($heroImages as $image): ?>
<div class="swiper-slide"> <div class="swiper-slide">
<figure> <figure>
<img src="<?= $image->url() ?>" alt="<?= $page->title()->esc() ?>"> <img src="/assets/images/Nidal-Khaled-Amirah.png">
</figure> </figure>
<?php if ($image->caption()->isNotEmpty()): ?> <figcaption>Ici la légende de l'image 1. À partir d'images exclusives, l'analyse conjointe de B'Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu'ils ne présentaient aucun danger.</figcaption>
<figcaption><?= $image->caption() ?></figcaption> </div>
<?php endif ?>
<div class="swiper-slide">
<figure>
<img src="/assets/images/kanaky-visuel-1.png">
</figure>
<figcaption>Ici la légende de l'image 2</figcaption>
</div>
<div class="swiper-slide">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<figcaption>Ici la légende de l'image 3</figcaption>
</div> </div>
<?php endforeach ?>
</div> </div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
</div> </div> -->
<?php endif ?>
<?php elseif ($page->heroType()->value() == 'video'): ?>
<!-- HERO VIDEO --> <!-- HERO VIDEO ------------------------------ -->
<div id="hero" class="hero-video"> <div id="hero" class="hero-video">
<div class="player-container"> <div class="player-container">
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
<div class="extract"> <div class="extract">
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $page->videoExtractUrl() ?>"></video> <video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/07/Jumaa_Site-web-16-9.mp4"></video>
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button> <button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
</div> </div>
<?php endif ?>
<?php if ($page->videoFullUrl()->isNotEmpty()): ?>
<div class="video-full"> <div class="video-full">
<iframe rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoFullUrl() ?>"></iframe> <iframe id="youtube-vue-player-rhTyqvaQE" rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mort par noyade de Jumaa al-Hasan, exilé syrien : la police mise en cause" width="480" height="320" src="https://www.youtube.com/embed/HuH8NEwn0-k?autoplay=false&amp;loop=1&amp;controls=1&amp;modestbranding=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.index.ngo&amp;widgetid=1&amp;forigin=https%3A%2F%2Fwww.index.ngo%2Fenquetes%2Fmort-par-noyade-de-jumaa-al-hasan-la-police-mise-en-cause%2F&amp;aoriginsup=0&amp;gporigin=https%3A%2F%2Fwww.index.ngo%2F&amp;vf=1"></iframe>
</div> </div>
<?php endif ?>
</div> </div>
<!-- <figure>
<img src="/assets/images/Nidal-Khaled-Amirah.png">
</figure> -->
</div> </div>
<?php endif ?>
<dl class="section__article" id="section__dl">
<?php if ($page->incidentDate()->isNotEmpty()): ?>
<div id="banner--page">
<nav id="nav--page">
<ul>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Synthèse</a></li>
<li><a href="#">Impacts</a></li>
<li><a href="#">En lien</a></li>
</ul>
</nav>
<div class="btn--group">
<button class="btn--bold"><a href="/enquetes/enquete-1-full">Lire le rapport</a></button>
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
</div>
<input type="checkbox" id="share-banner__desktop">
<?php snippet('modal-share') ?>
</div>
<p class="section__article" id="section__short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="section__article" id="section__dl">
<div class="dl__group"> <div class="dl__group">
<dt>Date de l'incident</dt> <dt>Date de l’incident</dt>
<dd><time datetime="<?= $page->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $page->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd> <dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div> </div>
<?php endif ?>
<?php if ($page->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Lieu de l'incident</dt> <dt>Lieu de l’incident</dt>
<dd><?= $page->incidentLocation()->esc() ?></dd> <dd>Naplouse, Cisjordanie occupée, Palestine</dd>
</div> </div>
<?php endif ?>
<?php if ($page->incidentConsequences()->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Conséquences</dt> <dt>Conséquences</dt>
<dd><?= $page->incidentConsequences()->esc() ?></dd> <dd>Mort</dd>
</div> </div>
<?php endif ?>
<?php if ($keywords = $page->keywords()->split()): ?>
<?php if (count($keywords) > 0): ?>
<div class="dl__group dl__group__keywords"> <div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt> <dt>Mots-clés</dt>
<dd> <dd>
<ul class="keywords"> <ul class="keywords">
<?php foreach ($keywords as $keyword): ?> <li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#"><?= esc($keyword) ?></a></li> <li><a href="#" target="_blank">Colonialité</a></li>
<?php endforeach ?> <li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul> </ul>
</dd> </dd>
</div> </div>
<?php endif ?>
<?php endif ?>
<?php if ($methodology = $page->methodology()->split()): ?>
<?php if (count($methodology) > 0): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Méthodologie</dt> <dt>Méthodologie</dt>
<dd> <dd>
<ul> <ul>
<?php foreach ($methodology as $method): ?> <li>Reconstitution 3D</li>
<li><?= esc($method) ?></li> <li>Frame-match</li>
<?php endforeach ?> <li>Analyse audiovisuelle</li>
</ul> </ul>
</dd> </dd>
</div> </div>
<?php endif ?>
<?php endif ?>
<?php if ($team = $page->team()->split()): ?>
<?php if (count($team) > 0): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Équipe</dt> <dt>Équipe</dt>
<dd><?= implode(', ', array_map('esc', $team)) ?></dd> <dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi, Basile Trouillet, Francesco Sebregondi</dd>
</div> </div>
<?php endif ?>
<?php endif ?>
<?php if ($partners = $page->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Partenaire(s)</dt> <dt>Partenaire(s)</dt>
<dd> <dd><a href="#" target="_blank">B’Tselem</a></dd>
<?php $partnerLinks = [] ?>
<?php foreach ($partners as $partner): ?>
<?php if ($partner->link()->isNotEmpty()): ?>
<?php $partnerLinks[] = '<a href="' . $partner->link() . '" target="_blank">' . $partner->name()->esc() . '</a>' ?>
<?php else: ?>
<?php $partnerLinks[] = $partner->name()->esc() ?>
<?php endif ?>
<?php endforeach ?>
<?= implode(', ', $partnerLinks) ?>
</dd>
</div> </div>
<?php endif ?>
<?php endif ?>
<?php if ($page->created()->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Date de publication</dt> <dt>Date de publication</dt>
<dd><time datetime="<?= $page->created()->toDate('yyyy-MM-dd') ?>"><?= $page->created()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd> <dd><time datetime="2025-12-09">09 dec 2025</time></dd>
</div> </div>
<?php endif ?> </dl>
</dl>
<?php if ($page->synthesis()->isNotEmpty()): ?> <div class="section__article" id="section__synthese">
<div class="section__article" id="section__synthese">
<h3 class="section__title">Synthèse</h3> <h3 class="section__title">Synthèse</h3>
<?= $page->synthesis()->kt() ?>
</div>
<?php endif ?>
<div class="section__article" id="section__impacts"> <p>Le 10 juin 2025, lors d’un raid de grande envergure dans la vieille ville de Naplouse, les forces armées israéliennes ont tué deux Palestiniens : les frères Nidal et Khaled ‘Amirah.
</p>
<p>
Suite à l’incident, l’armée israélienne a affirmé dans un communiqué que les hommes étaient des « terroristes » qui avaient essayé de s’emparer de l’arme d’un soldat et en avaient blessé quatre autres. Les soldats auraient alors riposté en tirant sur les deux hommes, les tuant tous les deux.
</p>
<p>
Cependant, l’analyse vidéo et les témoignages recueillis contredisent cette version des faits. Une enquête menée conjointement par B’Tselem et Index révèle que les frères ‘Amirah n’ont à aucun moment posé de danger pour les soldats impliqués. Pourtant, Khaled a été exécuté à bout portant alors qu’il était maintenu au sol par plusieurs soldats armés, tandis que son frère Nidal a été abattu par un tir dans le dos. Les soldats ont également empêché les secouristes présents de leur prêter assistance.
</p>
<h4>Un sous-titre ici pour tester</h4>
<p>
Les corps de Nidal et de Khaled ‘Amirah sont toujours détenus par les forces armées israéliennes.
</p>
<p>
À Naplouse comme à Jénine – où des soldats ont été filmés le mois dernier en train d’exécuter deux Palestiniens qui s’étaient rendus – ces images révèlent une politique de “tir à vue”, qui permet à l’armée israélienne de faire un usage sans aucun frein de la force létale contre les Palestiniens. Depuis octobre 2023, Israël a tué plus de 1 000 Palestiniens en Cisjordanie occupée.
</p>
</div>
<div class="section__article" id="section__impacts">
<h3 class="section__title">Impacts</h3> <h3 class="section__title">Impacts</h3>
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées --> <div class="card--impact" data-impact-type="media">
<div class="card--impact-small" data-impact-type="media">
<p class="tag">Médiatique</p> <p class="tag">Médiatique</p>
<div class="content"> <div class="content">
<p>12 articles et reprises</p> <p>12 articles et reprises</p>
@ -244,161 +187,99 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
</details> </details>
</div> </div>
<div class="card--impact-small has-link" data-impact-type="judiciaire"> <div class="card--impact" data-impact-type="judiciaire">
<p class="tag">Judiciaire</p> <p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p> <p class="date">12 Dec 2025</p>
<div class="content"> <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 >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”.
</p> </p>
</div> </div>
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</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>
<div class="card--impact-small has-link" data-impact-type="judiciaire"> <div class="card--impact" data-impact-type="judiciaire">
<p class="tag">Judiciaire</p> <p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p> <p class="date">12 Dec 2025</p>
<div class="content"> <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 >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”
</p> </p>
</div> </div>
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</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>
<div class="card--impact-small" data-impact-type="public"> <div class="card--impact" data-impact-type="public">
<p class="tag">Judiciaire</p> <p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p> <p class="date">12 Dec 2025</p>
<div class="content"> <div class="content">
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.</a> <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> </p>
</div> </div>
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div> </div>
</div>
<?php
// Récupérer les enquêtes en lien
$relatedInvestigations = $page->relatedInvestigations()->toPages();
if ($relatedInvestigations->isEmpty()) {
// Si pas d'enquêtes liées définies, prendre les 3 dernières enquêtes (sauf la page actuelle)
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation-summary')->not($page)->listed()->limit(3);
}
?>
<?php
// KIRBY TO DO : récupérer s’il y a un dossier mr
?>
<?php
// Récupérer le dossier associé à cette investigation
$folderSlug = $page->folder()->value();
$folder = null;
if (!empty($folderSlug) && site()->find('dossiers')) {
$folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first();
}
if ($folder):
?>
<aside class="section__article" id="section__folder">
<h3 class="section__title">Dans le dossier</h3>
<article class="card--folder">
<?php if ($cover = $folder->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php endif ?>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
return $investigation->folder()->value() === $folder->slug();
})->count();
?>
<ul>
<?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul>
</div> </div>
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>" target="_blank" aria-hidden="true"></a>
</article>
</aside>
<?php endif ?>
<aside class="section__article" id="section__en-lien">
<?php if ($relatedInvestigations->isNotEmpty()): ?>
<aside class="section__article" id="section__related-articles">
<h3 class="section__title">En lien</h3> <h3 class="section__title">En lien</h3>
<?php foreach ($relatedInvestigations as $related): ?>
<article class="card--article-small"> <article class="card--article-small">
<?php if ($cover = $related->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>"> <img src="/assets/images/Nahel-visuel1.png">
</figure> </figure>
<?php endif ?>
<div class="content"> <div class="content">
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<?php if ($related->incidentDate()->isNotEmpty()): ?> <time datetime="2024-06-27">27 Jun 2024</time>
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
<?php if ($related->chapo()->isNotEmpty()): ?>
<p class="description"><?= $related->chapo()->excerpt(200) ?></p>
<?php endif ?>
<?php endif ?>
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
<?php if (count($relatedKeywords) > 0): ?>
<ul class="keywords"> <ul class="keywords">
<?php foreach ($relatedKeywords as $keyword): ?> <li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#"><?= esc($keyword) ?></a></li> <li><a href="#" target="_blank">Colonialité</a></li>
<?php endforeach ?> <li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul> </ul>
<?php endif ?>
<?php endif ?>
</div> </div>
<button class="btn--go-to"><a href="<?= $related->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button> <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
<a class="link-block" href="<?= $related->url() ?>" target="_blank" aria-hidden="true"></a>
</article> </article>
<?php endforeach ?>
</aside> <article class="card--article-small">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">La mort par noyade de Jumaa al-Hasan</a></h4>
<time datetime="2024-06-27">27 Jun 2024</time>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article-small">
<figure>
<img src="/assets/images/kanaky-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</a></h4>
<time datetime="2024-06-27">27 Jun 2024</time>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
</aside>
</div>
<?php endif ?>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

281
site/templates/investigation.php Normal file
View file

@ -0,0 +1,281 @@
<?php snippet('header') ?>
<aside id="rapport__aside">
<input type="radio" id="tab-print" name="tabs-aside" value="toc" checked />
<input type="radio" id="tab-toc" name="tabs-aside" value="toc" checked />
<div class="tabs">
<label class="tab" for="tab-print"><span class="icon"><?= svg('assets/icons/printer.svg') ?></span></label>
<label class="tab" for="tab-toc">Table des matières</label>
</div>
<div class="content-aside">
<nav id="toc">
<ul>
<li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</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="#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-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="#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="#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-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="#declaration">Déclaration sur l'honneur</a></li>
<li class="toc-level-1"><a href="#contact">Contact</a></li>
</ul>
</nav>
<div id="print-features">
<p>Paramétrage impression</p>
</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>
<article id="rapport">
<header class="rapport__header">
<div class="rapport__title-group">
<p class="tag-inline">Rapport</p>
<h1 class="title">Rapport de contre-expertise</h1>
<h2 class="subtitle">sur les circonstances de la mort d’Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
</div>
<figure class="rapport__figure"><img src="/assets/images/image-rapport.png"></figure>
<dl class="rapport__dl">
<div class="dl__group">
<dt>Auteurs du rapport</dt>
<dd>INDEX Investigation</dd>
</div>
<div class="dl__group">
<dt>Date du rapport</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
</dl>
<div class="thumbnail--group">
<div class="thumbnail thumbnail-pdf">
<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>
<div class="rapport__content">
<div class="section-content" id="auteurs">
<h3 class="section-title">Les auteurs de ce rapport</h3>
<p>
INDEX est une ONG d’investigation et d’expertise indépendante,
à but non lucratif, déclarée en tant qu’association Loi 1901
(RNA W751258265), depuis 2020.
</p>
<p>
Spécialisée dans l’investigation en sources ouvertes, l’analyse de
données média et la reconstitution numérique en 3D, l’ONG INDEX est
issue du laboratoire de recherche international Forensic Architecture,
basé à l’université Goldsmiths de Londres. Elle est membre du réseau
international Investigative Commons.
</p>
<p>
Les collaborateurs de l’ONG INDEX ayant contribué à la production
du présent rapport sont : </p>
<ul>
<li>Analyse et modélisation numérique : Nadav Joffe, Guillaume Seyller</li>
<li>Conception graphique : Léonie Montjarret</li>
<li>Direction : Francesco Sebregondi</li>
</ul>
</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" 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>
<?php snippet('footer') ?>

306
site/templates/investigations.php
View file

@ -1,104 +1,268 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
<header class="page__header">
<h2 class="page__title"><?= $page->title() ?></h2>
<div class="description-medium">
<p>
<?= $page->chapo() ?>
</p>
</div>
</header>
<div class="page__sort"> <h2 class="page__title">Enquêtes</h2>
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
<div class="dropdown"> <div class="page__description">
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button> <p>
<div class="dropdown__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam, ad officiis vitae, architecto incidunt cum optio beatae ab sequi sapiente vero eum molestias odio perspiciatis quisquam accusantium earum repudiandae.
<ul> </p>
<li><button type="button" data-filter="france">France</button></li>
<li><button type="button" data-filter="cisjordanie">Cisjordanie</button></li>
<li><button type="button" data-filter="etats-unis">États-Unis</button></li>
<li><button type="button" data-filter="gaza">Gaza</button></li>
</ul>
</div>
</div>
</div> </div>
<section class="container-cards container-cards__investigations"> <?php snippet('search-form') ?>
<div class="page__sort">
<button class="sort btn--small btn--light no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieu</p></button>
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
</div>
<section id="container-cards">
<?php foreach ($page->children()->listed() as $investigation): ?>
<article class="card--article"> <article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>"> <img src="/assets/images/Jumaa-visuel-1.png">
</figure> </figure>
<?php endif ?>
<div class="content"> <div class="content">
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<?php if ($investigation->chapo()->isNotEmpty()): ?> <p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
<dl class="dl"> <dl class="dl">
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Date de l'incident</dt> <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> <dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div> </div>
<?php endif ?>
<?php if ($partners = $investigation->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group"> <div class="dl__group">
<dt>Partenaire(s)</dt> <dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd> <dd>
<?php $partnerNames = [] ?> <ul class="keywords">
<?php foreach ($partners as $partner): ?> <li><a href="#" target="_blank">Occupation</a></li>
<?php $partnerNames[] = $partner->name()->value() ?> <li><a href="#" target="_blank">Colonialité</a></li>
<?php endforeach ?> <li><a href="#" target="_blank">Forces armées</a></li>
<?= implode(', ', $partnerNames) ?> <li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd> </dd>
</div> </div>
<?php endif ?> </dl>
<?php endif ?>
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div> </div>
<?php endif ?> <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group">
<dt>Lieu de l’incident</dt>
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl> </dl>
</div> </div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
<?php if ($keywords = $investigation->keywords()->split()): ?> </article>
<div class="keywords-wrapper">
<ul class="keywords">
<?php foreach ($keywords as $keyword): ?> <article class="card--article">
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li> <figure>
<?php endforeach ?> <img src="/assets/images/Jumaa-visuel-1.png">
</ul> </figure>
</div>
<?php endif ?> <div class="content">
<?php if ($investigation->pinned()->toBool()): ?> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<?php endif ?> <p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<a class="link-block" href="<?= $investigation->url() ?>"></a> <dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Lieu de l’incident</dt>
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group">
<dt>Lieu de l’incident</dt>
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article> </article>
<?php endforeach ?>
</section> </section>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

503
site/templates/report.php
View file

@ -1,503 +0,0 @@
<?php snippet('header') ?>
<div class="btn--group__mobile">
<button id="toggle-panel__mobile" class="btn--bold-inline no-link btn--toc">
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
<span class="text">Table des matières</span>
</button>
<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>
<button id="toggle-panel" class="btn--bold-inline no-link btn--toc">
<?= svg('assets/icons/toc.svg') ?>
</button>
<aside class="panel-left" id="report__aside">
<div class="panel__header">
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
<span class="text">Table des matières</span>
<span class="icon close"><?= svg('assets/icons/close.svg') ?></span>
</div>
<div class="panel__content">
<nav id="toc">
<ul>
<li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</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="#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-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="#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="#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-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="#declaration">Déclaration sur l'honneur</a></li>
<li class="toc-level-1"><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="btn--group">
<button id="download-pdf" class="btn--bold">
<a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
<span class="text">Télécharger le&nbsp;PDF</span>
</a>
</button>
<div class="dropdown dropdown--position-panel">
<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>
<input type="checkbox" id="share-banner__aside">
<?php snippet('modal-share') ?>
</aside>
<article id="report">
<header class="report__header">
<div class="report__title-group">
<p class="page__type">Rapport</p>
<h1 class="title">Rapport de contre-expertise</h1>
<h2 class="subtitle">sur les circonstances de la mort d'Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
</div>
<figure class="report__figure"><img src="/assets/images/image-rapport.png"></figure>
<dl class="report__dl">
<div class="dl__group">
<dt>Auteurs du rapport</dt>
<dd>INDEX Investigation</dd>
</div>
<div class="dl__group">
<dt>Date du rapport</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
</dl>
<div class="btn--group">
<button class="btn--bold">
<a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
<span class="text">Télécharger le&nbsp;PDF</span>
</a>
</button>
<button class="btn--bold-inline">
<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 class="dropdown">
<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>
</header>
<div class="report__content">
<div id="arrow__medias" class="arrow-report"><span>▶</span></div>
<div class="report__medias" id="report__medias">
</div>
<div class="report__txt">
<div class="section-content" id="auteurs">
<h3 class="section-title">Les auteurs de ce rapport</h3>
<p>
INDEX est une ONG d'investigation et d'expertise indépendante,
à but non lucratif, déclarée en tant qu'association Loi 1901
(RNA W751258265), depuis 2020.
</p>
<p>
Spécialisée dans l'investigation en sources ouvertes, l'analyse de
données média et la reconstitution numérique en 3D, l'ONG INDEX est
issue du laboratoire de recherche international Forensic Architecture,
basé à l'université Goldsmiths de Londres. Elle est membre du réseau
international Investigative Commons.
</p>
<p>
Les collaborateurs de l'ONG INDEX ayant contribué à la production
du présent rapport sont :
</p>
<ul>
<li>Analyse et modélisation numérique : Nadav Joffe, Guillaume Seyller</li>
<li>Conception graphique : Léonie Montjarret</li>
<li>Direction : Francesco Sebregondi</li>
</ul>
</div>
<div class="section-content" id="rappel-faits">
<h3 class="section-title">Rappel des faits</h3>
<p><em>Note : Le nom de famille des individus mentionnés dans ce rapport a
été remplacé par leur initiale, afin de préserver leur anonymat dans le
cadre de la publication en ligne du rapport.</em>
</p>
<p>
Dans la nuit du 18 au 19 août 2022, une intervention policière sur le
parking de l'hypermarché Carrefour à Vénissieux a causé la mort de
deux individus. Adam B. (20 ans) et Raihane S. (25 ans) ont été tués
par des tirs de pistolet semi-automatique alors qu'ils se trouvaient
à bord d'une Renault Mégane RS, signalée volée. Le premier, qui a
reçu une balle dans le thorax, est mort sur les lieux ; le second,
touché à la tête, est mort le 19 août à 23 heures à l'hôpital Lyon Sud.
</p>
<p>
L'enquête a déterminé que les deux individus ont été tués par des balles provenant de la même arme, appartenant au policier Geoffray D., chef de bord d'une patrouille de la Brigade Spécialisée de Terrain affectée à Vénissieux. Sur les quatre agents présents lors de l'intervention, deux ont ouvert le feu. Au total, onze balles ont atteint le véhicule où se trouvaient Adam B. et Raihane S..
</p>
<p>
Les policiers ont justifié leur usage des armes en invoquant la
légitime défense face à une situation dite de « refus d'obtempérer »
mettant leur vie en danger imminent. Selon leurs déclarations, le
policier Geoffray D. aurait été heurté par le véhicule en fuite. Il aurait
tiré alors qu'il se trouvait embarqué sur le capot. Lors de son
audition, il a affirmé qu'il n'avait « pas d'autre choix » que d'ouvrir le
feu sur le pare-brise du véhicule.
</p>
</div>
<div class="section-content" id="modelisation">
<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>
<div class="section-content" id="sources-employees">
<h3 class="section-title">Sources employées</h3>
<ul>
<li>
INDEX a obtenu accès au dossier judiciaire de l’affaire concernant la mort d’Adam B. et Raihane S., y compris aux auditions des policiers mis en cause, aux rapports d’autopsie, aux rapports d’expertise, aux photographies de constatation et aux enregistrements radio du soir de l’incident. L’ensemble de ces pièces ont été exploitées à des fins d’analyse et de reconstitution de l’incident.
</li>
<li>
Un modèle numérique en 3D du parking où les faits se sont produits a été réalisé en employant plusieurs sources de données publiques en ligne (Géoportail, Open Street Map, Google Earth).
</li>
</ul>
</div>
<div class="section-content" id="objectifs-rapport">
<h3 class="section-title">Objectifs du rapport</h3>
<p>
En partant de l’examen de l’ensemble des pièces produites à ce jour
dans le cadre de la procédure judiciaire sur les circonstances de la
mort d’Adam B. et de Raihane S., les objectifs du présent rapport de
contre-expertise sont les suivants :
</p>
<ul>
<li>
Produire, dans la mesure du possible, une reconstitution dynamique de l’incident dans un modèle numérique en 3D des lieux ;
</li>
<li>
Employer ce modèle de reconstitution pour procéder à une vérification rigoureuse du scénario des faits livré par les policiers ayant participé à l’intervention, ainsi que des conclusions avancées par l’expert balistique désigné dans son rapport ;
</li>
<li>
À l’issue de cette analyse, faire toute observation utile à la manifestation de la vérité et à l’exercice de la justice.
</li>
</ul>
</div>
<div class="section-content">
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
<div class="media">
<div class="container slider-before-after">
<div class="image-container">
<img class="image-before slider-image" src="/assets/images/adam-raihane/fig-1-a.png" alt="color photo"/>
<img class="image-after slider-image" src="/assets/images/adam-raihane/fig-1-b.png" />
</div>
<!-- step="10" -->
<input
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="slider"
/>
<div class="slider-line" aria-hidden="true"></div>
<div class="slider-button" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
</svg>
</div>
</div>
<p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
</div>
<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="media container-figure fig-simple">
<figure><img src="/assets/images/adam-raihane/fig-2.png"></figure>
<p class="caption">Fig. 2 : Plan de localisation des éléments constatés sur les lieux de l’incident dans la nuit des faits.</p>
</div>
<p>
Sur ce modèle 3D, nous avons reproduit les positions des différents
éléments constatés par les services de police sur les lieux de l’incident,
conformément aux photos de constatation et aux relevés techniques
effectués sur les lieux. Deux zones principales sont à distinguer :
</p>
<ul>
<li>
Au sud, la zone où le véhicule Renault Mégane RS ciblé par les tirs
policiers a fini sa course. Nous la désignons comme « zone 2 ».
</li>
<li>
Au nord, la zone où le véhicule Renault Mégane RS était initialement
stationné au début de l’intervention de police. Nous la désignons
comme « zone 1 ».
</li>
</ul>
<p>
<em>
Note : La position initiale précise du véhicule Renault Mégane sur
le parking n’a pas été établie par les constatations sur le lieux de
l’incident– le fourgon de police ayant été déplacé de sa position en
début d’intervention.
</em>
</p>
<p>
Ces deux zones sont distantes d’environ 50 mètres. Les tirs sur le
véhicule Renault Mégane ont donc eu lieu entre ces deux zones. Ceci
est attesté par la présence, entre la zone 1 et 2, des éléments suivants :
</p>
<ul>
<li>
Huits étuis percutés au sol, correspondant à des balles de calibre
9mm. Cinq de ces étuis correspondent à l’arme du policier Geoffray D.,
les trois autres correspondent à celle du policier Pierre-Alexandre D.
</li>
<li>
Un Dispositif d'Interception des Véhicules Automobiles (DIVA, aussi
connu sous le nom de « stop-stick »), responsable du dégonflage du
pneu avant droit du véhicule Renault Mégane.
</li>
<li>
Des bris de verre, correspondant à l’éclatement d’une vitre du
véhicule, vraisemblablement causé par un tir de pistolet.
Les positions de l’ensemble des éléments mentionnés ont été reportées
sur le modèle 3D (Fig. 2) afin de constituer le cadre de l’analyse produite
dans le présent rapport.
</li>
</ul>
</div>
<div class="section-content">
<h3 class="section-title">2. SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
<div class="media container-figure fig-simple">
<figure><img src="/assets/images/adam-raihane/fig-3.png"></figure>
<p class="caption">Fig. 3 : Schéma de la dynamique générale de l’incident.</p>
</div>
<p>
D’après les déclarations du policier Geoffray D., à l’arrivée du fourgon de police à sa hauteur, le conducteur de la Mégane aurait effectué une brève marche arrière, avant d’enclencher la marche avant.
</p>
<p>
C’est à ce moment que le policier aurait été percuté par le véhicule et aurait ouvert le feu, provoquant la mort d’Adam B. et de Raihane S..
</p>
<p>
De maniere concomitante, un deuxième policier, Pierre-Alexandre D., aurait effectué trois tirs sur le véhicule en fuite, depuis son côté arrière droit.
</p>
<p>Les constatations matérielles sur site, croisées avec les déclarations des policiers, permettent de circonscrire une zone approximative dans laquelle les tirs sur le véhicule ont été effecutés.
</p>
<p>Une fois l’action de tir terminée, le véhicule aurait continué à rouler à faible allure jusqu’à percuter un autre véhicule stationné sur le parking. Sa position finale est établie par des photos de constatations et un relevé technique des lieux.
</p>
<p>Nous avons intégré cette dynamique au modèle de reconstitution 3D (Fig. 3).
</p>
</div>
<div class="section-content">
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
<div class="media">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-4.png"></figure>
<p class="caption">Fig. 4 : Vue frontale du véhicule et localisation des impacts de tirs sur le pare-brise (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-5.png"></figure>
<p class="caption">Fig. 5 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc gauche (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-6.png"></figure>
<p class="caption">Fig. 6 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc droit (Reconstitution 3D / Photo originale).</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide__inner">
<figure><img src="/assets/images/adam-raihane/fig-7.png"></figure>
<p class="caption">Fig. 7 : Vue d’ensemble du modèle 3D du véhicule avec tous les impacts de tirs localisés.</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div> <!-- swiper -->
</div>
<p>
Pour reconstituer les positions des impacts de tirs sur le véhicule, nous nous sommes appuyés sur les photos de constatations réalisées sur le véhicule après son déplacement des lieux de l’incident vers la fourrière.
</p>
<p>
Leur localisation précise sur un modèle 3D détaillé d’un véhicule Renault Mégane RS – correspondant à celui qu’occupaient les deux victimes – s'appuie sur une technique appelée « frame-match » (ou « correspondance de photogramme »)1.
</p>
<p>
Nous présentons ci-après les résultats de l’emploi de cette technique qui nous permet d’obtenir une modélisation détaillée des impacts de tirs sur le véhicule (Fig. 4, 5, 6, 7).
</p>
</div>
<div class="section-content">
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
<p>
À partir des éléments décrits précédemment, nous avons procédé à une reconstitution dynamique de l’incident en intégrant l’ensemble des données matérielles disponibles.
</p>
<p>
Afin d’étudier la temporalité de l’action, nous avons procédé à une synchronisation des messages radios diffusés par les policiers en intervention dans les instants qui précèdent et qui suivent les tirs (Fig. 8).
</p>
<p>
À 23h59m58s se termine le message d’un des policiers de la patrouille BST 140A en intervention, qui annonce, sur un ton calme, qu’ils sont « retournés au contact du véhicule ».
</p>
<p>
À 00h00m26s, l’un des policiers de la patrouille annonce, sur un ton agité : « Véhicule tiré, collègue à terre ! ».
</p>
<p>
Il en résulte qu’il s’écoule moins de 30 secondes entre l’instant où les policiers initient le contrôle du véhicule Renault Mégane et l’instant où au moins un policier ouvre le feu.
</p>
<p>
Pour produire une reconstitution dynamique de l’action qui s’est déroulée au cours de ces 30 secondes, nous l’avons décomposée en plusieurs intervalles.
</p>
</div> <!-- div content txt-->
</div>
</article>
</main>
<?php snippet('footer') ?>

2
site/templates/resources.php
View file

@ -1,4 +1,2 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>