Compare commits
10 commits
36a7262c83
...
f9cdc18144
| Author | SHA1 | Date | |
|---|---|---|---|
|
f9cdc18144 | ||
|
|
bfa3025a54 | ||
|
|
3bd62f955f | ||
|
|
fe56d81c45 | ||
|
|
dce79809bc | ||
|
|
0364f65771 | ||
|
|
1e6b241a98 | ||
|
|
b5c8a389c3 | ||
|
|
b158d37cec | ||
|
|
1eb88cf679 |
16 changed files with 1576 additions and 377 deletions
|
|
@ -3,7 +3,9 @@
|
||||||
"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": []
|
||||||
|
|
|
||||||
|
|
@ -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/ -x header.php site site
|
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ 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
2
.gitignore
vendored
|
|
@ -61,4 +61,4 @@ Icon
|
||||||
|
|
||||||
# Local
|
# Local
|
||||||
local/
|
local/
|
||||||
/local/*
|
.claude
|
||||||
|
|
|
||||||
|
|
@ -1647,12 +1647,22 @@ body main {
|
||||||
margin-bottom: calc(var(--spacing) * 1.5);
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-template=investigations] main .search-container {
|
@media screen and (max-width: 560px) {
|
||||||
|
[data-template=investigations] main {
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
[data-template=investigations] main .card--article {
|
||||||
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
max-width: var(--max-w-content);
|
max-width: var(--max-w-content);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
[data-template=investigations] main .page__sort {
|
|
||||||
|
.page__sort {
|
||||||
max-width: var(--max-w-container);
|
max-width: var(--max-w-container);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
|
|
@ -2118,6 +2128,820 @@ body main {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#rapport {
|
||||||
|
--fig-outside: calc(var(--spacing)*2);
|
||||||
|
}
|
||||||
|
#rapport .container-figure {
|
||||||
|
width: calc(100% + var(--fig-outside) * 2);
|
||||||
|
position: relative;
|
||||||
|
left: calc(var(--fig-outside) * -1);
|
||||||
|
}
|
||||||
|
#rapport .fig-simple {
|
||||||
|
height: calc(100vh - var(--header-h) - var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
#rapport .fig-simple figure {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#rapport .fig-simple figure img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes add-border {
|
||||||
|
from {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
border-bottom: var(--grey-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-header {
|
||||||
|
z-index: 900;
|
||||||
|
--gap: 3ch;
|
||||||
|
width: 100vw;
|
||||||
|
height: var(--header-h);
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
padding: 0 var(--padding-body);
|
||||||
|
}
|
||||||
|
#site-header .site-header__inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--gap);
|
||||||
|
}
|
||||||
|
#site-header a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#site-header a:hover {
|
||||||
|
color: var(--grey-200);
|
||||||
|
}
|
||||||
|
#site-header #site-title {
|
||||||
|
flex-grow: 2;
|
||||||
|
}
|
||||||
|
#site-header #site-title svg {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#site-header #site-title svg {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-header .header__title-page {
|
||||||
|
display: none;
|
||||||
|
flex-grow: 2;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
#site-header ul {
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--gap);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#site-header #theme-toggle {
|
||||||
|
width: var(--h-block);
|
||||||
|
height: var(--h-block);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
#site-header #theme-toggle svg {
|
||||||
|
width: 18px;
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
#site-header #lang-toggle {
|
||||||
|
display: flex;
|
||||||
|
gap: 1ch;
|
||||||
|
}
|
||||||
|
#site-header #lang-toggle button:disabled {
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
}
|
||||||
|
#site-header #menu-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#site-header #menu-toggle svg {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
#site-header #menu-toggle .close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#site-header button:hover svg {
|
||||||
|
fill: var(--grey-200) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#site-header.is-visible {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#site-header.is-visible .site-header__inner {
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
}
|
||||||
|
#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#site-header.is-visible .site-header__inner #site-title {
|
||||||
|
flex-grow: 0;
|
||||||
|
width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1080px) {
|
||||||
|
#site-header.is-visible .site-header__inner #site-title {
|
||||||
|
width: calc(var(--banner-medium) - var(--padding-body));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-header.is-visible .site-header__inner .header__title-page {
|
||||||
|
flex-grow: 2;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#site-header.is-visible .site-header__inner .header__title-page {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-header.is-visible ~ main {
|
||||||
|
margin-top: var(--header-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1080px) {
|
||||||
|
#nav-highlight {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-menu {
|
||||||
|
position: fixed;
|
||||||
|
width: var(--menu-w);
|
||||||
|
height: calc(100dvh - var(--header-h));
|
||||||
|
height: calc(100vh - var(--header-h));
|
||||||
|
top: var(--header-h);
|
||||||
|
right: calc(var(--menu-w) * -1);
|
||||||
|
transition: right 0.3s ease-in;
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
border-left: var(--border-light);
|
||||||
|
padding: var(--padding-body);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 560px) {
|
||||||
|
#site-menu {
|
||||||
|
width: 100vw;
|
||||||
|
right: -100vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-menu .search-form {
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
#site-menu nav {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
#site-menu nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#site-menu nav ul li {
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
}
|
||||||
|
#site-menu nav ul li a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}
|
||||||
|
#site-menu nav ul li a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#site-menu nav ul .highlight {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.menu-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight {
|
||||||
|
transition: opacity 0.3s ease-in;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
body.menu-open #site-menu {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
body.menu-open #menu-toggle .open {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body.menu-open #menu-toggle .close {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#site-footer {
|
||||||
|
background-color: var(--dark);
|
||||||
|
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
#site-footer .logo {
|
||||||
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
|
margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
#site-footer .logo svg {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
#site-footer p {
|
||||||
|
margin: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
#site-footer p a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#site-footer p a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
#site-footer .p__small {
|
||||||
|
font-size: var(--fs-xsmall);
|
||||||
|
color: var(--grey-600);
|
||||||
|
}
|
||||||
|
#site-footer .footer__mentions p {
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
color: var(--color-txt);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#site-footer {
|
||||||
|
margin-top: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
#site-footer .footer__socials {
|
||||||
|
margin-top: calc(var(--spacing) * 0.75);
|
||||||
|
padding-top: calc(var(--spacing) * 0.25);
|
||||||
|
border-top: var(--border-light);
|
||||||
|
}
|
||||||
|
#site-footer .footer__socials .list-socials {
|
||||||
|
margin-top: calc(var(--spacing) * 0.5);
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.75);
|
||||||
|
}
|
||||||
|
#site-footer .footer__mentions {
|
||||||
|
border-top: var(--border-light);
|
||||||
|
padding-top: calc(var(--spacing) * 0.25);
|
||||||
|
}
|
||||||
|
#site-footer .footer__mentions p {
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#site-footer .site-footer__container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
-moz-column-gap: calc(var(--spacing) * 2);
|
||||||
|
column-gap: calc(var(--spacing) * 2);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#site-footer .footer__socials .socials {
|
||||||
|
max-width: 400px;
|
||||||
|
-moz-columns: 2;
|
||||||
|
columns: 2;
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
#site-footer .footer__mentions {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
#site-footer .footer__mentions p {
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100dvh;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
body main {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 0 var(--padding-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 560px) {
|
||||||
|
[data-template=investigations] main #container-cards {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
|
grid-auto-rows: minmax(100px, auto);
|
||||||
|
grid-gap: calc(var(--padding-body) * 1.5);
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 560px) {
|
||||||
|
[data-template=investigations] main #container-cards {
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
[data-template=investigations] main #container-cards .card--article {
|
||||||
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 560px) {
|
||||||
|
[data-template=investigations] main {
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
[data-template=investigations] main .card--article {
|
||||||
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__sort {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
grid-gap: var(--padding-inner);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-template=investigation-summary] main {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main header .page-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article a:hover {
|
||||||
|
color: var(--grey-200);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article .section__title {
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #nav--page ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #nav--page ul li {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #nav--page ul li a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.3em 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__short {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__dl {
|
||||||
|
margin-top: calc(var(--spacing) * 1.5);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__dl .dl__group {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--padding-inner);
|
||||||
|
grid-template-columns: 2fr 3fr;
|
||||||
|
position: relative;
|
||||||
|
border-top: var(--border-light);
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__dl dt {
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__dl ul:not(.keywords) {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__dl ul:not(.keywords) li {
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__synthese p + p {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__synthese h4 {
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
font-weight: normal;
|
||||||
|
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||||
|
text-decoration: 1px underline var(--color-txt-light);
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share-banner__desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share-banner__desktop ~ .modal--share {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share-banner__desktop:checked ~ .modal--share {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
[data-template=investigation-summary] main header {
|
||||||
|
padding-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main header .page-type {
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article {
|
||||||
|
margin: calc(var(--spacing) * 1.5) 0;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__impacts,
|
||||||
|
[data-template=investigation-summary] main #section__en-lien {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #hero {
|
||||||
|
margin: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #hero figcaption {
|
||||||
|
margin: 0 var(--padding-body);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .modal--share {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - var(--padding-body) * 2);
|
||||||
|
bottom: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #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;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page #nav--page {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(var(--spacing) * 0.25);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group > button,
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group > label {
|
||||||
|
width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease-in;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 560px) {
|
||||||
|
[data-template=investigation-summary] main #section__dl .dl__group {
|
||||||
|
-moz-column-gap: 1ch;
|
||||||
|
column-gap: 1ch;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
padding: calc(var(--spacing) * 0.25) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
[data-template=investigation-summary] main #banner--page {
|
||||||
|
height: calc(100vh - var(--header-h));
|
||||||
|
height: calc(100dvh - var(--header-h));
|
||||||
|
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||||
|
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||||
|
padding: var(--padding-body);
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-bottom: calc(var(--padding-body) * 2);
|
||||||
|
position: sticky;
|
||||||
|
top: var(--header-h);
|
||||||
|
width: var(--banner-medium);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(var(--spacing) * 0.25);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group > button,
|
||||||
|
[data-template=investigation-summary] main #banner--page .btn--group > label {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 160px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #hero {
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article {
|
||||||
|
margin-left: var(--banner-medium);
|
||||||
|
margin-top: calc(var(--spacing) * 3);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__short {
|
||||||
|
margin-top: var(--padding-body);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main header {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-left: var(--banner-medium);
|
||||||
|
margin-top: calc(var(--spacing) * 1.5);
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article .section__title {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #section__synthese {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
}
|
||||||
|
.modal--share {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25);
|
||||||
|
width: calc(100% - var(--padding-body));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1080px) {
|
||||||
|
[data-template=investigation-summary] main #banner--page {
|
||||||
|
width: calc((100% - var(--max-w-content)) / 2);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #hero {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main #hero figcaption {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
[data-template=investigation-summary] main .section__article {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: calc(var(--spacing) * 3) auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--rapport-w: 290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rapport {
|
||||||
|
margin-bottom: 20vh;
|
||||||
|
padding-left: calc(var(--rapport-w) + var(--padding-body) * 1);
|
||||||
|
padding-bottom: 10vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
|
||||||
|
margin-top: calc(var(--spacing) * -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#rapport .rapport__header {
|
||||||
|
margin-top: calc(var(--spacing) * 2);
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-bottom: calc(var(--spacing) * 2.5);
|
||||||
|
display: grid;
|
||||||
|
-moz-column-gap: var(--padding-inner);
|
||||||
|
column-gap: var(--padding-inner);
|
||||||
|
row-gap: calc(var(--spacing) * 1);
|
||||||
|
grid-template-columns: 30% 70%;
|
||||||
|
grid-template-rows: auto auto 1fr;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__title-group {
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__title-group .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);
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__title-group .subtitle {
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__figure {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4/5;
|
||||||
|
grid-row: span 2;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__figure img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__dl {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
align-self: start;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__dl .dl__group {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--padding-inner);
|
||||||
|
grid-template-columns: 2fr 3fr;
|
||||||
|
position: relative;
|
||||||
|
border-top: var(--border-light);
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .rapport__dl dt {
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .btn--group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: start;
|
||||||
|
gap: calc(var(--spacing) * 0.5);
|
||||||
|
position: relative;
|
||||||
|
grid-row: 3;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .btn--group button, #rapport .rapport__header .btn--group label {
|
||||||
|
min-width: 28ch;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .btn--group button a, #rapport .rapport__header .btn--group label a {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .modal--share {
|
||||||
|
max-width: 240px;
|
||||||
|
position: absolute;
|
||||||
|
height: 250px;
|
||||||
|
top: calc(var(--h-block) * 1.5);
|
||||||
|
left: 260px;
|
||||||
|
}
|
||||||
|
#rapport .rapport__header .modal--share::before {
|
||||||
|
content: "◀";
|
||||||
|
transform: rotate(90deg);
|
||||||
|
font-size: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: calc(var(--h-block) * 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#rapport .rapport__content {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
}
|
||||||
|
#rapport .rapport__content .section-content {
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
#rapport .rapport__content .section-title {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#rapport .rapport__content p {
|
||||||
|
margin: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
#rapport .rapport__content ul {
|
||||||
|
padding-left: 3ch;
|
||||||
|
}
|
||||||
|
#rapport .rapport__content:target {
|
||||||
|
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rapport__aside {
|
||||||
|
width: var(--rapport-w);
|
||||||
|
position: fixed;
|
||||||
|
top: calc(var(--header-h) + var(--padding-body));
|
||||||
|
left: var(--padding-body);
|
||||||
|
--border-aside: var(--border-light);
|
||||||
|
height: calc(100vh - var(--header-h) - var(--padding-body) * 4);
|
||||||
|
}
|
||||||
|
#rapport__aside .tabs {
|
||||||
|
display: flex;
|
||||||
|
border: var(--border-aside);
|
||||||
|
height: calc(var(--h-block) * 1.25);
|
||||||
|
}
|
||||||
|
#rapport__aside .tabs .tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 2ch;
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
#rapport__aside .tabs .tab[for=tab-print] {
|
||||||
|
width: calc(var(--h-block) * 1.5);
|
||||||
|
border-right: var(--border-aside);
|
||||||
|
padding-left: 0;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
#rapport__aside .tabs .tab[for=tab-print] .icon svg {
|
||||||
|
width: 18px;
|
||||||
|
fill: var(--color-txt);
|
||||||
|
}
|
||||||
|
#rapport__aside .content-aside {
|
||||||
|
padding: var(--padding-body);
|
||||||
|
height: calc(100% - var(--h-block) * 1.25);
|
||||||
|
overflow: scroll;
|
||||||
|
border: var(--border-aside);
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
#rapport__aside #toc ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
#rapport__aside #toc li {
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
}
|
||||||
|
#rapport__aside #toc li a {
|
||||||
|
display: block;
|
||||||
|
padding: 5px 1ch;
|
||||||
|
padding-top: 7px;
|
||||||
|
}
|
||||||
|
#rapport__aside #toc li.selected {
|
||||||
|
background-color: var(--grey-800);
|
||||||
|
color: var(--color-txt);
|
||||||
|
}
|
||||||
|
#rapport__aside #toc li:hover {
|
||||||
|
background-color: var(--grey-800);
|
||||||
|
}
|
||||||
|
#rapport__aside #toc .toc-level-1 {
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#rapport__aside #toc .toc-level-2 {
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
|
padding-left: 4ch;
|
||||||
|
}
|
||||||
|
#rapport__aside #toc a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#rapport__aside .btn--group {
|
||||||
|
margin-top: calc(var(--spacing) * 0.5);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--padding-inner);
|
||||||
|
}
|
||||||
|
#rapport__aside .btn--group [for=share-banner__aside] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#rapport__aside .btn--group #download-pdf a {
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
|
#rapport__aside .modal--share {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--h-block) * -1.5);
|
||||||
|
right: calc(-100% + var(--padding-inner));
|
||||||
|
}
|
||||||
|
#rapport__aside .modal--share::before {
|
||||||
|
content: "◀";
|
||||||
|
font-size: 10px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--h-block) * 0.25);
|
||||||
|
left: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-print, #tab-toc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-print:checked ~ .content-aside #toc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-print:checked ~ .content-aside #print-features {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-toc:checked ~ .content-aside #toc {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-toc:checked ~ .content-aside #print-features {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#rapport {
|
#rapport {
|
||||||
--fig-outside: calc(var(--spacing)*2);
|
--fig-outside: calc(var(--spacing)*2);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,40 +1,45 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
@import 'base/responsive';
|
@import "base/responsive";
|
||||||
@import 'base/var';
|
@import "base/var";
|
||||||
@import 'base/body';
|
@import "base/body";
|
||||||
|
|
||||||
@import 'partials/site-header';
|
@import "partials/site-header";
|
||||||
|
|
||||||
// @import 'components/nav-tabs';
|
// @import 'components/nav-tabs';
|
||||||
// @import 'components/btn--default';
|
// @import 'components/btn--default';
|
||||||
@import 'components/buttons';
|
@import "components/buttons";
|
||||||
@import 'components/tags';
|
@import "components/tags";
|
||||||
@import 'components/keywords';
|
@import "components/keywords";
|
||||||
@import 'components/details-summary';
|
@import "components/details-summary";
|
||||||
@import 'components/sort';
|
@import "components/sort";
|
||||||
|
|
||||||
@import 'components/figures';
|
@import "components/figures";
|
||||||
@import 'components/hero';
|
@import "components/hero";
|
||||||
@import 'components/form-newsletter';
|
@import "components/form-newsletter";
|
||||||
@import 'components/search-form';
|
@import "components/search-form";
|
||||||
@import 'components/list-socials';
|
@import "components/list-socials";
|
||||||
@import 'components/modal-share';
|
@import "components/modal-share";
|
||||||
@import 'components/text';
|
@import "components/text";
|
||||||
@import 'components/card-article';
|
@import "components/card-article";
|
||||||
@import 'components/card-article-small';
|
@import "components/card-article-small";
|
||||||
@import 'components/card-impact';
|
@import "components/card-impact";
|
||||||
@import 'components/card-open-graph';
|
@import "components/card-open-graph";
|
||||||
|
|
||||||
|
@import "partials/site-header";
|
||||||
|
@import "partials/site-menu";
|
||||||
|
@import "partials/site-footer";
|
||||||
|
@import "partials/main-layout";
|
||||||
|
|
||||||
@import 'partials/site-header';
|
@import "template/home";
|
||||||
@import 'partials/site-menu';
|
@import "template/investigations";
|
||||||
@import 'partials/site-footer';
|
@import "template/investigation-summary";
|
||||||
@import 'partials/main-layout';
|
@import "template/rapport";
|
||||||
|
|
||||||
|
|
||||||
@import 'template/home';
|
|
||||||
@import 'template/investigations';
|
|
||||||
@import 'template/investigation-summary';
|
|
||||||
@import 'template/rapport';
|
|
||||||
|
|
||||||
|
@import "partials/site-header";
|
||||||
|
@import "partials/site-menu";
|
||||||
|
@import "partials/site-footer";
|
||||||
|
@import "partials/main-layout";
|
||||||
|
|
||||||
|
@import "template/investigations";
|
||||||
|
@import "template/investigation";
|
||||||
|
@import "template/rapport";
|
||||||
|
|
|
||||||
290
assets/css/template/_investigation.scss
Normal file
290
assets/css/template/_investigation.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
header {
|
||||||
|
.page-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
a:hover {
|
||||||
|
color: var(--grey-200);
|
||||||
|
}
|
||||||
|
.section__title {
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav--page {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.3em 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#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 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share-banner__desktop:checked ~ .modal--share {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SMALL ----------------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
header {
|
||||||
|
padding-top: calc(var(--spacing) * 1);
|
||||||
|
.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) * 0.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 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner--page.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$x-small} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
#section__dl .dl__group {
|
||||||
|
column-gap: 1ch;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
padding: calc(var(--spacing) * 0.25) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DESKTOP ----------------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
@media #{$small-up} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
#banner--page {
|
||||||
|
height: calc(100vh - var(--header-h));
|
||||||
|
height: calc(100dvh - var(--header-h));
|
||||||
|
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||||
|
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||||
|
padding: var(--padding-body);
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-bottom: calc(var(--padding-body) * 2);
|
||||||
|
position: sticky;
|
||||||
|
top: var(--header-h);
|
||||||
|
width: var(--banner-medium);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner--page .btn--group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(var(--spacing) * 0.25);
|
||||||
|
|
||||||
|
> button,
|
||||||
|
> label {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 160px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
margin-left: var(--banner-medium);
|
||||||
|
margin-top: calc(var(--spacing) * 3);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__short {
|
||||||
|
margin-top: var(--padding-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-left: var(--banner-medium);
|
||||||
|
margin-top: calc(var(--spacing) * 1.5);
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
.section__title {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__synthese {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal--share {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(
|
||||||
|
var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25
|
||||||
|
);
|
||||||
|
width: calc(100% - var(--padding-body));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$medium-up} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
#banner--page {
|
||||||
|
width: calc((100% - var(--max-w-content)) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
figcaption {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: calc(var(--spacing) * 3) auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,48 +1,40 @@
|
||||||
|
[data-template="investigations"] main {
|
||||||
[data-template="investigations"] main{
|
#container-cards {
|
||||||
|
@media #{$x-small-up} {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
margin: 0 auto;
|
||||||
#container-cards{
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
@media #{$x-small-up}{
|
grid-auto-rows: minmax(100px, auto);
|
||||||
max-width: var(--max-w-container);
|
grid-gap: calc(var(--padding-body) * 1.5);
|
||||||
margin: 0 auto;
|
margin-bottom: 10vh;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
||||||
grid-auto-rows: minmax(100px, auto);
|
|
||||||
grid-gap: calc(var(--padding-body)*1.5);
|
|
||||||
margin-bottom: 10vh;
|
|
||||||
|
|
||||||
}
|
|
||||||
@media #{$x-small}{
|
|
||||||
margin-bottom: 10vh;
|
|
||||||
.card--article{
|
|
||||||
margin-bottom: calc(var(--spacing)*1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@media #{$x-small} {
|
||||||
.search-container{
|
margin-bottom: 10vh;
|
||||||
max-width: var(--max-w-content);
|
.card--article {
|
||||||
margin: 0 auto;
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
margin-bottom: calc(var(--spacing)*2);
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.page__sort{
|
@media #{$x-small} {
|
||||||
max-width: var(--max-w-container);
|
margin-bottom: 10vh;
|
||||||
display: flex;
|
.card--article {
|
||||||
justify-content: right;
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
grid-gap: var(--padding-inner);
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: calc(var(--spacing)*0.5);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__sort {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
grid-gap: var(--padding-inner);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
title: Investigation Summary
|
||||||
|
|
||||||
|
tabs:
|
||||||
|
contentTab:
|
||||||
|
label: Contenu
|
||||||
|
icon: page
|
||||||
|
columns:
|
||||||
|
- width: 2/6
|
||||||
|
fields:
|
||||||
|
created:
|
||||||
|
label: Première publication
|
||||||
|
type: date
|
||||||
|
display: DD / MM / YYYY
|
||||||
|
default: today
|
||||||
|
width: 1/2
|
||||||
|
- 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:
|
||||||
|
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
|
||||||
|
|
@ -14,4 +14,4 @@ tabs:
|
||||||
image:
|
image:
|
||||||
cover: true
|
cover: true
|
||||||
ratio: 12/7
|
ratio: 12/7
|
||||||
template: investigation
|
template: investigation-summary
|
||||||
|
|
|
||||||
|
|
@ -81,24 +81,3 @@ 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
|
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'debug' => true,
|
'debug' => true,
|
||||||
|
'locale' => 'fr_FR.UTF-8',
|
||||||
|
'date.handler' => 'intl',
|
||||||
'thumbs' => [
|
'thumbs' => [
|
||||||
'quality' => 80,
|
'quality' => 80,
|
||||||
'presets' => [
|
'presets' => [
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<div class="site-header__inner">
|
<div class="site-header__inner">
|
||||||
<h1 id="site-title">
|
<h1 id="site-title">
|
||||||
<a
|
<a
|
||||||
href="https://www.index.ngo/"
|
href="<?= $site->url() ?>"
|
||||||
aria-label="Retour à l’accueil"
|
aria-label="Retour à l’accueil"
|
||||||
title="aller au site d'Index"
|
title="aller au site d'Index"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,290 +1,285 @@
|
||||||
<?php snippet('header') ?>
|
<?php snippet('header') ?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Récupérer le rapport (première page enfant de type report)
|
||||||
|
$report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<?php if ($page->heroType()->value() == 'image'): ?>
|
||||||
|
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
|
||||||
|
<!-- HERO IMAGE SIMPLE -->
|
||||||
|
<div id="hero">
|
||||||
|
<figure>
|
||||||
|
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||||
|
</figure>
|
||||||
|
<?php if ($heroImage->caption()->isNotEmpty()): ?>
|
||||||
|
<figcaption><?= $heroImage->caption() ?></figcaption>
|
||||||
|
<?php endif ?>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php elseif ($page->heroType()->value() == 'slider'): ?>
|
||||||
|
<?php if ($heroImages = $page->heroImages()->toFiles()): ?>
|
||||||
<!-- HERO IMAGE SIMPLE ------------------------------ -->
|
<!-- HERO SLIDER -->
|
||||||
<!-- <div id="hero">
|
<div id="hero" class="hero-slider swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<?php foreach ($heroImages as $image): ?>
|
||||||
|
<div class="swiper-slide">
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
<img src="<?= $image->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||||
</figure>
|
</figure>
|
||||||
<figcaption>Ici la légende de l’image. À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</figcaption>
|
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||||
</div> -->
|
<figcaption><?= $image->caption() ?></figcaption>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
|
||||||
<!-- HERO SLIDER ------------------------------ -->
|
|
||||||
<!-- <div id="hero" class="hero-slider swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
|
||||||
</figure>
|
|
||||||
<figcaption>Ici la légende de l'image 1. À partir d'images exclusives, l'analyse conjointe de B'Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu'ils ne présentaient aucun danger.</figcaption>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/kanaky-visuel-1.png">
|
|
||||||
</figure>
|
|
||||||
<figcaption>Ici la légende de l'image 2</figcaption>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
|
||||||
</figure>
|
|
||||||
<figcaption>Ici la légende de l'image 3</figcaption>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
<div class="swiper-button-next"></div>
|
|
||||||
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- HERO VIDEO ------------------------------ -->
|
|
||||||
<div id="hero" class="hero-video">
|
|
||||||
|
|
||||||
<p class="page-title-small">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="player-container">
|
|
||||||
|
|
||||||
<div class="extract">
|
|
||||||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/07/Jumaa_Site-web-16-9.mp4"></video>
|
|
||||||
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
|
|
||||||
</div>
|
|
||||||
<div class="video-full">
|
|
||||||
<iframe id="youtube-vue-player-rhTyqvaQE" rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mort par noyade de Jumaa al-Hasan, exilé syrien : la police mise en cause" width="480" height="320" src="https://www.youtube.com/embed/HuH8NEwn0-k?autoplay=false&loop=1&controls=1&modestbranding=1&enablejsapi=1&origin=https%3A%2F%2Fwww.index.ngo&widgetid=1&forigin=https%3A%2F%2Fwww.index.ngo%2Fenquetes%2Fmort-par-noyade-de-jumaa-al-hasan-la-police-mise-en-cause%2F&aoriginsup=0&gporigin=https%3A%2F%2Fwww.index.ngo%2F&vf=1"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php endforeach ?>
|
||||||
<!-- <figure>
|
</div>
|
||||||
<img src="/assets/images/Nidal-Khaled-Amirah.png">
|
|
||||||
</figure> -->
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php elseif ($page->heroType()->value() == 'video'): ?>
|
||||||
|
<!-- HERO VIDEO -->
|
||||||
|
<div id="hero" class="hero-video">
|
||||||
|
|
||||||
|
<p class="page-title-small"><?= $page->title()->esc() ?></p>
|
||||||
|
|
||||||
|
<div class="player-container">
|
||||||
|
|
||||||
|
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
|
||||||
|
<div class="extract">
|
||||||
|
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $page->videoExtractUrl() ?>"></video>
|
||||||
|
<button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php if ($page->videoFullUrl()->isNotEmpty()): ?>
|
||||||
|
<div class="video-full">
|
||||||
|
<iframe rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoFullUrl() ?>"></iframe>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<p class="tag-inline">Enquête</p>
|
||||||
|
<h2 class="page-title"><?= $page->title()->esc() ?></h2>
|
||||||
|
<p class="date-publish"></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="banner--page">
|
||||||
|
<nav id="nav--page">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#section__short">Vidéo</a></li>
|
||||||
|
<li><a href="#section__synthese">Synthèse</a></li>
|
||||||
|
<li><a href="#section__impacts">Impacts</a></li>
|
||||||
|
<li><a href="#section__en-lien">En lien</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="btn--group">
|
||||||
|
<?php if ($report): ?>
|
||||||
|
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
|
||||||
|
<?php endif ?>
|
||||||
|
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="checkbox" id="share-banner__desktop">
|
||||||
|
<?php snippet('modal-share') ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if ($page->chapo()->isNotEmpty()): ?>
|
||||||
|
<p class="section__article" id="section__short"><?= $page->chapo()->inline() ?></p>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<dl class="section__article" id="section__dl">
|
||||||
|
<?php if ($page->incidentDate()->isNotEmpty()): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Date de l'incident</dt>
|
||||||
|
<dd><time datetime="<?= $page->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $page->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($page->incidentLocation()->isNotEmpty()): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Lieu de l'incident</dt>
|
||||||
|
<dd><?= $page->incidentLocation()->esc() ?></dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($page->incidentConsequences()->isNotEmpty()): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Conséquences</dt>
|
||||||
|
<dd><?= $page->incidentConsequences()->esc() ?></dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($keywords = $page->keywords()->split()): ?>
|
||||||
|
<?php if (count($keywords) > 0): ?>
|
||||||
|
<div class="dl__group dl__group__keywords">
|
||||||
|
<dt>Mots-clés</dt>
|
||||||
|
<dd>
|
||||||
|
<ul class="keywords">
|
||||||
|
<?php foreach ($keywords as $keyword): ?>
|
||||||
|
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($methodology = $page->methodology()->split()): ?>
|
||||||
|
<?php if (count($methodology) > 0): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Méthodologie</dt>
|
||||||
|
<dd>
|
||||||
|
<ul>
|
||||||
|
<?php foreach ($methodology as $method): ?>
|
||||||
|
<li><?= esc($method) ?></li>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($team = $page->team()->split()): ?>
|
||||||
|
<?php if (count($team) > 0): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Équipe</dt>
|
||||||
|
<dd><?= implode(', ', array_map('esc', $team)) ?></dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($partners = $page->partners()->toStructure()): ?>
|
||||||
|
<?php if ($partners->isNotEmpty()): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Partenaire(s)</dt>
|
||||||
|
<dd>
|
||||||
|
<?php $partnerLinks = [] ?>
|
||||||
|
<?php foreach ($partners as $partner): ?>
|
||||||
|
<?php if ($partner->link()->isNotEmpty()): ?>
|
||||||
|
<?php $partnerLinks[] = '<a href="' . $partner->link() . '" target="_blank">' . $partner->name()->esc() . '</a>' ?>
|
||||||
|
<?php else: ?>
|
||||||
|
<?php $partnerLinks[] = $partner->name()->esc() ?>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
<?= implode(', ', $partnerLinks) ?>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<?php if ($page->created()->isNotEmpty()): ?>
|
||||||
|
<div class="dl__group">
|
||||||
|
<dt>Date de publication</dt>
|
||||||
|
<dd><time datetime="<?= $page->created()->toDate('yyyy-MM-dd') ?>"><?= $page->created()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<?php if ($page->synthesis()->isNotEmpty()): ?>
|
||||||
|
<div class="section__article" id="section__synthese">
|
||||||
|
<h3 class="section__title">Synthèse</h3>
|
||||||
|
<?= $page->synthesis()->kt() ?>
|
||||||
|
</div>
|
||||||
|
<?php endif ?>
|
||||||
|
|
||||||
|
<div class="section__article" id="section__impacts">
|
||||||
|
<h3 class="section__title">Impacts</h3>
|
||||||
|
|
||||||
|
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||||
|
<div class="card--impact" data-impact-type="media">
|
||||||
|
<p class="tag">Médiatique</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>12 articles et reprises</p>
|
||||||
|
<p>1.5M de vues cumulées</p>
|
||||||
|
</div>
|
||||||
|
<details class="open-graph__details">
|
||||||
|
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
|
||||||
|
<div class="open-graph__inner">
|
||||||
|
<?php snippet('card-open-graph') ?>
|
||||||
</div>
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card--impact" data-impact-type="judiciaire">
|
||||||
|
<p class="tag">Judiciaire</p>
|
||||||
|
<p class="date">12 Dec 2025</p>
|
||||||
|
<div class="content">
|
||||||
|
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card--impact" data-impact-type="judiciaire">
|
||||||
|
<p class="tag">Judiciaire</p>
|
||||||
|
<p class="date">12 Dec 2025</p>
|
||||||
|
<div class="content">
|
||||||
|
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card--impact" data-impact-type="public">
|
||||||
|
<p class="tag">Judiciaire</p>
|
||||||
|
<p class="date">12 Dec 2025</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025. <a class="see-more" href="#">Voir plus</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Récupérer les enquêtes en lien
|
||||||
|
$relatedInvestigations = $page->relatedInvestigations()->toPages();
|
||||||
|
if ($relatedInvestigations->isEmpty()) {
|
||||||
|
// Si pas d'enquêtes liées définies, prendre les 3 dernières enquêtes (sauf la page actuelle)
|
||||||
|
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation-summary')->not($page)->listed()->limit(3);
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
<header>
|
<?php if ($relatedInvestigations->isNotEmpty()): ?>
|
||||||
<p class="tag-inline">Enquête</p>
|
<aside class="section__article" id="section__en-lien">
|
||||||
<h2 class="page-title">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
|
<h3 class="section__title">En lien</h3>
|
||||||
<p class="date-publish"></p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
<?php foreach ($relatedInvestigations as $related): ?>
|
||||||
|
<article class="card--article-small">
|
||||||
|
<?php if ($cover = $related->cover()->toFile()): ?>
|
||||||
|
<figure>
|
||||||
|
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
|
||||||
|
</figure>
|
||||||
|
<?php endif ?>
|
||||||
|
<div class="content">
|
||||||
|
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
|
||||||
|
<?php if ($related->incidentDate()->isNotEmpty()): ?>
|
||||||
|
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
|
||||||
|
<?php if (count($relatedKeywords) > 0): ?>
|
||||||
|
<ul class="keywords">
|
||||||
|
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||||
|
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</ul>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endif ?>
|
||||||
|
</div>
|
||||||
|
<a class="link-block" href="<?= $related->url() ?>"></a>
|
||||||
|
</article>
|
||||||
|
<?php endforeach ?>
|
||||||
|
|
||||||
<div id="banner--page">
|
</aside>
|
||||||
<nav id="nav--page">
|
<?php endif ?>
|
||||||
<ul>
|
|
||||||
<li><a href="#">Vidéo</a></li>
|
|
||||||
<li><a href="#">Synthèse</a></li>
|
|
||||||
<li><a href="#">Impacts</a></li>
|
|
||||||
<li><a href="#">En lien</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="btn--group">
|
<?php snippet('footer') ?>
|
||||||
<button class="btn--bold"><a href="/enquetes/enquete-1-full">Lire le rapport</a></button>
|
|
||||||
<label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="checkbox" id="share-banner__desktop">
|
|
||||||
<?php snippet('modal-share') ?>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<p class="section__article" id="section__short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<dl class="section__article" id="section__dl">
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Date de l’incident</dt>
|
|
||||||
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Lieu de l’incident</dt>
|
|
||||||
<dd>Naplouse, Cisjordanie occupée, Palestine</dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Conséquences</dt>
|
|
||||||
<dd>Mort</dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group dl__group__keywords">
|
|
||||||
<dt>Mots-clés</dt>
|
|
||||||
<dd>
|
|
||||||
<ul class="keywords">
|
|
||||||
<li><a href="#" target="_blank">Occupation</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Méthodologie</dt>
|
|
||||||
<dd>
|
|
||||||
<ul>
|
|
||||||
<li>Reconstitution 3D</li>
|
|
||||||
<li>Frame-match</li>
|
|
||||||
<li>Analyse audiovisuelle</li>
|
|
||||||
</ul>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Équipe</dt>
|
|
||||||
<dd>Nadav Joffe, Basile Trouillet, Francesco Sebregondi, Basile Trouillet, Francesco Sebregondi</dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Partenaire(s)</dt>
|
|
||||||
<dd><a href="#" target="_blank">B’Tselem</a></dd>
|
|
||||||
</div>
|
|
||||||
<div class="dl__group">
|
|
||||||
<dt>Date de publication</dt>
|
|
||||||
<dd><time datetime="2025-12-09">09 dec 2025</time></dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<div class="section__article" id="section__synthese">
|
|
||||||
<h3 class="section__title">Synthèse</h3>
|
|
||||||
|
|
||||||
<p>Le 10 juin 2025, lors d’un raid de grande envergure dans la vieille ville de Naplouse, les forces armées israéliennes ont tué deux Palestiniens : les frères Nidal et Khaled ‘Amirah.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Suite à l’incident, l’armée israélienne a affirmé dans un communiqué que les hommes étaient des « terroristes » qui avaient essayé de s’emparer de l’arme d’un soldat et en avaient blessé quatre autres. Les soldats auraient alors riposté en tirant sur les deux hommes, les tuant tous les deux.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Cependant, l’analyse vidéo et les témoignages recueillis contredisent cette version des faits. Une enquête menée conjointement par B’Tselem et Index révèle que les frères ‘Amirah n’ont à aucun moment posé de danger pour les soldats impliqués. Pourtant, Khaled a été exécuté à bout portant alors qu’il était maintenu au sol par plusieurs soldats armés, tandis que son frère Nidal a été abattu par un tir dans le dos. Les soldats ont également empêché les secouristes présents de leur prêter assistance.
|
|
||||||
</p>
|
|
||||||
<h4>Un sous-titre ici pour tester</h4>
|
|
||||||
<p>
|
|
||||||
Les corps de Nidal et de Khaled ‘Amirah sont toujours détenus par les forces armées israéliennes.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
À Naplouse comme à Jénine – où des soldats ont été filmés le mois dernier en train d’exécuter deux Palestiniens qui s’étaient rendus – ces images révèlent une politique de “tir à vue”, qui permet à l’armée israélienne de faire un usage sans aucun frein de la force létale contre les Palestiniens. Depuis octobre 2023, Israël a tué plus de 1 000 Palestiniens en Cisjordanie occupée.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="section__article" id="section__impacts">
|
|
||||||
<h3 class="section__title">Impacts</h3>
|
|
||||||
|
|
||||||
<div class="card--impact" data-impact-type="media">
|
|
||||||
<p class="tag">Médiatique</p>
|
|
||||||
<div class="content">
|
|
||||||
<p>12 articles et reprises</p>
|
|
||||||
<p>1.5M de vues cumulées</p>
|
|
||||||
</div>
|
|
||||||
<details class="open-graph__details">
|
|
||||||
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
|
|
||||||
<div class="open-graph__inner">
|
|
||||||
<?php snippet('card-open-graph') ?>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card--impact" data-impact-type="judiciaire">
|
|
||||||
<p class="tag">Judiciaire</p>
|
|
||||||
<p class="date">12 Dec 2025</p>
|
|
||||||
<div class="content">
|
|
||||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card--impact" data-impact-type="judiciaire">
|
|
||||||
<p class="tag">Judiciaire</p>
|
|
||||||
<p class="date">12 Dec 2025</p>
|
|
||||||
<div class="content">
|
|
||||||
<p >La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah”
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card--impact" data-impact-type="public">
|
|
||||||
<p class="tag">Judiciaire</p>
|
|
||||||
<p class="date">12 Dec 2025</p>
|
|
||||||
<div class="content">
|
|
||||||
<p>Index présente une série d’enquêtes récentes au Festival du Réel 2025. <a class="see-more" href="#">Voir plus</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<aside class="section__article" id="section__en-lien">
|
|
||||||
<h3 class="section__title">En lien</h3>
|
|
||||||
|
|
||||||
<article class="card--article-small">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/Nahel-visuel1.png">
|
|
||||||
</figure>
|
|
||||||
<div class="content">
|
|
||||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
|
|
||||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
|
||||||
<ul class="keywords">
|
|
||||||
<li><a href="#" target="_blank">Occupation</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="card--article-small">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/Jumaa-visuel-1.png">
|
|
||||||
</figure>
|
|
||||||
<div class="content">
|
|
||||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">La mort par noyade de Jumaa al-Hasan</a></h4>
|
|
||||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
|
||||||
<ul class="keywords">
|
|
||||||
<li><a href="#" target="_blank">Occupation</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="card--article-small">
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/kanaky-visuel-1.png">
|
|
||||||
</figure>
|
|
||||||
<div class="content">
|
|
||||||
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</a></h4>
|
|
||||||
<time datetime="2024-06-27">27 Jun 2024</time>
|
|
||||||
<ul class="keywords">
|
|
||||||
<li><a href="#" target="_blank">Occupation</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
<li><a href="#" target="_blank">Forces armées</a></li>
|
|
||||||
<li><a href="#" target="_blank">Colonialité</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
|
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
|
||||||
<div class="dl__group">
|
<div class="dl__group">
|
||||||
<dt>Date de l'incident</dt>
|
<dt>Date de l'incident</dt>
|
||||||
<dd><time datetime="<?= $investigation->incidentDate()->toDate('Y-m-d') ?>"><?= $investigation->incidentDate()->toDate('d F Y') ?></time></dd>
|
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
|
||||||
</div>
|
</div>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue