harmonisation des styles
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
This commit is contained in:
Julie Blanc
parent
9ead1c51f4
commit
b3f985a41b
30 changed files with 1601 additions and 465 deletions
|
|
@ -4,18 +4,41 @@
|
|||
|
||||
@include grid-content();
|
||||
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
&:first-of-type{
|
||||
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();
|
||||
|
||||
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{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -38,12 +61,11 @@
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.keywords--small{
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing)*0.25);
|
||||
color: var(--color-txt-light);
|
||||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
|
||||
.description{
|
||||
@include clamp(2);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -60,6 +82,17 @@
|
|||
}
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
// figure{
|
||||
// aspect-ratio: inherit;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.icon-article{ display: none; }
|
||||
.description{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -70,11 +103,21 @@
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.keywords--small{
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
|
||||
.keywords {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
padding-right: calc(var(--padding-inner)*1);
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// font-size: var(--fs-small);
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
|
|||
|
|
@ -79,20 +79,46 @@
|
|||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// @media #{$x-small}{
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: calc(var(--padding-inner)*0.5);
|
||||
|
||||
// .content{ display: contents;}
|
||||
|
||||
// .title{ order: 1; }
|
||||
// figure{ order: 2; }
|
||||
// .short{ order: 3; }
|
||||
// ul{ order: 4; }
|
||||
// }
|
||||
[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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
111
assets/css/components/_card-impact-small.scss
Normal file
111
assets/css/components/_card-impact-small.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
.card--impact-small {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
|
||||
@media #{$x-small} {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) .content,
|
||||
.keywords {
|
||||
@media #{$x-small} {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
@media #{$x-small} {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,34 +1,66 @@
|
|||
.card--impact {
|
||||
|
||||
.card--impact{
|
||||
@include grid-content();
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link{
|
||||
@include hover-card-line();
|
||||
}
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
border: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
|
||||
.card--impact__inner {
|
||||
@include grid-content();
|
||||
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
|
||||
|
||||
|
||||
|
||||
// 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{
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content{
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
&:not([data-impact-type="media"]) .content{
|
||||
@media #{$x-small}{ grid-column: span 2; }
|
||||
|
||||
.card--open-graph {
|
||||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tag{
|
||||
.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;
|
||||
|
|
@ -37,8 +69,8 @@
|
|||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]){
|
||||
.content{
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
}
|
||||
|
||||
|
|
@ -47,32 +79,38 @@
|
|||
|
||||
|
||||
|
||||
.investigations{
|
||||
.investigations {
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
|
||||
a{
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
}
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
svg{
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
li:hover{
|
||||
a{
|
||||
|
||||
li:hover {
|
||||
a {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.icon svg{ fill: var(--color-txt); }
|
||||
|
||||
.icon svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -84,21 +122,28 @@
|
|||
|
||||
|
||||
|
||||
.open-graph__details{
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
summary{
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
.arrow-details svg{ fill: var(--color-txt-light);}
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
@media #{$x-small}{
|
||||
summary{
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
.summary-inner{
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,24 +151,114 @@
|
|||
|
||||
|
||||
|
||||
.open-graph__inner{
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.card--open-graph{
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@container impact (width < 420px) {
|
||||
.date, .content, details{
|
||||
font-size: 14px!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
@include grid-content();
|
||||
|
||||
border: var(--border-light);
|
||||
// border: var(--border-light);
|
||||
border: 1px solid var(--grey-600);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
86
assets/css/components/_slider-before-after.scss
Normal file
86
assets/css/components/_slider-before-after.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
|
||||
.slider-before-after{
|
||||
|
||||
width: 100%;
|
||||
|
||||
max-width: 700px;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// max-width: 800px;
|
||||
// max-height: 90vh;
|
||||
// aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: .2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* z-index: 10; */
|
||||
left: var(--position);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider-button {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
padding: .5rem;
|
||||
border-radius: 100vw;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
top: 50%;
|
||||
left: var(--position);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
/* z-index: 100; */
|
||||
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
#home__investigations {
|
||||
.swiper {
|
||||
|
||||
|
||||
--slide-padding: 30px;
|
||||
|
||||
|
||||
|
|
@ -7,6 +9,7 @@
|
|||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
// background-color: red;
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
right: 0px;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid var(--color-bg);
|
||||
transition: border-color ease-in .5s;
|
||||
// border-bottom: 1px solid var(--color-bg);
|
||||
// transition: border-color ease-in .5s;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
@media #{$small}{
|
||||
|
|
|
|||
|
|
@ -165,8 +165,6 @@ body.is-hidden .btn--back-to-top {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid var(--color-bg);
|
||||
transition: border-color ease-in 0.5s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -180,6 +178,7 @@ body.is-hidden .btn--back-to-top {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -1247,7 +1246,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
position: relative;
|
||||
|
|
@ -1255,9 +1254,30 @@ button.sort[data-sort-type=up] .arrow {
|
|||
position: relative;
|
||||
}
|
||||
.card--article-small:first-of-type {
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--article-small.has-link {
|
||||
border-bottom: var(--border-light);
|
||||
position: relative;
|
||||
}
|
||||
.card--article-small.has-link:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--article-small.has-link::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
.card--article-small.has-link:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--article-small.has-link:hover::before {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--article-small figure {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
|
|
@ -1270,6 +1290,23 @@ button.sort[data-sort-type=up] .arrow {
|
|||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--article-small figure {
|
||||
margin-left: 45px;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--article-small figure {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.card--article-small .icon-article {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--article-small .icon-article svg {
|
||||
width: 20px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--article-small .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1291,12 +1328,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--article-small .keywords--small {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing) * 0.25);
|
||||
color: var(--color-txt-light);
|
||||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
.card--article-small .description {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.card--article-small .btn--go-to {
|
||||
position: absolute;
|
||||
|
|
@ -1352,6 +1389,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--article-small .icon-article {
|
||||
display: none;
|
||||
}
|
||||
.card--article-small .description {
|
||||
display: none;
|
||||
}
|
||||
.card--article-small .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1362,26 +1405,25 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.card--article-small .keywords--small {
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
.card--article-small .keywords {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
padding-right: calc(var(--padding-inner) * 1);
|
||||
}
|
||||
.card--article-small .keywords li, .card--article-small .keywords a {
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
.card--impact {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border-bottom: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
position: relative;
|
||||
}
|
||||
.card--impact:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
border: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.card--impact.has-link {
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -1405,92 +1447,111 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--impact.has-link:hover::before {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--impact .btn--go-to {
|
||||
.card--impact .card--impact__inner {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
padding: calc(var(--padding-inner) * 1.5) var(--padding-inner);
|
||||
position: relative;
|
||||
}
|
||||
.card--impact .card--impact__inner .btn--go-to {
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
}
|
||||
.card--impact .btn--go-to svg {
|
||||
.card--impact .card--impact__inner .btn--go-to svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--impact .btn--go-to svg {
|
||||
.card--impact .card--impact__inner .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact .btn--go-to {
|
||||
.card--impact .card--impact__inner .btn--go-to {
|
||||
right: calc(var(--padding-inner) * 0.5);
|
||||
bottom: calc(var(--padding-inner) * 0.25);
|
||||
}
|
||||
.card--impact .btn--go-to svg {
|
||||
.card--impact .card--impact__inner .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.card--impact:hover .btn--go-to {
|
||||
.card--impact .card--impact__inner:hover .btn--go-to {
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
.card--impact .btn--go-to {
|
||||
.card--impact .card--impact__inner .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1);
|
||||
bottom: auto;
|
||||
}
|
||||
.card--impact .content {
|
||||
.card--impact .card--impact__inner .content {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--impact .card--impact__inner .card--open-graph {
|
||||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
.card--impact .card--impact__inner .keywords-wrapper {
|
||||
grid-column: 1;
|
||||
grid-row: 2/4;
|
||||
align-self: end;
|
||||
z-index: 10;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact:not([data-impact-type=media]) .content {
|
||||
.card--impact .card--impact__inner:not([data-impact-type=media]) .content {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
.card--impact .tag {
|
||||
.card--impact .card--impact__inner .tag {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
.card--impact:not([data-impact-type=media]) .content {
|
||||
.card--impact .card--impact__inner:not([data-impact-type=media]) .content {
|
||||
padding-right: calc(var(--padding-inner) * 2.5);
|
||||
}
|
||||
.card--impact .investigations {
|
||||
.card--impact .card--impact__inner .investigations {
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--impact .investigations a {
|
||||
.card--impact .card--impact__inner .investigations a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .investigations .icon {
|
||||
.card--impact .card--impact__inner .investigations .icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.card--impact .investigations .icon svg {
|
||||
.card--impact .card--impact__inner .investigations .icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .investigations li:hover a {
|
||||
.card--impact .card--impact__inner .investigations li:hover a {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.card--impact .investigations li:hover .icon svg {
|
||||
.card--impact .card--impact__inner .investigations li:hover .icon svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details {
|
||||
.card--impact .card--impact__inner .open-graph__details {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--impact .open-graph__details summary,
|
||||
.card--impact .open-graph__details .summary-inner {
|
||||
.card--impact .card--impact__inner .open-graph__details summary,
|
||||
.card--impact .card--impact__inner .open-graph__details .summary-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
.card--impact .open-graph__details .arrow-details {
|
||||
.card--impact .card--impact__inner .open-graph__details .arrow-details {
|
||||
line-height: 0;
|
||||
--size: 11px;
|
||||
height: var(--size);
|
||||
|
|
@ -1501,53 +1562,297 @@ button.sort[data-sort-type=up] .arrow {
|
|||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.card--impact .open-graph__details .arrow-details svg {
|
||||
.card--impact .card--impact__inner .open-graph__details .arrow-details svg {
|
||||
transition: transform 0.2s ease-in;
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details summary:hover {
|
||||
.card--impact .card--impact__inner .open-graph__details summary:hover {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details summary:hover .arrow-details svg {
|
||||
.card--impact .card--impact__inner .open-graph__details summary:hover .arrow-details svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details[open] .arrow-details svg {
|
||||
.card--impact .card--impact__inner .open-graph__details[open] .arrow-details svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.card--impact .open-graph__details summary {
|
||||
.card--impact .card--impact__inner .open-graph__details summary {
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .open-graph__details summary .arrow-details svg {
|
||||
.card--impact .card--impact__inner .open-graph__details summary .arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact .open-graph__details {
|
||||
.card--impact .card--impact__inner .open-graph__details {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.card--impact .open-graph__details summary {
|
||||
.card--impact .card--impact__inner .open-graph__details summary {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
.card--impact .open-graph__details summary .summary-inner {
|
||||
.card--impact .card--impact__inner .open-graph__details summary .summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.card--impact .open-graph__inner {
|
||||
.card--impact .card--impact__inner .open-graph__inner {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--impact .open-graph__inner .card--open-graph {
|
||||
.card--impact .card--impact__inner .open-graph__inner .card--open-graph {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
@container impact (width < 420px) {
|
||||
.date, .content, details {
|
||||
@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;
|
||||
}
|
||||
.card--impact__inner .tag, .card--impact__inner .date {
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px !important;
|
||||
}
|
||||
.card--impact__inner .content {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.card--impact__inner .card--open-graph {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--impact__inner .investigations {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--impact__inner .keywords-wrapper {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.card--impact__inner .date,
|
||||
.card--impact__inner .content,
|
||||
.card--impact__inner details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.card--impact__inner .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1.25) !important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner) * 1.25) !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact__inner {
|
||||
display: block !important;
|
||||
padding-top: var(--padding-inner) !important;
|
||||
padding-bottom: calc(var(--padding-inner) * 0.75) !important;
|
||||
}
|
||||
.card--impact__inner .tag, .card--impact__inner .date {
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px !important;
|
||||
}
|
||||
.card--impact__inner .content {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.card--impact__inner .card--open-graph {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--impact__inner .investigations {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--impact__inner .keywords-wrapper {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.card--impact__inner .date,
|
||||
.card--impact__inner .content,
|
||||
.card--impact__inner details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.card--impact__inner .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1.25) !important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner) * 1.25) !important;
|
||||
}
|
||||
}
|
||||
.card--impact-small {
|
||||
border-bottom: var(--border-light);
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
padding: var(--padding-inner) 0;
|
||||
position: relative;
|
||||
}
|
||||
.card--impact-small:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--impact-small.has-link {
|
||||
border-bottom: var(--border-light);
|
||||
position: relative;
|
||||
}
|
||||
.card--impact-small.has-link:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--impact-small.has-link::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
.card--impact-small.has-link:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--impact-small.has-link:hover::before {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--impact-small .btn--go-to {
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
}
|
||||
.card--impact-small .btn--go-to svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--impact-small .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact-small .btn--go-to {
|
||||
right: calc(var(--padding-inner) * 0.5);
|
||||
bottom: calc(var(--padding-inner) * 0.25);
|
||||
}
|
||||
.card--impact-small .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.card--impact-small:hover .btn--go-to {
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
.card--impact-small .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1);
|
||||
bottom: auto;
|
||||
}
|
||||
.card--impact-small .content {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--impact-small .card--open-graph {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
.card--impact-small .keywords {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact-small .keywords {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.card--impact-small .keywords li, .card--impact-small .keywords a {
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact-small:not([data-impact-type=media]) .content,
|
||||
.card--impact-small .keywords {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
.card--impact-small .tag {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
.card--impact-small:not([data-impact-type=media]) .content {
|
||||
padding-right: calc(var(--padding-inner) * 2.5);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact-small:not([data-impact-type=media]) .content {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.card--impact-small .open-graph__details {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--impact-small .open-graph__details summary,
|
||||
.card--impact-small .open-graph__details .summary-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
.card--impact-small .open-graph__details .arrow-details {
|
||||
line-height: 0;
|
||||
--size: 11px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.card--impact-small .open-graph__details .arrow-details svg {
|
||||
transition: transform 0.2s ease-in;
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact-small .open-graph__details summary:hover {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.card--impact-small .open-graph__details summary:hover .arrow-details svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact-small .open-graph__details[open] .arrow-details svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.card--impact-small .open-graph__details summary {
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--impact-small .open-graph__details summary .arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact-small .open-graph__details {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.card--impact-small .open-graph__details summary {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
.card--impact-small .open-graph__details summary .summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.card--impact-small .open-graph__inner {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--impact-small .open-graph__inner .card--open-graph {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
|
|
@ -1664,6 +1969,63 @@ button.sort[data-sort-type=up] .arrow {
|
|||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] .card--folder {
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder.has-link {
|
||||
border-bottom: var(--border-light);
|
||||
position: relative;
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder.has-link:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder.has-link::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder.has-link:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder.has-link:hover::before {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder figure {
|
||||
margin-left: 45px;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigation-summary] .card--folder figure {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder .title .icon {
|
||||
display: none;
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder .icon-folder {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
[data-template=investigation-summary] .card--folder .icon-folder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] .card--folder .icon-folder svg {
|
||||
width: 20px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
@container cardfolder (width < 680px) {
|
||||
figure {
|
||||
aspect-ratio: inherit;
|
||||
|
|
@ -1689,7 +2051,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border: var(--border-light);
|
||||
border: 1px solid var(--grey-600);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1761,66 +2123,138 @@ button.sort[data-sort-type=up] .arrow {
|
|||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
#home__investigations {
|
||||
.swiper {
|
||||
--slide-padding: 30px;
|
||||
}
|
||||
#home__investigations .swiper-button-prev,
|
||||
#home__investigations .swiper-button-next {
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
}
|
||||
#home__investigations .swiper-button-prev svg,
|
||||
#home__investigations .swiper-button-next svg {
|
||||
.swiper .swiper-button-prev svg,
|
||||
.swiper .swiper-button-next svg {
|
||||
width: 14px;
|
||||
}
|
||||
#home__investigations .swiper-button-prev.swiper-button-disabled,
|
||||
#home__investigations .swiper-button-next.swiper-button-disabled {
|
||||
.swiper .swiper-button-prev.swiper-button-disabled,
|
||||
.swiper .swiper-button-next.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
#home__investigations .swiper-button-prev.swiper-button-disabled svg,
|
||||
#home__investigations .swiper-button-next.swiper-button-disabled svg {
|
||||
.swiper .swiper-button-prev.swiper-button-disabled svg,
|
||||
.swiper .swiper-button-next.swiper-button-disabled svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
#home__investigations .swiper-button-prev {
|
||||
.swiper .swiper-button-prev {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#home__investigations .swiper-button-next {
|
||||
.swiper .swiper-button-next {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#home__investigations .swiper-slide {
|
||||
.swiper .swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
#home__investigations .swiper-pagination {
|
||||
.swiper .swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
#home__investigations .swiper-pagination .swiper-pagination-bullet {
|
||||
.swiper .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
|
||||
.swiper .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#home__investigations .swiper-button-prev,
|
||||
#home__investigations .swiper-button-next {
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
#home__investigations .swiper-slide {
|
||||
.swiper .swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-before-after {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
}
|
||||
.slider-before-after img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.slider-before-after .image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.slider-before-after .slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: left;
|
||||
object-position: left;
|
||||
}
|
||||
.slider-before-after .image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
.slider-before-after .slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.slider-before-after .slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.slider-before-after .slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 0.2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* z-index: 10; */
|
||||
left: var(--position);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.slider-before-after .slider-button {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
padding: 0.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 hsla(0, 50%, 2%, 0.5);
|
||||
}
|
||||
|
||||
#site-header {
|
||||
z-index: var(--z-header);
|
||||
--gap: 3ch;
|
||||
|
|
@ -1836,8 +2270,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid var(--color-bg);
|
||||
transition: border-color ease-in 0.5s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -1851,6 +2283,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -2471,6 +2904,7 @@ main .page__header .description-medium {
|
|||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
}
|
||||
[data-template=report] .report__content .report__txt {
|
||||
grid-row: 1;
|
||||
|
|
@ -2478,13 +2912,12 @@ main .page__header .description-medium {
|
|||
max-width: var(--max-w-content);
|
||||
}
|
||||
[data-template=report] .report__content #report__medias {
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
background-color: red;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
border: var(--border-light);
|
||||
min-height: 100px;
|
||||
}
|
||||
[data-template=report] #toggle-panel {
|
||||
|
|
@ -2601,8 +3034,7 @@ main .page__header .description-medium {
|
|||
}
|
||||
|
||||
.report__content .section-content {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
border-bottom: 1px solid red;
|
||||
padding-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.report__content .section-content:target {
|
||||
padding-top: calc(var(--header-h) + var(--spacing) * 2);
|
||||
|
|
@ -2629,6 +3061,17 @@ main .page__header .description-medium {
|
|||
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
||||
}
|
||||
|
||||
.media video {
|
||||
width: 100%;
|
||||
}
|
||||
.media figure {
|
||||
height: auto;
|
||||
}
|
||||
.media .caption {
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#toggle-panel {
|
||||
width: calc(var(--h-block) * 1);
|
||||
padding: 0;
|
||||
|
|
@ -2719,24 +3162,6 @@ main .page__header .description-medium {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#report {
|
||||
--fig-outside: calc(var(--spacing)*2);
|
||||
}
|
||||
#report .fig-simple {
|
||||
height: calc(100vh - var(--header-h) - var(--spacing) * 2);
|
||||
}
|
||||
#report .fig-simple figure {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#report .fig-simple figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.content-folder {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -28,9 +28,12 @@
|
|||
@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/swipper";
|
||||
@import "components/swiper";
|
||||
@import "components/slider-before-after";
|
||||
|
||||
|
||||
@import "partials/site-header";
|
||||
@import "partials/site-menu";
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
|
||||
.report__txt {
|
||||
grid-row: 1;
|
||||
|
|
@ -74,14 +74,14 @@
|
|||
}
|
||||
|
||||
#report__medias {
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
background-color: red;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
border: var(--border-light);
|
||||
// border: var(--border-light);
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
|
|
@ -240,8 +240,7 @@
|
|||
|
||||
|
||||
.section-content {
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
border-bottom: 1px solid red;
|
||||
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); }
|
||||
|
|
@ -249,6 +248,8 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
|
|
@ -270,6 +271,24 @@
|
|||
}
|
||||
|
||||
|
||||
.media{
|
||||
|
||||
video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption{
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// PANEL-LEFT --------------------------------------------
|
||||
|
||||
|
|
@ -403,27 +422,6 @@
|
|||
|
||||
|
||||
|
||||
#report {
|
||||
--fig-outside: calc(var(--spacing)*2);
|
||||
|
||||
// .container-figure {
|
||||
// width: 100%;
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.fig-simple {
|
||||
height: calc(100vh - var(--header-h) - var(--spacing)*2);
|
||||
|
||||
figure {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 763 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 910 KiB After Width: | Height: | Size: 400 KiB |
BIN
assets/images/adam-raihane/fig-1.png
Normal file
BIN
assets/images/adam-raihane/fig-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 706 KiB After Width: | Height: | Size: 388 KiB |
BIN
assets/images/adam-raihane/fig-4.png
Normal file
BIN
assets/images/adam-raihane/fig-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
BIN
assets/images/adam-raihane/fig-5.png
Normal file
BIN
assets/images/adam-raihane/fig-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
assets/images/adam-raihane/fig-6.png
Normal file
BIN
assets/images/adam-raihane/fig-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
BIN
assets/images/adam-raihane/fig-7.png
Normal file
BIN
assets/images/adam-raihane/fig-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 345 KiB |
|
|
@ -1,47 +0,0 @@
|
|||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
||||
|
||||
export function initHomeInvestigationsSlider() {
|
||||
const slider = document.querySelector('.home-investigations-slider');
|
||||
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const swiper = new Swiper('.home-investigations-slider', {
|
||||
// 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: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
// Accessibility
|
||||
a11y: {
|
||||
prevSlideMessage: 'Investigation précédente',
|
||||
nextSlideMessage: 'Investigation suivante',
|
||||
paginationBulletMessage: 'Aller à l\'investigation {{index}}',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -1,16 +1,35 @@
|
|||
|
||||
import { initSwipers } from './swipers.js';
|
||||
|
||||
export function report(responsiveSmall) {
|
||||
if (document.body.dataset.template === 'report') {
|
||||
console.log('report');
|
||||
|
||||
// Initialiser tous les sliders et swipers de la page
|
||||
initSliderBeforeAfter();
|
||||
initSwipers();
|
||||
|
||||
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
|
||||
if (window.matchMedia(responsiveSmall).matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -115,6 +134,10 @@ function initMediaDisplay() {
|
|||
// Ajouter le nouveau media
|
||||
reportMedias.appendChild(mediaData.media.cloneNode(true));
|
||||
currentMediaId = mediaId;
|
||||
|
||||
// Réinitialiser les sliders et swipers dans le media nouvellement inséré
|
||||
initSliderBeforeAfter(reportMedias);
|
||||
initSwipers(reportMedias);
|
||||
}
|
||||
} else {
|
||||
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { themeToggle } from './themeToggle.js';
|
|||
import { initHeroSlider } from './hero-slider.js';
|
||||
import { playVideo } from './hero-video.js';
|
||||
import { initDropdowns } from './dropdown.js';
|
||||
import { initHomeInvestigationsSlider } from './home-investigations-slider.js';
|
||||
import { initSwipers } from './swipers.js';
|
||||
import { report } from './report.js';
|
||||
|
||||
|
||||
|
|
@ -30,5 +30,5 @@ window.onload = async function () {
|
|||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall);
|
||||
initHomeInvestigationsSlider();
|
||||
// initSwipers();
|
||||
}
|
||||
54
assets/js/swipers.js
Normal file
54
assets/js/swipers.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
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}}',
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -119,48 +119,98 @@ $investigations = site()->find('enquetes')->children()->listed()->filter(functio
|
|||
|
||||
<h3 class="container__title">4 impacts</h3>
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<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') ?>
|
||||
<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>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
|
||||
<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>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" data-impact-type="judiciaire">
|
||||
<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>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. <a class="see-more" href="#">Voir plus</a>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,13 +42,14 @@
|
|||
<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):
|
||||
?>
|
||||
<?php
|
||||
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
|
||||
foreach ($latestInvestigations as $investigation):
|
||||
?>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<article class="card--article">
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<article class="card--article">
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
<figure>
|
||||
|
|
@ -78,14 +79,15 @@ foreach ($latestInvestigations as $investigation):
|
|||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($investigation->pinned()->toBool()): ?>
|
||||
<?php if ($investigation->pinned()->toBool()): ?>
|
||||
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
|
||||
</div> <!-- swiper-wrapper -->
|
||||
|
||||
|
|
|
|||
|
|
@ -13,57 +13,97 @@
|
|||
</header>
|
||||
|
||||
|
||||
<div class="page__sort">
|
||||
<button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Filtrer par type</p></button>
|
||||
<div class="dropdown__content">
|
||||
<ul>
|
||||
<li><button type="button" data-filter="france">Médiatique</button></li>
|
||||
<li><button type="button" data-filter="cisjordanie">Judiciaire</button></li>
|
||||
<li><button type="button" data-filter="etats-unis">Institutionnel</button></li>
|
||||
<li><button type="button" data-filter="gaza">Public</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page__content">
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
|
||||
</div>
|
||||
<?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">
|
||||
|
|
@ -72,7 +112,17 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="keywords-wrapper">
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Evènement</a></li>
|
||||
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -130,10 +130,6 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<?php if ($page->incidentDate()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
|
|
@ -233,7 +229,8 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<h3 class="section__title">Impacts</h3>
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact-small" data-impact-type="media">
|
||||
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<p>12 articles et reprises</p>
|
||||
|
|
@ -247,35 +244,49 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<div class="card--impact-small has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Occupation</a></li>
|
||||
<li><a href="#keyword" target="_blank">Colonialité</a></li>
|
||||
<li><a href="#keyword" target="_blank">Forces armées</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<div class="card--impact-small" data-impact-type="public">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.</a>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li><a href="#keyword" target="_blank">Evènement</a></li>
|
||||
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -308,6 +319,7 @@ if ($folder):
|
|||
<h3 class="section__title">Dans le dossier</h3>
|
||||
|
||||
<article class="card--folder">
|
||||
<span class="icon-folder"><?= svg('assets/icons/folder.svg') ?></span>
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
|
||||
|
|
@ -353,6 +365,8 @@ if ($folder):
|
|||
|
||||
<?php foreach ($relatedInvestigations as $related): ?>
|
||||
<article class="card--article-small">
|
||||
<span class="icon-article"><?= svg('assets/icons/article.svg') ?></span>
|
||||
|
||||
<?php if ($cover = $related->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $related->title()->esc() ?>">
|
||||
|
|
@ -362,10 +376,15 @@ if ($folder):
|
|||
<h4 class="title"><a href="<?= $related->url() ?>"><?= $related->title()->esc() ?></a></h4>
|
||||
<?php if ($related->incidentDate()->isNotEmpty()): ?>
|
||||
<time datetime="<?= $related->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $related->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
|
||||
<?php if ($related->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $related->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php endif ?>
|
||||
<?php if ($relatedKeywords = $related->keywords()->split()): ?>
|
||||
<?php if (count($relatedKeywords) > 0): ?>
|
||||
<ul class="keywords--small">
|
||||
<ul class="keywords">
|
||||
<?php foreach ($relatedKeywords as $keyword): ?>
|
||||
<li><a href="#"><?= esc($keyword) ?></a></li>
|
||||
<?php endforeach ?>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<?php snippet('header') ?>
|
||||
|
||||
|
||||
<div class="btn--group__mobile">
|
||||
<button id="toggle-panel__mobile" class="btn--bold-inline no-link btn--toc">
|
||||
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
|
||||
|
|
@ -211,8 +212,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section-content" id="objectifs-rapport">
|
||||
<h3 class="section-title">Objectifs du rapport</h3>
|
||||
<p>
|
||||
|
|
@ -240,10 +239,92 @@
|
|||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||
<div class="media container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-1-a.png"></figure>
|
||||
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||
<div class="media">
|
||||
|
||||
<div class="container slider-before-after">
|
||||
<div class="image-container">
|
||||
<img class="image-before slider-image" src="/assets/images/adam-raihane/fig-1-a.png" alt="color photo"/>
|
||||
<img class="image-after slider-image" src="/assets/images/adam-raihane/fig-1-b.png" />
|
||||
</div>
|
||||
<!-- step="10" -->
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
aria-label="Percentage of before photo shown"
|
||||
class="slider"
|
||||
/>
|
||||
<div class="slider-line" aria-hidden="true"></div>
|
||||
<div class="slider-button" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line
|
||||
x1="128"
|
||||
y1="40"
|
||||
x2="128"
|
||||
y2="216"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<line
|
||||
x1="96"
|
||||
y1="128"
|
||||
x2="16"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="48 160 16 128 48 96"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
<line
|
||||
x1="160"
|
||||
y1="128"
|
||||
x2="240"
|
||||
y2="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></line>
|
||||
<polyline
|
||||
points="208 96 240 128 208 160"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="16"
|
||||
></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
|
@ -254,76 +335,71 @@
|
|||
l’entourent.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="media container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-2.png"></figure>
|
||||
<p class="caption">Fig. 2 : Plan de localisation des éléments constatés sur les lieux de l’incident dans la nuit des faits.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
Sur ce modèle 3D, nous avons reproduit les positions des différents
|
||||
éléments constatés par les services de police sur les lieux de l’incident,
|
||||
conformément aux photos de constatation et aux relevés techniques
|
||||
effectués sur les lieux. Deux zones principales sont à distinguer :
|
||||
</p>
|
||||
<ul>
|
||||
éléments constatés par les services de police sur les lieux de l’incident,
|
||||
conformément aux photos de constatation et aux relevés techniques
|
||||
effectués sur les lieux. Deux zones principales sont à distinguer :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
• Au sud, la zone où le véhicule Renault Mégane RS ciblé par les tirs
|
||||
policiers a fini sa course. Nous la désignons comme « zone 2 ».
|
||||
</li>
|
||||
<li>
|
||||
• Au nord, la zone où le véhicule Renault Mégane RS était initialement
|
||||
stationné au début de l’intervention de police. Nous la désignons
|
||||
comme « zone 1 ».
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Au sud, la zone où le véhicule Renault Mégane RS ciblé par les tirs
|
||||
policiers a fini sa course. Nous la désignons comme « zone 2 ».
|
||||
</li>
|
||||
<li>
|
||||
Au nord, la zone où le véhicule Renault Mégane RS était initialement
|
||||
stationné au début de l’intervention de police. Nous la désignons
|
||||
comme « zone 1 ».
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<em>
|
||||
Note : La position initiale précise du véhicule Renault Mégane sur
|
||||
le parking n’a pas été établie par les constatations sur le lieux de
|
||||
l’incident– le fourgon de police ayant été déplacé de sa position en
|
||||
début d’intervention.
|
||||
</em>
|
||||
</p>
|
||||
<p>
|
||||
Ces deux zones sont distantes d’environ 50 mètres. Les tirs sur le
|
||||
véhicule Renault Mégane ont donc eu lieu entre ces deux zones. Ceci
|
||||
est attesté par la présence, entre la zone 1 et 2, des éléments suivants :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Huits étuis percutés au sol, correspondant à des balles de calibre
|
||||
9mm. Cinq de ces étuis correspondent à l’arme du policier Geoffray D.,
|
||||
les trois autres correspondent à celle du policier Pierre-Alexandre D.
|
||||
</li>
|
||||
<li>
|
||||
Un Dispositif d'Interception des Véhicules Automobiles (DIVA, aussi
|
||||
connu sous le nom de « stop-stick »), responsable du dégonflage du
|
||||
pneu avant droit du véhicule Renault Mégane.
|
||||
</li>
|
||||
<li>
|
||||
Des bris de verre, correspondant à l’éclatement d’une vitre du
|
||||
véhicule, vraisemblablement causé par un tir de pistolet.
|
||||
Les positions de l’ensemble des éléments mentionnés ont été reportées
|
||||
sur le modèle 3D (Fig. 2) afin de constituer le cadre de l’analyse produite
|
||||
dans le présent rapport.
|
||||
</li>
|
||||
</ul>
|
||||
Note : La position initiale précise du véhicule Renault Mégane sur
|
||||
le parking n’a pas été établie par les constatations sur le lieux de
|
||||
l’incident– le fourgon de police ayant été déplacé de sa position en
|
||||
début d’intervention.
|
||||
</em>
|
||||
</p>
|
||||
<p>
|
||||
Ces deux zones sont distantes d’environ 50 mètres. Les tirs sur le
|
||||
véhicule Renault Mégane ont donc eu lieu entre ces deux zones. Ceci
|
||||
est attesté par la présence, entre la zone 1 et 2, des éléments suivants :
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Huits étuis percutés au sol, correspondant à des balles de calibre
|
||||
9mm. Cinq de ces étuis correspondent à l’arme du policier Geoffray D.,
|
||||
les trois autres correspondent à celle du policier Pierre-Alexandre D.
|
||||
</li>
|
||||
<li>
|
||||
Un Dispositif d'Interception des Véhicules Automobiles (DIVA, aussi
|
||||
connu sous le nom de « stop-stick »), responsable du dégonflage du
|
||||
pneu avant droit du véhicule Renault Mégane.
|
||||
</li>
|
||||
<li>
|
||||
Des bris de verre, correspondant à l’éclatement d’une vitre du
|
||||
véhicule, vraisemblablement causé par un tir de pistolet.
|
||||
Les positions de l’ensemble des éléments mentionnés ont été reportées
|
||||
sur le modèle 3D (Fig. 2) afin de constituer le cadre de l’analyse produite
|
||||
dans le présent rapport.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
|
||||
<h3 class="section-title">2. SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
|
||||
<div class="media container-figure fig-simple">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-3.png"></figure>
|
||||
<p class="caption">Fig. 3 : Schéma de la dynamique générale de l’incident.</p>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">Rappel des faits</h3>
|
||||
<p>
|
||||
D’après les déclarations du policier Geoffray D., à l’arrivée du fourgon de police à sa hauteur, le conducteur de la Mégane aurait effectué une brève marche arrière, avant d’enclencher la marche avant.
|
||||
</p>
|
||||
|
|
@ -333,18 +409,95 @@ dans le présent rapport.
|
|||
<p>
|
||||
De maniere concomitante, un deuxième policier, Pierre-Alexandre D., aurait effectué trois tirs sur le véhicule en fuite, depuis son côté arrière droit.
|
||||
</p>
|
||||
<p>
|
||||
Les constatations matérielles sur site, croisées avec les déclarations des policiers, permettent de circonscrire une zone approximative dans laquelle les tirs sur le véhicule ont été effecutés.
|
||||
<p>Les constatations matérielles sur site, croisées avec les déclarations des policiers, permettent de circonscrire une zone approximative dans laquelle les tirs sur le véhicule ont été effecutés.
|
||||
</p>
|
||||
<p>
|
||||
Une fois l’action de tir terminée, le véhicule aurait continué à rouler à faible allure jusqu’à percuter un autre véhicule stationné sur le parking. Sa position finale est établie par des photos de constatations et un relevé technique des lieux.
|
||||
<p>Une fois l’action de tir terminée, le véhicule aurait continué à rouler à faible allure jusqu’à percuter un autre véhicule stationné sur le parking. Sa position finale est établie par des photos de constatations et un relevé technique des lieux.
|
||||
</p>
|
||||
<p>
|
||||
Nous avons intégré cette dynamique au modèle de reconstitution 3D (Fig. 3).
|
||||
<p>Nous avons intégré cette dynamique au modèle de reconstitution 3D (Fig. 3).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
|
||||
|
||||
<div class="media">
|
||||
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-4.png"></figure>
|
||||
<p class="caption">Fig. 4 : Vue frontale du véhicule et localisation des impacts de tirs sur le pare-brise (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-5.png"></figure>
|
||||
<p class="caption">Fig. 5 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc gauche (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-6.png"></figure>
|
||||
<p class="caption">Fig. 6 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc droit (Reconstitution 3D / Photo originale).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__inner">
|
||||
<figure><img src="/assets/images/adam-raihane/fig-7.png"></figure>
|
||||
<p class="caption">Fig. 7 : Vue d’ensemble du modèle 3D du véhicule avec tous les impacts de tirs localisés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
</div> <!-- swiper -->
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Pour reconstituer les positions des impacts de tirs sur le véhicule, nous nous sommes appuyés sur les photos de constatations réalisées sur le véhicule après son déplacement des lieux de l’incident vers la fourrière.
|
||||
</p>
|
||||
<p>
|
||||
Leur localisation précise sur un modèle 3D détaillé d’un véhicule Renault Mégane RS – correspondant à celui qu’occupaient les deux victimes – s'appuie sur une technique appelée « frame-match » (ou « correspondance de photogramme »)1.
|
||||
</p>
|
||||
<p>
|
||||
Nous présentons ci-après les résultats de l’emploi de cette technique qui nous permet d’obtenir une modélisation détaillée des impacts de tirs sur le véhicule (Fig. 4, 5, 6, 7).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-content">
|
||||
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
|
||||
|
||||
<p>
|
||||
À partir des éléments décrits précédemment, nous avons procédé à une reconstitution dynamique de l’incident en intégrant l’ensemble des données matérielles disponibles.
|
||||
</p>
|
||||
<p>
|
||||
Afin d’étudier la temporalité de l’action, nous avons procédé à une synchronisation des messages radios diffusés par les policiers en intervention dans les instants qui précèdent et qui suivent les tirs (Fig. 8).
|
||||
</p>
|
||||
<p>
|
||||
À 23h59m58s se termine le message d’un des policiers de la patrouille BST 140A en intervention, qui annonce, sur un ton calme, qu’ils sont « retournés au contact du véhicule ».
|
||||
</p>
|
||||
<p>
|
||||
À 00h00m26s, l’un des policiers de la patrouille annonce, sur un ton agité : « Véhicule tiré, collègue à terre ! ».
|
||||
</p>
|
||||
<p>
|
||||
Il en résulte qu’il s’écoule moins de 30 secondes entre l’instant où les policiers initient le contrôle du véhicule Renault Mégane et l’instant où au moins un policier ouvre le feu.
|
||||
</p>
|
||||
<p>
|
||||
Pour produire une reconstitution dynamique de l’action qui s’est déroulée au cours de ces 30 secondes, nous l’avons décomposée en plusieurs intervalles.
|
||||
</p>
|
||||
|
||||
|
||||
</div> <!-- div content txt-->
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue