@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: 700px; --max-w-container: 1280px; --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; --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: #1f1f1f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; --color-bg: #efefef; --color-txt: #000000; --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); width: 100vw; overflow-x: hidden; } img { max-width: 100%; } .link-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; cursor: pointer; } body, #site-header, #site-footer { transition: background-color 0.3s ease, color 0.3s ease; } @keyframes add-border { from { border-bottom-color: transparent; } to { border-bottom: var(--grey-800); } } #site-header { z-index: 900; --gap: 3ch; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); } #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; } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } #site-header.is-visible { position: fixed; top: 0; } #site-header.is-visible .site-header__inner { border-bottom: var(--border-light); } #site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { display: none; } @media screen and (min-width: 768px) { #site-header.is-visible .site-header__inner #site-title { flex-grow: 0; width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); } } @media screen and (max-width: 1080px) { #site-header.is-visible .site-header__inner #site-title { width: calc(var(--banner-medium) - var(--padding-body)); } } #site-header.is-visible .site-header__inner .header__title-page { flex-grow: 2; } @media screen and (min-width: 768px) { #site-header.is-visible .site-header__inner .header__title-page { display: block; } } #site-header.is-visible ~ main { margin-top: var(--header-h); } @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: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 { display: block; height: calc(var(--h-block) * 0.75); border: var(--border); 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; width: 100%; height: 100%; padding: 0 1ch; padding-top: 2px; } .btn--small.no-link { display: flex; align-items: center; justify-content: center; padding: 0 1ch; padding-top: 2px; } .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-800); color: var(--color-txt); } .btn--bold-inline:hover a { background-color: var(--grey-800); color: var(--color-txt); } .btn--light { border: var(--border-light); } .btn__default { --size: calc(var(--h-block) - 8px); font-size: var(--fs-normal); font-weight: var(--fw-normal); height: var(--size); padding-right: 1.5ch; position: relative; display: flex; align-items: center; gap: 0ch; color: var(--color-accent); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; } .btn__default .icon, .btn__default .txt { z-index: 10; } .btn__default .icon { width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; color: var(--color-bg); text-align: center; } .btn__default .icon svg { fill: var(--color-bg); width: 80%; } .btn__default .txt { font-family: var(--font-title); color: var(--color-accent); font-size: var(--fs-normal); font-weight: var(--fw-bold); padding-left: 1ch; } .btn__default::after { content: ""; display: block; background-color: var(--color-accent); border-radius: calc(var(--size) / 2); width: var(--size); height: var(--size); position: absolute; left: 0; z-index: 0; transition: width 0.2s; } .btn__default:hover .txt { color: var(--color-bg); display: block; } .btn__default:hover::after { width: 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; } .tag-inline { 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; } .keywords { list-style: none; } .keywords li { display: inline-block; padding-right: 0.75ch; } .keywords li a { text-decoration: none; } .keywords li a::before { content: "#"; padding-right: 0.25ch; } .sort { display: flex; align-items: center; gap: 1ch; } .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; } .sort .arrow svg { width: 100%; fill: var(--color-txt); } .sort .icon { --size: 10px; height: var(--size); width: var(--size); position: relative; top: -8px; } .sort .icon svg { width: 100%; fill: var(--color-txt); } .sort[data-sort-type=up] .arrow { transform: rotate(-90deg); } .sort:hover { color: var(--grey-100); } .sort:hover svg { fill: var(--grey-100); } #hero { width: calc(100vw - var(--padding-body) * 2); position: relative; left: 0; } #hero .page-title-small { color: var(--color-txt-light); font-size: var(--fs-small); top: calc(var(--spacing) * 0.25); right: calc(var(--spacing) * 0.25); text-align: right; position: absolute; z-index: 200; background-color: rgba(255, 255, 255, 0.05); padding: 5px 1ch; } @media screen and (max-width: 1080px) { #hero .page-title-small { display: none; } } @media screen and (max-width: 768px) { #hero { width: 100vw; left: calc(var(--padding-body) * -1); } } #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 { border: var(--border); border-radius: var(--radius-btn); background-color: var(--color-bg); padding: var(--padding-inner); padding-top: calc(var(--padding-inner) * 0.5); padding-bottom: calc(var(--padding-inner) * 1.5); } .modal--share .modal-title { display: none; } .modal--share .socials { display: block; list-style: none; } .modal--share .socials li { font-size: var(--fs-normal); padding-bottom: 6px; border-bottom: var(--border-light); padding-top: 6px; } .modal--share .socials li a { display: flex; align-items: center; gap: 1ch; 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 .socials li:hover { color: var(--color-accent); } .modal--share .socials li:hover .icon svg, .modal--share .socials li:hover .icon svg path, .modal--share .socials li:hover .icon svg rect { fill: var(--color-accent) !important; } .modal--share .copy-link { display: flex; gap: 0.5ch; margin-top: calc(var(--spacing) * 0.75); } .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 button { 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; } .modal--share .copy-link button:hover { background-color: var(--color-accent); } .page__title { font-size: var(--fs-big); font-weight: normal; text-transform: uppercase; margin: calc(var(--spacing) * 1.5) auto; text-align: center; max-width: var(--max-w-container); } .page__description { display: none; max-width: var(--max-w-content); margin: calc(var(--spacing) * 2) auto; } .page__description p { font-size: var(--fs-normal); } .card--article { border: var(--border-light); position: relative; display: flex; flex-direction: column; } .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:hover figure img { transform: scale(1.05); } .card--article .content { padding: var(--padding-inner); display: flex; flex-direction: column; flex-grow: 2; } .card--article .title { margin-top: calc(var(--spacing) * 0.5); font-size: var(--fs-medium); font-weight: normal; text-transform: uppercase; } .card--article .title a { text-decoration: none; } .card--article .description { margin-top: calc(var(--spacing) * 1); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card--article .dl { margin-top: calc(var(--spacing) * 0.5); font-size: var(--fs-small); } .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:not(.keywords) { list-style: none; } .card--article .dl ul:not(.keywords) li { padding-bottom: 0.2em; } .card--article .dl .dl__group__keywords { padding-bottom: 0; } .card--article:hover { border-color: var(--color-txt); } .card--article-small { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; margin-bottom: var(--spacing); } .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:hover figure img { transform: scale(1.05); } .card--article-small .content { display: flex; flex-direction: column; padding-top: calc(var(--spacing) * 0.25); } .card--article-small .title { font-weight: normal; font-size: var(--fs-medium); margin-bottom: 0.25em; } .card--article-small .title a { text-decoration: none; } .card--article-small time { flex-grow: 1; color: var(--color-txt-light); } .card--article-small .keywords { margin-top: 1.5em; padding-bottom: calc(var(--spacing) * 0.25); color: var(--color-txt-light); } .card--article-small:hover .title { text-decoration: underline; } @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 .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 { margin-top: 0.5em; padding-bottom: 0; } } .card--impact { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; padding: calc(var(--spacing) * 0.5) 0; border-bottom: var(--border-light); } .card--impact:first-of-type { border-top: var(--border-light); } .card--impact .content { grid-column: 2; } @media screen and (max-width: 560px) { .card--impact:not([data-impact-type=media]) .content { grid-column: span 2; } } .card--impact .tag { width: auto; justify-self: start; position: relative; top: -5px; } .card--impact .content .see-more { color: var(--color-txt-light); text-decoration: none; white-space: nowrap; } .card--impact .content .see-more::after { content: " +"; } .card--impact .open-graph__details { grid-column: span 2; } .card--impact .open-graph__details summary, .card--impact .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } .card--impact .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 .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } .card--impact .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } .card--impact .open-graph__details summary { color: var(--color-txt-light); } .card--impact .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } .card--impact .open-graph__details summary { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; } .card--impact .open-graph__details summary .summary-inner { grid-column: 2; } .card--impact .open-graph__inner { margin-top: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 1); } @media screen and (min-width: 768px) { .card--impact .open-graph__inner { margin-bottom: calc(var(--spacing) * 2); } } .card--impact .open-graph__inner .card--open-graph { margin-bottom: calc(var(--spacing) * 0.5); } .card--open-graph { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; border: var(--border-light); border-radius: var(--radius-small); position: relative; } .card--open-graph figure { grid-column: 1; grid-row: 1; } .card--open-graph figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } .card--open-graph 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--open-graph:hover figure img { transform: scale(1.05); } @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); } .card--open-graph .title { font-size: var(--fs-normal); font-weight: normal; 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 .title { text-decoration: underline; } @keyframes add-border { from { border-bottom-color: transparent; } to { border-bottom: var(--grey-800); } } #site-header { z-index: 900; --gap: 3ch; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); } #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; } #site-header #menu-toggle .close { display: none; } #site-header button:hover svg { fill: var(--grey-200) !important; } #site-header.is-visible { position: fixed; top: 0; } #site-header.is-visible .site-header__inner { border-bottom: var(--border-light); } #site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { display: none; } @media screen and (min-width: 768px) { #site-header.is-visible .site-header__inner #site-title { flex-grow: 0; width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); } } @media screen and (max-width: 1080px) { #site-header.is-visible .site-header__inner #site-title { width: calc(var(--banner-medium) - var(--padding-body)); } } #site-header.is-visible .site-header__inner .header__title-page { flex-grow: 2; } @media screen and (min-width: 768px) { #site-header.is-visible .site-header__inner .header__title-page { display: block; } } #site-header.is-visible ~ main { margin-top: var(--header-h); } @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: 1000; display: flex; flex-direction: column; } @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 { overflow: hidden; } body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight { transition: opacity 0.3s ease-in; opacity: 0.1; } 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 .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 { margin-top: calc(var(--spacing) * 2); } #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: 1fr 1fr; -moz-column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--spacing) * 2); max-width: 1200px; margin: 0 auto; } #site-footer .footer__socials .socials { max-width: 400px; -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; display: flex; flex-direction: column; } body main { flex-grow: 1; padding: 0 var(--padding-body); } @media screen and (min-width: 560px) { [data-template=investigations] main #container-cards { max-width: var(--max-w-container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: calc(var(--padding-body) * 1.5); margin-bottom: 10vh; } } @media screen and (max-width: 560px) { [data-template=investigations] main #container-cards { margin-bottom: 10vh; } [data-template=investigations] main #container-cards .card--article { margin-bottom: calc(var(--spacing) * 1.5); } } [data-template=investigations] main .search-container { max-width: var(--max-w-content); margin: 0 auto; margin-bottom: calc(var(--spacing) * 2); } [data-template=investigations] main .page__sort { max-width: var(--max-w-container); display: flex; justify-content: right; grid-gap: var(--padding-inner); margin: 0 auto; margin-bottom: calc(var(--spacing) * 0.5); } [data-template=investigation-summary] main { position: relative; } [data-template=investigation-summary] main header .page-title { text-transform: uppercase; font-weight: normal; font-size: var(--fs-big); line-height: var(--leading-tight); margin-top: calc(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) * 0.5); } [data-template=investigation-summary] main #nav--page ul { list-style: none; } [data-template=investigation-summary] main #nav--page ul li { text-align: center; color: var(--color-txt-light); } [data-template=investigation-summary] main #nav--page ul li a { display: block; padding: 0.3em 0; text-decoration: none; } [data-template=investigation-summary] main #section__short { font-size: var(--fs-medium); } [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 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; } #share-banner__desktop { display: none; } #share-banner__desktop ~ .modal--share { opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in; } #share-banner__desktop:checked ~ .modal--share { opacity: 1; pointer-events: auto; } @media screen and (max-width: 768px) { [data-template=investigation-summary] main header { padding-top: calc(var(--spacing) * 1); } [data-template=investigation-summary] main header .page-type { font-size: var(--fs-small); } [data-template=investigation-summary] main .section__article { margin: calc(var(--spacing) * 1.5) 0; } [data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien { margin-top: 0px; } [data-template=investigation-summary] main #hero { margin: calc(var(--spacing) * 0.5) 0; } [data-template=investigation-summary] main #hero figcaption { margin: 0 var(--padding-body); } [data-template=investigation-summary] main .modal--share { position: absolute; width: calc(100% - var(--padding-body) * 2); bottom: calc(var(--spacing) * 2); } [data-template=investigation-summary] main #banner--page { padding: calc(var(--spacing) * 0.5) 0; position: fixed; bottom: 0; left: 0; width: 100vw; padding: calc(var(--spacing) * 0.75) var(--padding-body); padding-top: var(--spacing); background-color: var(--color-bg); background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); z-index: 800; } [data-template=investigation-summary] main #banner--page #nav--page { display: none; } [data-template=investigation-summary] main #banner--page .btn--group { display: flex; gap: calc(var(--spacing) * 0.25); position: relative; } [data-template=investigation-summary] main #banner--page .btn--group > button, [data-template=investigation-summary] main #banner--page .btn--group > label { width: 50%; cursor: pointer; } [data-template=investigation-summary] main #banner--page { opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in; } [data-template=investigation-summary] main #banner--page.is-visible { opacity: 1; pointer-events: auto; } } @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 (min-width: 768px) { [data-template=investigation-summary] main #banner--page { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); margin-bottom: calc((100vh - var(--header-h)) * -1); margin-bottom: calc((100dvh - var(--header-h)) * -1); padding: var(--padding-body); padding-left: 0px; padding-bottom: calc(var(--padding-body) * 2); position: sticky; top: var(--header-h); width: var(--banner-medium); display: flex; flex-direction: column; justify-content: space-between; } [data-template=investigation-summary] main #banner--page .btn--group { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 0.25); } [data-template=investigation-summary] main #banner--page .btn--group > button, [data-template=investigation-summary] main #banner--page .btn--group > label { width: 100%; max-width: 160px; cursor: pointer; } [data-template=investigation-summary] main #hero { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 3); } [data-template=investigation-summary] main .section__article { margin-left: var(--banner-medium); margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); } [data-template=investigation-summary] main #section__short { margin-top: var(--padding-body); } [data-template=investigation-summary] main header { max-width: var(--max-w-content); margin-left: var(--banner-medium); margin-top: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * 0.5); } [data-template=investigation-summary] main .section__article .section__title { font-size: var(--fs-medium); margin-bottom: var(--spacing); } [data-template=investigation-summary] main #section__synthese { font-size: var(--fs-medium); } .modal--share { position: absolute; bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25); width: calc(100% - var(--padding-body)); } } @media screen and (min-width: 1080px) { [data-template=investigation-summary] main #banner--page { width: calc((100% - var(--max-w-content)) / 2); } [data-template=investigation-summary] main #hero { margin-top: 0; margin-bottom: calc(var(--spacing) * 3); } [data-template=investigation-summary] main #hero figcaption { max-width: var(--max-w-content); margin: 0 auto; } [data-template=investigation-summary] main .section__article { max-width: var(--max-w-content); margin: calc(var(--spacing) * 3) auto; } } :root { --rapport-w: 280px; } #rapport { margin-bottom: 20vh; padding-left: var(--rapport-w); padding-bottom: 10vh; margin: 0 auto; max-width: calc(var(--max-w-content) + var(--rapport-w)); } #rapport .rapport__header { margin-top: calc(var(--spacing) * 2); max-width: var(--max-w-content); padding-bottom: calc(var(--spacing) * 0.5); } #rapport .rapport__header .rapport__title-group { grid-column: span 2; } #rapport .rapport__header .rapport__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); } #rapport .rapport__header .rapport__title-group .subtitle { font-size: var(--fs-big); line-height: var(--leading-tight); margin-top: calc(var(--spacing) * 0.5); font-weight: normal; } #rapport .rapport__header .rapport__figure { width: 100%; aspect-ratio: 2/1; margin-top: calc(var(--spacing) * 2); } #rapport .rapport__header .rapport__figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #rapport .rapport__header .rapport__dl { align-self: start; font-size: var(--fs-small); border-bottom: var(--border-light); flex-grow: 2; align-items: flex-start; margin-top: calc(var(--spacing) * 0.5); } #rapport .rapport__header .rapport__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; } #rapport .rapport__header .rapport__dl dt { color: var(--color-txt-light); padding-right: 1ch; } #rapport .rapport__header .thumbnail--group { display: flex; gap: calc(var(--spacing) * 0.5); margin-top: calc(var(--spacing) * 1); } #rapport .rapport__header .btn--group { display: flex; gap: calc(var(--spacing) * 0.5); } #rapport .rapport__header .thumbnail { max-width: 260px; display: grid; display: none; grid-template-columns: 2fr 3fr; -moz-column-gap: calc(var(--padding-inner) * 1); column-gap: calc(var(--padding-inner) * 1); padding: calc(var(--padding-inner) * 0.5); border: var(--border-light); } #rapport .rapport__header .thumbnail figure { display: flex; aspect-ratio: 4/3; grid-column: 1; grid-row: 1/3; } #rapport .rapport__header .thumbnail figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #rapport .rapport__header .thumbnail .thumbnail__title { padding-top: calc(var(--padding-inner) * 0.5); } #rapport .rapport__header .thumbnail .thumbnail__title a { text-decoration: none; } #rapport .rapport__header .thumbnail button { align-self: end; display: flex; align-items: end; justify-content: end; padding-right: calc(var(--padding-inner) * 0.5); padding-bottom: calc(var(--padding-inner) * 0.5); } #rapport .rapport__header .thumbnail button svg { width: 15px; height: 15px; fill: var(--color-txt); } #rapport .rapport__content { max-width: var(--max-w-content); margin-top: calc(var(--spacing) * 3); } #rapport .rapport__content .section-content { margin-bottom: calc(var(--spacing) * 3); } #rapport .rapport__content .section-title { font-size: var(--fs-medium); margin-bottom: var(--spacing); font-weight: normal; text-transform: uppercase; } #rapport .rapport__content p { margin: calc(var(--spacing) * 0.5) 0; } #rapport .rapport__content ul { padding-left: 3ch; } #rapport .rapport__content:target { padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important; } #rapport__aside { width: var(--rapport-w); position: fixed; top: calc(var(--header-h) + var(--padding-body)); left: var(--padding-body); height: calc(100vh - var(--header-h) - var(--padding-body) * 4); } #rapport__aside .tabs { display: flex; border: var(--border-light); height: calc(var(--h-block) * 1.25); } #rapport__aside .tabs .tab { display: flex; align-items: center; font-size: var(--fs-small); font-weight: bold; padding-left: 2ch; padding-top: 3px; } #rapport__aside .tabs .tab[for=tab-print] { width: calc(var(--h-block) * 1.5); border-right: var(--border-light); padding-left: 0; justify-content: center; } #rapport__aside .tabs .tab[for=tab-print] .icon svg { width: 18px; fill: var(--color-txt); } #rapport__aside .content-aside { padding: var(--padding-body); height: calc(100% - var(--h-block) * 1.25); overflow: scroll; border: var(--border-light); border-top: none; } #rapport__aside #toc ul { list-style: none; } #rapport__aside #toc li { font-size: var(--fs-small); padding: 5px 1ch; padding-top: 7px; } #rapport__aside #toc li.selected { background-color: var(--grey-800); } #rapport__aside #toc li:hover { background-color: var(--grey-800); } #rapport__aside #toc .toc-level-1 { margin-bottom: calc(var(--spacing) * 0.5); font-weight: bold; } #rapport__aside #toc .toc-level-2 { margin-bottom: calc(var(--spacing) * 0.25); padding-left: 4ch; } #rapport__aside #toc a { text-decoration: none; } #rapport__aside #download-pdf { margin: 0 auto; margin-top: calc(var(--spacing) * 0.5); } #tab-print, #tab-toc { display: none; } #tab-print:checked ~ .content-aside #toc { display: none; } #tab-print:checked ~ .content-aside #print-features { display: block; } #tab-toc:checked ~ .content-aside #toc { display: block; } #tab-toc:checked ~ .content-aside #print-features { display: none; } #rapport { --fig-outside: calc(var(--spacing)*2); } #rapport .container-figure { width: calc(100% + var(--fig-outside) * 2); position: relative; left: calc(var(--fig-outside) * -1); } #rapport .fig-simple { height: calc(100vh - var(--header-h) - var(--spacing) * 2); } #rapport .fig-simple figure { height: 100%; width: 100%; overflow: hidden; } #rapport .fig-simple figure img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }/*# sourceMappingURL=style.css.map */