commit 162cee6dc92257146153b6963f53ca475518c061 Author: Julie Blanc Date: Tue Dec 16 18:00:01 2025 +0100 base diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1760dce --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +assets/fonts/* +assets/css/style.css +assets/css/style.css.map \ No newline at end of file diff --git a/assets/css/base/_body.scss b/assets/css/base/_body.scss new file mode 100644 index 0000000..fff5e60 --- /dev/null +++ b/assets/css/base/_body.scss @@ -0,0 +1,35 @@ +* { + margin: 0; + padding: 0; + + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -o-font-smoothing: antialiased; + + scroll-behavior: smooth; +} +a { + color: currentColor; +} +button{ + background: none; + outline: none; + border: none; + color: var(--color-txt); +} +iframe{ + border: none; +} + +body{ + font-family: var(--font); + line-height: var(--leading-normal); + font-size: var(--fs-normal); + + color: var(--color-txt); + background-color: var(--color-bg); + width: 100vw; + overflow-x: hidden; +} + diff --git a/assets/css/base/_responsive.scss b/assets/css/base/_responsive.scss new file mode 100644 index 0000000..ff9bac4 --- /dev/null +++ b/assets/css/base/_responsive.scss @@ -0,0 +1,11 @@ +$desktop: "screen and (min-width: 1200px)"; +$medium: "screen and (max-width: 1080px)"; +$medium-up: "screen and (min-width: 1080px)"; +$small-up: "screen and (min-width: 720px)"; +$small: "screen and (max-width: 720px)"; +$x-small: "screen and (max-width: 560px)"; +$paysage: "screen and (max-height: 670px) and (min-width: 1080px)"; + +@media #{$medium}{ + +} diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss new file mode 100644 index 0000000..8726e9f --- /dev/null +++ b/assets/css/base/_var.scss @@ -0,0 +1,77 @@ +:root { + --font: 'Executive', Arial, sans-serif; + --title: 'System', Arial, sans-serif; + + // --fs-x-small: 10px; + // --fs-small: 12px; + // --fs-normal: 16px; + // --fs-medium: 22px; + // --fs-big: 38px; + + --fs-x-small: 10px; + --fs-small: 12px; + --fs-normal: 16px; + --fs-medium: 20px; + --fs-big: 30px; + --fs-x-big: 38px; + + --fs-button-bold: 22px; + + @media #{$small} { + --fs-medium: 20px; + --fs-big: 26px; + } + + --leading-tight: 1; + --leading-normal: 1.2; + // --leading-relaxed: 1.4; + // --leading-loose: 1.8; + + --fw-normal: 400; + --fw-medium: 500; + --fw-bold: 600; + + + --grey-100: #d8d8d8; + --grey-200: #c8c8c8; + --grey-300: #b9b9b9; + --grey-400: #969696; + --grey-600: #6d6d6d; + --grey-800: #383838; + + --color-bg: #161616; + --color-txt: #ffffff; + --color-txt-light: var(--grey-600); + --color-accent: #00ff00; + --color-accent-50: #e9ffe9; + --color-accent-100: #d8fdd8; + + + + --border: 1px solid var(--color-txt); + --border-light: 1px solid var(--grey-800); + + --header-h: 80px; + --header-h-shrinked: 50px; + + // responsive + --padding-body: 26px; + + --radius-small: 4px; + --spacing: 30px; + --h-block: 30px; + + --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + + +@media #{$small}{ + :root { + --fs-x-small: 10px; + --fs-small: 11px; + --fs-normal: 14px; + --fs-medium: 20px; + --fs-big: 30px; + --fs-x-big: 38px; + } +} \ No newline at end of file diff --git a/assets/css/components/_btn--don.scss b/assets/css/components/_btn--don.scss new file mode 100644 index 0000000..3c4e2d0 --- /dev/null +++ b/assets/css/components/_btn--don.scss @@ -0,0 +1,60 @@ +#btn--don__mobile { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + padding-top: calc(var(--spacing) * 0.5); + padding-bottom: calc(var(--spacing) * 1.5); + position: fixed; + bottom: 0px; + left: 0; + z-index: 100; + opacity: 0; + transition: opacity ease-in 0.2s; + + pointer-events: none; + &.is-visible { + pointer-events: all; + opacity: 1; + } + + &.is-sticky { + position: relative; + } + + @media #{$small-up} { + display: none !important; + } +} + +.btn--don { + --vertical-padding: 0.5ch; + height: calc(var(--h-block) + var(--vertical-padding)); + border-radius: calc(var(--h-block) / 1); + padding: var(--vertical-padding) 2ch; + background-color: var(--color-accent); + color: var(--color-bg); + font-family: var(--font); + font-size: var(--fs-medium); + font-weight: var(--fw-bold); + + a { + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5ch; + } + + .icon { + height: 28px; + position: relative; + top: 1px; + } + + svg { + fill: var(--color-bg); + width: 24px; + height: 24px; + } +} diff --git a/assets/css/components/_buttons.scss b/assets/css/components/_buttons.scss new file mode 100644 index 0000000..433bea8 --- /dev/null +++ b/assets/css/components/_buttons.scss @@ -0,0 +1,101 @@ +button{ + cursor: pointer; + font-family: var(--font); + font-size: var(--fons-normal); + color: var(--color-txt); + &:hover{ + color: var(--grey-100); + } + + a{ + text-decoration: none; + width: 100%; + height: 100%; + } +} + +button:disabled{ + cursor: auto; + +} + + +.btn__default{ + + + --size: calc(var(--h-block) - 8px); + font-size: var(--fs-normal); + font-weight: var(--fw-normal); + height: var(--size); + padding-right: 1.5ch; + + position: relative; + + + display: flex; + align-items: center; + gap: 0ch; + // padding-right: 0.5ch; + color: var(--color-accent); + font-weight: var(--fw-medium); + text-decoration: none; + + cursor: pointer; + + + .icon, .txt{ z-index: 10; } + + .icon{ + width: var(--size); + height: var(--size); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-bg); + text-align: center; + + svg{ + fill: var(--color-bg); + width: 80%; + } + } + + .txt{ + font-family: var(--font-title); + color: var(--color-accent); + font-size: var(--fs-normal); + font-weight: var(--fw-bold); + padding-left: 1ch; + } + + &::after{ + content: ''; + display: block; + background-color: var(--color-accent); + border-radius: calc(var(--size)/2); + width: var(--size); + height: var(--size); + position: absolute; + left: 0; + z-index: 0; + transition: width .2s + } + + &:hover{ + // + .txt{ + color: var(--color-bg); + display: block; + } + &::after{ + width: 100%; + } + } + + + + + + +} + diff --git a/assets/css/components/_form-newsletter.scss b/assets/css/components/_form-newsletter.scss new file mode 100644 index 0000000..8eac349 --- /dev/null +++ b/assets/css/components/_form-newsletter.scss @@ -0,0 +1,127 @@ +.form__newsletter{ + --size: 24px; + + position: relative; + display: flex; + align-items: center; + position: relative; + + + + input[type="email"]{ + + height: calc(var(--h-block)*1.25); + width: 100%; + border-radius: calc(var(--h-block)*0.625); + outline: none; + border: none; + padding: 0 2ch; + font-family: var(--font); + + font-size: var(--fs-normal); + z-index: 40; + padding-top: 4px; + &::placeholder{ + font-family: var(--font); + font-size: var(--fs-normal); + } + + &:focus{ + outline: 3px solid var(--grey-400); + } + + + } + + button[type="submit"].btn--bold{ + position: absolute; + right: 2px; + z-index: 100; + } + + + button[type="submit"].btn--bold { + + + --size: calc(var(--h-block)*1.25 - 4px); + font-family: var(--font); + font-size: var(--fs-button-bold); + height: var(--size); + + + display: flex; + align-items: center; + gap: 0.75ch; + color: var(--color-accent); + font-weight: var(--fw-medium); + text-decoration: none; + + cursor: pointer; + + + .icon, .txt{ z-index: 10; } + + .icon{ + width: var(--size); + height: var(--size); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-bg); + text-align: center; + + svg{ + fill: var(--color-bg); + width: 80%; + } + } + + .txt{ + position: relative; + top: 2px; + font-size: var(--fs-normal); + display: none; + padding-left: 1ch; + } + + &::after{ + content: ''; + display: block; + background-color: var(--color-accent); + border-radius: calc(var(--size)/2); + width: var(--size); + height: var(--size); + position: absolute; + right: 0; + z-index: 0; + transition: width .2s + } + + &:hover{ + .txt{ + color: var(--color-bg); + display: block; + } + &::after{ + width: 100%; + } + } + + // @media #{$small}{ + // .txt{ + // color: var(--color-bg); + // display: block; + // } + // &::after{ + // width: 100%; + // } + // } + + + + } + + + + +} \ No newline at end of file diff --git a/assets/css/components/_list-socials.scss b/assets/css/components/_list-socials.scss new file mode 100644 index 0000000..6716e48 --- /dev/null +++ b/assets/css/components/_list-socials.scss @@ -0,0 +1,57 @@ +.list-socials { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 400px; + a{ + display: flex; + align-items: center; + text-decoration: none; + } + + .icon{ + width: 24px; + height: 24px; + position: relative; + top: -2px; + } + svg{ + display: flex; + align-items: center; + width: 24px; + height: 24px; + + } + + .text{ display: none; } +} + + + +// with text +@media #{$small-up}{ + .footer__socials .list-socials{ + + display: block; + + li{ + margin-bottom: calc(var(--spacing)*0.5); + break-inside: avoid; + } + + a{ + gap: 1ch; + + height: calc(var(--spacing)*1); + &::after{ + content: '↗'; + color: var(--grey-300); + } + } + .text{ + display: block; + line-height: 1; + } + } +} diff --git a/assets/css/components/_nav-tabs.scss b/assets/css/components/_nav-tabs.scss new file mode 100644 index 0000000..2cbf6df --- /dev/null +++ b/assets/css/components/_nav-tabs.scss @@ -0,0 +1,40 @@ +.nav--tabs{ + height: calc(var(--h-block)*1); + width: auto; + border: var(--border); + border-radius: var(--radius-small); + overflow: hidden; + + + display: inline-flex; + + width: auto; + margin: 0 auto; + margin-bottom: var(--spacing); + + + .nav--tabs__btn{ + font-family: var(--font); + font-size: var(--fs-small); + font-weight: var(--fw-medium); + padding: 0 2ch; + + &.is-selected{ + background-color: var(--color-txt); + color: var(--color-bg); + } + + &:not(.is-selected):hover{ + background-color: var(--grey-800); + cursor: pointer; + } + + } + + .nav--tabs__btn + .nav--tabs__btn{ + border-left: var(--border); + + } + + +} \ No newline at end of file diff --git a/assets/css/components/_text.scss b/assets/css/components/_text.scss new file mode 100644 index 0000000..2aa69f1 --- /dev/null +++ b/assets/css/components/_text.scss @@ -0,0 +1,68 @@ +[data-template="subscription-newsletter"], +[data-template="thanks"], +[data-template="support"], +[data-template="store"]{ + + .p__baseline-big{ + font-family: var(--title); + font-size: var(--fs-big); + font-weight: var(--fw-bold); + line-height: 1.1; + text-align: center; + margin: calc(var(--spacing)*1) 0; + + strong{ + font-weight: var(--fw-bolf); + color: var(--color-accent); + } + + .link-don{ + display: block; + color: var(--color-accent); + text-decoration: none; + // &::after{ + // content: ' ↗'; + // font-size: 0.8em; + // } + &:hover{ + text-decoration: underline 2px; + text-underline-offset: 4px; + + } + } + } + + .p__baseline{ + font-size: var(--fs-medium); + font-weight: var(--fw-medium); + line-height: 1.1; + text-align: center; + margin: calc(var(--spacing)*1) 0; + @media #{$small}{ + text-align: center; + margin: var(--spacing) 0; + } + } + + .p__details{ + font-size: var(--fs-small); + margin-bottom: 0.5em; + color: var(--grey-400); + } + + .section__heading{ + font-size: var(--fs-normal); + font-weight: var(--fw-medium); + line-height: 1; + text-align: center; + margin-top: calc(var(--spacing)*0.5); + margin-bottom: calc(var(--spacing)*1); + } + + ul, ol{ + margin-left: 3ch; + margin-bottom: 0.5em; + } + +} + diff --git a/assets/css/partials/_main-layout.scss b/assets/css/partials/_main-layout.scss new file mode 100644 index 0000000..b7f9db6 --- /dev/null +++ b/assets/css/partials/_main-layout.scss @@ -0,0 +1,15 @@ +body{ + min-height: 100dvh; + min-height: 100vh; + + display: flex; + flex-direction: column; + + + main{ + flex-grow: 1; + margin-top: var(--header-h); + padding: 0 var(--padding-body); + } + +} \ No newline at end of file diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss new file mode 100644 index 0000000..b477eb1 --- /dev/null +++ b/assets/css/partials/_site-footer.scss @@ -0,0 +1,94 @@ +#site-footer{ + + background-color: black; + padding: calc(var(--padding-body)*2) var(--padding-body); + + + .logo { + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*1); + svg{ + width: 100px; + } + } + + p{ + margin: calc(var(--spacing)*0.5) 0; + a{ + text-decoration: none; + &:hover{ + text-decoration: underline; + color: currentColor; + } + } + } + + .p__small{ + font-size: var(--fs-x-small); + color: var(--grey-600); + } + + .footer__mentions{ + p{ + font-size: var(--fs-small); + color: var(--color-txt) + } + } + + + + @media #{$small}{ + margin-top: calc(var(--spacing)*2); + + + .footer__socials{ + margin-top: calc(var(--spacing)*0.75); + padding-top: calc(var(--spacing)*0.25); + border-top: var(--border-light); + + .list-socials{ + margin-top: calc(var(--spacing)*0.5); + margin-bottom: calc(var(--spacing)*0.75); + } + } + .footer__mentions{ + + border-top: var(--border-light); + padding-top: calc(var(--spacing)*0.25); + p{ + font-size: var(--fs-small); + text-align: center; + } + } + } + + + @media #{$small-up}{ + + .site-footer__container{ + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: calc(var(--spacing)*2); + + max-width: 1200px; + margin: 0 auto; + } + + .footer__socials .container{ + max-width: 400px; + columns: 2; + margin-top: calc(var(--spacing)*1); + } + + .footer__mentions{ + grid-column: span 2; + p{ + margin-top: calc(var(--spacing)*1); + } + + } + + } + + +} \ No newline at end of file diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss new file mode 100644 index 0000000..66b32f2 --- /dev/null +++ b/assets/css/partials/_site-header.scss @@ -0,0 +1,84 @@ +@keyframes add-border { + from { + border-bottom-color: transparent; + } + to { + border-bottom: var(--grey-800); + } +} + +#site-header { + position: fixed; + left: var(--padding-body); + top: 0px; + z-index: 900; + --gap: 3ch; + + width: calc(100vw - var(--padding-body)*2); + height: var(--header-h); + background-color: var(--color-bg); + border-bottom: var(--border-light); + + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--gap); + + a{ + text-decoration: none; + &:hover{ + color: var(--grey-200); + } + } + + + #site-title { + flex-grow: 2; + svg{ + width: 100px; + } + } + + ul{ + list-style-type: none; + display: flex; + align-items: center; + gap: var(--gap); + } + + #btn--soutenir{ + color: var(--color-accent); + a:hover{ + color: var(--color-accent); + text-decoration: underline; + } + } + + ul, #btn--soutenir{ + text-transform: uppercase; + } + + + #lang-toggle{ + display: flex; + gap: 1ch; + button:disabled{ color: var(--color-txt-light); } + } + + #menu-toggle{ + cursor: pointer; + svg{ + width: 30px; + } + .close{ display: none; } + + } + + button{ + + &:hover{ + svg{ fill: var(--grey-200)!important; } + } + } + +} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..ed69ba5 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; +@import 'base/responsive'; +@import 'base/var'; +@import 'base/body'; + +@import 'partials/site-header'; + +// @import 'components/nav-tabs'; +// @import 'components/btn--default'; +@import 'components/buttons'; +@import 'components/form-newsletter'; +@import 'components/list-socials'; +@import 'components/text'; + + +@import 'partials/site-header'; +@import 'partials/site-footer'; +@import 'partials/main-layout'; + + + diff --git a/assets/favicon.png b/assets/favicon.png new file mode 100644 index 0000000..bca6cd5 Binary files /dev/null and b/assets/favicon.png differ diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg new file mode 100644 index 0000000..09437b0 --- /dev/null +++ b/assets/icons/arrow-left.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/arrow-top-right.svg b/assets/icons/arrow-top-right.svg new file mode 100644 index 0000000..e46faa9 --- /dev/null +++ b/assets/icons/arrow-top-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/menu-close.svg b/assets/icons/menu-close.svg new file mode 100644 index 0000000..d02ecbb --- /dev/null +++ b/assets/icons/menu-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/menu.svg b/assets/icons/menu.svg new file mode 100644 index 0000000..cf2f2b5 --- /dev/null +++ b/assets/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/play-button.svg b/assets/icons/play-button.svg new file mode 100644 index 0000000..ea58eaf --- /dev/null +++ b/assets/icons/play-button.svg @@ -0,0 +1,10 @@ + + + + + + + \ No newline at end of file diff --git a/assets/icons/socials/bluesky.svg b/assets/icons/socials/bluesky.svg new file mode 100644 index 0000000..3944e93 --- /dev/null +++ b/assets/icons/socials/bluesky.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/facebook.svg b/assets/icons/socials/facebook.svg new file mode 100644 index 0000000..cf4118e --- /dev/null +++ b/assets/icons/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/instagram.svg b/assets/icons/socials/instagram.svg new file mode 100644 index 0000000..57775b0 --- /dev/null +++ b/assets/icons/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/linkedin.svg b/assets/icons/socials/linkedin.svg new file mode 100644 index 0000000..5a9c0a5 --- /dev/null +++ b/assets/icons/socials/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/mastodon.svg b/assets/icons/socials/mastodon.svg new file mode 100644 index 0000000..efe42f5 --- /dev/null +++ b/assets/icons/socials/mastodon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/threads.svg b/assets/icons/socials/threads.svg new file mode 100644 index 0000000..3619982 --- /dev/null +++ b/assets/icons/socials/threads.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/x-social.svg b/assets/icons/socials/x-social.svg new file mode 100644 index 0000000..18f2f4d --- /dev/null +++ b/assets/icons/socials/x-social.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/youtube.svg b/assets/icons/socials/youtube.svg new file mode 100644 index 0000000..40ca348 --- /dev/null +++ b/assets/icons/socials/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/index-logo.svg b/assets/index-logo.svg new file mode 100644 index 0000000..3d9e694 --- /dev/null +++ b/assets/index-logo.svg @@ -0,0 +1,14 @@ + + Index.ngo + + + + + + + + + + + + diff --git a/assets/js/onload.js b/assets/js/onload.js new file mode 100644 index 0000000..830a497 --- /dev/null +++ b/assets/js/onload.js @@ -0,0 +1,23 @@ +window.onload = function () { + includeHTML(); + headerShrink(); +}; + +window.onscroll = function () { + headerShrink(); +}; + + + +function headerShrink() { + const header = document.getElementById('site-header'); + const scrollPosition = window.scrollY || document.documentElement.scrollTop; + + if (scrollPosition > 100) { + header.classList.add('is-shrinked'); + } else { + header.classList.remove('is-shrinked'); + } +} + + diff --git a/assets/js/temp/includeHtml.js b/assets/js/temp/includeHtml.js new file mode 100644 index 0000000..58f04bb --- /dev/null +++ b/assets/js/temp/includeHtml.js @@ -0,0 +1,33 @@ +// How to use +// + + +function includeHTML() { + + var z, i, elmnt, file, xhttp; + /* Loop through a collection of all HTML elements: */ + z = document.getElementsByTagName("*"); + for (i = 0; i < z.length; i++) { + elmnt = z[i]; + /*search for elements with a certain atrribute:*/ + file = elmnt.getAttribute("w3-include-html"); + if (file) { + /* Make an HTTP request using the attribute value as the file name: */ + xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + if (this.status == 200) {elmnt.innerHTML = this.responseText;} + if (this.status == 404) {elmnt.innerHTML = "Page not found.";} + /* Remove the attribute, and call this function once more: */ + elmnt.removeAttribute("w3-include-html"); + includeHTML(); + } + } + xhttp.open("GET", file, true); + xhttp.send(); + /* Exit the function: */ + return; + } + } + +} diff --git a/components/site-footer.html b/components/site-footer.html new file mode 100644 index 0000000..a2a5417 --- /dev/null +++ b/components/site-footer.html @@ -0,0 +1,64 @@ + \ No newline at end of file diff --git a/components/site-header.html b/components/site-header.html new file mode 100644 index 0000000..cb5859f --- /dev/null +++ b/components/site-header.html @@ -0,0 +1,42 @@ + +

+ + +

+ + + + + + + + + + + +
+ + +
+ + \ No newline at end of file diff --git a/components/socials.html b/components/socials.html new file mode 100644 index 0000000..a37f1f2 --- /dev/null +++ b/components/socials.html @@ -0,0 +1,45 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..59ce055 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + INDEX + + + + + + + + + + + +
+ +

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

+
+ + + + + + \ No newline at end of file