Compare commits
No commits in common. "main" and "rapport" have entirely different histories.
89 changed files with 2749 additions and 6776 deletions
|
|
@ -3,9 +3,7 @@
|
|||
"allow": [
|
||||
"Bash(git add:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(cat:*)",
|
||||
"WebFetch(domain:unicode-org.github.io)",
|
||||
"Bash(git mv:*)"
|
||||
"Bash(cat:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ jobs:
|
|||
set ftp:ssl-allow no
|
||||
open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ -x header.php site site
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor
|
||||
quit
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -61,4 +61,4 @@ Icon
|
|||
|
||||
# Local
|
||||
local/
|
||||
.claude
|
||||
/local/*
|
||||
|
|
@ -29,6 +29,9 @@ body{
|
|||
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
|
|
@ -48,7 +51,7 @@ img{
|
|||
// }
|
||||
}
|
||||
|
||||
.swiper-button-next, .swiper-button-prev,
|
||||
|
||||
body, #site-header, #site-footer{
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
|
@ -58,57 +61,4 @@ body, #site-header, #site-footer{
|
|||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@mixin hide-scroll(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines) {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin hover-card-line(){
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
position: relative;
|
||||
&::before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
&::before{
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body.menu-open,
|
||||
body.is-hidden{
|
||||
overflow-y: hidden;
|
||||
main, footer, #nav-highlight, .btn--back-to-top{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -11,8 +11,3 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
|
|||
@media #{$medium}{
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,16 @@
|
|||
// --fs-big: 38px;
|
||||
|
||||
--fs-xsmall: 10px;
|
||||
--fs-small: 16px;
|
||||
--fs-normal: 20px;
|
||||
--fs-medium: 24px;
|
||||
--fs-small: 12px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-xbig: 38px;
|
||||
|
||||
--fs-button-bold: 22px;
|
||||
|
||||
--max-w-content: 640px;
|
||||
--max-w-cards: 940px;
|
||||
--z-header: 2000;
|
||||
--panel-w: 310px;
|
||||
--max-w-content: 700px;
|
||||
--max-w-container: 1280px;
|
||||
|
||||
@media #{$small} {
|
||||
--fs-medium: 20px;
|
||||
|
|
@ -43,7 +41,6 @@
|
|||
--grey-400: #969696;
|
||||
--grey-600: #6d6d6d;
|
||||
--grey-800: #383838;
|
||||
--grey-950: #222222;
|
||||
|
||||
--color-bg: #161616;
|
||||
--color-txt: #ffffff;
|
||||
|
|
@ -99,16 +96,15 @@
|
|||
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--grey-100: #2f2f2f;
|
||||
--grey-100: #1f1f1f;
|
||||
--grey-200: #2f2f2f;
|
||||
--grey-300: #4a4a4a;
|
||||
--grey-400: #6a6a6a;
|
||||
--grey-600: #9a9a9a;
|
||||
--grey-800: #cfcfcf;
|
||||
--grey-950: #eaeaea;
|
||||
|
||||
--color-bg: #efefef;
|
||||
--color-txt: #161616;
|
||||
--color-txt: #000000;
|
||||
--color-txt-light: var(--grey-400);
|
||||
|
||||
--color-accent: #ff00ff;
|
||||
|
|
|
|||
60
assets/css/components/_btn--don.scss
Normal file
60
assets/css/components/_btn--don.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
#btn--don__mobile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 1.5);
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in 0.2s;
|
||||
|
||||
pointer-events: none;
|
||||
&.is-visible {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--don {
|
||||
--vertical-padding: 0.5ch;
|
||||
height: calc(var(--h-block) + var(--vertical-padding));
|
||||
border-radius: calc(var(--h-block) / 1);
|
||||
padding: var(--vertical-padding) 2ch;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 28px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-bg);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
.btn--group__mobile{
|
||||
z-index: calc(var(--z-header) - 10);
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in;
|
||||
|
||||
&.is-visible{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: calc(var(--h-block) * 3);
|
||||
padding: calc(var(--spacing) * 0.75) var(--padding-body);
|
||||
// padding-top: var(--spacing);
|
||||
background-color: var(--color-bg);
|
||||
background: linear-gradient(0deg,
|
||||
var(--color-bg) 0%,
|
||||
var(--color-bg) 75%,
|
||||
transparent 100%);
|
||||
|
||||
// background-color: yellow;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--padding-inner);
|
||||
button, .dropdown{
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
.btn--group__mobile{
|
||||
display: none;
|
||||
opacity: 0!important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3,9 +3,6 @@ button{
|
|||
font-family: var(--font);
|
||||
font-size: var(--fons-normal);
|
||||
color: var(--color-txt);
|
||||
svg{
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
&:hover{
|
||||
color: var(--grey-100);
|
||||
svg{ fill: var(--grey-100); }
|
||||
|
|
@ -35,62 +32,31 @@ button:disabled{
|
|||
|
||||
|
||||
.btn--small{
|
||||
height: calc(var(--h-block)*1);
|
||||
border: var(--border-light);
|
||||
display: block;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
--size: 10px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
position: relative;
|
||||
top: -8px;
|
||||
svg{
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&.no-link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
color: currentColor;
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-950);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn--small.is-selected{
|
||||
background-color: var(--color-txt);
|
||||
border-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
a{ color: var(--color-bg); }
|
||||
svg{ fill: var(--color-bg); }
|
||||
}
|
||||
|
||||
.btn--bold,
|
||||
|
|
@ -100,7 +66,6 @@ button:disabled{
|
|||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
|
|
@ -155,109 +120,103 @@ button:disabled{
|
|||
background-color: var(--color-bg);
|
||||
svg{ fill: var(--color-txt); }
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
border-color: var(--grey-100);
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
a{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--toc{
|
||||
svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.btn--light{
|
||||
border: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@mixin btn--go-to(){
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
||||
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
|
||||
position: relative;
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media #{$small}{
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media #{$x-small}{
|
||||
right: calc(var(--padding-inner)*0.5);
|
||||
bottom: calc(var(--padding-inner)*0.25);
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.btn--go-to{
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes wiggle-left {
|
||||
0% { transform: translateX(0); }
|
||||
40% { transform: translateX(-10px); }
|
||||
80% { transform: translateX(0); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--back-to-top{
|
||||
display: flex;
|
||||
border-color: var(--color-txt);
|
||||
width: fit-content;
|
||||
margin: var(--spacing) auto;
|
||||
@media #{$small}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
// padding-right: 0.5ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.icon, .txt{ z-index: 10; }
|
||||
|
||||
.icon{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
|
||||
svg{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.txt{
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size)/2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width .2s
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
border-color: var(--grey-100);
|
||||
a{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
//
|
||||
.txt{
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
&::after{
|
||||
width: 100%;
|
||||
}
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,46 +3,22 @@
|
|||
.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);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
|
||||
// &:first-of-type{
|
||||
// padding-top: calc(var(--spacing)*0.5);
|
||||
// border-top: var(--border-light);
|
||||
// }
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
figure{
|
||||
@media #{$x-small}{ margin-left: 0px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
padding-right: calc(var(--padding-inner)*3);
|
||||
|
||||
}
|
||||
|
||||
.title{
|
||||
font-weight: 400;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
a{ text-decoration: none;}
|
||||
|
||||
}
|
||||
|
|
@ -51,19 +27,15 @@
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
|
||||
.description{
|
||||
@include clamp(2);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
.keywords{
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing)*0.25);
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include btn--go-to();
|
||||
@include hover-card-line();
|
||||
|
||||
.keywords{ display: none; }
|
||||
&:hover{
|
||||
.title{ text-decoration: underline;}
|
||||
}
|
||||
|
||||
@media #{$medium}{
|
||||
.title{
|
||||
|
|
@ -73,17 +45,6 @@
|
|||
}
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
// figure{
|
||||
// aspect-ratio: inherit;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.icon-article{ display: none; }
|
||||
.description{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -94,24 +55,12 @@
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
padding-right: calc(var(--padding-inner)*1);
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -4,37 +4,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--padding-inner);
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
.content{
|
||||
// padding: var(--padding-inner);
|
||||
padding: var(--padding-inner);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.pin{
|
||||
position: absolute;
|
||||
top: calc(var(--padding-inner)*1.5);
|
||||
left: calc(var(--padding-inner)*1.5);
|
||||
z-index: 10;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-small);
|
||||
background-color: rgba(255, 255, 255, 0.27);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
width: 16px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
.time-alone{
|
||||
display: none;
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.title{
|
||||
|
|
@ -42,14 +19,14 @@
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
// flex-grow: 2;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
font-size: var(--fs-small);
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
@ -59,8 +36,7 @@
|
|||
|
||||
.dl{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
font-size: var(--fs-small);
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
|
|
@ -72,37 +48,24 @@
|
|||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul{
|
||||
ul:not(.keywords){
|
||||
list-style: none;
|
||||
li{ padding-bottom: 0.2em; }
|
||||
li{
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
|
||||
grid-column: 2;
|
||||
.dl__group__keywords{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
.link-block{
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
.card--folder{
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: cardfolder;
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
a{ text-decoration: none;}
|
||||
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
.icon{
|
||||
padding-right: 1ch;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
svg{
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.short{
|
||||
@include clamp(3);
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
|
||||
li + li{
|
||||
&::before{
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner)*1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
[data-template="investigation-summary"] .card--folder{
|
||||
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
figure{
|
||||
@media #{$x-small}{ margin-left: 0px; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@container cardfolder (width < 680px) {
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.short{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@container cardfolder (width < 520px) {
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.short, ul{
|
||||
font-size: var(--fs-small);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
.card--impact-small {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
|
||||
@media #{$x-small} {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) .content,
|
||||
.keywords {
|
||||
@media #{$x-small} {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
@media #{$x-small} {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,264 +1,77 @@
|
|||
.card--impact {
|
||||
.card--impact{
|
||||
@include grid-content();
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
border: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
.content{
|
||||
grid-column: 2;
|
||||
}
|
||||
&:not([data-impact-type="media"]) .content{
|
||||
@media #{$x-small}{ grid-column: span 2; }
|
||||
}
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
.tag{
|
||||
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
}
|
||||
|
||||
.content{
|
||||
.see-more{
|
||||
color: var(--color-txt-light);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
&::after{
|
||||
content: ' +'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card--impact__inner {
|
||||
@include grid-content();
|
||||
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
|
||||
.open-graph__details{
|
||||
grid-column: span 2;
|
||||
@include details-summary();
|
||||
summary{
|
||||
color: var(--color-txt-light);
|
||||
.arrow-details svg{ fill: var(--color-txt-light);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @media #{$x-small-up}{
|
||||
|
||||
.open-graph__details{
|
||||
summary{
|
||||
@include grid-content();
|
||||
.summary-inner{
|
||||
grid-column: 2;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.open-graph__inner{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
@media #{$small-up}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
.card--open-graph{
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// border-bottom: var(--border-light);
|
||||
// padding: calc(var(--spacing)*0.5) 0;
|
||||
// &:first-of-type{
|
||||
// border-top: var(--border-light);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
grid-column: 1;
|
||||
grid-row: 2/4;
|
||||
align-self: end;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) .content {
|
||||
@media #{$x-small} {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.investigations {
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
a {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@container impact (width < 460px) {
|
||||
.card--impact__inner{
|
||||
display: block!important;
|
||||
padding-top: var(--padding-inner)!important;
|
||||
padding-bottom: calc(var(--padding-inner)*0.75)!important;
|
||||
|
||||
|
||||
.tag, .date{
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px!important;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
.card--open-graph{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.investigations{
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
}
|
||||
.date,
|
||||
.content,
|
||||
details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1.25)!important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner)*1.25)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
.card--impact__inner{
|
||||
display: block!important;
|
||||
padding-top: var(--padding-inner)!important;
|
||||
padding-bottom: calc(var(--padding-inner)*0.75)!important;
|
||||
|
||||
|
||||
.tag, .date{
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px!important;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
.card--open-graph{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.investigations{
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
}
|
||||
.date,
|
||||
.content,
|
||||
details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1.25)!important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner)*1.25)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,26 +1,19 @@
|
|||
.card--open-graph{
|
||||
|
||||
@include grid-content();
|
||||
|
||||
// border: var(--border-light);
|
||||
border: 1px solid var(--grey-600);
|
||||
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
|
||||
figure{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// @include figure-16-9();
|
||||
@include figure-16-9();
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
|
@ -40,14 +33,11 @@
|
|||
.site-name{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-top: 2px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -67,26 +57,7 @@
|
|||
}
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
}
|
||||
.title{ text-decoration: underline;}
|
||||
|
||||
|
||||
.open-graph__inner{
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: opengraph;
|
||||
}
|
||||
@container opengraph (width < 500px) {
|
||||
.card--open-graph{
|
||||
|
||||
.content{
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,13 +31,6 @@
|
|||
|
||||
}
|
||||
|
||||
summary:hover{
|
||||
color: var(--color-txt);
|
||||
.arrow-details svg{
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&[open]{
|
||||
.arrow-details svg{
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__trigger {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
margin-top: var(--padding-inner);
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
&::before{
|
||||
content: "◀";
|
||||
transform: rotate(90deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 16px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--padding-inner);
|
||||
}
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75em 1ch;
|
||||
font-size: var(--fs-small);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: var(--color-txt);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Positionnement par défaut : sous le bouton, aligné à gauche
|
||||
// Variante : aligné à droite
|
||||
&--align-right .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
.dropdown__content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// PANEL
|
||||
&--position-mobile .dropdown__content {
|
||||
top: auto;
|
||||
bottom: calc(var(--h-block) + var(--padding-inner)*2);
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
&::before{
|
||||
font-family: Arial;
|
||||
content: "◀";
|
||||
transform: rotate(-90deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: -13px;
|
||||
left: auto;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--position-mobile.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
&--position-panel .dropdown__content {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: calc(100% + var(--padding-inner));
|
||||
margin-top: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
&::before{
|
||||
font-family: Arial;
|
||||
content: "◀";
|
||||
transform: rotate(0deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 4px;
|
||||
left: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--position-panel.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
.dropdown__content{
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
.modal--share{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1280px){
|
||||
|
||||
[data-template="investigations"]{
|
||||
.dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -12,23 +12,6 @@
|
|||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin figure-16-9-hover{
|
||||
figure{
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
figure img{ transform: scale(1.05); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
#hero{
|
||||
width: 100%;
|
||||
width: calc(100vw - var(--padding-body)*4);
|
||||
position: relative;
|
||||
left: 0;
|
||||
left: calc(var(--padding-body)*1);
|
||||
|
||||
@media #{$medium}{
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
// @media #{$small}{
|
||||
// width: 100vw;
|
||||
// left: calc(var(--padding-body)*-1);
|
||||
// }
|
||||
@media #{$small}{
|
||||
width: 100vw;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
}
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
|
|
|
|||
|
|
@ -1,50 +1,14 @@
|
|||
.keywords{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75ch;
|
||||
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&:hover{
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keywords--small{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&::after{
|
||||
content: "\00a0";
|
||||
display: inline-block;
|
||||
padding-right: 0.75ch;
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,29 @@
|
|||
.modal--share{
|
||||
width: 240px;
|
||||
padding-bottom: var(--padding-inner);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc( var(--padding-inner)*0.5);
|
||||
padding-bottom: calc( var(--padding-inner)*1.5);
|
||||
|
||||
.modal-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: block;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
a{
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2ch;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
|
|
@ -31,20 +38,27 @@
|
|||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
|
||||
.icon svg,
|
||||
.icon svg path,
|
||||
.icon svg rect{
|
||||
fill: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.copy-link{
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
padding: 0 var(--padding-inner);
|
||||
height: var(--h-block);
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
.copy-link__field{
|
||||
flex-grow: 1;
|
||||
|
|
@ -85,63 +99,24 @@
|
|||
&:focus{
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
}
|
||||
&.is-copied{
|
||||
color: var(--color-accent)!important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.copy-link__btn{
|
||||
button{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
width: 8ch!important;
|
||||
|
||||
&::after{
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__content,
|
||||
#share-banner__aside,
|
||||
#share-banner__desktop{
|
||||
display: none;
|
||||
}
|
||||
#share-banner__content ~ .modal--share,
|
||||
#share-banner__aside ~ .modal--share,
|
||||
#share-banner__desktop ~ .modal--share{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__content:checked ~ .modal--share,
|
||||
#share-banner__aside:checked ~ .modal--share,
|
||||
#share-banner__desktop:checked ~ .modal--share{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
|
||||
.slider-before-after{
|
||||
|
||||
width: 100%;
|
||||
|
||||
max-width: 700px;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// max-width: 800px;
|
||||
// max-height: 90vh;
|
||||
// aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: .2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* z-index: 10; */
|
||||
left: var(--position);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider-button {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
padding: .5rem;
|
||||
border-radius: 100vw;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
top: 50%;
|
||||
left: var(--position);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
/* z-index: 100; */
|
||||
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
button.sort{
|
||||
.sort{
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
|
||||
.arrow{
|
||||
line-height: 0;
|
||||
--size: 12px;
|
||||
|
|
@ -18,6 +23,17 @@ button.sort{
|
|||
|
||||
}
|
||||
|
||||
.icon{
|
||||
--size: 10px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
position: relative;
|
||||
top: -8px;
|
||||
svg{
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[data-sort-type="up"]{
|
||||
|
|
@ -26,17 +42,20 @@ button.sort{
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page__sort {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
width: 100%;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
// z-index: calc(var(--z-header) - 100);
|
||||
|
||||
|
||||
&:hover{
|
||||
color: var(--grey-100);
|
||||
svg{
|
||||
fill: var(--grey-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
.swiper {
|
||||
|
||||
|
||||
--slide-padding: 30px;
|
||||
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px!important;
|
||||
height: calc(100% - var(--spacing)*1);
|
||||
// background-color: red;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: 0px!important;
|
||||
margin-top: calc(var(--spacing)*0.5)!important;
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,4 +21,27 @@
|
|||
}
|
||||
|
||||
|
||||
.tag-inline{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
// border-radius: calc(var(--h-block)*0.75/2);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.page__title{
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin: calc(var(--spacing)*1.5) auto;
|
||||
text-align: center;
|
||||
max-width: var(--max-w-container);
|
||||
|
||||
}
|
||||
|
||||
.page__description{
|
||||
display: none;
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
p{
|
||||
font-size: var(--fs-normal);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.container-cards{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.container-cards__investigations {
|
||||
|
||||
@media #{$x-small-up} {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
body{
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
// overflow-x: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -11,22 +9,6 @@ body{
|
|||
main{
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
.page__header,
|
||||
.page__content{
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.page__type{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
main .page__header {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
@media #{$small} {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
|
||||
}
|
||||
|
||||
.page__title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.description {
|
||||
// max-width: 68ch;
|
||||
|
||||
// font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.description-medium{
|
||||
// font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,11 +4,6 @@
|
|||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
z-index: 500;
|
||||
|
||||
.site-footer__container{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
|
|
@ -44,6 +39,7 @@
|
|||
|
||||
|
||||
@media #{$small}{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
|
||||
|
||||
.footer__socials{
|
||||
|
|
@ -72,11 +68,15 @@
|
|||
|
||||
.site-footer__container{
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: calc(var(--spacing)*2);
|
||||
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__socials .socials{
|
||||
max-width: 400px;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
@keyframes add-border {
|
||||
from {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
to {
|
||||
border-bottom: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
|
||||
z-index: var(--z-header);
|
||||
z-index: 900;
|
||||
--gap: 3ch;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0 var(--padding-body);
|
||||
|
||||
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
||||
|
||||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-bottom: 1px solid var(--color-bg);
|
||||
// transition: border-color ease-in .5s;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -37,7 +38,6 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
// opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
@media #{$small}{
|
||||
|
|
@ -65,7 +65,6 @@
|
|||
align-items: center;
|
||||
gap: var(--gap);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -86,9 +85,6 @@
|
|||
#lang-toggle{
|
||||
display: flex;
|
||||
gap: 1ch;
|
||||
button{
|
||||
font-weight: 500;
|
||||
}
|
||||
button:disabled{ color: var(--color-txt-light); }
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +92,6 @@
|
|||
cursor: pointer;
|
||||
svg{
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.close{ display: none; }
|
||||
|
||||
|
|
@ -112,11 +107,37 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
#site-header.is-visible{
|
||||
// .site-header__inner{
|
||||
// border-color: var(--grey-800);
|
||||
// }
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.site-header__inner{
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
#nav-highlight li:not(.soutenir){
|
||||
display: none;
|
||||
}
|
||||
#site-title {
|
||||
@media #{$small-up}{
|
||||
flex-grow: 0;
|
||||
width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2);
|
||||
}
|
||||
@media #{$medium}{
|
||||
width: calc(var(--banner-medium) - var(--padding-body));
|
||||
}
|
||||
}
|
||||
|
||||
.header__title-page{
|
||||
@media #{$small-up}{
|
||||
display: block;
|
||||
}
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ main{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@
|
|||
top: var(--header-h);
|
||||
right: calc(var(--menu-w)*-1);
|
||||
transition: right .3s ease-in;
|
||||
@media #{$small}{
|
||||
transition: right .4s ease-in;
|
||||
}
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
z-index: calc(var(--z-header) - 1);
|
||||
z-index: 1000;
|
||||
|
||||
@media #{$x-small}{
|
||||
width: 100vw;
|
||||
|
|
@ -33,7 +30,6 @@
|
|||
ul{
|
||||
list-style-type: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
a{
|
||||
|
|
@ -54,11 +50,11 @@
|
|||
}
|
||||
|
||||
body.menu-open{
|
||||
// overflow: hidden;
|
||||
// main, footer, #nav-highlight{
|
||||
// transition: opacity .3s ease-in;
|
||||
// opacity: 0.1;
|
||||
// }
|
||||
overflow: hidden;
|
||||
main, footer, #nav-highlight{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#site-menu{
|
||||
right: 0;
|
||||
|
||||
|
|
|
|||
2609
assets/css/style.css
2609
assets/css/style.css
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,49 +1,39 @@
|
|||
@charset "UTF-8";
|
||||
@import "base/responsive";
|
||||
@import "base/var";
|
||||
@import "base/body";
|
||||
@import 'base/responsive';
|
||||
@import 'base/var';
|
||||
@import 'base/body';
|
||||
|
||||
@import "partials/site-header";
|
||||
@import 'partials/site-header';
|
||||
|
||||
// @import 'components/nav-tabs';
|
||||
// @import 'components/btn--default';
|
||||
@import "components/buttons";
|
||||
@import "components/tags";
|
||||
@import "components/keywords";
|
||||
@import "components/details-summary";
|
||||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
@import 'components/buttons';
|
||||
@import 'components/tags';
|
||||
@import 'components/keywords';
|
||||
@import 'components/details-summary';
|
||||
@import 'components/sort';
|
||||
|
||||
@import 'components/figures';
|
||||
@import 'components/hero';
|
||||
@import 'components/form-newsletter';
|
||||
@import 'components/search-form';
|
||||
@import 'components/list-socials';
|
||||
@import 'components/modal-share';
|
||||
@import 'components/text';
|
||||
@import 'components/card-article';
|
||||
@import 'components/card-article-small';
|
||||
@import 'components/card-impact';
|
||||
@import 'components/card-open-graph';
|
||||
|
||||
|
||||
@import 'partials/site-header';
|
||||
@import 'partials/site-menu';
|
||||
@import 'partials/site-footer';
|
||||
@import 'partials/main-layout';
|
||||
|
||||
|
||||
@import "components/figures";
|
||||
@import "components/hero";
|
||||
@import "components/form-newsletter";
|
||||
@import "components/search-form";
|
||||
@import "components/list-socials";
|
||||
@import "components/modal-share";
|
||||
@import "components/dropdown";
|
||||
@import "components/text";
|
||||
@import "components/card-article";
|
||||
@import "components/card-article-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-impact-small";
|
||||
@import "components/card-folder";
|
||||
@import "components/card-open-graph";
|
||||
@import "components/swiper";
|
||||
@import "components/slider-before-after";
|
||||
@import 'template/investigations';
|
||||
@import 'template/investigation-summary';
|
||||
@import 'template/rapport';
|
||||
|
||||
|
||||
@import "partials/site-header";
|
||||
@import "partials/site-menu";
|
||||
@import "partials/site-footer";
|
||||
@import "partials/main-layout";
|
||||
@import "partials/page-header";
|
||||
@import "partials/container-cards";
|
||||
|
||||
@import "template/home";
|
||||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
@import "template/folder";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
|
|
@ -1,90 +0,0 @@
|
|||
.content-folder{
|
||||
// max-width: 1300px;
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--padding-body)*1.5);
|
||||
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
|
||||
|
||||
position: relative;
|
||||
|
||||
.container-cards{
|
||||
display: block;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
#section__investigations article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
.container__title{
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-normal);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
#section__investigations{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-inner)*1.5)!important;
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
article{ margin-bottom: 0px;}
|
||||
.container__title{
|
||||
grid-column: span 2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
section:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none; }
|
||||
grid-template-columns: 1fr 1fr;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
display: block;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
}
|
||||
.container__title{
|
||||
margin-bottom: calc(var(--spacing)*0.5)!important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#nav-folder{
|
||||
display: flex;
|
||||
margin-top: calc(var(--spacing)*-1);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
svg{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none;}
|
||||
}
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
.section--home {
|
||||
|
||||
.btn--bold-inline {
|
||||
text-transform: none;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title-section {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-big);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up} {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
.col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
|
||||
&#home__investigations,
|
||||
&#home__hero {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
.section--inner {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
}
|
||||
|
||||
.col-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
.section--inner {
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
|
||||
.title-section {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
.btn--bold-inline {
|
||||
color: var(--color-txt-light);
|
||||
border-color: var(--color-txt-light);
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
// margin: 0 auto;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
a {
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#home__investigations {
|
||||
|
||||
.home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
|
||||
.time-alone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dl,
|
||||
.pin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__hero {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
|
||||
@media #{$x-small} {
|
||||
margin-top: calc(var(--spacing)*2.5);
|
||||
padding-bottom: calc(var(--spacing)*1.5);
|
||||
margin-bottom: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section--inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.baseline {
|
||||
font-size: 45px;
|
||||
line-height: 1.1;
|
||||
max-width: 32ch;
|
||||
|
||||
@media #{$x-small} {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__folders {
|
||||
.card--folder {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,217 +1,336 @@
|
|||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.page__header{
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
header{
|
||||
|
||||
.page-title{
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
.section__article{
|
||||
a:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.section__title{
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*0.5)
|
||||
}
|
||||
|
||||
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__folder,
|
||||
#section__related-articles{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
.dl__group {
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul:not(.keywords) {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
p+p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
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;
|
||||
#nav--page{
|
||||
ul{
|
||||
list-style: none;
|
||||
li{
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
a{
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
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%;
|
||||
#section__short{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
#section__dl{
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
dt{
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul:not(.keywords){
|
||||
list-style: none;
|
||||
li{
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#section__synthese{
|
||||
p + p{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__desktop{ display: none; }
|
||||
#share-banner__desktop ~ .modal--share{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__desktop:checked ~ .modal--share{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
width: 100%;
|
||||
|
||||
header {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
@media #{$small}{
|
||||
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
header{
|
||||
padding-top: calc(var(--spacing)*1.5);
|
||||
.page-type{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.section__article{
|
||||
margin: calc(var(--spacing)*1.5) 0;
|
||||
}
|
||||
|
||||
#section__impacts, #section__en-lien{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#hero{
|
||||
margin: calc(var(--spacing)*1.5) 0;
|
||||
figcaption{
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.modal--share{
|
||||
position: absolute;
|
||||
width: calc(100% - var(--padding-body)*2);
|
||||
bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
|
||||
#banner--page {
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: calc(var(--spacing)*0.75) var(--padding-body);
|
||||
padding-top: var(--spacing);
|
||||
background-color: var(--color-bg);
|
||||
background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
|
||||
z-index: 800;
|
||||
|
||||
#nav--page{
|
||||
display: none;
|
||||
}
|
||||
.btn--group{
|
||||
|
||||
display: flex;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
position: relative;
|
||||
|
||||
> button,
|
||||
> label {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// action
|
||||
|
||||
#banner--page{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#banner--page.is-visible{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
|
||||
#hero {
|
||||
figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#section__dl .dl__group {
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.25) 0;
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
[data-template="investigation-summary"] main{
|
||||
#section__dl .dl__group{
|
||||
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing)*0.25) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// DESKTOP ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
#banner--page{
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h))*-1);
|
||||
margin-bottom: calc((100dvh - var(--header-h))*-1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
padding-bottom: calc(var(--padding-body)*2);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#banner--page .btn--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
> button,
|
||||
> label {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#hero{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
|
||||
.section__article{
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
|
||||
#section__short{
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
|
||||
header{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
}
|
||||
|
||||
.section__article{
|
||||
.section__title{
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
#section__synthese{
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
}
|
||||
.modal--share{
|
||||
position: absolute;
|
||||
bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
|
||||
width: calc(100% - var(--padding-body));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$medium-up}{
|
||||
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
#banner--page{
|
||||
width: calc((100% - var(--max-w-content))/2);
|
||||
}
|
||||
|
||||
#hero{
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
figcaption{
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
}
|
||||
|
||||
.section__article{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
53
assets/css/template/_investigations.scss
Normal file
53
assets/css/template/_investigations.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
[data-template="investigations"] main{
|
||||
|
||||
|
||||
|
||||
#container-cards{
|
||||
|
||||
@media #{$x-small-up}{
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: 10vh;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@media #{$x-small}{
|
||||
margin-bottom: 10vh;
|
||||
.card--article{
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.search-container{
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
.page__sort{
|
||||
max-width: var(--max-w-container);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
307
assets/css/template/_rapport.scss
Normal file
307
assets/css/template/_rapport.scss
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
:root{
|
||||
--rapport-w: 280px;
|
||||
}
|
||||
|
||||
#rapport{
|
||||
margin-bottom: 20vh;
|
||||
padding-left: var(--rapport-w);
|
||||
padding-bottom: 10vh;
|
||||
margin: 0 auto;
|
||||
max-width: calc(var(--max-w-content) + var(--rapport-w));
|
||||
|
||||
.rapport__header{
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 140px;
|
||||
// column-gap: calc(var(--spacing)*1.5);
|
||||
// row-gap: calc(var(--spacing)*2);
|
||||
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
max-width: var(--max-w-content);
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
.rapport__title-group{
|
||||
grid-column: span 2;
|
||||
|
||||
.title{
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rapport__figure{
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rapport__dl{
|
||||
align-self: start;
|
||||
font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
flex-grow: 2;
|
||||
align-items: flex-start;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
dt{
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.thumbnail--group{
|
||||
display: flex;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--group{
|
||||
display: flex;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.thumbnail{
|
||||
max-width: 260px;
|
||||
display: grid;
|
||||
display: none;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
column-gap: calc(var(--padding-inner)*1);
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
border: var(--border-light);
|
||||
figure{
|
||||
display: flex;
|
||||
aspect-ratio: 4/3;
|
||||
grid-column: 1;
|
||||
grid-row: 1/3;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail__title{
|
||||
padding-top: calc(var(--padding-inner)*0.5);
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
align-self: end;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
padding-right: calc(var(--padding-inner)*0.5);
|
||||
padding-bottom: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
|
||||
button svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.rapport__content{
|
||||
max-width: var(--max-w-content);
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
|
||||
|
||||
.section-content{
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.section-title{
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
padding-left: 3ch;
|
||||
}
|
||||
}
|
||||
|
||||
.rapport__content:target{
|
||||
padding-top: calc(var(--header-h)*2 + var(--spacing))!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#rapport__aside{
|
||||
width: var(--rapport-w);
|
||||
position: fixed;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
left: var(--padding-body);
|
||||
|
||||
// border-radius: var(--radius-small);
|
||||
height: calc(100vh - var(--header-h) - var(--padding-body)*4);
|
||||
|
||||
.tabs{
|
||||
display: flex;
|
||||
border: var(--border-light);
|
||||
height: calc(var(--h-block)*1.25);
|
||||
|
||||
.tab{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: bold;
|
||||
padding-left: 2ch;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.tab[for="tab-print"]{
|
||||
width: calc(var(--h-block)*1.5);
|
||||
border-right: var(--border-light);
|
||||
padding-left: 0;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
|
||||
svg{
|
||||
width: 18px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-aside{
|
||||
padding: var(--padding-body);
|
||||
height: calc(100% - var(--h-block)*1.25);
|
||||
overflow: scroll;
|
||||
border: var(--border-light);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
#toc{
|
||||
ul{ list-style: none;}
|
||||
|
||||
li{
|
||||
font-size: var(--fs-small);
|
||||
padding: 5px 1ch;
|
||||
padding-top: 7px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
li.selected{
|
||||
// color: var(--color-accent);
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
li:hover{
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
.toc-level-1{
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
.toc-level-2{
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-left: 4ch;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#download-pdf{
|
||||
margin: 0 auto;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#tab-print, #tab-toc{ display: none; }
|
||||
#tab-print:checked ~ .content-aside #toc{ display: none; }
|
||||
#tab-print:checked ~ .content-aside #print-features{ display: block; }
|
||||
|
||||
#tab-toc:checked ~ .content-aside #toc{ display: block; }
|
||||
#tab-toc:checked ~ .content-aside #print-features{ display: none; }
|
||||
|
||||
|
||||
|
||||
|
||||
#rapport{
|
||||
--fig-outside: calc(var(--spacing)*2);
|
||||
.container-figure{
|
||||
width: calc(100% + var(--fig-outside)*2);
|
||||
position: relative;
|
||||
left: calc(var(--fig-outside)*-1);
|
||||
}
|
||||
.fig-simple{
|
||||
height: calc(100vh - var(--header-h) - var(--spacing)*2);
|
||||
|
||||
figure{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,478 +0,0 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// LAOUT -----------------------------------
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
[data-template="report"] {
|
||||
|
||||
#toggle-panel{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#report__aside{
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
height: 100vh;
|
||||
left: -100vw;
|
||||
z-index: calc(var(--z-header) + 10);
|
||||
transition: left .4s ease-in;
|
||||
background: var(--color-bg);
|
||||
|
||||
|
||||
.panel__header{
|
||||
margin: 0 var(--padding-body);
|
||||
border-bottom: var(--border-aside);
|
||||
height: var(--header-h);
|
||||
}
|
||||
|
||||
.panel__content{
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100vh - var(--header-h));
|
||||
padding-bottom: 30vh;
|
||||
}
|
||||
|
||||
.btn--group{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.panel-open #report__aside{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.arrow-report{
|
||||
font-size: 14px;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
.media-anchor{
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.arrow-report{
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
[data-template="report"] {
|
||||
|
||||
|
||||
.report__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
.report__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-body)*2.5);
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
|
||||
.report__txt {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
#report__medias {
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
// border-left: var(--border-light);
|
||||
// padding-left: var(--padding-inner);
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
// border: var(--border-light);
|
||||
min-height: 100px;
|
||||
|
||||
}
|
||||
|
||||
#arrow__medias{
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
left: 26px;
|
||||
top: calc(var(--spacing)*-5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#toggle-panel {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: var(--padding-body);
|
||||
z-index: calc(var(--z-header) + 100);
|
||||
}
|
||||
|
||||
#report__aside {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: var(--padding-body);
|
||||
width: var(--panel-w);
|
||||
height: calc(100vh - var(--header-h));
|
||||
z-index: calc(var(--z-header) + 200);
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 4px 0px 4px 1px var(--color-bg);
|
||||
|
||||
.panel__header{
|
||||
border: var(--border-aside);
|
||||
height: calc(var(--h-block)*1.5);
|
||||
}
|
||||
|
||||
.panel__content {
|
||||
height: calc(100% - var(--h-block)*4.25);
|
||||
padding-bottom: 80px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#report__aside {
|
||||
left: calc(var(--panel-w)*-1);
|
||||
transition: left ease-in-out .5s;
|
||||
}
|
||||
#report {
|
||||
padding-left: calc(var(--padding-body)*2);
|
||||
transition: padding-left ease-in-out .5s;
|
||||
}
|
||||
|
||||
|
||||
.panel-open{
|
||||
|
||||
#report__aside{
|
||||
left: var(--padding-body);
|
||||
}
|
||||
#report {
|
||||
padding-left: calc(var(--panel-w) + var(--padding-body)*1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// HEADER -------------------------------------------------------------------------
|
||||
|
||||
.report__header {
|
||||
|
||||
|
||||
display: grid;
|
||||
column-gap: var(--padding-inner);
|
||||
row-gap: calc(var(--spacing)*1);
|
||||
grid-template-columns: 65% 35%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
|
||||
.report__title-group {
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
text-wrap: balance;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
figure {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.report__dl {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
align-self: end;
|
||||
// font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
align-items: flex-start;
|
||||
|
||||
.dl__group {
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn--group {
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
grid-column: 1/3;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CONTENT -------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
.report__content {
|
||||
|
||||
|
||||
|
||||
.section-content {
|
||||
padding-bottom: calc(var(--spacing)*3);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 3ch;
|
||||
}
|
||||
}
|
||||
|
||||
.report__content:target {
|
||||
padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
|
||||
}
|
||||
|
||||
|
||||
.media{
|
||||
|
||||
video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption{
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.swiper{
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// PANEL-LEFT --------------------------------------------
|
||||
|
||||
|
||||
|
||||
#toggle-panel {
|
||||
width: calc(var(--h-block) * 1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#report__aside {
|
||||
--border-aside: 1px solid var(--color-txt);
|
||||
|
||||
.panel__header {
|
||||
display: flex;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5ch;
|
||||
|
||||
.icon {
|
||||
width: calc(var(--h-block)*1.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.close svg {
|
||||
fill: var(--grey-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.panel__content {
|
||||
padding: var(--padding-body);
|
||||
overflow: scroll;
|
||||
@include hide-scroll();
|
||||
border: var(--border-aside);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
#toc {
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: var(--fs-small);
|
||||
|
||||
color: var(--color-txt-light);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
.toc-level-1 {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toc-level-2 {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-left: 4ch;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--group {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
|
||||
button {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,22 +2,22 @@
|
|||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-55Regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-56Italic.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Executive";
|
||||
src: url("Executive-65Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: 500;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z"/></svg>
|
||||
|
Before Width: | Height: | Size: 289 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg style="fill: var(--color-txt)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)" />
|
||||
<rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 309 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z"/></svg>
|
||||
|
Before Width: | Height: | Size: 207 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M160 96C160 78.3 174.3 64 192 64L448 64C465.7 64 480 78.3 480 96C480 113.7 465.7 128 448 128L418.5 128L428.8 262.1C465.9 283.3 494.6 318.5 507 361.8L510.8 375.2C513.6 384.9 511.6 395.2 505.6 403.3C499.6 411.4 490 416 480 416L160 416C150 416 140.5 411.3 134.5 403.3C128.5 395.3 126.5 384.9 129.3 375.2L133 361.8C145.4 318.5 174 283.3 211.2 262.1L221.5 128L192 128C174.3 128 160 113.7 160 96zM288 464L352 464L352 576C352 593.7 337.7 608 320 608C302.3 608 288 593.7 288 576L288 464z"/></svg>
|
||||
|
Before Width: | Height: | Size: 711 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
|
||||
|
Before Width: | Height: | Size: 679 B |
|
|
@ -1,8 +0,0 @@
|
|||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M200,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,11.866,200,16.032,200,21.163Z"/>
|
||||
<path d="M38.741,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,11.866,38.741,16.032,38.741,21.163Z"/>
|
||||
<path d="M200,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,88.53,200,92.696,200,97.827Z"/>
|
||||
<path d="M38.741,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,88.53,38.741,92.696,38.741,97.827Z"/>
|
||||
<path d="M200,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h119.292C195.834,165.195,200,169.36,200,174.491Z"/>
|
||||
<path d="M38.741,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h20.488C34.575,165.195,38.741,169.36,38.741,174.491Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 763 KiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 910 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 706 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 255 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 KiB |
|
|
@ -4,14 +4,19 @@ export function bannerStickyDesktop(responsiveSmall) {
|
|||
if (isInitialized) return;
|
||||
|
||||
let body = document.body;
|
||||
let panel = body.querySelector(".panel-left");
|
||||
|
||||
if (!panel) return;
|
||||
if (!body || body.dataset.template !== 'investigation-summary') return;
|
||||
|
||||
let bannerPage = body.querySelector("#banner--page");
|
||||
let sectionDl = document.querySelector("#section__dl");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!bannerPage || !sectionDl || !footer) return;
|
||||
|
||||
// Stocker la hauteur initiale du banner
|
||||
const bannerInitialHeight = panel.offsetHeight;
|
||||
const bannerInitialHeight = bannerPage.offsetHeight;
|
||||
|
||||
// Stocker la position initiale du footer (calculée une seule fois au chargement)
|
||||
let footerInitialTop = footer.offsetTop;
|
||||
|
||||
function checkScroll() {
|
||||
const screenWidth = window.innerWidth;
|
||||
|
|
@ -19,35 +24,33 @@ export function bannerStickyDesktop(responsiveSmall) {
|
|||
// Vérifier que l'écran est plus grand que responsiveSmall
|
||||
if (screenWidth <= responsiveSmall) {
|
||||
// Réinitialiser le transform si on est en dessous de responsiveSmall
|
||||
panel.style.transform = '';
|
||||
bannerPage.style.transform = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculer la position du bas de la fenêtre
|
||||
const windowBottom = window.scrollY + window.innerHeight;
|
||||
|
||||
// Calculer dynamiquement la position du footer à chaque scroll
|
||||
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
|
||||
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
|
||||
|
||||
// Calculer de combien on dépasse le haut du footer
|
||||
const overlap = windowBottom - footerTop;
|
||||
// Calculer de combien on dépasse le haut du footer (position initiale)
|
||||
const overlap = windowBottom - footerInitialTop;
|
||||
|
||||
if (overlap > 0) {
|
||||
// Le bas de la fenêtre a atteint le haut du footer
|
||||
// Déplacer le banner vers le haut du nombre de pixels de dépassement
|
||||
const translateValue = Math.min(overlap, bannerInitialHeight);
|
||||
panel.style.transform = `translateY(-${translateValue}px)`;
|
||||
bannerPage.style.transform = `translateY(-${translateValue}px)`;
|
||||
} else {
|
||||
// Réinitialiser la position si on n'a pas encore atteint le footer
|
||||
panel.style.transform = 'translateY(0)';
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
window.addEventListener('resize', () => {
|
||||
// Recalculer la position du footer lors du resize
|
||||
if (window.innerWidth > responsiveSmall) {
|
||||
panel.style.transform = '';
|
||||
bannerPage.style.transform = '';
|
||||
footerInitialTop = footer.offsetTop;
|
||||
}
|
||||
checkScroll();
|
||||
});
|
||||
|
|
|
|||
50
assets/js/banner-sticky-mobile.js
Normal file
50
assets/js/banner-sticky-mobile.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
let isInitialized = false;
|
||||
|
||||
export function bannerStickyMobile(responsiveSmall) {
|
||||
if (isInitialized) return;
|
||||
|
||||
let body = document.body;
|
||||
if (!body || body.dataset.template !== 'investigation-summary') return;
|
||||
|
||||
let bannerPage = body.querySelector("#banner--page");
|
||||
let sectionDl = document.querySelector("#section__dl");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!bannerPage || !sectionDl || !footer) return;
|
||||
|
||||
function checkScroll() {
|
||||
const screenWidth = window.innerWidth;
|
||||
|
||||
// Vérifier que l'écran est plus petit que responsiveSmall
|
||||
if (screenWidth >= responsiveSmall) {
|
||||
bannerPage.classList.remove('is-visible');
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
return;
|
||||
}
|
||||
|
||||
const sectionTop = sectionDl.getBoundingClientRect().top;
|
||||
const footerTop = footer.getBoundingClientRect().top;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Activer le banner quand #section__dl arrive en bas de l'écran
|
||||
if (sectionTop <= windowHeight) {
|
||||
bannerPage.classList.add('is-visible');
|
||||
|
||||
// Pousser le banner vers le haut si le footer arrive en bas de l'écran
|
||||
if (footerTop < windowHeight) {
|
||||
const pushUp = windowHeight - footerTop;
|
||||
bannerPage.style.transform = `translateY(-${pushUp}px)`;
|
||||
} else {
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
}
|
||||
} else {
|
||||
bannerPage.classList.remove('is-visible');
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
checkScroll();
|
||||
|
||||
isInitialized = true;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
let isInitialized = false;
|
||||
|
||||
export function btnGroupMobile() {
|
||||
if (isInitialized) return;
|
||||
const btnGroup = document.querySelector(".btn--group__mobile");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!btnGroup) return;
|
||||
|
||||
function checkScroll() {
|
||||
|
||||
const windowHeight = window.innerHeight;
|
||||
const scrollY = window.scrollY;
|
||||
const footerTop = footer.getBoundingClientRect().top;
|
||||
|
||||
if (scrollY > windowHeight * 0.6) {
|
||||
btnGroup.classList.add('is-visible');
|
||||
|
||||
if (footerTop < windowHeight) {
|
||||
btnGroup.classList.remove('is-visible');
|
||||
}
|
||||
} else {
|
||||
btnGroup.classList.remove('is-visible');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
checkScroll();
|
||||
|
||||
isInitialized = true;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
export function initDropdowns(responsiveSmall) {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
|
||||
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
||||
const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
|
||||
if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
|
||||
document.body.classList.add('is-hidden');
|
||||
} else {
|
||||
document.body.classList.remove('is-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
dropdowns.forEach(dropdown => {
|
||||
const trigger = dropdown.querySelector('.dropdown__trigger');
|
||||
const content = dropdown.querySelector('.dropdown__content');
|
||||
|
||||
if (!trigger) return;
|
||||
|
||||
|
||||
|
||||
// Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
|
||||
if (dropdown.querySelector('.modal--share') && content) {
|
||||
content.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Ferme les autres dropdowns ouverts
|
||||
dropdowns.forEach(other => {
|
||||
if (other !== dropdown) {
|
||||
other.classList.remove('is-open', 'dropdown--align-right');
|
||||
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
}
|
||||
});
|
||||
|
||||
const isOpening = !dropdown.classList.contains('is-open');
|
||||
|
||||
if (isOpening) {
|
||||
// Vérifie s'il y a la place à droite
|
||||
const content = dropdown.querySelector('.dropdown__content');
|
||||
const triggerRect = trigger.getBoundingClientRect();
|
||||
const contentWidth = content.offsetWidth || 300;
|
||||
const spaceRight = window.innerWidth - triggerRect.left;
|
||||
|
||||
if (spaceRight < contentWidth) {
|
||||
dropdown.classList.add('dropdown--align-right');
|
||||
} else {
|
||||
dropdown.classList.remove('dropdown--align-right');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle le dropdown actuel
|
||||
dropdown.classList.toggle('is-open');
|
||||
trigger.classList.toggle('is-selected');
|
||||
|
||||
// Gère l'overflow du body sur mobile
|
||||
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
|
||||
});
|
||||
});
|
||||
|
||||
// Ferme tous les dropdowns au clic extérieur
|
||||
document.addEventListener('click', (e) => {
|
||||
dropdowns.forEach(dropdown => {
|
||||
// Ne ferme pas si le clic est dans un dropdown contenant .modal--share
|
||||
if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
});
|
||||
|
||||
// Ferme au press Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,29 +1,43 @@
|
|||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
console.log(header);
|
||||
console.log(buttonToggle);
|
||||
|
||||
if (!header || !buttonToggle) return;
|
||||
buttonToggle.addEventListener("click", () => {
|
||||
const isOpen = document.body.classList.toggle("menu-open");
|
||||
document.body.classList.toggle("menu-open");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// DELETE ?
|
||||
export function headerScrollVisibility() {
|
||||
const header = document.getElementById("site-header");
|
||||
const hero = document.getElementById("hero");
|
||||
|
||||
if (!header) return;
|
||||
|
||||
function checkScroll() {
|
||||
if (window.scrollY >= 300) {
|
||||
header.classList.add("is-visible");
|
||||
if (hero) {
|
||||
// Comportement avec hero
|
||||
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
|
||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||
|
||||
if (heroBottom <= headerHeight) {
|
||||
header.classList.add("is-visible");
|
||||
} else {
|
||||
header.classList.remove("is-visible");
|
||||
}
|
||||
} else {
|
||||
header.classList.remove("is-visible");
|
||||
// Comportement sans hero \
|
||||
if (window.scrollY >= 300) {
|
||||
header.classList.add("is-visible");
|
||||
} else {
|
||||
header.classList.remove("is-visible");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", checkScroll);
|
||||
checkScroll();
|
||||
checkScroll(); // Vérifier au chargement
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,17 +9,11 @@ export function playVideo() {
|
|||
playButton.addEventListener('click', function() {
|
||||
const extract = document.querySelector('.extract');
|
||||
const videoFull = document.querySelector('.video-full');
|
||||
const titleSmall = document.querySelector('.page-title-small');
|
||||
|
||||
|
||||
if (extract) {
|
||||
extract.style.display = 'none';
|
||||
}
|
||||
|
||||
if(titleSmall){
|
||||
titleSmall.style.display = 'none';
|
||||
}
|
||||
|
||||
if (videoFull) {
|
||||
videoFull.style.display = 'block';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
export function panelToggle(responsiveSmall) {
|
||||
const toggleBtn = document.querySelector('#toggle-panel');
|
||||
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
|
||||
const main = document.querySelector('main');
|
||||
const closeBtn = document.querySelector('.panel-left .panel__header');
|
||||
|
||||
function openPanel() {
|
||||
main.classList.add('panel-open');
|
||||
const screenWidth = window.innerWidth;
|
||||
if (screenWidth <= responsiveSmall) {
|
||||
console.log("small screen");
|
||||
document.body.style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
main.classList.remove('panel-open');
|
||||
main.classList.add('panel-close');
|
||||
document.body.style.overflowY = '';
|
||||
}
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openPanel();
|
||||
});
|
||||
}
|
||||
|
||||
if (toggleBtnMobile) {
|
||||
toggleBtnMobile.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openPanel();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function tocMobile(responsiveSmall) {
|
||||
const toc = document.querySelector('#toc');
|
||||
const main = document.querySelector('main');
|
||||
|
||||
if (!toc) return;
|
||||
|
||||
const tocLinks = toc.querySelectorAll('a');
|
||||
|
||||
tocLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (window.innerWidth <= responsiveSmall) {
|
||||
main.classList.remove('panel-open');
|
||||
main.classList.add('panel-close');
|
||||
document.body.style.overflowY = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
|
||||
import { initSwipers } from './swipers.js';
|
||||
|
||||
export function report(responsiveSmall) {
|
||||
if (document.body.dataset.template === 'report') {
|
||||
|
||||
// Initialiser tous les sliders de type before-after
|
||||
initSliderBeforeAfter();
|
||||
|
||||
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
|
||||
if (window.matchMedia(responsiveSmall).matches) {
|
||||
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
|
||||
initSwipers();
|
||||
return;
|
||||
}
|
||||
|
||||
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
|
||||
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
|
||||
initMediaDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initSliderBeforeAfter(container = document){
|
||||
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
|
||||
slidersBeforeAfter.forEach(function (sliderContainer, index) {
|
||||
const sliderInput = sliderContainer.querySelector('.slider');
|
||||
if (sliderInput) {
|
||||
sliderInput.addEventListener('input', (e) => {
|
||||
console.log('slider value:', e.target.value);
|
||||
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initMediaDisplay() {
|
||||
const reportMedias = document.querySelector('#report__medias');
|
||||
if (!reportMedias) return;
|
||||
|
||||
// Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
|
||||
const rootStyles = getComputedStyle(document.documentElement);
|
||||
const headerH = rootStyles.getPropertyValue('--header-h').trim();
|
||||
const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
|
||||
const spacingH = rootStyles.getPropertyValue('--spacing').trim();
|
||||
|
||||
|
||||
// Convertir en pixels si nécessaire
|
||||
const headerHPx = parseFloat(headerH);
|
||||
const paddingBodyPx = parseFloat(paddingBody);
|
||||
const spacingHPx = parseFloat(paddingBody);
|
||||
const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
|
||||
|
||||
const sections = document.querySelectorAll('.section-content');
|
||||
const mediaElements = [];
|
||||
let mediaCounter = 0;
|
||||
|
||||
// 1. Pour chaque section, traiter les .media
|
||||
sections.forEach((section) => {
|
||||
const medias = section.querySelectorAll('.media');
|
||||
|
||||
medias.forEach((media) => {
|
||||
// Générer un ID unique si nécessaire
|
||||
if (!media.id) {
|
||||
media.id = `media-${mediaCounter++}`;
|
||||
}
|
||||
|
||||
// Créer une ancre
|
||||
const anchor = document.createElement('div');
|
||||
anchor.className = 'media-anchor';
|
||||
anchor.dataset.mediaId = media.id;
|
||||
anchor.innerHTML = '<span class="arrow-report">▶</span>'
|
||||
|
||||
// Vérifier si le media est précédé d'un titre
|
||||
let previousElement = media.previousElementSibling;
|
||||
let insertBeforeElement = media;
|
||||
|
||||
// Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
|
||||
if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
|
||||
insertBeforeElement = previousElement;
|
||||
}
|
||||
|
||||
// Insérer l'ancre
|
||||
insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
|
||||
|
||||
// Stocker la référence pour l'observer
|
||||
mediaElements.push({
|
||||
anchor: anchor,
|
||||
media: media.cloneNode(true), // Cloner le media
|
||||
originalMedia: media,
|
||||
section: section
|
||||
});
|
||||
|
||||
// Masquer le media original
|
||||
media.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
|
||||
let currentMediaId = null;
|
||||
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
|
||||
|
||||
function updateActiveMedia() {
|
||||
// Éviter les mises à jour simultanées
|
||||
if (isUpdating) return;
|
||||
|
||||
// Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
|
||||
let closestAnchor = null;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
mediaElements.forEach(({ anchor }) => {
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
|
||||
// Si l'ancre est au-dessus ou à la ligne de déclenchement
|
||||
if (rect.top <= totalOffset) {
|
||||
const distance = totalOffset - rect.top;
|
||||
|
||||
// Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestAnchor = anchor;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Si on a trouvé une ancre
|
||||
if (closestAnchor) {
|
||||
const mediaId = closestAnchor.dataset.mediaId;
|
||||
|
||||
// Si c'est déjà le media affiché, ne rien faire
|
||||
if (currentMediaId === mediaId) return;
|
||||
|
||||
// Trouver le media correspondant
|
||||
const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
|
||||
|
||||
if (mediaData) {
|
||||
isUpdating = true;
|
||||
|
||||
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
|
||||
requestAnimationFrame(() => {
|
||||
// Vider le conteneur
|
||||
reportMedias.innerHTML = '';
|
||||
|
||||
// Ajouter le nouveau media
|
||||
const newMediaElement = mediaData.media.cloneNode(true);
|
||||
reportMedias.appendChild(newMediaElement);
|
||||
currentMediaId = mediaId;
|
||||
|
||||
// Attendre le prochain frame pour initialiser les sliders/swipers
|
||||
requestAnimationFrame(() => {
|
||||
initSliderBeforeAfter(reportMedias);
|
||||
initSwipers(reportMedias);
|
||||
|
||||
// Débloquer les mises à jour après un court délai
|
||||
setTimeout(() => {
|
||||
isUpdating = false;
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
|
||||
if (currentMediaId !== null) {
|
||||
reportMedias.innerHTML = '';
|
||||
currentMediaId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Écouter le scroll
|
||||
let scrollTimeout;
|
||||
window.addEventListener('scroll', () => {
|
||||
// Throttle pour optimiser les performances
|
||||
if (scrollTimeout) return;
|
||||
|
||||
scrollTimeout = setTimeout(() => {
|
||||
updateActiveMedia();
|
||||
scrollTimeout = null;
|
||||
}, 10);
|
||||
});
|
||||
|
||||
// Appeler une première fois au chargement
|
||||
updateActiveMedia();
|
||||
|
||||
// 4. Gérer les sections sans media immédiat
|
||||
// Observer aussi les sections elles-mêmes
|
||||
const sectionObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const section = entry.target;
|
||||
|
||||
// Vérifier si cette section a un media juste après son premier titre
|
||||
const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
|
||||
if (firstTitle) {
|
||||
let nextElement = firstTitle.nextElementSibling;
|
||||
|
||||
// Chercher le prochain élément qui n'est pas une ancre
|
||||
while (nextElement && nextElement.classList.contains('media-anchor')) {
|
||||
nextElement = nextElement.nextElementSibling;
|
||||
}
|
||||
|
||||
// Si le prochain élément n'est pas un .media, vider #report__medias
|
||||
if (!nextElement || !nextElement.classList.contains('media')) {
|
||||
reportMedias.innerHTML = '';
|
||||
currentMediaId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
root: null,
|
||||
rootMargin: `-${totalOffset}px 0px 0px 0px`,
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
// Observer toutes les sections
|
||||
sections.forEach(section => {
|
||||
sectionObserver.observe(section);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,15 +1,10 @@
|
|||
import { headerToggle, headerScrollVisibility } from './header.js';
|
||||
import { copyLink } from './share.js';
|
||||
import { panelToggle, tocMobile } from './panel.js';
|
||||
import { btnGroupMobile } from './btn-group-mobile.js';
|
||||
import { bannerStickyMobile } from './banner-sticky-mobile.js';
|
||||
import { bannerStickyDesktop } from './banner-sticky-desktop.js';
|
||||
import { themeToggle } from './themeToggle.js';
|
||||
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';
|
||||
|
||||
|
||||
const responsiveMedium = 1080;
|
||||
const responsiveSmall = 768;
|
||||
|
|
@ -17,18 +12,11 @@ const responsiveSmall = 768;
|
|||
window.onload = async function () {
|
||||
console.log("SCRIPT LOADED");
|
||||
headerToggle();
|
||||
panelToggle(responsiveSmall);
|
||||
themeToggle();
|
||||
|
||||
|
||||
report(responsiveSmall);
|
||||
|
||||
tocMobile(responsiveSmall);
|
||||
headerScrollVisibility();
|
||||
copyLink();
|
||||
btnGroupMobile(responsiveSmall)
|
||||
themeToggle();
|
||||
bannerStickyMobile(responsiveSmall);
|
||||
bannerStickyDesktop(responsiveSmall);
|
||||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall);
|
||||
initSwipers();
|
||||
}
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
export function copyLink() {
|
||||
let buttons = document.querySelectorAll('.copy-link button');
|
||||
buttons.forEach(function (button, index) {
|
||||
let input = button.parentNode.querySelector("input");
|
||||
let link = input.value;
|
||||
let link = button.parentNode.querySelector("input").value;
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
input.value = 'Lien copié !';
|
||||
input.classList.add('is-copied');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Lien copié';
|
||||
setTimeout(() => {
|
||||
input.value = link;
|
||||
input.classList.remove('is-copied');
|
||||
button.textContent = originalText;
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
console.error('Erreur lors de la copie:', err);
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
||||
|
||||
export function initSwipers(container = document) {
|
||||
const sliders = container.querySelectorAll('.swiper');
|
||||
|
||||
if (sliders.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
sliders.forEach((sliderElement) => {
|
||||
// Éviter de réinitialiser un swiper déjà initialisé
|
||||
if (sliderElement.swiper) {
|
||||
return;
|
||||
}
|
||||
|
||||
const swiper = new Swiper(sliderElement, {
|
||||
// Optional parameters
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
speed: 600,
|
||||
|
||||
// Touch/Swipe settings
|
||||
touchRatio: 1,
|
||||
touchAngle: 45,
|
||||
grabCursor: true,
|
||||
simulateTouch: true,
|
||||
allowTouchMove: true,
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: sliderElement.querySelector('.swiper-button-next'),
|
||||
prevEl: sliderElement.querySelector('.swiper-button-prev'),
|
||||
},
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
el: sliderElement.querySelector('.swiper-pagination'),
|
||||
clickable: true,
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
// Accessibility
|
||||
a11y: {
|
||||
prevSlideMessage: 'Investigation précédente',
|
||||
nextSlideMessage: 'Investigation suivante',
|
||||
paginationBulletMessage: 'Aller à l\'investigation {{index}}',
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
title: Dossier
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
fields:
|
||||
description:
|
||||
label: Description
|
||||
type: textarea
|
||||
size: medium
|
||||
buttons: false
|
||||
cover:
|
||||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
help: Image utilisée dans la liste des dossiers
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
title: Dossiers
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
sections:
|
||||
folders:
|
||||
type: pages
|
||||
text: "{{ page.title }}"
|
||||
info: "{{ page.description }}"
|
||||
layout: cards
|
||||
size: huge
|
||||
search: true
|
||||
image:
|
||||
cover: true
|
||||
ratio: 12/7
|
||||
template: folder
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
title: Investigation Summary
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
columns:
|
||||
- width: 2/6
|
||||
sections:
|
||||
createdSection:
|
||||
type: fields
|
||||
fields:
|
||||
created:
|
||||
label: Première publication
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
default: today
|
||||
width: 1/2
|
||||
reportSection:
|
||||
label: Rapport
|
||||
type: pages
|
||||
template: report
|
||||
- width: 4/6
|
||||
fields:
|
||||
chapo:
|
||||
label: Chapo
|
||||
type: writer
|
||||
nodes: false
|
||||
buttons: false
|
||||
cover:
|
||||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
help: Image utilisée dans les listes d'enquêtes
|
||||
heroType:
|
||||
label: Type de hero
|
||||
type: select
|
||||
options:
|
||||
image: Image simple
|
||||
slider: Slider d'images
|
||||
video: Vidéo
|
||||
default: image
|
||||
width: 1/3
|
||||
heroImages:
|
||||
label: Images hero
|
||||
type: files
|
||||
multiple: true
|
||||
layout: cards
|
||||
when:
|
||||
heroType: image
|
||||
heroType: slider
|
||||
videoExtractUrl:
|
||||
label: URL vidéo d'extrait (autoplay)
|
||||
type: url
|
||||
when:
|
||||
heroType: video
|
||||
width: 1/2
|
||||
videoFullUrl:
|
||||
label: URL vidéo complète (YouTube embed)
|
||||
type: url
|
||||
when:
|
||||
heroType: video
|
||||
width: 1/2
|
||||
synthesis:
|
||||
label: Synthèse
|
||||
type: textarea
|
||||
size: large
|
||||
buttons: false
|
||||
metadataTab:
|
||||
label: Métadonnées
|
||||
icon: table
|
||||
fields:
|
||||
folder:
|
||||
label: Dossier
|
||||
type: select
|
||||
options: query
|
||||
query:
|
||||
fetch: site.find('dossiers').children
|
||||
text: "{{ page.title }}"
|
||||
value: "{{ page.slug }}"
|
||||
empty: Aucun dossier
|
||||
width: 1/3
|
||||
incidentDate:
|
||||
label: Date de l'incident
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
width: 1/3
|
||||
incidentLocation:
|
||||
label: Lieu de l'incident
|
||||
type: text
|
||||
width: 1/3
|
||||
incidentConsequences:
|
||||
label: Conséquence(s)
|
||||
type: text
|
||||
width: 1/3
|
||||
keywords:
|
||||
label: Mots-clés
|
||||
type: tags
|
||||
width: 1/2
|
||||
methodology:
|
||||
label: Méthodologie
|
||||
type: tags
|
||||
width: 1/2
|
||||
partners:
|
||||
label: Partenaires
|
||||
type: structure
|
||||
width: 1/2
|
||||
fields:
|
||||
name:
|
||||
label: Nom
|
||||
type: text
|
||||
link:
|
||||
label: Lien
|
||||
type: url
|
||||
team:
|
||||
label: Équipe Index
|
||||
type: tags
|
||||
width: 1/2
|
||||
relatedInvestigations:
|
||||
label: Enquêtes en lien
|
||||
type: pages
|
||||
multiple: true
|
||||
query: site.find('enquetes').children
|
||||
|
|
@ -81,3 +81,24 @@ tabs:
|
|||
type: link
|
||||
options:
|
||||
- url
|
||||
line:
|
||||
type: line
|
||||
indexTeam:
|
||||
label: Équipe Index
|
||||
type: structure
|
||||
columns:
|
||||
responsability:
|
||||
width: 1/2
|
||||
names:
|
||||
width: 1/2
|
||||
fields:
|
||||
responsability:
|
||||
label: Responsabilité
|
||||
type: text
|
||||
width: 1/2
|
||||
names:
|
||||
label: Nom
|
||||
type: entries
|
||||
width: 1/2
|
||||
field:
|
||||
type: text
|
||||
|
|
@ -14,4 +14,3 @@ tabs:
|
|||
image:
|
||||
cover: true
|
||||
ratio: 12/7
|
||||
template: investigation-summary
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
return [
|
||||
'debug' => true,
|
||||
'locale' => 'fr_FR.UTF-8',
|
||||
'date.handler' => 'intl',
|
||||
'thumbs' => [
|
||||
'quality' => 80,
|
||||
'presets' => [
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<?php snippet('back-to-top') ?>
|
||||
</main>
|
||||
<footer id="site-footer">
|
||||
<div class="site-footer__container">
|
||||
<div class="footer__newsletter">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="site-header__inner">
|
||||
<h1 id="site-title">
|
||||
<a
|
||||
href="<?= $site->url() ?>"
|
||||
href="https://www.index.ngo/"
|
||||
aria-label="Retour à l’accueil"
|
||||
title="aller au site d'Index"
|
||||
>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<nav id="nav-highlight">
|
||||
<ul>
|
||||
<li><a href="/enquetes">Enquêtes</a></li>
|
||||
<li><a href="/impacts">Impact</a></li>
|
||||
<li><a href="#">Impact</a></li>
|
||||
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -65,3 +65,4 @@
|
|||
</div>
|
||||
</header>
|
||||
<?php snippet('nav') ?>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="modal--share">
|
||||
|
||||
<div class="modal-title">
|
||||
<p>Partager</p>
|
||||
<button><span class="close" w3-include-html="/assets/icons/close.svg"></span></button>
|
||||
</div>
|
||||
|
||||
<ul class="socials">
|
||||
<li class="socials__x">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@ de la vérité et de la justice.</p>
|
|||
<ul>
|
||||
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
|
||||
<li class="highlight"><a href="/enquetes">Enquêtes</a></li>
|
||||
<li class="highlight"><a href="/impacts">Impact</a></li>
|
||||
<li><a href="/dossiers">Dossiers</a></li>
|
||||
<li class="highlight"><a href="#">Impact</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">À propos</a></li>
|
||||
<li><a href="#">Ressources</a></li>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,2 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
|
||||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
<p class="page__type">Dossier</p>
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<?php if ($page->description()->isNotEmpty()): ?>
|
||||
<div class="description">
|
||||
<p><?= $page->description() ?></p>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
<?php
|
||||
// Récupérer les enquêtes associées à ce dossier
|
||||
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
|
||||
return $investigation->folder()->value() === $page->slug();
|
||||
});
|
||||
?>
|
||||
|
||||
|
||||
<div class="btn--group" id="nav-folder">
|
||||
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
||||
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
||||
</div>
|
||||
|
||||
<div class="content-folder">
|
||||
|
||||
|
||||
<?php if ($investigations->isNotEmpty()): ?>
|
||||
<section class="container-cards" id="section__investigations">
|
||||
|
||||
<h3 class="container__title">2 enquêtes</h3>
|
||||
|
||||
<?php foreach ($investigations as $investigation): ?>
|
||||
<article class="card--article">
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($investigation->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<dl class="dl">
|
||||
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Date de l'incident</dt>
|
||||
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($partners = $investigation->partners()->toStructure()): ?>
|
||||
<?php if ($partners->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>
|
||||
<?php $partnerNames = [] ?>
|
||||
<?php foreach ($partners as $partner): ?>
|
||||
<?php $partnerNames[] = $partner->name()->value() ?>
|
||||
<?php endforeach ?>
|
||||
<?= implode(', ', $partnerNames) ?>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l'incident</dt>
|
||||
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<?php if ($keywords = $investigation->keywords()->split()): ?>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</section>
|
||||
<?php else: ?>
|
||||
<p>Aucune enquête associée à ce dossier pour le moment.</p>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
<section id="section__impacts">
|
||||
|
||||
|
||||
<h3 class="container__title">4 impacts</h3>
|
||||
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Médiatique</p>
|
||||
|
||||
<?php snippet('card-open-graph') ?>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Evènement</a></li>
|
||||
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<div class="description-medium">
|
||||
<p><?= $page->chapo() ?></p>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
<section class="container-cards">
|
||||
|
||||
|
||||
|
||||
<?php foreach ($page->children()->listed() as $folder): ?>
|
||||
<article class="card--folder">
|
||||
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($folder->description()->isNotEmpty()): ?>
|
||||
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
// Compter les enquêtes associées à ce dossier
|
||||
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
|
||||
return $investigation->folder()->value() === $folder->slug();
|
||||
})->count();
|
||||
?>
|
||||
|
||||
<ul>
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $folder->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,295 +1,10 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<section class="section--home" id="home__hero">
|
||||
|
||||
<div class="section--inner">
|
||||
<p class="baseline">Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
||||
|
||||
<button class="btn--bold-inline">
|
||||
<a href="#">
|
||||
<span class="text">En savoir plus</span>
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="section--home" id="home__investigations">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="col-left">
|
||||
<?php $investigationsPage = site()->find('enquetes'); ?>
|
||||
<h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2>
|
||||
<?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?>
|
||||
<p class="description-section">
|
||||
<?= $investigationsPage->chapo() ?>
|
||||
</p>
|
||||
<?php endif ?>
|
||||
<button class="btn--bold-inline">
|
||||
<a href="/enquetes">
|
||||
<span class="text">Voir les enquêtes</span>
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
|
||||
<div class="home-investigations-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<?php
|
||||
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
|
||||
foreach ($latestInvestigations as $investigation):
|
||||
?>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<article class="card--article">
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
|
||||
|
||||
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
|
||||
<?php if ($investigation->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<?php if ($keywords = $investigation->keywords()->split()): ?>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($investigation->pinned()->toBool()): ?>
|
||||
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
|
||||
<?php endif ?>
|
||||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
|
||||
</div> <!-- swiper-wrapper -->
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div> <!-- home-investigations-slider -->
|
||||
|
||||
</div> <!-- col-right-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="section--home" id="home__impacts">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="col-left">
|
||||
<?php $impactsPage = site()->find('impacts'); ?>
|
||||
<h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2>
|
||||
<?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
|
||||
<p class="description-section">
|
||||
<?= $impactsPage->chapo() ?>
|
||||
</p>
|
||||
<?php endif ?>
|
||||
<button class="btn--bold-inline">
|
||||
<a href="/impacts">
|
||||
<span class="text">Voir les impacts</span>
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Médiatique</p>
|
||||
|
||||
<?php snippet('card-open-graph') ?>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div><!-- col-right -->
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="section--home" id="home__folders">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="col-left">
|
||||
<?php $foldersPage = site()->find('dossiers'); ?>
|
||||
<h2 class="title-section"><?= $foldersPage ? $foldersPage->title() : 'Dossiers' ?></h2>
|
||||
<?php if ($foldersPage && $foldersPage->chapo()->isNotEmpty()): ?>
|
||||
<p class="description-section">
|
||||
<?= $foldersPage->chapo() ?>
|
||||
</p>
|
||||
<?php endif ?>
|
||||
<button class="btn--bold-inline">
|
||||
<a href="/dossiers">
|
||||
<span class="text">Voir les dossiers</span>
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
|
||||
<?php
|
||||
$latestFolders = site()->find('dossiers') ? site()->find('dossiers')->children()->listed()->sortBy('created', 'desc')->limit(2) : [];
|
||||
if (count($latestFolders) > 0):
|
||||
foreach ($latestFolders as $folder):
|
||||
?>
|
||||
<article class="card--folder">
|
||||
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($folder->description()->isNotEmpty()): ?>
|
||||
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
// Compter les enquêtes associées à ce dossier
|
||||
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
|
||||
return $investigation->folder()->value() === $folder->slug();
|
||||
})->count();
|
||||
?>
|
||||
|
||||
<ul>
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $folder->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
<?php endif ?>
|
||||
|
||||
</div> <!-- col-right -->
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir.
|
||||
Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine.
|
||||
Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits.
|
||||
Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche.
|
||||
</p>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,129 +1,2 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<div class="description-medium">
|
||||
<p><?= $page->chapo() ?></p>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Filtrer par type</p></button>
|
||||
<div class="dropdown__content">
|
||||
<ul>
|
||||
<li><button type="button" data-filter="france">Médiatique</button></li>
|
||||
<li><button type="button" data-filter="cisjordanie">Judiciaire</button></li>
|
||||
<li><button type="button" data-filter="etats-unis">Institutionnel</button></li>
|
||||
<li><button type="button" data-filter="gaza">Public</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page__content">
|
||||
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Médiatique</p>
|
||||
|
||||
<?php snippet('card-open-graph') ?>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Evènement</a></li>
|
||||
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,404 +1,285 @@
|
|||
<?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>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
<div class="dropdown__content">
|
||||
<?php snippet('modal-share') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<p class="tag-inline">Enquête</p>
|
||||
<h2 class="page-title">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
|
||||
<p class="date-publish"></p>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="panel-left" id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<li><a href="#section__folder">Dossier</a></li>
|
||||
<li><a href="#section__related-articles">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group">
|
||||
<?php if ($report): ?>
|
||||
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
<div class="dropdown dropdown--position-panel">
|
||||
<button class="dropdown__trigger btn--bold-inline no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
<div class="dropdown__content">
|
||||
<?php snippet('modal-share') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<header class="page__header">
|
||||
<p class="page__type">Enquête</p>
|
||||
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
|
||||
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $page->chapo()->inline() ?></p>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__content">
|
||||
|
||||
|
||||
<?php if ($page->heroType()->value() == 'image'): ?>
|
||||
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
|
||||
<!-- HERO IMAGE SIMPLE -->
|
||||
<div id="hero">
|
||||
<figure>
|
||||
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($heroImage->caption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $heroImage->caption() ?></figcaption>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php elseif ($page->heroType()->value() == 'slider'): ?>
|
||||
<?php if ($heroImages = $page->heroImages()->toFiles()): ?>
|
||||
<!-- HERO SLIDER -->
|
||||
<div id="hero" class="hero-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($heroImages as $image): ?>
|
||||
<div class="swiper-slide">
|
||||
<!-- HERO IMAGE SIMPLE ------------------------------ -->
|
||||
<!-- <div id="hero">
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $image->caption() ?></figcaption>
|
||||
<?php endif ?>
|
||||
<figcaption>Ici la légende de l’image. À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</figcaption>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<!-- HERO SLIDER ------------------------------ -->
|
||||
<!-- <div id="hero" class="hero-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<figure>
|
||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
||||
</figure>
|
||||
<figcaption>Ici la légende de l'image 1. À partir d'images exclusives, l'analyse conjointe de B'Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu'ils ne présentaient aucun danger.</figcaption>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<figure>
|
||||
<img src="/assets/images/kanaky-visuel-1.png">
|
||||
</figure>
|
||||
<figcaption>Ici la légende de l'image 2</figcaption>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
<figcaption>Ici la légende de l'image 3</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- HERO VIDEO ------------------------------ -->
|
||||
<div id="hero" class="hero-video">
|
||||
|
||||
<div class="player-container">
|
||||
|
||||
<div class="extract">
|
||||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/07/Jumaa_Site-web-16-9.mp4"></video>
|
||||
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
|
||||
</div>
|
||||
<div class="video-full">
|
||||
<iframe id="youtube-vue-player-rhTyqvaQE" rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mort par noyade de Jumaa al-Hasan, exilé syrien : la police mise en cause" width="480" height="320" src="https://www.youtube.com/embed/HuH8NEwn0-k?autoplay=false&loop=1&controls=1&modestbranding=1&enablejsapi=1&origin=https%3A%2F%2Fwww.index.ngo&widgetid=1&forigin=https%3A%2F%2Fwww.index.ngo%2Fenquetes%2Fmort-par-noyade-de-jumaa-al-hasan-la-police-mise-en-cause%2F&aoriginsup=0&gporigin=https%3A%2F%2Fwww.index.ngo%2F&vf=1"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php elseif ($page->heroType()->value() == 'video'): ?>
|
||||
<!-- HERO VIDEO -->
|
||||
<div id="hero" class="hero-video">
|
||||
<div class="player-container">
|
||||
|
||||
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
|
||||
<div class="extract">
|
||||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $page->videoExtractUrl() ?>"></video>
|
||||
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php if ($page->videoFullUrl()->isNotEmpty()): ?>
|
||||
<div class="video-full">
|
||||
<iframe rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoFullUrl() ?>"></iframe>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
<dl class="section__article" id="section__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>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->incidentLocation()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l'incident</dt>
|
||||
<dd><?= $page->incidentLocation()->esc() ?></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->incidentConsequences()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Conséquences</dt>
|
||||
<dd><?= $page->incidentConsequences()->esc() ?></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($keywords = $page->keywords()->split()): ?>
|
||||
<?php if (count($keywords) > 0): ?>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($methodology = $page->methodology()->split()): ?>
|
||||
<?php if (count($methodology) > 0): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Méthodologie</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<?php foreach ($methodology as $method): ?>
|
||||
<li><?= esc($method) ?></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($team = $page->team()->split()): ?>
|
||||
<?php if (count($team) > 0): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Équipe</dt>
|
||||
<dd><?= implode(', ', array_map('esc', $team)) ?></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($partners = $page->partners()->toStructure()): ?>
|
||||
<?php if ($partners->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>
|
||||
<?php $partnerLinks = [] ?>
|
||||
<?php foreach ($partners as $partner): ?>
|
||||
<?php if ($partner->link()->isNotEmpty()): ?>
|
||||
<?php $partnerLinks[] = '<a href="' . $partner->link() . '" target="_blank">' . $partner->name()->esc() . '</a>' ?>
|
||||
<?php else: ?>
|
||||
<?php $partnerLinks[] = $partner->name()->esc() ?>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
<?= implode(', ', $partnerLinks) ?>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?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>
|
||||
</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="section__article" id="section__impacts">
|
||||
<h3 class="section__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>
|
||||
<div class="content">
|
||||
<p>12 articles et reprises</p>
|
||||
<p>1.5M de vues cumulées</p>
|
||||
</div>
|
||||
<details class="open-graph__details">
|
||||
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
|
||||
<div class="open-graph__inner">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div 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>
|
||||
|
||||
|
||||
<?php
|
||||
// Récupérer les enquêtes en lien
|
||||
$relatedInvestigations = $page->relatedInvestigations()->toPages();
|
||||
if ($relatedInvestigations->isEmpty()) {
|
||||
// Si pas d'enquêtes liées définies, prendre les 3 dernières enquêtes (sauf la page actuelle)
|
||||
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation-summary')->not($page)->listed()->limit(3);
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
// KIRBY TO DO : récupérer s’il y a un dossier mr
|
||||
?>
|
||||
|
||||
<?php
|
||||
// Récupérer le dossier associé à cette investigation
|
||||
$folderSlug = $page->folder()->value();
|
||||
$folder = null;
|
||||
if (!empty($folderSlug) && site()->find('dossiers')) {
|
||||
$folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first();
|
||||
}
|
||||
|
||||
if ($folder):
|
||||
?>
|
||||
<aside class="section__article" id="section__folder">
|
||||
<h3 class="section__title">Dans le dossier</h3>
|
||||
|
||||
<article class="card--folder">
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($folder->description()->isNotEmpty()): ?>
|
||||
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
// Compter les enquêtes associées à ce dossier
|
||||
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
|
||||
return $investigation->folder()->value() === $folder->slug();
|
||||
})->count();
|
||||
?>
|
||||
|
||||
<ul>
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $folder->url() ?>" target="_blank" aria-hidden="true"></a>
|
||||
|
||||
</article>
|
||||
|
||||
</aside>
|
||||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?php if ($relatedInvestigations->isNotEmpty()): ?>
|
||||
<aside class="section__article" id="section__related-articles">
|
||||
<h3 class="section__title">En lien</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">
|
||||
<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>
|
||||
|
||||
<?php if ($related->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $related->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
<!-- <figure>
|
||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
||||
</figure> -->
|
||||
</div>
|
||||
|
||||
<?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>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
||||
|
||||
<div id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<li><a href="#">Synthèse</a></li>
|
||||
<li><a href="#">Impacts</a></li>
|
||||
<li><a href="#">En lien</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold"><a href="/enquetes/enquete-1-full">Lire le rapport</a></button>
|
||||
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="share-banner__desktop">
|
||||
<?php snippet('modal-share') ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p class="section__article" id="section__short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l’incident</dt>
|
||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Conséquences</dt>
|
||||
<dd>Mort</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Méthodologie</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>Reconstitution 3D</li>
|
||||
<li>Frame-match</li>
|
||||
<li>Analyse audiovisuelle</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Équipe</dt>
|
||||
<dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi, Basile Trouillet, Francesco Sebregondi</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd><a href="#" target="_blank">B’Tselem</a></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date de publication</dt>
|
||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="section__article" id="section__synthese">
|
||||
<h3 class="section__title">Synthèse</h3>
|
||||
|
||||
<p>Le 10 juin 2025, lors d’un raid de grande envergure dans la vieille ville de Naplouse, les forces armées israéliennes ont tué deux Palestiniens : les frères Nidal et Khaled ‘Amirah.
|
||||
</p>
|
||||
<p>
|
||||
Suite à l’incident, l’armée israélienne a affirmé dans un communiqué que les hommes étaient des « terroristes » qui avaient essayé de s’emparer de l’arme d’un soldat et en avaient blessé quatre autres. Les soldats auraient alors riposté en tirant sur les deux hommes, les tuant tous les deux.
|
||||
</p>
|
||||
<p>
|
||||
Cependant, l’analyse vidéo et les témoignages recueillis contredisent cette version des faits. Une enquête menée conjointement par B’Tselem et Index révèle que les frères ‘Amirah n’ont à aucun moment posé de danger pour les soldats impliqués. Pourtant, Khaled a été exécuté à bout portant alors qu’il était maintenu au sol par plusieurs soldats armés, tandis que son frère Nidal a été abattu par un tir dans le dos. Les soldats ont également empêché les secouristes présents de leur prêter assistance.
|
||||
</p>
|
||||
<h4>Un sous-titre ici pour tester</h4>
|
||||
<p>
|
||||
Les corps de Nidal et de Khaled ‘Amirah sont toujours détenus par les forces armées israéliennes.
|
||||
</p>
|
||||
<p>
|
||||
À Naplouse comme à Jénine – où des soldats ont été filmés le mois dernier en train d’exécuter deux Palestiniens qui s’étaient rendus – ces images révèlent une politique de “tir à vue”, qui permet à l’armée israélienne de faire un usage sans aucun frein de la force létale contre les Palestiniens. Depuis octobre 2023, Israël a tué plus de 1 000 Palestiniens en Cisjordanie occupée.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section__article" id="section__impacts">
|
||||
<h3 class="section__title">Impacts</h3>
|
||||
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<p>12 articles et reprises</p>
|
||||
<p>1.5M de vues cumulées</p>
|
||||
</div>
|
||||
<details class="open-graph__details">
|
||||
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
|
||||
<div class="open-graph__inner">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d’enquêtes récentes au Festival du Réel 2025. <a class="see-more" href="#">Voir plus</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="section__article" id="section__en-lien">
|
||||
<h3 class="section__title">En lien</h3>
|
||||
|
||||
<article class="card--article-small">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card--article-small">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">La mort par noyade de Jumaa al-Hasan</a></h4>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card--article-small">
|
||||
<figure>
|
||||
<img src="/assets/images/kanaky-visuel-1.png">
|
||||
</figure>
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</a></h4>
|
||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
281
site/templates/investigation.php
Normal file
281
site/templates/investigation.php
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
|
||||
|
||||
<aside id="rapport__aside">
|
||||
<input type="radio" id="tab-print" name="tabs-aside" value="toc" checked />
|
||||
<input type="radio" id="tab-toc" name="tabs-aside" value="toc" checked />
|
||||
|
||||
<div class="tabs">
|
||||
<label class="tab" for="tab-print"><span class="icon"><?= svg('assets/icons/printer.svg') ?></span></label>
|
||||
<label class="tab" for="tab-toc">Table des matières</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-aside">
|
||||
|
||||
<nav id="toc">
|
||||
<ul>
|
||||
<li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</a></li>
|
||||
<li class="toc-level-1"><a href="#rappel-faits">Rappel des faits</a></li>
|
||||
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
|
||||
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
|
||||
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
|
||||
<li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
|
||||
<li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
|
||||
<li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
|
||||
<li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
|
||||
<li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
|
||||
<li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
|
||||
<li class="toc-level-1"><a href="#observations">3. Observations</a></li>
|
||||
<li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
|
||||
<li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
|
||||
<li class="toc-level-1"><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="print-features">
|
||||
<p>Paramétrage impression</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button id="download-pdf" class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télégarcher le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
<article id="rapport">
|
||||
<header class="rapport__header">
|
||||
<div class="rapport__title-group">
|
||||
<p class="tag-inline">Rapport</p>
|
||||
<h1 class="title">Rapport de contre-expertise</h1>
|
||||
<h2 class="subtitle">sur les circonstances de la mort d’Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<figure class="rapport__figure"><img src="/assets/images/image-rapport.png"></figure>
|
||||
|
||||
<dl class="rapport__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Auteurs du rapport</dt>
|
||||
<dd>INDEX Investigation</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date du rapport</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<div class="thumbnail--group">
|
||||
<div class="thumbnail thumbnail-pdf">
|
||||
<figure><img src="/assets/images/cover-rapport.png"></figure>
|
||||
<p class="thumbnail__title"><a href="#">Télégarcher le PDF</a></p>
|
||||
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
|
||||
<a class="link-block" href="#"></a>
|
||||
</div>
|
||||
<div class="thumbnail thumbnail-summary">
|
||||
<figure><img src="/assets/images/Nidal-Khaled-Amirah.png"></figure>
|
||||
<p class="thumbnail__title"><a href="#">Voir la synthèse</a></p>
|
||||
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télégarcher le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
|
||||
<span class="icon"><?= svg('assets/icons/play.svg') ?></span>
|
||||
<span class="text">Voir la synthèse</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="rapport__content">
|
||||
|
||||
<div class="section-content" id="auteurs">
|
||||
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
||||
|
||||
|
||||
<p>
|
||||
INDEX est une ONG d’investigation et d’expertise indépendante,
|
||||
à but non lucratif, déclarée en tant qu’association Loi 1901
|
||||
(RNA W751258265), depuis 2020.
|
||||
</p>
|
||||
<p>
|
||||
Spécialisée dans l’investigation en sources ouvertes, l’analyse de
|
||||
données média et la reconstitution numérique en 3D, l’ONG INDEX est
|
||||
issue du laboratoire de recherche international Forensic Architecture,
|
||||
basé à l’université Goldsmiths de Londres. Elle est membre du réseau
|
||||
international Investigative Commons.
|
||||
</p>
|
||||
<p>
|
||||
Les collaborateurs de l’ONG INDEX ayant contribué à la production
|
||||
du présent rapport sont : </p>
|
||||
<ul>
|
||||
<li>Analyse et modélisation numérique : Nadav Joffe, Guillaume Seyller</li>
|
||||
<li>Conception graphique : Léonie Montjarret</li>
|
||||
<li>Direction : Francesco Sebregondi</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p>
|
||||
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
||||
lors d'une intervention policière à Châlette-sur-Loing.
|
||||
</p>
|
||||
<p>
|
||||
Atteint de schizophrénie dysthymique et suivi pour des troubles
|
||||
bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
|
||||
avec un couteau le 19 août 2017, déclenchant une alerte auprès
|
||||
des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
|
||||
Loing, M. BICO, dans un état d’agitation extrême et tenant des
|
||||
propos incohérents, s'était enfermé dans son véhicule, exhibant un
|
||||
couteau. Deux équipages de police, soit sept agents, sont intervenus.
|
||||
Face à son refus de se rendre, les policiers ont tenté de le maîtriser
|
||||
en usant de gaz lacrymogène et en tentant de briser le pare-brise
|
||||
de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
|
||||
plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
|
||||
déplacé un second véhicule de police qui obstruait la voie située sur
|
||||
sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
|
||||
policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
|
||||
mortellement atteint par deux projectiles et son décès a été constaté
|
||||
sur place. L'incident a été observé par plusieurs témoins et filmé sous
|
||||
divers angles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content" id="rappel-faits">
|
||||
<h3 class="section-title">MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||
|
||||
<p>
|
||||
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
||||
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
||||
à Vénissieux (69), dans la proche banlieue de Lyon. Nous avons procédé
|
||||
à une modélisation numérique en 3D dudit parking et des bâtiments qui
|
||||
l’entourent.</p>
|
||||
|
||||
|
||||
<div class="container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-1-a.png"></figure>
|
||||
<!-- <figure><img src="/assets/images/adam-raihane/fig-1-b.png"></figure> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p>
|
||||
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
||||
lors d'une intervention policière à Châlette-sur-Loing.
|
||||
</p>
|
||||
<p>
|
||||
Atteint de schizophrénie dysthymique et suivi pour des troubles
|
||||
bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
|
||||
avec un couteau le 19 août 2017, déclenchant une alerte auprès
|
||||
des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
|
||||
Loing, M. BICO, dans un état d’agitation extrême et tenant des
|
||||
propos incohérents, s'était enfermé dans son véhicule, exhibant un
|
||||
couteau. Deux équipages de police, soit sept agents, sont intervenus.
|
||||
Face à son refus de se rendre, les policiers ont tenté de le maîtriser
|
||||
en usant de gaz lacrymogène et en tentant de briser le pare-brise
|
||||
de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
|
||||
plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
|
||||
déplacé un second véhicule de police qui obstruait la voie située sur
|
||||
sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
|
||||
policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
|
||||
mortellement atteint par deux projectiles et son décès a été constaté
|
||||
sur place. L'incident a été observé par plusieurs témoins et filmé sous
|
||||
divers angles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p>
|
||||
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
||||
lors d'une intervention policière à Châlette-sur-Loing.
|
||||
</p>
|
||||
<p>
|
||||
Atteint de schizophrénie dysthymique et suivi pour des troubles
|
||||
bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
|
||||
avec un couteau le 19 août 2017, déclenchant une alerte auprès
|
||||
des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
|
||||
Loing, M. BICO, dans un état d’agitation extrême et tenant des
|
||||
propos incohérents, s'était enfermé dans son véhicule, exhibant un
|
||||
couteau. Deux équipages de police, soit sept agents, sont intervenus.
|
||||
Face à son refus de se rendre, les policiers ont tenté de le maîtriser
|
||||
en usant de gaz lacrymogène et en tentant de briser le pare-brise
|
||||
de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
|
||||
plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
|
||||
déplacé un second véhicule de police qui obstruait la voie située sur
|
||||
sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
|
||||
policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
|
||||
mortellement atteint par deux projectiles et son décès a été constaté
|
||||
sur place. L'incident a été observé par plusieurs témoins et filmé sous
|
||||
divers angles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p>
|
||||
Le 19 août 2017, vers 17h, M. Luis Manuel BICO, 48 ans, a été tué
|
||||
lors d'une intervention policière à Châlette-sur-Loing.
|
||||
</p>
|
||||
<p>
|
||||
Atteint de schizophrénie dysthymique et suivi pour des troubles
|
||||
bipolaires depuis l’âge de 20 ans, M. BICO a menacé une personne
|
||||
avec un couteau le 19 août 2017, déclenchant une alerte auprès
|
||||
des forces de l’ordre. Localisé au 3 rue Maurice Ravel à Châlettesur-
|
||||
Loing, M. BICO, dans un état d’agitation extrême et tenant des
|
||||
propos incohérents, s'était enfermé dans son véhicule, exhibant un
|
||||
couteau. Deux équipages de police, soit sept agents, sont intervenus.
|
||||
Face à son refus de se rendre, les policiers ont tenté de le maîtriser
|
||||
en usant de gaz lacrymogène et en tentant de briser le pare-brise
|
||||
de son véhicule avec leurs bâtons. M. BICO, au volant, a reculé à
|
||||
plusieurs reprises, percutant un véhicule de police. Lorsqu'un agent a
|
||||
déplacé un second véhicule de police qui obstruait la voie située sur
|
||||
sa gauche, M. BICO a redémarré en tentant de fuir. À ce moment, trois
|
||||
policiers ont ouvert le feu, tirant 18 fois sur le véhicule. M. BICO a été
|
||||
mortellement atteint par deux projectiles et son décès a été constaté
|
||||
sur place. L'incident a été observé par plusieurs témoins et filmé sous
|
||||
divers angles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,104 +1,268 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
|
||||
<header class="page__header">
|
||||
<h2 class="page__title"><?= $page->title() ?></h2>
|
||||
|
||||
<div class="description-medium">
|
||||
<p>
|
||||
<?= $page->chapo() ?>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button>
|
||||
<div class="dropdown__content">
|
||||
<ul>
|
||||
<li><button type="button" data-filter="france">France</button></li>
|
||||
<li><button type="button" data-filter="cisjordanie">Cisjordanie</button></li>
|
||||
<li><button type="button" data-filter="etats-unis">États-Unis</button></li>
|
||||
<li><button type="button" data-filter="gaza">Gaza</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="page__title">Enquêtes</h2>
|
||||
|
||||
<div class="page__description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam, ad officiis vitae, architecto incidunt cum optio beatae ab sequi sapiente vero eum molestias odio perspiciatis quisquam accusantium earum repudiandae.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="container-cards container-cards__investigations">
|
||||
<?php snippet('search-form') ?>
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small btn--light no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieu</p></button>
|
||||
<button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
|
||||
</div>
|
||||
|
||||
<section id="container-cards">
|
||||
|
||||
<?php foreach ($page->children()->listed() as $investigation): ?>
|
||||
<article class="card--article">
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
|
||||
|
||||
<?php if ($investigation->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Date de l'incident</dt>
|
||||
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($partners = $investigation->partners()->toStructure()): ?>
|
||||
<?php if ($partners->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<?php $partnerNames = [] ?>
|
||||
<?php foreach ($partners as $partner): ?>
|
||||
<?php $partnerNames[] = $partner->name()->value() ?>
|
||||
<?php endforeach ?>
|
||||
<?= implode(', ', $partnerNames) ?>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
</dl>
|
||||
|
||||
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card--article">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
|
||||
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
|
||||
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l'incident</dt>
|
||||
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l’incident</dt>
|
||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
<?php if ($keywords = $investigation->keywords()->split()): ?>
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<?php foreach ($keywords as $keyword): ?>
|
||||
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($investigation->pinned()->toBool()): ?>
|
||||
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
|
||||
<?php endif ?>
|
||||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="card--article">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
|
||||
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l’incident</dt>
|
||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card--article">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
|
||||
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
|
||||
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="card--article">
|
||||
<figure>
|
||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
|
||||
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Lieu de l’incident</dt>
|
||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="card--article">
|
||||
<figure>
|
||||
<img src="/assets/images/Nahel-visuel1.png">
|
||||
</figure>
|
||||
|
||||
<div class="content">
|
||||
|
||||
|
||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
|
||||
|
||||
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
||||
|
||||
<dl class="dl">
|
||||
<div class="dl__group">
|
||||
<dt>Date de l’incident</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>B’Tselem</dd>
|
||||
</div>
|
||||
<div class="dl__group dl__group__keywords">
|
||||
<dt>Mots-clés</dt>
|
||||
<dd>
|
||||
<ul class="keywords">
|
||||
<li><a href="#" target="_blank">Occupation</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,503 +0,0 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
|
||||
<div class="btn--group__mobile">
|
||||
<button id="toggle-panel__mobile" class="btn--bold-inline no-link btn--toc">
|
||||
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
|
||||
<span class="text">Table des matières</span>
|
||||
</button>
|
||||
<div class="dropdown dropdown--position-mobile">
|
||||
<button class="dropdown__trigger btn--bold-inline no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
<div class="dropdown__content">
|
||||
<?php snippet('modal-share') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
|
||||
<button id="toggle-panel" class="btn--bold-inline no-link btn--toc">
|
||||
<?= svg('assets/icons/toc.svg') ?>
|
||||
</button>
|
||||
|
||||
<aside class="panel-left" id="report__aside">
|
||||
|
||||
<div class="panel__header">
|
||||
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
|
||||
<span class="text">Table des matières</span>
|
||||
<span class="icon close"><?= svg('assets/icons/close.svg') ?></span>
|
||||
</div>
|
||||
|
||||
<div class="panel__content">
|
||||
<nav id="toc">
|
||||
<ul>
|
||||
<li class="toc-level-1 selected"><a href="#auteurs">Les auteurs de ce rapport</a></li>
|
||||
<li class="toc-level-1"><a href="#rappel-faits">Rappel des faits</a></li>
|
||||
<li class="toc-level-1"><a href="#ordre-mission">Ordre de mission</a></li>
|
||||
<li class="toc-level-1"><a href="#sources">1. Sources et documentation visuelle disponible</a></li>
|
||||
<li class="toc-level-1"><a href="#reconstitution">2. Reconstitution générale</a></li>
|
||||
<li class="toc-level-2"><a href="#modelisation">2.1 Modélisation du site</a></li>
|
||||
<li class="toc-level-2"><a href="#horodatage">2.2 Horodatage</a></li>
|
||||
<li class="toc-level-2"><a href="#synchronisation">2.3 Synchronisation des vidéos sources</a></li>
|
||||
<li class="toc-level-2"><a href="#decoupage">2.4 Découpage en séquences clés</a></li>
|
||||
<li class="toc-level-2"><a href="#trajectoire-vehicule">2.5 Reconstitution de la trajectoire du véhicule de M. BICO</a></li>
|
||||
<li class="toc-level-2"><a href="#trajectoires-tirs">2.6 Reconstitution des trajectoires des tirs effectués par les policiers</a></li>
|
||||
<li class="toc-level-1"><a href="#observations">3. Observations</a></li>
|
||||
<li class="toc-level-1"><a href="#annexe">Annexe méthodologique</a></li>
|
||||
<li class="toc-level-1"><a href="#declaration">Déclaration sur l'honneur</a></li>
|
||||
<li class="toc-level-1"><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="btn--group">
|
||||
<button id="download-pdf" class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télécharger le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<div class="dropdown dropdown--position-panel">
|
||||
<button class="dropdown__trigger btn--bold-inline no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</button>
|
||||
<div class="dropdown__content">
|
||||
<?php snippet('modal-share') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="share-banner__aside">
|
||||
<?php snippet('modal-share') ?>
|
||||
</aside>
|
||||
|
||||
<article id="report">
|
||||
<header class="report__header">
|
||||
<div class="report__title-group">
|
||||
<p class="page__type">Rapport</p>
|
||||
<h1 class="title">Rapport de contre-expertise</h1>
|
||||
<h2 class="subtitle">sur les circonstances de la mort d'Adam B. et de Raihane S. le 19 août 2022 à Vénissieux</h2>
|
||||
</div>
|
||||
|
||||
<figure class="report__figure"><img src="/assets/images/image-rapport.png"></figure>
|
||||
|
||||
<dl class="report__dl">
|
||||
<div class="dl__group">
|
||||
<dt>Auteurs du rapport</dt>
|
||||
<dd>INDEX Investigation</dd>
|
||||
</div>
|
||||
<div class="dl__group">
|
||||
<dt>Date du rapport</dt>
|
||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télécharger le 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>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="report__content">
|
||||
<div id="arrow__medias" class="arrow-report"><span>▶</span></div>
|
||||
|
||||
<div class="report__medias" id="report__medias">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="report__txt">
|
||||
|
||||
<div class="section-content" id="auteurs">
|
||||
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
||||
<p>
|
||||
INDEX est une ONG d'investigation et d'expertise indépendante,
|
||||
à but non lucratif, déclarée en tant qu'association Loi 1901
|
||||
(RNA W751258265), depuis 2020.
|
||||
</p>
|
||||
<p>
|
||||
Spécialisée dans l'investigation en sources ouvertes, l'analyse de
|
||||
données média et la reconstitution numérique en 3D, l'ONG INDEX est
|
||||
issue du laboratoire de recherche international Forensic Architecture,
|
||||
basé à l'université Goldsmiths de Londres. Elle est membre du réseau
|
||||
international Investigative Commons.
|
||||
</p>
|
||||
<p>
|
||||
Les collaborateurs de l'ONG INDEX ayant contribué à la production
|
||||
du présent rapport sont :
|
||||
</p>
|
||||
<ul>
|
||||
<li>Analyse et modélisation numérique : Nadav Joffe, Guillaume Seyller</li>
|
||||
<li>Conception graphique : Léonie Montjarret</li>
|
||||
<li>Direction : Francesco Sebregondi</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section-content" id="rappel-faits">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p><em>Note : Le nom de famille des individus mentionnés dans ce rapport a
|
||||
été remplacé par leur initiale, afin de préserver leur anonymat dans le
|
||||
cadre de la publication en ligne du rapport.</em>
|
||||
</p>
|
||||
<p>
|
||||
Dans la nuit du 18 au 19 août 2022, une intervention policière sur le
|
||||
parking de l'hypermarché Carrefour à Vénissieux a causé la mort de
|
||||
deux individus. Adam B. (20 ans) et Raihane S. (25 ans) ont été tués
|
||||
par des tirs de pistolet semi-automatique alors qu'ils se trouvaient
|
||||
à bord d'une Renault Mégane RS, signalée volée. Le premier, qui a
|
||||
reçu une balle dans le thorax, est mort sur les lieux ; le second,
|
||||
touché à la tête, est mort le 19 août à 23 heures à l'hôpital Lyon Sud.
|
||||
</p>
|
||||
<p>
|
||||
L'enquête a déterminé que les deux individus ont été tués par des balles provenant de la même arme, appartenant au policier Geoffray D., chef de bord d'une patrouille de la Brigade Spécialisée de Terrain affectée à Vénissieux. Sur les quatre agents présents lors de l'intervention, deux ont ouvert le feu. Au total, onze balles ont atteint le véhicule où se trouvaient Adam B. et Raihane S..
|
||||
</p>
|
||||
<p>
|
||||
Les policiers ont justifié leur usage des armes en invoquant la
|
||||
légitime défense face à une situation dite de « refus d'obtempérer »
|
||||
mettant leur vie en danger imminent. Selon leurs déclarations, le
|
||||
policier Geoffray D. aurait été heurté par le véhicule en fuite. Il aurait
|
||||
tiré alors qu'il se trouvait embarqué sur le capot. Lors de son
|
||||
audition, il a affirmé qu'il n'avait « pas d'autre choix » que d'ouvrir le
|
||||
feu sur le pare-brise du véhicule.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section-content" id="modelisation">
|
||||
<h3 class="section-title">Modélisation numérique en 3D des lieux de l'incident</h3>
|
||||
<p>
|
||||
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
||||
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
||||
à Vénissieux (69), dans la proche banlieue de Lyon. Nous avons procédé
|
||||
à une modélisation numérique en 3D dudit parking et des bâtiments qui
|
||||
l'entourent.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section-content" id="sources-employees">
|
||||
<h3 class="section-title">Sources employées</h3>
|
||||
<ul>
|
||||
<li>
|
||||
INDEX a obtenu accès au dossier judiciaire de l’affaire concernant la mort d’Adam B. et Raihane S., y compris aux auditions des policiers mis en cause, aux rapports d’autopsie, aux rapports d’expertise, aux photographies de constatation et aux enregistrements radio du soir de l’incident. L’ensemble de ces pièces ont été exploitées à des fins d’analyse et de reconstitution de l’incident.
|
||||
</li>
|
||||
<li>
|
||||
Un modèle numérique en 3D du parking où les faits se sont produits a été réalisé en employant plusieurs sources de données publiques en ligne (Géoportail, Open Street Map, Google Earth).
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section-content" id="objectifs-rapport">
|
||||
<h3 class="section-title">Objectifs du rapport</h3>
|
||||
<p>
|
||||
En partant de l’examen de l’ensemble des pièces produites à ce jour
|
||||
dans le cadre de la procédure judiciaire sur les circonstances de la
|
||||
mort d’Adam B. et de Raihane S., les objectifs du présent rapport de
|
||||
contre-expertise sont les suivants :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Produire, dans la mesure du possible, une reconstitution dynamique de l’incident dans un modèle numérique en 3D des lieux ;
|
||||
</li>
|
||||
<li>
|
||||
Employer ce modèle de reconstitution pour procéder à une vérification rigoureuse du scénario des faits livré par les policiers ayant participé à l’intervention, ainsi que des conclusions avancées par l’expert balistique désigné dans son rapport ;
|
||||
</li>
|
||||
<li>
|
||||
À l’issue de cette analyse, faire toute observation utile à la manifestation de la vérité et à l’exercice de la justice.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||
<div class="media">
|
||||
|
||||
<div class="container slider-before-after">
|
||||
<div class="image-container">
|
||||
<img class="image-before slider-image" src="/assets/images/adam-raihane/fig-1-a.png" alt="color photo"/>
|
||||
<img class="image-after slider-image" src="/assets/images/adam-raihane/fig-1-b.png" />
|
||||
</div>
|
||||
<!-- step="10" -->
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
aria-label="Percentage of before photo shown"
|
||||
class="slider"
|
||||
/>
|
||||
<div class="slider-line" aria-hidden="true"></div>
|
||||
<div class="slider-button" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line
|
||||
x1="128"
|
||||
y1="40"
|
||||
x2="128"
|
||||
y2="216"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<line
|
||||
x1="96"
|
||||
y1="128"
|
||||
x2="16"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="48 160 16 128 48 96"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
<line
|
||||
x1="160"
|
||||
y1="128"
|
||||
x2="240"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="208 96 240 128 208 160"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
||||
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
||||
à Vénissieux (69), dans la proche banlieue de Lyon. Nous avons procédé
|
||||
à une modélisation numérique en 3D dudit parking et des bâtiments qui
|
||||
l’entourent.
|
||||
</p>
|
||||
|
||||
<div class="media container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-2.png"></figure>
|
||||
<p class="caption">Fig. 2 : Plan de localisation des éléments constatés sur les lieux de l’incident dans la nuit des faits.</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Sur ce modèle 3D, nous avons reproduit les positions des différents
|
||||
éléments constatés par les services de police sur les lieux de l’incident,
|
||||
conformément aux photos de constatation et aux relevés techniques
|
||||
effectués sur les lieux. Deux zones principales sont à distinguer :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Au sud, la zone où le véhicule Renault Mégane RS ciblé par les tirs
|
||||
policiers a fini sa course. Nous la désignons comme « zone 2 ».
|
||||
</li>
|
||||
<li>
|
||||
Au nord, la zone où le véhicule Renault Mégane RS était initialement
|
||||
stationné au début de l’intervention de police. Nous la désignons
|
||||
comme « zone 1 ».
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<em>
|
||||
Note : La position initiale précise du véhicule Renault Mégane sur
|
||||
le parking n’a pas été établie par les constatations sur le lieux de
|
||||
l’incident– le fourgon de police ayant été déplacé de sa position en
|
||||
début d’intervention.
|
||||
</em>
|
||||
</p>
|
||||
<p>
|
||||
Ces deux zones sont distantes d’environ 50 mètres. Les tirs sur le
|
||||
véhicule Renault Mégane ont donc eu lieu entre ces deux zones. Ceci
|
||||
est attesté par la présence, entre la zone 1 et 2, des éléments suivants :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Huits étuis percutés au sol, correspondant à des balles de calibre
|
||||
9mm. Cinq de ces étuis correspondent à l’arme du policier Geoffray D.,
|
||||
les trois autres correspondent à celle du policier Pierre-Alexandre D.
|
||||
</li>
|
||||
<li>
|
||||
Un Dispositif d'Interception des Véhicules Automobiles (DIVA, aussi
|
||||
connu sous le nom de « stop-stick »), responsable du dégonflage du
|
||||
pneu avant droit du véhicule Renault Mégane.
|
||||
</li>
|
||||
<li>
|
||||
Des bris de verre, correspondant à l’éclatement d’une vitre du
|
||||
véhicule, vraisemblablement causé par un tir de pistolet.
|
||||
Les positions de l’ensemble des éléments mentionnés ont été reportées
|
||||
sur le modèle 3D (Fig. 2) afin de constituer le cadre de l’analyse produite
|
||||
dans le présent rapport.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">2. SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
|
||||
<div class="media container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-3.png"></figure>
|
||||
<p class="caption">Fig. 3 : Schéma de la dynamique générale de l’incident.</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
D’après les déclarations du policier Geoffray D., à l’arrivée du fourgon de police à sa hauteur, le conducteur de la Mégane aurait effectué une brève marche arrière, avant d’enclencher la marche avant.
|
||||
</p>
|
||||
<p>
|
||||
C’est à ce moment que le policier aurait été percuté par le véhicule et aurait ouvert le feu, provoquant la mort d’Adam B. et de Raihane S..
|
||||
</p>
|
||||
<p>
|
||||
De maniere concomitante, un deuxième policier, Pierre-Alexandre D., aurait effectué trois tirs sur le véhicule en fuite, depuis son côté arrière droit.
|
||||
</p>
|
||||
<p>Les constatations matérielles sur site, croisées avec les déclarations des policiers, permettent de circonscrire une zone approximative dans laquelle les tirs sur le véhicule ont été effecutés.
|
||||
</p>
|
||||
<p>Une fois l’action de tir terminée, le véhicule aurait continué à rouler à faible allure jusqu’à percuter un autre véhicule stationné sur le parking. Sa position finale est établie par des photos de constatations et un relevé technique des lieux.
|
||||
</p>
|
||||
<p>Nous avons intégré cette dynamique au modèle de reconstitution 3D (Fig. 3).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
|
||||
|
||||
<div class="media">
|
||||
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-4.png"></figure>
|
||||
<p class="caption">Fig. 4 : Vue frontale du véhicule et localisation des impacts de tirs sur le pare-brise (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-5.png"></figure>
|
||||
<p class="caption">Fig. 5 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc gauche (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-6.png"></figure>
|
||||
<p class="caption">Fig. 6 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc droit (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-7.png"></figure>
|
||||
<p class="caption">Fig. 7 : Vue d’ensemble du modèle 3D du véhicule avec tous les impacts de tirs localisés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
</div> <!-- swiper -->
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Pour reconstituer les positions des impacts de tirs sur le véhicule, nous nous sommes appuyés sur les photos de constatations réalisées sur le véhicule après son déplacement des lieux de l’incident vers la fourrière.
|
||||
</p>
|
||||
<p>
|
||||
Leur localisation précise sur un modèle 3D détaillé d’un véhicule Renault Mégane RS – correspondant à celui qu’occupaient les deux victimes – s'appuie sur une technique appelée « frame-match » (ou « correspondance de photogramme »)1.
|
||||
</p>
|
||||
<p>
|
||||
Nous présentons ci-après les résultats de l’emploi de cette technique qui nous permet d’obtenir une modélisation détaillée des impacts de tirs sur le véhicule (Fig. 4, 5, 6, 7).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
|
||||
|
||||
<p>
|
||||
À partir des éléments décrits précédemment, nous avons procédé à une reconstitution dynamique de l’incident en intégrant l’ensemble des données matérielles disponibles.
|
||||
</p>
|
||||
<p>
|
||||
Afin d’étudier la temporalité de l’action, nous avons procédé à une synchronisation des messages radios diffusés par les policiers en intervention dans les instants qui précèdent et qui suivent les tirs (Fig. 8).
|
||||
</p>
|
||||
<p>
|
||||
À 23h59m58s se termine le message d’un des policiers de la patrouille BST 140A en intervention, qui annonce, sur un ton calme, qu’ils sont « retournés au contact du véhicule ».
|
||||
</p>
|
||||
<p>
|
||||
À 00h00m26s, l’un des policiers de la patrouille annonce, sur un ton agité : « Véhicule tiré, collègue à terre ! ».
|
||||
</p>
|
||||
<p>
|
||||
Il en résulte qu’il s’écoule moins de 30 secondes entre l’instant où les policiers initient le contrôle du véhicule Renault Mégane et l’instant où au moins un policier ouvre le feu.
|
||||
</p>
|
||||
<p>
|
||||
Pour produire une reconstitution dynamique de l’action qui s’est déroulée au cours de ces 30 secondes, nous l’avons décomposée en plusieurs intervalles.
|
||||
</p>
|
||||
|
||||
|
||||
</div> <!-- div content txt-->
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -1,4 +1,2 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue