Merge pull request 'merge-investigation' (#8) from merge-investigation into main
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Reviewed-on: #8
This commit is contained in:
commit
ecedeaa484
26 changed files with 939 additions and 2703 deletions
|
|
@ -6,12 +6,17 @@
|
|||
--fs-xsmall: 12px;
|
||||
--fs-small: 16px;
|
||||
--fs-normal: 20px;
|
||||
--fs-medium: 30px;
|
||||
--fs-text: 24px;
|
||||
--fs-medium: 34px;
|
||||
--fs-big: 45px;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--fs-button-bold: 22px;
|
||||
|
||||
--max-w-content: 640px;
|
||||
--max-w-content: 700px;
|
||||
--max-w-cards: 940px;
|
||||
--z-header: 2000;
|
||||
--panel-w: 310px;
|
||||
|
|
@ -82,6 +87,7 @@
|
|||
--fs-xsmall: 13px;
|
||||
--fs-small: 16px;
|
||||
--fs-normal: 20px;
|
||||
--fs-text: 20px;
|
||||
--fs-medium: 24px;
|
||||
--fs-big: 34px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
.card--package,
|
||||
.card--article-small {
|
||||
|
||||
@include grid-content();
|
||||
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
border: var(--border-light);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
// &.has-link {
|
||||
// @include hover-card-line();
|
||||
// }
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
|
|
@ -23,38 +22,79 @@
|
|||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
align-items: center;
|
||||
padding: 5px 1ch 0 1ch;
|
||||
|
||||
|
||||
font-size: var(--fs-xsmall);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-top: calc(var(--padding-inner)*2);
|
||||
padding-bottom: calc(var(--padding-inner)*2);
|
||||
padding-left: calc(var(--padding-inner)*1.5);
|
||||
padding-right: calc(var(--padding-inner)*3);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-normal);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
line-height: var(--leading-title);
|
||||
|
||||
flex-grow: 2;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
time {
|
||||
flex-grow: 1;
|
||||
.date,
|
||||
.details {
|
||||
// flex-grow: 2;
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
.details {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li:not(:last-of-type)::after {
|
||||
content: "|";
|
||||
padding-left: 1ch;
|
||||
padding-right: 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.description {
|
||||
font-size: var(--fs-small);
|
||||
@include clamp(2);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
// margin-bottom: calc(var(--spacing)*0.75);
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,19 +42,16 @@
|
|||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
// flex-grow: 2;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
|
|
@ -82,17 +79,7 @@
|
|||
}
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
.card--impact-small {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -5,7 +6,6 @@
|
|||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
|
||||
|
|
@ -20,8 +20,16 @@
|
|||
bottom: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
grid-column: 2;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-right: 4ch;
|
||||
}
|
||||
|
||||
.date{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
|
|
@ -44,7 +52,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
.category {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,145 +1,94 @@
|
|||
.card--package {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
// .card--package {
|
||||
// position: relative;
|
||||
// max-width: var(--max-w-cards);
|
||||
// border: var(--border-light);
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: cardpackage;
|
||||
// @include grid-content();
|
||||
// @include figure-16-9();
|
||||
|
||||
figure {
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--color-accent);
|
||||
// container-type: inline-size;
|
||||
// container-name: cardpackage;
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
// figure {
|
||||
// border-radius: var(--radius-small);
|
||||
// background-color: var(--color-accent);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
// img {
|
||||
// opacity: 0.8;
|
||||
// filter: grayscale(1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: var(--leading-title);
|
||||
// .content {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// font-size: var(--fs-small);
|
||||
// }
|
||||
|
||||
margin-bottom: 0.75em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
// .title {
|
||||
// font-weight: 500;
|
||||
// font-size: var(--fs-normal);
|
||||
// line-height: var(--leading-title);
|
||||
|
||||
@media #{$small} {
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
// margin-bottom: 0.75em;
|
||||
// text-wrap: balance;
|
||||
// max-width: 42ch;
|
||||
// text-transform: uppercase;
|
||||
// padding-top: calc(var(--spacing) * 0.25);
|
||||
// a {
|
||||
// text-decoration: none;
|
||||
// }
|
||||
|
||||
.icon {
|
||||
padding-right: 1ch;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media #{$small} {
|
||||
// font-size: var(--fs-normal);
|
||||
// }
|
||||
|
||||
.short {
|
||||
@include clamp(3);
|
||||
flex-grow: 1;
|
||||
padding-right: calc(var(--padding-inner) * 2);
|
||||
}
|
||||
// .icon {
|
||||
// padding-right: 1ch;
|
||||
// position: relative;
|
||||
// top: 1px;
|
||||
// svg {
|
||||
// height: 15px;
|
||||
// width: 15px;
|
||||
// fill: var(--color-txt);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
// .short {
|
||||
// @include clamp(3);
|
||||
// flex-grow: 1;
|
||||
// padding-right: calc(var(--padding-inner) * 2);
|
||||
// }
|
||||
|
||||
li + li {
|
||||
&::before {
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
@media #{$small} {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
// ul {
|
||||
// display: flex;
|
||||
// list-style: none;
|
||||
// gap: 1ch;
|
||||
// color: var(--color-txt-light);
|
||||
// padding-top: calc(var(--spacing) * 0.5);
|
||||
|
||||
.btn--go-to {
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner) * 1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
// li + li {
|
||||
// &::before {
|
||||
// content: "|";
|
||||
// padding-right: 1ch;
|
||||
// }
|
||||
// }
|
||||
// @media #{$small} {
|
||||
// font-size: var(--fs-small);
|
||||
// }
|
||||
// }
|
||||
|
||||
@include btn--go-to();
|
||||
// .btn--go-to {
|
||||
// position: absolute;
|
||||
// right: calc(var(--padding-inner) * 1);
|
||||
// bottom: var(--padding-inner);
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
// @include btn--go-to();
|
||||
|
||||
[data-template="investigation-summary"] .card--package {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
.card--package {
|
||||
.content {
|
||||
display: contents;
|
||||
}
|
||||
figure {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.short {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
ul {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// background-color: var(--grey-950);
|
||||
// border-color: var(--color-txt);
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
height: calc(var(--h-block)*1);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-xsmall);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.tag{
|
||||
.category{
|
||||
height: calc(var(--h-block)*0.75);
|
||||
// border-radius: calc(var(--h-block)*0.75/2);
|
||||
border-radius: var(--radius-small);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.page__type{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
height: calc(var(--h-block)*1);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
|
|
@ -8,9 +8,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
padding-top: 5px;
|
||||
|
||||
font-size: var(--fs-xsmall);
|
||||
font-size: var(--fs-small);
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
|
@ -41,19 +41,19 @@ main .page__header {
|
|||
font-weight: 500;
|
||||
line-height: var(--leading-title);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
text-wrap: balance;
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
// max-width: 58ch;
|
||||
// line-height: 1.1;
|
||||
font-size: var(--fs-text);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
||||
.description-medium{
|
||||
// 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;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -26,7 +26,7 @@
|
|||
@import "components/card-article-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-impact-small";
|
||||
@import "components/card-package";
|
||||
// @import "components/card-package";
|
||||
@import "components/card-open-graph";
|
||||
@import "components/swiper";
|
||||
@import "components/slider-before-after";
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
@import "partials/container-cards";
|
||||
|
||||
@import "template/home";
|
||||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
@import "template/investigation";
|
||||
@import "template/investigation_content";
|
||||
@import "template/package";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
|
|
@ -1,175 +0,0 @@
|
|||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
|
||||
.page__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.panel-left {
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1220px) {
|
||||
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);
|
||||
}
|
||||
|
||||
.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__package,
|
||||
#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();
|
||||
column-gap: 1ch;
|
||||
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: 500;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-left {
|
||||
//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;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--group {
|
||||
width: calc(var(--panel-w) * 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
|
||||
button,
|
||||
.dropdown {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
width: 100%;
|
||||
|
||||
header {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
.panel-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
131
assets/css/template/_investigation.scss
Normal file
131
assets/css/template/_investigation.scss
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
[data-template="investigation"] main {
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
|
||||
.page__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.page__content{
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.investigation__content{
|
||||
font-size: var(--fs-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @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);
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (max-width: 1220px) {
|
||||
// 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 {
|
||||
// background-color: red;
|
||||
// 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);
|
||||
// }
|
||||
|
||||
// .section__title {
|
||||
// font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
// margin-bottom: calc(var(--spacing) * 1);
|
||||
// padding-right: 2ch;
|
||||
// text-wrap: balance;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
#investigation__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
font-size: var(--fs-normal);
|
||||
|
||||
.dl__group {
|
||||
@include grid-content();
|
||||
column-gap: 1ch;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.investigation__aside{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing)*4) auto;
|
||||
|
||||
.aside__title{
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*1)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
// @media #{$small} {
|
||||
// [data-template="investigation"] main {
|
||||
// width: 100%;
|
||||
|
||||
// header {
|
||||
// margin-bottom: calc(var(--spacing) * 1);
|
||||
// }
|
||||
|
||||
// .section__article {
|
||||
// margin-top: calc(var(--spacing) * 2);
|
||||
// margin-bottom: calc(var(--spacing) * 2);
|
||||
// }
|
||||
|
||||
// .panel-left {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
153
assets/css/template/_investigation_content.scss
Normal file
153
assets/css/template/_investigation_content.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
|
||||
.investigation__content {
|
||||
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
|
||||
.section-content {
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
padding-left: calc(var(--padding-body)*1.5);
|
||||
padding-right: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*6);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
.section-txt{
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.subsection-w-media{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
position: relative;
|
||||
|
||||
|
||||
.media{
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.subsection-txt {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
padding-bottom: calc(var(--spacing)*6);
|
||||
}
|
||||
|
||||
.subsection-w-hscroll{
|
||||
position: relative;
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
|
||||
.horizontal-scroll{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-scroll-wrapper{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.horizontal-scroll-slide{
|
||||
flex-shrink: 0;
|
||||
width: 90vw;
|
||||
max-width: 700px;
|
||||
padding: 0 calc(var(--spacing) * 1);
|
||||
|
||||
figure, img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-scroll-pagination{
|
||||
position: fixed;
|
||||
bottom: calc(var(--spacing) * 2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.75) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 3ch;
|
||||
|
||||
li{
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.investigation__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);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.swiper{
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,518 +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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
[data-template="report"] {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#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 {
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 3.25);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
|
||||
|
||||
display: grid;
|
||||
column-gap: var(--padding-inner);
|
||||
|
||||
grid-template-columns: 65% 35%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
|
||||
|
||||
padding: var(--padding-body);
|
||||
|
||||
border: 1px solid var(--color-txt);
|
||||
border-radius: var(--radius-small);
|
||||
|
||||
.report__title-group {
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: 500;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--fs-medium);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: 500;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.report__btns{
|
||||
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CONTENT -------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
.report__content {
|
||||
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
|
||||
.section-content {
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
padding-left: calc(var(--padding-body)*1.5);
|
||||
padding-right: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*6);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: var(--max-w-content);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.section-txt{
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.subsection-w-media{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
position: relative;
|
||||
|
||||
|
||||
.media{
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.subsection-txt {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
padding-bottom: calc(var(--spacing)*6);
|
||||
}
|
||||
|
||||
.subsection-w-hscroll{
|
||||
position: relative;
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
|
||||
.horizontal-scroll{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-scroll-wrapper{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.horizontal-scroll-slide{
|
||||
flex-shrink: 0;
|
||||
width: 90vw;
|
||||
max-width: 700px;
|
||||
padding: 0 calc(var(--spacing) * 1);
|
||||
|
||||
figure, img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-scroll-pagination{
|
||||
position: fixed;
|
||||
bottom: calc(var(--spacing) * 2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.75) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 3ch;
|
||||
|
||||
li{
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -17,13 +17,13 @@
|
|||
font-family: "Executive";
|
||||
src: url("Executive-65Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-66MediumIt.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
|
|||
11
assets/js/investigation.js
Normal file
11
assets/js/investigation.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export 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) => {
|
||||
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,135 +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();
|
||||
|
||||
initHorizontalScroll();
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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 initHorizontalScroll(){
|
||||
const sections = document.querySelectorAll('.subsection-w-hscroll');
|
||||
|
||||
sections.forEach(function (section) {
|
||||
const container = section.querySelector('.horizontal-scroll');
|
||||
if (!container) return;
|
||||
|
||||
const wrapper = container.querySelector('.horizontal-scroll-wrapper');
|
||||
if (!wrapper) return;
|
||||
|
||||
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
|
||||
|
||||
// Calculer la distance totale à scroller horizontalement
|
||||
function calculateScrollDistance() {
|
||||
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
|
||||
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
|
||||
return totalSlidesWidth - window.innerWidth + endMargin;
|
||||
}
|
||||
|
||||
let scrollDistance = calculateScrollDistance();
|
||||
|
||||
// Créer un spacer invisible qui crée l'espace de scroll
|
||||
// Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
|
||||
const spacer = document.createElement('div');
|
||||
spacer.className = 'horizontal-scroll-spacer';
|
||||
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
|
||||
spacer.style.width = '100%';
|
||||
spacer.style.pointerEvents = 'none';
|
||||
|
||||
// Insérer le spacer AVANT .horizontal-scroll
|
||||
section.insertBefore(spacer, container);
|
||||
|
||||
// Calculer la position absolue du spacer une seule fois
|
||||
function getSpacerTopPosition() {
|
||||
let element = spacer;
|
||||
let top = 0;
|
||||
while (element) {
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
return top;
|
||||
}
|
||||
|
||||
let spacerTopPosition = getSpacerTopPosition();
|
||||
|
||||
// Fonction de mise à jour du scroll horizontal
|
||||
function updateHorizontalScroll() {
|
||||
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// Début et fin du scroll basé sur le spacer
|
||||
const scrollStart = spacerTopPosition;
|
||||
const scrollEnd = spacerTopPosition + scrollDistance;
|
||||
|
||||
console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
|
||||
|
||||
if (scrollY >= scrollStart && scrollY <= scrollEnd) {
|
||||
// Phase de scroll horizontal : fixer le container
|
||||
const progress = (scrollY - scrollStart) / scrollDistance;
|
||||
const translateX = progress * scrollDistance;
|
||||
|
||||
console.log('Horizontal scroll active - progress:', progress);
|
||||
|
||||
wrapper.style.transform = `translateX(-${translateX}px)`;
|
||||
container.style.position = 'fixed';
|
||||
container.style.top = '0';
|
||||
container.style.left = '0';
|
||||
} else if (scrollY < scrollStart) {
|
||||
// Avant le spacer : reset
|
||||
console.log('Before spacer');
|
||||
wrapper.style.transform = 'translateX(0)';
|
||||
container.style.position = '';
|
||||
container.style.top = '';
|
||||
container.style.left = '';
|
||||
} else {
|
||||
// Après le spacer : garder le translate final et défixer
|
||||
console.log('After spacer');
|
||||
wrapper.style.transform = `translateX(-${scrollDistance}px)`;
|
||||
container.style.position = '';
|
||||
container.style.top = '';
|
||||
container.style.left = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Écouter le scroll
|
||||
window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
|
||||
|
||||
// Recalculer au resize
|
||||
window.addEventListener('resize', function() {
|
||||
scrollDistance = calculateScrollDistance();
|
||||
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
|
||||
spacerTopPosition = getSpacerTopPosition();
|
||||
updateHorizontalScroll();
|
||||
});
|
||||
|
||||
// Initial call
|
||||
updateHorizontalScroll();
|
||||
});
|
||||
}
|
||||
|
|
@ -8,8 +8,7 @@ import { initHeroSlider } from './hero-slider.js';
|
|||
import { playVideo } from './hero-video.js';
|
||||
import { initDropdowns } from './dropdown.js';
|
||||
import { initSwipers } from './swipers.js';
|
||||
import { report } from './report.js';
|
||||
|
||||
import { initSliderBeforeAfter } from './investigation.js';
|
||||
|
||||
const responsiveMedium = 1080;
|
||||
const responsiveSmall = 768;
|
||||
|
|
@ -21,8 +20,6 @@ window.onload = async function () {
|
|||
themeToggle();
|
||||
|
||||
|
||||
report(responsiveSmall);
|
||||
|
||||
tocMobile(responsiveSmall);
|
||||
copyLink();
|
||||
btnGroupMobile(responsiveSmall)
|
||||
|
|
@ -32,6 +29,7 @@ window.onload = async function () {
|
|||
initDropdowns(responsiveSmall);
|
||||
initSwipers();
|
||||
|
||||
initSliderBeforeAfter();
|
||||
|
||||
var elem = document.querySelector('.grid-masonry');
|
||||
var msnry = null;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ tabs:
|
|||
contentTab:
|
||||
linkedInvestigations:
|
||||
type: pages
|
||||
template: investigation-summary
|
||||
template: investigation
|
||||
linkedMedias:
|
||||
type: url
|
||||
seo: seo/page
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
title: Investigation Summary
|
||||
title: Investigation
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
|
|
@ -25,10 +25,6 @@ tabs:
|
|||
ratio: 12/7
|
||||
cover: true
|
||||
help: Image utilisée dans les listes d'enquêtes
|
||||
reportSection:
|
||||
label: Rapport
|
||||
type: pages
|
||||
template: report
|
||||
- width: 4/6
|
||||
fields:
|
||||
chapo:
|
||||
|
|
@ -67,23 +63,20 @@ tabs:
|
|||
width: 1/3
|
||||
when:
|
||||
heroType: video
|
||||
synthesis:
|
||||
label: Synthèse
|
||||
type: writer
|
||||
size: large
|
||||
headings:
|
||||
- 4
|
||||
nodes:
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
layouts:
|
||||
- "1/1"
|
||||
- "1/2, 1/2"
|
||||
fieldsets:
|
||||
- heading
|
||||
- bulletlist
|
||||
- orderedlist
|
||||
marks:
|
||||
- bold
|
||||
- italic
|
||||
- underline
|
||||
- link
|
||||
- '|'
|
||||
- clear
|
||||
- text
|
||||
- image
|
||||
- beforeafter
|
||||
- video
|
||||
# - horizontal-gallery
|
||||
- gallery
|
||||
metadataTab:
|
||||
label: Métadonnées
|
||||
icon: table
|
||||
|
|
@ -99,7 +92,8 @@ tabs:
|
|||
width: 1/4
|
||||
incidentCountry:
|
||||
label: Pays de l'incident
|
||||
type: multiselect
|
||||
type: tags
|
||||
max: 1
|
||||
options: query
|
||||
query: page('database').countries.split
|
||||
width: 1/4
|
||||
|
|
@ -109,15 +103,15 @@ tabs:
|
|||
width: 1/4
|
||||
keywords:
|
||||
label: Mots-clés
|
||||
type: multiselect
|
||||
type: tags
|
||||
options: query
|
||||
query: page('database').keywords.split
|
||||
width: 1/4
|
||||
methodologies:
|
||||
label: Méthodologies
|
||||
type: multiselect
|
||||
options: query
|
||||
query: page('database').methodologies.split
|
||||
type: multiselect
|
||||
width: 1/4
|
||||
partners:
|
||||
label: Partenaires
|
||||
|
|
@ -132,8 +126,24 @@ tabs:
|
|||
type: url
|
||||
team:
|
||||
label: Équipe Index
|
||||
type: multiselect
|
||||
options: query
|
||||
query: page('database').team.split
|
||||
width: 1/4
|
||||
type: structure
|
||||
width: 2/4
|
||||
columns:
|
||||
name:
|
||||
label: Nom
|
||||
width: 1/2
|
||||
role:
|
||||
label: Rôle
|
||||
width: 1/2
|
||||
fields:
|
||||
name:
|
||||
label: Nom
|
||||
type: select
|
||||
options: query
|
||||
query: page('database').team.split
|
||||
required: true
|
||||
role:
|
||||
label: Rôle
|
||||
type: text
|
||||
placeholder: ex. réalisation 3D, textes...
|
||||
seo: seo/page
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
title: Investigation
|
||||
create:
|
||||
fields:
|
||||
- subtitle
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
columns:
|
||||
- width: 1/4
|
||||
fields:
|
||||
created:
|
||||
label: Première publication
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
default: today
|
||||
width: 1/2
|
||||
authors:
|
||||
label: Auteur(s)
|
||||
type: text
|
||||
placeholder: INDEX Investigation
|
||||
default: INDEX Investigation
|
||||
cover:
|
||||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
min: 1
|
||||
required: true
|
||||
layout: cards
|
||||
size: full
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
- width: 3/4
|
||||
fields:
|
||||
subtitle:
|
||||
label: Sous-titre
|
||||
type: text
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
layouts:
|
||||
- "1/1"
|
||||
- "1/2, 1/2"
|
||||
fieldsets:
|
||||
- heading
|
||||
- text
|
||||
- image
|
||||
- beforeafter
|
||||
- video
|
||||
# - horizontal-gallery
|
||||
- gallery
|
||||
seo: seo/page
|
||||
|
|
@ -33,5 +33,42 @@ return [
|
|||
'campaign_url' => 'https://donorbox.org/soutenir-index-en-2024',
|
||||
'api_base_url' => 'https://donorbox.org/api/v1'
|
||||
],
|
||||
'tobimori.seo.canonicalBase' => 'https://www.index.ngo'
|
||||
'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
|
||||
|
||||
'hooks' => [
|
||||
'page.update:after' => function ($newPage) {
|
||||
if ($newPage->intendedTemplate()->name() !== 'investigation') {
|
||||
return;
|
||||
}
|
||||
|
||||
$database = page('database');
|
||||
if (!$database) {
|
||||
return;
|
||||
}
|
||||
|
||||
$fields = [
|
||||
'keywords' => 'keywords',
|
||||
'incidentCountry' => 'countries',
|
||||
];
|
||||
|
||||
$updated = false;
|
||||
$data = [];
|
||||
|
||||
foreach ($fields as $investigationField => $dbField) {
|
||||
$newValues = $newPage->content()->get($investigationField)->split();
|
||||
$existingValues = $database->content()->get($dbField)->split();
|
||||
$merged = array_unique(array_merge($existingValues, $newValues));
|
||||
|
||||
if (count($merged) > count($existingValues)) {
|
||||
$data[$dbField] = implode(', ', $merged);
|
||||
$updated = true;
|
||||
}
|
||||
}
|
||||
|
||||
if ($updated) {
|
||||
kirby()->impersonate('kirby');
|
||||
$database->update($data);
|
||||
}
|
||||
}
|
||||
]
|
||||
];
|
||||
|
|
@ -1,15 +1,7 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
|
||||
<?php
|
||||
// Récupérer le rapport (première page enfant de type report)
|
||||
$report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
||||
?>
|
||||
|
||||
<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>
|
||||
|
|
@ -28,60 +20,6 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
|
||||
|
||||
|
||||
<div class="panel-left" id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<?php if ($page->heroType()->isNotEmpty() && ($page->heroImages()->toFile() || $page->videoExtractUrl()->isNotEmpty())): ?>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<?php endif ?>
|
||||
<?php if ($page->synthesis()->isNotEmpty()): ?>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<?php endif ?>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<?php
|
||||
// Vérifier si un dossier existe pour cette investigation
|
||||
$packageSlug = $page->package()->value();
|
||||
$hasPackage = false;
|
||||
if (!empty($packageSlug) && site()->find('dossiers')) {
|
||||
$hasPackage = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first();
|
||||
}
|
||||
if ($hasPackage):
|
||||
?>
|
||||
<li><a href="#section__package">Dossier</a></li>
|
||||
<?php endif ?>
|
||||
<?php
|
||||
// Vérifier s'il y a des enquêtes en lien
|
||||
$relatedInvestigations = $page->relatedInvestigations()->toPages();
|
||||
if ($relatedInvestigations->isEmpty()) {
|
||||
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation-summary')->not($page)->listed()->limit(3);
|
||||
}
|
||||
if ($relatedInvestigations->isNotEmpty()):
|
||||
?>
|
||||
<li><a href="#section__related-articles">En lien</a></li>
|
||||
<?php endif ?>
|
||||
</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>
|
||||
|
|
@ -130,11 +68,11 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
|
||||
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<dl id="investigation__dl">
|
||||
<?php if ($page->incidentDate()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<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 class="date" datetime="<?= $page->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $page->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
|
|
@ -182,11 +120,22 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($team = $page->team()->split()): ?>
|
||||
<?php if (count($team) > 0): ?>
|
||||
<?php if ($team = $page->team()->toStructure()): ?>
|
||||
<?php if ($team->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Équipe</dt>
|
||||
<dd><?= implode(', ', array_map('esc', $team)) ?></dd>
|
||||
<dd><?php
|
||||
$members = [];
|
||||
foreach ($team as $member) {
|
||||
$name = $member->name()->esc();
|
||||
if ($member->role()->isNotEmpty()) {
|
||||
$members[] = $name . ' (' . $member->role()->esc() . ')';
|
||||
} else {
|
||||
$members[] = $name;
|
||||
}
|
||||
}
|
||||
echo implode(', ', $members);
|
||||
?></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
|
@ -213,25 +162,130 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php if ($page->created()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<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 class="date" datetime="<?= $page->created()->toDate('yyyy-MM-dd') ?>"><?= $page->created()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</dl>
|
||||
|
||||
<?php if ($page->synthesis()->isNotEmpty()): ?>
|
||||
<div class="section__article" id="section__synthese">
|
||||
<h3 class="section__title">Synthèse</h3>
|
||||
<?= $page->synthesis()->kt() ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<div class="investigation__content">
|
||||
<?php foreach ($page->body()->toLayouts() as $layout): ?>
|
||||
<?php
|
||||
$columns = $layout->columns();
|
||||
$columnCount = $columns->count();
|
||||
?>
|
||||
|
||||
<div class="section__article" id="section__impacts">
|
||||
<h3 class="section__title">Impacts</h3>
|
||||
<?php if ($columnCount === 1): ?>
|
||||
<?php
|
||||
$column = $columns->first();
|
||||
$blocks = $column->blocks();
|
||||
$hasHeading = false;
|
||||
$hasOtherContent = false;
|
||||
|
||||
// Check what types of content we have
|
||||
foreach ($blocks as $block) {
|
||||
if ($block->type() === 'heading') {
|
||||
$hasHeading = true;
|
||||
} else {
|
||||
$hasOtherContent = true;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="section-content">
|
||||
<?php foreach ($blocks as $block): ?>
|
||||
<?php if ($block->type() === 'heading'): ?>
|
||||
<<?= $block->level()->or('h3') ?> class="section-title"><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<?php elseif ($block->type() === 'text'): ?>
|
||||
<div class="section-txt">
|
||||
<?= $block->text() ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'image'): ?>
|
||||
<div class="media container-figure fig-simple">
|
||||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'beforeafter'): ?>
|
||||
<div class="media">
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'video'): ?>
|
||||
<div class="media container-video">
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'horizontal-gallery'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($columnCount === 2): ?>
|
||||
<div class="section-content">
|
||||
<div class="subsection-w-media">
|
||||
<?php
|
||||
$firstColumn = $columns->first();
|
||||
$lastColumn = $columns->last();
|
||||
?>
|
||||
|
||||
<div class="media">
|
||||
<?php foreach ($firstColumn->blocks() as $block): ?>
|
||||
<?php if ($block->type() === 'image'): ?>
|
||||
<div class="container-figure fig-simple">
|
||||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'beforeafter'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php elseif ($block->type() === 'video'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<div class="subsection-txt">
|
||||
<?php foreach ($lastColumn->blocks() as $block): ?>
|
||||
<?php if ($block->type() === 'text'): ?>
|
||||
<?= $block->text() ?>
|
||||
<?php elseif ($block->type() === 'heading'): ?>
|
||||
<<?= $block->level()->or('h3') ?>><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<div class="investigation__aside" id="aside__impacts">
|
||||
<h3 class="aside__title">Impacts</h3>
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<div class="card--impact-small" data-impact-type="media">
|
||||
|
||||
<p class="tag">Médiatique</p>
|
||||
<p class="category">Médiatique</p>
|
||||
<div class="content">
|
||||
<p>12 articles et reprises</p>
|
||||
<p>1.5M de vues cumulées</p>
|
||||
|
|
@ -243,49 +297,30 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</div>
|
||||
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="category">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="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>
|
||||
<h4 class="title">Ouverture d’une informatin judiciaire suite à la plainte d’Utopia 56</h4>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="category">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<h4 class="title">Conférence de presse aux archives citoyennes</h4>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="category">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="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>
|
||||
<h4 class="title">La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"</h4>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact-small" data-impact-type="public">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.</a>
|
||||
</p>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
@ -294,11 +329,39 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
$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);
|
||||
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation')->not($page)->listed()->limit(3);
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<aside class="investigation__aside" id="aside__package">
|
||||
<h3 class="aside__title">Dans le dossier</h3>
|
||||
|
||||
<article class="card--package">
|
||||
<figure>
|
||||
<img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1770640671/nahel-visuel1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
<p class="type">Dossier</p>
|
||||
<h4 class="title"><a href="http://localhost:8000/enquetes/l-homicide-de-nahel-merzouk">Violences policières en France</a></h4>
|
||||
<ul class="details">
|
||||
<li>5 enquêtes</li>
|
||||
<li>18 impacts</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<a class="link-block" href="#" target="_blank" aria-hidden="true"></a>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
|
||||
</article>
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
// KIRBY TO DO : récupérer s’il y a un dossier mr
|
||||
?>
|
||||
|
|
@ -313,8 +376,8 @@ if (!empty($packageSlug) && site()->find('dossiers')) {
|
|||
|
||||
if ($package):
|
||||
?>
|
||||
<aside class="section__article" id="section__package">
|
||||
<h3 class="section__title">Dans le dossier</h3>
|
||||
<aside class="investigation__aside" id="aside__package">
|
||||
<h3 class="aside__title">Dans le dossier</h3>
|
||||
|
||||
<article class="card--package">
|
||||
<?php if ($cover = $package->cover()->toFile()): ?>
|
||||
|
|
@ -323,11 +386,9 @@ if ($package):
|
|||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<p class="type">Dossier</p>
|
||||
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($package->description()->isNotEmpty()): ?>
|
||||
<p class="short"><?= $package->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
// Compter les enquêtes associées à ce dossier
|
||||
|
|
@ -336,12 +397,16 @@ if ($package):
|
|||
})->count();
|
||||
?>
|
||||
|
||||
<ul>
|
||||
<ul class="details">
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
<?php if ($package->description()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $package->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
|
|
@ -357,36 +422,28 @@ if ($package):
|
|||
|
||||
|
||||
<?php if ($relatedInvestigations->isNotEmpty()): ?>
|
||||
<aside class="section__article" id="section__related-articles">
|
||||
<h3 class="section__title">En lien</h3>
|
||||
<aside class="investigation__aside" id="aside__related-articles">
|
||||
<h3 class="aside__title">Voir aussi</h3>
|
||||
|
||||
<?php foreach ($relatedInvestigations as $related): ?>
|
||||
<article class="card--article-small">
|
||||
|
||||
<?php if ($cover = $related->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<p class="type">Enquête</p>
|
||||
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
|
||||
<?php if ($related->incidentDate()->isNotEmpty()): ?>
|
||||
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
<time class="date" 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">
|
||||
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
</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="<?= $related->url() ?>" target="_blank" aria-hidden="true"></a>
|
||||
|
|
@ -1,580 +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">
|
||||
<?php snippet('toc') ?>
|
||||
</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 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"><?= $page->subtitle()->toLowerCase() ?></h2>
|
||||
</div>
|
||||
|
||||
<?php snippet('picture', [
|
||||
'file' => $page->cover()->toFile(),
|
||||
'class' => 'report__cover'
|
||||
]) ?>
|
||||
|
||||
<dl class="report__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Auteurs du rapport</dt>
|
||||
<dd><?= $page->authors() ?></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date du rapport</dt>
|
||||
<dd>
|
||||
<time datetime="<?= $page->created()->toDate('Y-m-d') ?>">
|
||||
<?= $page->created()->toDate('d MMMM yyyy') ?>
|
||||
</time>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<div class="report__btns btn--group">
|
||||
<button class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télécharger le 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 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>
|
||||
|
||||
|
||||
<div class="report__content">
|
||||
|
||||
|
||||
<div class="section-content" id="auteurs">
|
||||
|
||||
|
||||
|
||||
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
||||
|
||||
|
||||
<div class="section-txt">
|
||||
<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>
|
||||
|
||||
<div class="section-content" id="rappel-faits">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
|
||||
<div class="section-txt">
|
||||
<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>
|
||||
|
||||
<div class="section-content" id="modelisation">
|
||||
<h3 class="section-title">Modélisation numérique en 3D des lieux de l'incident</h3>
|
||||
|
||||
<div class="section-txt">
|
||||
<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>
|
||||
|
||||
<div class="section-content" id="sources-employees">
|
||||
<h3 class="section-title">Sources employées</h3>
|
||||
|
||||
<div class="section-txt">
|
||||
<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>
|
||||
|
||||
<div class="section-content" id="objectifs-rapport">
|
||||
<h3 class="section-title">Objectifs du rapport</h3>
|
||||
|
||||
<div class="section-txt">
|
||||
<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>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||
|
||||
|
||||
<div class="subsection-w-media">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="subsection-txt">
|
||||
<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>
|
||||
|
||||
<div class="subsection-w-media">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="subsection-txt">
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">2. SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
|
||||
|
||||
|
||||
|
||||
<div class="subsection-w-media">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="subsection-txt">
|
||||
<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>
|
||||
|
||||
|
||||
</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="subsection-w-hscroll">
|
||||
|
||||
|
||||
|
||||
<div class="horizontal-scroll">
|
||||
<div class="horizontal-scroll-wrapper">
|
||||
<div class="horizontal-scroll-slide">
|
||||
<div class="horizontal-scroll-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="horizontal-scroll-slide">
|
||||
<div class="horizontal-scroll-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="horizontal-scroll-slide">
|
||||
<div class="horizontal-scroll-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="horizontal-scroll-slide">
|
||||
<div class="horizontal-scroll-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="horizontal-scroll-button-prev"></div>
|
||||
<div class="horizontal-scroll-button-next"></div>
|
||||
<div class="horizontal-scroll-pagination"></div>
|
||||
|
||||
</div> <!-- horizontal-scroll -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="subsection-txt">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
|
||||
|
||||
|
||||
<div class="section-txt">
|
||||
<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 class="subsection-w-media">
|
||||
|
||||
|
||||
|
||||
<div class="media container-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>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="subsection-txt">
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,230 +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">
|
||||
<?php snippet('toc') ?>
|
||||
</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 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"><?= $page->subtitle()->toLowerCase() ?></h2>
|
||||
</div>
|
||||
|
||||
<?php snippet('picture', [
|
||||
'file' => $page->cover()->toFile(),
|
||||
'class' => 'report__cover'
|
||||
]) ?>
|
||||
|
||||
<dl class="report__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Auteurs du rapport</dt>
|
||||
<dd><?= $page->authors() ?></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date du rapport</dt>
|
||||
<dd>
|
||||
<time datetime="<?= $page->created()->toDate('Y-m-d') ?>">
|
||||
<?= $page->created()->toDate('d MMMM yyyy') ?>
|
||||
</time>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</header>
|
||||
|
||||
<div class="report__btns btn--group">
|
||||
<button class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télécharger le 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 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>
|
||||
|
||||
<div class="report__content">
|
||||
<?php foreach ($page->body()->toLayouts() as $layout): ?>
|
||||
<?php
|
||||
$columns = $layout->columns();
|
||||
$columnCount = $columns->count();
|
||||
?>
|
||||
|
||||
<?php if ($columnCount === 1): ?>
|
||||
<?php
|
||||
$column = $columns->first();
|
||||
$blocks = $column->blocks();
|
||||
$hasHeading = false;
|
||||
$hasOtherContent = false;
|
||||
|
||||
// Check what types of content we have
|
||||
foreach ($blocks as $block) {
|
||||
if ($block->type() === 'heading') {
|
||||
$hasHeading = true;
|
||||
} else {
|
||||
$hasOtherContent = true;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="section-content">
|
||||
<?php foreach ($blocks as $block): ?>
|
||||
<?php if ($block->type() === 'heading'): ?>
|
||||
<<?= $block->level()->or('h3') ?> class="section-title"><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<?php elseif ($block->type() === 'text'): ?>
|
||||
<div class="section-txt">
|
||||
<?= $block->text() ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'image'): ?>
|
||||
<div class="media container-figure fig-simple">
|
||||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'beforeafter'): ?>
|
||||
<div class="media">
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'video'): ?>
|
||||
<div class="media container-video">
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'horizontal-gallery'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($columnCount === 2): ?>
|
||||
<div class="section-content">
|
||||
<div class="subsection-w-media">
|
||||
<?php
|
||||
$firstColumn = $columns->first();
|
||||
$lastColumn = $columns->last();
|
||||
?>
|
||||
|
||||
<div class="media">
|
||||
<?php foreach ($firstColumn->blocks() as $block): ?>
|
||||
<?php if ($block->type() === 'image'): ?>
|
||||
<div class="container-figure fig-simple">
|
||||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'beforeafter'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php elseif ($block->type() === 'video'): ?>
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<div class="subsection-txt">
|
||||
<?php foreach ($lastColumn->blocks() as $block): ?>
|
||||
<?php if ($block->type() === 'text'): ?>
|
||||
<?= $block->text() ?>
|
||||
<?php elseif ($block->type() === 'heading'): ?>
|
||||
<<?= $block->level()->or('h3') ?>><?= $block->text() ?></<?= $block->level()->or('h3') ?>>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue