@charset "UTF-8"; :root { --font: "Executive", Arial, sans-serif; --title: "System", Arial, sans-serif; --fs-xsmall: 10px; --fs-small: 12px; --fs-normal: 16px; --fs-medium: 20px; --fs-big: 30px; --fs-xbig: 38px; --fs-button-bold: 22px; --max-w-content: 640px; --max-w-cards: 940px; --z-header: 2000; --panel-w: 310px; --leading-tight: 1.05; --leading-normal: 1.3; --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-950: #222222; --color-bg: #161616; --color-txt: #ffffff; --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 var(--grey-800); --header-h: 80px; --header-h-shrinked: 50px; --menu-w: 420px; --banner-medium: 220px; --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); } @media screen and (max-width: 768px) { :root { --fs-medium: 20px; --fs-big: 26px; } } @media screen and (max-width: 768px) { :root { --fs-xsmall: 10px; --fs-small: 12px; --fs-normal: 14px; --fs-medium: 18px; --fs-big: 28px; --fs-xbig: 32px; --header-h: 60px; --padding-body: 16px; } } :root[data-theme=light] { --grey-100: #2f2f2f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; --grey-950: #eaeaea; --color-bg: #efefef; --color-txt: #161616; --color-txt-light: var(--grey-400); --color-accent: #ff00ff; --color-accent-50: #ffe9ff; --color-accent-100: #fdd8fd; --dark: white; --color-form: var(--color-bg); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; scroll-behavior: smooth; } a { color: currentColor; } button { background: none; outline: none; border: none; color: var(--color-txt); } iframe { border: none; } body { font-family: var(--font); line-height: var(--leading-normal); font-size: var(--fs-normal); color: var(--color-txt); background-color: var(--color-bg); } 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; } body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.is-hidden main, body.is-hidden footer, body.is-hidden #nav-highlight, body.is-hidden .btn--back-to-top { transition: opacity 0.3s ease-in; opacity: 0.1; } #site-header { z-index: var(--z-header); --gap: 3ch; position: fixed; top: 0; left: 0; width: 100vw; 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: var(--gap); } #site-header a { text-decoration: none; } #site-header a:hover { color: var(--grey-200); } #site-header #site-title { flex-grow: 2; } #site-header #site-title svg { width: 100px; } @media screen and (max-width: 768px) { #site-header #site-title svg { width: 80px; } } #site-header .header__title-page { display: none; flex-grow: 2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: var(--fs-small); line-height: 2; } #site-header ul { list-style-type: none; display: flex; align-items: center; gap: var(--gap); text-transform: uppercase; } #site-header #theme-toggle { width: var(--h-block); height: var(--h-block); display: flex; align-items: center; justify-content: center; } #site-header #theme-toggle svg { width: 18px; position: relative; top: -2px; } #site-header #lang-toggle { display: flex; gap: 1ch; } #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } #site-header #menu-toggle { cursor: pointer; } #site-header #menu-toggle svg { width: 30px; fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } @media screen and (max-width: 1080px) { #nav-highlight { display: none; } } button { cursor: pointer; font-family: var(--font); font-size: var(--fons-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; } .soutenir a { color: var(--color-accent); } .soutenir a:hover { color: var(--color-accent) !important; text-decoration: underline !important; } .btn--small { height: calc(var(--h-block) * 0.75); border: var(--border-light); border-radius: var(--radius-btn); font-size: var(--fs-small); 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--bold, .btn--bold-inline { display: block; height: calc(var(--h-block) * 1); border: var(--border); border-radius: var(--radius-btn); font-size: var(--fs-small); text-transform: uppercase; line-height: 1; overflow: hidden; white-space: nowrap; } .btn--bold svg, .btn--bold-inline svg { width: 18px; height: 18px; position: relative; top: -1px; } .btn--bold a, .btn--bold-inline a { display: flex; align-items: center; justify-content: center; gap: 1ch; width: 100%; height: 100%; padding: 0 2ch; padding-top: 4px; } .btn--bold.no-link, .btn--bold-inline.no-link { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 2ch; 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--bold-inline { background-color: var(--color-bg); } .btn--bold-inline svg { fill: var(--color-txt); } .btn--bold-inline:hover { background-color: var(--grey-950); color: var(--grey-100); border-color: var(--grey-100); } .btn--bold-inline:hover a { background-color: var(--grey-950); color: var(--grey-100); } .btn--bold-inline: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--back-to-top { display: flex; border-color: var(--color-txt); width: -moz-fit-content; width: fit-content; margin: var(--spacing) auto; } @media screen and (max-width: 768px) { .btn--back-to-top { margin-bottom: calc(var(--spacing) * 2); } } .btn--back-to-top .icon { width: 12px; height: 12px; transform: rotate(-90deg); transform-origin: center; position: relative; top: -1px; } .btn--back-to-top .icon svg { width: 12px; height: 12px; } .btn--back-to-top:hover { background-color: var(--grey-950); color: var(--grey-100); border-color: var(--grey-100); } .btn--back-to-top:hover a { background-color: var(--grey-950); color: var(--grey-100); } .btn--back-to-top:hover svg { fill: var(--grey-100); } .tag { height: calc(var(--h-block) * 0.75); border-radius: var(--radius-small); display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5ch; padding-top: 3px; font-size: var(--fs-small); line-height: 1; background-color: var(--color-txt); color: var(--color-bg); overflow: hidden; white-space: nowrap; } .keywords { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75ch; } .keywords a { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--h-block) * 0.75); padding: 0 1ch; padding-top: 2px; border: var(--border-light); border-radius: var(--radius-btn); font-size: var(--fs-small); line-height: 1; white-space: nowrap; text-decoration: none; } .keywords a::before { content: "#"; padding-right: 0.25ch; } .keywords a:hover { border-color: currentColor; background-color: var(--grey-800); } .keywords--small { list-style: none; } .keywords--small li { display: inline; } .keywords--small a { text-decoration: none; } .keywords--small a::before { content: "#"; padding-right: 0.25ch; } .keywords--small a::after { content: " "; } button.sort .arrow { line-height: 0; --size: 12px; 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); } button.sort[data-sort-type=up] .arrow { transform: rotate(-90deg); } .page__sort { margin-bottom: calc(var(--spacing) * 1); display: flex; justify-content: right; grid-gap: var(--padding-inner); width: 100%; max-width: var(--max-w-cards); margin-inline: auto; } .btn--group__mobile { z-index: calc(var(--z-header) - 10); opacity: 0; transition: opacity 0.3s ease-in; 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.is-visible { opacity: 1; } .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; } } #hero { width: 100%; position: relative; left: 0; } #hero figcaption { color: var(--color-txt-light); font-size: var(--fs-small); padding: calc(var(--spacing) * 0.5) var(--padding-body); padding-bottom: 0; } @media screen and (max-width: 560px) { #hero figcaption { font-size: var(--fs-xsmall); } } #hero figure { width: 100%; position: relative; } #hero figure img { width: 100%; aspect-ratio: 2/1; -o-object-fit: cover; object-fit: cover; } #hero .swiper-slide { position: relative; } #hero .swiper-button-prev, #hero .swiper-button-next { --swiper-navigation-sides-offset: 32px; --swiper-navigation-size: 32px; opacity: 0.8; top: calc(450vw - var(--swiper-navigation-size) * 0.5); margin-top: 0; } @media screen and (max-width: 560px) { #hero .swiper-button-prev, #hero .swiper-button-next { --swiper-navigation-sides-offset: 15px; --swiper-navigation-size: 15px; } } #hero .swiper-button-prev svg, #hero .swiper-button-next svg { color: white; } #hero .swiper-pagination { position: static; margin-top: calc(var(--spacing) * 0.5); padding: 0 var(--padding-body); text-align: center; } #hero .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 4px; border-radius: 2px; background: var(--color-txt-light); } #hero .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-txt); opacity: 0.8; } #hero .player-container { width: 100%; position: relative; aspect-ratio: 2/1; } #hero .player-container .extract, #hero .player-container video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: relative; } #hero .player-container .video-full { width: 100%; height: 100%; display: none; } #hero .player-container .video-full iframe { width: 100%; height: 100%; } #hero .player-container #hero-play-video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } #hero .player-container #hero-play-video .btn--bold { display: flex; align-items: center; justify-content: center; gap: 1ch; padding: 0 1ch; opacity: 0.8; } #hero .player-container #hero-play-video .btn--bold:hover { opacity: 1; } #hero .player-container #hero-play-video .text { color: black; line-height: 1; padding-top: 4px; } #hero .player-container #hero-play-video svg { width: 18px; height: 18px; fill: black; opacity: 0.8; } .form__newsletter { --size: 24px; position: relative; display: flex; align-items: center; position: relative; } .form__newsletter input[type=email] { height: calc(var(--h-block) * 1.25); width: 100%; border-radius: calc(var(--h-block) * 0.625); outline: none; border: 1px solid var(--color-txt); padding: 0 2ch; font-family: var(--font); font-size: var(--fs-normal); z-index: 40; padding-top: 4px; background: var(--color-bg); color: var(--color-txt); } .form__newsletter input[type=email]::-moz-placeholder { font-family: var(--font); font-size: var(--fs-normal); color: var(--color-txt); } .form__newsletter input[type=email]::placeholder { font-family: var(--font); font-size: var(--fs-normal); color: var(--color-txt); } .form__newsletter input[type=email]:focus { border: 1px solid var(--color-accent); } .form__newsletter button[type=submit].btn--newletter { position: absolute; right: 4px; z-index: 100; } .form__newsletter button[type=submit].btn--newletter { --size: calc(var(--h-block)*1.25 - 8px); font-family: var(--font); font-size: var(--fs-button-bold); height: var(--size); display: flex; align-items: center; gap: 0.75ch; color: var(--color-accent); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; } .form__newsletter button[type=submit].btn--newletter .icon, .form__newsletter button[type=submit].btn--newletter .txt { z-index: 10; } .form__newsletter button[type=submit].btn--newletter .icon { width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; color: var(--color-bg); text-align: center; } .form__newsletter button[type=submit].btn--newletter .icon svg { fill: var(--color-bg); width: 80%; } .form__newsletter button[type=submit].btn--newletter .txt { position: relative; top: 2px; font-size: var(--fs-normal); display: none; padding-left: 1ch; } .form__newsletter button[type=submit].btn--newletter::after { content: ""; display: block; background-color: var(--color-accent); border-radius: calc(var(--size) / 2); width: var(--size); height: var(--size); position: absolute; right: 0; z-index: 0; transition: width 0.2s; } .form__newsletter button[type=submit].btn--newletter:hover .txt { color: var(--color-bg); display: block; } .form__newsletter button[type=submit].btn--newletter:hover::after { width: 100%; } .search-form { --icon: 40px; display: grid; grid-template-columns: var(--icon) 1fr; } .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 var(--color-txt); padding-left: var(--icon); font-family: var(--font); font-size: var(--fs-normal); color: var(--color-txt); padding-top: 3px; } .search-form input::-moz-placeholder { font-family: var(--font); font-size: var(--fs-normal); color: var(--color-txt); } .search-form input::placeholder { font-family: var(--font); font-size: var(--fs-normal); color: var(--color-txt); } .search-form input:focus { border-color: var(--color-accent); 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; } .list-socials { list-style: none; display: flex; justify-content: space-between; align-items: center; max-width: 400px; } .list-socials a { display: flex; align-items: center; text-decoration: none; } .list-socials .icon { width: 20px; height: 20px; position: relative; top: -2px; } .list-socials svg { display: flex; align-items: center; width: 20px; height: 20px; } .list-socials .text { display: none; } @media screen and (min-width: 768px) { .footer__socials .list-socials { display: block; } .footer__socials .list-socials li { margin-bottom: calc(var(--spacing) * 0.5); -moz-column-break-inside: avoid; break-inside: avoid; } .footer__socials .list-socials a { gap: 1ch; height: calc(var(--spacing) * 1); } .footer__socials .list-socials a::after { content: "↗"; color: var(--grey-300); } .footer__socials .list-socials .text { display: block; line-height: 1; } } .modal--share { width: 240px; padding-bottom: var(--padding-inner); background-color: var(--color-bg); } .modal--share .socials { display: block; list-style: none; } .modal--share .socials li { font-size: var(--fs-normal); 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; } .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(--fs-small); 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(--fs-small); 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; min-width: 180px; margin-top: var(--padding-inner); background-color: var(--color-bg); border: var(--border); border-radius: var(--radius-btn); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 100; } .dropdown__content::before { content: "◀"; transform: rotate(90deg); font-size: 14px; position: absolute; top: -13px; left: 16px; } .dropdown__content ul { list-style: none; margin: 0; padding: var(--padding-inner); } .dropdown__content a, .dropdown__content button { display: block; width: 100%; padding: 0.75em 1ch; font-size: var(--fs-small); text-align: left; text-decoration: none; color: var(--color-txt); background: none; border: none; cursor: pointer; } .dropdown__content a:hover, .dropdown__content button:hover { background-color: var(--grey-800); } .dropdown--align-right .dropdown__content { left: auto; right: 0; } .dropdown--align-right .dropdown__content::before { left: auto; right: 16px; } .dropdown.is-open .dropdown__content { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown--position-mobile .dropdown__content { top: auto; bottom: calc(var(--h-block) + var(--padding-inner) * 2); left: auto; right: 0; margin-top: 0; margin-left: 4px; } .dropdown--position-mobile .dropdown__content::before { font-family: Arial; content: "◀"; transform: rotate(-90deg); font-size: 14px; position: absolute; top: auto; bottom: -13px; left: auto; right: 10%; } .dropdown--position-mobile.is-open .dropdown__content { transform: translateX(0); } @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); } .dropdown .dropdown__content .modal--share { width: 100%; } } @media screen and (max-width: 1280px) { [data-template=investigations] .dropdown .dropdown__content { left: auto; right: 0; } [data-template=investigations] .dropdown .dropdown__content::before { left: auto; right: 16px; } } .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 { 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 .content { display: flex; flex-direction: column; } .card--article .pin { position: absolute; top: calc(var(--padding-inner) * 1.5); left: calc(var(--padding-inner) * 1.5); z-index: 10; width: 24px; height: 24px; border-radius: var(--radius-small); background-color: rgba(255, 255, 255, 0.27); display: flex; align-items: center; justify-content: center; } .card--article .pin svg { width: 16px; fill: var(--color-txt); } .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.5); font-size: var(--fs-medium); font-weight: normal; text-transform: uppercase; text-wrap: balance; } .card--article .title a { text-decoration: none; } .card--article .description { margin-top: calc(var(--spacing) * 0.5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card--article .dl { margin-top: calc(var(--spacing) * 0.5); border-bottom: var(--border-light); } .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 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 .keywords-wrapper { z-index: 3000; margin-top: calc(var(--spacing) * 0.5); } .card--article .keywords { grid-column: 2; } .card--article:hover { border-color: var(--color-txt); background-color: var(--grey-950); } .card--article .link-block { z-index: 2000; } .card--article-small { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; padding-top: calc(var(--spacing) * 0.5); padding-bottom: calc(var(--spacing) * 0.5); border-bottom: var(--border-light); position: relative; border-bottom: var(--border-light); position: relative; } .card--article-small:first-of-type { border-top: var(--border-light); } .card--article-small.has-link { border-bottom: var(--border-light); position: relative; } .card--article-small.has-link:first-of-type { border-top: var(--border-light); } .card--article-small.has-link::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--article-small.has-link:hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--article-small.has-link:hover::before { border-color: var(--color-txt); } .card--article-small figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .card--article-small figure img { 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-small figure { margin-left: 45px; } @media screen and (max-width: 560px) { .card--article-small figure { margin-left: 0px; } } .card--article-small .icon-article { position: absolute; left: 10px; padding-top: calc(var(--spacing) * 0.5); } .card--article-small .icon-article svg { width: 20px; fill: var(--color-txt); } .card--article-small .content { display: flex; flex-direction: column; padding-top: calc(var(--spacing) * 0.25); padding-right: calc(var(--padding-inner) * 3); } .card--article-small .title { font-weight: normal; font-size: var(--fs-medium); margin-bottom: 0.25em; text-wrap: balance; max-width: 42ch; text-transform: uppercase; } .card--article-small .title a { text-decoration: none; } .card--article-small time { flex-grow: 1; color: var(--color-txt-light); } .card--article-small .description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(var(--spacing) * 0.75); } .card--article-small .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--article-small .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--article-small .btn--go-to svg { width: 11px; height: 11px; } } @media screen and (max-width: 560px) { .card--article-small .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--article-small .btn--go-to svg { width: 11px; height: 11px; } } .card--article-small:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--article-small:first-of-type { border-top: var(--border-light); } .card--article-small::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--article-small:hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--article-small:hover::before { border-color: var(--color-txt); } @media screen and (max-width: 1080px) { .card--article-small .title { font-size: var(--fs-normal); margin-bottom: 0; } } @media screen and (max-width: 560px) { .card--article-small .icon-article { display: none; } .card--article-small .description { display: none; } .card--article-small .content { padding: 0; } .card--article-small .title { margin-bottom: 0; } .card--article-small time { font-size: var(--fs-small); margin-top: 0.25em; } .card--article-small .keywords { display: block; line-height: 1.1; margin-top: calc(var(--spacing) * 0.5); padding-right: calc(var(--padding-inner) * 1); } .card--article-small .keywords li, .card--article-small .keywords a { display: inline; border: none; padding: 0px; color: var(--color-txt-light); } } .card--impact { container-type: inline-size; container-name: impact; border: var(--border-light); margin-bottom: calc(var(--spacing) * 1); } .card--impact.has-link { border-bottom: var(--border-light); position: relative; } .card--impact.has-link:first-of-type { border-top: var(--border-light); } .card--impact.has-link::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--impact.has-link:hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--impact.has-link:hover::before { border-color: var(--color-txt); } .card--impact .card--impact__inner { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; padding: calc(var(--padding-inner) * 1.5) var(--padding-inner); position: relative; } .card--impact .card--impact__inner .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--impact .card--impact__inner .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--impact .card--impact__inner .btn--go-to svg { width: 11px; height: 11px; } } @media screen and (max-width: 560px) { .card--impact .card--impact__inner .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--impact .card--impact__inner .btn--go-to svg { width: 11px; height: 11px; } } .card--impact .card--impact__inner:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--impact .card--impact__inner .btn--go-to { top: calc(var(--padding-inner) * 1); bottom: auto; } .card--impact .card--impact__inner .content { grid-column: 2; } .card--impact .card--impact__inner .card--open-graph { grid-row: 1/3; grid-column: 2; z-index: 10; } .card--impact .card--impact__inner .keywords-wrapper { grid-column: 1; grid-row: 2/4; align-self: end; z-index: 10; } @media screen and (max-width: 560px) { .card--impact .card--impact__inner:not([data-impact-type=media]) .content { grid-column: span 2; } } .card--impact .card--impact__inner .tag { width: auto; justify-self: start; position: relative; top: -5px; } .card--impact .card--impact__inner:not([data-impact-type=media]) .content { padding-right: calc(var(--padding-inner) * 2.5); } .card--impact .card--impact__inner .investigations { z-index: 10; grid-column: 2; list-style: none; font-size: var(--fs-small); } .card--impact .card--impact__inner .investigations a { text-decoration: none; color: var(--color-txt-light); } .card--impact .card--impact__inner .investigations .icon { position: relative; top: 2px; } .card--impact .card--impact__inner .investigations .icon svg { width: 14px; height: 14px; fill: var(--color-txt-light); } .card--impact .card--impact__inner .investigations li:hover a { color: var(--color-txt); } .card--impact .card--impact__inner .investigations li:hover .icon svg { fill: var(--color-txt); } .card--impact .card--impact__inner .open-graph__details { grid-column: 2; } .card--impact .card--impact__inner .open-graph__details summary, .card--impact .card--impact__inner .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } .card--impact .card--impact__inner .open-graph__details .arrow-details { line-height: 0; --size: 11px; height: var(--size); width: var(--size); display: inline-flex; align-items: center; justify-content: center; position: relative; top: -2px; } .card--impact .card--impact__inner .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } .card--impact .card--impact__inner .open-graph__details summary:hover { color: var(--color-txt); } .card--impact .card--impact__inner .open-graph__details summary:hover .arrow-details svg { fill: var(--color-txt); } .card--impact .card--impact__inner .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } .card--impact .card--impact__inner .open-graph__details summary { color: var(--color-txt-light); } .card--impact .card--impact__inner .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } @media screen and (max-width: 560px) { .card--impact .card--impact__inner .open-graph__details { grid-column: 1/3; } .card--impact .card--impact__inner .open-graph__details summary { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; grid-row-gap: 0; } .card--impact .card--impact__inner .open-graph__details summary .summary-inner { grid-column: 2; } } .card--impact .card--impact__inner .open-graph__inner { margin-top: calc(var(--spacing) * 0.5); } .card--impact .card--impact__inner .open-graph__inner .card--open-graph { margin-bottom: calc(var(--spacing) * 0.5); } @container impact (width < 460px) { .card--impact__inner { display: block !important; padding-top: var(--padding-inner) !important; padding-bottom: calc(var(--padding-inner) * 0.75) !important; } .card--impact__inner .tag, .card--impact__inner .date { display: inline-flex; margin-right: 2ch; top: 0px !important; } .card--impact__inner .content { margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.25); padding-right: 0 !important; } .card--impact__inner .card--open-graph { margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.25); } .card--impact__inner .investigations { margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25); } .card--impact__inner .keywords-wrapper { margin-top: calc(var(--spacing) * 1); } .card--impact__inner .date, .card--impact__inner .content, .card--impact__inner details { font-size: 14px !important; } .card--impact__inner .btn--go-to { top: calc(var(--padding-inner) * 1.25) !important; bottom: auto; right: calc(var(--padding-inner) * 1.25) !important; } } @media screen and (max-width: 560px) { .card--impact__inner { display: block !important; padding-top: var(--padding-inner) !important; padding-bottom: calc(var(--padding-inner) * 0.75) !important; } .card--impact__inner .tag, .card--impact__inner .date { display: inline-flex; margin-right: 2ch; top: 0px !important; } .card--impact__inner .content { margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.25); padding-right: 0 !important; } .card--impact__inner .card--open-graph { margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.25); } .card--impact__inner .investigations { margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25); } .card--impact__inner .keywords-wrapper { margin-top: calc(var(--spacing) * 1); } .card--impact__inner .date, .card--impact__inner .content, .card--impact__inner details { font-size: 14px !important; } .card--impact__inner .btn--go-to { top: calc(var(--padding-inner) * 1.25) !important; bottom: auto; right: calc(var(--padding-inner) * 1.25) !important; } } .card--impact-small { border-bottom: var(--border-light); display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; padding: var(--padding-inner) 0; position: relative; } .card--impact-small:first-of-type { border-top: var(--border-light); } .card--impact-small.has-link { border-bottom: var(--border-light); position: relative; } .card--impact-small.has-link:first-of-type { border-top: var(--border-light); } .card--impact-small.has-link::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } .card--impact-small.has-link:hover { background-color: var(--grey-950); border-color: var(--color-txt); } .card--impact-small.has-link:hover::before { border-color: var(--color-txt); } .card--impact-small .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--impact-small .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--impact-small .btn--go-to svg { width: 11px; height: 11px; } } @media screen and (max-width: 560px) { .card--impact-small .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--impact-small .btn--go-to svg { width: 11px; height: 11px; } } .card--impact-small:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--impact-small .btn--go-to { top: calc(var(--padding-inner) * 1); bottom: auto; } .card--impact-small .content { grid-column: 2; } .card--impact-small .card--open-graph { grid-column: 2; z-index: 10; } .card--impact-small .keywords { grid-column: 2; z-index: 10; } @media screen and (max-width: 560px) { .card--impact-small .keywords { display: block; line-height: 1.1; } .card--impact-small .keywords li, .card--impact-small .keywords a { display: inline; border: none; padding: 0px; color: var(--color-txt-light); } } @media screen and (max-width: 560px) { .card--impact-small:not([data-impact-type=media]) .content, .card--impact-small .keywords { grid-column: span 2; } } .card--impact-small .tag { width: auto; justify-self: start; position: relative; top: -5px; } .card--impact-small:not([data-impact-type=media]) .content { padding-right: calc(var(--padding-inner) * 2.5); } @media screen and (max-width: 560px) { .card--impact-small:not([data-impact-type=media]) .content { padding-right: 0; } } .card--impact-small .open-graph__details { grid-column: 2; } .card--impact-small .open-graph__details summary, .card--impact-small .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } .card--impact-small .open-graph__details .arrow-details { line-height: 0; --size: 11px; height: var(--size); width: var(--size); display: inline-flex; align-items: center; justify-content: center; position: relative; top: -2px; } .card--impact-small .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } .card--impact-small .open-graph__details summary:hover { color: var(--color-txt); } .card--impact-small .open-graph__details summary:hover .arrow-details svg { fill: var(--color-txt); } .card--impact-small .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } .card--impact-small .open-graph__details summary { color: var(--color-txt-light); } .card--impact-small .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } @media screen and (max-width: 560px) { .card--impact-small .open-graph__details { grid-column: 1/3; } .card--impact-small .open-graph__details summary { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; grid-row-gap: 0; } .card--impact-small .open-graph__details summary .summary-inner { grid-column: 2; } } .card--impact-small .open-graph__inner { margin-top: calc(var(--spacing) * 0.5); } .card--impact-small .open-graph__inner .card--open-graph { margin-bottom: calc(var(--spacing) * 0.5); } .card--folder { position: relative; max-width: var(--max-w-cards); border: var(--border-light); padding: var(--padding-inner); display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; container-type: inline-size; container-name: cardfolder; position: relative; } .card--folder figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .card--folder figure img { 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--folder .content { display: flex; flex-direction: column; } .card--folder .title { flex-grow: 1; font-weight: normal; font-size: var(--fs-medium); margin-bottom: 0.25em; text-wrap: balance; max-width: 42ch; text-transform: uppercase; padding-top: calc(var(--spacing) * 0.25); } .card--folder .title a { text-decoration: none; } @media screen and (max-width: 768px) { .card--folder .title { font-size: var(--fs-normal); } } .card--folder .title .icon { padding-right: 1ch; } .card--folder .title .icon svg { height: 15px; width: 15px; fill: var(--color-txt); } .card--folder .short { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card--folder ul { display: flex; list-style: none; gap: 1ch; color: var(--color-txt-light); padding-top: calc(var(--spacing) * 0.5); } .card--folder ul li + li::before { content: "|"; padding-right: 1ch; } @media screen and (max-width: 768px) { .card--folder ul { font-size: var(--fs-small); } } .card--folder .btn--go-to { position: absolute; right: calc(var(--padding-inner) * 1); bottom: var(--padding-inner); } .card--folder .btn--go-to { position: absolute; right: var(--padding-inner); bottom: calc(var(--padding-inner) - 3px); } .card--folder .btn--go-to svg { width: 15px; height: 15px; fill: var(--color-txt); } @media screen and (max-width: 768px) { .card--folder .btn--go-to svg { width: 11px; height: 11px; } } @media screen and (max-width: 560px) { .card--folder .btn--go-to { right: calc(var(--padding-inner) * 0.5); bottom: calc(var(--padding-inner) * 0.25); } .card--folder .btn--go-to svg { width: 11px; height: 11px; } } .card--folder:hover .btn--go-to { animation: wiggle-left 0.8s ease-in-out; } .card--folder:hover { background-color: var(--grey-950); border-color: var(--color-txt); } [data-template=investigation-summary] .card--folder { border: none; padding-left: 0; padding-right: 0; border-bottom: var(--border-light); } [data-template=investigation-summary] .card--folder:first-of-type { border-top: var(--border-light); } [data-template=investigation-summary] .card--folder.has-link { border-bottom: var(--border-light); position: relative; } [data-template=investigation-summary] .card--folder.has-link:first-of-type { border-top: var(--border-light); } [data-template=investigation-summary] .card--folder.has-link::before { content: ""; width: 100%; border-top: 1px solid transparent; position: absolute; top: -1px; left: 0; } [data-template=investigation-summary] .card--folder.has-link:hover { background-color: var(--grey-950); border-color: var(--color-txt); } [data-template=investigation-summary] .card--folder.has-link:hover::before { border-color: var(--color-txt); } [data-template=investigation-summary] .card--folder figure { margin-left: 45px; } @media screen and (max-width: 560px) { [data-template=investigation-summary] .card--folder figure { margin-left: 0px; } } [data-template=investigation-summary] .card--folder .title .icon { display: none; } [data-template=investigation-summary] .card--folder .icon-folder { position: absolute; left: 10px; padding-top: calc(var(--spacing) * 0.5); } @media screen and (max-width: 560px) { [data-template=investigation-summary] .card--folder .icon-folder { display: none; } } [data-template=investigation-summary] .card--folder .icon-folder svg { width: 20px; fill: var(--color-txt); } @container cardfolder (width < 680px) { figure { aspect-ratio: inherit; width: 100%; height: 100%; } .short { margin-top: calc(var(--spacing) * 0.5); } } @container cardfolder (width < 520px) { figure { aspect-ratio: inherit; width: 100%; height: 100%; } .short, ul { font-size: var(--fs-small); } } .card--open-graph { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; border: 1px solid var(--grey-600); border-radius: var(--radius-small); position: relative; } .card--open-graph figure { grid-column: 1; grid-row: 1; width: 100%; height: 100%; } .card--open-graph figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 560px) { .card--open-graph figure { height: 100%; aspect-ratio: auto; } } .card--open-graph .content { padding: var(--padding-inner); padding-left: 0; grid-column: 2; grid-row: 1; } .card--open-graph .site-name { color: var(--color-txt-light); font-size: var(--fs-small); margin-bottom: 3px; } .card--open-graph .title { font-size: var(--fs-normal); font-weight: normal; line-height: 1.1; padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5em; } .card--open-graph .title a { text-decoration: none; } .card--open-graph .description { font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card--open-graph:hover { border-color: var(--color-txt); background-color: var(--grey-950); } .open-graph__inner { container-type: inline-size; container-name: opengraph; } @container opengraph (width < 500px) { .card--open-graph .content { padding: calc(var(--padding-inner) * 0.5); } .card--open-graph figure { aspect-ratio: inherit; } } .swiper { --slide-padding: 30px; } .swiper .swiper-button-prev, .swiper .swiper-button-next { --swiper-navigation-size: 32px; color: var(--color-txt); background-color: var(--color-bg); height: 100%; width: var(--slide-padding); top: 0px !important; height: calc(100% - var(--spacing) * 1); } .swiper .swiper-button-prev svg, .swiper .swiper-button-next svg { width: 14px; } .swiper .swiper-button-prev.swiper-button-disabled, .swiper .swiper-button-next.swiper-button-disabled { opacity: 1; } .swiper .swiper-button-prev.swiper-button-disabled svg, .swiper .swiper-button-next.swiper-button-disabled svg { opacity: 0.05; } .swiper .swiper-button-prev { left: 0px !important; top: 0px; justify-content: flex-start; } .swiper .swiper-button-next { right: 0px !important; top: 0px; justify-content: flex-end; } .swiper .swiper-slide { padding-left: var(--slide-padding); padding-right: var(--slide-padding); } .swiper .swiper-pagination { position: relative; margin-top: 0px !important; margin-top: calc(var(--spacing) * 0.5) !important; } .swiper .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 4px; border-radius: 2px; background: var(--color-txt-light); } .swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-txt); } @media screen and (max-width: 560px) { .swiper .swiper-button-prev, .swiper .swiper-button-next { display: none; } .swiper .swiper-slide { padding: 0px; } } .slider-before-after { width: 100%; max-width: 700px; z-index: 300; display: grid; place-content: center; position: relative; overflow: hidden; --position: 50%; } .slider-before-after img { display: block; max-width: 100%; } .slider-before-after .image-container { position: relative; width: 100%; } .slider-before-after .slider-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: left; object-position: left; } .slider-before-after .image-before { position: absolute; inset: 0; width: var(--position); } .slider-before-after .slider { position: absolute; inset: 0; cursor: pointer; opacity: 0; /* for Firefox */ width: 100%; height: 100%; } .slider-before-after .slider:focus-visible ~ .slider-button { outline: 5px solid black; outline-offset: 3px; } .slider-before-after .slider-line { position: absolute; inset: 0; width: 0.2rem; height: 100%; background-color: #fff; /* z-index: 10; */ left: var(--position); transform: translateX(-50%); pointer-events: none; } .slider-before-after .slider-button { position: absolute; background-color: #fff; color: black; padding: 0.5rem; border-radius: 100vw; display: grid; place-items: center; top: 50%; left: var(--position); transform: translate(-50%, -50%); pointer-events: none; /* z-index: 100; */ box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5); } #site-header { z-index: var(--z-header); --gap: 3ch; position: fixed; top: 0; left: 0; width: 100vw; 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: var(--gap); } #site-header a { text-decoration: none; } #site-header a:hover { color: var(--grey-200); } #site-header #site-title { flex-grow: 2; } #site-header #site-title svg { width: 100px; } @media screen and (max-width: 768px) { #site-header #site-title svg { width: 80px; } } #site-header .header__title-page { display: none; flex-grow: 2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: var(--fs-small); line-height: 2; } #site-header ul { list-style-type: none; display: flex; align-items: center; gap: var(--gap); text-transform: uppercase; } #site-header #theme-toggle { width: var(--h-block); height: var(--h-block); display: flex; align-items: center; justify-content: center; } #site-header #theme-toggle svg { width: 18px; position: relative; top: -2px; } #site-header #lang-toggle { display: flex; gap: 1ch; } #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } #site-header #menu-toggle { cursor: pointer; } #site-header #menu-toggle svg { width: 30px; fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } @media screen and (max-width: 1080px) { #nav-highlight { display: none; } } #site-menu { position: fixed; width: var(--menu-w); height: calc(100dvh - var(--header-h)); height: calc(100vh - var(--header-h)); top: var(--header-h); right: calc(var(--menu-w) * -1); transition: right 0.3s ease-in; background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); z-index: calc(var(--z-header) - 1); display: flex; flex-direction: column; } @media screen and (max-width: 768px) { #site-menu { transition: right 0.4s ease-in; } } @media screen and (max-width: 560px) { #site-menu { width: 100vw; right: -100vw; } } #site-menu .search-form { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1); } #site-menu nav { flex-grow: 1; } #site-menu nav ul { list-style-type: none; text-transform: uppercase; } #site-menu nav ul li { font-size: var(--fs-normal); } #site-menu nav ul li a { display: block; text-decoration: none; padding: 0.5em 0; } #site-menu nav ul li a:hover { text-decoration: underline; } #site-menu nav ul .highlight { text-transform: uppercase; } body.menu-open #site-menu { right: 0; } body.menu-open #menu-toggle .open { display: none; } body.menu-open #menu-toggle .close { display: block !important; } #site-footer { background-color: var(--dark); padding: calc(var(--padding-body) * 2) var(--padding-body); z-index: 500; } #site-footer .site-footer__container { max-width: var(--max-w-cards); margin: 0 auto; padding: 0 var(--padding-body); } #site-footer .logo { margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 1); } #site-footer .logo svg { width: 100px; } #site-footer p { margin: calc(var(--spacing) * 0.5) 0; } #site-footer p a { text-decoration: none; } #site-footer p a:hover { text-decoration: underline; color: currentColor; } #site-footer .p__small { font-size: var(--fs-xsmall); color: var(--grey-600); } #site-footer .footer__mentions p { font-size: var(--fs-small); color: var(--color-txt); } @media screen and (max-width: 768px) { #site-footer .footer__socials { margin-top: calc(var(--spacing) * 0.75); padding-top: calc(var(--spacing) * 0.25); border-top: var(--border-light); } #site-footer .footer__socials .list-socials { margin-top: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.75); } #site-footer .footer__mentions { border-top: var(--border-light); padding-top: calc(var(--spacing) * 0.25); } #site-footer .footer__mentions p { font-size: var(--fs-small); text-align: center; } } @media screen and (min-width: 768px) { #site-footer .site-footer__container { display: grid; grid-template-columns: 3fr 2fr; -moz-column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--spacing) * 2); } #site-footer .footer__socials .socials { -moz-columns: 2; columns: 2; margin-top: calc(var(--spacing) * 1); } #site-footer .footer__mentions { grid-column: span 2; } #site-footer .footer__mentions p { margin-top: calc(var(--spacing) * 1); } } body { min-height: 100dvh; min-height: 100vh; width: 100vw; 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) * 2); min-height: 100dvh; min-height: 100vh; } body main .page__header, body main .page__content { max-width: var(--max-w-cards); margin-inline: auto; } .page__type { height: calc(var(--h-block) * 0.75); border-radius: var(--radius-small); border: var(--border-medium); display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5ch; padding-top: 3px; font-size: var(--fs-small); line-height: 1; background-color: var(--color-bg); color: var(--color-txt-light); overflow: hidden; white-space: nowrap; text-transform: uppercase; } 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) * 2); } } main .page__header .page__title { max-width: var(--max-w-content); text-transform: uppercase; font-weight: normal; font-size: var(--fs-big); line-height: var(--leading-tight); margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 0.5); text-wrap: balance; } main .page__header .description { font-size: var(--fs-medium); max-width: 58ch; line-height: 1.1; } main .page__header .description-medium { font-size: var(--fs-medium); max-width: 58ch; line-height: 1.1; } .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: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: var(--padding-body); margin-bottom: 10vh; } } @media screen and (max-width: 560px) { .container-cards__investigations { margin-bottom: 10vh; } } .section--home .btn--bold-inline { text-transform: none; margin-top: calc(var(--spacing) * 1.5); } .section--home .btn--bold-inline svg { width: 12px; height: 12px; top: 0px; } .section--home .title-section { font-size: var(--fs-medium); font-weight: normal; text-transform: uppercase; font-size: var(--fs-big); margin-bottom: calc(var(--spacing) * 1); } .section--home .description-section { max-width: 42ch; font-size: var(--fs-medium); line-height: 1.1; } @media screen and (min-width: 1080px) { .section--home { border-bottom: var(--border-light); } .section--home .section--inner { max-width: 1280px; margin: calc(var(--spacing) * 3) auto; display: grid; --gap: calc(var(--padding-body)*2); grid-template-columns: 1fr 640px; grid-gap: var(--gap); } .section--home .col-left { height: 100%; display: flex; flex-direction: column; align-items: flex-start; } .section--home .col-right { width: 100%; height: 100%; } } @media screen and (max-width: 1080px) { .section--home#home__investigations, .section--home#home__hero { border-bottom: var(--border-light); } .section--home .section--inner { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 4); } .section--home .col-left { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: calc(var(--spacing) * 2); } .section--home .col-left .title-section { width: 100%; } } @media screen and (max-width: 560px) { .section--home .section--inner { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 4); margin-bottom: 0px; } .section--home .col-left { margin-bottom: calc(var(--spacing) * 1.5); } .section--home .title-section { margin-bottom: calc(var(--spacing) * 0.25); } .section--home .description-section { max-width: 42ch; font-size: var(--fs-normal); } .section--home .btn--bold-inline { color: var(--color-txt-light); border-color: var(--color-txt-light); height: calc(var(--h-block) * 0.75); margin-top: calc(var(--spacing) * 0.75); } .section--home .btn--bold-inline a { padding: 0 1ch; padding-top: 2px; } .section--home .btn--bold-inline svg { fill: var(--color-txt-light); } } #home__investigations .home-investigations-slider { max-width: 500px; height: auto; } #home__investigations .card--article .time-alone { display: block; } #home__investigations .card--article .dl, #home__investigations .card--article .pin { display: none; } #home__hero { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); } @media screen and (max-width: 560px) { #home__hero { margin-top: calc(var(--spacing) * 2.5); padding-bottom: calc(var(--spacing) * 1.5); margin-bottom: 0px; } } #home__hero .section--inner { display: block; } #home__hero .baseline { font-family: var(--title); font-size: 45px; line-height: 1.1; max-width: 26ch; } @media screen and (max-width: 560px) { #home__hero .baseline { font-size: 34px; } } #home__hero button { margin-top: calc(var(--spacing) * 1); } #home__folders .card--folder { margin-bottom: calc(var(--spacing) * 0.5); } [data-template=investigation-summary] main { position: relative; } [data-template=investigation-summary] main .panel-left { width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5); } @media screen and (max-width: 1340px) { [data-template=investigation-summary] main { margin-left: auto; margin-right: calc(var(--padding-body) * 3); } [data-template=investigation-summary] main .panel-left { width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6); } } @media screen and (max-width: 1220px) { [data-template=investigation-summary] main { margin-left: auto; margin-right: 0px; width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body)); } [data-template=investigation-summary] main .panel-left { width: calc(var(--panel-w) * 0.5); } } [data-template=investigation-summary] main .section__article { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); } [data-template=investigation-summary] main .section__article:target { padding-top: calc(var(--header-h) + var(--spacing) * 1); } [data-template=investigation-summary] main .section__article a:hover { color: var(--grey-200); } [data-template=investigation-summary] main .section__article .section__title { font-weight: normal; text-transform: uppercase; margin-bottom: calc(var(--spacing) * 1); padding-right: 2ch; text-wrap: balance; } [data-template=investigation-summary] main #section__dl { margin-top: calc(var(--spacing) * 1.5); border-bottom: var(--border-light); } [data-template=investigation-summary] main #section__dl .dl__group { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; border-top: var(--border-light); padding: calc(var(--spacing) * 0.5) 0; } [data-template=investigation-summary] main #section__dl dt { color: var(--color-txt-light); padding-right: 1ch; } [data-template=investigation-summary] main #section__dl ul:not(.keywords) { list-style: none; } [data-template=investigation-summary] main #section__dl ul:not(.keywords) li { padding-bottom: 0.2em; } [data-template=investigation-summary] main #section__synthese { max-width: var(--max-w-content); margin-inline: auto; } [data-template=investigation-summary] main #section__synthese p + p { margin-top: 0.5em; } [data-template=investigation-summary] main #section__synthese h4 { margin-top: 2em; margin-bottom: 1em; font-size: var(--fs-normal); font-weight: normal; -webkit-text-decoration: 1px underline var(--color-txt-light); text-decoration: 1px underline var(--color-txt-light); text-underline-offset: 3px; } [data-template=investigation-summary] main .panel-left { height: calc(100vh - var(--header-h)); position: fixed; left: var(--padding-body); padding-bottom: calc(var(--padding-body) * 1); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: calc(var(--z-header) - 1); } [data-template=investigation-summary] main .panel-left #nav--page { padding-bottom: var(--spacing); width: calc(var(--panel-w) * 0.5); } [data-template=investigation-summary] main .panel-left #nav--page ul { list-style: none; } [data-template=investigation-summary] main .panel-left #nav--page ul li { text-align: center; color: var(--color-txt-light); margin-bottom: 4px; font-weight: bold; font-size: var(--fs-small); } [data-template=investigation-summary] main .panel-left #nav--page ul li a { display: block; padding: 5px 1ch; text-decoration: none; } [data-template=investigation-summary] main .panel-left .btn--group { width: calc(var(--panel-w) * 0.5); display: flex; flex-direction: column; gap: calc(var(--spacing) * 0.25); } [data-template=investigation-summary] main .panel-left .btn--group button, [data-template=investigation-summary] main .panel-left .btn--group .dropdown { flex-grow: 1; width: 100%; } @media screen and (max-width: 768px) { [data-template=investigation-summary] main { width: 100%; } [data-template=investigation-summary] main header { margin-bottom: calc(var(--spacing) * 1); } [data-template=investigation-summary] main .section__article { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); } [data-template=investigation-summary] main #hero figcaption { margin: 0 var(--padding-body); } [data-template=investigation-summary] main .panel-left { display: none; } } @media screen and (max-width: 560px) { [data-template=investigation-summary] main #section__dl .dl__group { -moz-column-gap: 1ch; column-gap: 1ch; font-size: var(--fs-small); padding: calc(var(--spacing) * 0.25) 0; } } @media screen and (max-width: 768px) { [data-template=report] #toggle-panel { display: none; } [data-template=report] #report__aside { width: 100vw; position: fixed; top: 0px; height: 100vh; left: -100vw; z-index: calc(var(--z-header) + 10); transition: left 0.4s ease-in; background: var(--color-bg); } [data-template=report] #report__aside .panel__header { margin: 0 var(--padding-body); border-bottom: var(--border-aside); height: var(--header-h); } [data-template=report] #report__aside .panel__content { height: calc(100dvh - var(--header-h)); height: calc(100vh - var(--header-h)); padding-bottom: 30vh; } [data-template=report] #report__aside .btn--group { display: none; } [data-template=report] .panel-open #report__aside { left: 0px; } } .arrow-report { font-size: 14px; color: var(--color-txt-light); width: 20px; height: 20px; } .media-anchor { width: 100%; height: 0px; display: flex; justify-content: flex-end; } .media-anchor .arrow-report { position: relative; left: 50px; top: 8px; } @media screen and (min-width: 768px) { [data-template=report] .report__header { margin-inline: auto; max-width: var(--max-w-cards); margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 4); } [data-template=report] .report__content { display: grid; grid-template-columns: 1fr 1fr; grid-gap: calc(var(--padding-body) * 2.5); z-index: calc(var(--z-header) - 100); } [data-template=report] .report__content .report__txt { grid-row: 1; grid-column: 1; max-width: var(--max-w-content); } [data-template=report] .report__content #report__medias { z-index: calc(var(--z-header) - 100); position: sticky; top: calc(var(--header-h) + var(--padding-body)); align-self: start; grid-row: 1; grid-column: 2; min-height: 100px; } [data-template=report] .report__content #arrow__medias { z-index: calc(var(--z-header) - 100); position: sticky; top: calc(var(--header-h) + var(--padding-body)); align-self: start; grid-row: 1; grid-column: 2; transform: rotate(180deg); transform-origin: center; } [data-template=report] .report__content #arrow__medias span { position: relative; left: 26px; top: calc(var(--spacing) * -5); } [data-template=report] #toggle-panel { position: fixed; top: var(--header-h); left: var(--padding-body); z-index: calc(var(--z-header) + 100); } [data-template=report] #report__aside { position: fixed; top: var(--header-h); left: var(--padding-body); width: var(--panel-w); height: calc(100vh - var(--header-h)); z-index: calc(var(--z-header) + 200); background-color: var(--color-bg); box-shadow: 4px 0px 4px 1px var(--color-bg); } [data-template=report] #report__aside .panel__header { border: var(--border-aside); height: calc(var(--h-block) * 1.5); } [data-template=report] #report__aside .panel__content { height: calc(100% - var(--h-block) * 4.25); padding-bottom: 80px; } [data-template=report] #report__aside { left: calc(var(--panel-w) * -1); transition: left ease-in-out 0.5s; } [data-template=report] #report { padding-left: calc(var(--padding-body) * 2); transition: padding-left ease-in-out 0.5s; } [data-template=report] .panel-open #report__aside { left: var(--padding-body); } [data-template=report] .panel-open #report { padding-left: calc(var(--panel-w) + var(--padding-body) * 1); } } .report__header { display: grid; -moz-column-gap: var(--padding-inner); column-gap: var(--padding-inner); row-gap: calc(var(--spacing) * 1); grid-template-columns: 65% 35%; grid-template-rows: auto auto 1fr; position: relative; } .report__header .report__title-group { grid-row: 1; grid-column: span 2; } .report__header .report__title-group .title { text-transform: uppercase; font-weight: normal; font-size: var(--fs-big); line-height: var(--leading-tight); font-weight: normal; margin-top: calc(var(--spacing) * 1); text-wrap: balance; } .report__header .report__title-group .subtitle { font-size: var(--fs-big); line-height: var(--leading-tight); font-weight: normal; text-wrap: balance; } .report__header figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .report__header figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } .report__header figure { grid-row: 2; grid-column: 2; } .report__header .report__dl { grid-row: 2; grid-column: 1; align-self: end; border-bottom: var(--border-light); align-items: flex-start; } .report__header .report__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; } .report__header .report__dl dt { color: var(--color-txt-light); padding-right: 1ch; } .report__header .btn--group { position: relative; grid-row: 3; grid-column: 1/3; display: flex; justify-content: start; flex-wrap: wrap; align-items: start; gap: calc(var(--spacing) * 0.25); } .report__content .section-content { padding-bottom: calc(var(--spacing) * 3); } .report__content .section-content:target { padding-top: calc(var(--header-h) + var(--spacing) * 2); } @media screen and (max-width: 768px) { .report__content .section-content:target { padding-top: calc(var(--header-h) + var(--spacing) * 0.5); } } .report__content .section-title { font-size: var(--fs-medium); margin-bottom: var(--spacing); font-weight: normal; text-transform: uppercase; text-wrap: balance; max-width: 42ch; } .report__content p { margin: calc(var(--spacing) * 0.5) 0; } .report__content ul { padding-left: 3ch; } .report__content:target { padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important; } .media video { width: 100%; } .media figure { height: auto; } .media .caption { font-size: var(--fs-small); line-height: 1.1; } .media .swiper { width: calc(100% - 60px); max-width: 600px; } #toggle-panel { width: calc(var(--h-block) * 1); padding: 0; } #report__aside { --border-aside: 1px solid var(--color-txt); } #report__aside .panel__header { display: flex; display: flex; align-items: center; justify-content: flex-start; gap: 0.5ch; cursor: pointer; } #report__aside .panel__header .icon { width: calc(var(--h-block) * 1.5); display: flex; align-items: center; justify-content: center; } #report__aside .panel__header svg { width: 16px; fill: var(--color-txt); } #report__aside .panel__header .text { padding-top: 5px; } #report__aside .panel__header .close { position: absolute; right: 0; } #report__aside .panel__header .close svg { width: 10px; fill: var(--color-txt); } #report__aside .panel__header:hover .close svg { fill: var(--grey-200); } #report__aside .panel__content { padding: var(--padding-body); overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; border: var(--border-aside); border-top: none; } #report__aside .panel__content::-webkit-scrollbar { display: none; } #report__aside #toc ul { list-style: none; } #report__aside #toc li { font-size: var(--fs-small); color: var(--color-txt-light); } #report__aside #toc li a { display: block; padding: 5px 1ch; padding-top: 7px; } #report__aside #toc li.selected { background-color: var(--grey-800); color: var(--color-txt); } #report__aside #toc li:hover { background-color: var(--grey-800); } #report__aside #toc .toc-level-1 { margin-bottom: calc(var(--spacing) * 0.5); font-weight: bold; } #report__aside #toc .toc-level-2 { margin-bottom: calc(var(--spacing) * 0.25); padding-left: 4ch; } #report__aside #toc a { text-decoration: none; } #report__aside .btn--group { margin-top: calc(var(--spacing) * 0.5); display: flex; gap: var(--padding-inner); } #report__aside .btn--group button { flex-grow: 1; } .content-folder { max-width: var(--max-w-cards); margin: 0 auto; display: grid; grid-gap: calc(var(--padding-body) * 1.5); position: relative; } .content-folder .container-cards { display: block; align-self: start; } .content-folder #section__investigations article { margin-bottom: calc(var(--spacing) * 1); } .content-folder .container__title { font-weight: normal; font-size: var(--fs-normal); text-transform: uppercase; margin-bottom: calc(var(--spacing) * 0.75); } @media screen and (max-width: 1080px) { .content-folder #section__investigations { display: grid; grid-template-columns: 1fr 1fr; grid-gap: calc(var(--padding-inner) * 1.5) !important; margin-bottom: calc(var(--spacing) * 3); } .content-folder #section__investigations article { margin-bottom: 0px; } .content-folder #section__investigations .container__title { grid-column: span 2; margin-bottom: 0px; } .content-folder section:target { padding-top: calc(var(--header-h) + var(--spacing)); } } @media screen and (min-width: 1080px) { .content-folder { grid-template-columns: 1fr 1fr; } .content-folder #nav-folder { display: none; } .content-folder #section__investigations { display: block; margin-bottom: 0px; } .content-folder #section__investigations article { margin-bottom: calc(var(--spacing) * 1); } } @media screen and (max-width: 768px) { .content-folder { display: block; } .content-folder #section__investigations { display: block; } .content-folder .container__title { margin-bottom: calc(var(--spacing) * 0.5) !important; } } #nav-folder { display: flex; margin-top: calc(var(--spacing) * -1); margin-bottom: calc(var(--spacing) * 2); } #nav-folder svg { width: 10px; height: 10px; transform: rotate(90deg); } @media screen and (min-width: 1080px) { #nav-folder { display: none; } }/*# sourceMappingURL=style.css.map */