@charset "UTF-8"; :root { --font: 'Executive', Arial, sans-serif; --title: 'System', Arial, sans-serif; --xsmall: 12px; --small: 16px; --normal: 20px; --lead: 24px; --medium: 32px; --big: 42px; --max-w-content: 680px; --max-w-cards: 1100px; --max-w-site: 1600px; --z-header: 2000; --panel-w: 310px; } :root { --leading-normal: 1.55; --leading-title: 1.2; --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; --grey-900: #2d2d2d; /* intermédiaire 800/950 — fond des encarts */ --grey-950: #222222; --color-bg: #161616; --color-txt: #ffffff; --color-red: #e23b3b; --color-green: #45d483; /* dark mode : vert vif lisible sur fond sombre */ --color-txt-light: var(--grey-400); --color-accent: #00ff00; --color-accent-50: #e9ffe9; --color-accent-100: #d8fdd8; --dark: black; --color-form: white; --border: 1px solid var(--color-txt); --border-medium: 1px solid var(--grey-600); --border-light: 1px solid #414141; --header-h: 80px; --header-h-shrinked: 50px; --edit-bar-h: 34px; --menu-w: 420px; --banner-medium: 220px; --bottom-bar-h: calc(var(--header-h) * 0.75); --padding-body: 26px; --padding-inner: 14px; --radius-small: 4px; --radius-btn: 4px; --spacing: 30px; --h-block: 30px; --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); --transition-scroll: .5s ease-in-out; } @media screen and (max-width: 768px) { :root { --xsmall: 12px; --small: 14px; --normal: 18px; --lead: 18px; --medium: 24px; --big: 28px; --header-h: 60px; --padding-body: 16px; --spacing: 22px; } } :root[data-theme=light] { /* Grey scale strictement symétrique au dark mode (formule 255 − RGB_dark) : les hover, borders, fonds atténués gardent exactement la même perception de contraste relative qu'en dark. */ --grey-100: #272727; /* dark #d8d8d8 → 255-216=39 */ --grey-200: #373737; /* dark #c8c8c8 → 55 */ --grey-300: #464646; /* dark #b9b9b9 → 70 */ --grey-400: #696969; /* dark #969696 → 105 */ --grey-600: #929292; /* dark #6d6d6d → 146 */ --grey-800: #c7c7c7; /* dark #383838 → 199 */ --grey-900: #d2d2d2; /* dark #2d2d2d → 210 (intermédiaire, fond des encarts) */ --grey-950: #dddddd; /* dark #222222 → 221 (hover des cards : visible !) */ --color-bg: #ffffff; /* test Pattern A : fond blanc pur */ --color-txt: #222222; /* gris foncé adouci (évite le halation du noir pur sur blanc pur) */ --color-green: #0a8f4d; /* light mode : vert plus foncé/vif, lisible sur blanc */ --color-txt-light: var(--grey-400); --border-light: 1px solid #bebebe; /* dark #414141 → 190 */ --color-accent: #0000ff; --color-accent-50: #e6f7eb; --color-accent-100: #cceedd; --dark: white; --color-form: var(--color-bg); } /* Light mode : on retire l'antialiasing forcé pour revenir au rendu natif (font Executive avec son hinting d'origine, plus fidèle au dessin du typographe). Le dark mode garde l'antialiased (texte fin sur fond sombre). */ :root[data-theme=light] * { -webkit-font-smoothing: auto; -moz-font-smoothing: auto; -o-font-smoothing: auto; } * { 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(--normal); color: var(--color-txt); background-color: var(--color-bg); } p, li, .page__description, figcaption, .caption { text-wrap: pretty; } h1, h2, h3, h4, h5, h6, .title, .page__title { text-wrap: balance; } /* Liens inline DANS UN BLOC DE TEXTE (paragraphes de prose + chapô) : soulignés (soulignement un poil plus bas), couleur du texte, gris très clair (--grey-200) au survol — comme partout. On ne cible QUE les `

` (et le chapô) : les listes de liens structurels (grille équipe, etc.) ne sont PAS concernées et restent non soulignées. */ .page__content p a, .page__description a, .package__section p a, #investigation__content p a { text-decoration: underline; text-underline-offset: 0.18em; } .page__content p a:hover, .page__description a:hover, .package__section p a:hover, #investigation__content p a:hover { color: var(--grey-200); } /* Exception : la liste des ancien·nes (`.team-roster` = un

de liens) n'est pas de la prose → pas de soulignement (comme la grille équipe). */ .page__content .team-roster a { text-decoration: none; } img { max-width: 100%; } .link-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; cursor: pointer; } .swiper-button-next, .swiper-button-prev, body, #site-header, #site-footer { transition: background-color 0.3s ease, color 0.3s ease; } body.menu-open, body.is-hidden { overflow-y: hidden; } /* Bandeau d'édition (utilisateur connecté au Panel) : fixe au-dessus du header, couleur inversée du mode (bg = couleur du texte, texte = couleur du fond). Rendu uniquement si connecté → jamais mis en cache pour le public. */ .edit-bar { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-header) + 1); height: var(--edit-bar-h); display: flex; align-items: center; justify-content: space-between; gap: 2ch; padding: 0 var(--padding-body); background-color: var(--color-txt); color: var(--color-bg); font-size: var(--small); } .edit-bar__label { opacity: 0.55; } .edit-bar__links { display: flex; gap: 2.5ch; } .edit-bar a { color: inherit; text-decoration: none; transition: opacity 0.15s ease; } .edit-bar a:hover { opacity: 0.55; } /* Bandeau d'édition (connecté au Panel) : pousse TOUT le contenu vers le bas de façon uniforme (le header/logo aussi), il ne se superpose à rien. Tout ce qui s'ancre sous le header doit suivre : header, main, menu ET le sticky tagline. */ .has-edit-bar #site-header { top: var(--edit-bar-h); } .has-edit-bar main { padding-top: calc(var(--header-h) + var(--edit-bar-h)); } .has-edit-bar #site-menu { top: calc(var(--header-h) + var(--edit-bar-h)); height: calc(100dvh - var(--header-h) - var(--edit-bar-h)); height: calc(100vh - var(--header-h) - var(--edit-bar-h)); } .has-edit-bar .section__tagline { top: calc(var(--header-h) + var(--edit-bar-h)); } #site-header { z-index: var(--z-header); --gap: 3ch; position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gap) * 0.25); } #site-header a { text-decoration: none; } #site-header a:hover { color: var(--grey-200); } /* Logo Index + lien Soutenez-nous : pâlissement opacity 0.85 sans changement de couleur (logo blanc/noir intact, support vert intact) */ #site-header #site-title a:hover { opacity: 0.85; } #site-header #support-link:hover { opacity: 0.85; color: var(--color-accent); } #site-header #site-title { position: relative; top: 1px; width: 140px; } #site-header #site-title svg { width: 100px; } @media screen and (max-width: 768px) { #site-header #site-title svg { width: 80px; } #site-header #site-title { top: 0px; } } /* Nav 4-rubriques : centrée par rapport à la PAGE entière via position absolute. .site-header__inner doit être position: relative (cf. plus bas). */ #site-header #nav-highlight { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 200ms ease; } #site-header #nav-highlight ul { display: flex; align-items: center; justify-content: center; gap: var(--gap); list-style-type: none; font-weight: 500; text-transform: uppercase; font-size: var(--normal); } #site-header #nav-highlight ul li { white-space: nowrap; } /* Logique B : actif/courant = blanc, activable = gris. Hover universel vers --grey-200 (gris intermédiaire) — depuis blanc ça grise un peu, depuis gris ça éclaircit un peu : feedback subtil dans les deux cas. */ #site-header #nav-highlight ul li a { color: var(--color-txt-light); } #site-header #nav-highlight ul li.is-current a { color: var(--color-txt); } /* Sur la home : aucune rubrique n'est courante, tous les liens en blanc. */ body[data-template=home] #site-header #nav-highlight ul li a { color: var(--color-txt); } /* Hover : tend vers le gris intermédiaire, quel que soit l'état initial */ #site-header #nav-highlight ul li a:hover, #site-header #nav-highlight ul li.is-current a:hover, body[data-template=home] #site-header #nav-highlight ul li a:hover { color: var(--grey-200); } /* Palier intermédiaire 769-1080px : nav reste centrée mais passe en --small (16px) pour gagner de la place. */ @media screen and (max-width: 1080px) { #site-header #nav-highlight ul { font-size: var(--small); } } /* Palier serré 769-900px : avec 5 rubriques (Dossiers ajouté), la nav centrée (position absolue) chevaucherait le logo et les contrôles — d'autant que les libellés EN sont plus longs (Investigations, Laboratory). On resserre le gap et on réduit légèrement la police pour qu'elle tienne sans conflit. */ @media screen and (max-width: 900px) { #site-header #nav-highlight ul { gap: 1.5ch; font-size: 14px; } } /* ≤ 768px : header mobile minimal — nav cachée, juste logo / theme / lang / burger */ @media screen and (max-width: 768px) { #site-header #nav-highlight ul { display: none; } } /* nav-investigation : conservé pour compatibilité (non utilisée actuellement) */ #site-header #nav-investigation { flex-grow: 2; } #site-header #nav-investigation ul { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--gap); list-style-type: none; } #site-header #nav-investigation ul li { white-space: nowrap; } #site-header #support-link { font-size: var(--small); font-weight: 500; text-transform: uppercase; text-decoration: none; color: var(--color-accent); white-space: nowrap; /* Alignement vertical : calé sur #lang-toggle a (qui a top: -1px) */ position: relative; top: -1px; } @media screen and (max-width: 500px) { #site-header #support-link { display: none; } } #site-header #nav-investigation { position: absolute; top: 10%; left: 0; display: flex; opacity: 0; transition: top 0.3s ease; pointer-events: none; min-width: 0; } #site-header #nav-investigation .title { text-transform: uppercase; font-size: var(--small); font-weight: 500; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2ch; padding-right: 2ch; text-align: center; color: var(--color-txt-light); } @media screen and (max-width: 1080px) { #site-header #nav-investigation ul { font-size: var(--small); padding-left: 6ch; padding-right: 6ch; } } #site-header #nav-investigation li { color: var(--color-txt-light); transition: color 0.3s ease; } #site-header #nav-investigation li.is-selected { color: var(--color-txt); } #site-header #nav-investigation li.is-selected:hover { color: var(--color-txt); pointer-events: none; } #site-header #nav-investigation li.is-selected:hover a:hover { color: var(--color-txt); } #site-header #theme-toggle { width: var(--h-block); height: var(--h-block); display: flex; align-items: center; justify-content: center; /* Alignement vertical : l'icône demi-cercle est légèrement décalée vers le bas par son viewBox (path centré à y=22 sur 48) ; on remonte de 2px pour que la ligne médiane visible coïncide avec celle des EN/FR et du burger. */ position: relative; top: -2px; } #site-header #theme-toggle svg { width: 18px; } #site-header #lang-toggle { display: flex; gap: 0.75ch; /* Espace lang → burger = padding-right + gap du wrapper (0.25 * var(--gap)). Cible : 18px total. */ padding-right: calc(18px - var(--gap) * 0.25); } #site-header #lang-toggle a { font-size: var(--small); font-weight: 500; position: relative; top: -1px; } #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } /* Logique B : langue courante = blanc (actif), autre langue = gris (cliquable). La courante est non cliquable (aria-current="page"). Hover tend vers le gris intermédiaire pour feedback subtil. */ #site-header #lang-toggle a { color: var(--color-txt-light); } #site-header #lang-toggle a:hover { color: var(--grey-200); } #site-header #lang-toggle a[aria-current="page"] { color: var(--color-txt); pointer-events: none; cursor: default; } #site-header #menu-toggle { cursor: pointer; } #site-header #menu-toggle svg { width: 30px; fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } #site-header.has-nav-investigation #nav-highlight { display: none; } #site-header.has-nav-investigation #nav-investigation { position: relative; opacity: 1; transform: translateY(0); top: 0px; pointer-events: auto; } @media screen and (min-width: 768px) { #site-header #nav-investigation .title { display: none; } } @media screen and (max-width: 768px) { #site-header #nav-highlight ul { display: none; } #site-header #nav-investigation .title { display: none; } #site-header.has-nav-investigation #nav-investigation ul { display: none; } #site-header.has-nav-investigation #nav-investigation .title { display: block; } } body.menu-open #site-header { cursor: pointer; } body.menu-open #site-header #nav-highlight, body.menu-open #site-header #nav-investigation { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in; } /* #support-link reste visible quand le menu burger est ouvert (desktop). En mode mobile (≤768px) le lien apparaît aussi DANS le menu burger via .menu-only-mobile → on cache celui du header à l'ouverture pour éviter le doublon. */ @media screen and (max-width: 768px) { body.menu-open #site-header #support-link { display: none; } } button { cursor: pointer; font-family: var(--font); font-size: var(--normal); color: var(--color-txt); } button svg { fill: var(--color-txt); } button:hover { color: var(--grey-100); } button:hover svg { fill: var(--grey-100); } button a { text-decoration: none; width: 100%; height: 100%; } button:disabled { cursor: auto; } .btn--small { height: calc(var(--h-block) * 1); border: var(--border-light); border-radius: var(--radius-btn); font-size: var(--small); font-weight: 500; line-height: 1; overflow: hidden; white-space: nowrap; } .btn--small a { display: flex; align-items: center; justify-content: center; gap: 1ch; width: 100%; height: 100%; padding: 0 1ch; padding-top: 2px; } .btn--small .icon { --size: 10px; height: var(--size); width: var(--size); position: relative; top: -8px; } .btn--small .icon svg { width: 100%; fill: var(--color-txt); } .btn--small.no-link { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 1ch; padding-top: 2px; } .btn--small:hover { color: currentColor; border-color: currentColor; background-color: var(--grey-950); } .btn--small.is-selected { background-color: var(--color-txt); border-color: var(--color-txt); color: var(--color-bg); } .btn--small.is-selected a { color: var(--color-bg); } .btn--small.is-selected svg { fill: var(--color-bg); } .btn--simple { height: calc(var(--h-block) * 1); font-size: var(--small); font-weight: 500; text-transform: uppercase; line-height: 1; white-space: nowrap; } .btn--simple .icon { display: flex; width: 20px; height: 20px; } .btn--simple .icon svg { width: 20px; height: 20px; } .btn--simple .icon { position: relative; top: -2px; } .btn--simple a { display: flex; align-items: center; justify-content: center; gap: 0.4ch; width: 100%; height: 100%; padding: 0 2ch; padding-top: 4px; white-space: nowrap; } .btn--simple.no-link { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 2ch; padding-top: 4px; } .btn--bold { display: block; height: calc(var(--h-block) * 1); border: var(--border); border-radius: var(--radius-btn); font-size: var(--small); line-height: 1; overflow: hidden; white-space: nowrap; } .btn--bold .icon { display: flex; width: 12px; height: 12px; } .btn--bold .icon svg { width: 12px; height: 12px; } .btn--bold svg { position: relative; top: -1px; } .btn--bold a { display: flex; align-items: center; justify-content: center; gap: 1ch; width: 100%; height: 100%; padding: 0 1.25ch; padding-top: 4px; } .btn--bold.no-link { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 1.25ch; padding-top: 4px; } .btn--bold { background-color: var(--color-txt); color: var(--color-bg); } .btn--bold svg { fill: var(--color-bg); } .btn--bold:hover { background-color: var(--color-accent); border-color: var(--color-accent); } .btn--bold:hover a { color: var(--color-bg); } .btn--bold:hover svg { fill: var(--color-bg); } .btn--see-more { margin-top: calc(var(--spacing) * 1); margin-inline: auto; display: block; height: calc(var(--h-block) * 1); border: 1px solid var(--color-txt-light); border-radius: var(--radius-btn); font-size: var(--small); line-height: 1; overflow: hidden; white-space: nowrap; color: var(--color-txt-light); background-color: var(--color-bg); } .btn--see-more .icon { display: flex; width: 12px; height: 12px; } .btn--see-more .icon svg { width: 12px; height: 12px; } .btn--see-more .icon { position: relative; top: -2px; } .btn--see-more svg { fill: var(--color-txt-light); } .btn--see-more a { display: flex; align-items: center; justify-content: center; gap: 1ch; width: 100%; height: 100%; padding: 0 1.25ch; padding-top: 4px; font-size: var(--small); } .btn--see-more:hover { background-color: var(--grey-950); color: var(--grey-100); border-color: var(--grey-100); } .btn--see-more:hover a { background-color: var(--grey-950); color: var(--grey-100); } .btn--see-more:hover svg { fill: var(--grey-100); } .btn--home { display: block; height: calc(var(--h-block) * 1); border: var(--border); border-radius: var(--radius-btn); font-size: var(--small); line-height: 1; overflow: hidden; white-space: nowrap; background-color: var(--color-bg); font-weight: 500; } .btn--home .icon { display: flex; width: 12px; height: 12px; } .btn--home .icon svg { width: 12px; height: 12px; } .btn--home .icon { position: relative; top: -2px; } .btn--home a { display: flex; align-items: center; justify-content: center; gap: 1ch; width: 100%; height: 100%; padding: 0 1.25ch; padding-top: 4px; } .btn--home:hover { background-color: var(--grey-950); color: var(--grey-100); border-color: var(--grey-100); } .btn--home:hover a { background-color: var(--grey-950); color: var(--grey-100); } .btn--home:hover svg { fill: var(--grey-100); } .btn--toc svg { width: 15px; height: 15px; top: 0px; } @keyframes wiggle-left { 0% { transform: translateX(0); } 40% { transform: translateX(-10px); } 80% { transform: translateX(0); } 100% { transform: translateX(0); } } .btn--support { color: var(--color-accent); } .btn--support a { text-decoration: none; } .btn--support:hover, .btn--support:hover a { color: var(--color-accent); opacity: 0.85; text-decoration: none; } .type { height: calc(var(--h-block) * 0.75); border-radius: var(--radius-small); width: -moz-max-content; width: max-content; display: inline-flex; align-items: center; justify-content: center; padding: 0 1ch; padding-top: 3px; font-size: var(--xsmall); line-height: 1; font-weight: 500; background-color: var(--color-txt); color: var(--color-bg); overflow: hidden; white-space: nowrap; text-transform: uppercase; } .category { height: calc(var(--h-block) * 0.75); border-radius: var(--radius-small); display: inline-flex; align-items: center; justify-content: center; padding: 0 1ch; padding-top: 3px; font-size: var(--xsmall); line-height: 1; font-weight: 500; border: var(--border-medium); background-color: transparent; color: var(--color-txt-light); overflow: hidden; white-space: nowrap; text-transform: uppercase; } .page__category { height: calc(var(--h-block) * 1); border-radius: var(--radius-small); border: var(--border-medium); display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5ch; padding-top: 5px; font-size: var(--small); background-color: var(--color-bg); color: var(--color-txt-light); font-weight: 500; overflow: hidden; white-space: nowrap; text-transform: uppercase; text-decoration: none; } @media screen and (max-width: 768px) { .page__category { height: calc(var(--h-block) * 0.75); font-size: var(--xsmall); padding: 0 1ch; padding-top: 3px; } } .page__type { height: calc(var(--h-block) * 1); border-radius: var(--radius-small); display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5ch; padding-top: 5px; font-size: var(--small); background-color: var(--color-txt); color: var(--color-bg); font-weight: 500; overflow: hidden; white-space: nowrap; text-transform: uppercase; } @media screen and (max-width: 768px) { .page__type { height: calc(var(--h-block) * 0.75); font-size: var(--xsmall); padding: 0 1ch; padding-top: 4px; } } .page__labels { display: flex; align-items: stretch; gap: calc(var(--padding-inner) / 2); flex-wrap: wrap; margin-bottom: calc(var(--spacing) * 1); } .page__labels .page__type { margin-left: 0; } .page__labels a.page__category { text-decoration: none; } .page__labels a.page__category:hover { background-color: var(--grey-800); border-color: currentColor; } .keywords { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .keywords a { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 0.75); padding: 0 1ch; padding-top: 3px; border: var(--border-medium); border-radius: var(--radius-small); background-color: transparent; font-size: var(--xsmall); line-height: 1; white-space: nowrap; text-decoration: none; text-transform: none; color: var(--color-txt-light); } .keywords a:hover { background-color: var(--grey-950); color: var(--color-txt); } .keywords a.is-active { background-color: var(--color-txt); border-color: var(--color-txt); color: var(--color-bg); } .keywords--small { list-style: none; } .keywords--small li { display: inline; } .keywords--small a { font-size: var(--xsmall); color: var(--color-txt-light); text-decoration: none; text-transform: none; } .keywords--small a::after { content: " "; } button.sort { display: inline-flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 1.25ch; flex-shrink: 0; } button.sort .arrow { line-height: 0; --size: 8px; height: var(--size); width: var(--size); display: inline-flex; align-items: center; justify-content: center; position: relative; top: -2px; transform: rotate(90deg); transition: transform 0.2s ease-in; } button.sort .arrow svg { width: 100%; fill: var(--color-txt-light); } @media screen and (max-width: 560px) { button.sort { font-size: var(--xsmall); } } button.sort[data-sort-type=down] .arrow { transform: rotate(-90deg); } button.sort[data-sort-alpha=up] .arrow { transform: rotate(-90deg); } .page__sort { /* Gap filtres → grille = marge entre cartes (--padding-body), uniforme sur tout le site. */ margin-bottom: var(--padding-body); display: flex; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; max-width: var(--max-w-cards); margin-inline: auto; } @media screen and (max-width: 768px) { .page__sort { margin-bottom: var(--padding-body); } } .page__filters { display: flex; flex-wrap: nowrap; gap: 8px; margin-left: 8px; } /* Mobile : champ recherche masqué (les utilisateurs passent par le menu burger pour chercher dans tout le site), tri + filtres restent sur une ligne. */ @media screen and (max-width: 768px) { .page__sort { flex-wrap: wrap; justify-content: flex-start; gap: 6px; } .page__sort .page__search { order: 2; flex: 1; width: auto; margin-left: 0; } .page__filters { order: 10; flex-basis: 100%; gap: 6px; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .page__filters::-webkit-scrollbar { display: none; } .page__filters .dropdown { flex: 0 0 auto; } .page__filters .dropdown .dropdown__trigger { white-space: nowrap; } } .page__sort button.btn--small, .page__sort .dropdown__trigger, .page__sort .page__search { color: var(--color-txt-light); font-weight: 400; font-size: var(--xsmall); } .page__sort .dropdown__trigger .dropdown__arrow { display: inline-flex; align-items: center; line-height: 0; width: 8px; height: 8px; transform: rotate(90deg); transition: transform 0.2s ease; } .page__sort .dropdown.is-open .dropdown__trigger .dropdown__arrow { transform: rotate(-90deg); } .page__sort .dropdown__trigger .dropdown__arrow svg { width: 100%; fill: currentColor; } .page__sort .dropdown__content a, .page__sort .dropdown__content button { font-size: var(--xsmall); } /* Sélectionné : spécificité plus haute pour contrecarrer la règle ci-dessus. */ .page__sort button.btn--small.is-selected { color: var(--color-bg); font-weight: 500; } .page__learn-more { display: inline-flex; align-items: center; gap: 0.4ch; height: var(--h-block); padding: 0 1.25ch; padding-top: 3px; font-size: var(--xsmall); font-weight: 400; line-height: 1; border: 1px solid var(--color-txt); border-radius: var(--radius-btn); background-color: transparent; color: var(--color-txt); text-decoration: none; white-space: nowrap; } .page__learn-more__arrow { opacity: 0.65; } .page__learn-more:hover { background-color: var(--color-txt); color: var(--color-bg); } .page__search { margin-left: auto; order: 3; height: var(--h-block); padding: 0 1.25ch; padding-top: 3px; font-size: var(--small); font-family: inherit; border: var(--border-light); border-radius: var(--radius-btn); background-color: var(--color-bg); color: var(--color-txt); min-width: 0; width: clamp(140px, 24vw, 220px); } .page__sort .page__filters { order: 2; } .page__sort button.sort { order: 1; } .page__search::-webkit-search-cancel-button { cursor: pointer; } .page__search::placeholder { color: var(--color-txt-light); opacity: 1; } .page__search:focus { outline: none; border-color: var(--color-txt); } .btn--group__mobile { z-index: calc(var(--z-header) - 10); opacity: 0; transition: opacity 0.3s ease-in; } .btn--group__mobile.is-visible { opacity: 1; } .btn--group__mobile { position: fixed; bottom: 0; left: 0; width: 100vw; height: calc(var(--h-block) * 3); padding: calc(var(--spacing) * 0.75) var(--padding-body); background-color: var(--color-bg); background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%); display: flex; align-items: flex-end; gap: var(--padding-inner); } .btn--group__mobile button, .btn--group__mobile .dropdown { flex-grow: 1; width: 100%; } @media screen and (min-width: 768px) { .btn--group__mobile { display: none; opacity: 0 !important; } } figcaption, .caption { font-size: var(--small) !important; color: var(--color-txt-light); font-weight: 400; line-height: 1.3; margin: calc(var(--spacing) * 0.25) 0 calc(var(--spacing) * 1) 0; text-align: center; } /* Légende du hero (sous cover image OU vidéo dans le header) : centrée */ .page__header > .caption, .page__header .page__cover + .caption, .page__header figure.page__cover figcaption, #investigation__hero figcaption { text-align: center !important; } figure.video-embed { aspect-ratio: 16/9; width: 100%; } /* Vidéo verticale (portrait) : lecteur 9:16 sur toute la largeur de la colonne. */ figure.video-embed--portrait { aspect-ratio: 9/16; } figure.video-embed iframe { width: 100%; height: 100%; display: block; } /* Bloc iframe embed — overlay "Explorer en 3D" */ figure.iframe-embed { width: 100%; } .iframe-embed__wrapper { position: relative; width: 100%; } .iframe-embed__wrapper iframe { display: block; width: 100%; height: 100%; } .iframe-embed__overlay { position: absolute; inset: 0; z-index: 2; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); transition: background 0.15s ease; } .iframe-embed__btn { display: flex; align-items: center; gap: 0.6ch; padding: 0 1.25ch; height: calc(var(--h-block) * 1); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-btn); font-size: var(--small); white-space: nowrap; background: rgba(255, 255, 255, 0.7); color: #111; pointer-events: none; transition: background 0.15s ease, border-color 0.15s ease; } .iframe-embed__btn svg { width: 14px; height: 14px; fill: #111; flex-shrink: 0; } .iframe-embed__overlay:hover .iframe-embed__btn { background: rgba(255, 255, 255, 1); border-color: rgba(255, 255, 255, 1); } #investigation__hero { width: 100%; max-width: var(--max-w-cards); margin-inline: auto; } #investigation__hero figcaption { color: var(--color-txt-light); font-size: var(--small); } @media screen and (max-width: 560px) { #investigation__hero figcaption { font-size: var(--xsmall); } } #investigation__hero figcaption { padding: calc(var(--spacing) * 0.5) var(--padding-body) calc(var(--spacing) * 1); text-align: center; margin-inline: auto; } #investigation__hero figure { width: 100%; position: relative; } #investigation__hero figure img { width: 100%; height: auto; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; } #investigation__hero .player-container { width: 100%; position: relative; aspect-ratio: 16/9; } #investigation__hero .player-container .extract, #investigation__hero .player-container video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: relative; } #investigation__hero .player-container .video-full { width: 100%; height: 100%; } #investigation__hero .player-container .video-full iframe { width: 100%; height: 100%; } #investigation__hero .player-container .video-full { display: none; } #investigation__hero .player-container #hero-play-video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } #investigation__hero .player-container #hero-play-video .btn--bold { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 1ch; opacity: 1; background-color: rgba(255, 255, 255, 0.6); color: #000; border-color: transparent; transition: background-color 0.2s ease; } #investigation__hero .player-container #hero-play-video .btn--bold svg { fill: #000; } #investigation__hero .player-container #hero-play-video .btn--bold:hover { background-color: #fff; color: #000; border-color: transparent; } #investigation__hero .player-container #hero-play-video .btn--bold:hover svg { fill: #000; } #investigation__hero .player-container #hero-play-video .text { color: #000; font-weight: 400; line-height: 1; padding-top: 3px; } #investigation__hero .player-container #hero-play-video svg { width: 18px; height: 18px; position: relative; top: 0; fill: black; opacity: 0.8; } /* Honeypot anti-bot : hors écran (pas display:none, que certains bots ignorent). */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ============================================================================ Page Newsletter — alignée sur le gabarit de référence (À propos) : titre ferré à gauche sans filet (override de centrage retiré §page__header), chapo en page__description, colonne 680 ferrée à gauche. Deux états : inscription (défaut) + écran de remerciement (atterrissage après confirmation double opt-in). ============================================================================ */ /* Colonne 680 (comme le chapo) — body[...] pour battre `.main__single .page__content` (1100 + margin-top 3×) à égalité de spécificité. On annule le margin-top 90px générique : l'écart chapo→champ est porté par le seul margin-bottom du header (réduit ci-dessous), sans empilement. */ body[data-template=newsletter] .page__content { max-width: var(--max-w-content); margin-top: 0; } /* Spacing VISUEL symétrique de 60px autour du champ. On compense le demi- interligne : ~7px sous la dernière ligne du chapo, ~4px au-dessus de la 1re ligne du texte gris (sinon le gap optique paraît plus petit que la marge). */ [data-template=newsletter] .page__header { margin-bottom: calc(var(--spacing) * 2 - 7px); } [data-template=newsletter] .form__newsletter { margin-top: 0; } [data-template=newsletter] .newsletter__reassure { /* !important : .main__single .page__content p (2 classes + élément) réimpose sinon margin 0.75× ET font-size --normal. */ margin-top: calc(var(--spacing) * 2 - 4px) !important; font-size: var(--small) !important; line-height: 1.5; color: var(--color-txt-light); } [data-template=newsletter] .newsletter__reassure a { text-decoration: underline; } [data-template=newsletter] .newsletter__details { margin-top: calc(var(--spacing) * 1.5); font-size: var(--small); color: var(--color-txt-light); } /* Écran de remerciement : encart soutien plus serré qu'en fin d'article (95px), puis réseaux. */ [data-template=newsletter] .support-cta { margin-top: calc(var(--spacing) * 1.5); } [data-template=newsletter] .newsletter__socials { margin-top: calc(var(--spacing) * 2); } [data-template=newsletter] .newsletter__socials-title { font-size: var(--small); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: calc(var(--spacing) * 0.6); color: var(--color-txt-light); } [data-template=newsletter] .newsletter__socials .list-socials { padding-left: 0; } /* Formulaire d'inscription — pastille blanche + bouton rond vert « impact » qui s'allonge en « S'INSCRIRE → » au survol. Partagé : page Newsletter + mailwall. */ .form__newsletter { --size: 24px; position: relative; display: flex; align-items: center; } .form__newsletter input[type=email] { height: calc(var(--h-block) * 1.5); width: 100%; border-radius: calc(var(--h-block) * 0.75); outline: none; border: 1px solid transparent; padding: 0 2ch; padding-top: 4px; font-family: var(--font); font-size: var(--normal); /* taille du corps d'article */ font-weight: var(--fw-normal); /* regular */ background: #ffffff; /* pastille blanche */ color: #111111; /* saisie en noir */ } .form__newsletter input[type=email]::-moz-placeholder { font-family: var(--font); font-size: var(--normal); font-weight: var(--fw-normal); color: #8a8a8a; } .form__newsletter input[type=email]::placeholder { font-family: var(--font); font-size: var(--normal); font-weight: var(--fw-normal); color: #8a8a8a; } /* Focus : un seul contour, gris (pas de double vert + gris). */ .form__newsletter input[type=email]:focus { border-color: #bbbbbb; outline: none; } .form__newsletter button[type=submit].btn--newsletter { position: absolute; right: 4px; z-index: 100; --size: calc(var(--h-block) * 1.5 - 8px); font-family: var(--font); font-size: var(--small); height: var(--size); width: auto; /* zone de survol = la pastille uniquement */ display: flex; align-items: center; justify-content: flex-end; /* rond collé à droite au repos */ gap: 0.75ch; color: #111111; /* « S'INSCRIRE » + flèche en noir sur le vert */ font-weight: 500; text-decoration: none; border: none; background: none; cursor: pointer; } .form__newsletter button[type=submit].btn--newsletter .icon, .form__newsletter button[type=submit].btn--newsletter .txt { z-index: 10; } .form__newsletter button[type=submit].btn--newsletter .icon { width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; } .form__newsletter button[type=submit].btn--newsletter .icon svg { fill: #111111; width: 48%; } .form__newsletter button[type=submit].btn--newsletter .txt { position: relative; top: 2px; font-size: var(--small); display: none; padding-left: 1ch; text-transform: uppercase; } .form__newsletter button[type=submit].btn--newsletter::after { content: ""; display: block; background-color: var(--color-green); /* vert impact (pas le vert RGB) */ border-radius: calc(var(--size) / 2); width: var(--size); height: var(--size); position: absolute; right: 0; z-index: 0; transition: width 0.2s; } /* Au survol du tiers droit (la zone du bouton), la pastille verte se déploie et « S'INSCRIRE → » se centre dedans. */ .form__newsletter button[type=submit].btn--newsletter:hover { justify-content: center; } .form__newsletter button[type=submit].btn--newsletter:hover .txt { color: #111111; display: block; } .form__newsletter button[type=submit].btn--newsletter:hover::after { width: 100%; } .search-form { --icon: 40px; display: grid; grid-template-columns: var(--icon) 1fr; /* Logique B : gris au repos, blanc à l'activation. La couleur courante du wrapper est héritée par l'input (color) et par l'icône SVG (currentColor), et bascule en blanc dès que l'input prend le focus. */ color: var(--color-txt-light); transition: color 200ms ease; } .search-form:focus-within { color: var(--color-txt); } .search-form input { grid-column: 1/3; grid-row: 1; height: calc(var(--h-block) * 1.5); width: 100%; background: var(--color-bg); border: 1px solid currentColor; padding-left: var(--icon); font-family: var(--font); font-size: var(--normal); color: inherit; caret-color: var(--color-txt); padding-top: 3px; transition: border-color 200ms ease; } .search-form input::-moz-placeholder { font-family: var(--font); font-size: var(--normal); color: var(--color-txt-light); } .search-form input::placeholder { font-family: var(--font); font-size: var(--normal); color: var(--color-txt-light); } .search-form input:focus { outline: none; } .search-form .icon { grid-column: 1; grid-row: 1; z-index: 10; width: 100%; display: flex; align-items: center; justify-content: center; } .search-form .icon svg { width: 20px; fill: currentColor; } .list-socials { list-style: none; display: flex; align-items: center; gap: calc(var(--spacing) * 0.75); } .list-socials a { display: flex; align-items: center; text-decoration: none; } .list-socials li { --size-icon: 20px; } .list-socials li[data-socials=youtube] { --size-icon: 26px; } .list-socials .icon { width: var(--size-icon); height: var(--size-icon); position: relative; top: -2px; } .list-socials svg { display: flex; align-items: center; width: var(--size-icon); height: var(--size-icon); fill: var(--color-txt); } .list-socials a svg { transition: fill 0.15s ease; } .list-socials a:hover svg, .list-socials a:active svg { fill: var(--grey-200); } /* Mobile : rangée de réseaux sociaux centrée (gap naturel, comme en desktop), + espacements verticaux : +5px sous les liens (Newsletter → icônes), +10px sous les icônes avant le copyright. */ @media screen and (max-width: 768px) { #site-footer .list-socials { width: 100%; justify-content: center; } #site-footer .socials { margin-top: 5px; } #site-footer .credits { margin-top: 10px; } } .modal--share { width: 240px; padding-bottom: var(--padding-inner); background-color: var(--color-bg); } .modal--share .title { font-size: var(--small); line-height: 1.2; padding: var(--padding-inner); padding-bottom: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; } .modal--share .title::before { content: "« "; } .modal--share .title::after { content: " »"; } .modal--share .socials { display: block; list-style: none; } .modal--share .socials li { font-size: var(--small); border-bottom: var(--border-light); } .modal--share .socials li:first-of-type { border-top: var(--border-light); } .modal--share .socials li a { display: flex; align-items: center; gap: 2ch; text-decoration: none; font-size: var(--small); } .modal--share .socials li .icon { width: 16px; height: 16px; } .modal--share .socials li .icon svg { width: 100%; height: 100%; } .modal--share .socials li .text { position: relative; top: 2px; } .modal--share .copy-link { display: flex; gap: 0.5ch; padding: 0 var(--padding-inner); height: var(--h-block); width: 100%; } .modal--share .copy-link .copy-link__field { flex-grow: 1; display: grid; grid-template-columns: var(--h-block) 1fr; } .modal--share .copy-link .icon { display: flex; width: var(--h-block); height: 100%; align-items: center; justify-content: center; position: relative; grid-row: 1; grid-column: 1; } .modal--share .copy-link .icon svg { width: 12px; } .modal--share .copy-link input { font-size: var(--xsmall); font-family: var(--font); background: none; border: none; color: var(--color-txt); padding-top: 2px; grid-column: 1/end; grid-row: 1; padding-left: var(--h-block); padding-right: 0.5ch; border: var(--border-light); border-radius: var(--radius-btn); height: var(--h-block); } .modal--share .copy-link input:focus { border-color: var(--color-txt); outline: none; } .modal--share .copy-link input.is-copied { color: var(--color-accent) !important; } .modal--share .copy-link .copy-link__btn { background-color: var(--color-txt); color: var(--color-bg); border-radius: var(--radius-btn); padding: 0 1ch; font-size: var(--xsmall); padding-top: 2px; white-space: nowrap; text-align: center; width: 8ch !important; } .modal--share .copy-link .copy-link__btn::after { content: " "; } .modal--share .copy-link .copy-link__btn:hover { background-color: var(--color-accent); } #share-banner__content, #share-banner__aside, #share-banner__desktop { display: none; } #share-banner__content ~ .modal--share, #share-banner__aside ~ .modal--share, #share-banner__desktop ~ .modal--share { opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in; } #share-banner__content:checked ~ .modal--share, #share-banner__aside:checked ~ .modal--share, #share-banner__desktop:checked ~ .modal--share { opacity: 1; pointer-events: auto; } .dropdown { position: relative; display: inline-block; } .dropdown__trigger { cursor: pointer; } .dropdown__content { position: absolute; top: 100%; left: 0; margin-top: 6px; background-color: var(--color-bg); border: var(--border-light); border-radius: var(--radius-small); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s; z-index: calc(var(--z-header) + 10); } .dropdown__content ul { list-style: none; margin: 0; padding: calc(var(--spacing) * 0.25) 0; min-width: 180px; max-height: 50vh; overflow-y: auto; } /* Mobile : dropdown en drawer pleine largeur sous la toolbar (.dropdown passe en static → le content absolute s'ancre sur .page__sort plein largeur) */ @media screen and (max-width: 768px) { .page__sort { position: relative; } .dropdown { position: static; } .dropdown__content, .dropdown.dropdown--align-right .dropdown__content { left: 0; right: 0; width: auto; } .dropdown__content ul { min-width: 0; max-width: none; } } .dropdown__content a, .dropdown__content button { display: block; width: 100%; padding: calc(var(--spacing) * 0.3) calc(var(--padding-inner) * 0.75); font-size: var(--small); font-weight: 400; line-height: 1.2; text-align: left; text-decoration: none; color: var(--color-txt-light); background: none; border: none; cursor: pointer; white-space: nowrap; } .dropdown__content a:hover, .dropdown__content button:hover { background-color: var(--grey-950); color: var(--color-txt); } .dropdown__content a.is-selected, .dropdown__content button.is-selected { font-weight: 500; color: var(--color-txt); } .dropdown--align-right .dropdown__content { left: auto; right: 0; } .dropdown.is-open .dropdown__content { opacity: 1; visibility: visible; } .dropdown.has-active-filter .dropdown__trigger { background-color: var(--color-txt); border-color: var(--color-txt); color: var(--color-bg); } .dropdown.has-active-filter .dropdown__trigger svg { fill: var(--color-bg); } /* Filtre actif : le trigger garde le NOM DU TYPE et sa flèche ; la valeur sélectionnée s'affiche en pastille fermable à droite (cf. .dropdown-filter-pill), même principe que les sous-types de la rubrique Impact. */ .dropdown-filter-pill { cursor: pointer; } .dropdown-filter-pill .filter-subtype-pill__x { transform: translateY(1px); } .page__filters > .filter-subtype-pill.is-selected, .dropdown-filter-pill.is-selected { background: var(--color-txt, #111); color: var(--color-bg, #fff); border-color: var(--color-txt, #111); } .dropdown-filter-pill:hover { opacity: 0.85; } .dropdown--position-mobile .dropdown__content { background-color: red; } @media screen and (min-width: 768px) { .dropdown--position-panel .dropdown__content { top: auto; bottom: 0; left: calc(100% + var(--padding-inner)); margin-top: 0; margin-left: 4px; } .dropdown--position-panel .dropdown__content::before { font-family: Arial; content: "◀"; transform: rotate(0deg); font-size: 14px; position: absolute; top: auto; bottom: 4px; left: -11px; } .dropdown--position-panel.is-open .dropdown__content { transform: translateX(0); } } @media screen and (max-width: 560px) { .dropdown .dropdown__content { width: calc(100vw - var(--padding-body) * 2); left: auto; right: 0; } .dropdown .dropdown__content .modal--share { width: 100%; } } #bottom-bar .dropdown .dropdown__content { top: auto; bottom: calc(var(--h-block) + var(--padding-inner) * 2); left: auto; right: 0; margin-top: 0; margin-left: 4px; } #bottom-bar .dropdown .dropdown__content::before { font-family: Arial; content: "◀"; transform: rotate(-90deg); font-size: 14px; position: absolute; top: auto; bottom: -13px; left: auto; right: 10%; } @media screen and (max-width: 560px) { #bottom-bar .dropdown .dropdown__content::before { left: 20%; right: auto; } } #bottom-bar .dropdown.is-open .dropdown__content { transform: translateX(0); } [data-template=package] .page__content, .main__single .page__content, #investigation__content { font-size: var(--normal); max-width: var(--max-w-cards); } /* ============================================================================ Body enquête — largeurs des blocs médias (5 options : text / wide / full / split / manual). Appliquées via les classes .media-w-* sur le wrapper .media. ============================================================================ */ #investigation__content .media-w-text { max-width: var(--max-w-content); margin-inline: auto; } #investigation__content .media-w-wide { max-width: var(--max-w-cards); margin-inline: auto; } /* Pleine page : déborde du parent .page__content pour atteindre 100vw */ #investigation__content .media-w-full { max-width: 100vw; width: 100vw; margin-inline: calc(50% - 50vw); } /* Côte à côte : 2 blocs split consécutifs s'alignent côte à côte */ #investigation__content .media-w-split { display: inline-block; vertical-align: top; width: calc(50% - var(--padding-inner) * 0.5); max-width: calc(var(--max-w-cards) / 2 - var(--padding-inner) * 0.5); } #investigation__content .media-w-split + .media-w-split { margin-left: var(--padding-inner); } /* Largeur custom (en px), via --media-w injecté inline par le template */ #investigation__content .media-w-manual { max-width: var(--media-w, var(--max-w-content)); margin-inline: auto; } @media screen and (max-width: 768px) { /* Mobile : split aussi → 1 col (pour ne pas trop écraser) */ #investigation__content .media-w-split { display: block; width: 100%; max-width: var(--max-w-content); margin-inline: auto; } #investigation__content .media-w-split + .media-w-split { margin-left: auto; } } [data-template=package] .page__content p, [data-template=package] .page__content li, [data-template=package] .page__content ul, .main__single .page__content p, .main__single .page__content li, .main__single .page__content ul, #investigation__content p, #investigation__content li, #investigation__content ul { font-size: inherit; line-height: var(--leading-normal); } [data-template=package] .page__content h2, [data-template=package] .page__content h3, [data-template=package] .page__content h4, [data-template=package] .page__content h5, .main__single .page__content h2, .main__single .page__content h3, .main__single .page__content h4, .main__single .page__content h5, #investigation__content h2, #investigation__content h3, #investigation__content h4, #investigation__content h5 { font-weight: 500; max-width: var(--max-w-content); margin-inline: auto; text-transform: uppercase; /* Interligne serré comme les titres (--leading-title = 1.2) plutôt que l'interligne de prose hérité (--leading-normal = 1.55) : les titres de section sur 2 lignes étaient trop aérés. S'applique à toutes les pages contenu (enquête, veille, package, impact, news) ; le rapport avait déjà son propre correctif identique. */ line-height: var(--leading-title); } [data-template=package] .page__content h2, .main__single .page__content h2, #investigation__content h2 { margin-top: calc(var(--spacing) * 2.5); margin-bottom: calc(var(--spacing) * 2 / 3); font-size: var(--medium); } [data-template=package] .page__content h3, .main__single .page__content h3, #investigation__content h3 { margin-top: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * 0.5); font-size: var(--normal); } [data-template=package] .page__content h4, .main__single .page__content h4, #investigation__content h4 { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 0.375); font-size: var(--small); } [data-template=package] .page__content h5, .main__single .page__content h5, #investigation__content h5 { margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.25); font-size: var(--small); -webkit-text-decoration: 1px underline var(--grey-600); text-decoration: 1px underline var(--grey-600); text-underline-offset: 5px; } [data-template=package] .page__content p, .main__single .page__content p, #investigation__content p { margin: calc(var(--spacing) * 0.75) 0; } [data-template=package] .page__content ul, .main__single .page__content ul, #investigation__content ul { padding-left: 3ch; } [data-template=package] .page__content ul li, .main__single .page__content ul li, #investigation__content ul li { margin: calc(var(--spacing) * 0.5) 0; } [data-template=package] .page__content video, [data-template=package] .page__content figure, [data-template=package] .page__content img:not(.slider-before-after img), [data-template=package] .page__content picture, .main__single .page__content video, .main__single .page__content figure, .main__single .page__content img:not(.slider-before-after img), .main__single .page__content picture, #investigation__content video, #investigation__content figure, #investigation__content img:not(.slider-before-after img), #investigation__content picture { width: 100%; height: auto; } [data-template=package] .page__content .insert, .main__single .page__content .insert, #investigation__content .insert { max-width: var(--max-w-cards); margin-inline: auto; border: 1px solid var(--grey-600); padding: calc(var(--padding-inner) * 3); } @media screen and (max-width: 768px) { [data-template=package] .page__content .insert, .main__single .page__content .insert, #investigation__content .insert { padding: calc(var(--padding-inner) * 1); } } [data-template=package] .page__content .insert, .main__single .page__content .insert, #investigation__content .insert { background-color: var(--grey-900); /* fond encart unifié (intermédiaire 800/950) */ } [data-template=package] .page__content .insert .insert--inner, .main__single .page__content .insert .insert--inner, #investigation__content .insert .insert--inner { max-width: var(--max-w-content); margin-inline: auto; } /* Variante « note » : encadré compact à petit texte (--small), contraint à la largeur de la colonne de texte (--max-w-content). */ .insert--note { padding: calc(var(--padding-inner) * 1.5) !important; max-width: var(--max-w-content) !important; } .insert--note .insert--inner { font-size: var(--small); } .insert--note .insert--inner p { font-size: var(--small); font-style: normal; } /* Bloc « Bouton » : lien externe, pastille calquée sur le bouton « Envoyer » (.contact-cta). Se cale à la largeur texte, pas de débordement 1100px. */ .block-button { margin: calc(var(--spacing) * 2.5) 0 var(--spacing); text-align: center; } .block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.6ch; height: calc(var(--h-block) * 1.25); padding: 0 3ch; padding-top: 4px; font-family: var(--font); font-size: var(--small); font-weight: 500; text-transform: uppercase; text-decoration: none; border-radius: calc(var(--h-block) * 0.625); transition: opacity .15s; } .block-button__arrow { font-weight: 400; } .block-button__link--white { color: #111111; background: #ffffff; } .block-button__link--green { color: var(--color-bg); background: var(--color-green); } .block-button__link:hover { opacity: .9; } /* Bloc « Espacement » : espace vertical manuel, responsive (multiple de --spacing). */ .block-spacing { height: calc(var(--spacing) * var(--n, 2)); } [data-template=package] .page__content .insert h2, [data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5, .main__single .page__content .insert h2, .main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5, #investigation__content .insert h2, #investigation__content .insert h3, #investigation__content .insert h4, #investigation__content .insert h5 { margin-top: 0; } @media screen and (max-width: 768px) { [data-template=package] .page__content .insert h2, [data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5, .main__single .page__content .insert h2, .main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5, #investigation__content .insert h2, #investigation__content .insert h3, #investigation__content .insert h4, #investigation__content .insert h5 { margin-top: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.75); } } [data-template=package] .page__content > .insert, [data-template=package] .page__content > .swiper, [data-template=package] .page__content > .slider-before-after, [data-template=package] .page__content > figure, .main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure, #investigation__content > .insert, #investigation__content > .swiper, #investigation__content > .slider-before-after, #investigation__content > figure { margin-top: calc(var(--spacing) * 4 / 3); margin-bottom: calc(var(--spacing) * 4 / 3); } [data-template=package] .page__content > .insert + .caption, [data-template=package] .page__content > .swiper + .caption, [data-template=package] .page__content > .slider-before-after + .caption, [data-template=package] .page__content > figure + .caption, .main__single .page__content > .insert + .caption, .main__single .page__content > .swiper + .caption, .main__single .page__content > .slider-before-after + .caption, .main__single .page__content > figure + .caption, #investigation__content > .insert + .caption, #investigation__content > .swiper + .caption, #investigation__content > .slider-before-after + .caption, #investigation__content > figure + .caption { margin-top: calc(var(--spacing) * -1.5) !important; } .card--article { border: var(--border-light); position: relative; display: flex; flex-direction: column; padding: var(--padding-inner); } .card--article > figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .card--article > figure img, .card--article > figure picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } .card--article .pin { z-index: 90; width: 18px; height: 18px; transform: rotate(45deg); transform-origin: center; } .card--article .pin svg { width: 100%; height: 100%; fill: var(--color-txt); } .card--article > figure, .card--article .video-extract { width: calc(100% + var(--padding-inner) * 2); position: relative; left: calc(var(--padding-inner) * -1); top: calc(var(--padding-inner) * -1); } .card--article .video-extract video { width: 100%; width: 100%; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; position: relative; } .card--article .content { display: flex; flex-direction: column; } .card--article .pin { position: absolute; top: var(--padding-inner); right: var(--padding-inner); } .card--article .time-alone { display: none; margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.75); } .card--article .title { margin-top: calc(var(--spacing) * 0.75); font-size: var(--normal); line-height: var(--leading-title); font-weight: 500; text-transform: uppercase; } .card--article .title a { text-decoration: none; } .card--article .description { margin-top: calc(var(--spacing) * 1.25); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--small); } .card--article .dl { margin-top: calc(var(--spacing) * 0.75); font-size: var(--small); flex-grow: 2; } .card--article .dl .dl__group { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; border-top: var(--border-light); padding: calc(var(--spacing) * 0.5) 0; } .card--article .dl .dl__group:last-of-type { border-bottom: var(--border-light); } .card--article .dl dt { color: var(--color-txt-light); padding-right: 1ch; } .card--article .dl ul { list-style: none; } .card--article .dl ul li { padding-bottom: 0.2em; } .card--article:hover { border-color: var(--color-txt); background-color: var(--grey-950); } .card--article .keywords-wrapper { padding-top: calc(var(--spacing) * 0.75); z-index: 100; } .card--article .keywords-wrapper .keywords li a { font-size: var(--xsmall); } [data-template=home] .pinned-home { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; padding: calc(var(--padding-inner) * 2); } [data-template=home] .pinned-home figure, [data-template=home] .pinned-home picture, [data-template=home] .pinned-home .video-extract { grid-column: span 2; display: flex; width: calc(100% + var(--padding-inner) * 4); position: relative; left: calc(var(--padding-inner) * -2); top: calc(var(--padding-inner) * -2); } [data-template=home] .pinned-home .title { grid-column: span 2; font-size: var(--normal); padding-right: 3ch; margin-bottom: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 0.5); } [data-template=home] .pinned-home .description { grid-column: 1; grid-row: 3; padding-right: 3ch; display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; font-size: var(--normal); margin-top: 0px; } [data-template=home] .pinned-home dl { margin-top: 0px; grid-column: 2; grid-row: 3; } [data-template=home] .pinned-home .keywords-wrapper { grid-column: span 2; grid-row: 4; } .card--package, .card--article-small { display: grid; grid-gap: 0; grid-template-columns: auto 1fr; min-height: 153px; position: relative; margin-bottom: calc(var(--spacing) * 0.75); border: var(--border-light); } .card--package:first-of-type, .card--article-small:first-of-type { border-top: var(--border-light); } .card--package > figure, .card--article-small > figure { width: 272px; height: 153px; flex-shrink: 0; display: flex; overflow: hidden; } .card--package > figure img, .card--package > figure picture, .card--article-small > figure img, .card--article-small > figure picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } .card--package .type, .card--article-small .type { margin-bottom: 15px; } .card--article-small .group-top { display: flex; gap: calc(var(--padding-inner) * 0.5); margin-bottom: 15px; } .card--article-small .group-top .type { margin-bottom: 0; } .card--package .content, .card--article-small .content { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 15px; padding-bottom: var(--padding-inner); padding-left: 27px; /* marge image/texte +50% (18 → 27) */ padding-right: calc(var(--padding-inner) * 3); } .card--package .title, .card--article-small .title { font-weight: 500; font-size: var(--normal); margin: 0 0 0.25em 0; text-transform: uppercase; text-wrap: initial; line-height: var(--leading-title); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(var(--leading-title) * 2 * var(--normal)); } .card--package .date, .card--article-small .date, .card--article-small .aggregate-toggle { margin-top: auto; } .card--package .title a, .card--article-small .title a { text-decoration: none; } .card--package .date, .card--package .details, .card--article-small .date, .card--article-small .details { color: var(--color-txt-light); font-size: var(--small); } .card--package .details, .card--article-small .details { list-style: none; } .card--package .details li, .card--article-small .details li { display: inline; } .card--package .details li:not(:last-of-type)::after, .card--article-small .details li:not(:last-of-type)::after { content: "|"; padding-left: 1ch; padding-right: 0.5ch; } .card--package .description, .card--article-small .description { font-size: var(--small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card--package, .card--article-small { position: relative; } .card--package .btn--go-to, .card--article-small .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--package .btn--go-to svg, .card--article-small .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--package .btn--go-to svg, .card--article-small .btn--go-to svg { width: 12px; height: 12px; } } @media screen and (max-width: 560px) { .card--package .btn--go-to, .card--article-small .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--package .btn--go-to svg, .card--article-small .btn--go-to svg { width: 12px; height: 12px; } } .card--package:hover .btn--go-to, .card--article-small:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--package, .card--article-small { border-bottom: var(--border-light); } .card--package:first-of-type, .card--article-small:first-of-type { border-top: var(--border-light); } .card--package, .card--article-small { position: relative; } .card--package::before, .card--article-small::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--package:not([data-impact-type=media]):hover, .card--article-small:not([data-impact-type=media]):hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--package:not([data-impact-type=media]):hover::before, .card--article-small:not([data-impact-type=media]):hover::before { border-color: var(--color-txt); } @media screen and (max-width: 1080px) { .card--package .title, .card--article-small .title { font-size: var(--normal); margin-bottom: 0; } } @media screen and (max-width: 768px) { .card--package, .card--article-small { row-gap: 0; display: block; min-height: 0; } .card--package > figure, .card--article-small > figure { width: 100%; height: auto; aspect-ratio: 16/9; } .card--package .content, .card--article-small .content { padding: calc(var(--spacing) * 0.5) var(--padding-inner); } .card--package .type, .card--article-small .type { margin-bottom: calc(var(--spacing) * 0.75); } .card--package .title, .card--article-small .title { margin-bottom: calc(var(--spacing) * 0.25); } .card--package .details, .card--package .date, .card--article-small .details, .card--article-small .date { margin-top: calc(var(--spacing) * 0.5); } .card--package .btn--go-to, .card--article-small .btn--go-to { bottom: calc(var(--padding-inner) * 0.75); right: calc(var(--padding-inner) * 0.75); } } .card--block { container-type: inline-size; container-name: impact; border: var(--border-light); margin-bottom: calc(var(--padding-body) * 1); padding: var(--padding-inner); display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 0; border-bottom: var(--border-light); } .card--block:first-of-type { border-top: var(--border-light); } .card--block { position: relative; } .card--block::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--block:not([data-impact-type=media]):hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--block:not([data-impact-type=media]):hover::before { border-color: var(--color-txt); } .card--block > figure { aspect-ratio: 16/9; display: flex; overflow: hidden; position: relative; } /* Logo média (ex. « M » Le Monde, CNN, Rolling Stone…) en overlay sur la cover. Taille pilotée par la hauteur selon la forme du logo ; position gauche/droite. */ .card--cover-logo { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .card--cover-logo svg, .card--cover-logo img { display: block; width: auto; height: 100%; } .card--cover-logo--right { left: auto; right: 0.6rem; } .card--cover-logo--no-shadow { filter: none; } .card--cover-logo--monogram { height: 1.5rem; } /* Le Monde « M » */ .card--cover-logo--square { height: 1.5rem; } /* L'Humanité */ .card--cover-logo--cnn { height: 1.275rem; } /* CNN (85 % de square) */ .card--cover-logo--stacked { height: 1.45rem; } /* StreetPress (2 lignes) */ .card--cover-logo--wordmark { height: 1rem; } /* L'Express, Rolling Stone */ .card--block > figure img, .card--block > figure picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } /* Cover au format natif (toggle « coverNatural ») : pas de recadrage 16/9 — l'image s'affiche à son ratio d'origine (une de presse verticale, affiche, etc.). */ .card--cover-natural > figure { aspect-ratio: auto; display: block; } .card--cover-natural > figure picture { display: block; height: auto; } .card--cover-natural > figure img { height: auto; -o-object-fit: contain; object-fit: contain; } /* Cover des cartes impact : ratio 16:9 fixe + recadrage (object-fit cover), comme le figure par défaut — uniforme quelle que soit l'image source. */ .card--block .pin { z-index: 90; width: 18px; height: 18px; transform: rotate(45deg); transform-origin: center; } .card--block .pin svg { width: 100%; height: 100%; fill: var(--color-txt); } .card--block .title { font-size: var(--normal); font-weight: 500; text-transform: uppercase; line-height: 1.3; margin-top: calc(var(--spacing) * 0.2); margin-right: 2ch; } /* Preview vidéo au hover (cartes Enquête) — la vidéo se superpose à la cover image, jouée en autoplay (JS) au mouseenter. Désactivée sur touch (pas de hover) et pour les utilisateurs sensibles aux animations. */ .card--block__figure-with-video { position: relative; } .card--block__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } /* .is-ready est posée par JS uniquement quand la vidéo joue effectivement (desktop : sur hover ; mobile : à l'entrée dans le viewport). Donc une seule règle suffit pour le fade-in dans les 2 modes. */ @media (prefers-reduced-motion: no-preference) { .card--block__preview.is-ready { opacity: 1; } } .card--block .linked { margin-top: calc(var(--spacing) * 0.5); font-size: var(--small); font-weight: 500; line-height: var(--leading-title); color: var(--color-txt-light); width: 100%; } .card--block .linked::before { content: "↳ "; } .card--block .description { margin-top: calc(var(--spacing) * 0.5); } /* Pastille type enquête */ .card--type-badge { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 0.75); padding: 0 1ch; padding-top: 3px; border-radius: var(--radius-small); background-color: var(--color-txt); color: var(--color-bg); font-size: var(--xsmall); line-height: 1; white-space: nowrap; text-transform: uppercase; font-weight: 500; margin-top: 2px; margin-bottom: calc(var(--spacing) * 0.5 - 2px); } :root[data-theme=light] .card--type-badge, :root[data-theme=light] .page__type { background-color: #161616; color: #ffffff; } /* Ligne date · partenaires */ .card--inv-meta { margin-top: calc(var(--spacing) * 0.3); font-size: var(--small); color: var(--color-txt-light); line-height: var(--leading-normal); } /* Chapô enquête */ .card--inv-chapo { margin-top: calc(var(--spacing) * 1.25 + 5px) !important; color: var(--color-txt) !important; font-size: var(--small); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Mots-clés en bas de carte (rubrique avec typeBadge) */ .card--block__keywords { margin-top: auto; padding-top: calc(var(--spacing) * 0.5); } /* Métadonnées compactes sur les cartes Dossier */ .card--case-dl { width: 100%; margin: calc(var(--spacing) * 0.75) 0 0; display: grid; grid-template-columns: 1fr 2fr; column-gap: 16px; row-gap: 5px; align-items: baseline; font-size: var(--xsmall); line-height: var(--leading-normal); } .card--case-dl > div { display: contents; } .card--case-dl dt { color: var(--color-txt-light); white-space: nowrap; } .card--case-dl dd { margin: 0; } .card--case-dl__keywords dt, .card--case-dl__keywords dd { align-self: start; } .card--case-dl .keywords { margin: 0; } /* Le tableau de métadonnées ne capte plus les clics : l'overlay .link-block (rendu après dans le DOM) reste cliquable sur toute la carte. Seuls les liens du tableau (chips mots-clés) sont élevés au-dessus de l'overlay. */ .card--case-dl a { position: relative; z-index: 1; } /* Mini dl-table métadonnées (cartes Enquête) */ .card--block__meta { margin: 0; margin-top: calc(var(--spacing) * 0.75); font-size: var(--xsmall); line-height: var(--leading-title); z-index: 100; position: relative; } .card--block__meta-row { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr; gap: 1ch; padding: calc(var(--spacing) * 0.25) 0; border-top: var(--border-light); } .card--block__meta-row:last-of-type { border-bottom: var(--border-light); } .card--block__meta dt { color: var(--color-txt-light); text-transform: uppercase; font-weight: 500; } .card--block__meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4ch; align-items: center; } .card--block__meta-tag { display: inline-flex; align-items: center; height: calc(var(--h-block) * 0.6); padding: 0 0.75ch; padding-top: 2px; font-size: var(--xsmall); line-height: 1; border: var(--border-medium); border-radius: var(--radius-small); color: var(--color-txt-light); text-decoration: none; white-space: nowrap; } .card--block__meta-tag--theme { text-transform: uppercase; font-weight: 500; } .card--block__meta-tag:hover { background-color: var(--grey-950); color: var(--color-txt); } .card--block .date { margin-top: calc(var(--spacing) * 0.3); font-size: var(--xsmall); color: var(--color-txt-light); line-height: var(--leading-normal); } .card--block__footer { margin-top: auto; padding-top: calc(var(--spacing) * 0.5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--padding-inner); z-index: 100; position: relative; } /* Carte agrégat média : pas de date entre .linked et le footer, donc on reprend le gap aéré titre→date du template général (1.5 spacing). */ .card--aggregate-media-vertical .card--block__footer { margin-top: calc(var(--spacing) * 1.5); } .card--block__footer .keywords { margin: 0; } .card--block__footer .keywords li a { font-size: var(--xsmall); } .card--block .card--open-graph { width: 100%; margin: calc(var(--spacing) * 0.5) 0; } .card--block .pin { position: absolute; top: var(--padding-inner); right: var(--padding-inner); } .card--block > figure { width: calc(100% + var(--padding-inner) * 2); position: relative; left: calc(var(--padding-inner) * -1); top: calc(var(--padding-inner) * -1); } .card--block .tag { position: relative; top: 3px; } /* Conteneur de la grille d'impacts (rubrique + vitrine Presse) : largeur cartes centrée — ce que .page__content fournissait, désormais porté par la classe du composant pour un rendu identique partout. */ .impacts-grid { max-width: var(--max-w-cards); margin-inline: auto; } @media screen and (min-width: 560px) { .card--block, .grid-sizer { width: calc(50% - 13px); } } @media screen and (min-width: 768px) { /* Dossiers (liste) : cover 16:9 */ body[data-template=cases] .card--block > figure { aspect-ratio: 16 / 9; } /* Dossier : enquêtes — bordure blanche permanente + cover plus haute */ body[data-template=case] .page__content .card--block[data-filter="enquetes"] { border-color: var(--color-txt); } body[data-template=case] .page__content .card--block[data-filter="enquetes"]::before { border-color: var(--color-txt); } body[data-template=case] .page__content .card--block[data-filter="enquetes"] > figure { aspect-ratio: 3/2; } } /* 3 colonnes uniquement à partir de 1080px (seuil du header). En dessous, toutes les grilles 3-col repassent en 2 colonnes (règle 50% du breakpoint 560px) — y compris la vue contenu des dossiers et la liste des dossiers. */ @media screen and (min-width: 1080px) { body[data-template=watch] .card--block, body[data-template=watch] .grid-sizer, body[data-template=announcements] .card--block, body[data-template=announcements] .grid-sizer, body[data-template=impacts] .card--block, body[data-template=impacts] .grid-sizer, body[data-template=laboratory] .card--block, body[data-template=laboratory] .grid-sizer, body[data-template=case] .card--block, body[data-template=case] .grid-sizer, body[data-template=cases] .card--block, body[data-template=cases] .grid-sizer, body[data-template=home] .grid-masonry .card--block, body[data-template=home] .grid-masonry .grid-sizer, .impacts-grid .card--block, .impacts-grid .grid-sizer { width: calc(33.333% - 17.333px); } /* Carte "mise en avant" : prend 2 colonnes (≈ 66.667% - gap compensé) */ body[data-template=watch] .card--block.card--block--wide, body[data-template=announcements] .card--block.card--block--wide, body[data-template=laboratory] .card--block.card--block--wide, body[data-template=home] .grid-masonry .card--block.card--block--wide { width: calc(66.667% - 8.667px); } } /* Dossier : grand espace dl-table → début du feed (au-dessus des filtres, ou de la grille si le feed n'a pas de barre de filtres). */ body[data-template=case] .page__sort, body[data-template=case] .grid-masonry { margin-top: calc(var(--spacing) * 3); } /* Quand les filtres précèdent la grille, le gap filtres → grille reste celui des cartes (margin-bottom de .page__sort) — on annule le grand margin-top pour éviter un double espace. */ body[data-template=case] .page__sort + .grid-masonry { margin-top: 0; } /* Dossier : hero cover 16:9 entre le header et le tableau */ body[data-template=case] .case__hero { max-width: var(--max-w-content); margin-inline: auto; margin-bottom: 0; } body[data-template=case] .case__hero__img { aspect-ratio: 16 / 9; overflow: hidden; } body[data-template=case] .case__hero__img picture { display: block; height: 100%; } body[data-template=case] .case__hero__img img { width: 100%; height: 100%; object-fit: cover; } body[data-template=case] .case__hero figcaption { font-size: var(--small); color: var(--color-txt-light); margin-top: calc(var(--spacing) * 0.4); line-height: 1.4; } /* Mobile (≤768px) : toutes les cartes en 1 col, même les wide */ @media screen and (max-width: 768px) { .card--block.card--block--wide { width: auto; } } .card--block-small { border-bottom: var(--border-light); padding: var(--padding-inner) 0; padding-bottom: calc(var(--spacing) * 0.75); } .card--block-small:first-of-type { border-top: var(--border-light); } .card--block-small { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; border-bottom: var(--border-light); } .card--block-small:first-of-type { border-top: var(--border-light); } .card--block-small { position: relative; } .card--block-small::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--block-small:not([data-impact-type=media]):hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--block-small:not([data-impact-type=media]):hover::before { border-color: var(--color-txt); } .card--block-small .group-top { position: relative; } .card--block-small { position: relative; } .card--block-small .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--block-small .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--block-small .btn--go-to svg { width: 12px; height: 12px; } } @media screen and (max-width: 560px) { .card--block-small .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--block-small .btn--go-to svg { width: 12px; height: 12px; } } .card--block-small:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--block-small .btn--go-to { top: calc(var(--padding-inner) * 1); bottom: auto; } .card--block-small .title { grid-column: 2; grid-row: 2; font-size: var(--normal); line-height: var(--leading-title); font-weight: 500; text-transform: uppercase; margin-right: 4ch; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card--block-small .date { font-size: var(--small); grid-column: 2; grid-row: 1; margin-top: 4px; } @media screen and (max-width: 768px) { .card--block-small { display: block; padding-bottom: calc(var(--spacing) * 0.5); } .card--block-small .btn--go-to { top: auto; bottom: calc(var(--padding-inner) * 1); } .card--block-small .group-top { top: 0px; margin-bottom: calc(var(--spacing) * 0.5); } .card--block-small .title { margin-bottom: calc(var(--spacing) * 0.75); margin-right: 1ch; } .card--block-small .date { margin-top: 0px; } } .card--block-small .card--open-graph { grid-column: 2; z-index: 10; } .card--block-small .card--open-graph:not(:last-child) { margin-bottom: 1rem; } .card--block-small .open-graph__details { grid-column: 2; } /* Carte agrégée « Médiatique » :

dont le est la carte horizontale visible (clic n'importe où dans la carte = ouvre/ferme). */ .card--aggregate-media { margin-bottom: calc(var(--spacing) * 0.75); } .card--aggregate-media > summary { cursor: pointer; list-style: none; margin-bottom: 0; } .card--aggregate-media > summary::-webkit-details-marker { display: none; } .card--aggregate-media > summary > figure { align-self: start; } .card--aggregate-media .aggregate-toggle { font-size: var(--small); color: var(--color-txt-light); display: flex; align-items: center; gap: 0.5ch; margin: auto 0 0 0; align-self: flex-start; } .card--aggregate-media .aggregate-toggle .arrow-details { --size: 11px; display: inline-flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); position: relative; top: -2px; } .card--aggregate-media .aggregate-toggle .arrow-details svg { width: 100%; fill: currentColor; transform: rotate(90deg); /* compacté : chevron vers le bas */ transition: transform 0.2s ease-in; } .card--aggregate-media[open] .aggregate-toggle .arrow-details svg { transform: rotate(-90deg); /* ouvert : chevron vers le haut */ } .card--aggregate-media > summary:hover .aggregate-toggle { color: var(--color-txt); } .card--aggregate-media .aggregate-extras { padding: var(--padding-inner) 0; } .card--aggregate-media .aggregate-extras .card--open-graph:not(:last-child) { margin-bottom: var(--padding-inner); } /* Page « Reprises presse — » : open-graph cards stack verticalement dans la colonne de contenu (max-w-content = 680px). */ body[data-template=media-impacts-detail] main .page__content { max-width: var(--max-w-content); margin-inline: auto; display: flex; flex-direction: column; gap: var(--padding-inner); } /* Sections du template media-impacts-detail : espacement entre les asides (« Enquête liée » → « Partenariats » → « Reprises médias »). On utilise le margin-bottom du title (2× spacing) comme gap principal — pas de padding-top sur les asides, header margin-bottom à 0. */ body[data-template=media-impacts-detail] main .page__header { margin-bottom: 0; } body[data-template=media-impacts-detail] .page__aside { padding-top: 0; } body[data-template=media-impacts-detail] .page__aside + .page__aside { margin-top: calc(var(--spacing) * 2); } body[data-template=media-impacts-detail] .page__aside .page__content { margin-top: 0; } /* Flèche ↳ devant les titres de section (page Reprises + sous-sections dans le
de la carte agrégée d'enquête) */ .aside__title .arrow-corner, .aggregate-section-title .arrow-corner { display: inline-block; color: var(--color-txt-light); font-weight: 400; margin-right: -0.1em; position: relative; top: -0.05em; } /* Sous-sections dans le
de la carte agrégée (aside enquête) : « Partenariat(s) » puis « Reprise(s) médias » au-dessus des cartes OG. Indentation visuelle (20px à gauche) pour signaler que les cartes OG appartiennent à la carte agrégée parent. */ .card--aggregate-media .aggregate-extras { padding-left: 20px; } .card--aggregate-media .aggregate-section-title { font-size: var(--small); font-weight: 500; text-transform: uppercase; color: var(--color-txt-light); margin: 0 0 calc(var(--padding-inner) * 0.5) 0; } .card--aggregate-media .aggregate-section-title:not(:first-child) { margin-top: var(--padding-inner); } .card--block-small .open-graph__details summary, .card--block-small .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } .card--block-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--block-small .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } .card--block-small .open-graph__details summary:hover { color: var(--color-txt); } .card--block-small .open-graph__details summary:hover .arrow-details svg { fill: var(--color-txt); } .card--block-small .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } .card--block-small .open-graph__details summary { color: var(--color-txt-light); } .card--block-small .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } @media screen and (max-width: 560px) { .card--block-small .open-graph__details summary { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; grid-row-gap: 0; } .card--block-small .open-graph__details summary .summary-inner { grid-column: 2; } .card--block-small .open-graph__details { grid-column: 1/3; } } .card--open-graph { container-type: inline-size; container-name: opengraph; z-index: calc(var(--z-header) - 100); border: var(--border-light); border-radius: 10px; overflow: hidden; position: relative; } .card--open-graph .partner-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75ch; padding-top: 2px; height: 18px; font-size: var(--xsmall); font-weight: 500; line-height: 1; color: var(--color-txt); text-transform: uppercase; margin-bottom: 16px; align-self: flex-start; position: relative; isolation: isolate; } .card--open-graph .partner-badge::before { content: ""; position: absolute; inset: -1px 0 1px 0; background-color: var(--grey-600); border-radius: var(--radius-small); z-index: -1; } .card--open-graph .open-graph__inner { display: grid; grid-gap: 0; grid-template-columns: 272px 1fr; position: relative; } .card--open-graph figure { grid-column: 1; grid-row: 1; width: 100%; height: 153px; align-self: start; } .card--open-graph figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Mobile : visuel masqué sur les cartes OG (choix design — la liste reste lisible et compacte sans crop hasardeux d'images très variées). */ @media screen and (max-width: 768px) { .card--open-graph .open-graph__inner { grid-template-columns: 1fr; } .card--open-graph figure { display: none; } .card--open-graph .content { grid-column: 1; grid-row: 1; padding-left: var(--padding-inner); } } .card--open-graph .content { padding-top: calc(var(--padding-inner) * 0.75); padding-bottom: calc(var(--padding-inner) * 0.75); padding-left: 18px; padding-right: var(--padding-inner); grid-column: 2; grid-row: 1; } .card--open-graph .site-name { color: var(--color-txt-light); font-size: var(--xsmall); margin-bottom: 3px; } .card--open-graph .title { font-size: var(--small); font-weight: 500; line-height: 1.35; padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5em; /* Remplir la largeur de la carte (override du `text-wrap: balance` global sur .title, qui coupait le titre trop court — ex. « Violences / policières : la… »). */ text-wrap: initial; } .card--open-graph .title a { text-decoration: none; } .card--open-graph .description { font-size: var(--xsmall); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card--open-graph:hover { border-color: var(--color-txt); background-color: var(--grey-950); } @container opengraph (width < 500px) {} .swiper { width: 100%; min-width: 0; --swiper-navigation-size: 32px; --swiper-navigation-top-offset: 40%; --swiper-navigation-color: var(--color-txt); --swiper-pagination-color: var(--color-txt); --swiper-pagination-bullet-inactive-color: var(--color-txt-light); --swiper-pagination-bullet-inactive-opacity: 1; } .swiper .swiper-button-prev::after, .swiper .swiper-button-next::after { -webkit-text-stroke: 1px currentColor; text-stroke: 1px currentColor; } .swiper .swiper-pagination { position: relative !important; bottom: auto !important; left: auto !important; margin-top: calc(var(--spacing) / 6) !important; } .swiper .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 4px; border-radius: 2px; } .swiper .swiper-wrapper { height: -moz-max-content; height: max-content; align-items: center; } .swiper .swiper-slide { height: auto; display: flex; align-items: center; justify-content: center; } #lightbox { position: fixed; inset: 0; z-index: calc(var(--z-header) + 10); background-color: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } body.lightbox-open #lightbox { opacity: 1; visibility: visible; pointer-events: auto; } #lightbox-close { position: absolute; top: var(--padding-body); right: var(--padding-body); background: none; border: none; color: var(--color-txt); cursor: pointer; padding: 8px; z-index: 1; line-height: 0; } #lightbox-close svg { width: 30px; fill: var(--color-txt); transition: fill 0.2s ease; } #lightbox-close:hover svg { fill: var(--grey-400); } #lightbox-swiper { width: 90vw; } #lightbox-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } #lightbox-swiper .swiper-slide figure { display: flex; flex-direction: column; align-items: center; cursor: default; } #lightbox-swiper .swiper-slide figure img { max-width: 90vw; max-height: calc(90dvh - 100px); width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } #lightbox-swiper .swiper-slide figure figcaption { margin-top: calc(var(--spacing) * 0.5); color: var(--color-txt-light); font-size: var(--small); text-align: center; } @media (min-width: 1080px) { figure[data-lightbox] { cursor: zoom-in; } } .slider-before-after { width: -moz-fit-content; width: fit-content; margin-inline: auto; 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); } .dl-table { margin-top: calc(var(--spacing) * 3); border-bottom: var(--border-light); max-width: var(--max-w-content); margin-inline: auto; font-size: var(--small); line-height: 1.4; } .dl-table .dl__group { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 1fr 2fr; position: relative; -moz-column-gap: 1ch; column-gap: 1ch; border-top: var(--border-light); /* Texte décalé de 2px vers le bas pour compenser le half-leading et centrer visuellement entre les lignes */ padding: calc(var(--spacing) * 0.4 + 2px) 0 calc(var(--spacing) * 0.4 - 2px) 0; } .dl-table dt { color: var(--color-txt-light); padding-right: 1ch; } .dl-table ul:not(.keywords) { list-style: none; } .dl-table ul:not(.keywords) li { padding-bottom: 0.2em; } .dl-table a { text-decoration: none; } .dl-table a:hover { color: var(--grey-200); } /* ============================================================================ Pages légales (Mentions légales / Politique de confidentialité) — gabarit Newsletter (titre ferré à gauche, pas de filet) ; colonne 680 ; sections + tableaux dl-table (forme du CA dans À propos). Tout est calé à 680 centré comme le header, pour un alignement cohérent. ============================================================================ */ body[data-template=legal-notices] .page__content, body[data-template=privacy-policy] .page__content { max-width: var(--max-w-content); margin-inline: auto; /* body[...] pour battre le .main__single .page__content générique (margin-top 90px + padding-bottom 90px qui créaient de grands vides entre sections). */ margin-top: 0; padding-bottom: 0; } /* Titre de section (Éditeur, Hébergement, Crédits…) aligné sur les tableaux. */ .legal__section { max-width: var(--max-w-content); margin: calc(var(--spacing) * 2) auto calc(var(--spacing) * 0.6); font-size: var(--normal); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; } /* Le tableau suit directement son titre de section (l'espace vient du titre). */ .legal .dl-table { margin-top: 0; } .legal .dl-table--legal dd { color: var(--color-txt); } /* Tableau des Mentions légales uniquement : 1re colonne élargie à la moitié (la 2e colonne démarre au milieu, 340px). Le tableau du CA dans À propos (.dl-table--board) garde sa répartition 1fr 2fr. */ .dl-table--legal .dl__group { grid-template-columns: 1fr 1fr; } /* « Dernière mise à jour » en S — .legal p.legal__updated pour battre .main__single .page__content p (--normal). */ .legal p.legal__updated { color: var(--color-txt-light); font-size: var(--small); margin-bottom: calc(var(--spacing) * 1.5); } /* Gros espace en fin de page légale, avant le footer. */ main.legal { padding-bottom: calc(var(--spacing) * 9); } /* .legal pour battre .main__single .page__content h2 (32px) → même taille que les titres de section des Mentions légales (.legal__section, --normal). */ .legal .legal__prose h2 { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 0.5); font-size: var(--normal); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; } .legal__prose ul { margin: calc(var(--spacing) * 0.5) 0; padding-left: 1.2em; } .legal__prose a { text-decoration: underline; } /* Texte des sections en S (pas normal) — .legal pour battre .main__single .page__content p (même spécificité, défini plus bas → on gagne par l'ordre). */ .legal .legal__prose p, .legal .legal__prose li { font-size: var(--small); margin-bottom: calc(var(--spacing) * 0.6); } /* ============================================================================ Page Publications — agrégateur chronologique (Enquêtes + Veille + Laboratoire). Gabarit Newsletter/légal (titre gauche). Liste groupée par mois : date · rubrique · titre, pour visualiser le rythme de publication. ============================================================================ */ body[data-template=publications] .page__content { max-width: var(--max-w-content); margin-inline: auto; margin-top: 0; padding-bottom: calc(var(--spacing) * 4); } .publications__rss { margin-top: calc(var(--spacing) * 0.75); } .publications__rss a { text-decoration: underline; font-size: var(--small); } .publications__count { color: var(--color-txt-light); font-weight: 400; margin-left: 0.5ch; } .pub-list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w-content); } .pub-row { display: grid; grid-template-columns: 6.5em 8em 1fr; column-gap: 1ch; align-items: baseline; border-top: var(--border-light); padding: calc(var(--spacing) * 0.4 + 2px) 0 calc(var(--spacing) * 0.4 - 2px); font-size: var(--small); } .pub-date { color: var(--color-txt-light); white-space: nowrap; } .pub-rubric { color: var(--color-txt-light); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--xsmall); } .pub-title { text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 0.01em; } .pub-title:hover { color: var(--grey-200); } @media screen and (max-width: 600px) { .pub-row { grid-template-columns: 5em 1fr; } .pub-rubric { grid-column: 2; order: 3; } } /* (Les styles de la page Newsletter sont regroupés plus haut, bloc « Page Newsletter » près de .form__newsletter — un seul endroit.) */ .footnote-call { font-family: var(--font); line-height: 0; vertical-align: super; font-size: 0.7em; } div.footnote-body { font-size: var(--small); padding-left: 3.5ch; position: relative; } div.footnote-body + div.footnote-body { margin-top: 0.5em; } div.footnote-body:first-of-type { padding-top: 1.5em; } div.footnote-body:last-of-type { padding-bottom: 1.5em; } .footnote-marker { position: absolute; left: 0px; } #footnotes-container { position: fixed; left: 0; bottom: -1px; background-color: var(--color-bg); border-top: var(--border-light); width: 100%; padding-left: var(--padding-body); padding-right: var(--padding-body); transition: padding-bottom var(--transition-scroll); } #footnotes-container .container-inside { max-width: var(--max-w-content); margin-inline: auto; } #site-header { z-index: var(--z-header); --gap: 3ch; position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gap) * 0.25); } #site-header a { text-decoration: none; } #site-header a:hover { color: var(--grey-200); } /* Logo Index + lien Soutenez-nous : pâlissement opacity 0.85 sans changement de couleur (logo blanc/noir intact, support vert intact) */ #site-header #site-title a:hover { opacity: 0.85; } #site-header #support-link:hover { opacity: 0.85; color: var(--color-accent); } #site-header #site-title { position: relative; top: 1px; width: 140px; } #site-header #site-title svg { width: 100px; } @media screen and (max-width: 768px) { #site-header #site-title svg { width: 80px; } #site-header #site-title { top: 0px; } } /* Nav 4-rubriques : centrée par rapport à la PAGE entière via position absolute. .site-header__inner doit être position: relative (cf. plus bas). */ #site-header #nav-highlight { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 200ms ease; } #site-header #nav-highlight ul { display: flex; align-items: center; justify-content: center; gap: var(--gap); list-style-type: none; font-weight: 500; text-transform: uppercase; font-size: var(--normal); } #site-header #nav-highlight ul li { white-space: nowrap; } /* Logique B : actif/courant = blanc, activable = gris. Hover universel vers --grey-200 (gris intermédiaire) — depuis blanc ça grise un peu, depuis gris ça éclaircit un peu : feedback subtil dans les deux cas. */ #site-header #nav-highlight ul li a { color: var(--color-txt-light); } #site-header #nav-highlight ul li.is-current a { color: var(--color-txt); } /* Sur la home : aucune rubrique n'est courante, tous les liens en blanc. */ body[data-template=home] #site-header #nav-highlight ul li a { color: var(--color-txt); } /* Hover : tend vers le gris intermédiaire, quel que soit l'état initial */ #site-header #nav-highlight ul li a:hover, #site-header #nav-highlight ul li.is-current a:hover, body[data-template=home] #site-header #nav-highlight ul li a:hover { color: var(--grey-200); } /* Palier intermédiaire 769-1080px : nav reste centrée mais passe en --small (16px) pour gagner de la place. */ @media screen and (max-width: 1080px) { #site-header #nav-highlight ul { font-size: var(--small); } } /* Palier serré 769-900px : avec 5 rubriques (Dossiers ajouté), la nav centrée (position absolue) chevaucherait le logo et les contrôles — d'autant que les libellés EN sont plus longs (Investigations, Laboratory). On resserre le gap et on réduit légèrement la police pour qu'elle tienne sans conflit. */ @media screen and (max-width: 900px) { #site-header #nav-highlight ul { gap: 1.5ch; font-size: 14px; } } /* ≤ 768px : header mobile minimal — nav cachée, juste logo / theme / lang / burger */ @media screen and (max-width: 768px) { #site-header #nav-highlight ul { display: none; } } /* nav-investigation : conservé pour compatibilité (non utilisée actuellement) */ #site-header #nav-investigation { flex-grow: 2; } #site-header #nav-investigation ul { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--gap); list-style-type: none; } #site-header #nav-investigation ul li { white-space: nowrap; } #site-header #support-link { font-size: var(--small); font-weight: 500; text-transform: uppercase; text-decoration: none; color: var(--color-accent); white-space: nowrap; /* Alignement vertical : calé sur #lang-toggle a (qui a top: -1px) */ position: relative; top: -1px; } @media screen and (max-width: 500px) { #site-header #support-link { display: none; } } #site-header #nav-investigation { position: absolute; top: 10%; left: 0; display: flex; opacity: 0; transition: top 0.3s ease; pointer-events: none; min-width: 0; } #site-header #nav-investigation .title { text-transform: uppercase; font-size: var(--small); font-weight: 500; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2ch; padding-right: 2ch; text-align: center; color: var(--color-txt-light); } @media screen and (max-width: 1080px) { #site-header #nav-investigation ul { font-size: var(--small); padding-left: 6ch; padding-right: 6ch; } } #site-header #nav-investigation li { color: var(--color-txt-light); transition: color 0.3s ease; } #site-header #nav-investigation li.is-selected { color: var(--color-txt); } #site-header #nav-investigation li.is-selected:hover { color: var(--color-txt); pointer-events: none; } #site-header #nav-investigation li.is-selected:hover a:hover { color: var(--color-txt); } #site-header #theme-toggle { width: var(--h-block); height: var(--h-block); display: flex; align-items: center; justify-content: center; /* Alignement vertical : l'icône demi-cercle est légèrement décalée vers le bas par son viewBox (path centré à y=22 sur 48) ; on remonte de 2px pour que la ligne médiane visible coïncide avec celle des EN/FR et du burger. */ position: relative; top: -2px; } #site-header #theme-toggle svg { width: 18px; } #site-header #lang-toggle { display: flex; gap: 0.75ch; /* Espace lang → burger = padding-right + gap du wrapper (0.25 * var(--gap)). Cible : 18px total. */ padding-right: calc(18px - var(--gap) * 0.25); } #site-header #lang-toggle a { font-size: var(--small); font-weight: 500; position: relative; top: -1px; } #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } /* Logique B : langue courante = blanc (actif), autre langue = gris (cliquable). La courante est non cliquable (aria-current="page"). Hover tend vers le gris intermédiaire pour feedback subtil. */ #site-header #lang-toggle a { color: var(--color-txt-light); } #site-header #lang-toggle a:hover { color: var(--grey-200); } #site-header #lang-toggle a[aria-current="page"] { color: var(--color-txt); pointer-events: none; cursor: default; } #site-header #menu-toggle { cursor: pointer; } #site-header #menu-toggle svg { width: 30px; fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } #site-header.has-nav-investigation #nav-highlight { display: none; } #site-header.has-nav-investigation #nav-investigation { position: relative; opacity: 1; transform: translateY(0); top: 0px; pointer-events: auto; } @media screen and (min-width: 768px) { #site-header #nav-investigation .title { display: none; } } @media screen and (max-width: 768px) { #site-header #nav-highlight ul { display: none; } #site-header #nav-investigation .title { display: none; } #site-header.has-nav-investigation #nav-investigation ul { display: none; } #site-header.has-nav-investigation #nav-investigation .title { display: block; } } body.menu-open #site-header { cursor: pointer; } body.menu-open #site-header #nav-highlight, body.menu-open #site-header #nav-investigation { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in; } /* #support-link reste visible quand le menu burger est ouvert (desktop). En mode mobile (≤768px) le lien apparaît aussi DANS le menu burger via .menu-only-mobile → on cache celui du header à l'ouverture pour éviter le doublon. */ @media screen and (max-width: 768px) { body.menu-open #site-header #support-link { display: none; } } #site-menu { position: fixed; width: var(--menu-w); height: calc(100dvh - var(--header-h)); height: calc(100vh - var(--header-h)); top: var(--header-h); right: calc(var(--menu-w) * -1); transition: right 0.18s ease-out; } @media screen and (max-width: 768px) { #site-menu { transition: right 0.2s ease-out; } } #site-menu { background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); z-index: calc(var(--z-header) - 1); } @media screen and (max-width: 560px) { #site-menu { width: 100vw; right: -100vw; border-left: none; } } #site-menu .site-menu__inner { height: 100%; overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; } #site-menu .site-menu__inner::-webkit-scrollbar { display: none; } #site-menu .search-form { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1); } #site-menu nav { margin-top: calc(var(--spacing) * 1.5); } #site-menu nav ul { list-style-type: none; } #site-menu nav ul li { margin-bottom: 7px; } #site-menu nav ul a { text-decoration: none; font-weight: 500; } /* Entrées du menu : hover = texte gris clair (cohérent avec le hover du header). */ #site-menu nav > ul > li > a, #site-menu .nav-accordion__head > a { display: inline-block; padding: 0.08em 0.6ch; margin-left: -0.6ch; transition: color 0.15s ease; } #site-menu nav > ul > li > a:hover, #site-menu .nav-accordion__head > a:hover { color: var(--grey-200); } #site-menu #nav-pages li { text-transform: uppercase; } #site-menu #nav-aside { margin-top: calc(var(--spacing) * 1); } #site-menu #nav-aside li { text-transform: uppercase; } #site-menu #nav-aside li.support a { color: var(--color-green); /* vert impact (= étiquette « Majeur »), pas le vert RGB */ text-decoration: none; } /* Hover : léger assombrissement, comme la pastille « Soutenir Index » du CTA. */ #site-menu #nav-aside li.support a:hover { color: var(--color-green); opacity: 0.85; } /* Lien Soutenez-nous dans le menu : visible uniquement en mobile (en desktop il reste accessible via #support-link dans le header principal). */ #site-menu #nav-aside li.menu-only-mobile { display: none; } #site-menu .socials { margin-top: calc(var(--spacing) * 1.2); padding-bottom: calc(var(--spacing) * 0.75); } @media screen and (max-width: 768px) { #site-menu #nav-aside li.menu-only-mobile { display: list-item; } /* Interligne des items : 7px partout (cf. règle de base, plus d'override mobile). */ #site-menu .socials { margin-top: calc(var(--spacing) * 2); } } #menu-overlay { position: fixed; inset: 0; z-index: calc(var(--z-header) - 2); cursor: pointer; /* Voile = couleur du fond actuel à 90% — masque quasi totalement le contenu en restant cohérent avec le thème (dark = sombre, light = clair). */ background-color: color-mix(in srgb, var(--color-bg) 90%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-in, visibility 0.3s ease-in; } body.menu-open #site-menu { right: 0; } body.menu-open #menu-toggle .open { display: none; } body.menu-open #menu-toggle .close { display: block !important; } body.menu-open #menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; } #site-footer { background-color: var(--dark); padding: calc(var(--spacing) * 2) var(--padding-body) calc(var(--spacing) * 1) var(--padding-body); z-index: 500; } /* Light mode : fond légèrement grisé (#efefef = ancien --color-bg avant le passage au blanc pur) pour distinguer le footer du fond de page blanc. */ :root[data-theme=light] #site-footer { background-color: #efefef; } #site-footer .site-footer__container { max-width: var(--max-w-content); margin: 0 auto; font-size: var(--small); display: flex; flex-direction: column; gap: calc(var(--spacing) * 1.5); } @media screen and (max-width: 768px) { #site-footer .site-footer__container { gap: calc(var(--spacing) * 1); } } #site-footer .logo { margin-bottom: calc(var(--spacing) * 1); } #site-footer .logo svg { width: 100px; } @media screen and (max-width: 768px) { #site-footer .logo svg { width: 80px; } } #site-footer .tagline { max-width: 385px; line-height: 1.7; } #site-footer .list-links { display: flex; flex-direction: column; gap: 3px; } @media screen and (max-width: 768px) { #site-footer .list-links { gap: 0; } } #site-footer .list-links ul { list-style: none; } #site-footer .list-links ul li { margin-bottom: 0; line-height: 1.7; } #site-footer .list-links ul a { text-decoration: none; transition: color 0.15s ease; } #site-footer .list-links ul a:hover, #site-footer .list-links ul a:active { color: var(--grey-200); } #site-footer .credits { font-size: var(--xsmall); text-align: center; } @media screen and (max-width: 768px) { #site-footer .footer-right { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); } } @media screen and (min-width: 768px) { #site-footer .site-footer__container { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; /* gap réduit (3→2) pour laisser ~30px de plus à la colonne gauche : la tagline tient alors en 2 lignes avec coupe après « numérique » (
). */ gap: calc(var(--spacing) * 2); } #site-footer .footer-left { flex: 1 1 0; min-width: 0; } #site-footer .footer-right { flex: 0 0 auto; display: flex; flex-direction: column-reverse; gap: calc(var(--spacing) * 1); } #site-footer .list-links { flex-direction: row; gap: calc(var(--padding-inner) * 2); } /* Colonne Contact / Newsletter décalée de 5px vers la droite (desktop). */ #site-footer .list-links ul.highlight { margin-left: 5px; } /* RSS masqué dans le footer desktop : son ajout élargit la colonne de droite et fait passer la tagline sur 3 lignes. Conservé sur le footer mobile (<768px) et dans le menu burger (desktop/mobile). */ #site-footer .list-socials li[data-socials=rss] { display: none; } #site-footer .credits { width: 100%; margin-top: calc(var(--spacing) * 0.5); } } @media screen and (max-width: 560px) { #site-footer .credits { text-align: center; } } body { min-height: 100dvh; min-height: 100vh; /* clip (et non hidden) : empêche le scroll horizontal SANS créer de conteneur de scroll, ce qui casserait position:sticky (tagline home, etc.). */ overflow-x: clip; display: flex; flex-direction: column; } body main { flex-grow: 1; padding: 0 var(--padding-body); padding-top: var(--header-h); padding-bottom: calc(var(--spacing) * 3); } body main .page__content { max-width: var(--max-w-cards); margin-inline: auto; } body main .page__header { max-width: var(--max-w-content); margin-inline: auto; } main .page__header { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 2); } @media screen and (max-width: 768px) { main .page__header { margin-top: calc(var(--spacing) * 1.5); } } main .page__header .page__type { /* Le gap étiquette→titre est porté par .page__labels (margin-bottom ×1). L'étiquette elle-même ne rajoute rien, sinon l'écart double (×2). */ margin-bottom: 0; text-decoration: none; } main .page__header .page__title { max-width: var(--max-w-content); text-transform: uppercase; font-size: var(--big); font-weight: 500; line-height: var(--leading-title); margin-bottom: calc(var(--spacing) * 2); } @media screen and (min-width: 768px) { main .page__header .page__title { text-wrap: balance; } } @media screen and (max-width: 768px) { main .page__header .page__title { margin-bottom: calc(var(--spacing) * 1.75); } } /* Titre suivi d'un chapô : le H1 tout en capitales laisse ~16px de vide sous les lettres dans sa line-box. On réduit le margin-bottom pour que l'écart optique titre→chapô corresponde à l'écart chapô→contenu (60px). */ main .page__header .page__title:has(+ .page__description) { margin-bottom: calc(var(--spacing) * 1.5); } @media screen and (max-width: 768px) { main .page__header .page__title:has(+ .page__description) { margin-bottom: calc(var(--spacing) * 1.25); } } /* Impact : le chapô éditorial (.impact-intro) est un bloc dédié hors du header (il porte aussi le CTA « théorie de l'impact »). Même correction optique que les autres rubriques — on réduit header ET titre, qui fusionnent par collapsing. */ body[data-template=impacts] main .page__header:has(+ .impact-intro), body[data-template=impacts] main .page__header:has(+ .impact-intro) .page__title { margin-bottom: calc(var(--spacing) * 1.5); } @media screen and (max-width: 768px) { body[data-template=impacts] main .page__header:has(+ .impact-intro), body[data-template=impacts] main .page__header:has(+ .impact-intro) .page__title { margin-bottom: calc(var(--spacing) * 1.25); } } main .page__header .page__cover { margin-top: calc(var(--spacing) * 2); } main .page__header .date { display: block; margin-top: calc(var(--spacing) * -1.5); margin-bottom: calc(var(--spacing) * 2); color: var(--color-txt-light); font-size: var(--small); } @media screen and (max-width: 768px) { main .page__header .date { margin-bottom: calc(var(--spacing) * 1.75); margin-top: calc(var(--spacing) * -0.75); font-size: var(--small); } } main .page__header .page__description { font-size: var(--lead); margin-bottom: calc(var(--spacing) * 2); } @media screen and (max-width: 768px) { main .page__header .page__description { margin-bottom: calc(var(--spacing) * 1); } } main .page__header .page__description { max-width: var(--max-w-content); } main .page__header ul.list-nav { display: flex; flex-wrap: wrap; list-style: none; margin-top: calc(var(--spacing) * -1.5); } @media screen and (max-width: 768px) { main .page__header ul.list-nav { margin-top: calc(var(--spacing) * -0.5); } } main .page__header ul.list-nav { color: var(--color-txt-light); } main .page__header ul.list-nav li { white-space: nowrap; margin-right: 2ch; } main .page__header ul.list-nav li:last-of-type { margin-right: 0; } @media screen and (max-width: 768px) { main .page__header ul.list-nav li { width: 12ch; } } main .page__header ul.list-nav li { margin-bottom: calc(var(--spacing) * 0.25); } main .page__header ul.list-nav a { text-decoration: none; text-transform: lowercase; } main .page__header ul.list-nav a::after { content: " ↓"; } main .page__header ul.list-nav li:hover { color: var(--color-txt); } body[data-template=investigation] main .page__header .page__title, body[data-template=investigation] main .page__header .page__description { max-width: none; } .package__section, .page__aside { max-width: var(--max-w-content); margin-inline: auto; padding-top: calc(var(--spacing) * 0.5); } .package__section .section__title, .package__section .aside__title, .page__aside .section__title, .page__aside .aside__title { font-weight: 500; text-transform: uppercase; margin-bottom: calc(var(--spacing) * 0.5); font-size: 1.2em; } @media screen and (max-width: 768px) { .package__section .section__title, .package__section .aside__title, .page__aside .section__title, .page__aside .aside__title { font-size: var(--normal); } } #related-investigations, #impacts, #dossier-feed { border-top: var(--border-light); margin-top: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1.5); } /* ---- Feed du dossier : aside « Dans le dossier » (cartes horizontales) ---- */ /* Titre de section des asides : un cran au-dessus des titres de cartes (qui sont en --normal), pour marquer la hiérarchie en desktop ET mobile (note Francesco 30 mai — avant, le titre était à peine/pas plus grand). */ .page__aside .aside__title, .page__aside .section__title { font-size: var(--medium); } .page__aside .aside__title a { color: inherit; text-decoration: none; } .page__aside .aside__title a:hover { color: var(--grey-200); text-decoration: none; } .page__sort--aside { justify-content: flex-start; max-width: none; margin-inline: 0; margin-bottom: calc(var(--spacing) * 0.75); } .dossier-feed__list { list-style: none; margin: 0; padding: 0; } .container-cards { max-width: var(--max-w-cards); margin: 0 auto; display: grid; grid-gap: calc(var(--spacing) * 1); } @media screen and (min-width: 560px) { .container-cards__investigations { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(100px, auto); grid-gap: var(--padding-body); margin-bottom: 10vh; } /* Section Enquêtes (template /investigation et home) : .card--block et .card--article remplissent leur cellule du grid (override la width: calc(50% - 13px) du Masonry default des autres rubriques) */ .container-cards__investigations .card--block, .container-cards__investigations .card--article { width: auto; } } @media screen and (max-width: 560px) { .container-cards__investigations { margin-bottom: 10vh; } } /* ───────────────────────────────────────────────────────────────────────── HOME v2 — layout centré (1100) + tagline sticky par section La tagline de chaque section se cale sous le header sticky (top: --header-h), reste affichée pendant qu'on scrolle la section, puis bascule à la suivante (sticky par section → aucun JS). Le contenu défile en dessous. ───────────────────────────────────────────────────────────────────────── */ /* Barre tagline : pleine largeur (prolonge le header), fond opaque pour que les cartes défilent proprement derrière ; texte cadré dans la colonne 1100. */ .section__tagline { position: sticky; top: var(--header-h); /* sous tout le système de menu burger (header, panneau, overlay) mais au-dessus du contenu qui défile — sinon la tagline recouvrait le menu ouvert. */ z-index: calc(var(--z-header) - 10); background-color: var(--color-bg); padding-top: calc(var(--spacing) * 1.5); padding-bottom: calc(var(--spacing) * 2); /* même ombre portée que le header sticky */ box-shadow: -1px 4px 10px 0px var(--color-bg); } @media screen and (min-width: 768px) { .section__tagline { padding-top: calc(var(--spacing) * 2); /* desktop : 2× */ /* +20px pour égaliser le gap visuel bas (jusqu'aux cartes) avec le gap haut (depuis le texte du header) : le buffer de 10px du body complète les 90px. */ padding-bottom: calc(var(--spacing) * 2 + 20px); } } .section__tagline-inner { /* colonne 1100 centrée (alignée avec la grille de cartes). Pas de padding-inline : main porte déjà 0 var(--padding-body) — sinon double marge sur la home. */ max-width: var(--max-w-cards); margin-inline: auto; } .section--home .baseline-section { font-size: var(--medium); line-height: 1.2; margin: 0; } /* Corps de section : colonne 1100 centrée */ .section__body { max-width: var(--max-w-cards); margin-inline: auto; /* petit dégagement avant les cartes pour que l'ombre du sticky tagline ne tombe pas directement dessus */ padding-top: 10px; padding-bottom: calc(var(--spacing) * 4); } @media screen and (min-width: 768px) { .section--home { border-bottom: var(--border-light); } } /* Enquêtes : le wrapper .container-cards__investigations (partagé avec la page Enquêtes) fournit déjà la grille 2 colonnes + le width:auto des cartes. */ @media screen and (max-width: 768px) { .section--home .card--article, .section--home .card--block { margin-bottom: calc(var(--spacing) * 1); } } .main__single .page__header { max-width: var(--max-w-content); } .main__single .page__header .page__description { margin-bottom: calc(var(--spacing) * 1); } .main__single .page__header > figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .main__single .page__header > figure img, .main__single .page__header > figure picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } .main__single .page__content { max-width: var(--max-w-content); margin-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 3); } .page__header + #related-investigations { padding-top: calc(var(--spacing) * 1); } @media screen and (max-width: 768px) { .page__header + #related-investigations { padding-top: 0; } } /* À propos, Newsletter, Mentions légales et Politique de confidentialité : titre calé sur celui d'une enquête (caps, gros, ferré à gauche, pas de filet) — il hérite de `main .page__header .page__title`. */ [data-template=investigation] main { position: relative; } /* Hero vidéo enquête (#investigation__hero) : aligné sur .page__cover des autres rubriques (margin-top 2× spacing) */ main .page__header #investigation__hero { margin-top: calc(var(--spacing) * 2); } #investigation__content .section-title-only { margin-bottom: 0; } #investigation__content .section-txt { max-width: var(--max-w-content); margin-inline: auto; } #investigation__content .subsection-txt .insert { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5); } #investigation__content .subsection-txt { max-width: var(--max-w-content); } #investigation__content img { max-height: 75vh; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 768px) { #investigation__content .section-content:not(.section-title-only) { margin-bottom: calc(var(--spacing) * 2); } #investigation__content .subsection-w-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--padding-body); position: relative; } #investigation__content .subsection-w-media .media { max-width: var(--max-w-content); width: 100%; margin-left: auto; margin-right: 0; padding-right: var(--padding-inner); position: sticky; top: calc(var(--header-h) + var(--spacing)); align-self: start; } } @media screen and (min-width: 768px) { #investigation__content .subsection-txt { min-height: calc(100vh - var(--header-h)); padding-left: var(--padding-inner); padding-right: var(--padding-inner); padding-bottom: calc(var(--spacing) * 6); } } @media screen and (max-width: 768px) { #investigation__content .section-content:not(.section-title-only) { margin-bottom: calc(var(--spacing) * 2); } #investigation__content .section-title-only { margin-bottom: calc(var(--spacing) * 1); } #investigation__content .media { margin-bottom: calc(var(--spacing) * 1); } #investigation__content .subsection-txt .insert { margin-top: calc(var(--spacing) * 1.5); } } #investigation__content .subsection-w-hscroll { position: relative; margin-bottom: calc(var(--spacing) * 4); } #investigation__content .subsection-w-hscroll .horizontal-scroll { height: 100vh; width: 100vw; overflow: hidden; display: flex; align-items: center; } #investigation__content .subsection-w-hscroll .horizontal-scroll-wrapper { display: flex; flex-wrap: nowrap; will-change: transform; } #investigation__content .subsection-w-hscroll .horizontal-scroll-slide { flex-shrink: 0; width: 90vw; max-width: 700px; padding: 0 calc(var(--spacing) * 1); } #investigation__content .subsection-w-hscroll .horizontal-scroll-slide figure, #investigation__content .subsection-w-hscroll .horizontal-scroll-slide img { width: 100%; } #investigation__content .subsection-w-hscroll .horizontal-scroll-pagination { position: fixed; bottom: calc(var(--spacing) * 2); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } #investigation__content .insert--inner > :last-child { margin-bottom: 0px; } #investigation__content .insert--inner > :first-child, #investigation__content .subsection-txt > :first-child, #investigation__content .section-content > :first-child { margin-top: 0px; } .investigation__content:target { padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important; } .media { max-width: var(--max-w-cards); margin-inline: auto; } .media video { width: 100%; } .media figure { height: auto; } /* =========================================================== INVESTIGATION — variante hero portrait (player vertical 9:16) Structure unifiée avec les autres rubriques : tout dans
. En portrait, le hero passe en 9:16 centré (largeur réduite). =========================================================== */ /* Hero portrait : le hero reste plein-cadre (100vw) en bloc — c'est la .hero-video__scene qui porte la hauteur fixe (~80vh plafonnée à 800px) et le centrage flex. Le player-container à l'intérieur a aspect-ratio 9/16 et height 100% de la scène → sa largeur est calculée automatiquement (height × 9/16). Le backdrop flou remplit les bords latéraux. La
est hors scène → elle coule sous le hero. */ main.article--hero-portrait .page__header #investigation__hero { width: 100vw; max-width: 100vw; aspect-ratio: auto; margin-inline: calc(50% - 50vw); } main.article--hero-portrait .page__header #investigation__hero .hero-video__scene { height: min(80vh, 800px); overflow: hidden; display: flex; align-items: center; justify-content: center; } main.article--hero-portrait .page__header #investigation__hero .player-container { position: relative; inset: auto; height: 100%; width: auto; max-width: none; aspect-ratio: 9 / 16; z-index: 2; } main.article--hero-portrait .page__header #investigation__hero .video-full { display: block; width: 100%; height: 100%; } main.article--hero-portrait .page__header #investigation__hero .video-full iframe { width: 100%; height: 100%; } /* =========================================================== ARTICLE — Taille du titre Le H1 (.page__title) est à --big (taille « enquête ») sur toutes les pages contenu (enquête, veille, laboratoire, impact, news…) via la règle générique `main .page__header .page__title`, pour une hiérarchie nette H1 > H2 (les H2 de corps sont à --medium). Il n'y a plus d'option « Grand titre » : le champ et les classes .article--title-* ont été supprimés (blueprints + templates). =========================================================== */ /* === Width unifiée pour le header — tous les éléments (titre, chapô, date, dl-table) restent sur la même largeur principale --max-w-content (700px). Le hero (cover/vidéo) garde son full-width via la règle juste en dessous. */ /* HERO FULL-WIDTH : le visuel de couverture (image ou vidéo) déborde du max-width du header (1100px / 680px) pour remplir 100vw. Garde l'emplacement actuel (margin-top spacing × 2), seul l'élargissement change. */ main .page__header .page__cover, main .page__header #investigation__hero { max-width: 100vw !important; width: 100vw; margin-inline: calc(50% - 50vw); } /* Variante colonne : hero contraint à la largeur de texte (680), centré — annule le plein-cadre ci-dessus. Ex. : impact reprenant l'image de son dossier. */ main .page__header .page__cover--col { max-width: var(--max-w-content) !important; width: auto; margin-inline: auto; } /* Hero portrait : la figcaption sous le hero reste contrainte à --max-w-content */ main.article--hero-portrait .page__header #investigation__hero figcaption { position: relative; z-index: 2; max-width: var(--max-w-content); margin-inline: auto; } /* Scène du hero : enveloppe le fond flou + le player. Sur les modes plein-cadre (vertical / player vertical / player carré) c'est ELLE qui devient la boîte flex à hauteur fixe ; la
reste hors scène et coule dessous, dans le flux. */ #investigation__hero .hero-video__scene { position: relative; width: 100%; } /* Backdrop : copie de la videoPreview en plein cadre, scaled + blurred */ .hero-video__backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero-video__backdrop video { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(0.7); transform: scale(1.15); /* évite que les bords flous laissent voir le vide */ } /* =========================================================== HERO — preview 16:9 + player vertical (toggle « Player vertical à la lecture », classe .hero-video--vplayer) Avant clic : vignette 16:9 normale (pleine largeur), backdrop masqué. Au clic (.is-playing, ajouté par hero-video.js) : le hero devient une scène portrait 9:16 centrée, le player vertical s'affiche, le fond flou remplit les bords — même rendu que le hero portrait, mais déclenché à la lecture. =========================================================== */ #investigation__hero.hero-video--vplayer .hero-video__backdrop { display: none; } #investigation__hero.hero-video--vplayer.is-playing .hero-video__scene { height: min(80vh, 800px); display: flex; align-items: center; justify-content: center; overflow: hidden; } #investigation__hero.hero-video--vplayer.is-playing .player-container { position: relative; inset: auto; height: 100%; width: auto; max-width: none; aspect-ratio: 9 / 16; z-index: 2; } #investigation__hero.hero-video--vplayer.is-playing .video-full, #investigation__hero.hero-video--vplayer.is-playing .video-full iframe { display: block; width: 100%; height: 100%; } #investigation__hero.hero-video--vplayer.is-playing .hero-video__backdrop { display: block; } /* =========================================================== HERO — preview 16:9 + player CARRÉ (toggle « Player carré à la lecture », classe .hero-video--splayer). Même principe que le player vertical, mais la vidéo s'ouvre en 1:1 au clic, le fond flou remplissant les bords latéraux. Hauteur bornée aussi par 100vw pour que le carré ne déborde jamais en mobile. =========================================================== */ #investigation__hero.hero-video--splayer .hero-video__backdrop { display: none; } #investigation__hero.hero-video--splayer.is-playing .hero-video__scene { height: min(80vh, 100vw, 800px); display: flex; align-items: center; justify-content: center; overflow: hidden; } #investigation__hero.hero-video--splayer.is-playing .player-container { position: relative; inset: auto; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1; z-index: 2; } #investigation__hero.hero-video--splayer.is-playing .video-full, #investigation__hero.hero-video--splayer.is-playing .video-full iframe { display: block; width: 100%; height: 100%; } #investigation__hero.hero-video--splayer.is-playing .hero-video__backdrop { display: block; } /* =========================================================== HEADER — étiquette + titre absorbant le contenu sur scroll - Sur pages de contenu (.site-header--content), le header est vide au top (juste logo + lang + thème + burger). - Au scroll au-delà du titre principal, #header-article-title apparaît : « ÉTIQUETTE / Titre » en blanc, tronqué par ellipsis si trop long. =========================================================== */ /* Le parent doit être positionné pour que la nav et le titre puissent être centrés indépendamment des autres items du header. */ #site-header .site-header__inner { position: relative; } /* Groupe droit : wrap des contrôles (Soutenez + thème + lang + burger). space-between sur l'inner met logo à gauche et ce groupe à droite. */ #site-header .site-header__right { display: flex; align-items: center; gap: calc(var(--gap) * 0.25); } #header-article-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; /* max-width adaptatif : réserve ~400px pour logo + right group (theme/lang/burger) pour ne pas chevaucher sur viewports intermédiaires (1080-1300px). */ max-width: min(var(--max-w-content), calc(100vw - 400px)); display: flex; align-items: center; justify-content: center; min-width: 0; font-size: var(--small); color: var(--color-txt); font-weight: 400; opacity: 0; transition: opacity 200ms ease; pointer-events: none; white-space: nowrap; overflow: hidden; padding: 0 1ch; } #header-article-title .header-article-title__title { white-space: nowrap; } /* Fil d'Ariane (rapport) : même blanc que le titre. C'est LUI qui se tronque (ellipsis) si l'ensemble est trop large → le titre « Rapport d'impact 2020 – 2025 » reste toujours affiché en entier. */ #header-article-title .header-article-title__crumb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } #header-article-title .header-article-title__crumb:empty { display: none; } /* Sur le rapport, le titre ne rétrécit jamais (priorité absolue) → seul le fil d'Ariane est rogné. (Les autres pages gardent l'ellipsis sur leur titre.) */ body[data-template=report] #header-article-title .header-article-title__title { flex: 0 0 auto; overflow: visible; text-overflow: clip; } /* Anti-flash : quand on retire .article-title-active (scroll up), on veut un masquage INSTANTANÉ pour que le titre disparaisse avant que sa position se réinitialise au centre (sinon flash centré → ferré à gauche). */ body:not(.article-title-active) #header-article-title { transition: none; } #header-article-title .header-article-title__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* État scroll-down past title : nav masquée, titre affiché */ body.article-title-active #site-header #nav-highlight { opacity: 0; pointer-events: none; } body.article-title-active #header-article-title { opacity: 1; } /* Override hover : repasse en nav (par-dessus le titre). `:not(.menu-open)` empêche la nav de redevenir visible quand le menu burger est ouvert (sinon le hover sur le header la fait clignoter). */ body.article-title-active:not(.menu-open) #site-header:hover #nav-highlight { opacity: 1; pointer-events: auto; } body.article-title-active:not(.menu-open) #site-header:hover #header-article-title { opacity: 0; } /* Menu burger ouvert (mobile + desktop) : header simplifié et désactivé. - nav-highlight masquée (déjà fait par règle existante body.menu-open #nav-highlight) - titre article masqué - hover du header n'a plus d'effet (les states ci-dessus ne peuvent plus être activés tant que .menu-open est sur le body) */ body.menu-open #header-article-title { opacity: 0; pointer-events: none; } body.menu-open #site-header:hover #nav-highlight { opacity: 0; pointer-events: none; } body.menu-open #site-header:hover #header-article-title { opacity: 0; } /* =========================================================== MOBILE — scroll past title : logo + lang + thème masqués, titre du contenu collé à gauche (ellipsis avant le burger). =========================================================== */ @media screen and (max-width: 768px) { /* Transitions appliquées en permanence pour fade in/out */ #site-header #site-title, #site-header #theme-toggle, #site-header #lang-toggle { transition: opacity 200ms ease; } /* Masquage en mode article-title-active */ body.article-title-active #site-header #site-title, body.article-title-active #site-header #theme-toggle, body.article-title-active #site-header #lang-toggle { opacity: 0; pointer-events: none; } /* Hover override : on remontre les contrôles (pareil que la nav desktop). Menu-open override aussi : on force la visibilité des contrôles. */ body.article-title-active #site-header:hover #site-title, body.article-title-active #site-header:hover #theme-toggle, body.article-title-active #site-header:hover #lang-toggle, body.menu-open #site-header #site-title, body.menu-open #site-header #theme-toggle, body.menu-open #site-header #lang-toggle { opacity: 1; pointer-events: auto; } /* Titre repositionné à gauche. left: 0 relatif au .site-header__inner (qui est lui-même décalé de padding-body via le padding du #site-header) → marge gauche = marge du logo (= padding-body de viewport). max-width : laisse de l'air entre l'ellipsis et le burger (~70px). */ body.article-title-active #header-article-title { left: 0; top: 50%; transform: translateY(-50%); width: auto; max-width: calc(100% - 45px); justify-content: flex-start; padding: 0; } body.article-title-active #site-header:hover #header-article-title { opacity: 0; } } /* ========================================================================= ÉQUIPE — page Team (grille FA-style), fiche membre, crédits dl-table ========================================================================= */ /* --- Page Équipe : sections (titres calqués sur les sections d'enquête) --- */ .team-section { max-width: var(--max-w-content); margin-inline: auto; } .team-section__subtitle { font-weight: 400; /* regular */ font-size: var(--small); /* taille s */ text-transform: none; /* pas en caps */ color: var(--color-txt); margin-top: calc(var(--spacing) * 2); margin-bottom: 0; /* la liste de noms suit directement (retour ligne) */ } .team-section > .team-grid:first-child { margin-top: 0; } /* --- Grille (permanent·es / freelance actuel·les) --- */ .team-grid { list-style: none; margin: 0; padding: 0 !important; /* annule l'indent 3ch des
    du corps → grille centrée */ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--spacing) * 1.3) var(--spacing); /* row-gap réduit (−15px) */ } .team-grid__item { text-align: center; } .team-grid__item > a, .team-grid__item > .team-grid__link { /* .team-grid__link : snapshot figé du rapport (sans lien) */ display: flex; flex-direction: column; align-items: center; text-decoration: none; } .team-grid__photo { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin-bottom: 11px; box-shadow: 0 0 0 0 var(--grey-200); /* anneau au survol : gris doux (= couleur hover du nom), theme-aware */ transition: box-shadow .2s ease; } .team-grid__photo:empty { background: var(--grey-800); } /* cercle placeholder seulement sans photo */ .team-grid__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Survol : fin contour autour du cercle (remplace l'ancien effet de désaturation). */ .team-grid__item > a:hover .team-grid__photo, .team-grid__item > a:focus-within .team-grid__photo { box-shadow: 0 0 0 1px var(--grey-200); } .team-grid__name { color: var(--color-txt); font-weight: 500; font-size: var(--small); } .team-grid__role { color: var(--color-txt-light); font-size: var(--xsmall); margin-top: 1px; } /* Rapport d'impact : ×2 avant/après la grille équipe et le tableau de gouvernance. */ .report-body .team-section { margin-block: calc(var(--spacing) * 2); } .report-body .dl-table--board { margin: calc(var(--spacing) * 2) 0; } .team-grid__item > a:hover .team-grid__name { color: var(--grey-200); } /* --- Listes (stagiaires / ancien·nes) : ferré à gauche, plus petit --- */ .team-roster { margin: 0; text-align: left; color: var(--color-txt-light); /* noms des ancien·nes en gris */ font-size: var(--small); line-height: 1.5; } .team-roster a { color: inherit; text-decoration: none; } .team-roster a:hover { color: var(--grey-200); } /* --- Fiche membre --- */ /* Fiche membre resserrée sur la colonne de base (680 px, comme la prose). */ .member { max-width: calc(var(--max-w-content) + 52px); margin-inline: auto; } .member__header { text-align: center; margin-top: 60px; } /* espace avant la photo (haut de la fiche/overlay) */ .member__photo { display: inline-block; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; } .member__photo img { width: 100%; height: 100%; object-fit: cover; } .member__name { font-size: var(--medium); font-weight: var(--fw-medium); } /* Rôle collé au nom (même ratio gap/police que la grille : ~1px pour --small → ~2px pour --medium). */ .member__role { color: var(--color-txt-light); margin-top: 2px; } .member__period { color: var(--color-txt-light); font-size: var(--small); margin-top: 2px; } .member__bio, .member__works { max-width: var(--max-w-content); margin: calc(var(--spacing) * 3) auto 0; } .member__bio p + p { margin-top: 1em; } /* sépare les paragraphes de la bio */ /* Liens inline de la bio : soulignés + hover gris, cohérent avec le reste du site. */ .member__bio a { text-decoration: underline; text-underline-offset: 0.18em; } .member__bio a:hover { color: var(--grey-200); } .member__works h2 { font-size: var(--medium); font-weight: 500; text-transform: uppercase; margin-bottom: calc(var(--spacing) * 0.5); } /* Liste des enquêtes/labo : réutilise le display « frise » du rapport (snippet report/media-list). Reset de liste scopé ici car la fiche n'est pas dans .page__content (où il existe déjà). */ .member__works .frise__list { list-style: none; margin: 0; padding: 0; } .member__works .frise__item { margin: 0; } /* --- dl-table : crédits équipe, accordéon CSS (label col 1, noms col 2, rôles col 3) --- */ .dl-table .dl__group--team { display: grid; grid-template-columns: 1fr 2fr; /* 2 pistes fixes → la colonne noms ne bouge pas entre fermé/ouvert */ -moz-column-gap: 1ch; column-gap: 1ch; row-gap: .25em; align-items: baseline; } .dl__team-toggle { display: none; } .dl__team-label { grid-column: 1; width: -moz-fit-content; width: fit-content; color: var(--color-txt-light); display: inline-flex; align-items: center; gap: 1.2ch; /* espacement Équipe ↔ chevron doublé */ cursor: pointer; white-space: nowrap; } .dl__team-chevron { display: inline-block; width: .42em; height: .42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .dl__team-toggle:checked ~ .dl__team-label .dl__team-chevron { transform: translateY(1px) rotate(-135deg); } /* Fermé : noms en ligne (col 2 → fin). Ouvert : noms empilés col 2, rôles col 3. */ .dl__team-compact { grid-column: 2; } .dl__team-compact a, .dl__team-name a { color: var(--color-txt); text-decoration: none; } .dl__team-compact a:hover, .dl__team-name a:hover { color: var(--grey-200); } /* Une ligne par membre : nom à gauche (même x qu'en compact), rôle poussé à droite */ .dl__team-row { grid-column: 2; display: none; justify-content: space-between; gap: 1.5ch; align-items: baseline; } .dl__team-toggle:checked ~ .dl__team-compact { display: none; } .dl__team-toggle:checked ~ .dl__team-row { display: flex; } .dl__team-role { color: var(--color-txt-light); font-size: var(--xsmall); text-align: right; white-space: nowrap; } @media (max-width: 768px) { .dl__team-toggle:checked ~ .dl__team-row { flex-direction: column; gap: 0; } .dl__team-role { text-align: left; } } @media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile étroit : on RESTE à 2 colonnes en réduisant la taille des photos. */ @media (max-width: 480px) { .team-grid { gap: calc(var(--spacing) * 1.4) calc(var(--spacing) * 0.75); } .team-grid__photo { width: 84px; height: 84px; } } /* ========================================================================== MENU — accordéon « À propos » (nav-aside du menu déroulant) Ouverture au CLIC sur le chevron (desktop ET mobile), pas au survol. Les sous-sections poussent les liens suivants vers le bas. ========================================================================== */ #site-menu .nav-accordion { position: relative; } /* En-tête : lien « À propos » + chevron JUSTE à côté du texte (pas au bout). */ #site-menu .nav-accordion__head { display: flex; align-items: center; justify-content: flex-start; gap: 0; /* l'espace texte→chevron est porté par .chevron-disclose (margin) */ } #site-menu .nav-accordion__toggle { display: inline-flex; /* visible desktop + mobile */ align-items: center; justify-content: flex-start; /* chevron calé à gauche → seul son margin fait l'espace */ margin-left: -0.6ch; /* compense le padding-right du lien (pastille hover) → l'espace réel texte→chevron = --chevron-gap, comme l'accordéon */ width: 1.2em; height: 1.2em; padding: 0; background: none; border: none; cursor: pointer; color: var(--color-txt); /* chevron blanc (couleur texte pleine) par défaut */ } /* ── Chevron d'ouverture de contenu — FACTORISÉ (réf. menu « À propos ») ── Partagé par le menu (`.nav-accordion`) ET les accordéons (`.accordion`). Même icône (arrow-details), 12px, suit la couleur du texte. Convention : fermé = pointe vers le bas ↓ · ouvert = pointe vers le haut ↑. */ .chevron-disclose { --size: 12px; --chevron-gap: 7px; /* RÉGLAGE UNIQUE de l'espace texte→chevron (partout) */ display: inline-flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); margin-inline-start: var(--chevron-gap); /* l'espacement appartient au composant → identique partout */ position: relative; top: -2px; /* alignement vertical du chevron */ flex: none; } .chevron-disclose svg { width: 100%; fill: currentColor; /* suit la couleur du texte */ transform: rotate(90deg); /* fermé : chevron vers le bas */ transition: transform 0.2s ease; } .nav-accordion.is-open .chevron-disclose svg, .accordion[open] .chevron-disclose svg { transform: rotate(-90deg); /* ouvert : chevron vers le haut */ } /* Repli/dépli au clic via .is-open — animation `max-height` (fiable partout ; les 7 sous-sections tiennent largement sous 360px). */ #site-menu .nav-accordion__sub { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } #site-menu .nav-accordion.is-open .nav-accordion__sub { max-height: 360px; } #site-menu .nav-accordion__list { list-style: none; } #site-menu .nav-accordion__list li { text-transform: uppercase; /* sous-sections en capitales */ margin-bottom: 0; } #site-menu .nav-accordion__list li:first-child { padding-top: calc(var(--spacing) * 0.3); } #site-menu .nav-accordion__list a { display: inline-block; font-size: var(--small); /* un cran sous la taille des liens du menu */ font-weight: 500; /* caps forcé → Executive Medium (règle typo générale) */ padding-left: calc(var(--spacing) * 0.6); /* léger retrait */ line-height: 1.6; color: var(--color-txt-light); } #site-menu .nav-accordion__list a:hover { color: var(--color-txt); } /* ========================================================================== PAGE À PROPOS — calée sur le template de contenu (page__header + page__content). Les sections réutilisent la typo/espacements de `.main__single .page__content` (titres h2 en caps, paragraphes, dl-table) ; ici on ne fait qu'ajuster la largeur de la colonne (680, le contenu standard n'a pas de média large) et les ancres. ========================================================================== */ [data-template=about] main .page__content { max-width: var(--max-w-content); } .about-section { /* Compense le header fixe quand on saute à une ancre. */ scroll-margin-top: calc(var(--header-h) + var(--spacing)); } /* Premier titre de section : pas de double marge sous le header. */ .about-section:first-child h2 { margin-top: 0; } /* +50% d'air au-dessus de chaque section (le gap = margin-top du

    ) : 2.5×spacing (générique .page__content h2) → 3.75×spacing. Scopé .about ; le 1er titre reste collé sous le header/CTA. */ .about .about-section h2 { margin-top: calc(var(--spacing) * 3.75); } .about .about-section:first-child h2 { margin-top: 0; } /* « Qui sommes-nous » : affiché en chapô sous le titre (ancre du menu dessus). */ .about .page__description[id] { scroll-margin-top: calc(var(--header-h) + var(--spacing)); } /* Saut de ligne entre les paragraphes du chapô. */ .about .page__header .page__description p + p { margin-top: 1.1em; } /* Hero — galerie vidéo : 940px, déborde du header 680, centrée. */ .about-hero { max-width: 940px; margin: calc(var(--spacing) * 2 + 20px) auto calc(var(--spacing) / 3); /* +20px de gap sous le chapô ; gap bas ÷3 (sélecteur slider ↔ « Voir les enquêtes ») */ } .about-hero .swiper-slide { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .about-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 2; } /* Vidéo verticale (ex. Renée Good) : 9:16 centrée sur fond flouté. */ .about-hero__slide.is-portrait .about-hero__video { width: auto; height: 100%; aspect-ratio: 9 / 16; margin: 0 auto; } .about-hero__backdrop { position: absolute; inset: 0; z-index: 1; } .about-hero__backdrop video { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(0.7); transform: scale(1.15); } /* Légende : titre (année) de l'enquête, en gris, cliquable, non soulignée, centrée. */ .about-hero__caption { margin-top: calc(var(--spacing) * 0.5); font-size: var(--small); line-height: 1.4; text-align: center; } .about-hero__caption-link { color: var(--color-txt-light); text-decoration: none; } .about-hero__caption-link:hover { color: var(--color-txt); } .about-hero .swiper-pagination { position: static; margin-top: calc(var(--spacing) * 0.4); } /* Gouvernance — couleurs inversées : nom (gauche) blanc, qualité (droite) gris. */ .dl-table--board dt { color: var(--color-txt); } .dl-table--board dd { color: var(--color-txt-light); } /* À propos : gap au-dessus du tableau CA aligné sur celui du tableau Financement (.funders, 1×spacing) au lieu du 3×spacing générique de .dl-table. Le rapport garde son propre rythme (.report-body .dl-table--board). */ .about .dl-table--board { margin-top: calc(var(--spacing) * 1); } /* « Ont travaillé chez Index » : dans .page__content, l'

    hérite des styles de titre (caps/500) → on rétablit corps/regular/sans caps (spécificité > h3). */ .main__single .page__content .team-section__subtitle { text-transform: none; font-weight: 400; font-size: var(--small); margin-bottom: 0; } /* Noms des ancien·nes : taille --small (comme les noms de la grille). Le sélecteur `.page__content p {font-size:inherit}` forcerait sinon --normal. Interligne normal (1.5, hérité). Léger espace sous le sous-titre « Ont travaillé chez Index ». */ .main__single .page__content .team-roster { font-size: var(--small); margin-top: calc(var(--spacing) * 0.35); } /* Financement — la 3ᵉ colonne (détails) peut être longue : autoriser le retour à la ligne (la ligne « Équipe » d'origine est en nowrap car rôles courts). */ .dl-table--funders .dl__team-role { white-space: normal; } /* Presse — cartes Open Graph empilées sur 1 colonne (display identique à la page « Reprises presse » / Impact médiatique). */ .about-press { display: flex; flex-direction: column; gap: var(--padding-inner); margin-top: calc(var(--spacing) * 1.5); } /* Carte OG : la page À propos est `.main__single` (contrairement à la page Reprises presse) → le titre

    et la description

    héritaient de la typo `.page__content` (plus gros + caps). On rétablit les tailles d'origine. */ .about-press .card--open-graph .title { font-size: var(--small); text-transform: none; margin: 0 0 0.5em; max-width: none; } .about-press .card--open-graph .description { font-size: var(--xsmall); margin: 0; } /* Presse — vidéos YouTube en bas de section, après les liens (cadre 680px = la colonne de contenu, ratio 16:9, empilées). */ .about-press-videos { display: flex; flex-direction: column; gap: var(--padding-inner); margin-top: var(--padding-inner); } .about-press-videos__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: var(--border-light); border-radius: 10px; overflow: hidden; } .about-press-videos__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Pastille « Voir … → » centrée (réutilise .btn--see-more de la home). */ .about-cta { display: flex; justify-content: center; margin: calc(var(--spacing) * 1.5) 0 calc(var(--spacing) * 3); } /* CTA « Voir les enquêtes » juste sous le hero : gap ÷3 (sélecteur slider ↔ étiquette). */ .about-hero + .about-cta { margin-top: calc(var(--spacing) / 3); } /* Grille de 3 impacts entre Mission et Expertise (sans filtres). Largeur 940px, centrée sur la colonne (déborde du 680 de chaque côté), comme l'encart 3D. */ .about-impacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding-inner); margin-top: calc(var(--spacing) * 1.5); width: min(940px, 92vw); margin-left: 50%; transform: translateX(-50%); } .about-impacts .card--block { width: auto; } @media (max-width: 600px) { .about-impacts { grid-template-columns: 1fr; } } /* Encart 3D (iframe) dans Expertise : 940px, centré sur la colonne (déborde du 680 de chaque côté), ratio 16:9. */ .about-embed { width: min(940px, 92vw); margin: calc(var(--spacing) * 2) auto; margin-left: 50%; transform: translateX(-50%); } .about-embed__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: var(--border-light); border-radius: 10px; overflow: hidden; } .about-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* =========================================================================== Page Impact — Zone haute (centrée 680px) : chapô + lien théorie + carte rapport, puis bande compteurs. Insérée au-dessus de la grille masonry. =========================================================================== */ /* Chapô éditorial (colonne 680 centrée, aligné à gauche comme les autres) + lien « théorie » en pastille, aligné à gauche sous le chapô */ .impact-intro { max-width: var(--max-w-content); margin: 0 auto calc(var(--spacing) * 1.5); } .impact-intro__lead { font-size: var(--lead); line-height: var(--leading-normal); text-wrap: pretty; } .impact-intro__cta { display: flex; justify-content: flex-start; margin-top: calc(var(--spacing) * 1); } .impact-intro__cta .btn--see-more { margin-top: 0; margin-inline: 0; } /* Carte rapport d'impact — HERO pleine largeur (pièce maîtresse de la page). Visuel allongé à gauche jusqu'à la médiane de la page (50 %), bande noire à droite (badge / titre / date / chapô agrandis). La bande reste noire dans les deux thèmes, texte forcé en blanc → bloc graphique tranché. Calée sur 1600px. */ body[data-template=impacts] .impact-report { width: 100vw; max-width: 100vw; margin: calc(var(--spacing) * 4) calc(50% - 50vw); /* full-bleed bord à bord + air ×4 haut/bas */ padding: 0; display: grid; grid-template-columns: 1fr 1fr; /* image 50 % | bande 50 %, le split = médiane page */ align-items: stretch; min-height: 360px; overflow: hidden; border: 0; border-top: 1px solid transparent; /* place réservée pour les 2 filets blancs du hover */ border-bottom: 1px solid transparent; /* (évite tout décalage de hauteur au survol) */ } /* Pas de ligne ::before ni de fond au survol (hérités des cartes) : au hover, seulement deux filets blancs pleine largeur, au-dessus et au-dessous de la bande. */ body[data-template=impacts] .impact-report::before { display: none; } body[data-template=impacts] .impact-report:hover { background-color: transparent; border-top-color: #fff; border-bottom-color: #fff; } body[data-template=impacts] .impact-report__visual { margin: 0; min-width: 0; display: block; overflow: hidden; aspect-ratio: auto; /* annule le débordement des covers de carte (.card--block > figure) */ width: 100%; position: static; left: 0; top: 0; } body[data-template=impacts] .impact-report__visual img, body[data-template=impacts] .impact-report__visual picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; } /* Bande de droite : noir pur (les 2 thèmes), texte blanc forcé, contenu centré. */ body[data-template=impacts] .impact-report__body { min-width: 0; background-color: #000; color: #fff; padding: calc(var(--spacing) * 1.2) calc(var(--spacing) * 1.6); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } /* Typo agrandie : titre ~2 crans (--big), chapô +1 (--lead), date discrète. */ body[data-template=impacts] .impact-report__body .card--type-badge { background-color: #fff; color: #000; } body[data-template=impacts] .impact-report__body .title { font-size: var(--big); line-height: var(--leading-title); color: #fff; margin-top: calc(var(--spacing) * 0.4); margin-right: 0; } body[data-template=impacts] .impact-report__body .date { font-size: var(--small); /* un cran au-dessus de la date de carte (--xsmall), toujours gris */ color: rgba(255, 255, 255, 0.55); } body[data-template=impacts] .impact-report__body .description { font-size: var(--normal); /* texte normal — plus petit que le chapô de la page (--lead) */ line-height: var(--leading-normal); color: #fff; -webkit-line-clamp: unset; /* pièce maîtresse : chapô affiché en entier (pas de coupe) */ line-clamp: unset; } /* Empilé sous 768px : visuel au-dessus (16/9), bande noire en dessous. */ @media screen and (max-width: 768px) { body[data-template=impacts] .impact-report { grid-template-columns: 1fr; min-height: 0; } body[data-template=impacts] .impact-report__visual { aspect-ratio: 16 / 9; } } /* Bande compteurs : total + breakdown 5 types (séparateurs haut/bas, sans accordéon) */ .impact-counters { max-width: var(--max-w-cards); margin: 0 auto calc(var(--spacing) * 2); border-top: var(--border-light); border-bottom: var(--border-light); } .impact-counters__bar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--spacing) * 0.75); padding: calc(var(--spacing) * 1.25) 0; /* espacements inchangés */ } .impact-counters__total { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 0.15); } /* Surtitre « À CE JOUR : » — même graphie que le label « impacts recensés ». */ .impact-counters__overline, .impact-counters__label { font-size: var(--small); text-transform: uppercase; font-weight: 500; color: var(--color-txt-light); } /* +8px d'air entre « À CE JOUR : » et le chiffre (en plus du gap du bloc total). */ .impact-counters__overline { margin-bottom: 8px; } .impact-counters__number { font-size: var(--big); font-weight: 500; line-height: 1; } .impact-counters__breakdown { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--padding-inner) * 1); margin: 0; padding: 0; justify-content: center; } .impact-counters__breakdown li { display: flex; flex-direction: column; align-items: center; gap: 0.25em; } .impact-counters__breakdown li strong { font-size: var(--normal); font-weight: 500; line-height: 1; } .impact-counters__breakdown li span { font-size: var(--xsmall); text-transform: uppercase; font-weight: 500; color: var(--color-txt-light); letter-spacing: 0.02em; } /* Pastille « Méthodologie → » : reprend le style du bouton « Notre théorie de l'impact » (.btn--see-more), placée à droite de la bande, bord bas aligné sur le bord bas de la rangée des sous-types. Ouvre l'overlay méthodo (JS). */ .impact-counters__method { position: absolute; right: 0; bottom: calc(var(--spacing) * 1.25); /* = bord bas de la rangée des sous-types */ display: inline-flex; align-items: center; justify-content: center; gap: 1ch; height: var(--h-block); padding: 0 1.25ch; padding-top: 4px; border: 1px solid var(--color-txt-light); border-radius: var(--radius-btn); background-color: var(--color-bg); color: var(--color-txt-light); font-size: var(--small); line-height: 1; white-space: nowrap; cursor: pointer; } .impact-counters__method:hover { background-color: var(--grey-950); color: var(--grey-100); border-color: var(--grey-100); } .impact-counters__method .icon { display: inline-flex; width: 12px; height: 12px; position: relative; top: -2px; } .impact-counters__method .icon svg { width: 12px; height: 12px; fill: currentColor; /* arrow-left.svg pointe nativement à droite */ } /* Responsive : bande compteurs mobile */ @media screen and (max-width: 768px) { .impact-report { min-height: auto; } .impact-counters__method { position: static; margin-top: calc(var(--spacing) * 0.5); } } /* ── Overlay « Comment Index mesure son impact » — même infrastructure visuelle que l'overlay Impact / la lightbox (fond sombre plein écran + croix), mais contenu inline scrollable (pas d'iframe). Déclenché par la pastille « Méthodologie ». ── */ .method-overlay { position: fixed; inset: 0; z-index: calc(var(--z-header) + 10); background-color: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } body.method-overlay-open .method-overlay { opacity: 1; visibility: visible; pointer-events: auto; } .method-overlay__close { position: absolute; top: var(--padding-body); right: var(--padding-body); background: none; border: none; color: var(--color-txt); cursor: pointer; padding: 8px; z-index: 2; line-height: 0; } .method-overlay__close svg { width: 30px; fill: var(--color-txt); transition: fill 0.2s ease; } .method-overlay__close:hover svg { fill: var(--grey-400); } /* Panneau centré, opaque, scrollable — le fond sombre reste visible autour. */ .method-overlay__panel { width: min(760px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--color-bg); border: 1px solid var(--grey-600); } .method-overlay__inner { padding: calc(var(--spacing) * 1.5) clamp(var(--padding-body), 6vw, calc(var(--spacing) * 2)); } .method-overlay__title { font-size: var(--medium); text-transform: uppercase; /* Caps Medium — comme l'aperçu des témoignages du rapport */ font-weight: 500; line-height: var(--leading-title); margin-bottom: calc(var(--spacing) * 2); /* spacing ×2 sous le titre, avant le corps */ } .method-overlay__body p, .method-overlay__body li { font-size: var(--normal); line-height: var(--leading-normal); } .method-overlay__body > * + * { margin-top: 1em; } .method-overlay__body ul { padding-left: 1.4em; list-style: disc; } .method-overlay__body li + li { margin-top: 0.3em; } .method-overlay__body a { text-decoration: underline; text-underline-offset: 2px; } /* =========================================================================== Page Rapport — sommaire latéral compact (style Notion) + bloc chiffre-clé =========================================================================== */ /* Hero de couverture — pleine largeur (full-bleed), entre le menu et le titre. */ body[data-template=report] .report-hero { margin-inline: calc(var(--padding-body) * -1); /* sort du padding de main → bord à bord, symétrique */ margin-bottom: calc(var(--spacing) * 1.5 - 20px); /* bloc titre remonté de 20px vers le hero */ height: clamp(260px, 40vh, 450px); /* cropé, max 450px */ overflow: hidden; } body[data-template=report] .report-hero img, body[data-template=report] .report-hero picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { body[data-template=report] .report-hero { height: clamp(220px, 42vh, 380px); margin-bottom: calc(var(--spacing) * 2); } } body[data-template=report] .report-body { max-width: var(--max-w-content); margin-inline: auto; /* Vide de fin de rapport (= l'ancien 200px du séparateur, sans la barre) ; s'ajoute au padding-bottom ×3 classique de `main` avant le footer. */ padding-bottom: 200px; } /* Bloc titre du rapport (680, calé sur le contenu, façon long-format) : titre ~50% plus grand que H1, Executive Bold + sous-titre (taille H1) + date grise, puis grand vide avant le contenu. */ .report-titleblock { margin-bottom: 200px; } .report-badge { margin-bottom: calc(var(--spacing) * 0.5 + 10px); /* +10px entre l'étiquette et le titre */ } .report-maintitle { font-size: clamp(34px, 4.8vw, 62px); font-weight: 500; /* Executive Medium */ text-transform: uppercase; line-height: 1.04; letter-spacing: -0.01em; } .report-subtitle { font-size: clamp(34px, 4.8vw, 62px); /* même taille que le titre principal */ font-weight: 500; text-transform: uppercase; line-height: 1.04; letter-spacing: -0.01em; margin-top: calc(var(--spacing) * 0.15); } .report-date { font-size: var(--small); color: var(--color-txt-light); margin-top: calc(var(--spacing) * 0.5); } @media screen and (max-width: 768px) { .report-titleblock { margin-bottom: 140px; } } /* ── TEST — Titres du rapport agrandis d'un cran (hiérarchie conservée). ── Titre principal + sous-titre inchangés. On décale chaque niveau vers le haut : H2 → taille H1 (--big), H3 → H2 (--medium), H4 → H3 (--normal). H5 reste --small (= H4 d'origine). Scopé au rapport pour ne PAS toucher enquêtes et autres pages qui partagent `.main__single .page__content`. */ body[data-template=report] .report-body .page__content h2 { font-size: var(--big); } body[data-template=report] .report-body .page__content h3 { font-size: var(--medium); } body[data-template=report] .report-body .page__content h4 { font-size: var(--normal); } /* Espace sous les titres de sections principales (h2) doublé (était spacing*2/3). */ body[data-template=report] .report-body .page__content h2 { margin-bottom: calc(var(--spacing) * 4 / 3); } /* Interligne des titres de section : serré comme les titres d'enquête (--leading-title = 1.2) plutôt que l'interligne de prose hérité (--leading-normal). */ body[data-template=report] .report-body .page__content h2, body[data-template=report] .report-body .page__content h3, body[data-template=report] .report-body .page__content h4 { line-height: var(--leading-title); } /* Numérotation hiérarchique des sections (rapport d'ONG) — compteurs CSS, logique identique dans le corps et le sommaire (h2 = « 3. », h3 = « 3.2 », h4 = « 3.2.1 ») → numéros toujours cohérents. OPTIONNELLE : activée seulement quand .report--numbered est présent (toggle « Numéroter les sections »). */ .report--numbered .report-body .page__content { counter-reset: sec2; } .report--numbered .report-body .page__content > h2 { counter-increment: sec2; counter-reset: sec3; } .report--numbered .report-body .page__content > h3 { counter-increment: sec3; counter-reset: sec4; } .report--numbered .report-body .page__content > h4 { counter-increment: sec4; } .report--numbered .report-body .page__content > h2::before { content: counter(sec2) ". "; } .report--numbered .report-body .page__content > h3::before { content: counter(sec2) "." counter(sec3) " "; } .report--numbered .report-body .page__content > h4::before { content: counter(sec2) "." counter(sec3) "." counter(sec4) " "; } /* ────────────────────────────────────────────────────────────────────────── Système de sections du rapport : sous chaque section (titre h2) et sous le bloc titre → 140px de vide + barre de séparation à la largeur de colonne (680). ────────────────────────────────────────────────────────────────────────── */ /* Chaque titre de section (h2, y compris la 1re « À propos ») porte son séparateur : 200px de vide + barre fine grise, puis 50px avant le titre. Comme le corps est segmenté en plusieurs .page__content (grille pleine largeur sortie de la colonne), on NE peut PAS exempter le :first-child → le bloc titre, lui, n'a pas de barre. */ /* Le rythme vertical du rapport est porté par les marges des titres de section ; on neutralise le padding-bottom des segments .page__content (sinon il s'ajoute avant les blocs pleine largeur, ex. gap titre→grille trop grand). */ body[data-template=report] .report-body .page__content { padding-bottom: 0; } body[data-template=report] .report-body .page__content > h2 { margin-top: 200px; /* fin de section : 200px de vide au-dessus de la barre */ border-top: 1px solid var(--grey-600); /* barre fine, gris (680, h2 centré max-w-content) */ padding-top: 50px; /* écart barre → titre : 50px (harmonisé) */ } /* Bloc titre : pas de barre propre — c'est le séparateur de « À propos » (200px plus bas) qui fait office de fin du bloc titre. */ body[data-template=report] .report-titleblock { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* Ancre du sommaire (TOC) : le header est `position: fixed` (haut = 0, hauteur --header-h). À l'arrivée sur une section, on veut que la barre de séparation (border-top du h2 ciblé) se cale juste sous le bord bas du header et disparaisse derrière, le titre arrivant proprement dessous. Mécanisme = scroll-padding-top sur le CONTENEUR de scroll (et non scroll-margin sur la cible, mal honoré ici car le scroller est ). On le pose sur html ET body : selon le contexte l'un ou l'autre est le scroller effectif. Valeur = --header-h - 1px → le haut du h2 (la barre) atterrit 1px derrière le bord bas du header (invisible), le titre 50px plus bas reste dégagé. */ :root:has(body[data-template=report]), body[data-template=report] { scroll-padding-top: calc(var(--header-h) - 1px); } /* Connecté au Panel : la bande d'édition décale tout → le scroll-padding suit. */ :root:has(body.has-edit-bar[data-template=report]), body.has-edit-bar[data-template=report] { scroll-padding-top: calc(var(--header-h) + var(--edit-bar-h) - 1px); } /* ── Accordéon (sous-sections dépliables : théorie, encadrés méthodo) ── */ .main__single .page__content .accordion { max-width: var(--max-w-content); margin: calc(var(--spacing) * 2) auto calc(var(--spacing) * 3); /* ×2 avant le groupe, ×3 après */ border-top: var(--border-light); } /* Entre accordéons consécutifs : écart resserré (×0.5). */ .main__single .page__content .accordion + .accordion { margin-top: calc(var(--spacing) * 0.5); } .main__single .page__content .accordion:has(+ .accordion) { margin-bottom: calc(var(--spacing) * 0.5); } .main__single .page__content .accordion__summary { display: flex; align-items: center; /* chevron centré sur le titre (réf. menu) */ justify-content: flex-start; /* chevron collé au titre, pas poussé à droite */ gap: 0; /* espace texte→chevron porté par .chevron-disclose (margin) */ cursor: pointer; list-style: none; padding: calc(var(--spacing) * 0.3 + 3px) 0 calc(var(--spacing) * 0.6); /* haut ÷2 +3px : espace séparateur→titre */ } .main__single .page__content .accordion__summary::-webkit-details-marker { display: none; } .main__single .page__content .accordion__title { margin: 0 !important; max-width: none !important; font-size: var(--normal); font-weight: 500; text-transform: uppercase; } /* chevron : voir la classe factorisée `.chevron-disclose` (rotation gérée par `.accordion[open]`) */ /* Repli explicite (le masquage natif des

    fermés est écrasé par le reset global) */ .main__single .page__content .accordion:not([open]) .accordion__body { display: none; } .main__single .page__content .accordion__body { padding-bottom: calc(var(--spacing) * 0.75); } .main__single .page__content .accordion__body > :first-child { margin-top: 0; } /* ── Carte auteur (réutilisable) : photo cercle + nom + rôle ── */ .main__single .page__content .author-card { display: flex; align-items: center; gap: calc(var(--spacing) * 0.6); max-width: var(--max-w-content); margin: 0 auto calc(var(--spacing) * 1.5); } .author-card__photo { width: 55px; /* ≈ moitié du cercle de la grille équipe (110px) */ height: 55px; border-radius: 50%; overflow: hidden; flex: none; } /* photo : recadrage cover centré sur le point focal (comme la grille équipe) */ .author-card__photo picture { display: block; width: 100%; height: 100%; } .author-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(0.7); } .author-card__meta { display: flex; flex-direction: column; gap: 3px; } .author-card__name { font-weight: 500; line-height: 1.2; } /* nom : pas en caps */ .author-card__role { font-size: var(--small); color: var(--color-txt-light); line-height: 1.2; } /* ── Citation (pull-quote) façon Mediapart : exergue plus grand que le labeur, filet gris à gauche, légèrement décalée. Réutilisable dans tous les corps. ── */ .main__single .page__content .pull-quote, #investigation__content .pull-quote { /* légèrement plus étroite que la colonne → centrée = décalée des deux côtés, donc la ligne est indentée par rapport au bord gauche de la colonne (Mediapart) */ max-width: calc(var(--max-w-content) - var(--spacing) * 2); margin: calc(var(--spacing) * 1.5) auto; padding-left: calc(var(--spacing) * 1.5); border-left: 4px solid var(--color-green); /* filet vert (même que l'étiquette « Majeur ») */ } .main__single .page__content .pull-quote blockquote, #investigation__content .pull-quote blockquote { margin: 0; } .main__single .page__content .pull-quote blockquote p, #investigation__content .pull-quote blockquote p { font-size: var(--medium); line-height: 1.3; /* interligne un peu plus grand que les titres */ font-weight: 400; margin: 0; max-width: none; } .main__single .page__content .pull-quote blockquote p + p, #investigation__content .pull-quote blockquote p + p { margin-top: calc(var(--spacing) * 0.5); } .main__single .page__content .pull-quote figcaption, #investigation__content .pull-quote figcaption { margin-top: calc(var(--spacing) * 0.5); font-size: var(--small); color: var(--color-txt-light); } /* ── Grille d'impacts intégrée au rapport (témoignages) : rendue HORS de la colonne 680 (cf. report.php), en pleine largeur, la grille `.impacts-grid` se recentrant d'elle-même à 1100 (max-w-cards). Aucune règle de texte de .page__content ne s'applique → cartes identiques à /impact. ── */ body[data-template=report] .report-impact-grid { width: 100vw; margin-left: calc(50% - 50vw); /* Marge latérale = celle des listings standards (--padding-body), pour ne pas coller aux bords (notamment en mobile). */ box-sizing: border-box; padding-inline: var(--padding-body); /* Gap titre → grille = ×2 (60px desktop). Le margin-top prime sur la marge-bas du titre (collapse → max). */ margin-top: calc(var(--spacing) * 2); margin-bottom: 0; } body[data-template=report] .report-impact-grid .impacts-grid { max-width: var(--max-w-cards); margin-inline: auto; } body[data-template=report] .report-impact-grid [data-impact-overlay] .card--block { cursor: pointer; } /* Cartes témoignages DANS LE RAPPORT uniquement : pas de ligne Mot-clé (la rubrique Impact, elle, les conserve). */ body[data-template=report] .report-impact-grid .card--case-dl__keywords { display: none; } /* ── Overlay Impact (carte ouverte en surimpression) — même infrastructure que la lightbox média : overlay sombre plein écran + croix en haut à droite. Le contenu est une iframe = vraie instance de la page d'impact ; le scroll est sur l'iframe. ── */ html.has-overlay, body.has-overlay { overflow: hidden; } #impact-overlay { position: fixed; inset: 0; z-index: calc(var(--z-header) + 10); background-color: rgba(0, 0, 0, 0.92); /* fond sombre, même que la lightbox média */ display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } body.impact-overlay-open #impact-overlay { opacity: 1; visibility: visible; pointer-events: auto; } #impact-overlay-close { position: absolute; top: var(--padding-body); right: var(--padding-body); background: none; border: none; color: var(--color-txt); cursor: pointer; padding: 8px; z-index: 2; line-height: 0; } #impact-overlay-close svg { width: 30px; fill: var(--color-txt); transition: fill 0.2s ease; } #impact-overlay-close:hover svg { fill: var(--grey-400); } /* Panneau centré, opaque, scrollable, autour de la colonne de contenu — le fond sombre semi-transparent reste visible autour (on devine encore le rapport/header). */ #impact-overlay-frame { width: min(760px, 92vw); height: 86vh; background: var(--color-bg); border: 1px solid var(--grey-600); display: block; } /* ── Encart chiffré du rapport (bloc impact-counter) : total + unité « IMPACTS » (blanc) + sous-titre daté (gris) + répartition par type sur UNE ligne (blanc). Encadré 1100px (sort de la colonne 680, centré sur la fenêtre). Les « autres indicateurs » sont rendus HORS de l'encart (cf. .report-indics). ── */ .main__single .page__content .report-stats { width: var(--max-w-content); max-width: 100%; margin-left: auto; margin-right: auto; margin-top: calc(var(--spacing) * 2.5); margin-bottom: calc(var(--spacing) * 2.5); border: 1px solid color-mix(in srgb, var(--color-green) 55%, var(--grey-600)); /* Fond vert : le vert de marque des graphes (--color-green) mixé avec le gris d'encart du thème → vert foncé en sombre (texte blanc lisible), vert clair en clair (texte foncé lisible). Même logique « nuance par opacité » que les charts. */ background-color: color-mix(in srgb, var(--color-green) 40%, var(--grey-900)); padding: calc(var(--padding-inner) * 2.5) calc(var(--padding-inner) * 2); text-align: center; } .main__single .page__content .report-stats__total { font-size: 72px; /* total */ line-height: 1; font-weight: 500; margin: 0; } .main__single .page__content .report-stats__total-label { font-size: var(--big); /* unité « IMPACTS » en blanc */ text-transform: uppercase; font-weight: 500; line-height: 1.05; margin: calc(var(--spacing) * 0.12) 0 0; } /* Sous-titre daté, en gris : « recensés au 31 décembre 2025, dont : ». */ .main__single .page__content .report-stats__caption { font-size: var(--normal); color: var(--color-txt-light); margin: calc(var(--spacing) * 0.35) 0 0; } /* Répartition par type : une seule ligne, 5 entrées réparties, en blanc. */ .main__single .page__content .report-stats__types { list-style: none; display: grid; /* 5 colonnes STRICTEMENT égales (minmax 0 → les mots longs n'élargissent pas leur colonne) : centres exacts à 10/30/50/70/90 % → l'arbre s'aligne. */ grid-template-columns: repeat(5, minmax(0, 1fr)); margin: calc(var(--spacing) * 1.5) 0 0; padding: 0; /* annule le padding-left: 3ch des
      du corps */ } .main__single .page__content .report-stats__types li { text-align: center; margin: 0; padding: 0 6px; } .main__single .page__content .report-stats__num { display: block; font-size: var(--medium); line-height: 1; font-weight: 500; } .main__single .page__content .report-stats__cat { display: block; font-size: var(--small); /* libellé du type, en blanc */ font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; line-height: var(--leading-title); margin-top: calc(var(--spacing) * 0.25); white-space: nowrap; /* 1 ligne, centré sous le chiffre (pas de wrap étroit) */ } /* ── Arbre de ventilation sous la ligne des types : Judiciaires (branche gauche) et Publics (branche droite) → sous-catégories. Connecteurs en angle droit : verticale depuis le type (col. 2 = 30 %, col. 4 = 70 %), bras horizontal vers l'épine de la branche, épine + coudes portés par les
    • . ── */ .main__single .page__content .report-stats__tree { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing); margin-top: calc(var(--spacing) * 0.5); padding-top: 20px; /* place pour les connecteurs du haut */ } .main__single .page__content .report-tree__drop { position: absolute; top: 0; height: 20px; border-left: 1px solid var(--grey-600); } .main__single .page__content .report-tree__drop--left { left: 30%; } .main__single .page__content .report-tree__drop--right { left: 70%; } .main__single .page__content .report-tree__arm { position: absolute; top: 20px; border-top: 1px solid var(--grey-600); } .main__single .page__content .report-tree__arm--left { left: 0; width: 30%; } .main__single .page__content .report-tree__arm--right { right: 0; width: 30%; } .main__single .page__content .report-tree__branch { width: 42%; } .main__single .page__content .report-tree__head { display: none; } /* mobile only */ .main__single .page__content .report-tree { list-style: none; margin: 0; padding: 0; font-size: var(--small); line-height: 2; } .main__single .page__content .report-tree li { position: relative; margin: 0; line-height: 2; } .main__single .page__content .report-tree--left li { padding-left: 16px; text-align: left; } .main__single .page__content .report-tree--right li { padding-right: 16px; text-align: right; } /* Épine verticale (s'arrête au coude pour le dernier item → └). */ .main__single .page__content .report-tree li::before { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--grey-600); } .main__single .page__content .report-tree--left li::before { left: 0; } .main__single .page__content .report-tree--right li::before { right: 0; } .main__single .page__content .report-tree li:last-child::before { bottom: auto; height: 1em; } /* Coude horizontal vers chaque ligne. */ .main__single .page__content .report-tree li::after { content: ""; position: absolute; top: 1em; width: 11px; border-top: 1px solid var(--grey-600); } .main__single .page__content .report-tree--left li::after { left: 0; } .main__single .page__content .report-tree--right li::after { right: 0; } .main__single .page__content .report-tree__num { font-weight: 500; } .main__single .page__content .report-tree__label { color: var(--color-txt-light); } /* Sur fond vert : texte secondaire (sous-titre daté, libellés de l'arbre) et lignes du schéma passés en gris foncé pour rester lisibles sur le vert. */ .main__single .page__content .report-stats__caption, .main__single .page__content .report-stats .report-tree__label { color: #2a2a2a; } .main__single .page__content .report-stats .report-tree__drop, .main__single .page__content .report-stats .report-tree__arm, .main__single .page__content .report-stats .report-tree li::before, .main__single .page__content .report-stats .report-tree li::after { border-color: #2a2a2a; } /* 1re ligne (et son tiret) descendue de 5px sous le bras — sur les 2 branches, pour rester alignées entre elles. L'épine part toujours du bras (top:0). */ .main__single .page__content .report-tree li:first-child { padding-top: 10px; } .main__single .page__content .report-tree li:first-child::after { top: calc(1em + 10px); } /* ── Autres indicateurs — HORS encart, dans la colonne de texte (680), plus petits, en 2 colonnes. Valeur + libellé en blanc, précision en gris. ── */ /* Intitulé centré au-dessus de la grille des indicateurs. Séparateur (filet) au-dessus : le bloc « Autres indicateurs » suit désormais l'accordéon. */ .main__single .page__content .report-indics__head { font-size: var(--normal); text-align: center; border-top: var(--border-light); padding-top: calc(var(--spacing) * 2); margin: calc(var(--spacing) * 1) 0 calc(var(--spacing) * 1.25); } /* Accordéon « Comment Index mesure » suivi du séparateur « Autres indicateurs » : marge basse réduite → espacement accordéon ↔ séparateur resserré. */ .main__single .page__content .accordion:has(+ .report-indics__head) { margin-bottom: calc(var(--spacing) * 1); } /* L'accordéon « Comment Index mesure » suit directement l'encart des chiffres : pas de filet entre les deux (le filet unique est porté par « Autres indicateurs », ci-dessus). */ .main__single .page__content .report-stats + .accordion { border-top: none; margin-top: calc(var(--spacing) * 2); } /* Gap encart → accordéon = exactement spacing×2 (on neutralise la marge basse de l'encart pour éviter le collapse avec sa valeur par défaut, plus grande). */ .main__single .page__content .report-stats:has(+ .accordion) { margin-bottom: 0; } .main__single .page__content .report-indics { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--spacing) * 1.25) var(--spacing); margin: 0 auto calc(var(--spacing) * 2); padding: 0; /* annule le padding-left: 3ch des
        du corps */ text-align: center; } .main__single .page__content .report-indics li { margin: 0; } .main__single .page__content .report-indics__num { display: block; font-size: 28px; line-height: 1; font-weight: 500; } .main__single .page__content .report-indics__label { display: block; font-size: var(--small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; line-height: var(--leading-title); margin-top: calc(var(--spacing) * 0.2); } .main__single .page__content .report-indics__detail { display: block; font-size: var(--small); color: var(--color-txt-light); line-height: var(--leading-normal); margin-top: calc(var(--spacing) * 0.15); } /* Mobile : on annule l'évasion de l'encart (retour dans la colonne) ; les types passent en 2 colonnes (5 entrées illisibles en étroit). */ @media screen and (max-width: 768px) { .main__single .page__content .report-stats { width: auto; max-width: var(--max-w-content); margin-left: auto; margin-right: auto; transform: none; padding: calc(var(--padding-inner) * 1.5); } .main__single .page__content .report-stats__types { grid-template-columns: repeat(2, 1fr); row-gap: calc(var(--spacing) * 0.75); } .main__single .page__content .report-stats__total { font-size: 54px; } /* Arbre : en étroit les centres de colonnes ne tombent plus à 30/70 % → on masque les connecteurs et on empile les branches, chacune coiffée de son type parent (épine à gauche pour les deux). */ .main__single .page__content .report-stats__tree { flex-direction: column; padding-top: 0; gap: calc(var(--spacing) * 1.25); margin-top: calc(var(--spacing) * 1.25); } .main__single .page__content .report-tree__drop, .main__single .page__content .report-tree__arm { display: none; } .main__single .page__content .report-tree__branch { width: 100%; } .main__single .page__content .report-tree__head { display: block; font-size: var(--small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 calc(var(--spacing) * 0.4); } .main__single .page__content .report-tree--right li { padding-right: 0; padding-left: 16px; text-align: left; } .main__single .page__content .report-tree--right li::before { right: auto; left: 0; } .main__single .page__content .report-tree--right li::after { right: auto; left: 0; } } /* ── Étude de cas (rapport) : vidéo preview STICKY à gauche (400) + récit à droite (colonne 680 classique, déportée à droite). Total 400 + 20 + 680. ── */ .report-body .case-study { display: grid; grid-template-columns: 1fr 1fr; /* 2 colonnes symétriques, fluides */ gap: 50px; /* gutter central */ /* le corps du rapport est une colonne de 680 centrée → on « casse » cette contrainte pour s'étaler, centré sur la fenêtre. Largeur = jusqu'à 1330 (= 640 + 50 + 640, soit 640px max par colonne), mais réduite dès que la marge latérale passerait sous 160px (100vw − 2×160). */ width: min(1330px, calc(100vw - 320px)); margin-left: 50%; transform: translateX(-50%); margin-top: calc(var(--spacing) * 2); /* 1ère enquête : écart depuis le texte d'intro */ margin-bottom: calc(var(--spacing) * 6); /* fin de section 2 colonnes */ align-items: start; } /* entre deux enquêtes (sections .case-study voisines) : écart de fin de section */ .report-body .case-study + .case-study { margin-top: calc(var(--spacing) * 6); } .report-body .case-study__media { position: sticky; top: calc(var(--header-h) + 75px); /* sous le header fixe, butée abaissée (+30px) */ align-self: start; } .report-body .case-study__media-link { display: block; color: inherit; text-decoration: none; } /* Cycle vidéo↔cover dossier : les 2 couches sont empilées dans la même cellule de grille (hauteur = couche la plus haute) et glissent horizontalement. overflow:hidden masque la couche hors champ ; au départ la cover est à droite. */ .report-body .case-study__media[data-case-cycle] { display: grid; overflow: hidden; } .report-body .case-study__media[data-case-cycle] > .case-study__layer { grid-area: 1 / 1; /* empilées → même cellule */ transition: transform 0.6s ease; will-change: transform; } .report-body .case-study__media[data-case-cycle] > .case-study__layer--cover { transform: translateX(100%); /* hors champ à droite par défaut (avant JS) */ } .report-body .case-study__video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-900); } /* ── Section « À propos » : vidéo (autoplay muet, son réactivable) sticky à gauche, texte de la section à droite. Réutilise la grille .case-study. ── */ .report-body .case-study.report-about { margin-top: calc(var(--spacing) * 2); /* « spacing×2 » après le titre de section */ width: calc(min(1330px, 100vw - 320px) * 0.9); /* −10 % par rapport aux études de cas */ } .section-video { margin: 0; width: 100%; } /* Cadre = conteneur positionné des overlays (icône Play, bouton son), pour que la légende dessous ne décale pas leur centrage. */ .section-video__frame { position: relative; width: 100%; line-height: 0; } .section-video__el { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; /* source 720×900 — réserve la place avant chargement */ object-fit: cover; background: var(--grey-900); cursor: pointer; /* clic = play/pause */ } /* Légende sous la vidéo : petit, gris, comme les galeries du corps. */ .section-video figcaption { margin-top: calc(var(--spacing) * 0.6); font-size: var(--small); color: var(--color-txt-light); line-height: var(--leading-normal); } /* Icône Play au centre, visible seulement quand la vidéo est en pause. pointer-events:none → le clic passe à la vidéo (= reprise lecture). */ .section-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .section-video__play svg { display: block; margin-left: 2px; } /* triangle optiquement centré */ .section-video.is-paused .section-video__play { opacity: 1; } /* Bouton son, en bas à droite de la vidéo. */ .section-video__sound { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.55); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .section-video__sound:hover { background: rgba(0, 0, 0, 0.82); } .section-video__sound svg { display: block; } /* Icône affichée selon l'état (muet / son actif). */ .section-video.is-muted .ico--on { display: none; } .section-video:not(.is-muted) .ico--muted { display: none; } /* Légende format « caption » : petit, gris, regular (vidéo + cover dossier). */ .report-body .case-study__caption { display: block; margin-top: calc(var(--spacing) * 0.4); font-size: var(--small); font-weight: 400; color: var(--color-txt-light); line-height: var(--leading-normal); text-align: center; /* légende centrée sous le média, comme partout */ } /* Survol : la légende passe en gris clair (--grey-200), comme le hover des liens/noms partout sur le site (ex. grille équipe). */ .report-body .case-study__media-link:hover .case-study__caption { color: var(--grey-200); } /* colonne droite : la vraie colonne 680, sans la largeur/marge auto du .page__content */ .report-body .case-study__body .page__content { max-width: none; margin: 0; padding: 0; } .report-body .case-study__title { margin-top: 0 !important; } /* Aligne le haut du texte (colonne droite) sur le haut du média (colonne gauche) dans les systèmes 2 colonnes : pas de marge haute sur le 1er élément, qu'il soit un titre ou un paragraphe (.section-txt > p inclus). */ .report-body .case-study__body .page__content > :first-child, .report-body .case-study__body .page__content > :first-child > :first-child { margin-top: 0 !important; } /* Encart « Impact en un coup d'œil » (dans les études de cas) : texte d'un cran plus petit (--small), titre h4 inchangé. */ .report-body .case-study .insert p, .report-body .case-study .insert li { font-size: var(--small); } /* Exception : l'encadré au pied de « À propos » reste en taille de texte normale. */ .report-body .case-study.report-about .insert p, .report-body .case-study.report-about .insert li { font-size: var(--normal); } /* ── Édito : titre de section en 1 colonne (largeur de texte), puis bloc 2 colonnes en dessous. La grille .case-study est réutilisée, mais la colonne média porte un slider d'images (et non une vidéo) : pleine largeur de colonne, hauteur selon le ratio d'origine (pas de boîte fixe ni de crop), swiper en autoHeight → il se cale sur l'image active. ── */ /* Le titre vit hors de la grille → écart titre→bloc = spacing*2 ; et fin de bloc réduite à spacing*9 (le *12 de .case-study est un peu trop ici). */ .report-body .case-study.edito { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 6); } /* Sous-sections « slider » (Au-delà des enquêtes) — alignées sur les études de cas : écart chapô→1ère sous-section ×3, puis ×6 entre sous-sections (fin de section 2 colonnes). Le slider garde la hauteur max de l'édito (520px) ; le sticky reste efficace tant que le texte de la sous-section est plus long que le média. */ .report-body .case-study.report-subsection { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 6); } .report-body .report-subsection + .report-subsection { margin-top: calc(var(--spacing) * 6); } /* (Format natif full-width écarté : les portraits montaient à 668–756px, plus haut que le texte des sous-sections courtes → sticky pire. On plafonne les images des sliders à 480px de haut, ce qui garde un média plus court que le texte tout en laissant les images respirer.) */ /* Le swiper en boucle a un min-content très large ; sans min-width:0 la piste grille 1fr enfle au lieu de rester à moitié de la largeur. */ .report-body .edito__media { min-width: 0; } .report-body .edito__media .swiper-slide figure { display: flex; flex-direction: column; width: 100%; /* la figure remplit la colonne (slide centré → sinon shrink-to-fit) */ } .report-body .edito__media .swiper-slide figure picture { display: block; width: 100%; } /* Toutes les images (sliders édito + sous-sections Au-delà) : hauteur ≤ 480px, ratio conservé. Les verticales sont donc bornées par la hauteur (plus étroites que la colonne → centrées) ; les horizontales restent limitées par la largeur. */ .report-body .edito__media .swiper-slide figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; margin-inline: auto; /* centrée quand plus étroite que la colonne */ } /* Article « Refus d'obtempérer » (Le Parisien) : bord blanc 10px tout autour. box-sizing border-box → la bordure est comprise dans max-width/max-height. */ .report-body .edito__media .swiper-slide figure img[src*="gal-stains-condamnation"] { border: 10px solid #fff; box-sizing: border-box; } /* Légende : même rendu que les galeries du corps (petit, gris, écart régulier). */ .report-body .edito__media .swiper-slide figcaption { margin-top: calc(var(--spacing) * 0.6); font-size: var(--small); color: var(--color-txt-light); line-height: var(--leading-normal); } /* Carte auteur en pied de la colonne de texte. */ .report-body .edito .author-card { margin-top: calc(var(--spacing) * 1.5); } @media screen and (max-width: 900px) { .report-body .case-study { grid-template-columns: 1fr; gap: var(--spacing); width: auto; /* on annule l'évasion : retour dans la colonne 680 */ max-width: var(--max-w-content); margin-left: auto; margin-right: auto; transform: none; } /* .report-about a sa propre largeur (spécificité .case-study.report-about) qui échapperait à la règle ci-dessus → on la réinitialise aussi en pile. */ .report-body .case-study.report-about { width: auto; } .report-body .case-study__media { position: static; } /* pas de sticky en pile */ } /* ── Bloc deux colonnes (indicateurs) ── */ .main__single .page__content .two-col { max-width: var(--max-w-content); margin: calc(var(--spacing) * 1) auto; } @media screen and (min-width: 768px) { .main__single .page__content .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--spacing) * 1.5); align-items: start; } } .main__single .page__content .two-col__col > :first-child { margin-top: 0; } /* ── Médias « intermédiaires » (940) dans le rapport : sortent de la colonne 680 pour s'étaler à 940, centrés sur la page (ex. galerie slider de l'édito). ── */ body[data-template=report] .report-body .page__content .media-w-wide { width: 940px; max-width: min(940px, 92vw); margin-left: 50%; transform: translateX(-50%); } /* ── Médias inline (corps de contenu) — FACTORISÉ pour tout le site ── Espacement vertical ×1 (top + bottom), légende façon enquête (gap image→légende = spacing*0.25), et pour les sliders : image bornée (formats libres, sans recadrage), légende dessous, pastilles sous la légende au même écart. */ .main__single .page__content .media, #investigation__content .media { margin-block: calc(var(--spacing) * 2); /* ×2 (60px desktop / 44px mobile), partout — enquêtes comprises */ } .main__single .page__content .media figcaption, .main__single .page__content .media .caption { margin: calc(var(--spacing) * 0.25) 0 0 0; } .main__single .page__content .swiper-slide figure { display: flex; flex-direction: column; } .main__single .page__content .swiper-slide figure picture { display: block; width: 100%; height: clamp(320px, 56vh, 520px); } .main__single .page__content .swiper-slide figure img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* La figure du slider est en flex (image bornée + légende empilées) : pas d'espace de ligne (descente) sous l'image comme pour une image inline standard. On rétablit le même écart image→légende qu'ailleurs (≈ descente + marge ≈ 18px). */ .main__single .page__content .swiper-slide figure figcaption { margin-top: calc(var(--spacing) * 0.6); } .main__single .page__content .swiper .swiper-pagination { margin-top: calc(var(--spacing) * 0.25) !important; } /* ── Graphiques finances (bloc chart) — SVG natif, monochrome vert (teintes par opacité), thème-aware, responsive. ── */ .fin-chart { margin: calc(var(--spacing) * 1.5) auto calc(var(--spacing) * 2); max-width: var(--max-w-content); } /* En colonne média sticky (sous-section Financement) : le graphique remplit la colonne. */ .report-chart-media .fin-chart { max-width: none; margin: 0; } /* ── Tableau des financeurs (composant factorisé : page À propos + rapport) ── Une ligne par financeur : nom · années · origine géographique (FR/EU/US, en gris comme les années). Liste plate, sans accordéon. Thème-aware. */ .funders { margin: calc(var(--spacing) * 1) 0 0; } /* Section Fondations du rapport : ×2 avant le tableau, ×3 après. */ .report-body .funders { margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 3); } /* padding-left:0 !important : annule l'indent 3ch des
          du corps → lignes bord à bord. */ .funders__list { list-style: none; margin: 0; padding: 0 !important; } .funders__item { border-top: 1px solid var(--grey-800); } .funders__item:last-child { border-bottom: 1px solid var(--grey-800); } .funders__head { display: grid; grid-template-columns: 1fr auto auto; /* nom · années · origine (à droite) */ align-items: baseline; column-gap: calc(var(--spacing) * 0.75); /* Même rythme vertical que les lignes du tableau Gouvernance (.dl-table / .dl__group) : font S + interligne 1.4 + padding identiques. Sans le font-size/line-height ici, .funders__head héritait du --normal/--leading-normal imposé aux
        • de .page__content (lignes ~50px au lieu de ~47px). */ font-size: var(--small); line-height: 1.4; padding: calc(var(--spacing) * 0.4 + 2px) 0 calc(var(--spacing) * 0.4 - 2px) 0; } .funders__name { font-weight: 400; font-size: var(--small); } .funders__year { font-size: var(--small); color: var(--color-txt-light); white-space: nowrap; } .funders__origin { font-size: var(--small); color: var(--color-txt-light); white-space: nowrap; text-align: right; } @media screen and (max-width: 560px) { .funders__head { grid-template-columns: 1fr auto; row-gap: 2px; } .funders__year { grid-column: 1 / -1; order: 3; } /* année sur sa propre ligne en mobile */ } .fin-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .fin-chart__grid { stroke: var(--grey-800); stroke-width: 1; } /* lignes de réf. gris foncé, peu visibles (proche du fond) */ .fin-chart__axis { fill: var(--color-txt-light); /* indicateurs (unités, années) : gris, taille des légendes média */ font-size: var(--small); font-family: inherit; } .fin-chart__value { fill: var(--color-txt); font-size: var(--normal); font-weight: 500; } /* données principales : blanc, taille de texte normale */ .fin-chart__area { fill: var(--color-green); opacity: 0.12; } .fin-chart__line { fill: none; stroke: var(--color-green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .fin-chart__dot { fill: var(--color-green); stroke: var(--color-txt); stroke-width: 2; } /* contour blanc (theme-aware) */ .fin-chart__hit { fill: transparent; pointer-events: all; cursor: pointer; } /* zone de survol élargie autour du point */ /* Séries : 1 vert, 3 teintes OPAQUES (mélange avec le fond) → couvrent les lignes de grille. */ .s0 { --series: var(--color-green); } .s1 { --series: color-mix(in srgb, var(--color-green) 60%, var(--color-bg)); } .s2 { --series: color-mix(in srgb, var(--color-green) 34%, var(--color-bg)); } .fin-chart__bar { fill: var(--series); cursor: pointer; } .fin-chart__arc { fill: none; stroke: var(--series); stroke-width: 48; cursor: pointer; } .fin-chart__track { fill: none; stroke: var(--grey-800); stroke-width: 48; } .fin-chart__donut-num { fill: var(--color-txt); font-size: 34px; font-weight: 500; } .fin-chart__donut-lbl { fill: var(--color-txt-light); font-size: 18px; } /* Légende */ .fin-chart__legend { list-style: none; margin: calc(var(--spacing) * 0.75) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 0.4) calc(var(--spacing) * 1.2); justify-content: center; /* !important : prime sur .main__single .page__content ul { font-size: inherit } */ font-size: var(--small) !important; /* aligné sur la taille effective des légendes média */ color: var(--color-txt-light); } .fin-chart__legend li { display: flex; align-items: center; gap: 0.5ch; margin: 0; } /* Légende empilée (barres) : verticale, items alignés à gauche, bloc centré. */ .fin-chart__legend--stacked { flex-direction: column; align-items: flex-start; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; } /* Titre du graphique (sous le graphe) : hérite du style figcaption (taille légende, gris, centré) ; on ajuste juste l'écart. */ .fin-chart__title { margin: calc(var(--spacing) * 0.6) 0 0 !important; } .fin-chart__swatch { display: inline-block; width: 22px; height: 12px; border-radius: 2px; background: var(--series, var(--color-green)); } /* Donut : graphique centré (~450 de diamètre), légende empilée en dessous. */ .fin-chart--donut { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 1); } .fin-chart--donut .fin-chart__donut-svg { width: 100%; max-width: 308px; } /* ~300px de diamètre externe */ .fin-chart--donut .fin-chart__legend { flex-direction: column; align-items: flex-start; margin-top: 0; gap: calc(var(--spacing) * 0.55); text-align: left; } .fin-chart__legend--values li { gap: 0.75ch; } .fin-chart__legend-val { color: var(--color-txt); font-weight: 500; } /* Tooltip partagé (cf. finance-charts.js). */ .fin-chart-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--color-txt); color: var(--color-bg); font-size: var(--small); font-weight: 500; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity 0.12s ease; } .fin-chart-tip.is-visible { opacity: 1; } @media screen and (max-width: 560px) { .fin-chart__value { display: none; } /* trop serré en mobile : valeurs au survol/tap */ } /* Slides vidéo (embeds YouTube/Vimeo dans un slider) : lecteur 16:9 sur toute la largeur de la colonne, fond noir, légende dessous comme les images. Couvre les deux contextes : sliders de sous-sections du rapport (.edito__media) et galeries de corps standard (.page__content). */ .report-body .edito__media .swiper-slide figure .slide-video, .main__single .page__content .swiper-slide figure .slide-video { width: 100%; aspect-ratio: 16 / 9; max-height: 480px; background: #000 center / cover no-repeat; } .report-body .edito__media .swiper-slide figure .slide-video iframe, .main__single .page__content .swiper-slide figure .slide-video iframe { display: block; width: 100%; height: 100%; border: 0; } .report--numbered .report-toc__panel ul { counter-reset: toc2; } .report--numbered .report-toc__row--h2 { counter-increment: toc2; counter-reset: toc3; } .report--numbered .report-toc__row--h3 { counter-increment: toc3; counter-reset: toc4; } .report--numbered .report-toc__row--h4 { counter-increment: toc4; } .report--numbered .report-toc__row--h2 a::before { content: counter(toc2) ". "; } .report--numbered .report-toc__row--h3 a::before { content: counter(toc2) "." counter(toc3) "\00a0"; } .report--numbered .report-toc__row--h4 a::before { content: counter(toc2) "." counter(toc3) "." counter(toc4) "\00a0"; } .report--numbered .report-toc__panel a::before { color: var(--color-txt-light); } /* Sommaire à droite : ticks arrondis ancrés au bord droit (longueur = niveau), + panneau overlay scrollable au survol (réutilise .dropdown__content). */ .report-toc { position: fixed; right: 0; top: 50%; transform: translateY(-50%); /* Calque de nav persistant : au-dessus du footer (z 500) mais sous le voile (#menu-overlay, z-header − 2) et le panneau du menu burger, qui doivent le masquer quand le menu est ouvert. */ z-index: calc(var(--z-header) - 3); padding-right: var(--padding-body); } .report-toc__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; /* tous les ticks alignés sur le bord droit */ gap: 14px; } .report-toc__tick { display: block; height: 2px; border-radius: 2px; /* léger arrondi */ background: var(--color-txt-light); transition: width 0.2s ease, background-color 0.2s ease; } .report-toc__item--h2 .report-toc__tick { width: 22px; } .report-toc__item--h3 .report-toc__tick { width: 14px; } .report-toc__item--h4 .report-toc__tick { width: 9px; } .report-toc__tick.is-active { background: var(--color-txt); } /* Panneau overlay : hérite de .dropdown__content (bg, bordure arrondie, transition opacity/visibility, scroll). On ouvre vers la gauche, au survol. */ .report-toc__panel { left: auto; right: 100%; top: 50%; margin-top: 0; margin-right: 10px; transform: translateY(-50%); } .report-toc:hover .report-toc__panel { opacity: 1; visibility: visible; } .report-toc__panel ul { min-width: 240px; max-width: 320px; max-height: 70vh; } .report-toc__panel a { white-space: normal; /* libellés longs : retour à la ligne */ } .report-toc__row--h3 a { padding-left: calc(var(--padding-inner) * 1.5); } .report-toc__row--h4 a { padding-left: calc(var(--padding-inner) * 2.25); } .report-toc__panel a.is-active { background-color: var(--grey-950); color: var(--color-txt); font-weight: 500; } /* Sous une certaine largeur, pas de place pour le sommaire latéral. */ @media screen and (max-width: 1200px) { .report-toc { display: none; } } /* Bloc « Chiffre-clé » — même typo que le bandeau du décompte des impacts. */ .key-figure { margin: calc(var(--spacing) * 2) 0; text-align: center; } .key-figure__main { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 0.15); } .key-figure__number { font-size: var(--big); font-weight: 500; line-height: 1; } .key-figure__label { font-size: var(--small); text-transform: uppercase; font-weight: 500; color: var(--color-txt-light); } .key-figure__breakdown { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--padding-inner); margin: calc(var(--spacing) * 0.75) 0 0; padding: 0; } .key-figure__breakdown li { display: flex; flex-direction: column; align-items: center; gap: 0.25em; } .key-figure__breakdown li strong { font-size: var(--normal); font-weight: 500; line-height: 1; } .key-figure__breakdown li span { font-size: var(--xsmall); text-transform: uppercase; font-weight: 500; letter-spacing: 0.02em; color: var(--color-txt-light); } /* Index des rapports (/rapports) — liste simple, centrée sur la colonne corps. */ body[data-template=reports] .report-body { max-width: var(--max-w-content); margin-inline: auto; } .reports-index__list { list-style: none; margin: 0; padding: 0; } .reports-index__item { border-top: var(--border-light); } .reports-index__item:last-child { border-bottom: var(--border-light); } .reports-index__item a { display: block; text-decoration: none; padding: calc(var(--spacing) * 1.25) 0; transition: opacity 0.15s ease; } .reports-index__item a:hover { opacity: 0.6; } .reports-index__title { font-size: var(--lead); font-weight: 500; text-transform: uppercase; line-height: var(--leading-title); } .reports-index__chapo { margin-top: calc(var(--spacing) * 0.4); font-size: var(--small); color: var(--color-txt-light); } /* Rapport — blocs Phase 2 : témoignage, contenu référencé, frise. */ .report-body .testimonial { margin: calc(var(--spacing) * 2.5) 0; } .report-body .testimonial__quote { font-size: var(--lead); line-height: var(--leading-normal); font-style: italic; text-wrap: pretty; } .report-body .testimonial__quote p { font-size: inherit; font-style: inherit; } .report-body .testimonial__by { margin-top: calc(var(--spacing) * 0.6); display: flex; flex-direction: column; gap: 0.1em; } .report-body .testimonial__author { font-weight: 500; } .report-body .testimonial__role { font-size: var(--small); color: var(--color-txt-light); } /* Carte référencée : pleine largeur de la colonne du rapport. */ body[data-template=report] .ref-card { margin: calc(var(--spacing) * 1.5) 0; } body[data-template=report] .ref-card .card--block { width: 100%; margin-bottom: 0; } .report-body .ref-inline a { font-weight: 500; text-decoration: none; } .report-body .ref-inline a:hover { color: var(--color-txt-light); } /* Frise des enquêtes (par année). */ /* Frise « Toutes nos enquêtes » — liste dans la colonne centrale 680 (pure) : chaque enquête = vignette cover (70px) + titre + date (à droite, gris). L'année courante s'affiche dans une fine BANDE STICKY sous le header (.frise__year-bar) qui glisse vers l'année suivante au scroll (friseYears.js). Taille --medium (= chiffres de l'encart impact), gris. */ .frise { margin-block: calc(var(--spacing) * 2); } .frise__year-bar { position: sticky; top: var(--header-h); /* collée juste sous le header → comble le gap (pas de scroll visible au-dessus) */ z-index: 2; /* hauteur = écart header→année (40px, conserve la position de l'année) + zone année */ height: calc(40px + var(--medium) + var(--spacing) * 0.9); overflow: hidden; /* masque le chiffre entrant/sortant (slide) */ background: var(--color-bg); /* simple bande noire qui masque la liste défilant dessous (PAS de bordure) */ } .frise__year-now { position: absolute; inset: 0; /* remplit toute la bande */ display: flex; align-items: flex-end; /* année vers le bas → le noir comble le gap au-dessus */ justify-content: flex-start; /* date ferrée à gauche de la colonne */ padding-bottom: calc(var(--spacing) * 0.45); font-size: var(--medium); /* = chiffres de l'encart impact */ font-weight: 500; color: var(--color-txt-light); transition: transform 0.3s ease; } /* Écart entre années différentes (comme avant). */ .frise__group + .frise__group { margin-top: calc(var(--spacing) * 3); } /* spécificité .page__content pour battre `.page__content ul { padding-left: 3ch }` → la liste occupe vraiment toute la largeur de la colonne. */ .main__single .page__content .frise__list { list-style: none; margin: 0; padding: 0; } /* spécificité .page__content pour battre `.page__content ul li { margin: spacing*0.5 0 }` (sinon gap parasite entre les cartes → hover/séparateurs désynchronisés). */ .main__single .page__content .frise__item { margin: 0; } /* Séparateur ET fond du hover portés sur le LIEN → pleine largeur de colonne et pleine hauteur entre deux séparateurs ; contenu ferré aux bords de la colonne. */ .frise__link { display: flex; align-items: flex-start; /* bord haut vignette = bord haut titre */ gap: 1.5ch; padding: calc(var(--spacing) * 0.3) 0; border-top: var(--border-light); text-decoration: none; transition: background-color 0.15s ease; } .frise__list > .frise__item:last-child .frise__link { border-bottom: var(--border-light); } /* Survol : fond gris léger (comme les cartes), occupe toute la ligne. */ .frise__link:hover { background-color: var(--grey-950); } .frise__thumb { flex: 0 0 auto; width: 165px; height: 105px; display: block; background: var(--grey-900); /* placeholder si pas de cover */ } /* Témoignages : vignette un peu plus grande (montrer les visages). */ .frise--flat .frise__thumb { width: 180px; height: 115px; } .frise__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } /* Mobile : vignettes réduites (sinon trop larges en colonne étroite). */ @media (max-width: 768px) { .frise__thumb, .frise--flat .frise__thumb { width: 116px; height: 78px; } } /* Titre + date empilés à droite de la vignette, ferrés à gauche. */ .frise__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .frise__title { font-weight: 400; } /* regular, pas de caps, blanc (couleur héritée) */ .frise__date { font-size: var(--small); color: var(--color-txt-light); margin-top: calc(var(--spacing) * 0.2); } /* Renvoi vers les enquêtes récentes, sous la frise. */ .main__single .page__content .frise__footnote { margin: calc(var(--spacing) * 2) 0 0; font-size: var(--small); color: var(--color-txt-light); } /* ── Pavé « type » secondaire à côté du badge primaire (cartes impacts/labo) ── Reprend le couple .page__type / .page__category de la page de contenu, à l'échelle carte (0.75) : badge plein + pavé contour gris. */ .card--labels { display: flex; align-items: stretch; flex-wrap: wrap; gap: calc(var(--padding-inner) * 0.375); /* gap page halvé (÷2) × échelle carte (0.75) */ margin-top: 2px; margin-bottom: calc(var(--spacing) * 0.5 - 2px); } .card--labels .card--type-badge { margin-top: 0; margin-bottom: 0; } .card--type-label { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 0.75); padding: 0 1ch; padding-top: 3px; border-radius: var(--radius-small); border: var(--border-medium); background-color: transparent; color: var(--color-txt-light); font-size: var(--xsmall); line-height: 1; white-space: nowrap; text-transform: uppercase; font-weight: 500; text-decoration: none; } /* ── Filtres en boutons directs (Tous / Médiatiques / Judiciaires …) ── */ .filter-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .filter-buttons .filter-btn { cursor: pointer; } .filter-buttons .filter-btn.is-selected { background: var(--color-txt, #111); color: var(--color-bg, #fff); border-color: var(--color-txt, #111); } /* Toggle transversal Majeurs <-> Tous : deux boutons joints (switch segmenté). Réutilise .filter-btn / .is-selected. */ .major-toggle { gap: 0; } .major-toggle .filter-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .major-toggle .filter-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } /* Barre de tri de la rubrique Impact (toggle présent) : on réordonne en tri → toggle Majeurs/Tous → filtres Type, et la recherche est poussée à droite. Scopé à .page__sort--toggle pour ne pas affecter Dossiers / Enquêtes. */ @media screen and (min-width: 769px) { .page__sort--toggle { justify-content: flex-start; flex-wrap: wrap; gap: 6px; } .page__sort--toggle .sort { order: 1; } .page__sort--toggle .major-toggle { order: 2; } .page__sort--toggle .page__filters { order: 3; } .page__sort--toggle .page__search { order: 4; margin-left: auto; } /* Anti-superposition quand un sous-type long est sélectionné : on garde les blocs de filtres à leur largeur (pas d'écrasement → pas de débordement interne), on resserre les espacements, et c'est le champ recherche qui rétrécit ; en tout dernier recours il passe à la ligne (flex-wrap). */ .page__sort--toggle .page__filters { flex-shrink: 0; gap: 6px; } .page__sort--toggle .page__search { flex-shrink: 1; min-width: 110px; width: clamp(110px, 18vw, 200px); } } /* Sous-types : chevron ouvre un sous-menu (réutilise .dropdown__content, style Dossier) */ .filter-item { position: relative; display: inline-flex; align-items: stretch; } .filter-chevron { display: inline-flex; align-items: center; justify-content: center; width: 7px; height: 7px; margin-left: 0.7ch; line-height: 0; cursor: pointer; transform: rotate(90deg); /* « > » → bas (fermé) */ transition: transform 0.2s ease; } .filter-chevron svg { width: 100%; height: 100%; fill: currentColor; } .filter-item.is-open .filter-chevron { transform: rotate(-90deg); } /* → haut (ouvert) */ .filter-item.is-open .filter-subs { opacity: 1; visibility: visible; } .filter-subtype-pill { display: inline-flex; align-items: center; gap: 0.5ch; } .filter-subtype-pill__x { opacity: 0.7; } /* ── Carte agrégat médiatique : voile sombre + picto presse (distinction visuelle de la cover enquête). Le voile s'estompe au survol. Pur CSS. ── */ .card--aggregate-media-vertical figure { position: relative; } .card--aggregate-media-vertical figure::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0.28); transition: opacity 0.35s ease; pointer-events: none; } .card--aggregate-media-vertical:hover figure::after { opacity: 0; } .card--media-icon { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } .card--media-icon svg { width: 100%; height: 100%; display: block; } /* Indication enquête/dossier lié : en capitales (comme les titres) */ .card--block .linked { text-transform: uppercase; } /* ── Impact « Secret » : carte publiée mais caviardée ; clic = message ── */ .card--confidential { cursor: pointer; position: relative; } .card--type-label--confidential { color: var(--color-red); border-color: currentColor; } .card--type-label--majeur { color: var(--color-green); border-color: currentColor; } /* ── Étiquette citée inline dans un texte (méthodo, rapport) : reprend le look des puces de carte (.card--type-label) à l'échelle du texte courant. ── */ .label-inline { display: inline-flex; align-items: center; padding: 0.15em 0.6ch 0.05em; border: var(--border-medium); border-radius: var(--radius-small); font-size: 0.82em; line-height: 1; text-transform: uppercase; font-weight: 500; text-decoration: none; white-space: nowrap; vertical-align: baseline; } .label-inline--confidential { color: var(--color-red); border-color: currentColor; } .label-inline--majeur { color: var(--color-green); border-color: currentColor; } /* Vitrine Presse (À propos) : le titre + le texte libre restent dans la colonne ; seule la grille décroche en pleine largeur (centrée 1100 via .impacts-grid). */ .about-press-grid-wrap { /* margin-top 4/3×spacing = 40px : gap voulu entre le texte d'intro Presse et la grille (les marges se replient au max, cf. padding-bottom 0 ci-dessous). */ margin: calc(var(--spacing) * 4 / 3) 0 calc(var(--spacing) * 2.5); } /* Le segment .page__content se ferme juste avant la grille Presse (qui décroche en pleine largeur) : son padding-bottom (90px) creusait un grand vide entre le texte d'intro Presse et la grille. On le neutralise sur cette instance — même logique que le rapport (.report-body .page__content). Gap restant = marge du

          d'intro + marge haute de la grille. */ .about .page__content:has(+ .about-press-grid-wrap) { padding-bottom: 0; } .card--secret-message { display: none; position: absolute; inset: 0; z-index: 200; /* au-dessus du dl-table (z-index 100) pour tout masquer */ flex-direction: column; gap: 0.9rem; align-items: center; justify-content: center; text-align: center; padding: var(--padding-inner, 14px); background: var(--color-bg); /* = fond de page → masque tout le contenu */ } .card--confidential.is-revealed .card--secret-message { display: flex; } .card--secret-text { color: var(--color-red); font-weight: 400; font-size: var(--small); margin: 0; } .card--secret-more { display: inline-flex; align-items: center; gap: 0.4ch; height: var(--h-block); padding: 0 1.25ch; padding-top: 3px; border: 1px solid var(--color-red); border-radius: var(--radius-btn); background-color: transparent; color: var(--color-red); font-size: var(--xsmall); font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap; } .card--secret-more:hover { background-color: var(--grey-950); } /* voile gris, contour rouge conservé (comme .btn--see-more) */ .card--secret-more__arrow { opacity: 0.65; } .title--redacted { display: flex; flex-wrap: wrap; /* les mots passent à la ligne comme un vrai titre */ align-items: center; gap: 0.35em 0; /* caviardage continu : barres jointives, retour ligne par mot */ width: 100%; /* la carte est align-items:start → sans ça le h3 collapse à 0 */ align-self: stretch; } .title--redacted span { display: inline-block; height: 0.9em; background: var(--color-txt); /* dark (défaut) → blanc */ border-radius: 0; /* angles droits → jonctions invisibles entre barres-mots */ } :root[data-theme=light] .title--redacted span { background: #161616; } /* light → noir */ .date-prefix-redacted { display: inline-block; width: 4.5em; height: 0.8em; background: currentColor; /* = couleur du texte de la date (le même gris) */ border-radius: 2px; vertical-align: baseline; margin-right: 0.35em; } .page__category--confidential { color: var(--color-red, #cc2b2b); } /* Étiquette « Majeur » verte (même code couleur que la pastille des cartes). */ .page__category--major { color: var(--color-green); border-color: currentColor; } /* ============================================================================ Bloc « Média + texte (2 colonnes) » — snippet blocks/media-split.php Motif factorisé du rapport (section « À propos »). Colonne média générique (image / vidéo / galerie / avant-après…) + colonne texte. Le bloc gère sa propre largeur (débordement centré), indépendamment du système .media-w-*. ============================================================================ */ .media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin: calc(var(--spacing) * 1.5) 0; } /* Largeurs : le bloc gère lui-même son débordement centré sur la fenêtre (comme la section « À propos » du rapport), pour fonctionner à l'identique dans tous les corps (enquête / impact / veille / labo), quelle que soit la largeur du conteneur (680 ou 1100). */ .media-split--w-text { max-width: var(--max-w-content); margin-inline: auto; } .media-split--w-wide { width: min(var(--max-w-cards), 92vw); margin-left: 50%; transform: translateX(-50%); } .media-split--w-full { width: min(1330px, calc(100vw - 160px)); margin-left: 50%; transform: translateX(-50%); } .media-split__media { position: sticky; top: calc(var(--header-h) + 20px); } /* Le média de la colonne remplit la colonne : on neutralise les largeurs/marges des blocs média imbriqués (.media-w-text/wide/full/split) — sans objet ici. */ .media-split__media .media { max-width: none !important; width: auto !important; margin: 0 !important; transform: none !important; display: block !important; } .media-split__media .media + .media { margin-top: var(--spacing) !important; } .media-split__media > :first-child { margin-top: 0; } .media-split__text > :first-child { margin-top: 0; } /* Séparateurs « — » dans le texte (blocs

          ) : filet court, centré, discret. */ .media-split__text hr { border: 0; width: 40px; height: 1px; background: var(--color-txt-light); margin: calc(var(--spacing) * 1.2) auto; } /* Vidéo à droite : on inverse l'ordre visuel sans toucher au DOM. */ .media-split--right .media-split__media { order: 2; } .media-split--right .media-split__text { order: 1; } @media screen and (max-width: 900px) { .media-split { grid-template-columns: 1fr; gap: var(--spacing); /* En pile : on annule le débordement, retour dans la colonne de texte. */ width: auto; max-width: var(--max-w-content); margin-inline: auto; transform: none; } .media-split__media { position: static; } /* En pile, la vidéo repasse toujours au-dessus du texte. */ .media-split--right .media-split__media { order: 0; } .media-split--right .media-split__text { order: 0; } } /* ===== Mailwall — capture email sur les pages de contenu ===== */ body.mailwall-open { overflow: hidden; } #mailwall { position: fixed; inset: 0; /* Sous le header (--z-header) pour que le logo Index reste lisible. */ z-index: 1900; display: flex; align-items: flex-end; justify-content: center; padding: var(--padding-body); /* Fond assombri, sans flou. */ background: rgba(0, 0, 0, 0.82); } #mailwall[hidden] { display: none; } @media screen and (min-width: 768px) { #mailwall { align-items: center; } } .mailwall__box { width: 100%; max-width: 460px; background: var(--color-bg); border: var(--border-light); border-radius: var(--radius-small); padding: calc(var(--spacing) * 1.2); position: relative; } .mailwall__view[hidden] { display: none; } /* Croix de fermeture (affichée seulement en vue succès, via JS). */ .mailwall__close { position: absolute; top: calc(var(--spacing) * 0.5); right: calc(var(--spacing) * 0.5); padding: 6px; line-height: 0; background: none; border: none; color: var(--color-txt); cursor: pointer; opacity: 0.7; } .mailwall__close:hover { opacity: 1; } .mailwall__close svg { width: 20px; height: 20px; } .mailwall__close svg, .mailwall__close svg * { fill: currentColor; } .mailwall__title { margin: 0 0 var(--spacing); font-size: 1.5rem; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; } .mailwall__text { margin: 0 0 var(--spacing); font-size: var(--small); line-height: 1.55; color: var(--color-txt); } .mailwall__text .mw-hl { color: var(--color-green); } /* Vue formulaire : pied = « Non merci » (gauche) + confidentialité xs (droite). */ /* Pied : sous le champ, ferré à gauche — Politique de confidentialité (S) puis, en dernier, « Non merci… ». */ .mailwall__foot { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacing) * 0.4); margin-top: var(--spacing); } .mailwall__privacy, .mailwall__skip { background: none; border: none; padding: 0; font: inherit; font-size: var(--small); color: var(--color-txt-light); text-decoration: none; cursor: pointer; white-space: nowrap; } .mailwall__privacy:hover, .mailwall__skip:hover { color: var(--color-txt); } /* Vue succès : bloc « en faire plus ». Titre + phrase alignés à gauche ; pastille soutien et réseaux centrés. */ .mailwall__more { margin-top: var(--spacing); padding-top: var(--spacing); border-top: var(--border-light); } .mailwall__more-title { margin: 0 0 calc(var(--spacing) * 0.4); font-size: var(--small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; } .mailwall__support { display: flex; width: fit-content; margin: var(--spacing) auto 0; /* centrée dans la fenêtre */ align-items: center; justify-content: center; height: calc(var(--h-block) * 1.25 - 2px); /* 2px plus basse (par le bas) */ padding: 0 3ch; padding-top: 5px; /* recentre « SOUTENIR INDEX » verticalement */ background: var(--color-green); color: #111111; text-decoration: none; border-radius: calc(var(--h-block) * 0.625); font-size: var(--small); font-weight: 500; text-transform: uppercase; } .mailwall__support:hover { opacity: 0.85; } .mailwall__more .socials { margin-top: var(--spacing); } .mailwall__more .list-socials { display: flex; justify-content: center; padding-left: 0; } /* ===== Encart de soutien (don) — fin de corps d'article, avant les relances. Fond vert translucide (recette des stats du rapport ; optimisé dark mode, light mode à revoir). Calé sur l'encadré « insert » du rapport. NB : font-size en !important car les conteneurs de corps imposent `#investigation__content p / .page__content p { font-size: inherit }` (spécificité id+élément) qui sinon repasse le texte en --normal. ===== */ .support-cta { display: block; max-width: var(--max-w-content); /* Marge haute = 95px (séparation avec la fin du corps). Marge basse = 0 : la section « relances » qui suit apporte déjà sa propre séparation (margin-top 2× + border + padding 1.5×). Évite le doublon. */ margin: 95px auto 0; padding: calc(var(--padding-inner) * 3); border: 1px solid color-mix(in srgb, var(--color-green) 55%, var(--grey-600)); background-color: color-mix(in srgb, var(--color-green) 40%, var(--grey-900)); border-radius: var(--radius-small); } @media screen and (max-width: 768px) { .support-cta { padding: calc(var(--padding-inner) * 1.5); } } .support-cta__title { /* !important : sinon #investigation__content p / .page__content p (id+élément) réimpose margin: 0.75× → ~22px au-dessus du titre = titre « trop bas ». */ margin: 0 0 calc(var(--spacing) * 0.6) !important; font-size: var(--normal) !important; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; } .support-cta__text { margin: 0 0 calc(var(--spacing) * 0.6) !important; font-size: var(--small) !important; line-height: 1.55; } .support-cta__text:last-of-type { margin-bottom: var(--spacing) !important; } .support-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 1.25); padding: 0 3ch; padding-top: 4px; background: var(--color-green); color: var(--color-bg); /* s'adapte : foncé sur vert (dark), clair sur vert (light) */ text-decoration: none; border-radius: calc(var(--h-block) * 0.625); font-size: var(--small); font-weight: 500; text-transform: uppercase; } .support-cta__btn:hover { opacity: 0.85; } /* =========================================================================== Contact — choix en accordéons (style « rapport ») ; le contenu de CHAQUE accordéon (voie sécurisée OU formulaire) est posé sur le même fond sombre. =========================================================================== */ .contact .page__content { max-width: var(--max-w-content); } /* Chapô enchaîné directement avec la liste (on resserre le gros écart header→contenu propre aux pages .main__single). */ .contact .page__header { margin-bottom: 0; } .contact .page__header .page__description { margin-bottom: calc(var(--spacing) * 1.5); } .contact .page__content { margin-top: 0; } /* Sélection par cartes (style « choix d'option ») : liste verticale pleine largeur, une carte par ligne. Au clic, le panneau s'insère juste sous sa carte (rendu à sa suite dans le DOM → il s'intercale entre les cartes). */ .contact-select { display: flex; flex-direction: column; gap: 10px; } .contact-card { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer; font-family: var(--font); color: var(--color-txt); background: transparent; border: var(--border-light); border-radius: var(--radius-btn); padding: 16px 18px; transition: background-color .15s, border-color .15s; } /* Survol ET sélection : fond gris + contour blanc, comme les cartes enquête. */ .contact-card:hover, .contact-card.is-selected { background-color: var(--grey-950); border-color: var(--color-txt); } .contact-card__label { font-size: var(--normal); font-weight: var(--fw-medium); line-height: 1.2; } /* Cartes chiffrées : on réserve la place du badge en haut à droite. */ .contact-card--secure .contact-card__label { padding-right: 90px; } .contact-card__desc { font-size: var(--small); color: var(--color-txt-light); line-height: 1.3; } .contact-card__badge { position: absolute; top: 14px; right: 16px; } /* Panneau ouvert, intercalé sous sa carte. Fond sombre figé (indépendant du thème) car le QR est blanc/transparent → texte clair fixe à l'intérieur. Gris neutre = valeur dark de --grey-950 (même gris que la carte sélectionnée). */ .contact .page__content .contact-panel { background: #222222; color: #ffffff; border-radius: 10px; padding: clamp(18px, 3.5vw, 28px); } .contact .page__content .contact-panel[hidden] { display: none; } .contact .page__content .contact-panel a { color: var(--color-green); } .contact .page__content .contact-panel p, .contact .page__content .contact-panel li { line-height: 1.4; } /* --- Panneau « voie sécurisée » --- */ .contact-secure { display: flex; flex-direction: column; gap: 16px; } .contact-secure p { margin: 0; } .contact-secure__intro { font-size: var(--normal); line-height: 1.4; } .contact .page__content .contact-secure__intro a { color: var(--color-red); text-decoration: underline; } /* 3 colonnes égales : tableau (n° + nom d'utilisateur) sur les 2 premières, QR sur la 3e. */ .contact-secure__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .contact-secure__table { grid-column: span 2; border-collapse: collapse; } .contact-secure__table th, .contact-secure__table td { text-align: left; padding: 2px 0; vertical-align: baseline; font-weight: 400; } .contact-secure__table th { color: rgba(255, 255, 255, 0.6); padding-right: 14px; white-space: nowrap; } .contact-secure__table td { font-size: var(--normal); font-weight: 400; } .contact-secure__qr-wrap { display: flex; justify-content: flex-end; } .contact .page__content .contact-secure .contact-secure__qr { width: 100%; max-width: 180px; height: auto; } /* Liste : simple retour à la ligne, sans marge de paragraphe (on bat la règle globale `.main__single .page__content ul li { margin: spacing*0.5 0 }`). */ .contact-secure__checklist p { margin-bottom: 4px; } .contact-secure__checklist ul { margin: 0; padding-left: 1.2em; } .contact .page__content .contact-secure__checklist li { margin: 0; line-height: 1.4; } .contact-secure__warn { font-size: var(--small); color: rgba(255, 255, 255, 0.6); } .contact-secure__budget { font-size: var(--small); color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 14px; } /* --- Formulaire (envoi serveur) — sur le même fond sombre --- */ .contact-form { display: flex; flex-direction: column; gap: 24px; } .contact-form__warn { font-size: var(--small); color: rgba(255, 255, 255, 0.6); border-left: 3px solid var(--color-red); padding-left: 12px; } .contact .page__content .contact-form__warn a { color: var(--color-red); text-decoration: underline; } .contact-field__req { color: #ffffff; } /* E-mail + Téléphone en demi-champs sur la même ligne. */ .contact-field-row { display: flex; gap: 16px; } .contact-field-row .contact-field { flex: 1; } .contact-form__hint { font-size: var(--small); color: rgba(255, 255, 255, 0.6); } .contact-form__hint a { text-decoration: underline; } .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-field--row { flex-direction: row; gap: 16px; } .contact-field label { display: flex; flex-direction: column; gap: 6px; } .contact-field--row label { flex: 1; } .contact-field__label { font-size: var(--small); color: rgba(255, 255, 255, 0.6); } .contact-field input, .contact-field textarea, .contact-other-input { font-family: var(--font); font-size: var(--normal); line-height: 1.2; color: #ffffff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-btn); padding: 11px 14px 9px; width: 100%; } .contact-field textarea { resize: vertical; padding: 10px 14px; } .contact-field input::-moz-placeholder, .contact-field textarea::-moz-placeholder, .contact-other-input::-moz-placeholder { color: rgba(255, 255, 255, 0.4); } .contact-field input::placeholder, .contact-field textarea::placeholder, .contact-other-input::placeholder { color: rgba(255, 255, 255, 0.4); } .contact-field input:focus, .contact-field textarea:focus, .contact-other-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); } .contact-field__count { align-self: flex-end; font-size: var(--xsmall); color: rgba(255, 255, 255, 0.5); } .contact-field__help { font-size: var(--xsmall); color: rgba(255, 255, 255, 0.45); } /* Champs à choix (case unique, radios, cases multiples). */ .contact-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .contact-fieldset legend { padding: 0; margin-bottom: 2px; } .contact-check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .contact-check input[type="checkbox"], .contact-check input[type="radio"] { accent-color: var(--color-green); width: 16px; height: 16px; flex: none; margin: 0; } .contact-check span { font-size: var(--small); color: #ffffff; } .contact-check--other { gap: 10px; } .contact-check--other span { white-space: nowrap; color: rgba(255, 255, 255, 0.6); } /* Champ « Autre » : plus compact que les inputs pleins, pour s'aligner sur le rythme des lignes de cases à cocher au-dessus. */ .contact-other-input { padding: 6px 12px; font-size: var(--small); } .contact-cta { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 1.25); padding: 0 3ch; padding-top: 4px; font-family: var(--font); font-size: var(--small); font-weight: 500; text-transform: uppercase; color: #111111; background: #ffffff; border: none; border-radius: calc(var(--h-block) * 0.625); cursor: pointer; transition: opacity .15s; } .contact-cta:hover { opacity: .9; } .contact-cta:disabled { opacity: .5; cursor: default; } .contact-form__status { font-size: var(--small); min-height: 1.2em; color: #ffffff; } .contact-form__status.is-success { color: var(--color-green); } .contact-form__status.is-error { color: #ff8a8a; } .contact-noscript { display: flex; flex-direction: column; gap: 8px; margin-top: var(--spacing); } .contact-noscript a { text-decoration: underline; } @media screen and (max-width: 560px) { .contact-secure__cols { grid-template-columns: 1fr; } .contact-secure__right { justify-content: flex-start; } .contact-field--row { flex-direction: column; } } /* ── Étiquettes : centrage vertical du texte en mobile ────────────────────── Sur mobile, le texte en capitales des étiquettes apparaissait légèrement trop bas sur Firefox et Safari (desktop OK partout). Deux causes : 1) .page__type et .page__category n'avaient PAS de line-height propre → ils héritaient de l'interligne du corps (1.55). Ce grand line-height est centré différemment selon le navigateur (répartition du demi-leading), d'où le décalage FF/Safari. On fige line-height:1 (comme les pastilles de carte, .card--type-badge/.card--type-label, déjà déterministes). 2) Le décalage optique en px (padding-top), calé pour le rendu desktop, était un poil trop marqué à l'échelle mobile → on le réduit à 2px, ce qui remonte le texte de ~1px. Concerne aussi les chips de mots-clés / thèmes (.keywords a) : ils ont déjà line-height:1 mais gardaient padding-top:3px → un poil plus bas que les badges. Mobile-only : le desktop (hors de cette media query) reste strictement inchangé. */ @media screen and (max-width: 768px) { .page__type, .page__category, .card--type-badge, .card--type-label, .keywords a { line-height: 1; padding-top: 2px; } } /*# sourceMappingURL=style.css.map */