divide report in subsection
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
4262be067d
commit
ecd379dee4
5 changed files with 396 additions and 579 deletions
|
|
@ -2910,66 +2910,12 @@ main .page__header .description-medium {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.arrow-report {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-anchor {
|
|
||||||
width: 100%;
|
|
||||||
height: 0px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
.media-anchor .arrow-report {
|
|
||||||
position: relative;
|
|
||||||
left: 50px;
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
[data-template=report] .report__header {
|
[data-template=report] .report__header {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-top: calc(var(--spacing) * 3);
|
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
|
||||||
}
|
|
||||||
[data-template=report] .report__content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-gap: calc(var(--padding-body) * 2.5);
|
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
}
|
|
||||||
[data-template=report] .report__content .report__txt {
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 1;
|
|
||||||
max-width: var(--max-w-content);
|
max-width: var(--max-w-content);
|
||||||
}
|
margin-top: calc(var(--spacing) * 3.25);
|
||||||
[data-template=report] .report__content #report__medias {
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-h) + var(--padding-body));
|
|
||||||
align-self: start;
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
[data-template=report] .report__content #arrow__medias {
|
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-h) + var(--padding-body));
|
|
||||||
align-self: start;
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
|
||||||
[data-template=report] .report__content #arrow__medias span {
|
|
||||||
position: relative;
|
|
||||||
left: 26px;
|
|
||||||
top: calc(var(--spacing) * -5);
|
|
||||||
}
|
}
|
||||||
[data-template=report] #toggle-panel {
|
[data-template=report] #toggle-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -3000,7 +2946,6 @@ main .page__header .description-medium {
|
||||||
transition: left ease-in-out 0.5s;
|
transition: left ease-in-out 0.5s;
|
||||||
}
|
}
|
||||||
[data-template=report] #report {
|
[data-template=report] #report {
|
||||||
padding-left: calc(var(--padding-body) * 2);
|
|
||||||
transition: padding-left ease-in-out 0.5s;
|
transition: padding-left ease-in-out 0.5s;
|
||||||
}
|
}
|
||||||
[data-template=report] .panel-open #report__aside {
|
[data-template=report] .panel-open #report__aside {
|
||||||
|
|
@ -3026,16 +2971,16 @@ main .page__header .description-medium {
|
||||||
.report__header .report__title-group .title {
|
.report__header .report__title-group .title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: var(--fs-big);
|
font-size: var(--fs-medium);
|
||||||
line-height: var(--leading-tight);
|
line-height: var(--leading-tight);
|
||||||
font-weight: normal;
|
font-weight: 500;
|
||||||
margin-top: calc(var(--spacing) * 1);
|
margin-top: calc(var(--spacing) * 1);
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
.report__header .report__title-group .subtitle {
|
.report__header .report__title-group .subtitle {
|
||||||
font-size: var(--fs-big);
|
font-size: var(--fs-medium);
|
||||||
line-height: var(--leading-tight);
|
line-height: var(--leading-tight);
|
||||||
font-weight: normal;
|
font-weight: 500;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
.report__header figure {
|
.report__header figure {
|
||||||
|
|
@ -3058,6 +3003,7 @@ main .page__header .description-medium {
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
|
font-size: var(--fs-small);
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
@ -3085,7 +3031,9 @@ main .page__header .description-medium {
|
||||||
}
|
}
|
||||||
|
|
||||||
.report__content .section-content {
|
.report__content .section-content {
|
||||||
padding-bottom: calc(var(--spacing) * 3);
|
padding-left: calc(var(--padding-body) * 1.5);
|
||||||
|
padding-right: calc(var(--padding-body) * 1.5);
|
||||||
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
.report__content .section-content:target {
|
.report__content .section-content:target {
|
||||||
padding-top: calc(var(--header-h) + var(--spacing) * 2);
|
padding-top: calc(var(--header-h) + var(--spacing) * 2);
|
||||||
|
|
@ -3096,12 +3044,39 @@ main .page__header .description-medium {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.report__content .section-title {
|
.report__content .section-title {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
font-size: var(--fs-medium);
|
font-size: var(--fs-medium);
|
||||||
margin-bottom: var(--spacing);
|
font-weight: 500;
|
||||||
font-weight: normal;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
max-width: 42ch;
|
max-width: var(--max-w-content);
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.report__content .section-txt {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
.report__content .subsection-w-media {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--padding-body);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.report__content .subsection-txt {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
padding-left: var(--padding-inner);
|
||||||
|
padding-right: var(--padding-inner);
|
||||||
|
}
|
||||||
|
.report__content .media {
|
||||||
|
margin-inline: auto;
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
padding-left: var(--padding-inner);
|
||||||
|
padding-right: var(--padding-inner);
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
}
|
}
|
||||||
.report__content p {
|
.report__content p {
|
||||||
margin: calc(var(--spacing) * 0.5) 0;
|
margin: calc(var(--spacing) * 0.5) 0;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -49,28 +49,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.arrow-report{
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-anchor{
|
|
||||||
width: 100%;
|
|
||||||
height: 0px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.arrow-report{
|
|
||||||
position: relative;
|
|
||||||
left: 50px;
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$small-up}{
|
@media #{$small-up}{
|
||||||
|
|
@ -79,56 +57,19 @@
|
||||||
|
|
||||||
.report__header {
|
.report__header {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: var(--max-w-cards);
|
max-width: var(--max-w-content);
|
||||||
margin-top: calc(var(--spacing) * 3);
|
margin-top: calc(var(--spacing) * 3.25);
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.report__content {
|
.report__content {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-gap: calc(var(--padding-body)*2.5);
|
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
|
|
||||||
.report__txt {
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 1;
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
}
|
|
||||||
|
|
||||||
#report__medias {
|
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-h) + var(--padding-body));
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
// border-left: var(--border-light);
|
|
||||||
// padding-left: var(--padding-inner);
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
// border: var(--border-light);
|
|
||||||
min-height: 100px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#arrow__medias{
|
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-h) + var(--padding-body));
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
transform-origin: center;
|
|
||||||
|
|
||||||
|
|
||||||
span{
|
|
||||||
position: relative;
|
|
||||||
left: 26px;
|
|
||||||
top: calc(var(--spacing)*-5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,7 +111,7 @@
|
||||||
transition: left ease-in-out .5s;
|
transition: left ease-in-out .5s;
|
||||||
}
|
}
|
||||||
#report {
|
#report {
|
||||||
padding-left: calc(var(--padding-body)*2);
|
// padding-left: calc(var(--padding-body)*2);
|
||||||
transition: padding-left ease-in-out .5s;
|
transition: padding-left ease-in-out .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -213,17 +154,17 @@
|
||||||
.title {
|
.title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: var(--fs-big);
|
font-size: var(--fs-medium);
|
||||||
line-height: var(--leading-tight);
|
line-height: var(--leading-tight);
|
||||||
font-weight: normal;
|
font-weight: 500;
|
||||||
margin-top: calc(var(--spacing)*1);
|
margin-top: calc(var(--spacing)*1);
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: var(--fs-big);
|
font-size: var(--fs-medium);
|
||||||
line-height: var(--leading-tight);
|
line-height: var(--leading-tight);
|
||||||
font-weight: normal;
|
font-weight: 500;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -241,7 +182,7 @@
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
// font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
|
|
@ -285,7 +226,10 @@
|
||||||
|
|
||||||
|
|
||||||
.section-content {
|
.section-content {
|
||||||
padding-bottom: calc(var(--spacing)*3);
|
// min-height: calc(100vh - var(--header-h));
|
||||||
|
padding-left: calc(var(--padding-body)*1.5);
|
||||||
|
padding-right: calc(var(--padding-body)*1.5);
|
||||||
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
&:target{
|
&:target{
|
||||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||||
|
|
@ -296,14 +240,52 @@
|
||||||
|
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
|
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-bottom: calc(var(--spacing)*2);
|
||||||
|
|
||||||
font-size: var(--fs-medium);
|
font-size: var(--fs-medium);
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
font-weight: normal;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
max-width: 42ch;
|
max-width: var(--max-w-content);
|
||||||
|
color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-txt{
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.subsection-w-media{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--padding-body);
|
||||||
|
margin-bottom: calc(var(--spacing)*3);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.subsection-txt {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
padding-left: var(--padding-inner);
|
||||||
|
padding-right: var(--padding-inner);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media{
|
||||||
|
margin-inline: auto;
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
padding-left: var(--padding-inner);
|
||||||
|
padding-right: var(--padding-inner);
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: calc(var(--spacing)*0.5) 0;
|
margin: calc(var(--spacing)*0.5) 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,7 @@ export function report(responsiveSmall) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
|
|
||||||
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
|
|
||||||
initMediaDisplay();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,188 +31,3 @@ function initSliderBeforeAfter(container = document){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function initMediaDisplay() {
|
|
||||||
const reportMedias = document.querySelector('#report__medias');
|
|
||||||
if (!reportMedias) return;
|
|
||||||
|
|
||||||
// Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
|
|
||||||
const rootStyles = getComputedStyle(document.documentElement);
|
|
||||||
const headerH = rootStyles.getPropertyValue('--header-h').trim();
|
|
||||||
const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
|
|
||||||
const spacingH = rootStyles.getPropertyValue('--spacing').trim();
|
|
||||||
|
|
||||||
|
|
||||||
// Convertir en pixels si nécessaire
|
|
||||||
const headerHPx = parseFloat(headerH);
|
|
||||||
const paddingBodyPx = parseFloat(paddingBody);
|
|
||||||
const spacingHPx = parseFloat(paddingBody);
|
|
||||||
const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
|
|
||||||
|
|
||||||
const sections = document.querySelectorAll('.section-content');
|
|
||||||
const mediaElements = [];
|
|
||||||
let mediaCounter = 0;
|
|
||||||
|
|
||||||
// 1. Pour chaque section, traiter les .media
|
|
||||||
sections.forEach((section) => {
|
|
||||||
const medias = section.querySelectorAll('.media');
|
|
||||||
|
|
||||||
medias.forEach((media) => {
|
|
||||||
// Générer un ID unique si nécessaire
|
|
||||||
if (!media.id) {
|
|
||||||
media.id = `media-${mediaCounter++}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Créer une ancre
|
|
||||||
const anchor = document.createElement('div');
|
|
||||||
anchor.className = 'media-anchor';
|
|
||||||
anchor.dataset.mediaId = media.id;
|
|
||||||
anchor.innerHTML = '<span class="arrow-report">▶</span>'
|
|
||||||
|
|
||||||
// Vérifier si le media est précédé d'un titre
|
|
||||||
let previousElement = media.previousElementSibling;
|
|
||||||
let insertBeforeElement = media;
|
|
||||||
|
|
||||||
// Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
|
|
||||||
if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
|
|
||||||
insertBeforeElement = previousElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Insérer l'ancre
|
|
||||||
insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
|
|
||||||
|
|
||||||
// Stocker la référence pour l'observer
|
|
||||||
mediaElements.push({
|
|
||||||
anchor: anchor,
|
|
||||||
media: media.cloneNode(true), // Cloner le media
|
|
||||||
originalMedia: media,
|
|
||||||
section: section
|
|
||||||
});
|
|
||||||
|
|
||||||
// Masquer le media original
|
|
||||||
media.style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
|
|
||||||
let currentMediaId = null;
|
|
||||||
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
|
|
||||||
|
|
||||||
function updateActiveMedia() {
|
|
||||||
// Éviter les mises à jour simultanées
|
|
||||||
if (isUpdating) return;
|
|
||||||
|
|
||||||
// Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
|
|
||||||
let closestAnchor = null;
|
|
||||||
let closestDistance = Infinity;
|
|
||||||
|
|
||||||
mediaElements.forEach(({ anchor }) => {
|
|
||||||
const rect = anchor.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Si l'ancre est au-dessus ou à la ligne de déclenchement
|
|
||||||
if (rect.top <= totalOffset) {
|
|
||||||
const distance = totalOffset - rect.top;
|
|
||||||
|
|
||||||
// Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
|
|
||||||
if (distance < closestDistance) {
|
|
||||||
closestDistance = distance;
|
|
||||||
closestAnchor = anchor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Si on a trouvé une ancre
|
|
||||||
if (closestAnchor) {
|
|
||||||
const mediaId = closestAnchor.dataset.mediaId;
|
|
||||||
|
|
||||||
// Si c'est déjà le media affiché, ne rien faire
|
|
||||||
if (currentMediaId === mediaId) return;
|
|
||||||
|
|
||||||
// Trouver le media correspondant
|
|
||||||
const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
|
|
||||||
|
|
||||||
if (mediaData) {
|
|
||||||
isUpdating = true;
|
|
||||||
|
|
||||||
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
// Vider le conteneur
|
|
||||||
reportMedias.innerHTML = '';
|
|
||||||
|
|
||||||
// Ajouter le nouveau media
|
|
||||||
const newMediaElement = mediaData.media.cloneNode(true);
|
|
||||||
reportMedias.appendChild(newMediaElement);
|
|
||||||
currentMediaId = mediaId;
|
|
||||||
|
|
||||||
// Attendre le prochain frame pour initialiser les sliders/swipers
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
initSliderBeforeAfter(reportMedias);
|
|
||||||
initSwipers(reportMedias);
|
|
||||||
|
|
||||||
// Débloquer les mises à jour après un court délai
|
|
||||||
setTimeout(() => {
|
|
||||||
isUpdating = false;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
|
|
||||||
if (currentMediaId !== null) {
|
|
||||||
reportMedias.innerHTML = '';
|
|
||||||
currentMediaId = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Écouter le scroll
|
|
||||||
let scrollTimeout;
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
// Throttle pour optimiser les performances
|
|
||||||
if (scrollTimeout) return;
|
|
||||||
|
|
||||||
scrollTimeout = setTimeout(() => {
|
|
||||||
updateActiveMedia();
|
|
||||||
scrollTimeout = null;
|
|
||||||
}, 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Appeler une première fois au chargement
|
|
||||||
updateActiveMedia();
|
|
||||||
|
|
||||||
// 4. Gérer les sections sans media immédiat
|
|
||||||
// Observer aussi les sections elles-mêmes
|
|
||||||
const sectionObserver = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const section = entry.target;
|
|
||||||
|
|
||||||
// Vérifier si cette section a un media juste après son premier titre
|
|
||||||
const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
|
|
||||||
if (firstTitle) {
|
|
||||||
let nextElement = firstTitle.nextElementSibling;
|
|
||||||
|
|
||||||
// Chercher le prochain élément qui n'est pas une ancre
|
|
||||||
while (nextElement && nextElement.classList.contains('media-anchor')) {
|
|
||||||
nextElement = nextElement.nextElementSibling;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si le prochain élément n'est pas un .media, vider #report__medias
|
|
||||||
if (!nextElement || !nextElement.classList.contains('media')) {
|
|
||||||
reportMedias.innerHTML = '';
|
|
||||||
currentMediaId = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
root: null,
|
|
||||||
rootMargin: `-${totalOffset}px 0px 0px 0px`,
|
|
||||||
threshold: 0
|
|
||||||
});
|
|
||||||
|
|
||||||
// Observer toutes les sections
|
|
||||||
sections.forEach(section => {
|
|
||||||
sectionObserver.observe(section);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -127,16 +127,16 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="report__content">
|
<div class="report__content">
|
||||||
<div id="arrow__medias" class="arrow-report"><span>▶</span></div>
|
|
||||||
|
|
||||||
<div class="report__medias" id="report__medias">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="report__txt">
|
|
||||||
|
|
||||||
<div class="section-content" id="auteurs">
|
<div class="section-content" id="auteurs">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
<h3 class="section-title">Les auteurs de ce rapport</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<p>
|
<p>
|
||||||
INDEX est une ONG d'investigation et d'expertise indépendante,
|
INDEX est une ONG d'investigation et d'expertise indépendante,
|
||||||
à but non lucratif, déclarée en tant qu'association Loi 1901
|
à but non lucratif, déclarée en tant qu'association Loi 1901
|
||||||
|
|
@ -158,10 +158,14 @@
|
||||||
<li>Conception graphique : Léonie Montjarret</li>
|
<li>Conception graphique : Léonie Montjarret</li>
|
||||||
<li>Direction : Francesco Sebregondi</li>
|
<li>Direction : Francesco Sebregondi</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-content" id="rappel-faits">
|
<div class="section-content" id="rappel-faits">
|
||||||
<h3 class="section-title">Rappel des faits</h3>
|
<h3 class="section-title">Rappel des faits</h3>
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<p><em>Note : Le nom de famille des individus mentionnés dans ce rapport a
|
<p><em>Note : Le nom de famille des individus mentionnés dans ce rapport a
|
||||||
été remplacé par leur initiale, afin de préserver leur anonymat dans le
|
été remplacé par leur initiale, afin de préserver leur anonymat dans le
|
||||||
cadre de la publication en ligne du rapport.</em>
|
cadre de la publication en ligne du rapport.</em>
|
||||||
|
|
@ -187,10 +191,14 @@
|
||||||
audition, il a affirmé qu'il n'avait « pas d'autre choix » que d'ouvrir le
|
audition, il a affirmé qu'il n'avait « pas d'autre choix » que d'ouvrir le
|
||||||
feu sur le pare-brise du véhicule.
|
feu sur le pare-brise du véhicule.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-content" id="modelisation">
|
<div class="section-content" id="modelisation">
|
||||||
<h3 class="section-title">Modélisation numérique en 3D des lieux de l'incident</h3>
|
<h3 class="section-title">Modélisation numérique en 3D des lieux de l'incident</h3>
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<p>
|
<p>
|
||||||
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
||||||
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
||||||
|
|
@ -199,9 +207,12 @@
|
||||||
l'entourent.
|
l'entourent.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="section-content" id="sources-employees">
|
<div class="section-content" id="sources-employees">
|
||||||
<h3 class="section-title">Sources employées</h3>
|
<h3 class="section-title">Sources employées</h3>
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
INDEX a obtenu accès au dossier judiciaire de l’affaire concernant la mort d’Adam B. et Raihane S., y compris aux auditions des policiers mis en cause, aux rapports d’autopsie, aux rapports d’expertise, aux photographies de constatation et aux enregistrements radio du soir de l’incident. L’ensemble de ces pièces ont été exploitées à des fins d’analyse et de reconstitution de l’incident.
|
INDEX a obtenu accès au dossier judiciaire de l’affaire concernant la mort d’Adam B. et Raihane S., y compris aux auditions des policiers mis en cause, aux rapports d’autopsie, aux rapports d’expertise, aux photographies de constatation et aux enregistrements radio du soir de l’incident. L’ensemble de ces pièces ont été exploitées à des fins d’analyse et de reconstitution de l’incident.
|
||||||
|
|
@ -210,10 +221,14 @@
|
||||||
Un modèle numérique en 3D du parking où les faits se sont produits a été réalisé en employant plusieurs sources de données publiques en ligne (Géoportail, Open Street Map, Google Earth).
|
Un modèle numérique en 3D du parking où les faits se sont produits a été réalisé en employant plusieurs sources de données publiques en ligne (Géoportail, Open Street Map, Google Earth).
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-content" id="objectifs-rapport">
|
<div class="section-content" id="objectifs-rapport">
|
||||||
<h3 class="section-title">Objectifs du rapport</h3>
|
<h3 class="section-title">Objectifs du rapport</h3>
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<p>
|
<p>
|
||||||
En partant de l’examen de l’ensemble des pièces produites à ce jour
|
En partant de l’examen de l’ensemble des pièces produites à ce jour
|
||||||
dans le cadre de la procédure judiciaire sur les circonstances de la
|
dans le cadre de la procédure judiciaire sur les circonstances de la
|
||||||
|
|
@ -232,16 +247,18 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
<h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
|
||||||
<div class="media">
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="subsection-w-media">
|
||||||
|
|
||||||
|
<div class="media">
|
||||||
<div class="container slider-before-after">
|
<div class="container slider-before-after">
|
||||||
<div class="image-container">
|
<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-before slider-image" src="/assets/images/adam-raihane/fig-1-a.png" alt="color photo"/>
|
||||||
|
|
@ -318,15 +335,10 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
|
<p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="subsection-txt">
|
||||||
<p>
|
<p>
|
||||||
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
Les faits examinés dans ce rapport se sont déroulés sur le parking du
|
||||||
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
|
||||||
|
|
@ -335,11 +347,19 @@
|
||||||
l’entourent.
|
l’entourent.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subsection-w-media">
|
||||||
|
|
||||||
<div class="media container-figure fig-simple">
|
<div class="media container-figure fig-simple">
|
||||||
<figure><img src="/assets/images/adam-raihane/fig-2.png"></figure>
|
<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>
|
<p class="caption">Fig. 2 : Plan de localisation des éléments constatés sur les lieux de l’incident dans la nuit des faits.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="subsection-txt">
|
||||||
<p>
|
<p>
|
||||||
Sur ce modèle 3D, nous avons reproduit les positions des différents
|
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,
|
éléments constatés par les services de police sur les lieux de l’incident,
|
||||||
|
|
@ -390,16 +410,27 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<h3 class="section-title">2. 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="subsection-w-media">
|
||||||
|
|
||||||
<div class="media container-figure fig-simple">
|
<div class="media container-figure fig-simple">
|
||||||
<figure><img src="/assets/images/adam-raihane/fig-3.png"></figure>
|
<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>
|
<p class="caption">Fig. 3 : Schéma de la dynamique générale de l’incident.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="subsection-txt">
|
||||||
<p>
|
<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.
|
D’après les déclarations du policier Geoffray D., à l’arrivée du fourgon de police à sa hauteur, le conducteur de la Mégane aurait effectué une brève marche arrière, avant d’enclencher la marche avant.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -417,11 +448,20 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
|
<h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="subsection-w-media">
|
||||||
|
|
||||||
|
|
||||||
<div class="media">
|
<div class="media">
|
||||||
|
|
||||||
<div class="swiper">
|
<div class="swiper">
|
||||||
|
|
@ -460,6 +500,8 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="subsection-txt">
|
||||||
|
|
||||||
<p>
|
<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.
|
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>
|
||||||
|
|
@ -469,13 +511,17 @@
|
||||||
<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).
|
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>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
|
<h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section-txt">
|
||||||
<p>
|
<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.
|
À 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>
|
||||||
|
|
@ -494,9 +540,10 @@
|
||||||
<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.
|
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>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div> <!-- div content txt-->
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue