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

Compare commits

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

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

106 changed files with 1885 additions and 7538 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.claude/settings.local.json
View file

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

2
.forgejo/workflows/deploy.yml
View file

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

2
.gitignore vendored
View file

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

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

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

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

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

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

@ -17,10 +17,8 @@
--fs-button-bold: 22px; --fs-button-bold: 22px;
--max-w-content: 640px; --max-w-content: 700px;
--max-w-cards: 940px; --max-w-container: 1280px;
--z-header: 2000;
--panel-w: 310px;
@media #{$small} { @media #{$small} {
--fs-medium: 20px; --fs-medium: 20px;
@ -28,7 +26,7 @@
} }
--leading-tight: 1.05; --leading-tight: 1.05;
--leading-normal: 1.3; --leading-normal: 1.2;
// --leading-relaxed: 1.4; // --leading-relaxed: 1.4;
// --leading-loose: 1.8; // --leading-loose: 1.8;
@ -43,7 +41,6 @@
--grey-400: #969696; --grey-400: #969696;
--grey-600: #6d6d6d; --grey-600: #6d6d6d;
--grey-800: #383838; --grey-800: #383838;
--grey-950: #222222;
--color-bg: #161616; --color-bg: #161616;
--color-txt: #ffffff; --color-txt: #ffffff;
@ -92,23 +89,21 @@
--header-h: 60px; --header-h: 60px;
--padding-body: 16px;
} }
} }
:root[data-theme="light"] { :root[data-theme="light"] {
--grey-100: #2f2f2f; --grey-100: #1f1f1f;
--grey-200: #2f2f2f; --grey-200: #2f2f2f;
--grey-300: #4a4a4a; --grey-300: #4a4a4a;
--grey-400: #6a6a6a; --grey-400: #6a6a6a;
--grey-600: #9a9a9a; --grey-600: #9a9a9a;
--grey-800: #cfcfcf; --grey-800: #cfcfcf;
--grey-950: #eaeaea;
--color-bg: #efefef; --color-bg: #efefef;
--color-txt: #161616; --color-txt: #000000;
--color-txt-light: var(--grey-400); --color-txt-light: var(--grey-400);
--color-accent: #ff00ff; --color-accent: #ff00ff;

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

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

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

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

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

@ -3,12 +3,8 @@ button{
font-family: var(--font); font-family: var(--font);
font-size: var(--fons-normal); font-size: var(--fons-normal);
color: var(--color-txt); color: var(--color-txt);
svg{
fill: var(--color-txt);
}
&:hover{ &:hover{
color: var(--grey-100); color: var(--grey-100);
svg{ fill: var(--grey-100); }
} }
a{ a{
@ -34,64 +30,7 @@ button:disabled{
} }
.btn--small{
height: calc(var(--h-block)*0.75);
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
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, .btn--bold,
.btn--bold-inline{ .btn--bold-inline{
display: block; display: block;
@ -103,17 +42,10 @@ button:disabled{
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
svg{
width: 18px;
height: 18px;
position: relative;
top: -1px;
}
a{ a{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 2ch; padding: 0 2ch;
@ -123,12 +55,10 @@ button:disabled{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1ch;
padding: 0 2ch; padding: 0 2ch;
padding-top: 4px; padding-top: 4px;
} }
} }
@ -137,125 +67,112 @@ button:disabled{
.btn--bold{ .btn--bold{
background-color: var(--color-txt); background-color: var(--color-txt);
color: var(--color-bg); color: var(--color-bg);
svg{ fill: var(--color-bg); }
&:hover{ &:hover{
background-color: var(--color-accent); background-color: var(--color-accent);
border-color: var(--color-accent); border-color: var(--color-accent);
a{ a{
color: var(--color-bg); color: var(--color-bg);
} }
svg{ fill: var(--color-bg); }
} }
} }
.btn--bold-inline{ .btn--bold-inline{
background-color: var(--color-bg); background-color: var(--color-bg);
svg{ fill: var(--color-txt); } }
&:hover{
background-color: var(--grey-950); .btn--bold-inline:hover{
color: var(--grey-100); background-color: var(--grey-800);
border-color: var(--grey-100); color: var(--color-txt);
a{ a{
background-color: var(--grey-950); background-color: var(--grey-800);
color: var(--grey-100); color: var(--color-txt);
}
svg{ fill: var(--grey-100); }
} }
}
// 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;
.btn--toc{
svg{
width: 15px;
height: 15px;
top: 0px;
}
}
@mixin btn--go-to(){
position: relative; position: relative;
.btn--go-to{
position: absolute;
right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px);
svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
@media #{$small}{
svg{
width: 11px;
height: 11px;
}
}
@media #{$x-small}{
right: calc(var(--padding-inner)*0.5);
bottom: calc(var(--padding-inner)*0.25);
svg{
width: 11px;
height: 11px;
}
}
}
&:hover{
.btn--go-to{
animation: wiggle-left 0.8s ease-in-out;
}
}
}
@keyframes wiggle-left {
0% { transform: translateX(0); }
40% { transform: translateX(-10px); }
80% { transform: translateX(0); }
100% { transform: translateX(0); }
}
.btn--back-to-top{
display: flex; display: flex;
border-color: var(--color-txt); align-items: center;
width: fit-content; gap: 0ch;
margin: var(--spacing) auto; // padding-right: 0.5ch;
@media #{$small}{ color: var(--color-accent);
margin-bottom: calc(var(--spacing)*2); font-weight: var(--fw-medium);
} text-decoration: none;
cursor: pointer;
.icon, .txt{ z-index: 10; }
.icon{ .icon{
width: 12px; width: var(--size);
height: 12px; height: var(--size);
transform: rotate(-90deg); display: flex;
transform-origin: center; align-items: center;
position: relative; justify-content: center;
top: -1px; color: var(--color-bg);
text-align: center;
svg{ svg{
width: 12px; fill: var(--color-bg);
height: 12px; width: 80%;
} }
} }
.txt{
font-family: var(--font-title);
color: var(--color-accent);
font-size: var(--fs-normal);
font-weight: var(--fw-bold);
padding-left: 1ch;
}
&::after{
content: '';
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size)/2);
width: var(--size);
height: var(--size);
position: absolute;
left: 0;
z-index: 0;
transition: width .2s
}
&:hover{ &:hover{
background-color: var(--grey-950); //
color: var(--grey-100); .txt{
border-color: var(--grey-100); color: var(--color-bg);
a{ display: block;
background-color: var(--grey-950); }
color: var(--grey-100); &::after{
width: 100%;
} }
svg{ fill: var(--grey-100); }
} }
} }

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

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

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

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

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

@ -1,153 +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: normal;
font-size: var(--fs-medium);
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;
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{
margin-left: 45px;
@media #{$x-small}{ margin-left: 0px; }
}
.title .icon{
display: none;
}
.icon-folder{
position: absolute;
left: 10px;
padding-top: calc(var(--spacing)*0.5);
@media #{$x-small}{ display: none; }
svg{
width: 20px;
fill: var(--color-txt);
}
}
}
@container cardfolder (width < 680px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short{
margin-top: calc(var(--spacing)*0.5);
}
}
@container cardfolder (width < 520px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul{
font-size: var(--fs-small);
}
}

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

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

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

@ -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; .content{
container-name: impact; grid-column: 2;
border: var(--border-light); }
margin-bottom: calc(var(--spacing)*1); &:not([data-impact-type="media"]) .content{
@media #{$x-small}{ grid-column: span 2; }
}
&.has-link { .tag{
@include hover-card-line();
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 { .open-graph__details{
@include grid-content(); grid-column: span 2;
padding: calc(var(--padding-inner)*1.5) var(--padding-inner); @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;
}
}
}

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

@ -1,26 +1,19 @@
.card--open-graph{ .card--open-graph{
@include grid-content(); @include grid-content();
// border: var(--border-light); border: var(--border-light);
border: 1px solid var(--grey-600);
border-radius: var(--radius-small); border-radius: var(--radius-small);
position: relative; position: relative;
figure{ figure{
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
width: 100%;
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
} }
// @include figure-16-9(); @include figure-16-9();
@media #{$x-small}{ @media #{$x-small}{
@ -40,14 +33,11 @@
.site-name{ .site-name{
color: var(--color-txt-light); color: var(--color-txt-light);
font-size: var(--fs-small); font-size: var(--fs-small);
margin-bottom: 3px;
} }
.title{ .title{
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: normal; font-weight: normal;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -67,26 +57,7 @@
} }
&:hover{ &:hover{
border-color: var(--color-txt); .title{ text-decoration: underline;}
background-color: var(--grey-950);
}
}
.open-graph__inner{
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph{
.content{
padding: calc(var(--padding-inner)*0.5);
}
figure{
aspect-ratio: inherit;
}
} }
} }

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

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

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

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

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

@ -12,23 +12,6 @@
} }
} }
}
@mixin figure-16-9-hover{
figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
}
&:hover{ &:hover{
figure img{ transform: scale(1.05); } figure img{ transform: scale(1.05); }
} }

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

@ -1,143 +0,0 @@
#hero{
width: 100%;
position: relative;
left: 0;
// @media #{$small}{
// width: 100vw;
// left: calc(var(--padding-body)*-1);
// }
figcaption{
color: var(--color-txt-light);
font-size: var(--fs-small);
@media #{$x-small}{ font-size: var(--fs-xsmall); }
padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0;
}
figure{
width: 100%;
position: relative;
img{
width: 100%;
aspect-ratio: 2/1;
object-fit: cover;
}
}
.swiper-slide{
position: relative;
}
.swiper-button-prev, .swiper-button-next{
--swiper-navigation-sides-offset: 32px;
--swiper-navigation-size: 32px;
@media #{$x-small}{
--swiper-navigation-sides-offset: 15px;
--swiper-navigation-size: 15px;
}
opacity: 0.8;
// Position buttons relative to the image (16/9 aspect ratio)
// Calculate: 50% of image height = 50% * (9/16) of width
// Image is 100vw wide, so center at: (100vw * 9/16) / 2
top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
margin-top: 0;
svg{ color: white; }
}
.swiper-pagination{
position: static;
margin-top: calc(var(--spacing)*0.5);
padding: 0 var(--padding-body);
text-align: center;
.swiper-pagination-bullet{
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
// opacity: 0.4;
}
.swiper-pagination-bullet-active{
background: var(--color-txt);
opacity: 0.8;
}
}
.player-container{
width: 100%;
position: relative;
aspect-ratio: 2/1;
.extract, video{
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.video-full{
width: 100%;
height: 100%;
iframe{
width: 100%;
height: 100%;
}
display: none;
}
#hero-play-video{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
.btn--bold{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
opacity: 0.8;
&:hover{
opacity: 1;
}
}
.text{
color: black;
line-height: 1;
padding-top: 4px;
}
svg{
width: 18px;
height: 18px;
fill: black;
opacity: 0.8;
// opacity: 0.7;
}
}
}
}

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

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

8
assets/css/components/_list-socials.scss
View file

@ -11,16 +11,16 @@
} }
.icon{ .icon{
width: 20px; width: 24px;
height: 20px; height: 24px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
svg{ svg{
display: flex; display: flex;
align-items: center; align-items: center;
width: 20px; width: 24px;
height: 20px; height: 24px;
} }

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

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

40
assets/css/components/_search-form.scss
View file

@ -1,40 +0,0 @@
.search-form{
--icon: 40px;
display: grid;
grid-template-columns: var(--icon) 1fr;
input{
grid-column: 1/3;
grid-row: 1;
height: calc(var(--h-block) * 1.5);
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-txt);
padding-left: var(--icon);
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
padding-top: 3px;
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
}
&:focus{
border-color: var(--color-accent);
outline: none;
}
}
.icon{
grid-column: 1;
grid-row: 1;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
svg{
width: 20px;
}
}
}

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

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

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

@ -1,42 +0,0 @@
button.sort{
.arrow{
line-height: 0;
--size: 12px;
height: var(--size);
width: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -2px;
transform: rotate(90deg);
transition: transform 0.2s ease-in;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&[data-sort-type="up"]{
.arrow{
transform: rotate(-90deg);
}
}
}
.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);
}

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

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

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

@ -1,9 +1,8 @@
.tag{ .tag{
height: calc(var(--h-block)*0.75); height: calc(var(--h-block)*0.75);
// border-radius: calc(var(--h-block)*0.75/2); border-radius: calc(var(--h-block)*0.75/2);
border-radius: var(--radius-small);
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 1.5ch; padding: 0 1.5ch;
@ -18,7 +17,5 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
}
}

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

@ -0,0 +1,4 @@
.title-page{
font-size: var(--fs-medium);
}

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

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

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

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

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

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

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

@ -2,13 +2,7 @@
background-color: var(--dark); background-color: var(--dark);
padding: calc(var(--padding-body)*2) var(--padding-body); 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 { .logo {
margin-top: calc(var(--spacing)*0.25); margin-top: calc(var(--spacing)*0.25);
@ -44,6 +38,7 @@
@media #{$small}{ @media #{$small}{
margin-top: calc(var(--spacing)*2);
.footer__socials{ .footer__socials{
@ -72,11 +67,15 @@
.site-footer__container{ .site-footer__container{
display: grid; display: grid;
grid-template-columns: 3fr 2fr; grid-template-columns: 1fr 1fr;
column-gap: calc(var(--spacing)*2); column-gap: calc(var(--spacing)*2);
max-width: 1200px;
margin: 0 auto;
} }
.footer__socials .socials{ .footer__socials .socials{
max-width: 400px;
columns: 2; columns: 2;
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*1);
} }

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

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

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

@ -6,13 +6,10 @@
top: var(--header-h); top: var(--header-h);
right: calc(var(--menu-w)*-1); right: calc(var(--menu-w)*-1);
transition: right .3s ease-in; transition: right .3s ease-in;
@media #{$small}{
transition: right .4s ease-in;
}
background-color: var(--color-bg); background-color: var(--color-bg);
border-left: var(--border-light); border-left: var(--border-light);
padding: var(--padding-body); padding: var(--padding-body);
z-index: calc(var(--z-header) - 1); z-index: 1000;
@media #{$x-small}{ @media #{$x-small}{
width: 100vw; width: 100vw;
@ -23,11 +20,50 @@
flex-direction: column; flex-direction: column;
.search-form{ form{
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*1); margin-bottom: calc(var(--spacing)*1);
--icon: 40px;
display: grid;
grid-template-columns: var(--icon) 1fr;
input{
grid-column: 1/3;
grid-row: 1;
height: calc(var(--h-block) * 1.5);
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-txt);
padding-left: var(--icon);
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
padding-top: 3px;
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
}
&:focus{
border-color: var(--color-accent);
outline: none;
}
}
.icon{
grid-column: 1;
grid-row: 1;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
svg{
width: 20px;
}
}
} }
nav{ nav{
flex-grow: 1; flex-grow: 1;
ul{ ul{
@ -53,11 +89,11 @@
} }
body.menu-open{ body.menu-open{
// overflow: hidden; overflow: hidden;
// main, footer, #nav-highlight{ main, footer, #nav-highlight{
// transition: opacity .3s ease-in; transition: opacity .3s ease-in;
// opacity: 0.1; opacity: 0.1;
// } }
#site-menu{ #site-menu{
right: 0; right: 0;

2772
assets/css/style.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

62
assets/css/style.scss
View file

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

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

@ -1,90 +0,0 @@
.content-folder{
// max-width: 1300px;
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body)*1.5);
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
position: relative;
.container-cards{
display: block;
align-self: start;
}
#section__investigations article{
margin-bottom: calc(var(--spacing)*1);
}
.container__title{
font-weight: normal;
font-size: var(--fs-normal);
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.75);
}
@media #{$medium}{
#section__investigations{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner)*1.5)!important;
margin-bottom: calc(var(--spacing)*3);
article{ margin-bottom: 0px;}
.container__title{
grid-column: span 2;
margin-bottom: 0px;
}
}
section:target{
padding-top: calc(var(--header-h) + var(--spacing));
}
}
@media #{$medium-up}{
#nav-folder{ display: none; }
grid-template-columns: 1fr 1fr;
#section__investigations{
display: block;
margin-bottom: 0px;
article{
margin-bottom: calc(var(--spacing)*1);
}
}
}
@media #{$small}{
display: block;
#section__investigations{
display: block;
}
.container__title{
margin-bottom: calc(var(--spacing)*0.5)!important;
}
}
}
#nav-folder{
display: flex;
margin-top: calc(var(--spacing)*-1);
margin-bottom: calc(var(--spacing)*2);
svg{
width: 10px;
height: 10px;
transform: rotate(90deg);
}
}
@media #{$medium-up}{
#nav-folder{ display: none;}
}

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

@ -1,202 +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-family: var(--title);
font-size: 45px;
line-height: 1.1;
max-width: 26ch;
@media #{$x-small} {
font-size: 34px;
}
}
button {
margin-top: calc(var(--spacing)*1);
}
}
#home__folders {
.card--folder {
margin-bottom: calc(var(--spacing)*0.5);
}
}

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

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

@ -1,195 +1,362 @@
[data-template="investigation-summary"] main { [data-template="investigation-summary"] main{
position: relative;
position: relative;
header{
.page-type{
text-transform: uppercase;
color: var(--color-txt-light);
margin-bottom: calc(var(--spacing)*0.5);
}
h2{
font-size: var(--fs-xbig);
line-height: var(--leading-tight);
}
}
.section__article{
a:hover{
color: var(--grey-200);
}
.section__title{
font-weight: normal;
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.5)
}
}
#hero{
width: 100vw;
position: relative;
left: calc(var(--padding-body)*-1);
.panel-left{ figcaption{
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); color: var(--color-txt-light);
} font-size: var(--fs-small);
@media #{$x-small}{ font-size: var(--fs-xsmall); }
@media screen and (max-width: 1340px){ padding-top: calc(var(--spacing)*0.5);
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);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*1);
} }
a:hover { &.hero-video{
color: var(--grey-200); figure{
} width: 100%;
.section__title { img{
font-weight: normal; width: 100%;
text-transform: uppercase; aspect-ratio: 16/9;
margin-bottom: calc(var(--spacing) * 1); object-fit: cover;
padding-right: 2ch; }
text-wrap: balance;
}
}
}
#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 {
max-width: var(--max-w-content);
margin-inline: auto;
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;
}
}
.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: bold;
font-size: var(--fs-small);
a {
display: block;
padding: 5px 1ch;
text-decoration: none;
} }
}
} }
}
.btn--group{ #nav--page{
width: calc(var(--panel-w)*0.5); ul{
display: flex; list-style: none;
flex-direction: column; li{
gap:calc(var(--spacing)*0.25); text-align: center;
color: var(--color-txt-light);
button, .dropdown{ a{
flex-grow: 1; display: block;
width: 100%; padding: 0.3em 0;
text-decoration: none;
}
}
}
}
#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 ---------------------------------------------------------- // SMALL ----------------------------------------------------------
// ---------------------------------------------------------------- // ----------------------------------------------------------------
@media #{$small} {
[data-template="investigation-summary"] main {
width: 100%;
header { @media #{$small}{
margin-bottom: calc(var(--spacing) * 1);
[data-template="investigation-summary"] main{
header{
padding-top: calc(var(--spacing)*1.5);
.page-type{
font-size: var(--fs-small);
}
}
.section__article{
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 { @media #{$x-small}{
column-gap: 1ch; [data-template="investigation-summary"] main{
font-size: var(--fs-small); #section__dl .dl__group{
padding: calc(var(--spacing) * 0.25) 0;
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;
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: calc(var(--spacing)*3) 0;
}
.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) + 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: calc(var(--spacing)*3) 0;
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;
}
} }
}
} }

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

@ -0,0 +1,17 @@
[data-template="investigations"] main{
#container-cards{
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
}

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

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

1
assets/icons/article.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 289 B

2
assets/icons/close.svg
View file

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 309 B

Before After
Before After

1
assets/icons/filter.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 0h22l-9 14.094v9.906l-4-2v-7.906z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 137 B

1
assets/icons/folder.svg
View file

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

Before

Width:  |  Height:  |  Size: 207 B

56
assets/icons/pdf.svg
View file

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

Before

Width:  |  Height:  |  Size: 2.5 KiB

1
assets/icons/pin.svg
View file

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

Before

Width:  |  Height:  |  Size: 711 B

1
assets/icons/play.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 277 B

1
assets/icons/printer.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 18h-8v-1h8v1zm-2 1h-6v1h6v-1zm10-14v13h-4v6h-16v-6h-4v-13h4v-5h16v5h4zm-18 0h12v-3h-12v3zm12 10h-12v7h12v-7zm4-8h-20v9h2v-3h16v3h2v-9zm-1.5 1c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 304 B

1
assets/icons/share.svg
View file

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

Before

Width:  |  Height:  |  Size: 679 B

12
assets/icons/socials/bluesky.svg
View file

@ -1,3 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bluesky" viewBox="0 0 16 16"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948"/> <rect width="39.2157" height="39.2157" fill="url(#pattern0_310_283)"/>
</svg> <defs>
<pattern id="pattern0_310_283" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_310_283" transform="scale(0.01)"/>
</pattern>
<image id="image0_310_283" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAklEQVR4nO2dW4hWVRTHT5OYTdnNzG7YFYIIuliSYaVmxBSk5fQgaqFI9aKRBZV2gW6WUBRkoUk+1EMIjYNp6UAmNV6iNFApIyvGkiyVqajRcZx+sXE9TMP3fbPPOfvsvc7M/sEHwwzMXmv9v3POPmutvXeSRCKRSCQSiUQikUgkUgugDrgSmAw0AuOA4aHt0g5wlsTqHomdiWFd3n/6APALlfkWeBq4xJkXJcfEAngG2FUlZj8Ds7P+87ew41+gFWhIBihAg8TAxMKGN9IOMJ1sfAaMTQYIwFjxOQtTbQc5DthNPlYAw5J+CnAqsCRnjH4wsbYZ7GbcsBe4Pemft6e9jmJ0o82A83HLotyzCz2zzZcdx+Zxm4HN7cY1q4ChSUkBhooPrnnfZvBPKYbtwIVJyQDOB7YWFJP1NgYUNbjhN+DqpCQAo4DfC4zHVzZGbKNY2oHRiXKAa4CDBcfCSpANFM8fwPWJ7ivjoIc4WN2yinh4VRNlTKIM4AbgT08xaLYx6D38YRwflSgBuBb4y6P/77rMYblin4YEJXCpTDp8stjGsBfwj0nVjPAS+co+Dwe+C+D3szbGzSMMXwIne1Hg//7WA5sD+fyQjYEzCMca4HgvShzzdRCwNqC/02yTZyFZ5EWNY76+EtjX22yMvI7wTPUgxrTQTlrNMIGLQlsJHDJT0ALFuAr4J7STwAW2mU0NtJlGgQLEGAb8iA5OsjXafEM1sM5lLUVqGi3ooCON4XvQw2MOBXkCPbSlMfwL9NBl8ksOxBgNHEEPm9MY34wu9gBn5BDjNOAndNGUxoE30ceKHIJ8gD4Wp3HgKXQyNYMYWXvMimZBGidmo5MDwNkp/DjHU6EpC7PSCHIHelmVwo8m9NKQtp6smekWPtyLbuybPcxtAd3sr9WqCpwptzfN2Nd/pL+3A90sqWH/MnTTYdXX28sps/5DM92VOlckW23+pplvUokhjplikXa29ixomZ899JW5YE0WQUyTdBmYVYLpev4inHkJoxy0AUPkoykpmq90W2WmYhJ7ZeBh4BHKwdHMHTZSjygD++VTBloyiSGC3BXa+n7I5LwVtp2hPehH7HSxVn1ciuW+kdrcmkuMHqK808dAkb5524kYIsgQZWXdsmFeYOudCSKijAB2hPashGwvrJFc3k2y7lwwENlQ+AYK0qC8UFkHhzZMbJ43sSpUjF7CXAF8FNpzZZjZ6Grgcm9CVKkuLpXVtQOVdtn7RM+Sb+AEYIJcqitNzh/o7KNIs09yO1o4KjbVKs51im+mXv8cMB4YnJQBed6MBC6WzyTgdVkks0tpIalbbFsrtt7Zw/6RXp8LRWBa7qXPq8xT5h3Ak1bLB7Qit68WpVdBVrrFp/FJWZC13hvp/2zUtMa+2kP9NWUP6aIxvr5qfE80Ieu8feyRovlqsW5xLRRJp2hvGfLB90Uswcsyrd3kxd1y0OpznX0lQR4NHQGFzAslRv0AT5dUo9157cNSkPuqmhSZEUKQZcru3a3oYWkIQTQF4EHgfvTweQhBtqCDTtmd4XTgMDpoDSHIx+iguYdNJu1fzu52B4KYMq4GpvSwaQo6eDGEILeE9ppjB6QM6vWian4XmgkhBKlT0P4/v4JdCxQsjwhz+IDZMzCg44cr5Y4ktxZyN6M5QcQQ5wfLwSQhWF7DruWBbNodvL4O3BSgBnIUuKyPPXi7AlQT/T87KgG8pO1NGP+ZhIWJFmT1a5PH7cnPtdz8wFfyc7W6bhTJ/m7S9NAE5nqwZ0uQ7K4NsoHmJwU6vyFNAUiu3CJLy+uBUxLNyMyriHOsDppGtQz2nFfQglCz696JSRmQb6bp93XFIXOcX85leS7fTZYGLdVmQTawmesgA9tlWlAd2DPJwVT4cNAXP4fd8V9nDMABYKJDWybm2LZpm6ru9jxI0m+OdJbbsq6IY/ZkK/U0myn/KrbrmtY6nBrPlLMSK63A+hv40GSSPdgyUcYyY/bmiMygZpbmwZ0Xc3iLbG7cCNxtDggjQB5IZoVjxIZGscn7wTKRSCQSiUQikUgkEokkhv8Ar2Kl60ZaukcAAAAASUVORK5CYII="/>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

6
assets/icons/socials/facebook.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> <path d="M17.2549 0C7.72549 0 0 7.72549 0 17.2549C0 25.9059 6.37255 33.0486 14.6761 34.2965V21.8282H10.4071V17.2925H14.6761V14.2745C14.6761 9.27765 17.1106 7.08392 21.2635 7.08392C23.2526 7.08392 24.3043 7.23137 24.8024 7.29882V11.258H21.9694C20.2063 11.258 19.5906 12.9294 19.5906 14.8133V17.2925H24.7576L24.0565 21.8282H19.5906V34.3333C28.0126 33.1906 34.5098 25.9898 34.5098 17.2549C34.5098 7.72549 26.7843 0 17.2549 0Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 542 B

Before After
Before After

6
assets/icons/socials/instagram.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/> <path d="M9.14777 0C4.10333 0 0 4.10713 0 9.15288V22.2248C0 27.2692 4.10713 31.3725 9.15288 31.3725H22.2248C27.2692 31.3725 31.3725 27.2654 31.3725 22.2197V9.14777C31.3725 4.10333 27.2654 0 22.2197 0H9.14777ZM24.8366 5.22876C25.5582 5.22876 26.1438 5.81438 26.1438 6.53595C26.1438 7.25752 25.5582 7.84314 24.8366 7.84314C24.115 7.84314 23.5294 7.25752 23.5294 6.53595C23.5294 5.81438 24.115 5.22876 24.8366 5.22876ZM15.6863 7.84314C20.0118 7.84314 23.5294 11.3608 23.5294 15.6863C23.5294 20.0118 20.0118 23.5294 15.6863 23.5294C11.3608 23.5294 7.84314 20.0118 7.84314 15.6863C7.84314 11.3608 11.3608 7.84314 15.6863 7.84314ZM15.6863 10.4575C14.2995 10.4575 12.9696 11.0084 11.989 11.989C11.0084 12.9696 10.4575 14.2995 10.4575 15.6863C10.4575 17.073 11.0084 18.403 11.989 19.3836C12.9696 20.3641 14.2995 20.915 15.6863 20.915C17.073 20.915 18.403 20.3641 19.3836 19.3836C20.3641 18.403 20.915 17.073 20.915 15.6863C20.915 14.2995 20.3641 12.9696 19.3836 11.989C18.403 11.0084 17.073 10.4575 15.6863 10.4575Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

6
assets/icons/socials/linkedin.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/> <path d="M28.1905 0H3.80952C1.70667 0 0 1.70667 0 3.80952V28.1905C0 30.2933 1.70667 32 3.80952 32H28.1905C30.2933 32 32 30.2933 32 28.1905V3.80952C32 1.70667 30.2933 0 28.1905 0ZM9.90476 12.1905V26.6667H5.33333V12.1905H9.90476ZM5.33333 7.97714C5.33333 6.91048 6.24762 6.09524 7.61905 6.09524C8.99048 6.09524 9.85143 6.91048 9.90476 7.97714C9.90476 9.04381 9.05143 9.90476 7.61905 9.90476C6.24762 9.90476 5.33333 9.04381 5.33333 7.97714ZM26.6667 26.6667H22.0952C22.0952 26.6667 22.0952 19.6114 22.0952 19.0476C22.0952 17.5238 21.3333 16 19.4286 15.9695H19.3676C17.5238 15.9695 16.7619 17.539 16.7619 19.0476C16.7619 19.741 16.7619 26.6667 16.7619 26.6667H12.1905V12.1905H16.7619V14.141C16.7619 14.141 18.2324 12.1905 21.1886 12.1905C24.2133 12.1905 26.6667 14.2705 26.6667 18.4838V26.6667Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 666 B

After

Width:  |  Height:  |  Size: 908 B

Before After
Before After

12
assets/icons/socials/mastodon.svg
View file

@ -1,3 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16"> <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/> <rect width="29.9355" height="30.8125" fill="url(#pattern0_441_207)"/>
</svg> <defs>
<pattern id="pattern0_441_207" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_441_207" transform="matrix(0.01 0 0 0.00971537 0 0.0142315)"/>
</pattern>
<image id="image0_441_207" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF9ElEQVR4nO2da4gXVRTA7+qurtnLHvQgozKpKBfzRUpWq9aamZUZ9jATg0AzisCUwp5QUREJEYSU1ReDFBYxk14EEWhRSaFRsWURViTUZg9d3X5x8AiL7M7MvTPrvTNzfzBf9nHuuXPmP/eexz1/YyKRSCQSiUQikUgkEolEIpFIYQDNwOnAWGAcMA1oA24AbgLu0Guu/uwa/Ru5xgPnAkf6nkdpkJulN3o+8BiwGngL+BL4jeL4G/gW+BB4A3gOWAS0AieZugKcBtwOvAxsA7oJgx3A68AS4CxTZeQJBO4DtlIetgHLgZNNxV5HTwN7KS9dwDOlX4eAUUAH1aFD5mTKCHAFsJvqsVvmZsoEMBH4i+ryD3CJKQPAecAfVJ/fxb8xIQM0Ah9THz4FmkyoAI9QPx40IQKcD+yjfnQF+eoC1lFf1piQAEYC/xXwpL0JLAZagFM0qDgcuBR4APjGQe7XwP3AZA3ZDFbZLTrWxgKc1u6gQi3qxboihlwDjMgwToNGeeUmp/FVVn9BxtYYVp6H6kkTAsAAYKfjJP4FrncMx7QnyG13CXMAc1QnF36UB8b4BrjIh3MFNAGbepG7Kc9WVF9tEqZ3YazxjWz7HJVfWMDYJwA/95D5C3BiAXIXOs5pufENsMFB8fUFjj+/h9wFnufVXtT4eRSXp9IGWTjHFDh+A/ARsLnId7imi20X+Z+KGt9V6aOwZ6vFGnEVsEzTrCMT/naM5M4Tfn+2yhBZM7OuMQ7JNDHgEOML4AIHgzyVQW5LL1tbmewLNgu2xtae7+VJl7z66Az/L4k1W/x57cDlDgrfmCJzeEphw6sW+r2UIGeXVLKk/L9UtNjSanyh5Ta2TEqRuTqDjGkZdJuSQc5rKTImOcxvpvGF4xPU51MJDMqY2GovKLYmvlBzyqfVlrnGF8BtDgoPS5A3OqOMTmBgSvRAEkhZGJcgZ5jD/OYZXxziA2RlcIK8qQV90k61kHNlghwJbpbqE3KrpbL7U+RNt5A1OiU3k5VZKT6ObRHfbFMig+wp0CATEuRcWIRBVNa+Mi3q8yyVrYNB2owvgFtqYJAuyzlOMb4AbrZUtg4GmWx8IV63pbJ7a2CQ8cYXsqOwVLarhAbZbznH1FR0vwHM8LjtnXCYDGK77T3e+CJjvKgn3SU0iA0SVW40vnAJvpXJIBxwDG3oND7RxJAtDSUyyADLue0wAVS629JYkEGKYlZKgqvwbGi/IdV6DjegqUQGabKUtdH4REpuCo72Ticsg0h+xoZVxif6jrXdpzeXyCDNlrJWGN8Av1oqfUSJDDLEUtZ84xvttmDD0BIZZGhpwiY9lH7PUun3gXf6uD7j8LM1QR/R1cYpPDoEg8hRggh0mBAAVvq+E4HwhAkBPdlUd7qAc0wIOCSpqsijJhS0z1Wd2ZLk7B52gGOoL194zX/0hZyLoH5sDrYLXcoBzCryosS5TKjUaKf1PXCtKUlvrCrTCTzs9XSUDRrz2UP12KmG6LNiP1gs4z59sQH43KEWqki+A57Vdh59HnkIHu3emZepPfIQ0pDgLj2W9gHwg0PuJQlJG3yi/Xsf0tNgZ5iqoN2j8zInZYxBeqK2VYv05ID/veIpS6+RXq4VwFLten0dcLGEOEqzFuSlgG5yy3zPoVIAd+Y0yFrfc6gUeiZPtoiu/JmU4o04ADye81OyxPccKoWWBuXp2burUr3WKxJK2SJRZN/zqAxa8ScOXh62i3Pmey6VQQueiwinrNMOPrmTQMBxUvajdQDlbKpfwJG3vN1KDyK7t3c1rLFYZbfpVxqN0B3emVpvPEpDHwuk+ECNuv2Qwzf+Tsv6RL/EJURmm7qioQufAcMwyz59on1MZEsbCotM3dFFdWUgPeKX+r4fwaDNYVZZtFDqj5yHv44LoaJ5D/kiyFcytg8nZ5xsrbRjknMtvudeCjjQGPlqjYet1/7tro3ypcHy2xo1mOj1uHKVAAaqf3GZVHyob3G3tnw9eN2jP5+hDumxvvWORCKRSCQSiUQikUgkEolETMX5H+qu+wk8Zr/DAAAAAElFTkSuQmCC"/>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 952 B

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

6
assets/icons/socials/threads.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-threads" viewBox="0 0 16 16"> <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948s.928 1.509 1.005 2.644q.492.207.905.484c1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.2 6.2 0 0 0-1.528-.161"/> <path d="M29.4 3.5V25.9C29.4 27.8299 27.8299 29.4 25.9 29.4H3.5C1.5701 29.4 0 27.8299 0 25.9V3.5C0 1.5701 1.5701 0 3.5 0H25.9C27.8299 0 29.4 1.5701 29.4 3.5ZM20.6808 22.3391C22.5785 20.4435 22.5253 18.074 21.903 16.6201C21.525 15.7416 20.8474 14.9891 19.9444 14.4445L19.7883 14.3479C19.5573 14.2023 19.362 14.0854 19.0561 13.9685C19.0505 13.7739 19.0386 13.5793 19.0155 13.4036C18.6025 10.2109 16.5298 9.5291 14.8589 9.5186C13.3511 9.5186 12.0967 10.1626 11.3281 11.333L12.4985 12.1016C13.0137 11.3169 13.8082 10.9193 14.8547 10.9193C16.5116 10.9298 17.3922 11.7754 17.6267 13.58C16.828 13.4183 15.9285 13.3602 14.9618 13.4169C12.215 13.5751 11.0691 15.2306 11.1524 16.8021C11.2462 18.5423 12.747 19.7575 14.8036 19.7575C14.8946 19.7575 14.9849 19.7554 15.0724 19.7498C16.6803 19.6616 18.6459 18.8468 18.9994 15.5057C19.0141 15.5148 19.0281 15.5239 19.0428 15.533L19.2199 15.6429C19.8723 16.0363 20.3546 16.5648 20.6157 17.1724C21.0658 18.2231 21.0931 19.9472 19.6903 21.3486C18.4779 22.5596 17.0219 23.0839 14.8351 23.1C12.4061 23.0818 10.5658 22.2985 9.3667 20.7725C8.2495 19.3529 7.6727 17.3054 7.651 14.6986C7.6727 12.089 8.2495 10.0464 9.3667 8.6275C10.5665 7.1008 12.411 6.3182 14.8365 6.3C17.2809 6.3182 19.152 7.1043 20.3973 8.6366C21.0021 9.3807 21.4648 10.3229 21.7728 11.4352L23.1224 11.0628C22.7626 9.7622 22.2117 8.6485 21.4837 7.7532C19.9619 5.8814 17.7296 4.9217 14.8365 4.9C11.9525 4.9217 9.7419 5.8842 8.2656 7.7623C6.9531 9.4304 6.2748 11.7607 6.2503 14.6993C6.2748 17.6344 6.9531 19.9696 8.2656 21.6384C9.7419 23.5158 11.949 24.479 14.8351 24.5C17.3999 24.4811 19.2031 23.8147 20.6808 22.3391ZM17.4951 14.9835C17.5441 14.9947 17.5917 15.0052 17.6365 15.0157C17.633 15.0703 17.6295 15.1179 17.626 15.1543C17.4062 17.9039 16.0195 18.2966 14.9933 18.3526C14.9296 18.3561 14.8666 18.3582 14.8036 18.3582C13.5079 18.3582 12.6028 17.703 12.551 16.7279C12.5055 15.8753 13.1362 14.9247 15.0437 14.8155C15.2516 14.8029 15.456 14.7966 15.6562 14.7966C16.3275 14.7959 16.9463 14.8589 17.4951 14.9835Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 901 B

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

12
assets/icons/socials/x-social.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 B

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

6
assets/icons/socials/youtube.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"> <svg width="34" height="26" viewBox="0 0 34 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/> <path d="M32.8615 4.31373C32.549 2.58885 31.0601 1.33272 29.3321 0.940564C26.7463 0.392157 21.9608 0 16.7831 0C11.6085 0 6.74632 0.392157 4.15748 0.940564C2.4326 1.33272 0.940564 2.50919 0.628064 4.31373C0.3125 6.27451 0 9.01961 0 12.549C0 16.0784 0.3125 18.8235 0.704657 20.7843C1.02022 22.5092 2.50919 23.7653 4.23407 24.1575C6.97917 24.7059 11.6851 25.098 16.8627 25.098C22.0404 25.098 26.7463 24.7059 29.4914 24.1575C31.2163 23.7653 32.7053 22.5888 33.0208 20.7843C33.3333 18.8235 33.7255 15.9988 33.8051 12.549C33.6458 9.01961 33.2537 6.27451 32.8615 4.31373ZM12.549 18.0392V7.05882L22.117 12.549L12.549 18.0392Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 893 B

After

Width:  |  Height:  |  Size: 737 B

Before After
Before After

8
assets/icons/toc.svg
View file

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

Before

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 763 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 400 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 MiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 388 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 695 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 408 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 236 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 255 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 345 KiB

BIN
assets/images/cover-rapport.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 717 KiB

BIN
assets/images/image-rapport.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 620 KiB

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

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

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

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

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

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

87
assets/js/dropdown.js
View file

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

16
assets/js/header.js
View file

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

50
assets/js/hero-slider.js
View file

@ -1,50 +0,0 @@
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
export function initHeroSlider() {
const heroSlider = document.querySelector('.hero-slider');
if (!heroSlider) {
return;
}
const swiper = new Swiper('.hero-slider', {
// Optional parameters
loop: true,
speed: 600,
effect: 'fade',
fadeEffect: {
crossFade: true
},
// Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation)
touchRatio: 1,
touchAngle: 45,
grabCursor: true,
simulateTouch: true,
allowTouchMove: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Keyboard control
keyboard: {
enabled: true,
},
// Accessibility
a11y: {
prevSlideMessage: 'Diapositive précédente',
nextSlideMessage: 'Diapositive suivante',
paginationBulletMessage: 'Aller à la diapositive {{index}}',
},
});
}

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

@ -1,39 +0,0 @@
export function playVideo() {
const playButton = document.querySelector('#hero-play-video');
if (!playButton) {
return;
}
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';
const iframe = videoFull.querySelector('iframe');
if (iframe) {
const src = iframe.src;
// Ajouter les paramètres autoplay et mute pour YouTube
if (src) {
const separator = src.includes('?') ? '&' : '?';
iframe.src = src + separator + 'autoplay=1&mute=1';
iframe.setAttribute('allow', 'autoplay; encrypted-media');
}
}
}
});
}

60
assets/js/panel.js
View file

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

220
assets/js/report.js
View file

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

26
assets/js/script.js
View file

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

10
assets/js/share.js
View file

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

54
assets/js/swipers.js
View file

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

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

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

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

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

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

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

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

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

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

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

2
site/config/config.php
View file

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

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

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

2
site/snippets/footer.php
View file

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

18
site/snippets/header.php
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr "> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -13,11 +13,6 @@
<?= $site->title() ?> <?= $site->title() ?>
</title> </title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"
/>
<script src="<?= url('assets/js/script.js') ?>" type="module"></script> <script src="<?= url('assets/js/script.js') ?>" type="module"></script>
</head> </head>
@ -26,7 +21,7 @@
<div class="site-header__inner"> <div class="site-header__inner">
<h1 id="site-title"> <h1 id="site-title">
<a <a
href="<?= $site->url() ?>" href="https://www.index.ngo/"
aria-label="Retour à l’accueil" aria-label="Retour à l’accueil"
title="aller au site d'Index" title="aller au site d'Index"
> >
@ -34,13 +29,13 @@
</a> </a>
</h1> </h1>
<!-- Note: toujours mettre .header__title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes --> <!-- Note: toujours mettre .title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes -->
<p class="header__title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p> <p class="title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
<nav id="nav-highlight"> <nav id="nav-highlight">
<ul> <ul>
<li><a href="/enquetes">Enquêtes</a></li> <li><a href="#">Enquêtes</a></li>
<li><a href="/impacts">Impact</a></li> <li><a href="#">Impact</a></li>
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li> <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
</ul> </ul>
</nav> </nav>
@ -65,3 +60,4 @@
</div> </div>
</header> </header>
<?php snippet('nav') ?> <?php snippet('nav') ?>
<main>

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

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

7
site/snippets/nav.php
View file

@ -2,7 +2,7 @@
<p class="baseline">Index est une ONG d’investigation numérique au service du public, <p class="baseline">Index est une ONG d’investigation numérique au service du public,
de la vérité et de la justice.</p> de la vérité et de la justice.</p>
<form aria-label="Formulaire de recherche" class="search-form"> <form aria-label="Formulaire de recherche">
<span class="icon"><?= svg('assets/icons/search.svg') ?></span> <span class="icon"><?= svg('assets/icons/search.svg') ?></span>
<input type="text" id="search" class="input" placeholder="Rechercher"> <input type="text" id="search" class="input" placeholder="Rechercher">
</form> </form>
@ -11,9 +11,8 @@ de la vérité et de la justice.</p>
<nav> <nav>
<ul> <ul>
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li> <li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
<li class="highlight"><a href="/enquetes">Enquêtes</a></li> <li class="highlight"><a href="#">Enquêtes</a></li>
<li class="highlight"><a href="/impacts">Impact</a></li> <li class="highlight"><a href="#">Impact</a></li>
<li><a href="/dossiers">Dossiers</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li> <li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li> <li><a href="#">Ressources</a></li>

6
site/snippets/search-form.php
View file

@ -1,6 +0,0 @@
<div class="search-container">
<form aria-label="Formulaire de recherche" class="search-form">
<span class="icon"><?= svg('assets/icons/search.svg') ?></span>
<input type="text" id="search" class="input" placeholder="Rechercher">
</form>
</div>

2
site/templates/about.php
View file

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

220
site/templates/folder.php
View file

@ -1,220 +0,0 @@
<?php snippet('header') ?>
<main>
<header class="page__header">
<p class="page__type">Dossier</p>
<h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->description()->isNotEmpty()): ?>
<div class="description">
<p><?= $page->description() ?></p>
</div>
<?php endif ?>
</header>
<?php
// Récupérer les enquêtes associées à ce dossier
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
return $investigation->folder()->value() === $page->slug();
});
?>
<div class="btn--group" id="nav-folder">
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
</div>
<div class="content-folder">
<?php if ($investigations->isNotEmpty()): ?>
<section class="container-cards" id="section__investigations">
<h3 class="container__title">2 enquêtes</h3>
<?php foreach ($investigations as $investigation): ?>
<article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
<dl class="dl">
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Date de l'incident</dt>
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
</div>
<?php endif ?>
<?php if ($partners = $investigation->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>
<?php $partnerNames = [] ?>
<?php foreach ($partners as $partner): ?>
<?php $partnerNames[] = $partner->name()->value() ?>
<?php endforeach ?>
<?= implode(', ', $partnerNames) ?>
</dd>
</div>
<?php endif ?>
<?php endif ?>
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
</dl>
</div>
<?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper">
<ul class="keywords">
<?php foreach ($keywords as $keyword): ?>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
</article>
<?php endforeach ?>
</section>
<?php else: ?>
<p>Aucune enquête associée à ce dossier pour le moment.</p>
<?php endif ?>
<section id="section__impacts">
<h3 class="container__title">4 impacts</h3>
<!-- Contenu statique temporaire -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
</p>
</div>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
</p>
</div>
<ul class="investigations">
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
</ul>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
</p>
</div>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</main>
<?php snippet('footer') ?>

59
site/templates/folders.php
View file

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

297
site/templates/home.php
View file

@ -1,295 +1,10 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main>
<p>
<section class="section--home" id="home__hero"> L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir.
Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine.
<div class="section--inner"> Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits.
<p class="baseline">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et de&nbsp;la&nbsp;justice.</p> Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche.
</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>
</main> </main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

Some files were not shown because too many files have changed in this diff Show more