/* /globals/scss/_admin.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } #wpadminbar { z-index: calc(var(--ultimate-z-index) + 1) !important; } @media (min-width: 1100px) { body.admin-bar[data-navbar=sticking] .navbar { transform: translateY(32px); } } /* end of /globals/scss/_admin.scss */ /* /globals/scss/_couleurs.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } :root { --color-jaune: #ffc313; --color-jaune-rgb: 255, 195, 19; --color-orange: #fbb41a; --color-orange-rgb: 251, 180, 26; --color-orange-fonce: #856010; --color-orange-fonce-rgb: 133, 96, 16; --color-gold: #c79132; --color-gold-rgb: 199, 145, 50; --color-black: #000; --color-black-rgb: 0, 0, 0; --color-darkgray: #292929; --color-darkgray-rgb: 41, 41, 41; --color-white: #fff; --color-white-rgb: 255, 255, 255; --color-white-alt: #f0f0f0; --color-white-alt-rgb: 240, 240, 240; --color-brand: var(--color-gold); --color-dark: #222; --color-dark-rgb: 34, 34, 34; --color-alt-dark: #6a6a6a; --color-alt-dark-rgb: 42, 42, 42; --color-alt-light: #505050; --color-alt-light-rgb: 102, 102, 102; --color-light: var(--color-white-alt); --color-light-rgb: var(--color-white-alt-rgb); --background-brand: var(--color-brand); --background-brand-rgb: var(--color-brand-rgb); --color-for-background-brand: var(--color-white-alt); --color-for-background-brand-rgb: var(--color-white-alt-rgb); --background-dark: var(--color-black); --background-dark-rgb: var(--color-black-rgb); --color-for-background-dark: var(--color-white); --color-for-background-dark-rgb: var(--color-white-rgb); --background-blue: #040e1c; --background-blue-rgb: 4, 14, 28; --color-for-background-blue: var(--color-white-alt); --color-for-background-blue-rgb: var(--color-white-alt-rgb); --background-gray: var(--color-darkgray); --background-gray-rgb: var(--color-darkgray-rgb); --color-for-background-gray: var(--color-white-alt); --color-for-background-gray-rgb: var(--color-white-alt-rgb); --background-light: var(--color-white); --background-light-rgb: var(--color-white-rgb); --color-for-background-light: var(--color-darkgray); --color-for-background-light-rgb: var(--color-darkgray-rgb); --background-primary: var(--color-orange); --background-primary-rgb: var(--color-orange-rgb); --background-primary-darker: var(--color-orange-fonce); --background-primary-darker-rgb: var(--color-orange-fonce-rgb); --color-for-background-primary: var(--color-darkgray); --color-for-background-primary-rgb: var(--color-darkgray-rgb); --link-color: var(--color-darkgray); --text-color: var(--color-darkgray); --color-hover: var(--color-orange); } /* end of /globals/scss/_couleurs.scss */ /* /globals/scss/_pico.scss */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* import de https://tools.sopress.net/pico-minimal/css/pico.min.css? */ /*! * Pico CSS ✨ v2.0.6 (https://picocss.com) * Copyright 2019-2024 - Licensed under MIT */ :root { --pico-font-family-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --pico-font-family-sans-serif: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji); --pico-font-family-monospace: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji); --pico-font-family: var(--pico-font-family-sans-serif); --pico-line-height: 1.5; --pico-font-weight: 400; --pico-font-size: 100%; --pico-text-underline-offset: 0.1rem; --pico-border-radius: 0.25rem; --pico-border-width: 0.0625rem; --pico-outline-width: 0.125rem; --pico-transition: 0.2s ease-in-out; --pico-spacing: 1rem; --pico-typography-spacing-vertical: 1rem; --pico-block-spacing-vertical: var(--pico-spacing); --pico-block-spacing-horizontal: var(--pico-spacing); --pico-grid-column-gap: var(--pico-spacing); --pico-grid-row-gap: var(--pico-spacing); --pico-form-element-spacing-vertical: 0.75rem; --pico-form-element-spacing-horizontal: 1rem; --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); --pico-modal-overlay-backdrop-filter: blur(0.375rem); --pico-nav-element-spacing-vertical: 1rem; --pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-horizontal: 0.5rem; --pico-nav-breadcrumb-divider: ">"; --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E"); } @media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } @media (min-width: 768px) { :root { --pico-font-size: 112.5%; } } @media (min-width: 1024px) { :root { --pico-font-size: 118.75%; } } @media (min-width: 1280px) { :root { --pico-font-size: 125%; } } @media (min-width: 1536px) { :root { --pico-font-size: 131.25%; } } a { --pico-text-decoration: underline; } a.contrast, a.secondary { --pico-text-decoration: underline; } small { --pico-font-size: 0.875em; } h1, h2, h3, h4, h5, h6 { --pico-font-weight: 700; } h1 { --pico-font-size: 2rem; --pico-line-height: 1.125; --pico-typography-spacing-top: 3rem; } h2 { --pico-font-size: 1.75rem; --pico-line-height: 1.15; --pico-typography-spacing-top: 2.625rem; } h3 { --pico-font-size: 1.5rem; --pico-line-height: 1.175; --pico-typography-spacing-top: 2.25rem; } h4 { --pico-font-size: 1.25rem; --pico-line-height: 1.2; --pico-typography-spacing-top: 1.874rem; } h5 { --pico-font-size: 1.125rem; --pico-line-height: 1.225; --pico-typography-spacing-top: 1.6875rem; } h6 { --pico-font-size: 1rem; --pico-line-height: 1.25; --pico-typography-spacing-top: 1.5rem; } tfoot td, tfoot th, thead td, thead th { --pico-font-weight: 600; --pico-border-width: 0.1875rem; } code, kbd, pre, samp { --pico-font-family: var(--pico-font-family-monospace); } kbd { --pico-font-weight: bolder; } :where(select, textarea), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) { --pico-outline-width: 0.0625rem; } [type=search] { --pico-border-radius: 5rem; } [type=checkbox], [type=radio] { --pico-border-width: 0.125rem; } [type=checkbox][role=switch] { --pico-border-width: 0.1875rem; } details.dropdown summary:not([role=button]) { --pico-outline-width: 0.0625rem; } nav details.dropdown summary:focus-visible { --pico-outline-width: 0.125rem; } [role=search] { --pico-border-radius: 5rem; } [role=group]:has(button.secondary:focus, [type=submit].secondary:focus, [type=button].secondary:focus, [role=button].secondary:focus), [role=search]:has(button.secondary:focus, [type=submit].secondary:focus, [type=button].secondary:focus, [role=button].secondary:focus) { --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); } [role=group]:has(button.contrast:focus, [type=submit].contrast:focus, [type=button].contrast:focus, [role=button].contrast:focus), [role=search]:has(button.contrast:focus, [type=submit].contrast:focus, [type=button].contrast:focus, [role=button].contrast:focus) { --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); } [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { --pico-form-element-spacing-horizontal: 2rem; } details summary[role=button]:not(.outline)::after { filter: brightness(0) invert(1); } [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { filter: brightness(0) invert(1); } :root:not([data-theme=dark]), [data-theme=light] { --pico-background-color: #fff; --pico-color: #373c44; --pico-text-selection-color: rgba(2, 154, 232, 0.25); --pico-muted-color: #646b79; --pico-muted-border-color: #e7eaf0; --pico-primary: #0172ad; --pico-primary-background: #0172ad; --pico-primary-border: var(--pico-primary-background); --pico-primary-underline: rgba(1, 114, 173, 0.5); --pico-primary-hover: #015887; --pico-primary-hover-background: #02659a; --pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-focus: rgba(2, 154, 232, 0.5); --pico-primary-inverse: #fff; --pico-secondary: #5d6b89; --pico-secondary-background: #525f7a; --pico-secondary-border: var(--pico-secondary-background); --pico-secondary-underline: rgba(93, 107, 137, 0.5); --pico-secondary-hover: #48536b; --pico-secondary-hover-background: #48536b; --pico-secondary-hover-border: var(--pico-secondary-hover-background); --pico-secondary-hover-underline: var(--pico-secondary-hover); --pico-secondary-focus: rgba(93, 107, 137, 0.25); --pico-secondary-inverse: #fff; --pico-contrast: #181c25; --pico-contrast-background: #181c25; --pico-contrast-border: var(--pico-contrast-background); --pico-contrast-underline: rgba(24, 28, 37, 0.5); --pico-contrast-hover: #000; --pico-contrast-hover-background: #000; --pico-contrast-hover-border: var(--pico-contrast-hover-background); --pico-contrast-hover-underline: var(--pico-secondary-hover); --pico-contrast-focus: rgba(93, 107, 137, 0.25); --pico-contrast-inverse: #fff; --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),0 0 0 0.0625rem rgba(129, 145, 181, 0.015); --pico-h1-color: #2d3138; --pico-h2-color: #373c44; --pico-h3-color: #424751; --pico-h4-color: #4d535e; --pico-h5-color: #5c6370; --pico-h6-color: #646b79; --pico-mark-background-color: #fde7c0; --pico-mark-color: #0f1114; --pico-ins-color: #1d6a54; --pico-del-color: #883935; --pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-footer-color: var(--pico-muted-color); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-table-border-color: var(--pico-muted-border-color); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-code-background-color: #f3f5f7; --pico-code-color: #646b79; --pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-color: var(--pico-background-color); --pico-form-element-background-color: #fbfcfc; --pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-border-color: #cfd5e2; --pico-form-element-color: #23262c; --pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-active-background-color: #fff; --pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-disabled-opacity: 0.5; --pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-switch-background-color: #bfc7d9; --pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-color: #fff; --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-range-border-color: #dfe3eb; --pico-range-active-border-color: #bfc7d9; --pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-color: var(--pico-secondary-background); --pico-range-thumb-active-color: var(--pico-primary-background); --pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-active-summary-color: var(--pico-primary-hover); --pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-open-summary-color: var(--pico-muted-color); --pico-card-background-color: var(--pico-background-color); --pico-card-border-color: var(--pico-muted-border-color); --pico-card-box-shadow: var(--pico-box-shadow); --pico-card-sectioning-background-color: #fbfcfc; --pico-dropdown-background-color: #fff; --pico-dropdown-border-color: #eff1f4; --pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-color: var(--pico-color); --pico-dropdown-hover-background-color: #eff1f4; --pico-loading-spinner-opacity: 0.5; --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-progress-background-color: #dfe3eb; --pico-progress-color: var(--pico-primary-background); --pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-color: var(--pico-contrast-inverse); --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); color-scheme: light; } :root:not([data-theme=dark]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]), [data-theme=light] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) { --pico-form-element-focus-color: var(--pico-primary-focus); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme]) { --pico-background-color: #13171f; --pico-color: #c2c7d0; --pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-muted-color: #7b8495; --pico-muted-border-color: #202632; --pico-primary: #01aaff; --pico-primary-background: #0172ad; --pico-primary-border: var(--pico-primary-background); --pico-primary-underline: rgba(1, 170, 255, 0.5); --pico-primary-hover: #79c0ff; --pico-primary-hover-background: #017fc0; --pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-focus: rgba(1, 170, 255, 0.375); --pico-primary-inverse: #fff; --pico-secondary: #969eaf; --pico-secondary-background: #525f7a; --pico-secondary-border: var(--pico-secondary-background); --pico-secondary-underline: rgba(150, 158, 175, 0.5); --pico-secondary-hover: #b3b9c5; --pico-secondary-hover-background: #5d6b89; --pico-secondary-hover-border: var(--pico-secondary-hover-background); --pico-secondary-hover-underline: var(--pico-secondary-hover); --pico-secondary-focus: rgba(144, 158, 190, 0.25); --pico-secondary-inverse: #fff; --pico-contrast: #dfe3eb; --pico-contrast-background: #eff1f4; --pico-contrast-border: var(--pico-contrast-background); --pico-contrast-underline: rgba(223, 227, 235, 0.5); --pico-contrast-hover: #fff; --pico-contrast-hover-background: #fff; --pico-contrast-hover-border: var(--pico-contrast-hover-background); --pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-inverse: #000; --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-h1-color: #f0f1f3; --pico-h2-color: #e0e3e7; --pico-h3-color: #c2c7d0; --pico-h4-color: #b3b9c5; --pico-h5-color: #a4acba; --pico-h6-color: #8891a4; --pico-mark-background-color: #014063; --pico-mark-color: #fff; --pico-ins-color: #62af9a; --pico-del-color: #ce7e7b; --pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-footer-color: var(--pico-muted-color); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-table-border-color: var(--pico-muted-border-color); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-code-background-color: #1a1f28; --pico-code-color: #8891a4; --pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-color: var(--pico-background-color); --pico-form-element-background-color: #1c212c; --pico-form-element-selected-background-color: #2a3140; --pico-form-element-border-color: #2a3140; --pico-form-element-color: #e0e3e7; --pico-form-element-placeholder-color: #8891a4; --pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-disabled-opacity: 0.5; --pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-switch-background-color: #333c4e; --pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-color: #fff; --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-range-border-color: #202632; --pico-range-active-border-color: #2a3140; --pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-color: var(--pico-secondary-background); --pico-range-thumb-active-color: var(--pico-primary-background); --pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-active-summary-color: var(--pico-primary-hover); --pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-open-summary-color: var(--pico-muted-color); --pico-card-background-color: #181c25; --pico-card-border-color: var(--pico-card-background-color); --pico-card-box-shadow: var(--pico-box-shadow); --pico-card-sectioning-background-color: #1a1f28; --pico-dropdown-background-color: #181c25; --pico-dropdown-border-color: #202632; --pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-color: var(--pico-color); --pico-dropdown-hover-background-color: #202632; --pico-loading-spinner-opacity: 0.5; --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-progress-background-color: #202632; --pico-progress-color: var(--pico-primary-background); --pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-color: var(--pico-contrast-inverse); --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); color-scheme: dark; } :root:not([data-theme]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) { --pico-form-element-focus-color: var(--pico-primary-focus); } :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after { filter: brightness(0); } :root:not([data-theme]) [aria-busy=true]:not(input, select, textarea).contrast:is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { filter: brightness(0); } } [data-theme=dark] { --pico-background-color: #13171f; --pico-color: #c2c7d0; --pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-muted-color: #7b8495; --pico-muted-border-color: #202632; --pico-primary: #01aaff; --pico-primary-background: #0172ad; --pico-primary-border: var(--pico-primary-background); --pico-primary-underline: rgba(1, 170, 255, 0.5); --pico-primary-hover: #79c0ff; --pico-primary-hover-background: #017fc0; --pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-focus: rgba(1, 170, 255, 0.375); --pico-primary-inverse: #fff; --pico-secondary: #969eaf; --pico-secondary-background: #525f7a; --pico-secondary-border: var(--pico-secondary-background); --pico-secondary-underline: rgba(150, 158, 175, 0.5); --pico-secondary-hover: #b3b9c5; --pico-secondary-hover-background: #5d6b89; --pico-secondary-hover-border: var(--pico-secondary-hover-background); --pico-secondary-hover-underline: var(--pico-secondary-hover); --pico-secondary-focus: rgba(144, 158, 190, 0.25); --pico-secondary-inverse: #fff; --pico-contrast: #dfe3eb; --pico-contrast-background: #eff1f4; --pico-contrast-border: var(--pico-contrast-background); --pico-contrast-underline: rgba(223, 227, 235, 0.5); --pico-contrast-hover: #fff; --pico-contrast-hover-background: #fff; --pico-contrast-hover-border: var(--pico-contrast-hover-background); --pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-inverse: #000; --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-h1-color: #f0f1f3; --pico-h2-color: #e0e3e7; --pico-h3-color: #c2c7d0; --pico-h4-color: #b3b9c5; --pico-h5-color: #a4acba; --pico-h6-color: #8891a4; --pico-mark-background-color: #014063; --pico-mark-color: #fff; --pico-ins-color: #62af9a; --pico-del-color: #ce7e7b; --pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-footer-color: var(--pico-muted-color); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-table-border-color: var(--pico-muted-border-color); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-code-background-color: #1a1f28; --pico-code-color: #8891a4; --pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-color: var(--pico-background-color); --pico-form-element-background-color: #1c212c; --pico-form-element-selected-background-color: #2a3140; --pico-form-element-border-color: #2a3140; --pico-form-element-color: #e0e3e7; --pico-form-element-placeholder-color: #8891a4; --pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-disabled-opacity: 0.5; --pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-switch-background-color: #333c4e; --pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-color: #fff; --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-range-border-color: #202632; --pico-range-active-border-color: #2a3140; --pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-color: var(--pico-secondary-background); --pico-range-thumb-active-color: var(--pico-primary-background); --pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-active-summary-color: var(--pico-primary-hover); --pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-open-summary-color: var(--pico-muted-color); --pico-card-background-color: #181c25; --pico-card-border-color: var(--pico-card-background-color); --pico-card-box-shadow: var(--pico-box-shadow); --pico-card-sectioning-background-color: #1a1f28; --pico-dropdown-background-color: #181c25; --pico-dropdown-border-color: #202632; --pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-color: var(--pico-color); --pico-dropdown-hover-background-color: #202632; --pico-loading-spinner-opacity: 0.5; --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-progress-background-color: #202632; --pico-progress-color: var(--pico-primary-background); --pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-color: var(--pico-contrast-inverse); --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); color-scheme: dark; } [data-theme=dark] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) { --pico-form-element-focus-color: var(--pico-primary-focus); } [data-theme=dark] details summary[role=button].contrast:not(.outline)::after { filter: brightness(0); } [data-theme=dark] [aria-busy=true]:not(input, select, textarea).contrast:is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { filter: brightness(0); } [type=checkbox], [type=radio], [type=range], progress { accent-color: var(--pico-primary); } .grid { grid-column-gap: var(--pico-grid-column-gap); grid-row-gap: var(--pico-grid-row-gap); display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); } } .grid > * { min-width: 0; } button { margin: 0; overflow: visible; font-family: inherit; text-transform: none; } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; } [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { --pico-background-color: var(--pico-primary-background); --pico-border-color: var(--pico-primary-border); --pico-color: var(--pico-primary-inverse); --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); border: var(--pico-border-width) solid var(--pico-border-color); border-radius: var(--pico-border-radius); outline: 0; background-color: var(--pico-background-color); box-shadow: var(--pico-box-shadow); color: var(--pico-color); font-weight: var(--pico-font-weight); font-size: 1rem; line-height: var(--pico-line-height); text-align: center; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } [role=button]:is(:hover, :active, :focus), [role=button]:is([aria-current]:not([aria-current=false])), [type=button]:is(:hover, :active, :focus), [type=button]:is([aria-current]:not([aria-current=false])), [type=file]::file-selector-button:is(:hover, :active, :focus), [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])), [type=reset]:is(:hover, :active, :focus), [type=reset]:is([aria-current]:not([aria-current=false])), [type=submit]:is(:hover, :active, :focus), [type=submit]:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus), button:is([aria-current]:not([aria-current=false])) { --pico-background-color: var(--pico-primary-hover-background); --pico-border-color: var(--pico-primary-hover-border); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-color: var(--pico-primary-inverse); } [role=button]:focus, [role=button]:is([aria-current]:not([aria-current=false])):focus, [type=button]:focus, [type=button]:is([aria-current]:not([aria-current=false])):focus, [type=file]::file-selector-button:focus, [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus, [type=reset]:focus, [type=reset]:is([aria-current]:not([aria-current=false])):focus, [type=submit]:focus, [type=submit]:is([aria-current]:not([aria-current=false])):focus, button:focus, button:is([aria-current]:not([aria-current=false])):focus { --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-primary-focus); } [type=button], [type=reset], [type=submit] { margin-bottom: var(--pico-spacing); } :is(button, [type=submit], [type=button], [role=button]).secondary, [type=file]::file-selector-button, [type=reset] { --pico-background-color: var(--pico-secondary-background); --pico-border-color: var(--pico-secondary-border); --pico-color: var(--pico-secondary-inverse); cursor: pointer; } :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-background-color: var(--pico-secondary-hover-background); --pico-border-color: var(--pico-secondary-hover-border); --pico-color: var(--pico-secondary-inverse); } :is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus, [type=file]::file-selector-button:focus, [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus, [type=reset]:focus, [type=reset]:is([aria-current]:not([aria-current=false])):focus { --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); } :is(button, [type=submit], [type=button], [role=button]).contrast { --pico-background-color: var(--pico-contrast-background); --pico-border-color: var(--pico-contrast-border); --pico-color: var(--pico-contrast-inverse); } :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-background-color: var(--pico-contrast-hover-background); --pico-border-color: var(--pico-contrast-hover-border); --pico-color: var(--pico-contrast-inverse); } :is(button, [type=submit], [type=button], [role=button]).contrast:focus, :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus { --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); } :is(button, [type=submit], [type=button], [role=button]).outline, [type=reset].outline { --pico-background-color: transparent; --pico-color: var(--pico-primary); --pico-border-color: var(--pico-primary); } :is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-background-color: transparent; --pico-color: var(--pico-primary-hover); --pico-border-color: var(--pico-primary-hover); } :is(button, [type=submit], [type=button], [role=button]).outline.secondary, [type=reset].outline { --pico-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary); } :is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-hover); } :is(button, [type=submit], [type=button], [role=button]).outline.contrast { --pico-color: var(--pico-contrast); --pico-border-color: var(--pico-contrast); } :is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-color: var(--pico-contrast-hover); --pico-border-color: var(--pico-contrast-hover); } :where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled], :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) { opacity: 0.5; pointer-events: none; } input, optgroup, select, textarea { margin: 0; font-size: 1rem; line-height: var(--pico-line-height); font-family: inherit; letter-spacing: inherit; } input { overflow: visible; } select { text-transform: none; } legend { max-width: 100%; padding: 0; color: inherit; white-space: normal; } textarea { overflow: auto; } [type=checkbox], [type=radio] { padding: 0; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } ::-moz-focus-inner { padding: 0; border-style: none; } :-moz-focusring { outline: 0; } :-moz-ui-invalid { box-shadow: none; } ::-ms-expand { display: none; } [type=file], [type=range] { padding: 0; border-width: 0; } input:not([type=checkbox], [type=radio], [type=range]) { height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); } fieldset { width: 100%; margin: 0; margin-bottom: var(--pico-spacing); padding: 0; border: 0; } fieldset legend, label { display: block; margin-bottom: calc(var(--pico-spacing) * 0.375); color: var(--pico-color); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); } fieldset legend { margin-bottom: calc(var(--pico-spacing) * 0.5); } button[type=submit], input:not([type=checkbox], [type=radio]), select, textarea { width: 100%; } input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); } input, select, textarea { --pico-background-color: var(--pico-form-element-background-color); --pico-border-color: var(--pico-form-element-border-color); --pico-color: var(--pico-form-element-color); --pico-box-shadow: none; border: var(--pico-border-width) solid var(--pico-border-color); border-radius: var(--pico-border-radius); outline: 0; background-color: var(--pico-background-color); box-shadow: var(--pico-box-shadow); color: var(--pico-color); font-weight: var(--pico-font-weight); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } :where(select, textarea):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus) { --pico-background-color: var(--pico-form-element-active-background-color); } :where(select, textarea):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus) { --pico-border-color: var(--pico-form-element-active-border-color); } :where(select, textarea):not([readonly]):focus, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus { --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); } :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea), input:not([type=submit], [type=button], [type=reset])[disabled], label[aria-disabled=true], select[disabled], textarea[disabled] { opacity: var(--pico-form-element-disabled-opacity); pointer-events: none; } label[aria-disabled=true] input[disabled] { opacity: 1; } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], [type=range])[aria-invalid] { padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-left: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], [type=range])[aria-invalid=false]:not(select) { background-image: var(--pico-icon-valid); } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], [type=range])[aria-invalid=true]:not(select) { background-image: var(--pico-icon-invalid); } :where(input, select, textarea)[aria-invalid=false] { --pico-border-color: var(--pico-form-element-valid-border-color); } :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { --pico-border-color: var(--pico-form-element-valid-active-border-color)!important; } :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) { --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color)!important; } :where(input, select, textarea)[aria-invalid=true] { --pico-border-color: var(--pico-form-element-invalid-border-color); } :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { --pico-border-color: var(--pico-form-element-invalid-active-border-color)!important; } :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) { --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color)!important; } [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) { background-position: center left 0.75rem; } input::-webkit-input-placeholder, input::placeholder, select:invalid, textarea::-webkit-input-placeholder, textarea::placeholder { color: var(--pico-form-element-placeholder-color); opacity: 1; } input:not([type=checkbox], [type=radio]), select, textarea { margin-bottom: var(--pico-spacing); } select::-ms-expand { border: 0; background-color: transparent; } select:not([multiple], [size]) { padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-left: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); background-image: var(--pico-icon-chevron); background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; } select[multiple] option:checked { background: var(--pico-form-element-selected-background-color); color: var(--pico-form-element-color); } [dir=rtl] select:not([multiple], [size]) { background-position: center left 0.75rem; } textarea { display: block; resize: vertical; } textarea[aria-invalid] { --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); background-position: top right 0.75rem !important; background-size: 1rem var(--pico-icon-height) !important; } :where(input, select, textarea, fieldset, .grid) + small { display: block; width: 100%; margin-top: calc(var(--pico-spacing) * -0.75); margin-bottom: var(--pico-spacing); color: var(--pico-muted-color); } :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { color: var(--pico-ins-color); } :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { color: var(--pico-del-color); } label > :where(input, select, textarea) { margin-top: calc(var(--pico-spacing) * 0.25); } label:has([type=checkbox], [type=radio]) { width: -moz-fit-content; width: fit-content; cursor: pointer; } [type=checkbox], [type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1.25em; height: 1.25em; margin-top: -0.125em; margin-inline-end: 0.5em; border-width: var(--pico-border-width); vertical-align: middle; cursor: pointer; } [type=checkbox]::-ms-check, [type=radio]::-ms-check { display: none; } [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus { --pico-background-color: var(--pico-primary-background); --pico-border-color: var(--pico-primary-border); background-image: var(--pico-icon-checkbox); background-position: center; background-size: 0.75em auto; background-repeat: no-repeat; } [type=checkbox] ~ label, [type=radio] ~ label { display: inline-block; margin-bottom: 0; cursor: pointer; } [type=checkbox] ~ label:not(:last-of-type), [type=radio] ~ label:not(:last-of-type) { margin-inline-end: 1em; } [type=checkbox]:indeterminate { --pico-background-color: var(--pico-primary-background); --pico-border-color: var(--pico-primary-border); background-image: var(--pico-icon-minus); background-position: center; background-size: 0.75em auto; background-repeat: no-repeat; } [type=radio] { border-radius: 50%; } [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus { --pico-background-color: var(--pico-primary-inverse); border-width: 0.35em; background-image: none; } [type=checkbox][role=switch] { --pico-background-color: var(--pico-switch-background-color); --pico-color: var(--pico-switch-color); width: 2.25em; height: 1.25em; border: var(--pico-border-width) solid var(--pico-border-color); border-radius: 1.25em; background-color: var(--pico-background-color); line-height: 1.25em; } [type=checkbox][role=switch]:not([aria-invalid]) { --pico-border-color: var(--pico-switch-background-color); } [type=checkbox][role=switch]:before { display: block; aspect-ratio: 1; height: 100%; border-radius: 50%; background-color: var(--pico-color); box-shadow: var(--pico-switch-thumb-box-shadow); content: ""; transition: margin 0.1s ease-in-out; } [type=checkbox][role=switch]:focus { --pico-background-color: var(--pico-switch-background-color); --pico-border-color: var(--pico-switch-background-color); } [type=checkbox][role=switch]:checked { --pico-background-color: var(--pico-switch-checked-background-color); --pico-border-color: var(--pico-switch-checked-background-color); background-image: none; } [type=checkbox][role=switch]:checked::before { margin-inline-start: 1em; } [type=checkbox][role=switch][disabled] { --pico-background-color: var(--pico-border-color); } [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus, [type=checkbox][role=switch][aria-invalid=false]:checked, [type=checkbox][role=switch][aria-invalid=false]:checked:active, [type=checkbox][role=switch][aria-invalid=false]:checked:focus { --pico-background-color: var(--pico-form-element-valid-border-color); } [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], [type=checkbox][role=switch]:checked:active[aria-invalid=true], [type=checkbox][role=switch]:checked:focus[aria-invalid=true], [type=checkbox][role=switch]:checked[aria-invalid=true] { --pico-background-color: var(--pico-form-element-invalid-border-color); } [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus, [type=checkbox][role=switch][aria-invalid=false]:checked, [type=checkbox][role=switch][aria-invalid=false]:checked:active, [type=checkbox][role=switch][aria-invalid=false]:checked:focus, [type=radio][aria-invalid=false]:checked, [type=radio][aria-invalid=false]:checked:active, [type=radio][aria-invalid=false]:checked:focus { --pico-border-color: var(--pico-form-element-valid-border-color); } [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], [type=checkbox][role=switch]:checked:active[aria-invalid=true], [type=checkbox][role=switch]:checked:focus[aria-invalid=true], [type=checkbox][role=switch]:checked[aria-invalid=true], [type=radio]:checked:active[aria-invalid=true], [type=radio]:checked:focus[aria-invalid=true], [type=radio]:checked[aria-invalid=true] { --pico-border-color: var(--pico-form-element-invalid-border-color); } [type=color]::-webkit-color-swatch-wrapper { padding: 0; } [type=color]::-moz-focus-inner { padding: 0; } [type=color]::-webkit-color-swatch { border: 0; border-radius: calc(var(--pico-border-radius) * 0.5); } [type=color]::-moz-color-swatch { border: 0; border-radius: calc(var(--pico-border-radius) * 0.5); } input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { --pico-icon-position: 0.75rem; --pico-icon-width: 1rem; padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); background-image: var(--pico-icon-date); background-position: center right var(--pico-icon-position); background-size: var(--pico-icon-width) auto; background-repeat: no-repeat; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { background-image: var(--pico-icon-time); } [type=date]::-webkit-calendar-picker-indicator, [type=datetime-local]::-webkit-calendar-picker-indicator, [type=month]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator, [type=week]::-webkit-calendar-picker-indicator { width: var(--pico-icon-width); margin-right: calc(var(--pico-icon-width) * -1); margin-left: var(--pico-icon-position); opacity: 0; } @-moz-document url-prefix() { [type=date], [type=datetime-local], [type=month], [type=time], [type=week] { padding-right: var(--pico-form-element-spacing-horizontal) !important; background-image: none !important; } } [dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { text-align: right; } [type=file] { --pico-color: var(--pico-muted-color); margin-left: calc(var(--pico-outline-width) * -1); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding-left: var(--pico-outline-width); border: 0; border-radius: 0; background: 0 0; } [type=file]::file-selector-button { margin-right: calc(var(--pico-spacing) / 2); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); } [type=file]:is(:hover, :active, :focus)::file-selector-button { --pico-background-color: var(--pico-secondary-hover-background); --pico-border-color: var(--pico-secondary-hover-border); } [type=file]:focus::file-selector-button { --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); } [type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 1.25rem; background: 0 0; } [type=range]::-webkit-slider-runnable-track { width: 100%; height: 0.375rem; border-radius: var(--pico-border-radius); background-color: var(--pico-range-border-color); -webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), box-shadow var(--pico-transition); } [type=range]::-moz-range-track { width: 100%; height: 0.375rem; border-radius: var(--pico-border-radius); background-color: var(--pico-range-border-color); -moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), box-shadow var(--pico-transition); } [type=range]::-ms-track { width: 100%; height: 0.375rem; border-radius: var(--pico-border-radius); background-color: var(--pico-range-border-color); -ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), box-shadow var(--pico-transition); } [type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.4375rem; border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; background-color: var(--pico-range-thumb-color); cursor: pointer; -webkit-transition: background-color var(--pico-transition), transform var(--pico-transition); transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]::-moz-range-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.4375rem; border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; background-color: var(--pico-range-thumb-color); cursor: pointer; -moz-transition: background-color var(--pico-transition), transform var(--pico-transition); transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]::-ms-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.4375rem; border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; background-color: var(--pico-range-thumb-color); cursor: pointer; -ms-transition: background-color var(--pico-transition), transform var(--pico-transition); transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]:active, [type=range]:focus-within { --pico-range-border-color: var(--pico-range-active-border-color); --pico-range-thumb-color: var(--pico-range-thumb-active-color); } [type=range]:active::-webkit-slider-thumb { transform: scale(1.25); } [type=range]:active::-moz-range-thumb { transform: scale(1.25); } [type=range]:active::-ms-thumb { transform: scale(1.25); } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); background-image: var(--pico-icon-search); background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); background-size: 1rem auto; background-repeat: no-repeat; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; background-position: center left 1.125rem, center right 0.75rem; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] { background-image: var(--pico-icon-search), var(--pico-icon-valid); } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] { background-image: var(--pico-icon-search), var(--pico-icon-invalid); } [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { background-position: center right 1.125rem; } [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { background-position: center right 1.125rem, center left 0.75rem; } [role=group], [role=search] { display: inline-flex; position: relative; width: 100%; margin-bottom: var(--pico-spacing); border-radius: var(--pico-border-radius); box-shadow: var(--pico-group-box-shadow, 0 0 0 transparent); vertical-align: middle; transition: box-shadow var(--pico-transition); } [role=group] input:not([type=checkbox], [type=radio]), [role=group] select, [role=group] > *, [role=search] input:not([type=checkbox], [type=radio]), [role=search] select, [role=search] > * { position: relative; flex: 1 1 auto; margin-bottom: 0; } [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] select:not(:first-child), [role=group] > :not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] select:not(:first-child), [role=search] > :not(:first-child) { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] select:not(:last-child), [role=group] > :not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] select:not(:last-child), [role=search] > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [role=group] input:not([type=checkbox], [type=radio]):focus, [role=group] select:focus, [role=group] > :focus, [role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] select:focus, [role=search] > :focus { z-index: 2; } [role=group] [role=button]:not(:first-child), [role=group] [type=button]:not(:first-child), [role=group] [type=reset]:not(:first-child), [role=group] [type=submit]:not(:first-child), [role=group] button:not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] select:not(:first-child), [role=search] [role=button]:not(:first-child), [role=search] [type=button]:not(:first-child), [role=search] [type=reset]:not(:first-child), [role=search] [type=submit]:not(:first-child), [role=search] button:not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] select:not(:first-child) { margin-left: calc(var(--pico-border-width) * -1); } [role=group] [role=button], [role=group] [type=button], [role=group] [type=reset], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=reset], [role=search] [type=submit], [role=search] button { width: auto; } @supports selector(:has(*)) { [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus), [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) { --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); } [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]), [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select, [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]), [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select { border-color: transparent; } [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus), [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) { --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); } [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button], [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button], [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit], [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button, [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button], [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button], [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit], [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button { --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); } [role=group] [role=button]:focus, [role=group] [type=button]:focus, [role=group] [type=reset]:focus, [role=group] [type=submit]:focus, [role=group] button:focus, [role=search] [role=button]:focus, [role=search] [type=button]:focus, [role=search] [type=reset]:focus, [role=search] [type=submit]:focus, [role=search] button:focus { box-shadow: none; } } [role=search] > :first-child { border-top-left-radius: 5rem; border-bottom-left-radius: 5rem; } [role=search] > :last-child { border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; } body { --pico-text-selection-color: rgba(249, 199, 101, 0.25); --pico-primary: var(--color-brand); --pico-primary-background: var(--color-brand); --pico-primary-underline: rgba(199, 145, 50, 0.5); --pico-primary-hover: #a67528; --pico-primary-hover-background: #b8832d; --pico-primary-focus: rgba(249, 199, 101, 0.5); --pico-form-element-active-border-color: var(--pico-primary-underline); --pico-border-color: var(--pico-primary-underline); --pico-primary-border: var(--pico-primary-underline); } body * { outline-color: var(--pico-primary-underline) !important; } /* end of /globals/scss/_pico.scss */ /* /globals/scss/_reset.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* 1. Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering */ body { line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 5. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 6. Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* 7. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 8. Create a root stacking context */ #root, #__next { isolation: isolate; } figure { margin: 0; padding: 0; } /* end of /globals/scss/_reset.css */ /* /globals/scss/_themes.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } :root { color-scheme: light dark; --block-background: var(--override-block-background, var(--background-dark)); --block-background-rgb: var(--override-block-background-rgb, var(--background-dark-rgb)); --block-color: var(--override-block-color, var(--color-for-background-dark)); --block-color-rgb: var(--override-block-color-rgb, var(--color-for-background-dark-rgb)); --brand-background: var(--color-brand); --brand-background-rgb: var(--color-brand-rgb); --brand-color: var(--color-light); --brand-color-rgb: var(--color-light-rgb); --body-background: var(--background-light); --body-background-rgb: var(--background-light-rgb); --body-color: var(--color-for-background-light); --body-color-rgb: var(--color-for-background-light-rgb); --body-color-alt: var(--color-alt-light); --body-color-alt-rgb: var(--color-alt-light-rgb); --svg-body-logo: url("/images/logo.svg"); --svg-block-logo: url("/images/logo-light.svg"); --svg-loader: url('data:image/svg+xml,'); } [data-theme=dark] { --block-background: var(--background-gray); --block-background-rgb: var(--background-gray-rgb); --block-color: var(--color-for-background-gray); --block-color-rgb: var(--color-for-background-gray-rgb); --brand-background: var(--color-white-alt); --brand-background-rgb: var(--color-white-alt-rgb); --brand-color: var(--color-dark); --brand-color-rgb: var(--color-dark-rgb); --body-background: var(--background-dark); --body-background-rgb: var(--background-dark-rgb); --body-color: var(--color-for-background-dark); --body-color-rgb: var(--color-for-background-dark-rgb); --body-color-alt: var(--color-alt-dark); --body-color-alt-rgb: var(--color-alt-dark-rgb); --svg-body-logo: url("/images/logo-light.svg"); --svg-block-logo: url("/images/logo-light.svg"); --svg-loader: url('data:image/svg+xml,'); } [data-theme=dark] img:not([src*=svg]):not([src*=png]) { filter: brightness(85%); } body { background-color: var(--body-background); color: var(--body-color); } /* end of /globals/scss/_themes.scss */ /* /globals/scss/_titles.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } h1, h2, h3, h4, h5 { font-weight: 0; text-wrap: balance; font-optical-sizing: auto; font-weight: 100; font-style: normal; } h1 { font-size: var(--font-size-title); line-height: 1; } /* end of /globals/scss/_titles.scss */ /* /globals/scss/_variables.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } :root { --site-width: clamp(100px, 80vw, 1300px); --navbar-width: clamp(100px, 100vw, 950px); --content-width: clamp(100px, 100vw, 700px); --viewport-nopadding-width: calc(100vw - var(--gap)*2); --gap-mini: .3rem; --gap-small: .5rem; --gap-medium: .8rem; --gap-alt: 1rem; --gap-ter: 1.2rem; --gap: 2rem; --gap-large: 2.5rem; --gap-xlarge: 3.75rem; --gap-xxlarge: 4rem; --marge-site: calc(((100vw - var(--site-width)) /2) - var(--gap)); --marge-content: calc(((100vw - var(--content-width)) /2) - var(--gap)); --icone-size-small: 14px; --icone-size: 18px; --icone-size-large: 28px; --icone-size-xlarge: 32px; --icone-size-xxlarge: 48px; --main-z-index: 9999999; --secondary-z-index: calc(var(--main-z-index) - 1); --ultimate-z-index: calc(var(--main-z-index) + 1); --small-column-width: 200px; --illustration-ratio: 4/3; --cover-ratio: 250 / 325; } html { --layout-gap: var(--gap-medium); --navbar-height: 62px; --navbar-index: var(--secondary-z-index); --viewport-height: calc(100vh - var(--navbar-height)); } /* Breakpoint: medium - /globals/scss/_variables-medium.scss */ @media (min-width: 700px) { @ media (min-width: 500px) { body: has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } html { --layout-gap: var(--gap-small); } } /* end of /globals/scss/_variables.scss */ /* /globals/scss/abonnement-et-compte.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } html:not([data-abonne=true]) .seulement-pour-les-abonnes { display: none !important; } html[data-abonne=true] .seulement-pour-les-non-abonnes { display: none !important; } .article-item:not([data-gratuit=true]) .seulement-si-gratuit { display: none !important; } .article-item[data-gratuit=true] .seulement-si-payant { display: none !important; } html:not([data-connecte=true]) .seulement-si-connecte { display: none !important; } html[data-connecte=true] .seulement-si-non-connecte { display: none !important; } /* end of /globals/scss/abonnement-et-compte.scss */ /* /globals/scss/anchors.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } :where(a:not([class]):not([role])) { color: inherit; text-decoration: none; } a.hover { color: inherit; text-decoration: none; } a.hover:hover { color: inherit; text-decoration: underline; } a.hover-alt { color: inherit; text-decoration: underline; } a.hover-alt:hover { color: inherit; text-decoration: none; } /* end of /globals/scss/anchors.scss */ /* /globals/scss/balloon.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } :root { --balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px; } button[aria-label][data-balloon-pos] { overflow: visible; } [aria-label][data-balloon-pos] { position: relative; cursor: pointer; } [aria-label][data-balloon-pos]:after { opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; text-indent: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; text-shadow: none; font-size: var(--balloon-font-size); background: var(--balloon-color); border-radius: var(--balloon-border-radius); color: var(--balloon-text-color); content: attr(aria-label); padding: 0.5em 1em; position: absolute; white-space: nowrap; z-index: 10; } [aria-label][data-balloon-pos]:before { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--balloon-color); opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; content: ""; position: absolute; z-index: 10; } [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after { opacity: 1; pointer-events: none; } [aria-label][data-balloon-pos].font-awesome:after { font-family: FontAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } [aria-label][data-balloon-pos][data-balloon-break]:after { white-space: pre; } [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after { white-space: pre-line; word-break: break-word; } [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after { transition: none; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=up]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=up]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=down]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=down]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:before { transform: translate(-50%, 0); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos*=-left]:after { left: 0; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos*=-left]:before { left: 5px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos*=-right]:after { right: 0; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos*=-right]:before { right: 5px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=up]:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=up]:after { bottom: 100%; transform-origin: top; transform: translate(0, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=up]:after { margin-bottom: 10px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=up][data-balloon-pos=up]:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=up][data-balloon-pos=up]:after { letter-spacing: 0.01rem; left: 50%; transform: translate(-50%, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down]:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down]:after { top: 100%; transform: translate(0, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down]:after { margin-top: 10px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down]:before { border-bottom-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down][data-balloon-pos=down]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos^=down][data-balloon-pos=down]:before { left: 50%; transform: translate(-50%, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:before { transform: translate(0, -50%); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:before { right: 100%; top: 50%; transform: translate(var(--balloon-move), -50%); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:after { margin-right: 10px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=left]:before { border-left-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:after, [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:before { left: 100%; top: 50%; transform: translate(calc(var(--balloon-move) * -1), -50%); } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:after { margin-left: 10px; } [aria-label][data-balloon-pos][data-balloon-pos][data-balloon-pos=right]:before { border-right-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-length]:after { white-space: normal; } [aria-label][data-balloon-pos][data-balloon-length][data-balloon-length=small]:after { width: 80px; } [aria-label][data-balloon-pos][data-balloon-length][data-balloon-length=medium]:after { width: 150px; } [aria-label][data-balloon-pos][data-balloon-length][data-balloon-length=large]:after { width: 260px; } [aria-label][data-balloon-pos][data-balloon-length][data-balloon-length=xlarge]:after { width: 380px; } [aria-label][data-balloon-pos][data-balloon-length][data-balloon-length=fit]:after { width: 100%; } @media screen and (max-width: 768px) { [aria-label][data-balloon-pos][data-balloon-length=xlarge]:after { width: 90vw; } } @media (max-width: 1100px) { button[aria-label][data-balloon-pos]:after, button[aria-label][data-balloon-pos]::before { display: none !important; } } /* end of /globals/scss/balloon.scss */ /* /globals/scss/events.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } button[data-action] { cursor: pointer; background: none; border: none; padding: 0; margin: 0; outline: none; } /* end of /globals/scss/events.scss */ /* /globals/scss/fonts.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* @link https://utopia.fyi/type/calculator?c=320,25,1.2,1240,30,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --font-step--2: clamp(1.0851rem, 1.0451rem + 0.1999vw, 1.2rem); --font-step--1: clamp(1.3021rem, 1.2332rem + 0.3442vw, 1.5rem); --font-step-0: clamp(1.5625rem, 1.4538rem + 0.5435vw, 1.875rem); --font-step-1: clamp(1.875rem, 1.712rem + 0.8152vw, 2.3438rem); --font-step-2: clamp(2.25rem, 2.0136rem + 1.1821vw, 2.9297rem); --font-step-3: clamp(2.7rem, 2.3654rem + 1.6732vw, 3.6621rem); --font-step-4: clamp(3.24rem, 2.7747rem + 2.3263vw, 4.5776rem); --font-step-5: clamp(3.888rem, 3.2501rem + 3.1896vw, 5.722rem); } :root { --subhead-font: "Arial", sans-serif; --content-font: "newsreader", Garamond, serif; --sans-serif-font: "neue-haas-display-roman", sans-serif; --sans-serif-font-bold: "neue-haas-display-bold", "Arial Black", sans-serif; --free-font: "akzidenz", sans-serif; --font-bold: 600; --font-size-xxxsmall: .6rem; --font-size-xxsmall: .7rem; --font-size-xsmall: .8rem; --font-size-small: .9rem; --font-size-medium: 1.05rem; --font-size-intermediary: 1.2rem; --font-size: 1.5rem; --font-size-bof: var(--font-step--2); --font-size-large: var(--font-step--1); --font-size-xlarge: var(--font-step-0); --font-size-xxlarge: var(--font-step-1); --font-size-xxxlarge: var(--font-step-2); --font-size-small-title: var(--font-step-2); --font-size-title: var(--font-step-5); --font-size-content: 1.18rem; --font-letter-spacing-content: 0.03rem; --font-line-height-content: 1.4; } .font-size-xxsmall { font-size: var(--font-size-xxsmall); } .font-size-xsmall { font-size: var(--font-size-xsmall); } .font-size-small { font-size: var(--font-size-small); } .font-size-medium { font-size: var(--font-size-medium); } .font-size { font-size: var(--font-size); } .font-size-large { font-size: var(--font-size-large); } .font-size-xlarge { font-size: var(--font-size-xlarge); } .font-size-xxlarge { font-size: var(--font-size-xxlarge); } .font-size-title { font-size: var(--font-size-title); } .font-size-content { font-size: var(--font-size-content); } body { font-family: var(--sans-serif-font); } /* end of /globals/scss/fonts.scss */ /* /globals/scss/fonts/akzidenz.css */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Light (par défaut) */ @font-face { font-family: "akzidenz"; src: url("/fonts/akzidenz/AkzidenzGroteskBE-LightCn.woff2") format("woff2"), url("/fonts/akzidenz/AkzidenzGroteskBE-LightCn.woff") format("woff"); font-weight: 300; /* ou normal si elle est fine mais pas ultra légère */ font-style: normal; font-display: swap; } /* Bold */ @font-face { font-family: "akzidenz"; src: url("/fonts/akzidenz/AkzidenzGroteskBE-XBdCn.woff2") format("woff2"), url("/fonts/akzidenz/AkzidenzGroteskBE-XBdCn.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/akzidenz.css */ /* /globals/scss/fonts/apple-garamond-light.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "apple-garamond-light"; src: url("/fonts/AppleGaramondLight.woff2") format("woff2"), url("/fonts/AppleGaramondLight.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/apple-garamond-light.css */ /* /globals/scss/fonts/apple-garamond.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "apple-garamond"; src: url("/fonts/AppleGaramond.woff2") format("woff2"), url("/fonts/AppleGaramond.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/apple-garamond.css */ /* /globals/scss/fonts/charter.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "charter"; src: url("/fonts/Charter.woff2") format("woff2"), url("/fonts/Charter.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/charter.css */ /* /globals/scss/fonts/neue-haas-display-bold.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "neue-haas-display-bold"; src: url("/fonts/NeueHaasDisplay-Bold.woff2") format("woff2"), url("/fonts/NeueHaasDisplay-Bold.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/neue-haas-display-bold.css */ /* /globals/scss/fonts/neue-haas-display-roman.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "neue-haas-display-roman"; src: url("/fonts/NeueHaasDisplay-Roman.woff2") format("woff2"), url("/fonts/NeueHaasDisplay-Roman.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/neue-haas-display-roman.css */ /* /globals/scss/fonts/newsreader.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "newsreader"; src: url("/fonts/Newsreader-VariableFont_opsz_wght.woff2") format("woff2"), url("/fonts/Newsreader-VariableFont_opsz_wght.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/newsreader.css */ /* /globals/scss/fonts/playfair.css */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @font-face { font-family: "playfair-display"; src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"), url("/fonts/PlayfairDisplay-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* end of /globals/scss/fonts/playfair.css */ /* /globals/scss/free-compteur.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .compteur { position: absolute; right: 10%; z-index: 10; text-decoration: none; color: #252525; font-family: var(--free-font); font-size: min(1.75vw, 1.5rem); text-transform: uppercase; line-height: 1; } @media (max-width: 700px) { .compteur { display: none; } } .compteur:hover { text-decoration: none; } .compteur .free-complet { font-size: min(3vw, 3rem); font-family: var(--akzidenz); font-weight: bold; } .compteur .free-complet .free { color: red; } /* end of /globals/scss/free-compteur.scss */ /* /globals/scss/helpers.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .vertical-align-center { display: flex; align-items: center; } span.vertical-align-center { display: inline-flex; } .monochrome { filter: grayscale(100%); } @media (max-width: 1100px) { .pas-en-mobile { display: none !important; } } @media (min-width: 1100px) { .seulement-en-mobile { display: none !important; } } [data-hidden] { display: none !important; } .is-loading, [aria-busy] { --_svg-loader: var(--svg-loader); color: transparent !important; pointer-events: none !important; position: relative; } .is-loading::before, [aria-busy]::before { filter: unset !important; } .is-loading > *, [aria-busy] > * { opacity: 0; } .is-loading::before, [aria-busy]::before { position: absolute; inset: 0; content: ""; background: var(--_svg-loader) no-repeat center; background-size: auto 1rem; } .is-loading.loading-right:before, [aria-busy].loading-right:before { background-position: right center; } .is-loading.loading-left:before, [aria-busy].loading-left:before { background-position: left center; } body[data-bookmark=true] .seulement-si-non-bookmark { display: none !important; } body:not([data-bookmark=true]) .seulement-si-bookmark { display: none !important; } body[data-lisible=true] .seulement-si-non-lisible { display: none !important; } body:not([data-lisible=true]) .seulement-si-lisible { display: none !important; } body:not(.article-payant) .seulement-si-article-payant { display: none !important; } body.article-payant .seulement-si-article-gratuit { display: none !important; } .has-padding { padding: var(--gap); } .has-margin { padding: var(--gap); } .is-centered { display: grid; place-items: center; } .hidden { display: none !important; } /* end of /globals/scss/helpers.scss */ /* /globals/scss/icones.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .icone { height: 1rem; display: inline-block; width: 1rem; vertical-align: text-top; } .icone.mirror { transform: scale(-1, -1); } /* end of /globals/scss/icones.scss */ /* /globals/scss/layout.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } html, body { box-sizing: border-box; min-height: 100vh; margin: 0; padding: 0; } .main-content, section.section { display: flex; flex-direction: column; gap: var(--gap); } .container:has(> section.section) { display: flex; justify-content: center; } .container:has(> section.section) > section.section:first-child { margin-top: var(--gap); } .section { width: var(--site-width); } .article > .section { margin-inline: var(--gap); max-width: calc(100vw - var(--gap) * 2); width: var(--content-width); } /* end of /globals/scss/layout.scss */ /* /globals/scss/lists.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } ul:not([class]), ul:not([class]) li { padding: 0; margin: 0; list-style: none; } /* end of /globals/scss/lists.scss */ /* /globals/scss/qiota.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .content .qiota { display: block !important; width: 100%; } .content .qiota > div:not([class]) { --body-background: var(--background-light); --body-color: var(--color-for-background-light); --block-background: var(--background-dark); --block-color: var(--color-for-background-dark); } .content #qiota_newsletter { border-top: 1px solid; padding-top: var(--gap); margin-top: var(--gap); } .content .q_container { background-color: var(--body-background); color: var(--body-color); max-width: 630px !important; margin-inline: auto; display: flex; flex-direction: column; position: relative; border-radius: var(--pico-border-radius); border: 1px solid var(--body-color); overflow: hidden; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } .content .q_container #q_subscribe { position: relative; display: flex; flex-direction: column; gap: var(--gap); align-items: center; } @media (min-width: 1100px) { .content .q_container #q_subscribe { justify-content: center; flex-direction: row; } } .content .q_container #q_subscribe::before { position: absolute; content: ""; height: 50%; left: 0; top: 0; width: 100%; background-color: var(--block-background); z-index: 0; } .content .q_container #q_subscribe > a, .content .q_container #q_subscribe > button { cursor: pointer; z-index: 1; max-width: 80%; } .content .q_container .q_title, .content .q_container #q_connexion { flex: 0 0 clamp(0px, 100vh, 15vh); display: flex; flex-direction: column; padding: var(--gap-large); justify-content: center; } .content .q_container .q_title { background-color: var(--block-background); color: var(--block-color); align-items: center; justify-content: flex-end; text-align: center; } .content .q_container .q_title:before { width: 100%; height: 5vh; content: ""; display: block; background: var(--svg-block-logo); background-repeat: no-repeat; background-size: contain; background-position: center; } .content .q_container #q_connexion { background-color: var(--body-background); color: var(--body-color); align-items: center; justify-content: flex-start; gap: var(--gap-small); text-align: center; } .content .q_container #q_connexion a { text-decoration: underline; } .content .q_logo { background-color: var(--background-light); border-radius: 80px; padding: var(--gap-small) var(--gap-medium); } .content .qiota_hidden::before { background: linear-gradient(to bottom, rgba(var(--body-background-rgb), 0) 0%, var(--body-background) 100%); } /* end of /globals/scss/qiota.scss */ /* /globals/scss/svg.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } figure:has(> svg) { position: relative; display: block; } figure:has(> svg) > svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } svg { width: 100%; height: 100%; fill: currentColor; } .article-actions figure { display: inline-flex; padding: 10px; cursor: pointer; } .article-actions figure path { fill: #b7b7b7; transition: fill 0.2s; } .article-actions figure:hover path { fill: currentColor; } /* end of /globals/scss/svg.scss */ /* /pages/anciens-numeros/anciens-numeros.scss */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for anciens-numeros page */ .container .select-annee-wrapper { display: flex; justify-content: end; } .container .select-annee-wrapper #select-annee { width: fit-content; margin-bottom: 0; } .container .anciens-numeros .annees { display: flex; flex-direction: column; gap: var(--gap); } .container .anciens-numeros .annees:has([data-hidden]) .annee:not([data-hidden]), .container .anciens-numeros .annees:not(:has([data-hidden])) .annee:first-of-type { margin-top: -55px; } .container .anciens-numeros .annees .annee:has(li.hidden):not(:has(li:not(.hidden))) { display: none !important; } .container .anciens-numeros:has(li.hidden):not(:has(li:not(.hidden))):after { text-align: center; content: "Aucun magazine ne correspond à votre recherche"; display: block; font-style: italic; } .container #select-annee { z-index: 1; } /* end of /pages/anciens-numeros/anciens-numeros.scss */ /* /pages/article/article.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .article { display: flex; flex-direction: column; align-items: center; gap: var(--gap); } .article:has(.paywalled) .progress { display: none; } /* end of /pages/article/article.scss */ /* /pages/article-couleur/article-couleur.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for article-couleur page */ /* end of /pages/article-couleur/article-couleur.scss */ /* /pages/article-petit/article-petit.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .article[data-mise-en-page=top] .hero, .article[data-mise-en-page=top] .hero-alt, .article[data-mise-en-page=short] .hero, .article[data-mise-en-page=short] .hero-alt { width: var(--navbar-width); margin: 0 auto; } /* end of /pages/article-petit/article-petit.scss */ /* /pages/article-vertical/article-vertical.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* end of /pages/article-vertical/article-vertical.scss */ /* /pages/compte/compte.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .page-compte { display: flex; flex-direction: column; gap: var(--gap); width: 100%; max-width: var(--content-width); margin-inline: auto; } .page-compte > * { width: 100%; } .page-compte__hero { display: flex; flex-direction: column; gap: var(--gap-alt); } .page-compte__hero .titre-categorie { margin: 0; } .page-compte__identite { display: flex; align-items: center; gap: var(--gap-alt); } .page-compte__avatar { flex: 0 0 auto; width: 80px; height: 80px; } .page-compte__avatar svg, .page-compte__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-jaune); } .page-compte__infos { min-width: 0; } .page-compte__nom { margin: 0; font-weight: 700; } .page-compte__email { margin: 0; color: var(--body-color-alt); word-break: break-word; } .page-compte .statut { display: inline-flex; align-items: center; gap: var(--gap-mini); margin: var(--gap-small) 0 0; font-size: var(--font-size-small, 0.9rem); color: var(--body-color-alt); } .page-compte .statut--actif { color: var(--body-color); font-weight: 600; } .page-compte .statut__pastille { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #1faa59; } .page-compte .carte > h2 { margin: 0 0 var(--gap-small); font-size: var(--font-size-large, 1.15rem); } .page-compte .content.carte { margin-inline: 0; max-width: none; } .page-compte__texte { margin: 0 0 var(--gap-alt); color: var(--body-color-alt); } .page-compte__texte:last-child { margin-bottom: 0; } .page-compte__entete { display: flex; align-items: center; gap: var(--gap-small); margin-bottom: var(--gap-small); } .page-compte__icone { flex: 0 0 auto; display: inline-flex; width: 36px; height: 36px; } .page-compte__icone svg { width: 100%; height: 100%; } .page-compte__sous-titre { margin: 0; color: var(--body-color-alt); font-size: var(--font-size-small, 0.9rem); } .page-compte__pourquoi { margin-top: var(--gap-alt); font-size: var(--font-size-small, 0.9rem); } .page-compte__pourquoi summary { color: var(--body-color-alt); cursor: pointer; } .page-compte__pourquoi p { margin: var(--gap-small) 0 0; color: var(--body-color-alt); } .page-compte .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-small); } .page-compte .actions [role=button] { width: auto; margin: 0; } .page-compte__achats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); } .page-compte__achats > li { display: flex; flex-direction: column; gap: var(--gap-small); } .page-compte__achats > li > h3 { margin: 0; font-size: var(--font-size-small, 0.9rem); font-weight: 600; color: var(--body-color-alt); } .page-compte__achats .une-colonne-archive > .articles > .article-item:first-child::before { display: none; } /* end of /pages/compte/compte.scss */ /* /pages/liste-articles/liste-articles.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for liste-articles page */ /* end of /pages/liste-articles/liste-articles.scss */ /* /pages/page/page.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for page page */ .site-page { display: flex; flex-direction: column; align-items: center; gap: var(--gap); min-height: 80vh; } @media (min-width: 1100px) { .site-page .page-content { min-width: var(--content-width); } } /* end of /pages/page/page.scss */ /* /pages/page-top/page-top.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .content:has(.top-item) { max-width: var(--navbar-width); } .content:has(.top-item) .hero-alt .illustration { display: none !important; } /* end of /pages/page-top/page-top.scss */ /* /pages/podcasts/podcasts.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .podcasts { display: flex; flex-direction: column; gap: var(--gap); } .podcasts .podcast:not(:first-of-type) { border-top: 1px solid; padding-top: var(--gap); } /* end of /pages/podcasts/podcasts.scss */ /* /pages/search/search.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for search page */ /* end of /pages/search/search.scss */ /* /pages/sommaire/sommaire.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .sommaire .couverture { display: flex; gap: var(--gap); flex-direction: column; } @media (min-width: 700px) { .sommaire .couverture { display: grid; grid-template-columns: 50% 1fr; } } .sommaire .couverture h3 { font-family: var(--sans-serif-font-bold); font-size: var(--font-size-xlarge); } .sommaire .couverture > figure img { max-width: auto; width: 100%; height: auto; border: 1px solid; } .sommaire .couverture > div { display: flex; flex-direction: column; gap: var(--gap); font-size: var(--font-size-bof); } .sommaire .couverture > div header { flex: 1; display: flex; flex-direction: column; gap: var(--gap); } .sommaire .couverture > div nav ul { display: flex; flex-direction: column; gap: var(--gap-small); } @media (min-width: 700px) { .sommaire .couverture > div nav ul { justify-content: space-between; flex-direction: row; } } .sommaire .couverture > div nav ul li > a { display: grid; gap: var(--gap-small); grid-template-columns: var(--icone-size-large) 1fr; } .sommaire .couverture > div nav ul li > a span { font-family: var(--sans-serif-font-bold); font-size: var(--font-size-bof); } .sommaire .couverture > div nav ul li > a:hover { color: var(--color-hover); } .sommaire .couverture > div nav ul svg { width: var(--icone-size-xlarge); aspect-ratio: 1; } /* end of /pages/sommaire/sommaire.scss */ /* /components/add-to-any/add-to-any.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .add-to-any { max-width: 100vw; display: flex; justify-content: center; flex-wrap: wrap; line-height: initial !important; gap: var(--gap-small); align-items: center; margin: var(--gap); } .add-to-any > a { line-height: initial; padding: 0; flex: initial; } .add-to-any .a2a_svg { width: clamp(32px, 20vw, 64px); height: clamp(32px, 20vw, 64px); } .add-to-any a[href]:not(:hover) .a2a_svg { background-color: black !important; } /* end of /components/add-to-any/add-to-any.scss */ /* /components/annee/annee.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for annee component */ .annee { display: flex; flex-direction: column; gap: var(--gap-small); } .annee ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } @media (min-width: 1100px) { .annee ul { grid-template-columns: repeat(5, 1fr); } } .annee .mag { width: 100%; } .annee .mag img { aspect-ratio: 120/156; object-fit: cover; } .annee .titre-annee { font-family: var(--sans-serif-font-bold); font-size: var(--font-size-large); line-height: 1; flex: 1; } /* end of /components/annee/annee.scss */ /* /components/article-actions/article-actions.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @media (min-width: 1100px) { .article-actions { position: sticky; top: calc(var(--navbar-height) + var(--gap)); left: 0; width: fit-content; } } .article-actions ul { display: flex; } @media (max-width: 1100px) { .article-actions ul { margin-top: var(--gap); padding-top: var(--gap); margin-inline: var(--gap); border-top: 1px solid; justify-content: center; gap: var(--gap); } } @media (min-width: 1100px) { .article-actions ul { gap: var(--gap-small); flex-direction: column; } } .article-actions ul li { position: relative; } .article-actions ul li .pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 100%; display: flex; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.5s ease-in-out; } @media (min-width: 1100px) { .article-actions ul li .pop { width: max-content; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); } } .article-actions ul li > a, .article-actions ul li > button { --_color: rgba(var(--body-color-rgb), 0.4); width: 100%; display: flex; gap: var(--gap-medium); } @media (min-width: 1100px) { .article-actions ul li > a, .article-actions ul li > button { color: var(--_color); gap: var(--gap-small); flex-direction: column; align-items: center; justify-content: center; } } .article-actions ul li > a span, .article-actions ul li > button span { font-size: var(--font-size-xsmall); place-items: center; display: flex; } @media (max-width: 500px) { .article-actions ul li > a span, .article-actions ul li > button span { display: none; } } @media (min-width: 1100px) { .article-actions ul li > a span, .article-actions ul li > button span { display: block; min-width: 150px; text-align: center; transform: translateY(100%); opacity: 0; transition: all 0.3s ease; pointer-events: none; } } .article-actions ul li > a p, .article-actions ul li > button p { display: none; } .article-actions ul li > a figure, .article-actions ul li > button figure { width: 25px; height: 25px; } @media (min-width: 1100px) { .article-actions ul li > a figure, .article-actions ul li > button figure { scale: 0.9; transform: translateY(-50%); transition: all 0.1s ease-in-out; } } .article-actions ul li > a figure svg, .article-actions ul li > button figure svg { object-fit: contain; } .article-actions ul li[data-pop=true] .pop { opacity: 1; pointer-events: all; } .article-actions ul li[data-pop=true], .article-actions ul li > a:hover, .article-actions ul li > button:hover { --_color: var(--body-color); } .article-actions ul li[data-pop=true] figure, .article-actions ul li > a:hover figure, .article-actions ul li > button:hover figure { scale: 1; transform: translateY(0); } .article-actions ul li[data-pop=true] span, .article-actions ul li > a:hover span, .article-actions ul li > button:hover span { opacity: 1; transform: translateY(0); } /* end of /components/article-actions/article-actions.scss */ /* /components/article-item/article-item.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .article-item a { display: flex; flex-direction: column; gap: var(--gap-medium); transform-origin: top left; transition: transform 0.1s ease-in-out; text-decoration: none; } .article-item a:hover { text-decoration: none; } .article-item a h1:hover, .article-item a h2:hover { text-decoration: underline; } .article-item .article-header h1, .article-item .article-header h2 { font-size: var(--font-size-large); font-family: var(--sans-serif-font-bold); letter-spacing: -0.02rem; } .article-item .article-header .chapo { font-size: var(--font-size-medium); text-wrap: balance; line-height: 1.2; letter-spacing: 0.01rem; } .article-item .article-header .chapo [data-svg=fleche] { display: inline-block; width: 0.8rem; height: 0.8rem; vertical-align: middle; margin-left: 0.2rem; } .article-item .article-header .auteur { display: none; } .article-item figure img { aspect-ratio: var(--_illustration-ratio, var(--illustration-ratio)); object-fit: cover; object-position: 50% 50%; } .article-item figure figcaption { display: none; } /* end of /components/article-item/article-item.scss */ /* /components/articles/articles.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .articles { display: flex; flex-direction: column; row-gap: calc(var(--gap) - 1px); /* Reduce the gap to accommodate the border */; } .articles > * { position: relative; } .articles > *:not(:first-child) { padding-top: calc(var(--gap) / 2); } .articles > *:not(:last-child) { padding-bottom: calc(var(--gap) / 2); } .articles > *:before { content: ""; position: absolute; top: calc(var(--gap) / -2); left: 0; width: 100%; height: 0px; border-bottom: 1px solid var(--body-color); } .main-content > div:first-child:not(.titre-categorie) { margin-top: calc(var(--gap) / 2); } .main-content > *:first-child.titre-categorie { border-top: 0; } .main-content > div:first-child > .articles:first-child > .article-item:first-child::before, .titre-categorie + div > .articles > .article-item:first-child::before { display: none; } /* end of /components/articles/articles.scss */ /* /components/bandeau/bandeau.scss */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .bandeau { --_bandeau-fond: var(--color-jaune); --_bandeau-texte: var(--color-dark); position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--_bandeau-fond); color: var(--_bandeau-texte); transition: all 0.3s ease; border-top: 1px solid var(--_bandeau-fond); z-index: 999; transition: transform 0.5s ease; transform: translateY(0); display: grid; grid-template-columns: 1fr auto; } .bandeau:after { content: "✖"; margin-right: var(--gap-medium); display: flex; align-items: center; cursor: pointer; } @media (min-width: 700px) { .bandeau:after { margin-right: var(--gap); } } .bandeau:not([data-visible]) { transform: translateY(200%); } .bandeau:hover { color: var(--_bandeau-fond); background-color: var(--_bandeau-texte); } .bandeau > a { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-block: var(--gap-small); } @media (min-width: 700px) { .bandeau > a { padding-block: var(--gap-mini); flex-direction: row; gap: var(--gap); } } .bandeau > a h2 { font-family: var(--sans-serif-font-bold); text-align: center; } .bandeau > a p { font-family: var(--sans-serif-font); text-align: center; } @media (min-width: 700px) { .bandeau > a p br { display: none; } } body:has(.bandeau[data-visible]) #template-menu { display: none !important; } html[data-scrolled=max] .bandeau.masquer-au-scroll { transform: translateY(200%); } /* end of /components/bandeau/bandeau.scss */ /* /components/carte/carte.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .carte { border: 1px solid rgba(var(--body-color-rgb), 0.12); border-radius: 14px; padding: var(--gap-ter) var(--gap-alt); background: rgba(var(--body-color-rgb), 0.015); } .carte--accent { border-color: rgba(var(--color-jaune-rgb), 0.55); background: rgba(var(--color-jaune-rgb), 0.08); } /* end of /components/carte/carte.scss */ /* /components/content/content.scss */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .prevnext { max-width: var(--content-width); margin-inline: var(--gap); width: 100%; } .prevnext a { text-decoration: underline; } .prevnext a:hover { text-decoration: none; } .prevnext.next { text-align: right; } .content { --_gap: var(--gap); max-width: var(--content-width); margin-inline: var(--gap); } .content > div:not(:first-child):not(:empty) { margin-top: var(--_gap); } .content > div { display: flex; flex-direction: column; gap: var(--_gap); font-family: var(--content-font); } .content > div ul:not([class]) { all: revert; } .content > div ul:not([class]) li { list-style: disc; } .content > div > p, .content > div > .p { font-size: var(--font-size-content); letter-spacing: var(--font-letter-spacing-content); line-height: var(--font-line-height-content); } .content > div > h2, .content > div > h3, .content > div > h4 { font-family: var(--sans-serif-font-bold); } .content > div .i { font-family: var(--sans-serif-font-bold); font-size: var(--font-size-small); } .content > div .q { font-family: var(--sans-serif-font-bold); margin-bottom: calc(var(--_gap) * -1); font-weight: 0; font-optical-sizing: auto; font-style: normal; display: inline; } .content > div .q, .content > div .q b, .content > div .q strong { font-weight: 100; } .content > div .q + br { margin-bottom: var(--gap-small); } .content > div > figure img, .content > div > .p > figure img { width: 100%; height: auto; aspect-ratio: var(--picture-aspect-ratio); max-width: initial; } .content > div > figure.size-medium, .content > div > .p > figure.size-medium { max-width: 50%; } .content > div > figure.alignleft, .content > div > figure.alignright, .content > div > .p > figure.alignleft, .content > div > .p > figure.alignright { max-width: 100%; width: 100%; margin-bottom: var(--gap); } @media (max-width: 700px) { .content > div > figure, .content > div > .p > figure { max-width: calc(100% + var(--gap) * 2) !important; width: calc(100% + var(--gap) * 2) !important; margin-left: calc(-1 * var(--gap)) !important; } } @media (min-width: 700px) { .content > div > figure.alignleft, .content > div > figure.alignright, .content > div > .p > figure.alignleft, .content > div > .p > figure.alignright { width: 50%; } .content > div > figure.alignleft, .content > div > .p > figure.alignleft { float: left; margin-right: var(--gap); } } @media (min-width: 700px) and (min-width: 1100px) { .content > div > figure.alignleft, .content > div > .p > figure.alignleft { margin-left: -25%; } } @media (min-width: 700px) { .content > div > figure.alignright, .content > div > .p > figure.alignright { float: right; margin-left: var(--gap); } } @media (min-width: 700px) and (min-width: 1100px) { .content > div > figure.alignright, .content > div > .p > figure.alignright { margin-right: -25%; } } .content > div > figure.aligncenter img, .content > div > figure.alignleft img, .content > div > figure.alignright img, .content > div > .p > figure.aligncenter img, .content > div > .p > figure.alignleft img, .content > div > .p > figure.alignright img { aspect-ratio: var(--picture-aspect-ratio); } .content > div > figure.aligncenter, .content > div > .p > figure.aligncenter { margin-inline: auto; } .content > div > figure[class*=size-] img, .content > div > .p > figure[class*=size-] img { object-fit: contain; } .content > div > figure.size-thumbnail picture, .content > div > figure.size-thumbnail img, .content > div > .p > figure.size-thumbnail picture, .content > div > .p > figure.size-thumbnail img { width: 150px; height: 150px; } .content > div > figure.size-thumbnail figcaption, .content > div > .p > figure.size-thumbnail figcaption { display: none; } @media (min-width: 1100px) { .content > div > figure.aligncenter:has([data-resolution=hd]):has([data-orientation=landscape]), .content > div > .p > figure.aligncenter:has([data-resolution=hd]):has([data-orientation=landscape]) { width: calc(var(--viewport-nopadding-width) - var(--marge-content)); margin-left: calc(var(--marge-content) / -2); max-width: initial !important; } .content > div > figure.aligncenter:has([data-resolution=hd]):has([data-orientation=landscape]) img, .content > div > .p > figure.aligncenter:has([data-resolution=hd]):has([data-orientation=landscape]) img { max-height: 90vh; object-fit: cover; } } .content > div > blockquote { text-align: center; font-family: var(--sans-serif-font-bold); font-size: calc(var(--font-size-content) * 1.5); margin-block: 1.063rem; text-wrap: balance; line-height: 1.2; } .content > div > blockquote:has(cite) cite { font-style: normal; } .content > div > blockquote:has(cite) cite:before { display: inline; content: "“"; } .content > div > blockquote:has(cite) cite:after { display: inline; content: "”"; } .content > div > blockquote:has(cite) address { font-style: normal; } .content > div > blockquote > * { display: block; font-style: normal; } @media (min-width: 1100px) { .content > div > blockquote { width: calc(var(--viewport-nopadding-width) - var(--marge-content)); margin-left: calc(var(--marge-content) / -2); } } .content p a:not([role]), .content .p a:not([role]) { text-decoration: underline; } .content p a:not([role]):hover, .content .p a:not([role]):hover { text-decoration: none; } /* end of /components/content/content.scss */ /* /components/ctas/ctas.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .ctas ul { display: flex; gap: var(--gap-small); } .ctas ul > li a { white-space: nowrap; font-family: var(--sans-serif-font-bold); font-size: var(--font-size-xsmall); } @media (min-width: 1100px) { .ctas ul > li a { font-size: var(--font-size-medium); } } @media (min-width: 1500px) { .ctas ul > li a { font-size: var(--font-size-medium); } } /* end of /components/ctas/ctas.scss */ /* /components/dark-mode-toggle/dark-mode-toggle.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .dark-mode-toggle label { color: var(--block-color); position: relative; cursor: pointer; display: block; width: var(--icone-size-xxlarge); height: var(--icone-size-xxlarge); } .dark-mode-toggle label > * { display: block; width: 100%; height: 100%; } .dark-mode-toggle label input { z-index: 2; opacity: 0; } .dark-mode-toggle label svg { z-index: 1; } .dark-mode-toggle label input, .dark-mode-toggle label svg { position: absolute; inset: 0; } .dark-mode-toggle svg { opacity: 1; transition: all 0.5s ease-in-out; } .dark-mode-toggle:has(input:checked) .light { display: none; } .dark-mode-toggle:has(input:checked) [data-svg=theme-light] { opacity: 0; pointer-events: none; } .dark-mode-toggle:not(:has(input:checked)) .dark { display: none; } .dark-mode-toggle:not(:has(input:checked)) [data-svg=theme-dark] { opacity: 0; pointer-events: none; } /* end of /components/dark-mode-toggle/dark-mode-toggle.scss */ /* /components/deux-colonnes/deux-colonnes.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } [class*=deux-colonnes] { --_display-date: none; --_display-edition: none; display: flex; flex-direction: column; gap: calc(var(--gap) + 1px); } @media (max-width: 700px) { [class*=deux-colonnes] > *:not(:last-child):after { display: block; content: ""; width: 100%; height: 1px; background-color: var(--body-color); transform: translateY(calc(var(--gap) / 2)); } } @media (min-width: 700px) { [class*=deux-colonnes] { display: grid; grid-template-columns: auto var(--small-column-width); gap: calc(var(--gap) + 1px); } [class*=deux-colonnes] > .articles:last-of-type { --_illustration-ratio: 1; position: relative; } [class*=deux-colonnes] > .articles:last-of-type .article-item > * { overflow: hidden; } [class*=deux-colonnes] > .articles:last-of-type:before { top: 0; position: absolute; content: ""; background-color: var(--body-color); height: 100%; width: 1px; transform: translateX(calc(var(--gap) / -2)); } } @media (min-width: 700px) { .deux-colonnes { flex-direction: row; } .deux-colonnes > *:first-child { flex: 1; } } @media (min-width: 700px) { [class*=deux-colonnes] > .articles:last-of-type { --_illustration-ratio: 1; position: relative; } [class*=deux-colonnes] > .articles:last-of-type .article-item > * { overflow: hidden; } [class*=deux-colonnes] > .articles:last-of-type .article-item h1, [class*=deux-colonnes] > .articles:last-of-type .article-item h2 { font-size: var(--font-size-bof); } [class*=deux-colonnes] > .articles:last-of-type .article-item .chapo { font-size: var(--font-size-small); } } /* end of /components/deux-colonnes/deux-colonnes.scss */ /* /components/deux-colonnes-egales/deux-colonnes-egales.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @media (min-width: 700px) { .deux-colonnes-egales { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .deux-colonnes-egales > .articles:first-child { --_illustration-ratio: 3/4; } .deux-colonnes-egales > .articles:last-child { --_illustration-ratio: 4/3; } } /* end of /components/deux-colonnes-egales/deux-colonnes-egales.scss */ /* /components/galerie/galerie.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .galerie { max-width: calc(100% + var(--gap) * 2); width: calc(100% + var(--gap) * 2); margin-left: calc(-1 * var(--gap)); } .galerie .galerie-images { gap: var(--gap); --_illustration-ratio: 4/5; display: flex; flex-direction: column; } @media (min-width: 1100px) { .galerie figure picture { aspect-ratio: var(--picture-aspect-ratio); } } .galerie figure img { aspect-ratio: var(--_illustration-ratio); object-fit: cover; object-position: 50% 50%; } @media (min-width: 1100px) { .galerie { max-width: initial; width: calc(var(--viewport-nopadding-width) - var(--marge-content)); margin-left: calc(var(--marge-content) / -2); } } @media (max-width: 1100px) { .galerie.flex .galerie-images .galerie-caption { display: none !important; } } @media (min-width: 1100px) { .galerie.flex .galerie-images { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .galerie.flex .galerie-images figure { width: var(--_width); } .galerie.flex .galerie-images figure picture { width: 100%; height: 100%; } .galerie.flex .galerie-images figure picture img { aspect-ratio: initial; object-fit: initial; } } .galerie:not(.flex) picture { aspect-ratio: initial !important; } @media (min-width: 1100px) { .galerie:not(.flex) .galerie-images { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } } /* end of /components/galerie/galerie.scss */ /* /components/global-header/global-header.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .header { --_gap: var(--gap-ter); --_gap-logo-extra: calc(var(--_gap) / 2); --_gap-logo: calc(var(--_gap) + var(--_gap-logo-extra)); --_color: var(--body-color); height: var(--_height); z-index: var(--secondary-z-index); top: 0; border-bottom: 1px solid var(--body-color); background-color: var(--_background); color: var(--_color); } .header a:hover { text-decoration: underline; } @media (min-width: 700px) { .header { --_gap: var(--gap); } } @media (min-width: 1100px) { .header { margin-top: 0; } } .header .header-top { display: flex; align-items: center; height: var(--gap-xlarge); gap: var(--gap-small); } .header .header-top a { font-size: var(--font-size-medium); } @media (min-width: 500px) { .header .header-top { gap: var(--gap-large); } } @media (min-width: 700px) { .header .header-top { height: var(--gap); } } .header a { font-family: var(--sans-serif-font); text-transform: uppercase; white-space: nowrap; } .header .large { display: none; } .header .navigation { flex: 1; height: 100%; position: relative; } .header .navigation > div { position: absolute; inset: 0; width: 100%; display: flex; } @media (max-width: 700px) { .header .navigation:after { background-image: linear-gradient(90deg, rgb(var(--body-background-rgb), 0.2), var(--body-background)); content: " "; display: block; filter: blur(0.2rem); height: 90%; pointer-events: none; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 2rem; } .header .navigation > div { overflow: visible; overflow-x: auto; scroll-snap-type: x mandatory; } .header .navigation ul { margin-right: 3rem; } .header .navigation li { scroll-snap-align: start; } } .header-main { display: flex; padding-block: var(--_gap-logo); gap: var(--gap); border-top: 1px solid var(--body-color); position: relative; } .header-main .logo a { display: block; width: clamp(100px, 50vw, 600px); aspect-ratio: 970/130; overflow: visible; position: relative; } .header-main .logo a svg { position: absolute; width: 100%; height: 200%; transform: translateY(-23%); } .header-main .header-actions { position: relative; flex: 1; display: flex; justify-content: flex-end; } .header-main .header-actions ul { right: 0; top: 0; height: 100%; position: absolute; display: flex; gap: var(--gap-small); flex-direction: row; } @media (min-width: 700px) { .header-main .header-actions ul { flex-direction: column; } } .header-main .header-actions ul li { display: block; } .header-main .header-actions ul li:first-child { flex: 1; } .header-main .header-actions ul a, .header-main .header-actions ul button { color: inherit; display: block; width: var(--icone-size-large); height: var(--icone-size-large); } .header > * > * > ul, .header > * > * > * > ul, .navbar > * > * > ul, .navbar > * > * > * > ul { gap: var(--gap-medium); display: flex; align-items: center; font-size: var(--font-size-xsmall); } @media (min-width: 1500px) { .header > * > * > ul, .header > * > * > * > ul, .navbar > * > * > ul, .navbar > * > * > * > ul { font-size: var(--font-size-small); gap: var(--gap); } } /* end of /components/global-header/global-header.scss */ /* /components/header-homepage/header-homepage.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for header-homepage component */ .header-homepage { background-color: #f9f9f9; } .header-homepage .header_liste { color: black; display: flex; align-items: center; list-style: none; padding: 1.5rem; justify-content: space-around; width: 80%; margin: auto; font-family: var(--header-font); font-weight: 600; text-transform: uppercase; } /* end of /components/header-homepage/header-homepage.scss */ /* /components/hero/hero.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .hero { --_width: 100%; --_gap: var(--gap); --_padding-bottom: var(--gap); --_padding-top: 0; --_background: var(--hero-background, var(--block-background)); --_color: var(--block-color); --_direction: column; --_padding-inline: 0; --_hero_header_top_margin: 0; width: var(--_width); padding-inline: var(--_padding-inline); padding-bottom: var(--_padding-bottom); padding-top: var(--_padding-top); background-color: var(--_background); color: var(--_color); } .hero > div { display: flex; gap: var(--_gap); flex-direction: column; margin: 0 auto; } .hero .illustration { order: 1; } .hero.vertical .illustration { aspect-ratio: var(--override-image-ratio, 5/4); justify-content: start; } @media (min-width: 700px) { .hero:not(.vertical) .illustration { aspect-ratio: 4/5; } } .hero figcaption > span { visibility: hidden; } @media (min-width: 700px) { .hero { --_gap: var(--gap-large); --_padding-inline: var(--_gap); --_padding-bottom: 0; --_padding-top: var(--_gap); } .hero.vertical > div { display: flex; flex-direction: column; } .hero.vertical > div .illustration { aspect-ratio: var(--override-image-ratio, 5/4); justify-content: center; } .hero.vertical > div header { margin-bottom: var(--_gap); } .hero.vertical > div header > * { max-width: 80vw; } .hero:not(.vertical) header > * { max-width: 35vw; } .hero:not(.vertical) > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .hero:not(.vertical) > div header { order: 1; } .hero:not(.vertical) > div .illustration { order: 2; } .hero .illustration picture { flex: 1; position: relative; } .hero .illustration picture img { position: absolute; width: 100%; height: 100%; } .hero header { padding: 0 var(--_gap) 0 0; } } [class*=hero] .illustration img { margin: 0 auto; max-width: var(--hero-image-width); object-fit: var(--override-image-object-fit, cover); } @media (min-width: 700px) { [class*=hero] .meta { margin-bottom: var(--gap); } } /* end of /components/hero/hero.scss */ /* /components/hero-alt/hero-alt.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .hero-alt { padding-block: var(--gap); width: 100%; display: flex; justify-content: center; border-bottom: 1px solid var(--body-color); } .hero-alt > * { max-width: var(--content-width); } .hero-alt .illustration { margin-bottom: var(--gap); } .hero-alt .illustration img { border-radius: var(--image-border-radius); aspect-ratio: var(--override-image-ratio, 1); } .hero-alt:not(.centered) .meta ul { justify-content: flex-start; } .hero-alt .meta ul > li { line-height: 1; } .hero-alt .reading-time { display: none; } .hero-alt .hero-header > *, .hero-alt .hero-header .chapo { margin-bottom: var(--gap); } .hero-alt .hero-header h1 { font-family: var(--sans-serif-font-bold); text-transform: initial; } .hero-alt .hero-header .meta { display: none; } /* end of /components/hero-alt/hero-alt.scss */ /* /components/lien-pop-mag/lien-pop-mag.scss */ @charset "UTF-8"; @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for lien-pop-mag component */ .lien-pop-mag { position: relative; } .lien-pop-mag nav { transform-origin: top; opacity: 0; display: flex; gap: var(--gap-small); width: calc(100vw - var(--gap)); left: calc(var(--gap) / -2); flex-direction: column; z-index: var(--ultimate-z-index); background-color: var(--body-background); border: 1px solid var(--body-color); padding: var(--gap-small); position: absolute; top: calc(100% + var(--gap-mini)); transition: opacity 0.1s ease-in-out; pointer-events: none; } .lien-pop-mag nav:before { content: ""; position: absolute; width: 100%; height: var(--gap); bottom: 100%; left: 0; cursor: pointer; } @media (max-width: 700px) { .lien-pop-mag nav { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } } @media (min-width: 700px) { .lien-pop-mag nav { display: flex; transition: all 0.1s ease-in-out; transform: scaleY(0); flex-direction: row; left: initial; width: 300px; } } .lien-pop-mag nav > div { display: flex; flex-direction: column; } .lien-pop-mag nav > div > header { flex: 1; font-family: var(--sans-serif-font-bold); font-size: var(--font-size-small); } .lien-pop-mag nav > div > ul { display: flex; flex-direction: column; } .lien-pop-mag:hover nav, .lien-pop-mag.ouvert nav { opacity: 1; pointer-events: all; } @media (min-width: 700px) { .lien-pop-mag:hover nav, .lien-pop-mag.ouvert nav { transform: scaleY(1); } } .lien-pop-mag > a { display: flex; gap: var(--gap-mini); } .lien-pop-mag > a:after { display: inline-block; content: "▼"; transform: scaleY(0.6); } /* end of /components/lien-pop-mag/lien-pop-mag.scss */ /* /components/main-logo/main-logo.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for main-logo component */ /* end of /components/main-logo/main-logo.scss */ /* /components/menu/menu.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .menu { --_text-color: var(--block-color); --_background-color: var(--block-background); transition: transform 0.5s ease-in-out; transform: translateX(100vw); background-color: var(--_background-color); color: var(--_text-color); --_direction: column; position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; width: 100vw; overflow: hidden; overflow: clip; overscroll-behavior: contain; opacity: 0; z-index: var(--main-z-index); display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); } @media (min-width: 1100px) { .menu { left: 70vw; width: calc(30vw - 2px); border-left: 2px solid var(--block-color); } } .menu ul { display: flex; flex-direction: column; } .menu ul li { text-transform: uppercase; font-weight: 800; font-size: var(--font-size-large); } .menu ul li a:has(svg) { display: flex; align-items: center; gap: var(--gap-small); } .menu ul li a svg { width: var(--icone-size); height: var(--icone-size); } .menu ul li a [data-svg=fleche] { transform: rotate(-45deg); } .menu ul li ul li { font-size: var(--font-size-medium); } .menu .menu-actions { display: flex; justify-content: flex-end; } .menu .menu-actions button { cursor: pointer; background: none; margin: 0; padding: 0; border: 0; color: inherit; width: var(--icone-size-xlarge); height: var(--icone-size-xlarge); display: flex; justify-content: center; align-items: center; font-size: var(--font-size-xxlarge); } .menu .menu-content { flex: 1; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; } [data-menu=open] .menu { opacity: 1; transform: translateX(0); } /* Breakpoint: medium - /components/menu/menu-medium-inverse.scss */ @media (max-width: 1100px) { @ media (min-width: 500px) { body: has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .menu .unes { flex: 0 0 20vh; } .menu .unes { gap: var(--gap-small); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .menu .unes a { display: block; height: 100%; aspect-ratio: var(--cover-ratio); flex-shrink: 0; scroll-snap-align: start; } .menu .unes img { width: 100%; height: 100%; object-fit: contain; } } /* end of /components/menu/menu.scss */ /* /components/modale/modale.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .modal { border: none; padding: 0; margin: 0; } .modal::backdrop { background: rgba(0, 0, 0, 0.5); } .modal-backdrop { position: fixed; inset: 0; background: rgba(var(--body-color-rgb), 0.5); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-backdrop.visible { opacity: 1; } .modal { background-color: var(--body-background); color: var(--body-color); border-radius: 0.5rem; opacity: 0; transition: opacity 0.3s ease; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: auto; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); } .modal.visible { opacity: 1; } .modal-content { padding: var(--gap); gap: var(--gap); overflow-y: auto; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; } .modal-content > nav { display: flex; gap: var(--gap-small); justify-content: flex-end; } .modal-content a:not([role]) { text-decoration: underline; } .modal-content a:not([role]):hover { text-decoration: none; } .modal-close { color: inherit; position: absolute; top: var(--gap-small); right: var(--gap-small); background: none; border: none; font-size: var(--font-size); line-height: 1; cursor: pointer; outline: none; box-shadow: none; } /* Desktop minimum size */ @media (min-width: 1100px) { .modal { width: 640px; max-height: 480px; } } /* Mobile style */ @media (max-width: 1100px) { .modal { width: calc(100vw - var(--gap) * 2); max-height: calc(100vh - var(--gap) * 2); } } /* end of /components/modale/modale.scss */ /* /components/navbar/navbar.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .navbar { --_margin: var(--gap-small); --_color: var(--body-color); --_background: var(--body-background); --_content-height: 60%; color: var(--_color); background-color: var(--_background); transition: color 0.2s ease, background-color 0.2s ease; position: sticky; z-index: var(--navbar-index); top: 0; width: 100%; display: flex; justify-content: center; } @media (min-width: 1100px) { .navbar { --_margin: var(--gap); } } .navbar > div { margin: 0 var(--_margin); width: var(--navbar-width); display: flex; height: var(--navbar-height); transition: height 0.2s ease; gap: var(--_margin); } .navbar > div .left button { width: var(--icone-size-large); width: var(--icone-size-large); } .navbar > div .left svg { color: var(--_color); } .navbar > div .left, .navbar > div .center { flex-direction: column; display: flex; justify-content: center; } .navbar > div [data-svg=logo] { transform: translateX(6.5%); } .navbar > div .left svg, .navbar > div .center svg, .navbar > div .right svg { height: var(--icone-size-xlarge); fill: currentColor; } .navbar .left { flex: 1; } .navbar .center ul { justify-content: center; } .navbar .right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: var(--gap); } .navbar .right .ctas { display: flex; text-transform: uppercase; justify-content: flex-end; align-items: center; height: 100%; } .navbar .right ul { justify-content: flex-end; } .navbar .right > div { display: flex; justify-content: flex-end; } html:not([data-menu=open]) [data-navbar=sticking] { --navbar-height: 48px; } html:not([data-menu=open]) [data-navbar=sticking] .navbar { --_color: var(--body-color); --_background: var(--body-background); --_content-height: 50%; } html:not([data-menu=open]) [data-navbar=sticking] .navbar:after { opacity: 1; } /* end of /components/navbar/navbar.scss */ /* /components/page-content/page-content.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } html:has(.page-content) { --block-background: var(--background-gray); --block-background-rgb: var(--background-gray-rgb); --block-color: var(--color-for-background-gray); --block-color-rgb: var(--color-for-background-gray-rgb); --body-background: var(--background-dark); --body-background-rgb: var(--background-dark-rgb); --body-color: var(--color-for-background-dark); --body-color-rgb: var(--color-for-background-dark-rgb); } .page-content { --_gap: var(--gap-medium); display: flex; flex-direction: column; margin-top: var(--gap); gap: var(--_gap); } .page-content .content { margin-inline: 0; } .page-content .content > div { gap: var(--gap-medium); } .page-content .content > div > p, .page-content .content > div > .p { font-size: var(--font-size-small); letter-spacing: var(--font-letter-spacing-content); line-height: 1.1; } .page-content .content > div > h2, .page-content .content > div > h3, .page-content .content > div > h4 { font-family: var(--sans-serif-font-bold); margin-top: var(--_gap); margin-bottom: 0; } /* end of /components/page-content/page-content.scss */ /* /components/podcast/podcast.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .podcast { display: flex; flex-direction: column; gap: var(--gap); } @media (min-width: 700px) { .podcast { display: grid; grid-template-columns: 300px 1fr; } } .podcast > figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .podcast > header { display: flex; flex-direction: column; gap: var(--gap); justify-content: end; } .podcast > header h3 { font-family: var(--sans-serif-font-bold); font-size: var(--font-size-xxxlarge); text-transform: uppercase; line-height: 1; } .podcast > header > nav { display: flex; gap: var(--gap-small); align-items: flex-end; } .podcast > header > nav ul { display: flex; gap: var(--gap-small); height: fit-content; } .podcast > header > nav ul li { text-transform: uppercase; line-height: 1; font-size: var(--font-size-small); } .podcast > header > nav ul li:not(:first-child) { border-left: 1px solid; padding-left: var(--gap-small); } .podcast > header > nav ul li:hover { text-decoration: underline; } .podcast > header > nav svg { width: var(--icone-size-xlarge); aspect-ratio: 1; } /* end of /components/podcast/podcast.scss */ /* /components/progress/progress.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for progress component */ .progress { background-color: var(--hero-background, var(--block-background)); position: fixed; bottom: 0; left: 0; height: var(--gap-small); width: 0%; } /* end of /components/progress/progress.scss */ /* /components/site-footer/site-footer.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .site-footer { background-color: var(--block-background); color: var(--block-color); display: flex; flex-direction: column; gap: var(--gap); margin-top: var(--gap); padding: var(--gap); } .site-footer > section, .site-footer > section ul { display: flex; justify-content: center; gap: var(--gap); flex-wrap: wrap; } .site-footer .logo a { flex: 1; display: flex; justify-content: center; } .site-footer .logo svg { width: var(--content-width); } .site-footer .socials ul svg { width: var(--icone-size-xlarge); aspect-ratio: 1; } .site-footer .navs div { display: flex; flex-direction: column; gap: var(--gap); } @media (min-width: 1100px) { .site-footer .navs div { gap: var(--gap-small); } } .site-footer .navs div nav.group > ul > li { line-height: 1; text-transform: uppercase; } .site-footer .navs div nav.group > ul > li:first-child { padding-right: var(--gap); border-right: 1px solid var(--block-color); } /* end of /components/site-footer/site-footer.scss */ /* /components/tags/tags.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } ul.tags { display: flex; gap: var(--gap-small); flex-wrap: wrap; margin-block: var(--gap-medium); } ul.tags, ul.tags > li { list-style: none; margin: 0; padding: 0; } ul.tags > li > a, a.tag, span.tag { display: inline-block; background-color: var(--background-brand); color: var(--color-for-background-brand); padding: var(--gap-small) var(--gap-medium); border-radius: 80px; transition: all 0.2s ease-in-out; } ul.tags > li > a:hover, a.tag:hover, span.tag:hover { text-decoration: none; background-color: var(--block-background); } /* end of /components/tags/tags.scss */ /* /components/timeline/timeline.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .timeline { --timeline-gutter: var(--icone-size-small); border-top: 1px solid; display: grid; grid-template-columns: minmax(0, 1fr); } .timeline > .title { font-family: var(--sans-serif-font-bold); } .timeline > div { position: relative; display: flex; flex-direction: column; gap: var(--gap); } .timeline > div::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--timeline-gutter) / 2); width: 1px; background: var(--body-color); } .timeline > div article:not(.event), .timeline > div article.event:not(:has(> *)) { display: none; } .timeline > div article.event { position: relative; z-index: 1; padding-right: calc(var(--timeline-gutter) + var(--gap-medium)); } .timeline > div article.event:not(:empty)::after { content: ""; background: var(--body-color); width: var(--timeline-gutter); height: var(--timeline-gutter); border-radius: 50%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .timeline > div article.event > div { font-family: var(--sans-serif-font); font-size: var(--font-size-small); display: grid; gap: var(--gap-mini); } .timeline > div article.event > div address { line-height: 1.1; opacity: 0.9; font-size: var(--font-size-xsmall); } .timeline > div article.event > div time { text-transform: uppercase; display: grid; } .timeline > div article.event > div time > span { line-height: 1; } .timeline > div article.event > div time:not(:has(> span:nth-child(2))) > span, .timeline > div article.event > div time > span:nth-child(2) { font-family: var(--sans-serif-font-bold); } @media (min-width: 700px) { .timeline > div { display: grid; grid-auto-flow: column; grid-auto-columns: auto; grid-template-rows: repeat(2, auto); gap: 0; row-gap: 0; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: var(--gap-mini); } .timeline > div::before { display: none; } .timeline > div article:not(.event) { display: block; } .timeline > div article.event:not(:has(> *)) { display: block; width: var(--gap-large); } .timeline > div article:nth-child(even) { border-top: 4px solid; } .timeline > div article.event { padding-right: 0; } .timeline > div article.event > div { border-left: 1px solid; padding-left: var(--gap-mini); } .timeline > div article.event:not(:empty)::after { left: 0; right: auto; top: auto; } .timeline > div article.event:nth-child(2n) > div { padding-top: var(--gap-medium); } .timeline > div article.event:nth-child(2n)::after { top: -2px; bottom: auto; transform: translate(-50%, -50%); } .timeline > div article.event:nth-child(2n+1) { display: flex; align-items: end; } .timeline > div article.event:nth-child(2n+1) > div { padding-bottom: var(--gap-medium); } .timeline > div article.event:nth-child(2n+1)::after { bottom: -2px; top: auto; transform: translate(-50%, 50%); } } @media (min-width: 1100px) { .timeline { width: calc(var(--viewport-nopadding-width) - var(--marge-content)); margin-left: calc(var(--marge-content) / -2); max-width: initial !important; } } /* end of /components/timeline/timeline.scss */ /* /components/titre-categorie/titre-categorie.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .titre-categorie { text-transform: uppercase; font-size: var(--font-size-xxlarge); border-top: 1px solid var(--body-color); border-bottom: 1px solid var(--body-color); line-height: 0.95; padding-top: var(--gap-small); padding-bottom: calc(var(--gap-small) * 0.95); font-family: var(--sans-serif-font); font-weight: 800; } .header + .titre-categorie { border-top: 0; margin-top: calc(-1 * var(--gap)); } /* end of /components/titre-categorie/titre-categorie.scss */ /* /components/top-item/top-item.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .top-item { display: flex; flex-direction: column; gap: var(--gap); } .top-item:not(:last-child) { padding-bottom: var(--gap); border-bottom: 1px solid var(--body-color); } @media (min-width: 700px) { .top-item:not(:last-child) { border-bottom: 0; } } .top-item h2 { font-family: var(--sans-serif-font-bold); text-transform: initial; font-size: var(--font-size-xxlarge); line-height: 1; } .top-item .subtitle { line-height: 1.2; font-family: var(--sans-serif-font-bold); text-transform: initial; font-size: var(--font-size-bof); margin-bottom: var(--gap); } .top-item .illustration { max-width: calc(100% + var(--gap) * 2) !important; width: calc(100% + var(--gap) * 2) !important; margin-left: calc(-1 * var(--gap)) !important; } .top-item .illustration figcaption { margin-inline: 0; } .top-item .illustration:not(.no-crop) img { aspect-ratio: 4/5; object-fit: cover; } @media (min-width: 700px) { .top-item:has(.illustration) { display: grid; grid-template-columns: 300px 1fr; gap: 0; column-gap: var(--gap-xlarge); } .top-item.centered > * { align-self: center; } .top-item > div { margin-block: var(--gap-medium); } } @media (min-width: 700px) { .content > div:has(.top-item) .top-item:nth-child(even) { grid-template-columns: 1fr 300px; } .content > div:has(.top-item) .top-item:nth-child(even) > figure { order: 2; } .content > div:has(.top-item) .top-item:nth-child(even) > div { order: 1; } } /* end of /components/top-item/top-item.scss */ /* /components/trois-colonnes/trois-colonnes.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .trois-colonnes { position: relative; } .trois-colonnes > .articles { --_display-date: none; --_display-edition: none; display: flex; flex-direction: column; gap: calc(var(--gap) + 1px); } @media (min-width: 700px) { .trois-colonnes > .articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); --_illustration-ratio: 3/4; } .trois-colonnes > .articles:before { content: ""; position: absolute; top: calc(var(--gap) / -2); left: 0; width: 100%; height: 1px; background: var(--body-color); } .trois-colonnes > .articles .article-item { position: relative; padding-block: 0; height: 100%; } .trois-colonnes > .articles .article-item:first-child:before { display: none; } .trois-colonnes > .articles .article-item:not(:first-child):before { top: 0; position: absolute; content: ""; height: 100%; width: 1px; border-left: 1px solid var(--body-color); transform: translateX(calc(var(--gap) / -2)); } } @media (min-width: 700px) { .titre-categorie + .trois-colonnes > .articles:before { display: none; } } /* end of /components/trois-colonnes/trois-colonnes.scss */ /* /components/une-colonne/une-colonne.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for une-colonne component */ @media (min-width: 1100px) { .une-colonne .articles .article-item[data-mode=v2] > a { display: grid; grid-template-columns: 2fr 1fr; gap: 0; } .une-colonne .articles .article-item[data-mode=v2] > a > .article-infos { display: none; } .une-colonne .articles .article-item[data-mode=v2] > a .illustration { flex: auto; } .une-colonne .articles .article-item[data-mode=v2] > a .article-header { display: flex; gap: calc(var(--gap) / 2); flex-direction: column; justify-content: center; padding-left: var(--gap); } .une-colonne .articles .article-item[data-mode=v2] > a .article-header h1, .une-colonne .articles .article-item[data-mode=v2] > a .article-header h2 { font-size: var(--font-size-small-title); } .une-colonne .articles .article-item[data-mode=v2] > a .article-header .surtitre { font-size: var(--font-size-intermediary); } .une-colonne .articles .article-item[data-mode=v2] > a .article-header .chapo { font-size: var(--font-size-intermediary); } .une-colonne .articles:not([data-mode=v2]):first-child .article-infos { font-size: var(--font-size-intermediary); } } .article-item:not(.une-colonne .article-item) > a .article-header .article-infos { display: none !important; } /* end of /components/une-colonne/une-colonne.scss */ /* /components/une-colonne-archive/une-colonne-archive.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } @media (min-width: 700px) { .une-colonne-archive > .articles > .article-item > a { display: grid; grid-template-columns: var(--small-column-width) 1fr; grid-template-rows: auto auto; gap: var(--gap); row-gap: var(--gap-small); } .une-colonne-archive > .articles > .article-item > a .article-infos { grid-column: 2; grid-row: 1; } .une-colonne-archive > .articles > .article-item > a .illustration { grid-column: 1; grid-row: 1/span 2; display: flex; align-items: center; justify-content: center; } .une-colonne-archive > .articles > .article-item > a > .article-header { grid-column: 2; grid-row: 2; } .une-colonne-archive > .articles > .article-item > a .article-infos:has(span:not(:empty)) .surtitre { flex: initial; } .une-colonne-archive > .articles > .article-item > a .article-infos:has(span:not(:empty)) .surtitre:not(:empty):after { content: " - "; display: inline-block; margin-left: var(--gap-small); } } /* end of /components/une-colonne-archive/une-colonne-archive.scss */ /* /components/user-actions/user-actions.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .user-actions:not(:has(li)) { display: none; } .user-actions > ul > li > a { display: block; font-family: var(--sans-serif-font-bold); width: var(--icone-size-large); height: var(--icone-size-large); border-radius: calc(var(--icone-size-large) / 2); overflow: hidden; display: block; position: relative; } .user-actions > ul > li > a > svg { object-fit: cover; width: var(--icone-size-large); height: var(--icone-size-large); max-width: initial; max-height: initial; } .user-actions > ul > li > a > img { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: initial; max-height: initial; } .user-actions > ul > li > a > img[src=""] { display: none; } .user-actions > ul > li > a > img:has(> img) { position: absolute; border: 1px solid white; border-radius: 50%; overflow: hidden; } .user-actions > ul > li { position: relative; } .user-actions > ul > li > ul { --_border-width: 1px; opacity: 1; transform-origin: top right; transform: scaleX(1); transition: all 0.1s ease-in-out; position: absolute; right: calc(100% + var(--gap-small)); top: 0; display: flex; align-items: end; flex-direction: column; background-color: var(--body-background); color: var(--body-color); border: var(--_border-width) solid var(--body-color); padding: var(--gap-small) var(--gap); z-index: var(--ultimate-z-index); font-size: var(--font-size-medium); } .user-actions > ul > li > ul::after { position: absolute; content: ""; top: calc(var(--_border-width) * -1); left: 100%; width: calc(var(--icone-size-large) + var(--_border-width) + var(--gap-small)); height: calc(100% + var(--_border-width) * 2); cursor: pointer; } .user-actions > ul > li > ul::before { top: calc(var(--icone-size-large) / 2 - var(--_border-width)); left: calc(100% + var(--_border-width)); content: ""; position: absolute; width: var(--gap-small); border-bottom: var(--_border-width) solid var(--body-color); } .user-actions > ul > li > ul > li { text-align: right; white-space: nowrap; text-transform: uppercase; } .user-actions > ul > li > ul > li:first-child { margin-bottom: var(--gap-small); } .user-actions > ul > li > ul > li a:hover { text-decoration: underline; } @media (min-width: 700px) { .user-actions > ul > li > ul { font-size: var(--font-size-small); } } .user-actions > ul > li:not(:hover) > ul { opacity: 0; pointer-events: none; transform: scaleX(0); } /* end of /components/user-actions/user-actions.scss */ /* /fragments/article-header/article-header.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .article-header { display: flex; flex-direction: column; gap: var(--gap-small); } /* end of /fragments/article-header/article-header.scss */ /* /fragments/article-infos/article-infos.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .article-infos { text-transform: uppercase; display: flex; width: 100%; line-height: 1; gap: var(--gap-small); } .article-infos .surtitre { flex: 1; } .article-infos time { display: var(--_display-date, none); } .article-infos span { display: var(--_display-edition, block); } body.tax-edition { --_display-date: block; --_display-edition: none; } body.no-surtitre .article-infos { display: none !important; } /* end of /fragments/article-infos/article-infos.scss */ /* /fragments/article-meta/article-meta.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .meta ul { font-family: sans-serif; text-transform: uppercase; font-size: var(--font-size-xxsmall); display: flex; gap: var(--gap-small); line-height: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; white-space: nowrap; } .meta ul > li:not(:last-of-type) { border-right: 1px solid; padding-right: var(--gap-small); } @media (max-width: 1500px) { .meta ul > li:first-of-type { line-height: 1.4; white-space: wrap; flex: 0 0 100%; border-right: 0; padding-right: 0; text-align: center; } } @media (max-width: 1800px) { .meta ul.multiline > li:first-of-type { line-height: 1.4; white-space: wrap; flex: 0 0 100%; border-right: 0; padding-right: 0; } } .meta ul svg { display: inline-block; vertical-align: bottom; height: 1em; width: 1em; } @media (min-width: 1800px) { .meta ul { gap: var(--gap-medium); font-size: var(--font-size-small); } } /* end of /fragments/article-meta/article-meta.scss */ /* /fragments/auteur/auteur.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for auteur fragment */ /* end of /fragments/auteur/auteur.scss */ /* /fragments/bloc/bloc.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } /* Styles for bloc fragment */ /* end of /fragments/bloc/bloc.scss */ /* /fragments/bouton/bouton.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } body { --pico-primary-background: var(--color-jaune); --pico-primary-border: rgba(var(--color-jaune), 0.5); --pico-primary-inverse: var(--color-dark); } body a:hover { --pico-primary-hover-background: var(--color-dark); --pico-primary-hover-border: var(--color-black); --pico-primary-inverse: var(--color-jaune); } .bouton { all: unset; display: inline-block; cursor: pointer; } /* end of /fragments/bouton/bouton.scss */ /* /fragments/bouton-icone/bouton-icone.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .bouton-icone { background: none; border: none; color: inherit; border: 1px solid currentColor; border-radius: var(--icone-size); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-small); gap: var(--gap-mini); padding: var(--gap-mini) var(--gap-small); } .bouton-icone:is(a) { text-decoration: none; } .bouton-icone > span { text-transform: lowercase; white-space: nowrap; } .bouton-icone > svg { color: inherit; width: var(--icone-size-small); height: var(--icone-size-small); max-width: unset; } /* end of /fragments/bouton-icone/bouton-icone.scss */ /* /fragments/chapo/chapo.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .chapo { text-wrap: balance; } .chapo:empty { display: none !important; } /* end of /fragments/chapo/chapo.scss */ /* /fragments/container/container.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .container { margin: 0 var(--gap-medium); width: calc(100vw - 2 * var(--gap-medium)); } @media (min-width: 1100px) { .container { width: var(--site-width); overflow: hidden; margin: 0 auto; } } /* end of /fragments/container/container.scss */ /* /fragments/content-grid/content-grid.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .content-grid { display: flex; flex-direction: column; } @media (max-width: 1100px) { .content-grid .content { order: 1; } .content-grid aside:has(.article-actions) { order: 2; } .content-grid aside:empty { display: none; } } @media (min-width: 1100px) { .content-grid { display: grid; grid-template-columns: 1fr auto 1fr; margin-inline: var(--gap); width: calc(100% - var(--gap) * 2); } .content-grid .content { margin: 0; } } /* end of /fragments/content-grid/content-grid.scss */ /* /fragments/hero-header/hero-header.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .hero-header { order: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-inline: var(--_gap); } .hero-header > * { text-align: center; } .hero-header .hero-header-top { display: none; } .hero-header h1 { margin-bottom: var(--gap-large); } @media (min-width: 1100px) { .hero-header h1 { margin-bottom: var(--gap-xlarge); } } .hero-header .chapo { margin-bottom: var(--gap-large); } .hero-header h1 { font-family: var(--sans-serif-font); text-transform: uppercase; } .hero-header .chapo { font-weight: var(--font-bold); line-height: 1.3; font-family: var(--subhead-font); font-size: var(--font-size-large); } @media (min-width: 1500px) { .hero-header .chapo { font-size: var(--font-size-medium); } } @media (min-width: 1800px) { .hero-header .chapo { font-size: var(--font-size-large); } } .hero-header h1 { font-size: var(--font-step-1); } @media (min-width: 1100px) { .hero-header h1 { font-size: var(--font-step-2); } } @media (min-width: 1500px) { .hero-header h1 { font-size: var(--font-step-3); } } @media (min-width: 1800px) { .hero-header h1 { font-size: var(--font-step-4); } } /* end of /fragments/hero-header/hero-header.scss */ /* /fragments/illustration/illustration.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .illustration { display: flex; flex-direction: column; justify-content: center; overflow: hidden; align-items: flex-end; } .illustration picture, .illustration img { width: 100%; } .illustration figcaption { width: calc(100% - 2 * (var(--gap-small))); display: var(--override-image-caption-display, flex); flex-direction: column; gap: var(--gap-mini); margin-top: var(--gap-small); font-size: var(--font-size-xsmall); margin-inline: var(--gap-small); } @media (min-width: 700px) { .illustration figcaption { width: 100%; margin-inline: 0; } } @media (min-width: 1100px) { .illustration figcaption { gap: var(--gap-small); margin-inline: 0; margin-top: var(--gap-mini); align-items: flex-start; flex-direction: row; } .illustration figcaption > * { display: flex; align-items: flex-start; min-height: var(--gap); } .illustration figcaption > span { flex: 1; text-align: left; } } .illustration > * { color: var(--body-color-alt); } .illustration cite { font-style: normal; font-family: sans-serif; font-size: smaller; } .illustration.wide figcaption { margin-top: 0; align-items: center; flex-direction: row; } .illustration.wide figcaption > * { display: flex; align-items: center; height: var(--gap); } .illustration.wide figcaption > span { flex: 1; } /* end of /fragments/illustration/illustration.scss */ /* /fragments/surtitre/surtitre.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .surtitre { font-family: var(--sans-serif-font); text-transform: uppercase; line-height: 0.95; } /* end of /fragments/surtitre/surtitre.scss */ /* /fragments/symbole-premium/symbole-premium.scss */ @media (min-width: 500px) { body:has(meta[name=is-template]):after { content: "tiny"; } } @media (min-width: 700px) { body:has(meta[name=is-template]):after { content: "small"; } } @media (min-width: 1100px) { body:has(meta[name=is-template]):after { content: "medium"; } } @media (min-width: 1500px) { body:has(meta[name=is-template]):after { content: "large"; } } @media (min-width: 1800px) { body:has(meta[name=is-template]):after { content: "xlarge"; } } .symbole-premium { display: inline-block; width: var(--icone-size-small); height: var(--icone-size-small); vertical-align: middle; margin-left: var(--gap-mini); } /* end of /fragments/symbole-premium/symbole-premium.scss */