:root { --text: #565656; --links: #000091; --titles: #161616; --page-background: #F6F8FB; --highlight: #FF9575; --boxes-background: #FFFFFF; --boxes-border: #CBD2DB; --section-titles: #000091; --section-titles-background: #F6F8FB; --header-background: #F6F8FB; --header-links: #FFFFFF; --footer-background: #FFFFFF; --footer-links: #000091; } /* Minified summary design system Etat */ /* * DSFR v1.0.0-rc1.0 | restricted use */ /* FIX RESPONSIVE TABLEAU */ @media screen and (min-width: 581px) { .table-basic thead th { padding: 13px 3px; position: sticky; top: 0; z-index: 1; } .table-basic thead th:first-child, .table-basic tbody th { padding-left: 13px; } .table-basic tr td, .table-basic tbody th { font-weight: normal; border-top: 1px solid #dee5ef; } .table-basic tr td { padding: 13px 3px; } } @media screen and (max-width: 768px) { .fr-table table, .fr-table tbody { display: block; } .fr-table thead { display: none; } .fr-table tbody { width: 100%; } .fr-table tbody tr { display: flex; flex-direction: column; font-weight: normal; border-top: 1px solid #dee5ef; } .fr-table tbody tr > * { display: grid; padding: 0; gap: 13px; align-items: center; grid-template-columns: minmax(10em, 30%) 1fr; } .fr-table tbody tr > *:before { content: attr(data-name); display: block; padding: 6px 13px; font-weight: 700; } .fr-table th { font-weight: 300; } .fr-link--icon-right { justify-content: flex-end; } } main { margin: 0px 10px; } /************ Portal stylesheet ************/ :root { --links: #000091; --page-background: #F5F5F5; --header-links: #ffffff; --titles: #2C3F56; --section-titles: #FFFFFF; --highlight: #000091; --footer-links: #000091; --boxes-border: #E5E5E5; --boxes-background: #FFFFFF; --header-background: #FFFFFF; --footer-background: #000091; --text: #333333; --section-titles-background: #F6F8FB; } /**** HEADER Common to all displays ****/ /**** DESKTOP SPECIFIC (width >= breakpoint) 1000 by default *****/ .ods-front-header:not(.ods-responsive-menu--collapsed) { height: 200px; margin: 0; padding: 0; } .portal-header-logo-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: left; padding-top: 26px; padding-bottom: 26px; } .portal-header-logo-container a { box-shadow: none; text-decoration: none; } .portal-header-logo-container a:hover { text-decoration: none; } .nav-header { width: 100%; display: flex; padding: 0px 100px; align-items: center; background-color: #FF9575; justify-content: center; } .ods-front-header__logo { display: inline-block; width: auto; /* Logo width */ height: 80px; /* Logo height */ } .border-bottom:not(.ods-responsive-menu--collapsed) { border-bottom: 1px solid #f5eded; } .management-menu { position: absolute; top: 0; right: 20%; line-height: 59px; font-size: 0.833rem; } .ods-front-header__menu { margin: 0; } .ods-front-header__management-menu-item { border-right: 2px solid #e7e7e7; padding: 0px 20px 2px 20px; margin: 0; background-color: #fff; border-radius: 0px; } .ods-front-header__management-menu-item:last-child { border-right: none; } .ods-front-header__management-menu-item-link { color: #FF9575; box-shadow: none; padding: 3.5px 10.5px; } .ods-front-header__management-menu-item-link:not(.ods-responsive-menu--collapsed):hover { background-image: linear-gradient(0deg, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0.5)); border-bottom: none; text-decoration: underline; border-radius: 14px; } .ods-front-header__menu-item-link { opacity: 1; color: #565656; display: inline-block; font-size: 1.2rem; font-weight: 400; height: 61px; line-height: 58px; margin: 0; } .ods-front-header__menu-item-link:hover { color: #565656; border-bottom: 3px solid #FFF; --underline-hover-width: var(--underline-max-width); background: rgba(0, 0, 0, 0.04) !important;} .ods-front-header__menu-item-link--active { border-bottom: 3px solid #FF9575; color: #FF9575; } /*** DESKTOP SPECIFIC - END ***/ /****** MOBILE SPECIFIC *******/ .ods-responsive-menu--collapsed .ods-responsive-menu-placeholder__container { height: 120px; text-align: left; } .ods-responsive-menu--collapsed .ods-responsive-menu-placeholder .ods-front-header__portal-brand { display: flex; height: 40px; top: 10px; position: relative; flex-direction: column; align-items: flex-start; width: 50%; } .ods-responsive-menu--collapsed .ods-responsive-menu-placeholder__toggle { color: #1E1E1E; opacity: 1; background-color: #FFF; } /****** MOBILE SPECIFIC, Hamburger menu EXPANDED/OPENED *******/ .ods-responsive-menu-collapsible--expanded .portal-header-logo-container { display: none; } .ods-responsive-menu-collapsible--expanded .ods-responsive-menu-collapsible__content { display: flex; flex-direction: column-reverse; } .ods-responsive-menu-collapsible--expanded .ods-front-header__menu { width: 100%; } .ods-responsive-menu-collapsible--expanded .ods-front-header__menu-item { border-bottom: 1px solid #f5eded; } .ods-responsive-menu-collapsible--expanded .ods-front-header__menu-item-link { color: #565656; display: inline-block; font-size: 1.2rem; font-weight: 400; height: 61px; line-height: 58px; margin: 0; } .ods-responsive-menu-collapsible--expanded .ods-front-header__menu-item-link:hover { color: #FF9575; border-bottom: 0px transparent; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu { padding: 0; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu-item { padding: 15px 0px; border-right: none; border-bottom: 1px solid #f5eded; margin: 0; font-size: 1rem; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu-item-link { color: #6a6a6a; font-size: 1rem; padding: 0px 10px; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu-item-link:hover { color: #FF9575; background-image: none; text-decoration: none; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu-item-link i { font-size: 1rem; } .ods-responsive-menu-collapsible--expanded .ods-front-header__management-menu-item-link:not(.ods-front-header__management-menu-item-link--backoffice) { border-bottom: none; } .ods-responsive-menu-collapsible--expanded .ods-front-header__account-avatar-container { width: 18px; height: 18px; } .ods-responsive-menu-collapsible--expanded .ods-front-header__account-avatar { height: 18px; width: 18px; } .ods-responsive-menu-collapsible--expanded button.ods-responsive-menu-collapsible__toggle-button:before { content: "Fermer"; color: #FF9575; font-size: 1rem; } .ods-responsive-menu-collapsible--expanded .ods-responsive-menu-collapsible__toggle { margin-bottom: 0; } .ods-responsive-menu-collapsible--expanded .ods-responsive-menu-collapsible__toggle-button { color: #FF9575; } .ods-responsive-menu-collapsible--expanded .fix-mobile { padding-left: 0rem; padding-right: 0rem; } /*** MOBILE SPECIFIC, Hamburger menu EXPANDED/OPENED - END ****/ /**** End of HEADER Common to all displays ****/ /**** FOOTER Start ****/ .ods-front-footer { background-color: #FFF; border-top: none; } .footer-logo { height: 70px; } /**** FOOTER End ****/ /**** /explore and others pages ****/ /**** End of /explore and others pages ****/ @charset "UTF-8"; /* Fix special SGSOCIALGOUV */ .MYSITE-header__brand a { color: #08C; } .ods-simple-tabs-container ul > li:before, .ods-simple-tabs-container a:after, .odswidget-select ul > li:before, .odswidget-select a:after, .odswidget-pagination ul > li:before, .odswidget-pagination a:after, .ods-filters ul > li:before, .ods-filters a:after, .ods-api-console ul > li:before, .ods-api-console a:after, .ods-front-header ul > li:before, .ods-front-header a:after, .odswidget ul > li:before, .odswidget a:after, .ods-front-footer ul > li:before, .ods-front-footer a:after { display: none; } .ods-simple-tabs-nav-link { background-color: var(--background-action-low-blue-france); box-shadow: none; color: #161616; font-weight: 700; margin: 0 0.25rem; } .ods-simple-tabs-nav-link:hover { background-color: var(--background-action-low-blue-france-hover) !important; } .hidebreadcrumb { display: none; } @charset "UTF-8"; .ods-simple-tabs-container ul > li:before, .ods-simple-tabs-container a:after, .odswidget-select ul > li:before, .odswidget-select a:after, .odswidget-pagination ul > li:before, .odswidget-pagination a:after, .ods-filters ul > li:before, .ods-filters a:after, .ods-api-console ul > li:before, .ods-api-console a:after, .ods-front-header ul > li:before, .ods-front-header a:after, .odswidget ul > li:before, .odswidget a:after, .ods-front-footer ul > li:before, .ods-front-footer a:after { display: none; } .ods-simple-tabs-nav-link { background-color: var(--background-action-low-blue-france); box-shadow: none; color: #161616; font-weight: 700; margin: 0 0.25rem;} /* Import dsfr, then necessary components */ /* ------------------------------------ *\ CORE \* ------------------------------------ */ @font-face { font-family: "dsfr-icons"; src: url("data:font/truetype;charset=utf-8;base64,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") format("truetype"); } [class^="fr-fi-"]::before, [class*=" fr-fi-"]::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-fi--sm::before, .fr-fi--sm::after { font-size: 1rem !important; } .fr-fi--md::before, .fr-fi--md::after { font-size: 1.5rem !important; } .fr-fi--lg::before, .fr-fi--lg::after { font-size: 2rem !important; } /** * Définitions des symboles des icones **/ .fr-fi-account-fill::before { content: ""; } .fr-fi-account-line::before { content: ""; } .fr-fi-add-circle-line::before { content: ""; } .fr-fi-add-line::before { content: ""; } .fr-fi-alert-fill::before { content: ""; } .fr-fi-alert-line::before { content: ""; } .fr-fi-arrow-down-line::before { content: ""; } .fr-fi-arrow-down-s-line::before { content: ""; } .fr-fi-arrow-left-line::before { content: ""; } .fr-fi-arrow-left-s-first-line::before { content: ""; } .fr-fi-arrow-left-s-line-double::before { content: ""; } .fr-fi-arrow-left-s-line::before { content: ""; } .fr-fi-arrow-right-line::before { content: ""; } .fr-fi-arrow-right-s-last-line::before { content: ""; } .fr-fi-arrow-right-s-line-double::before { content: ""; } .fr-fi-arrow-right-s-line::before { content: ""; } .fr-fi-arrow-right-up-line::before { content: ""; } .fr-fi-arrow-up-line::before { content: ""; } .fr-fi-arrow-up-s-line::before { content: ""; } .fr-fi-calendar-fill::before { content: ""; } .fr-fi-calendar-line::before { content: ""; } .fr-fi-chat-quote-fill::before { content: ""; } .fr-fi-chat-quote-line::before { content: ""; } .fr-fi-check-line::before { content: ""; } .fr-fi-checkbox-circle-fill::before { content: ""; } .fr-fi-checkbox-circle-line::before { content: ""; } .fr-fi-close-circle-fill::before { content: ""; } .fr-fi-close-circle-line::before { content: ""; } .fr-fi-close-line::before { content: ""; } .fr-fi-delete-fill::before { content: ""; } .fr-fi-delete-line::before { content: ""; } .fr-fi-download-line::before { content: ""; } .fr-fi-edit-fill::before { content: ""; } .fr-fi-edit-line::before { content: ""; } .fr-fi-error-warning-fill::before { content: ""; } .fr-fi-error-warning-line::before { content: ""; } .fr-fi-external-link-line::before { content: ""; } .fr-fi-eye-line::before { content: ""; } .fr-fi-eye-off-line::before { content: ""; } .fr-fi-facebook-circle-fill::before { content: ""; } .fr-fi-facebook-circle-line::before { content: ""; } .fr-fi-file-download-fill::before { content: ""; } .fr-fi-file-download-line::before { content: ""; } .fr-fi-file-fill::before { content: ""; } .fr-fi-file-line::before { content: ""; } .fr-fi-file-pdf-fill::before { content: ""; } .fr-fi-file-pdf-line::before { content: ""; } .fr-fi-information-fill::before { content: ""; } .fr-fi-information-line::before { content: ""; } .fr-fi-instagram-fill::before { content: ""; } .fr-fi-linkedin-box-fill::before { content: ""; } .fr-fi-linkedin-box-line::before { content: ""; } .fr-fi-links-fill::before { content: ""; } .fr-fi-lock-fill::before { content: ""; } .fr-fi-lock-line::before { content: ""; } .fr-fi-mail-fill::before { content: ""; } .fr-fi-mail-line::before { content: ""; } .fr-fi-menu-2-fill::before { content: ""; } .fr-fi-menu-fill::before { content: ""; } .fr-fi-pause-circle-fill::before { content: ""; } .fr-fi-pause-circle-line::before { content: ""; } .fr-fi-play-fill::before { content: ""; } .fr-fi-play-line::before { content: ""; } .fr-fi-printer-fill::before { content: ""; } .fr-fi-printer-line::before { content: ""; } .fr-fi-question-fill::before { content: ""; } .fr-fi-question-line::before { content: ""; } .fr-fi-refresh-fill::before { content: ""; } .fr-fi-refresh-line::before { content: ""; } .fr-fi-save-fill::before { content: ""; } .fr-fi-save-line::before { content: ""; } .fr-fi-search-fill::before { content: ""; } .fr-fi-search-line::before { content: ""; } .fr-fi-subtract-line::before { content: ""; } .fr-fi-theme-fill::before { content: ""; } .fr-fi-twitter-fill::before { content: ""; } .fr-fi-twitter-line::before { content: ""; } .fr-fi-user-fill::before { content: ""; } .fr-fi-user-line::before { content: ""; } .fr-fi-volume-down-fill::before { content: ""; } .fr-fi-volume-down-line::before { content: ""; } .fr-fi-volume-mute-fill::before { content: ""; } .fr-fi-volume-mute-line::before { content: ""; } .fr-fi-volume-up-fill::before { content: ""; } .fr-fi-volume-up-line::before { content: ""; } .fr-fi-youtube-fill::before { content: ""; } /** * Déclaration des fontes */ @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Light.woff2") format("woff2"), url("../theme_font/Marianne-Light.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Light_Italic.woff2") format("woff2"), url("../theme_font/Marianne-Light_Italic.woff") format("woff"); font-weight: 300; font-style: italic; } @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Regular.woff2") format("woff2"), url("../theme_font/Marianne-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Regular_Italic.woff2") format("woff2"), url("../theme_font/Marianne-Regular_Italic.woff") format("woff"); font-weight: 400; font-style: italic; } @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Bold.woff2") format("woff2"), url("../theme_font/Marianne-Bold.woff") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: Marianne; src: url("../theme_font/Marianne-Bold_Italic.woff2") format("woff2"), url("../theme_font/Marianne-Bold_Italic.woff") format("woff"); font-weight: 700; font-style: italic; } @font-face { font-family: Spectral; src: url("../theme_font/Spectral-Regular.woff2") format("woff2"), url("../theme_font/Spectral-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Spectral; src: url("../theme_font/Spectral-ExtraBold.woff2") format("woff2"), url("../theme_font/Spectral-ExtraBold.woff") format("woff"); font-weight: 900; font-style: normal; } *, *::before, *::after { box-sizing: inherit; } :root { box-sizing: border-box; } body { font-family: "Marianne", arial, sans-serif; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; background-color: var(--w); --block-color-hover: rgba(224, 224, 224, 0.5); --block-color-active: rgba(194, 194, 194, 0.5); margin: 0; padding: 0; font-size: 1rem ; line-height: 1.5rem ; } :root[data-fr-theme="dark"] body { --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root[data-fr-transition] body { transition: background-color 0.3s; } button, input[type="button"], input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; border: none; } h6 { font-weight: 700 ; font-size: 1.125rem ; line-height: 1.5rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h6 { font-size: 1.25rem ; line-height: 1.75rem ; } } h5 { font-weight: 700 ; font-size: 1.25rem ; line-height: 1.75rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h5 { font-size: 1.375rem ; line-height: 1.75rem ; } } h4 { font-weight: 700 ; font-size: 1.375rem ; line-height: 1.75rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h4 { font-size: 1.5rem ; line-height: 2rem ; } } h3 { font-weight: 700 ; font-size: 1.5rem ; line-height: 2rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h3 { font-size: 1.75rem ; line-height: 2.25rem ; } } h2 { font-weight: 700 ; font-size: 1.75rem ; line-height: 2.25rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h2 { font-size: 2rem ; line-height: 2.5rem ; } } h1 { font-weight: 700 ; font-size: 2rem ; line-height: 2.5rem ; margin: 0 0 1rem; } @media (min-width: 48em) { h1 { font-size: 2.5rem ; line-height: 3rem ; } } p { font-size: 1rem ; line-height: 1.5rem ; margin: 0 0 2.5rem; } :root { --link-underline: 0 1px 0 0 currentColor; --link-blank-font: normal normal normal 1rem/1 dsfr-icons; --link-blank-content: "\00a0"; } a { text-decoration: none; color: inherit; } [href] { box-shadow: var(--link-underline); } [target="_blank"]::after { content: var(--link-blank-content); font: var(--link-blank-font); } .fr-enlarge-link { position: relative; } .fr-enlarge-link a { outline-width: 0 !important; } .fr-enlarge-link a::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; outline-offset: 2px; outline-style: inherit; outline-color: inherit; outline-width: 2px; z-index: 1; } .fr-raw-link { --link-underline: none; --link-blank-font: none; --link-blank-content: none; } .fr-reset-link { --link-underline: none; --link-blank-font: none; --link-blank-content: none; text-decoration: underline; text-underline-offset: 2px; } :root { --ul-type: "●\00a0\00a0"; --ol-type: decimal; --ul-start: 1rem; --ol-start: 1.5rem; --xl-block: 0.5rem; --li-bottom: 0.25rem; --xl-base: 1em; --ol-content: counters(li-counter, ".") ".\00a0\00a0"; } ul, ol { margin: 0; padding: 0; margin-block-start: var(--xl-block); margin-block-end: var(--xl-block); --xl-size: var(--xl-base); } ul { list-style-type: var(--ul-type); padding-inline-start: var(--ul-start); } ul > li::marker { font-size: calc(var(--xl-size) * 0.9); } ol { list-style-type: var(--ol-type); padding-inline-start: var(--ol-start); counter-reset: li-counter; } ol > li { counter-increment: li-counter; } ol > li::marker { content: var(--ol-content); font-size: var(--xl-size); font-weight: bold; } li { --xl-base: calc(var(--xl-size) * 0.9); padding-bottom: var(--li-bottom); } .fr-raw-list { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; } .fr-list { --ul-type: "●\00a0\00a0"; --ol-type: decimal; --ul-start: 1rem; --ol-start: 1.5rem; --xl-block: 0.5rem; --li-bottom: 0.25rem; --xl-base: 1em; --ol-content: counters(li-counter, ".") ".\00a0\00a0"; } *:focus, *:focus-visible { z-index: 2000; } a { outline-offset: 2px; outline-width: 2px; } a:focus { outline-style: solid; } a:focus:not(:focus-visible) { outline-style: none; } a:focus-visible { outline-style: solid; } a { cursor: pointer; } a:not([href]) { outline-style: none; } a:not([href]) { cursor: not-allowed; } button { outline-offset: 2px; outline-width: 2px; } button:focus { outline-style: solid; } button:focus:not(:focus-visible) { outline-style: none; } button:focus-visible { outline-style: solid; } button:enabled { cursor: pointer; } button:disabled { outline-style: none; } button:disabled { cursor: not-allowed; } input { outline-offset: 2px; outline-width: 2px; } input:focus { outline-style: solid; } input:focus:not(:focus-visible) { outline-style: none; } input:focus-visible { outline-style: solid; } input:disabled { outline-style: none; } input:disabled { cursor: not-allowed; } input[type="checkbox"] + label::before, input[type="radio"] + label::before { outline-offset: 2px; outline-width: 2px; } input[type="checkbox"]:focus + label::before, input[type="radio"]:focus + label::before { outline-style: solid; } input[type="checkbox"]:focus:not(:focus-visible) + label::before, input[type="radio"]:focus:not(:focus-visible) + label::before { outline-style: none; } input[type="checkbox"]:focus-visible + label::before, input[type="radio"]:focus-visible + label::before { outline-style: solid; } input[type="checkbox"]:enabled, input[type="checkbox"]:enabled + label, input[type="radio"]:enabled, input[type="radio"]:enabled + label { cursor: pointer; } input[type="checkbox"]:disabled + label::before, input[type="radio"]:disabled + label::before { outline-style: none; } input[type="checkbox"]:disabled, input[type="checkbox"]:disabled + label, input[type="radio"]:disabled, input[type="radio"]:disabled + label { cursor: not-allowed; } input[type="button"]:enabled, input[type="color"]:enabled, input[type="date"]:enabled, input[type="datetime-local"]:enabled, input[type="file"]:enabled, input[type="image"]:enabled, input[type="month"]:enabled, input[type="range"]:enabled, input[type="reset"]:enabled, input[type="submit"]:enabled, input[type="time"]:enabled, input[type="week"]:enabled { cursor: pointer; } select { outline-offset: 2px; outline-width: 2px; } select:focus { outline-style: solid; } select:focus:not(:focus-visible) { outline-style: none; } select:focus-visible { outline-style: solid; } select:enabled { cursor: pointer; } select:disabled { outline-style: none; } select:disabled { cursor: not-allowed; } textarea { outline-offset: 2px; outline-width: 2px; } textarea:focus { outline-style: solid; } textarea:focus:not(:focus-visible) { outline-style: none; } textarea:focus-visible { outline-style: solid; } textarea:disabled { outline-style: none; } textarea:disabled { cursor: not-allowed; } [tabindex] { outline-offset: 2px; outline-width: 2px; } [tabindex]:focus { outline-style: solid; } [tabindex]:focus:not(:focus-visible) { outline-style: none; } [tabindex]:focus-visible { outline-style: solid; } [tabindex][tabindex="-1"] { outline-style: none; } video[controls], audio[controls] { outline-offset: 2px; outline-width: 2px; } video:focus[controls], audio:focus[controls] { outline-style: solid; } video:focus:not(:focus-visible)[controls], audio:focus:not(:focus-visible)[controls] { outline-style: none; } video:focus-visible[controls], audio:focus-visible[controls] { outline-style: solid; } video, audio { cursor: pointer; } video:not([href])[controls], audio:not([href])[controls] { outline-style: none; } video:not([href]), audio:not([href]) { cursor: not-allowed; } [contenteditable]:not([contenteditable="false"]) { outline-offset: 2px; outline-width: 2px; } [contenteditable]:not([contenteditable="false"]):focus { outline-style: solid; } [contenteditable]:not([contenteditable="false"]):focus:not(:focus-visible) { outline-style: none; } [contenteditable]:not([contenteditable="false"]):focus-visible { outline-style: solid; } details, details > summary:first-of-type { outline-offset: 2px; outline-width: 2px; } details:focus, details > summary:first-of-type:focus { outline-style: solid; } details:focus:not(:focus-visible), details > summary:first-of-type:focus:not(:focus-visible) { outline-style: none; } details:focus-visible, details > summary:first-of-type:focus-visible { outline-style: solid; } details, details > summary:first-of-type { cursor: pointer; } input, select, textarea { font-family: "Marianne", arial, sans-serif; text-rendering: optimizeSpeed; } .fr-hidden { display: none !important; } @media (min-width: 0) { .fr-hidden-xs { display: none !important; } } .fr-displayed-xs { display: none !important; } @media (min-width: 0) { .fr-displayed-xs { display: inherit !important; } } @media (min-width: 36em) { .fr-hidden-sm { display: none !important; } } .fr-displayed-sm { display: none !important; } @media (min-width: 36em) { .fr-displayed-sm { display: inherit !important; } } @media (min-width: 48em) { .fr-hidden-md { display: none !important; } } .fr-displayed-md { display: none !important; } @media (min-width: 48em) { .fr-displayed-md { display: inherit !important; } } @media (min-width: 62em) { .fr-hidden-lg { display: none !important; } } .fr-displayed-lg { display: none !important; } @media (min-width: 62em) { .fr-displayed-lg { display: inherit !important; } } @media (min-width: 78em) { .fr-hidden-xl { display: none !important; } } .fr-displayed-xl { display: none !important; } @media (min-width: 78em) { .fr-displayed-xl { display: inherit !important; } } /** * Fixe le scroll en arrière plan */ :root.fr-no-scroll body { overflow: hidden; bottom: 0; left: 0; position: fixed; right: 0; top: 0; } .fr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } @media (min-width: 0) { .fr-sr-only-xs { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } } @media (min-width: 36em) { .fr-sr-only-sm { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } } @media (min-width: 48em) { .fr-sr-only-md { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } } @media (min-width: 62em) { .fr-sr-only-lg { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } } @media (min-width: 78em) { .fr-sr-only-xl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } } .fr-no-before::before { content: none; } .fr-no-after::after { content: none; } .fr-text--light { font-weight: 300 !important; } .fr-text--regular { font-weight: 400 !important; } .fr-text--bold { font-weight: 700 !important; } .fr-text--xx-bold { font-weight: 900 !important; } .fr-h6 { font-weight: 700 !important; font-size: 1.125rem !important; line-height: 1.5rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h6 { font-size: 1.25rem !important; line-height: 1.75rem !important; } } .fr-h5 { font-weight: 700 !important; font-size: 1.25rem !important; line-height: 1.75rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h5 { font-size: 1.375rem !important; line-height: 1.75rem !important; } } .fr-h4 { font-weight: 700 !important; font-size: 1.375rem !important; line-height: 1.75rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h4 { font-size: 1.5rem !important; line-height: 2rem !important; } } .fr-h3 { font-weight: 700 !important; font-size: 1.5rem !important; line-height: 2rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h3 { font-size: 1.75rem !important; line-height: 2.25rem !important; } } .fr-h2 { font-weight: 700 !important; font-size: 1.75rem !important; line-height: 2.25rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h2 { font-size: 2rem !important; line-height: 2.5rem !important; } } .fr-h1 { font-weight: 700 !important; font-size: 2rem !important; line-height: 2.5rem !important; margin: 0 0 1rem; } @media (min-width: 48em) { .fr-h1 { font-size: 2.5rem !important; line-height: 3rem !important; } } .fr-display-xs { font-weight: 700 !important; font-size: 2.5rem !important; line-height: 3rem !important; margin: 0 0 2rem; } @media (min-width: 48em) { .fr-display-xs { font-size: 3rem !important; line-height: 3.5rem !important; } } .fr-display-sm { font-weight: 700 !important; font-size: 3rem !important; line-height: 3.5rem !important; margin: 0 0 2rem; } @media (min-width: 48em) { .fr-display-sm { font-size: 3.5rem !important; line-height: 4rem !important; } } .fr-display-md { font-weight: 700 !important; font-size: 3.5rem !important; line-height: 4rem !important; margin: 0 0 2rem; } @media (min-width: 48em) { .fr-display-md { font-size: 4rem !important; line-height: 4.5rem !important; } } .fr-display-lg { font-weight: 700 !important; font-size: 4rem !important; line-height: 4.5rem !important; margin: 0 0 2rem; } @media (min-width: 48em) { .fr-display-lg { font-size: 4.5rem !important; line-height: 5rem !important; } } .fr-display-xl { font-weight: 700 !important; font-size: 4.5rem !important; line-height: 5rem !important; margin: 0 0 2rem; } @media (min-width: 48em) { .fr-display-xl { font-size: 5rem !important; line-height: 5.5rem !important; } } .fr-text--xs { font-size: 0.75rem !important; line-height: 1.25rem !important; margin: 0 0 2.5rem; } .fr-text--sm { font-size: 0.875rem !important; line-height: 1.5rem !important; margin: 0 0 2.5rem; } .fr-text { font-size: 1rem !important; line-height: 1.5rem !important; margin: 0 0 2.5rem; } .fr-text--lg { font-size: 1.125rem !important; line-height: 1.75rem !important; margin: 0 0 2.5rem; } @media (min-width: 48em) { .fr-text--lg { font-size: 1.25rem !important; line-height: 2rem !important; } } .fr-text--xl, .fr-text--lead { font-size: 1.25rem !important; line-height: 2rem !important; margin: 0 0 3rem; } @media (min-width: 48em) { .fr-text--xl, .fr-text--lead { font-size: 1.375rem !important; line-height: 2.25rem !important; } } .fr-text--alt { font-family: "Spectral", georgia, serif !important; } .fr-grid-row { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .fr-grid-row--top { align-items: flex-start; } .fr-grid-row--bottom { align-items: flex-end; } .fr-grid-row--middle { align-items: center; } .fr-grid-row--left { justify-content: flex-start; } .fr-grid-row--right { justify-content: flex-end; } .fr-grid-row--center { justify-content: center; } .fr-col--top { align-self: flex-start; } .fr-col--bottom { align-self: flex-end; } .fr-col--middle { align-self: center; } .fr-container { width: 100%; margin-left: auto; margin-right: auto; } .fr-container { padding-left: 1rem; padding-right: 1rem; } .fr-container--fluid { padding-left: 0; padding-right: 0; max-width: none; } .fr-grid-row--gutters { margin: -0.5rem; } .fr-grid-row--gutters > [class^="fr-col-"], .fr-grid-row--gutters > [class*=" fr-col-"], .fr-grid-row--gutters > .fr-col { padding: 0.5rem; } .fr-grid-row--no-gutters { margin: 0; } .fr-grid-row--no-gutters > [class^="fr-col-"], .fr-grid-row--no-gutters > [class*=" fr-col-"], .fr-grid-row--no-gutters > .fr-col { padding: 0; } .fr-col { flex: 1; } .fr-col-1 { flex: 0 0 calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .fr-col-offset-1:not(.fr-col-offset-1--right) { margin-left: calc(100% / 12); } .fr-col-offset-1--right { margin-right: calc(100% / 12); } .fr-col-2 { flex: 0 0 calc(200% / 12); width: calc(200% / 12); max-width: calc(200% / 12); } .fr-col-offset-2:not(.fr-col-offset-1--right) { margin-left: calc(200% / 12); } .fr-col-offset-2--right { margin-right: calc(200% / 12); } .fr-col-3 { flex: 0 0 calc(300% / 12); width: calc(300% / 12); max-width: calc(300% / 12); } .fr-col-offset-3:not(.fr-col-offset-1--right) { margin-left: calc(300% / 12); } .fr-col-offset-3--right { margin-right: calc(300% / 12); } .fr-col-4 { flex: 0 0 calc(400% / 12); width: calc(400% / 12); max-width: calc(400% / 12); } .fr-col-offset-4:not(.fr-col-offset-1--right) { margin-left: calc(400% / 12); } .fr-col-offset-4--right { margin-right: calc(400% / 12); } .fr-col-5 { flex: 0 0 calc(500% / 12); width: calc(500% / 12); max-width: calc(500% / 12); } .fr-col-offset-5:not(.fr-col-offset-1--right) { margin-left: calc(500% / 12); } .fr-col-offset-5--right { margin-right: calc(500% / 12); } .fr-col-6 { flex: 0 0 calc(600% / 12); width: calc(600% / 12); max-width: calc(600% / 12); } .fr-col-offset-6:not(.fr-col-offset-1--right) { margin-left: calc(600% / 12); } .fr-col-offset-6--right { margin-right: calc(600% / 12); } .fr-col-7 { flex: 0 0 calc(700% / 12); width: calc(700% / 12); max-width: calc(700% / 12); } .fr-col-offset-7:not(.fr-col-offset-1--right) { margin-left: calc(700% / 12); } .fr-col-offset-7--right { margin-right: calc(700% / 12); } .fr-col-8 { flex: 0 0 calc(800% / 12); width: calc(800% / 12); max-width: calc(800% / 12); } .fr-col-offset-8:not(.fr-col-offset-1--right) { margin-left: calc(800% / 12); } .fr-col-offset-8--right { margin-right: calc(800% / 12); } .fr-col-9 { flex: 0 0 calc(900% / 12); width: calc(900% / 12); max-width: calc(900% / 12); } .fr-col-offset-9:not(.fr-col-offset-1--right) { margin-left: calc(900% / 12); } .fr-col-offset-9--right { margin-right: calc(900% / 12); } .fr-col-10 { flex: 0 0 calc(1000% / 12); width: calc(1000% / 12); max-width: calc(1000% / 12); } .fr-col-offset-10:not(.fr-col-offset-1--right) { margin-left: calc(1000% / 12); } .fr-col-offset-10--right { margin-right: calc(1000% / 12); } .fr-col-11 { flex: 0 0 calc(1100% / 12); width: calc(1100% / 12); max-width: calc(1100% / 12); } .fr-col-offset-11:not(.fr-col-offset-1--right) { margin-left: calc(1100% / 12); } .fr-col-offset-11--right { margin-right: calc(1100% / 12); } .fr-col-12 { flex: 0 0 calc(1200% / 12); width: calc(1200% / 12); max-width: calc(1200% / 12); } .fr-col-offset-12:not(.fr-col-offset-1--right) { margin-left: calc(1200% / 12); } .fr-col-offset-12--right { margin-right: calc(1200% / 12); } @media (min-width: 36em) { .fr-container-sm { padding-left: 1rem; padding-right: 1rem; } .fr-container-sm--fluid { padding-left: 0; padding-right: 0; max-width: none; } .fr-grid-row-sm--gutters { margin: -0.5rem; } .fr-grid-row-sm--gutters > [class^="fr-col-"], .fr-grid-row-sm--gutters > [class*=" fr-col-"], .fr-grid-row-sm--gutters > .fr-col { padding: 0.5rem; } .fr-grid-row-sm--no-gutters { margin: 0; } .fr-grid-row-sm--no-gutters > [class^="fr-col-"], .fr-grid-row-sm--no-gutters > [class*=" fr-col-"], .fr-grid-row-sm--no-gutters > .fr-col { padding: 0; } .fr-col-sm { flex: 1; } .fr-col-sm-1 { flex: 0 0 calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .fr-col-offset-sm-1:not(.fr-col-offset-1--right) { margin-left: calc(100% / 12); } .fr-col-offset-sm-1--right { margin-right: calc(100% / 12); } .fr-col-sm-2 { flex: 0 0 calc(200% / 12); width: calc(200% / 12); max-width: calc(200% / 12); } .fr-col-offset-sm-2:not(.fr-col-offset-1--right) { margin-left: calc(200% / 12); } .fr-col-offset-sm-2--right { margin-right: calc(200% / 12); } .fr-col-sm-3 { flex: 0 0 calc(300% / 12); width: calc(300% / 12); max-width: calc(300% / 12); } .fr-col-offset-sm-3:not(.fr-col-offset-1--right) { margin-left: calc(300% / 12); } .fr-col-offset-sm-3--right { margin-right: calc(300% / 12); } .fr-col-sm-4 { flex: 0 0 calc(400% / 12); width: calc(400% / 12); max-width: calc(400% / 12); } .fr-col-offset-sm-4:not(.fr-col-offset-1--right) { margin-left: calc(400% / 12); } .fr-col-offset-sm-4--right { margin-right: calc(400% / 12); } .fr-col-sm-5 { flex: 0 0 calc(500% / 12); width: calc(500% / 12); max-width: calc(500% / 12); } .fr-col-offset-sm-5:not(.fr-col-offset-1--right) { margin-left: calc(500% / 12); } .fr-col-offset-sm-5--right { margin-right: calc(500% / 12); } .fr-col-sm-6 { flex: 0 0 calc(600% / 12); width: calc(600% / 12); max-width: calc(600% / 12); } .fr-col-offset-sm-6:not(.fr-col-offset-1--right) { margin-left: calc(600% / 12); } .fr-col-offset-sm-6--right { margin-right: calc(600% / 12); } .fr-col-sm-7 { flex: 0 0 calc(700% / 12); width: calc(700% / 12); max-width: calc(700% / 12); } .fr-col-offset-sm-7:not(.fr-col-offset-1--right) { margin-left: calc(700% / 12); } .fr-col-offset-sm-7--right { margin-right: calc(700% / 12); } .fr-col-sm-8 { flex: 0 0 calc(800% / 12); width: calc(800% / 12); max-width: calc(800% / 12); } .fr-col-offset-sm-8:not(.fr-col-offset-1--right) { margin-left: calc(800% / 12); } .fr-col-offset-sm-8--right { margin-right: calc(800% / 12); } .fr-col-sm-9 { flex: 0 0 calc(900% / 12); width: calc(900% / 12); max-width: calc(900% / 12); } .fr-col-offset-sm-9:not(.fr-col-offset-1--right) { margin-left: calc(900% / 12); } .fr-col-offset-sm-9--right { margin-right: calc(900% / 12); } .fr-col-sm-10 { flex: 0 0 calc(1000% / 12); width: calc(1000% / 12); max-width: calc(1000% / 12); } .fr-col-offset-sm-10:not(.fr-col-offset-1--right) { margin-left: calc(1000% / 12); } .fr-col-offset-sm-10--right { margin-right: calc(1000% / 12); } .fr-col-sm-11 { flex: 0 0 calc(1100% / 12); width: calc(1100% / 12); max-width: calc(1100% / 12); } .fr-col-offset-sm-11:not(.fr-col-offset-1--right) { margin-left: calc(1100% / 12); } .fr-col-offset-sm-11--right { margin-right: calc(1100% / 12); } .fr-col-sm-12 { flex: 0 0 calc(1200% / 12); width: calc(1200% / 12); max-width: calc(1200% / 12); } .fr-col-offset-sm-12:not(.fr-col-offset-1--right) { margin-left: calc(1200% / 12); } .fr-col-offset-sm-12--right { margin-right: calc(1200% / 12); } } @media (min-width: 48em) { .fr-container-md { padding-left: 1rem; padding-right: 1rem; } .fr-container-md--fluid { padding-left: 0; padding-right: 0; max-width: none; } .fr-grid-row-md--gutters { margin: -0.5rem; } .fr-grid-row-md--gutters > [class^="fr-col-"], .fr-grid-row-md--gutters > [class*=" fr-col-"], .fr-grid-row-md--gutters > .fr-col { padding: 0.5rem; } .fr-grid-row-md--no-gutters { margin: 0; } .fr-grid-row-md--no-gutters > [class^="fr-col-"], .fr-grid-row-md--no-gutters > [class*=" fr-col-"], .fr-grid-row-md--no-gutters > .fr-col { padding: 0; } .fr-col-md { flex: 1; } .fr-col-md-1 { flex: 0 0 calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .fr-col-offset-md-1:not(.fr-col-offset-1--right) { margin-left: calc(100% / 12); } .fr-col-offset-md-1--right { margin-right: calc(100% / 12); } .fr-col-md-2 { flex: 0 0 calc(200% / 12); width: calc(200% / 12); max-width: calc(200% / 12); } .fr-col-offset-md-2:not(.fr-col-offset-1--right) { margin-left: calc(200% / 12); } .fr-col-offset-md-2--right { margin-right: calc(200% / 12); } .fr-col-md-3 { flex: 0 0 calc(300% / 12); width: calc(300% / 12); max-width: calc(300% / 12); } .fr-col-offset-md-3:not(.fr-col-offset-1--right) { margin-left: calc(300% / 12); } .fr-col-offset-md-3--right { margin-right: calc(300% / 12); } .fr-col-md-4 { flex: 0 0 calc(400% / 12); width: calc(400% / 12); max-width: calc(400% / 12); } .fr-col-offset-md-4:not(.fr-col-offset-1--right) { margin-left: calc(400% / 12); } .fr-col-offset-md-4--right { margin-right: calc(400% / 12); } .fr-col-md-5 { flex: 0 0 calc(500% / 12); width: calc(500% / 12); max-width: calc(500% / 12); } .fr-col-offset-md-5:not(.fr-col-offset-1--right) { margin-left: calc(500% / 12); } .fr-col-offset-md-5--right { margin-right: calc(500% / 12); } .fr-col-md-6 { flex: 0 0 calc(600% / 12); width: calc(600% / 12); max-width: calc(600% / 12); } .fr-col-offset-md-6:not(.fr-col-offset-1--right) { margin-left: calc(600% / 12); } .fr-col-offset-md-6--right { margin-right: calc(600% / 12); } .fr-col-md-7 { flex: 0 0 calc(700% / 12); width: calc(700% / 12); max-width: calc(700% / 12); } .fr-col-offset-md-7:not(.fr-col-offset-1--right) { margin-left: calc(700% / 12); } .fr-col-offset-md-7--right { margin-right: calc(700% / 12); } .fr-col-md-8 { flex: 0 0 calc(800% / 12); width: calc(800% / 12); max-width: calc(800% / 12); } .fr-col-offset-md-8:not(.fr-col-offset-1--right) { margin-left: calc(800% / 12); } .fr-col-offset-md-8--right { margin-right: calc(800% / 12); } .fr-col-md-9 { flex: 0 0 calc(900% / 12); width: calc(900% / 12); max-width: calc(900% / 12); } .fr-col-offset-md-9:not(.fr-col-offset-1--right) { margin-left: calc(900% / 12); } .fr-col-offset-md-9--right { margin-right: calc(900% / 12); } .fr-col-md-10 { flex: 0 0 calc(1000% / 12); width: calc(1000% / 12); max-width: calc(1000% / 12); } .fr-col-offset-md-10:not(.fr-col-offset-1--right) { margin-left: calc(1000% / 12); } .fr-col-offset-md-10--right { margin-right: calc(1000% / 12); } .fr-col-md-11 { flex: 0 0 calc(1100% / 12); width: calc(1100% / 12); max-width: calc(1100% / 12); } .fr-col-offset-md-11:not(.fr-col-offset-1--right) { margin-left: calc(1100% / 12); } .fr-col-offset-md-11--right { margin-right: calc(1100% / 12); } .fr-col-md-12 { flex: 0 0 calc(1200% / 12); width: calc(1200% / 12); max-width: calc(1200% / 12); } .fr-col-offset-md-12:not(.fr-col-offset-1--right) { margin-left: calc(1200% / 12); } .fr-col-offset-md-12--right { margin-right: calc(1200% / 12); } } @media (min-width: 62em) { .fr-container, .fr-container-sm, .fr-container-md { padding-left: 1.5rem; padding-right: 1.5rem; } .fr-container-lg { padding-left: 1.5rem; padding-right: 1.5rem; } .fr-container-lg--fluid { padding-left: 0; padding-right: 0; max-width: none; } .fr-grid-row--gutters, .fr-grid-row-sm--gutters, .fr-grid-row-md--gutters { margin: -0.75rem; } .fr-grid-row--gutters > [class^="fr-col-"], .fr-grid-row--gutters > [class*=" fr-col-"], .fr-grid-row--gutters > .fr-col, .fr-grid-row-sm--gutters > [class^="fr-col-"], .fr-grid-row-sm--gutters > [class*=" fr-col-"], .fr-grid-row-sm--gutters > .fr-col, .fr-grid-row-md--gutters > [class^="fr-col-"], .fr-grid-row-md--gutters > [class*=" fr-col-"], .fr-grid-row-md--gutters > .fr-col { padding: 0.75rem; } .fr-grid-row-lg--gutters { margin: -0.75rem; } .fr-grid-row-lg--gutters > [class^="fr-col-"], .fr-grid-row-lg--gutters > [class*=" fr-col-"], .fr-grid-row-lg--gutters > .fr-col { padding: 0.75rem; } .fr-grid-row-lg--no-gutters { margin: 0; } .fr-grid-row-lg--no-gutters > [class^="fr-col-"], .fr-grid-row-lg--no-gutters > [class*=" fr-col-"], .fr-grid-row-lg--no-gutters > .fr-col { padding: 0; } .fr-col-lg { flex: 1; } .fr-col-lg-1 { flex: 0 0 calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .fr-col-offset-lg-1:not(.fr-col-offset-1--right) { margin-left: calc(100% / 12); } .fr-col-offset-lg-1--right { margin-right: calc(100% / 12); } .fr-col-lg-2 { flex: 0 0 calc(200% / 12); width: calc(200% / 12); max-width: calc(200% / 12); } .fr-col-offset-lg-2:not(.fr-col-offset-1--right) { margin-left: calc(200% / 12); } .fr-col-offset-lg-2--right { margin-right: calc(200% / 12); } .fr-col-lg-3 { flex: 0 0 calc(300% / 12); width: calc(300% / 12); max-width: calc(300% / 12); } .fr-col-offset-lg-3:not(.fr-col-offset-1--right) { margin-left: calc(300% / 12); } .fr-col-offset-lg-3--right { margin-right: calc(300% / 12); } .fr-col-lg-4 { flex: 0 0 calc(400% / 12); width: calc(400% / 12); max-width: calc(400% / 12); } .fr-col-offset-lg-4:not(.fr-col-offset-1--right) { margin-left: calc(400% / 12); } .fr-col-offset-lg-4--right { margin-right: calc(400% / 12); } .fr-col-lg-5 { flex: 0 0 calc(500% / 12); width: calc(500% / 12); max-width: calc(500% / 12); } .fr-col-offset-lg-5:not(.fr-col-offset-1--right) { margin-left: calc(500% / 12); } .fr-col-offset-lg-5--right { margin-right: calc(500% / 12); } .fr-col-lg-6 { flex: 0 0 calc(600% / 12); width: calc(600% / 12); max-width: calc(600% / 12); } .fr-col-offset-lg-6:not(.fr-col-offset-1--right) { margin-left: calc(600% / 12); } .fr-col-offset-lg-6--right { margin-right: calc(600% / 12); } .fr-col-lg-7 { flex: 0 0 calc(700% / 12); width: calc(700% / 12); max-width: calc(700% / 12); } .fr-col-offset-lg-7:not(.fr-col-offset-1--right) { margin-left: calc(700% / 12); } .fr-col-offset-lg-7--right { margin-right: calc(700% / 12); } .fr-col-lg-8 { flex: 0 0 calc(800% / 12); width: calc(800% / 12); max-width: calc(800% / 12); } .fr-col-offset-lg-8:not(.fr-col-offset-1--right) { margin-left: calc(800% / 12); } .fr-col-offset-lg-8--right { margin-right: calc(800% / 12); } .fr-col-lg-9 { flex: 0 0 calc(900% / 12); width: calc(900% / 12); max-width: calc(900% / 12); } .fr-col-offset-lg-9:not(.fr-col-offset-1--right) { margin-left: calc(900% / 12); } .fr-col-offset-lg-9--right { margin-right: calc(900% / 12); } .fr-col-lg-10 { flex: 0 0 calc(1000% / 12); width: calc(1000% / 12); max-width: calc(1000% / 12); } .fr-col-offset-lg-10:not(.fr-col-offset-1--right) { margin-left: calc(1000% / 12); } .fr-col-offset-lg-10--right { margin-right: calc(1000% / 12); } .fr-col-lg-11 { flex: 0 0 calc(1100% / 12); width: calc(1100% / 12); max-width: calc(1100% / 12); } .fr-col-offset-lg-11:not(.fr-col-offset-1--right) { margin-left: calc(1100% / 12); } .fr-col-offset-lg-11--right { margin-right: calc(1100% / 12); } .fr-col-lg-12 { flex: 0 0 calc(1200% / 12); width: calc(1200% / 12); max-width: calc(1200% / 12); } .fr-col-offset-lg-12:not(.fr-col-offset-1--right) { margin-left: calc(1200% / 12); } .fr-col-offset-lg-12--right { margin-right: calc(1200% / 12); } } @media (min-width: 78em) { .fr-container, .fr-container-sm, .fr-container-md, .fr-container-lg { max-width: 78rem; } .fr-container-xl { padding-left: 1.5rem; padding-right: 1.5rem; max-width: 78rem; } .fr-container-xl--fluid { padding-left: 0; padding-right: 0; max-width: none; } .fr-grid-row-xl--gutters { margin: -0.75rem; } .fr-grid-row-xl--gutters > [class^="fr-col-"], .fr-grid-row-xl--gutters > [class*=" fr-col-"], .fr-grid-row-xl--gutters > .fr-col { padding: 0.75rem; } .fr-grid-row-xl--no-gutters { margin: 0; } .fr-grid-row-xl--no-gutters > [class^="fr-col-"], .fr-grid-row-xl--no-gutters > [class*=" fr-col-"], .fr-grid-row-xl--no-gutters > .fr-col { padding: 0; } .fr-col-xl { flex: 1; } .fr-col-xl-1 { flex: 0 0 calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .fr-col-offset-xl-1:not(.fr-col-offset-1--right) { margin-left: calc(100% / 12); } .fr-col-offset-xl-1--right { margin-right: calc(100% / 12); } .fr-col-xl-2 { flex: 0 0 calc(200% / 12); width: calc(200% / 12); max-width: calc(200% / 12); } .fr-col-offset-xl-2:not(.fr-col-offset-1--right) { margin-left: calc(200% / 12); } .fr-col-offset-xl-2--right { margin-right: calc(200% / 12); } .fr-col-xl-3 { flex: 0 0 calc(300% / 12); width: calc(300% / 12); max-width: calc(300% / 12); } .fr-col-offset-xl-3:not(.fr-col-offset-1--right) { margin-left: calc(300% / 12); } .fr-col-offset-xl-3--right { margin-right: calc(300% / 12); } .fr-col-xl-4 { flex: 0 0 calc(400% / 12); width: calc(400% / 12); max-width: calc(400% / 12); } .fr-col-offset-xl-4:not(.fr-col-offset-1--right) { margin-left: calc(400% / 12); } .fr-col-offset-xl-4--right { margin-right: calc(400% / 12); } .fr-col-xl-5 { flex: 0 0 calc(500% / 12); width: calc(500% / 12); max-width: calc(500% / 12); } .fr-col-offset-xl-5:not(.fr-col-offset-1--right) { margin-left: calc(500% / 12); } .fr-col-offset-xl-5--right { margin-right: calc(500% / 12); } .fr-col-xl-6 { flex: 0 0 calc(600% / 12); width: calc(600% / 12); max-width: calc(600% / 12); } .fr-col-offset-xl-6:not(.fr-col-offset-1--right) { margin-left: calc(600% / 12); } .fr-col-offset-xl-6--right { margin-right: calc(600% / 12); } .fr-col-xl-7 { flex: 0 0 calc(700% / 12); width: calc(700% / 12); max-width: calc(700% / 12); } .fr-col-offset-xl-7:not(.fr-col-offset-1--right) { margin-left: calc(700% / 12); } .fr-col-offset-xl-7--right { margin-right: calc(700% / 12); } .fr-col-xl-8 { flex: 0 0 calc(800% / 12); width: calc(800% / 12); max-width: calc(800% / 12); } .fr-col-offset-xl-8:not(.fr-col-offset-1--right) { margin-left: calc(800% / 12); } .fr-col-offset-xl-8--right { margin-right: calc(800% / 12); } .fr-col-xl-9 { flex: 0 0 calc(900% / 12); width: calc(900% / 12); max-width: calc(900% / 12); } .fr-col-offset-xl-9:not(.fr-col-offset-1--right) { margin-left: calc(900% / 12); } .fr-col-offset-xl-9--right { margin-right: calc(900% / 12); } .fr-col-xl-10 { flex: 0 0 calc(1000% / 12); width: calc(1000% / 12); max-width: calc(1000% / 12); } .fr-col-offset-xl-10:not(.fr-col-offset-1--right) { margin-left: calc(1000% / 12); } .fr-col-offset-xl-10--right { margin-right: calc(1000% / 12); } .fr-col-xl-11 { flex: 0 0 calc(1100% / 12); width: calc(1100% / 12); max-width: calc(1100% / 12); } .fr-col-offset-xl-11:not(.fr-col-offset-1--right) { margin-left: calc(1100% / 12); } .fr-col-offset-xl-11--right { margin-right: calc(1100% / 12); } .fr-col-xl-12 { flex: 0 0 calc(1200% / 12); width: calc(1200% / 12); max-width: calc(1200% / 12); } .fr-col-offset-xl-12:not(.fr-col-offset-1--right) { margin-left: calc(1200% / 12); } .fr-col-offset-xl-12--right { margin-right: calc(1200% / 12); } } .fr-responsive-img { width: 100%; height: auto; } .fr-responsive-vid { position: relative; width: 100%; } .fr-responsive-vid::before { content: ""; display: block; width: 100%; padding-bottom: 56.25%; } .fr-responsive-vid--4x3::before { content: ""; display: block; padding-bottom: 75%; } .fr-responsive-vid--1x1::before { content: ""; display: block; padding-bottom: 100%; } .fr-responsive-vid__player, .fr-responsive-vid > .fr-consent-placeholder { object-fit: cover; object-position: 50% 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .fr-collapse { overflow: hidden; transition: visibility 0.3s; max-height: 0; --collapse: -99999px; --collapser: ''; } .fr-collapse::before { display: block; content: ''; content: var(--collapser); transition: margin-top 0.3s; margin-top: 0; } .fr-collapse:not(.fr-collapse--expanded) { visibility: hidden; } .fr-collapse:not(.fr-collapse--expanded)::before { margin-top: -99999px; margin-top: var(--collapse); } body { background-color: var(--w); --block-color-hover: rgba(224, 224, 224, 0.5); --block-color-active: rgba(194, 194, 194, 0.5); color: var(--g700); } :root[data-fr-theme="dark"] body { --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root[data-fr-transition] body { transition: background-color 0.3s; } a { outline-color: var(--focus); } button { outline-color: var(--focus); } input { outline-color: var(--focus); } input[type="checkbox"] + label::before, input[type="radio"] + label::before { outline-color: var(--focus); } select { outline-color: var(--focus); } textarea { outline-color: var(--focus); } [tabindex] { outline-color: var(--focus); } video[controls], audio[controls] { outline-color: var(--focus); } [contenteditable]:not([contenteditable="false"]) { outline-color: var(--focus); } details, details > summary:first-of-type { outline-color: var(--focus); } /* ------------------------------------ *\ SCHEMES \* ------------------------------------ */ /** * Définition de la valeur des custom properties d'hover par défaut au niveau du :root */ :root { --block-color-hover: rgba(224, 224, 224, 0.5); --block-color-active: rgba(194, 194, 194, 0.5); } /** * Définition des customs properties de combinaisons de couleur */ /* valeurs des couleurs en dark mode */ :root[data-fr-theme="dark"] { --bf500: #9a9aff; --bf500-plain: #000091; --w-bf500: #000091; --bf300-plain: #9a9aff; --bf200-bf300: #9a9aff; --bf100-g750: #2a2a2a; --t-plain: transparent; --t-w: #fff; --g800: #fff; --g700: #f0f0f0; --g600: #e7e7e7; --g500: #cecece; --g400: #9c9c9c; --g300: #6a6a6a; --g200: #383838; --g100: #2a2a2a; --w: #1e1e1e; --beige: #2a2a2a; --g800-plain: #1e1e1e; --g600-g400: #cecece; --g400-t: transparent; --g100-g800: #1e1e1e; --w-g750: #2a2a2a; --focus: #5398ff; --info: #2b8bf7; --success: #00eb5e; --error: #f33; --rm300: #383838; --rm500: #f7bfc3; --scroll-shadow: #1e1e1e; --overlay: rgba(206, 206, 206, 0.32); } /* valeur des couleurs par défaut */ :root { --bf500: #000091; --bf500-plain: #000091; --w-bf500: #fff; --bf300-plain: #9a9aff; --bf200-bf300: #ececff; --bf100-g750: #f5f5ff; --t-plain: transparent; --t-w: transparent; --g800: #1e1e1e; --g700: #383838; --g600: #6a6a6a; --g500: #9c9c9c; --g400: #cecece; --g300: #e7e7e7; --g200: #f0f0f0; --g100: #f8f8f8; --w: #fff; --beige: #f9f8f6; --g800-plain: #1e1e1e; --g600-g400: #6a6a6a; --g400-t: #cecece; --g100-g800: #f8f8f8; --w-g750: #fff; --focus: #2a7ffe; --info: #0762c8; --success: #008941; --error: #e10600; --rm300: #f7bfc3; --rm500: #e1000f; --scroll-shadow: rgba(30, 30, 30, 0.16); --overlay: rgba(156, 156, 156, 0.32); } /* valeur des couleurs dans des blocs de combinaison */ :root:not([data-fr-theme="dark"]) { /* le sélecteur est un bloc de combinaison de couleur du type défini */ /* le sélecteur est un bloc de combinaison de couleur du type défini */ } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"], :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] { --bf500: #000091; --bf500-plain: #000091; --w-bf500: #fff; --bf300-plain: #9a9aff; --bf200-bf300: #ececff; --bf100-g750: #f5f5ff; --t-plain: transparent; --t-w: transparent; --g800: #1e1e1e; --g700: #383838; --g600: #6a6a6a; --g500: #9c9c9c; --g400: #cecece; --g300: #e7e7e7; --g200: #f0f0f0; --g100: #f8f8f8; --w: #fff; --beige: #f9f8f6; --g800-plain: #1e1e1e; --g600-g400: #6a6a6a; --g400-t: #cecece; --g100-g800: #f8f8f8; --w-g750: #fff; --focus: #2a7ffe; --info: #0762c8; --success: #008941; --error: #e10600; --rm300: #f7bfc3; --rm500: #e1000f; --scroll-shadow: rgba(30, 30, 30, 0.16); --overlay: rgba(156, 156, 156, 0.32); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"], :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] { --bf500: #9a9aff; --w-bf500: #000091; --bf200-bf300: #9a9aff; --bf100-g750: #2a2a2a; --t-w: #fff; --g800: #fff; --g700: #f0f0f0; --g600: #e7e7e7; --g500: #cecece; --g400: #9c9c9c; --g300: #6a6a6a; --g200: #383838; --g100: #2a2a2a; --w: #1e1e1e; --beige: #2a2a2a; --g600-g400: #cecece; --g400-t: transparent; --g100-g800: #1e1e1e; --w-g750: #2a2a2a; --focus: #5398ff; --info: #2b8bf7; --success: #00eb5e; --error: #f33; --rm300: #383838; --rm500: #f7bfc3; --scroll-shadow: #1e1e1e; --overlay: rgba(206, 206, 206, 0.32); } /** * Déclaration des blocks de combinaison de couleur */ :root .fr-scheme-light-white { background-color: var(--w); --scheme-border: var(--bf500); --block-color-hover: rgba(224, 224, 224, 0.5); --block-color-active: rgba(194, 194, 194, 0.5); } :root[data-fr-theme="dark"] :root .fr-scheme-light-white { --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root .fr-scheme-light-grey-100 { background-color: var(--g100-g800); --scheme-border: var(--bf500); --block-color-hover: rgba(217, 217, 217, 0.5); --block-color-active: rgba(185, 185, 185, 0.5); } :root[data-fr-theme="dark"] :root .fr-scheme-light-grey-100 { --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root .fr-scheme-light-grey-200 { background-color: var(--g200); --scheme-border: var(--bf500); --block-color-hover: rgba(207, 207, 207, 0.5); --block-color-active: rgba(175, 175, 175, 0.5); } :root[data-fr-theme="dark"] :root .fr-scheme-light-grey-200 { --block-color-hover: rgba(95, 95, 95, 0.5); --block-color-active: rgba(134, 134, 134, 0.5); } :root .fr-scheme-light-beige { background-color: var(--beige); --scheme-border: var(--bf500); --block-color-hover: rgba(224, 219, 208, 0.5); --block-color-active: rgba(199, 189, 170, 0.5); } :root[data-fr-theme="dark"] :root .fr-scheme-light-beige { --block-color-hover: rgba(79, 79, 79, 0.5); --block-color-active: rgba(115, 115, 115, 0.5); } :root[data-fr-transition] [class*="fr-scheme-light"] { transition: background-color 0.3s, box-shadow 0.3s; } :root .fr-scheme-dark-grey-800 { background-color: var(--g800-plain); --scheme-border: var(--bf300-plain); --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root[data-fr-theme="dark"] :root .fr-scheme-dark-grey-800 { --block-color-hover: rgba(65, 65, 65, 0.5); --block-color-active: rgba(99, 99, 99, 0.5); } :root[data-fr-transition] [class*="fr-scheme-dark"] { transition: background-color 0.3s, box-shadow 0.3s; } :root .fr-switch-theme .fr-fieldset .fr-radio-group:last-child input[type=radio] + label { margin-bottom: 0; } :root .fr-switch-theme .fr-fieldset .fr-radio-group:nth-child(1) input[type=radio] + label { background-image: url("data:image/svg+xml;utf-8,"); } :root .fr-switch-theme .fr-fieldset .fr-radio-group:nth-child(2) input[type=radio] + label { background-image: url("data:image/svg+xml;utf-8,"); } :root[data-fr-theme="dark"] .fr-switch-theme .fr-fieldset .fr-radio-group:nth-child(1) input[type=radio] + label { background-image: url("data:image/svg+xml;utf-8,"); } :root[data-fr-theme="dark"] .fr-switch-theme .fr-fieldset .fr-radio-group:nth-child(2) input[type=radio] + label { background-image: url("data:image/svg+xml;utf-8,"); } /* ------------------------------------ *\ INPUTS \* ------------------------------------ */ /* stylelint-disable */ .fr-input { display: block; width: 100%; border: 0; border-radius: 0.25rem 0.25rem 0 0; font-size: 1rem ; line-height: 1.5rem ; padding: 0.5rem 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; /** * Style du placeholder */ /** * On applique une hauteur maximale si l'élément n'est pas un textarea */ } .fr-input::-webkit-input-placeholder { opacity: 1; font-style: italic; } .fr-input:-moz-placeholder { opacity: 1; font-style: italic; } .fr-input::-moz-placeholder { opacity: 1; font-style: italic; } .fr-input:-ms-input-placeholder { opacity: 1; font-style: italic; } .fr-input:not(textarea) { max-height: 2.5rem; } .fr-input[type=date] { min-height: 2.5rem; } .fr-input[type=date]::-webkit-calendar-picker-indicator { display: none; } /** * Ajout d'un wrapper quand on a besoin de mettre une icône */ .fr-input-wrap { position: relative; display: block; } .fr-input-wrap[class^="fr-fi-"]::before, .fr-input-wrap[class*=" fr-fi-"]::before { font-size: 1rem !important; position: absolute; top: 0.75rem; right: 0.75rem; bottom: 0.75rem; margin: auto; } .fr-input-wrap--addon { display: flex; flex-direction: row; width: 100%; } .fr-input-wrap.fr-fi-calendar-line > .fr-input[type=date]::-webkit-calendar-picker-indicator { display: block; margin-right: -2rem; z-index: 1; opacity: 0; } .fr-input-wrap .fr-input { padding-right: 2.5rem; } .fr-input-wrap > *:first-child:not(:last-child).fr-input { padding-right: 1rem; } @media (min-width: 48em) { .fr-input-wrap > *:first-child:not(:last-child) { border-radius: 0.25rem 0 0 0; } } @media (min-width: 48em) { .fr-input-wrap > *:last-child:not(:first-child) { border-radius: 0 0.25rem 0 0; } } .fr-input-wrap + .fr-hint-text { margin-top: 0.5rem; } textarea.fr-input { box-shadow: 0 2px 0 0 var(--g600); min-height: 3.75rem; } .fr-input { color: var(--g800); background-color: var(--g200); box-shadow: inset 0 -2px 0 0 var(--g600); /** * Style du placeholder */ /** * Style pour l'input désactivé */ /** * Modificateur pour les champs validés */ /** * Modificateur pour les champs présentant des erreurs */ /** * On applique un style lorsque la valeur est automatiquement remplie par le navigateur * sur les navigateurs webkit. */ } .fr-input::-webkit-input-placeholder { color: var(--g600-g400); } .fr-input:-moz-placeholder { color: var(--g600-g400); } .fr-input::-moz-placeholder { color: var(--g600-g400); } .fr-input:-ms-input-placeholder { color: var(--g600-g400); } input.fr-input[disabled], input.fr-input:disabled { color: var(--g600-g400); box-shadow: inset 0 -2px 0 0 var(--g400); /** * Override de l'opacité chrome sur un élément disabled */ opacity: 1; } .fr-input--valid { box-shadow: inset 0 -2px 0 0 var(--success); } .fr-input--error { box-shadow: inset 0 -2px 0 0 var(--error); } .fr-input:-webkit-autofill, .fr-input:-webkit-autofill:hover, .fr-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--g200); -webkit-text-fill-color: var(--g800); } .fr-input-wrap > *:not(:last-child).fr-input:not(.fr-input--valid):not(.fr-input--error) { box-shadow: inset 0 -2px 0 0 var(--bf500); } /* ------------------------------------ *\ BUTTONS \* ------------------------------------ */ .fr-btn { --link-underline: none; --link-blank-font: none; --link-blank-content: none; margin: 0; display: inline-flex; flex-direction: row; align-items: center; z-index: 1; } .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; } .fr-btn:not([class*="fr-btn--icon-"])[class^="fr-fi-"], .fr-btn:not([class*="fr-btn--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn:not([class*="fr-btn--icon-"])[class^="fr-fi-"]::before, .fr-btn:not([class*="fr-btn--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 1.5rem; } .fr-btn--icon-left[class^="fr-fi-"], .fr-btn--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btn--icon-left[class^="fr-fi-"]::before, .fr-btn--icon-left[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-btn--icon-right[class^="fr-fi-"], .fr-btn--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btn--icon-right[class^="fr-fi-"]::before, .fr-btn--icon-right[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-btn--sm { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 1rem; } .fr-btn--sm:not([class*="fr-btn--icon-"])[class^="fr-fi-"], .fr-btn--sm:not([class*="fr-btn--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--sm:not([class*="fr-btn--icon-"])[class^="fr-fi-"]::before, .fr-btn--sm:not([class*="fr-btn--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 1rem; } .fr-btn--sm.fr-btn--icon-left[class^="fr-fi-"], .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btn--sm.fr-btn--icon-left[class^="fr-fi-"]::before, .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-btn--sm.fr-btn--icon-right[class^="fr-fi-"], .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btn--sm.fr-btn--icon-right[class^="fr-fi-"]::before, .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-btn--lg { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; } .fr-btn--lg:not([class*="fr-btn--icon-"])[class^="fr-fi-"], .fr-btn--lg:not([class*="fr-btn--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 3.5rem; max-height: 3.5rem; padding-left: 0.75rem; padding-right: 0.75rem; } .fr-btn--lg:not([class*="fr-btn--icon-"])[class^="fr-fi-"]::before, .fr-btn--lg:not([class*="fr-btn--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.75rem; font-size: 2rem; } .fr-btn--lg.fr-btn--icon-left[class^="fr-fi-"], .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btn--lg.fr-btn--icon-left[class^="fr-fi-"]::before, .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"]::before { margin-left: -0.375rem; margin-right: 0.5rem; font-size: 1.5rem; } .fr-btn--lg.fr-btn--icon-right[class^="fr-fi-"], .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btn--lg.fr-btn--icon-right[class^="fr-fi-"]::before, .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::before { margin-right: -0.375rem; margin-left: 0.5rem; font-size: 1.5rem; } .fr-btns-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: flex; align-items: stretch; flex-wrap: wrap; margin-right: 0; margin-left: 0; /** * fr-btns-group--inline : aligne les boutons horizontalement dans tout les cas * fr-btns-group--inline-(sm/md/lg) : permet de passer en horizontal à partir de la valeur du breakpoint appliqué (sm, md, lg) */ /** * fr-btns-group--left : (Défaut) aligne les boutons sur la gauche (en lecture L-t-R) */ /** * fr-btns-group--right : aligne les boutons sur la droite */ /** * fr-btns-group--center : aligne les boutons au centre du conteneur */ /** * fr-btns-group--equisized : Fixe la largeur des boutons à celle du plus grand. Géré en grande partie en JS. */ /** * fr-btns-group--sm : Fixe les boutons à la taille SM */ /** * fr-btns-group--md : (défaut) Fixe les boutons à la taille MD */ /** * fr-btns-group--lg : Fixe les boutons à la taille LG (sans modfifieur => MD) */ } .fr-btns-group > li { width: 100%; max-width: 100%; } .fr-btns-group .fr-btn { width: 100%; margin-right: 0; margin-left: 0; } .fr-btns-group .fr-btn { margin-bottom: 1rem; justify-content: center; } .fr-btns-group--inline { width: calc(100% + 1rem); } .fr-btns-group--inline .fr-btn { width: auto; margin-right: 1rem; max-width: 100%; } .fr-btns-group--inline > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline > li::before { content: none; } .fr-btns-group--inline.fr-btns-group--right { margin-left: -1rem; } .fr-btns-group--inline.fr-btns-group--right .fr-btn { margin-right: 0; margin-left: 1rem; } .fr-btns-group--inline.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .fr-btns-group--inline.fr-btns-group--center, .fr-btns-group--inline.fr-btns-group--left { margin-right: -1rem; } .fr-btns-group--inline.fr-btns-group--center .fr-btn, .fr-btns-group--inline.fr-btns-group--left .fr-btn { margin-right: 1rem; margin-left: 0; } @media (min-width: 36em) { .fr-btns-group--inline-sm { width: calc(100% + 1rem); } .fr-btns-group--inline-sm .fr-btn { width: auto; margin-right: 1rem; max-width: 100%; } .fr-btns-group--inline-sm > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-sm > li::before { content: none; } .fr-btns-group--inline-sm.fr-btns-group--right { margin-left: -1rem; } .fr-btns-group--inline-sm.fr-btns-group--right .fr-btn { margin-right: 0; margin-left: 1rem; } .fr-btns-group--inline-sm.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .fr-btns-group--inline-sm.fr-btns-group--center, .fr-btns-group--inline-sm.fr-btns-group--left { margin-right: -1rem; } .fr-btns-group--inline-sm.fr-btns-group--center .fr-btn, .fr-btns-group--inline-sm.fr-btns-group--left .fr-btn { margin-right: 1rem; margin-left: 0; } } @media (min-width: 48em) { .fr-btns-group--inline-md { width: calc(100% + 1rem); } .fr-btns-group--inline-md .fr-btn { width: auto; margin-right: 1rem; max-width: 100%; } .fr-btns-group--inline-md > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-md > li::before { content: none; } .fr-btns-group--inline-md.fr-btns-group--right { margin-left: -1rem; } .fr-btns-group--inline-md.fr-btns-group--right .fr-btn { margin-right: 0; margin-left: 1rem; } .fr-btns-group--inline-md.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .fr-btns-group--inline-md.fr-btns-group--center, .fr-btns-group--inline-md.fr-btns-group--left { margin-right: -1rem; } .fr-btns-group--inline-md.fr-btns-group--center .fr-btn, .fr-btns-group--inline-md.fr-btns-group--left .fr-btn { margin-right: 1rem; margin-left: 0; } } @media (min-width: 62em) { .fr-btns-group--inline-lg { width: calc(100% + 1rem); } .fr-btns-group--inline-lg .fr-btn { width: auto; margin-right: 1rem; max-width: 100%; } .fr-btns-group--inline-lg > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-lg > li::before { content: none; } .fr-btns-group--inline-lg.fr-btns-group--right { margin-left: -1rem; } .fr-btns-group--inline-lg.fr-btns-group--right .fr-btn { margin-right: 0; margin-left: 1rem; } .fr-btns-group--inline-lg.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .fr-btns-group--inline-lg.fr-btns-group--center, .fr-btns-group--inline-lg.fr-btns-group--left { margin-right: -1rem; } .fr-btns-group--inline-lg.fr-btns-group--center .fr-btn, .fr-btns-group--inline-lg.fr-btns-group--left .fr-btn { margin-right: 1rem; margin-left: 0; } } .fr-btns-group--left, .fr-btns-group--left li { justify-content: flex-start; text-align: left; } .fr-btns-group--right, .fr-btns-group--right li { justify-content: flex-end; text-align: right; } .fr-btns-group--center, .fr-btns-group--center li { justify-content: center; text-align: center; } .fr-btns-group--equisized .fr-btn { justify-content: center; } .fr-btns-group--sm .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"]) { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 1rem; } .fr-btns-group--sm .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { font: normal normal normal 1rem/1 dsfr-icons; } .fr-btns-group--sm .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { content: none; } .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"], .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 1rem; flex-direction: row; overflow: hidden; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1rem/1 dsfr-icons; } .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 1rem; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"], .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 1rem; flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1rem/1 dsfr-icons; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"], .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 1rem; flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1rem/1 dsfr-icons; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"]) { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { content: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; flex-direction: row; overflow: hidden; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 1.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^="fr-fi-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^="fr-fi-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-btns-group--lg .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"]) { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; } .fr-btns-group--lg .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { font: normal normal normal 2rem/1 dsfr-icons; } .fr-btns-group--lg .fr-btn:not([class^="fr-fi-"]):not([class*=" fr-fi-"])::before { content: none; } .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"], .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; flex-direction: row; overflow: hidden; max-width: 3.5rem; max-height: 3.5rem; padding-left: 0.75rem; padding-right: 0.75rem; justify-content: flex-start; } .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 2rem/1 dsfr-icons; } .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg:not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.75rem; font-size: 2rem; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"], .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 2rem/1 dsfr-icons; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { margin-left: -0.375rem; margin-right: 0.5rem; font-size: 1.5rem; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"], .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { font: normal normal normal 2rem/1 dsfr-icons; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^="fr-fi-"]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { margin-right: -0.375rem; margin-left: 0.5rem; font-size: 1.5rem; } .fr-btn { background-color: var(--bf500); color: var(--w-bf500); } @media (hover: hover) and (pointer: fine) { .fr-btn:not(a):not(:disabled):hover, a.fr-btn[href]:hover { background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover)); } .fr-btn:not(a):not(:disabled):active, a.fr-btn[href]:active { background-image: linear-gradient(0deg, var(--color-active), var(--color-active)); } } :root:not([data-fr-theme="dark"]) .fr-btn { --color-hover: rgba(0, 0, 221, 0.5); --color-active: rgba(41, 41, 255, 0.5); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-btn { --color-hover: rgba(0, 0, 221, 0.5); --color-active: rgba(41, 41, 255, 0.5); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-btn { --color-hover: rgba(71, 71, 255, 0.5); --color-active: rgba(0, 0, 243, 0.5); } :root[data-fr-theme="dark"] .fr-btn { --color-hover: rgba(71, 71, 255, 0.5); --color-active: rgba(0, 0, 243, 0.5); } button.fr-btn[disabled], a.fr-btn:not([href]) { color: var(--g600-g400); background-color: var(--g200); } .fr-btn--secondary { background-color: var(--t-plain); color: var(--bf500); box-shadow: inset 0 0 0 1px var(--bf500); } :root:not([data-fr-theme="dark"]) .fr-btn--secondary { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-btn--secondary, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-btn--secondary { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-btn--secondary, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-btn--secondary { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root[data-fr-theme="dark"] .fr-btn--secondary { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } button.fr-btn--secondary[disabled], a.fr-btn--secondary:not([href]) { color: var(--g600-g400); box-shadow: inset 0 0 0 1px var(--g400); background-color: var(--t-plain); } /* ------------------------------------ *\ SEARCH \* ------------------------------------ */ .fr-search-bar { display: flex; flex-direction: row; } .fr-search-bar .fr-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } .fr-search-bar .fr-input { margin: 0; border-radius: 0.25rem 0 0; max-height: none; /* TODO: intégrer la croix en background pour effacer la search bar &::-webkit-search-cancel-button { -webkit-appearance: none; } */ } .fr-search-bar .fr-input::placeholder { font-style: italic; } .fr-search-bar .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; flex-direction: row; overflow: hidden; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; flex: 1 0 auto; border-radius: 0 0.25rem 0 0; } .fr-search-bar .fr-btn::before { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; } .fr-search-bar .fr-btn::before { margin-left: 0; margin-right: 0.5rem; font-size: 1.5rem; } @media (min-width: 48em) { .fr-search-bar--lg .fr-btn { font-size: 1.25rem; line-height: 2rem; min-height: 3.5rem; padding: 0.75rem 2rem; flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-search-bar--lg .fr-btn::before { font: normal normal normal 2rem/1 dsfr-icons; } .fr-search-bar--lg .fr-btn::before { margin-left: -0.375rem; margin-right: 0.5rem; font-size: 1.5rem; } } @media (min-width: 48em) { .fr-search-bar--lg .fr-input { padding-top: 1rem; padding-bottom: 1rem; } } .fr-search-bar .fr-input { box-shadow: inset 0 -2px 0 0 var(--bf500); } /* ------------------------------------ *\ LINKS \* ------------------------------------ */ .fr-link { --link-underline: none; --link-blank-font: none; --link-blank-content: none; margin: 0; display: inline-flex; flex-direction: row; align-items: center; z-index: 1; } .fr-link { font-size: 1rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; } .fr-link--align-on-content { margin-left: -0.75rem; margin-right: -0.75rem; } .fr-link:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 2rem; max-height: 2rem; padding-left: 0.25rem; padding-right: 0.25rem; } .fr-link:not([class*="fr-link--icon-"])[class^="fr-fi-"]::before, .fr-link:not([class*="fr-link--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.25rem; font-size: 1.5rem; } .fr-link--align-on-content:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link--align-on-content:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { margin-left: -0.25rem; margin-right: -0.25rem; } .fr-link--icon-left[class^="fr-fi-"], .fr-link--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-link--icon-left[class^="fr-fi-"]::before, .fr-link--icon-left[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-link--align-on-content.fr-link--icon-left[class^="fr-fi-"], .fr-link--align-on-content.fr-link--icon-left[class*=" fr-fi-"] { margin-left: -0.5rem; margin-right: -0.75rem; } .fr-link--icon-right[class^="fr-fi-"], .fr-link--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-link--icon-right[class^="fr-fi-"]::before, .fr-link--icon-right[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-link--align-on-content.fr-link--icon-right[class^="fr-fi-"], .fr-link--align-on-content.fr-link--icon-right[class*=" fr-fi-"] { margin-left: -0.75rem; margin-right: -0.5rem; } .fr-link--sm { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; } .fr-link--sm.fr-link--align-on-content { margin-left: -0.75rem; margin-right: -0.75rem; } .fr-link--sm:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link--sm:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-link--sm:not([class*="fr-link--icon-"])[class^="fr-fi-"]::before, .fr-link--sm:not([class*="fr-link--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 1rem; } .fr-link--sm.fr-link--align-on-content:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link--sm.fr-link--align-on-content:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-link--sm.fr-link--icon-left[class^="fr-fi-"], .fr-link--sm.fr-link--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-link--sm.fr-link--icon-left[class^="fr-fi-"]::before, .fr-link--sm.fr-link--icon-left[class*=" fr-fi-"]::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-link--sm.fr-link--align-on-content.fr-link--icon-left[class^="fr-fi-"], .fr-link--sm.fr-link--align-on-content.fr-link--icon-left[class*=" fr-fi-"] { margin-left: -0.5rem; margin-right: -0.75rem; } .fr-link--sm.fr-link--icon-right[class^="fr-fi-"], .fr-link--sm.fr-link--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-link--sm.fr-link--icon-right[class^="fr-fi-"]::before, .fr-link--sm.fr-link--icon-right[class*=" fr-fi-"]::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-link--sm.fr-link--align-on-content.fr-link--icon-right[class^="fr-fi-"], .fr-link--sm.fr-link--align-on-content.fr-link--icon-right[class*=" fr-fi-"] { margin-left: -0.75rem; margin-right: -0.5rem; } .fr-link--lg { font-size: 1.25rem; line-height: 2rem; min-height: 3rem; padding: 0.5rem 1rem; border-radius: 1.5rem; } .fr-link--lg.fr-link--align-on-content { margin-left: -1rem; margin-right: -1rem; } .fr-link--lg:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link--lg:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { flex-direction: row; overflow: hidden; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-link--lg:not([class*="fr-link--icon-"])[class^="fr-fi-"]::before, .fr-link--lg:not([class*="fr-link--icon-"])[class*=" fr-fi-"]::before { margin-left: 0; margin-right: 0.5rem; font-size: 2rem; } .fr-link--lg.fr-link--align-on-content:not([class*="fr-link--icon-"])[class^="fr-fi-"], .fr-link--lg.fr-link--align-on-content:not([class*="fr-link--icon-"])[class*=" fr-fi-"] { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-link--lg.fr-link--icon-left[class^="fr-fi-"], .fr-link--lg.fr-link--icon-left[class*=" fr-fi-"] { flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-link--lg.fr-link--icon-left[class^="fr-fi-"]::before, .fr-link--lg.fr-link--icon-left[class*=" fr-fi-"]::before { margin-left: -0.375rem; margin-right: 0.5rem; font-size: 1.5rem; } .fr-link--lg.fr-link--align-on-content.fr-link--icon-left[class^="fr-fi-"], .fr-link--lg.fr-link--align-on-content.fr-link--icon-left[class*=" fr-fi-"] { margin-left: -0.625rem; margin-right: -1rem; } .fr-link--lg.fr-link--icon-right[class^="fr-fi-"], .fr-link--lg.fr-link--icon-right[class*=" fr-fi-"] { flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-link--lg.fr-link--icon-right[class^="fr-fi-"]::before, .fr-link--lg.fr-link--icon-right[class*=" fr-fi-"]::before { margin-right: -0.375rem; margin-left: 0.5rem; font-size: 1.5rem; } .fr-link--lg.fr-link--align-on-content.fr-link--icon-right[class^="fr-fi-"], .fr-link--lg.fr-link--align-on-content.fr-link--icon-right[class*=" fr-fi-"] { margin-left: -1rem; margin-right: -0.625rem; } .fr-link--close { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; margin-left: -0.75rem; margin-right: -0.5rem; display: flex; margin-left: auto; } .fr-link--close::before { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; } .fr-link--close::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-link { color: var(--bf500); background-color: var(--t-plain); } @media (hover: hover) and (pointer: fine) { .fr-link:not(a):not(:disabled):hover, a.fr-link[href]:hover { background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover)); } .fr-link:not(a):not(:disabled):active, a.fr-link[href]:active { background-image: linear-gradient(0deg, var(--color-active), var(--color-active)); } } :root:not([data-fr-theme="dark"]) .fr-link { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-link, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-link { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-link, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-link { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root[data-fr-theme="dark"] .fr-link { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } button.fr-link[disabled], a.fr-link:not([href]) { color: var(--g600-g400); } /* ------------------------------------ *\ HIGHLIGHTS \* ------------------------------------ */ .fr-highlight { padding-left: 1rem; font-size: 1rem ; line-height: 1.5rem ; } @media (min-width: 48em) { .fr-highlight { padding-left: 2rem; margin-left: 2rem; } } .fr-highlight p { margin-bottom: 0; } .fr-highlight { border-left: 0.25rem solid var(--bf500); } /* ------------------------------------ *\ UTILITIES \* ------------------------------------ */ .fr-m-n8v, .fr-m-n4w { margin: -2rem !important; } .fr-ml-n8v, .fr-ml-n4w, .fr-mx-n8v, .fr-mx-n4w { margin-left: -2rem !important; } .fr-mr-n8v, .fr-mr-n4w, .fr-mx-n8v, .fr-mx-n4w { margin-right: -2rem !important; } .fr-mt-n8v, .fr-mt-n4w, .fr-my-n8v, .fr-my-n4w { margin-top: -2rem !important; } .fr-mb-n8v, .fr-mb-n4w, .fr-my-n8v, .fr-my-n4w { margin-bottom: -2rem !important; } .fr-m-n7v { margin: -1.75rem !important; } .fr-ml-n7v, .fr-mx-n7v { margin-left: -1.75rem !important; } .fr-mr-n7v, .fr-mx-n7v { margin-right: -1.75rem !important; } .fr-mt-n7v, .fr-my-n7v { margin-top: -1.75rem !important; } .fr-mb-n7v, .fr-my-n7v { margin-bottom: -1.75rem !important; } .fr-m-n6v, .fr-m-n3w { margin: -1.5rem !important; } .fr-ml-n6v, .fr-ml-n3w, .fr-mx-n6v, .fr-mx-n3w { margin-left: -1.5rem !important; } .fr-mr-n6v, .fr-mr-n3w, .fr-mx-n6v, .fr-mx-n3w { margin-right: -1.5rem !important; } .fr-mt-n6v, .fr-mt-n3w, .fr-my-n6v, .fr-my-n3w { margin-top: -1.5rem !important; } .fr-mb-n6v, .fr-mb-n3w, .fr-my-n6v, .fr-my-n3w { margin-bottom: -1.5rem !important; } .fr-m-n5v { margin: -1.25rem !important; } .fr-ml-n5v, .fr-mx-n5v { margin-left: -1.25rem !important; } .fr-mr-n5v, .fr-mx-n5v { margin-right: -1.25rem !important; } .fr-mt-n5v, .fr-my-n5v { margin-top: -1.25rem !important; } .fr-mb-n5v, .fr-my-n5v { margin-bottom: -1.25rem !important; } .fr-m-n4v, .fr-m-n2w { margin: -1rem !important; } .fr-ml-n4v, .fr-ml-n2w, .fr-mx-n4v, .fr-mx-n2w { margin-left: -1rem !important; } .fr-mr-n4v, .fr-mr-n2w, .fr-mx-n4v, .fr-mx-n2w { margin-right: -1rem !important; } .fr-mt-n4v, .fr-mt-n2w, .fr-my-n4v, .fr-my-n2w { margin-top: -1rem !important; } .fr-mb-n4v, .fr-mb-n2w, .fr-my-n4v, .fr-my-n2w { margin-bottom: -1rem !important; } .fr-m-n3v { margin: -0.75rem !important; } .fr-ml-n3v, .fr-mx-n3v { margin-left: -0.75rem !important; } .fr-mr-n3v, .fr-mx-n3v { margin-right: -0.75rem !important; } .fr-mt-n3v, .fr-my-n3v { margin-top: -0.75rem !important; } .fr-mb-n3v, .fr-my-n3v { margin-bottom: -0.75rem !important; } .fr-m-n2v, .fr-m-n1w { margin: -0.5rem !important; } .fr-ml-n2v, .fr-ml-n1w, .fr-mx-n2v, .fr-mx-n1w { margin-left: -0.5rem !important; } .fr-mr-n2v, .fr-mr-n1w, .fr-mx-n2v, .fr-mx-n1w { margin-right: -0.5rem !important; } .fr-mt-n2v, .fr-mt-n1w, .fr-my-n2v, .fr-my-n1w { margin-top: -0.5rem !important; } .fr-mb-n2v, .fr-mb-n1w, .fr-my-n2v, .fr-my-n1w { margin-bottom: -0.5rem !important; } .fr-m-n1v { margin: -0.25rem !important; } .fr-ml-n1v, .fr-mx-n1v { margin-left: -0.25rem !important; } .fr-mr-n1v, .fr-mx-n1v { margin-right: -0.25rem !important; } .fr-mt-n1v, .fr-my-n1v { margin-top: -0.25rem !important; } .fr-mb-n1v, .fr-my-n1v { margin-bottom: -0.25rem !important; } .fr-m-0 { margin: 0rem !important; } .fr-ml-0, .fr-mx-0 { margin-left: 0rem !important; } .fr-mr-0, .fr-mx-0 { margin-right: 0rem !important; } .fr-mt-0, .fr-my-0 { margin-top: 0rem !important; } .fr-mb-0, .fr-my-0 { margin-bottom: 0rem !important; } .fr-m-1v { margin: 0.25rem !important; } .fr-ml-1v, .fr-mx-1v { margin-left: 0.25rem !important; } .fr-mr-1v, .fr-mx-1v { margin-right: 0.25rem !important; } .fr-mt-1v, .fr-my-1v { margin-top: 0.25rem !important; } .fr-mb-1v, .fr-my-1v { margin-bottom: 0.25rem !important; } .fr-m-2v, .fr-m-1w { margin: 0.5rem !important; } .fr-ml-2v, .fr-ml-1w, .fr-mx-2v, .fr-mx-1w { margin-left: 0.5rem !important; } .fr-mr-2v, .fr-mr-1w, .fr-mx-2v, .fr-mx-1w { margin-right: 0.5rem !important; } .fr-mt-2v, .fr-mt-1w, .fr-my-2v, .fr-my-1w { margin-top: 0.5rem !important; } .fr-mb-2v, .fr-mb-1w, .fr-my-2v, .fr-my-1w { margin-bottom: 0.5rem !important; } .fr-m-3v { margin: 0.75rem !important; } .fr-ml-3v, .fr-mx-3v { margin-left: 0.75rem !important; } .fr-mr-3v, .fr-mx-3v { margin-right: 0.75rem !important; } .fr-mt-3v, .fr-my-3v { margin-top: 0.75rem !important; } .fr-mb-3v, .fr-my-3v { margin-bottom: 0.75rem !important; } .fr-m-4v, .fr-m-2w { margin: 1rem !important; } .fr-ml-4v, .fr-ml-2w, .fr-mx-4v, .fr-mx-2w { margin-left: 1rem !important; } .fr-mr-4v, .fr-mr-2w, .fr-mx-4v, .fr-mx-2w { margin-right: 1rem !important; } .fr-mt-4v, .fr-mt-2w, .fr-my-4v, .fr-my-2w { margin-top: 1rem !important; } .fr-mb-4v, .fr-mb-2w, .fr-my-4v, .fr-my-2w { margin-bottom: 1rem !important; } .fr-m-5v { margin: 1.25rem !important; } .fr-ml-5v, .fr-mx-5v { margin-left: 1.25rem !important; } .fr-mr-5v, .fr-mx-5v { margin-right: 1.25rem !important; } .fr-mt-5v, .fr-my-5v { margin-top: 1.25rem !important; } .fr-mb-5v, .fr-my-5v { margin-bottom: 1.25rem !important; } .fr-m-6v, .fr-m-3w { margin: 1.5rem !important; } .fr-ml-6v, .fr-ml-3w, .fr-mx-6v, .fr-mx-3w { margin-left: 1.5rem !important; } .fr-mr-6v, .fr-mr-3w, .fr-mx-6v, .fr-mx-3w { margin-right: 1.5rem !important; } .fr-mt-6v, .fr-mt-3w, .fr-my-6v, .fr-my-3w { margin-top: 1.5rem !important; } .fr-mb-6v, .fr-mb-3w, .fr-my-6v, .fr-my-3w { margin-bottom: 1.5rem !important; } .fr-m-7v { margin: 1.75rem !important; } .fr-ml-7v, .fr-mx-7v { margin-left: 1.75rem !important; } .fr-mr-7v, .fr-mx-7v { margin-right: 1.75rem !important; } .fr-mt-7v, .fr-my-7v { margin-top: 1.75rem !important; } .fr-mb-7v, .fr-my-7v { margin-bottom: 1.75rem !important; } .fr-m-8v, .fr-m-4w { margin: 2rem !important; } .fr-ml-8v, .fr-ml-4w, .fr-mx-8v, .fr-mx-4w { margin-left: 2rem !important; } .fr-mr-8v, .fr-mr-4w, .fr-mx-8v, .fr-mx-4w { margin-right: 2rem !important; } .fr-mt-8v, .fr-mt-4w, .fr-my-8v, .fr-my-4w { margin-top: 2rem !important; } .fr-mb-8v, .fr-mb-4w, .fr-my-8v, .fr-my-4w { margin-bottom: 2rem !important; } .fr-m-9v { margin: 2.25rem !important; } .fr-ml-9v, .fr-mx-9v { margin-left: 2.25rem !important; } .fr-mr-9v, .fr-mx-9v { margin-right: 2.25rem !important; } .fr-mt-9v, .fr-my-9v { margin-top: 2.25rem !important; } .fr-mb-9v, .fr-my-9v { margin-bottom: 2.25rem !important; } .fr-m-10v, .fr-m-5w { margin: 2.5rem !important; } .fr-ml-10v, .fr-ml-5w, .fr-mx-10v, .fr-mx-5w { margin-left: 2.5rem !important; } .fr-mr-10v, .fr-mr-5w, .fr-mx-10v, .fr-mx-5w { margin-right: 2.5rem !important; } .fr-mt-10v, .fr-mt-5w, .fr-my-10v, .fr-my-5w { margin-top: 2.5rem !important; } .fr-mb-10v, .fr-mb-5w, .fr-my-10v, .fr-my-5w { margin-bottom: 2.5rem !important; } .fr-m-11v { margin: 2.75rem !important; } .fr-ml-11v, .fr-mx-11v { margin-left: 2.75rem !important; } .fr-mr-11v, .fr-mx-11v { margin-right: 2.75rem !important; } .fr-mt-11v, .fr-my-11v { margin-top: 2.75rem !important; } .fr-mb-11v, .fr-my-11v { margin-bottom: 2.75rem !important; } .fr-m-12v, .fr-m-6w { margin: 3rem !important; } .fr-ml-12v, .fr-ml-6w, .fr-mx-12v, .fr-mx-6w { margin-left: 3rem !important; } .fr-mr-12v, .fr-mr-6w, .fr-mx-12v, .fr-mx-6w { margin-right: 3rem !important; } .fr-mt-12v, .fr-mt-6w, .fr-my-12v, .fr-my-6w { margin-top: 3rem !important; } .fr-mb-12v, .fr-mb-6w, .fr-my-12v, .fr-my-6w { margin-bottom: 3rem !important; } .fr-m-13v { margin: 3.25rem !important; } .fr-ml-13v, .fr-mx-13v { margin-left: 3.25rem !important; } .fr-mr-13v, .fr-mx-13v { margin-right: 3.25rem !important; } .fr-mt-13v, .fr-my-13v { margin-top: 3.25rem !important; } .fr-mb-13v, .fr-my-13v { margin-bottom: 3.25rem !important; } .fr-m-14v, .fr-m-7w { margin: 3.5rem !important; } .fr-ml-14v, .fr-ml-7w, .fr-mx-14v, .fr-mx-7w { margin-left: 3.5rem !important; } .fr-mr-14v, .fr-mr-7w, .fr-mx-14v, .fr-mx-7w { margin-right: 3.5rem !important; } .fr-mt-14v, .fr-mt-7w, .fr-my-14v, .fr-my-7w { margin-top: 3.5rem !important; } .fr-mb-14v, .fr-mb-7w, .fr-my-14v, .fr-my-7w { margin-bottom: 3.5rem !important; } .fr-m-15v { margin: 3.75rem !important; } .fr-ml-15v, .fr-mx-15v { margin-left: 3.75rem !important; } .fr-mr-15v, .fr-mx-15v { margin-right: 3.75rem !important; } .fr-mt-15v, .fr-my-15v { margin-top: 3.75rem !important; } .fr-mb-15v, .fr-my-15v { margin-bottom: 3.75rem !important; } .fr-m-16v, .fr-m-8w { margin: 4rem !important; } .fr-ml-16v, .fr-ml-8w, .fr-mx-16v, .fr-mx-8w { margin-left: 4rem !important; } .fr-mr-16v, .fr-mr-8w, .fr-mx-16v, .fr-mx-8w { margin-right: 4rem !important; } .fr-mt-16v, .fr-mt-8w, .fr-my-16v, .fr-my-8w { margin-top: 4rem !important; } .fr-mb-16v, .fr-mb-8w, .fr-my-16v, .fr-my-8w { margin-bottom: 4rem !important; } .fr-m-17v { margin: 4.25rem !important; } .fr-ml-17v, .fr-mx-17v { margin-left: 4.25rem !important; } .fr-mr-17v, .fr-mx-17v { margin-right: 4.25rem !important; } .fr-mt-17v, .fr-my-17v { margin-top: 4.25rem !important; } .fr-mb-17v, .fr-my-17v { margin-bottom: 4.25rem !important; } .fr-m-18v, .fr-m-9w { margin: 4.5rem !important; } .fr-ml-18v, .fr-ml-9w, .fr-mx-18v, .fr-mx-9w { margin-left: 4.5rem !important; } .fr-mr-18v, .fr-mr-9w, .fr-mx-18v, .fr-mx-9w { margin-right: 4.5rem !important; } .fr-mt-18v, .fr-mt-9w, .fr-my-18v, .fr-my-9w { margin-top: 4.5rem !important; } .fr-mb-18v, .fr-mb-9w, .fr-my-18v, .fr-my-9w { margin-bottom: 4.5rem !important; } .fr-m-19v { margin: 4.75rem !important; } .fr-ml-19v, .fr-mx-19v { margin-left: 4.75rem !important; } .fr-mr-19v, .fr-mx-19v { margin-right: 4.75rem !important; } .fr-mt-19v, .fr-my-19v { margin-top: 4.75rem !important; } .fr-mb-19v, .fr-my-19v { margin-bottom: 4.75rem !important; } .fr-m-20v, .fr-m-10w { margin: 5rem !important; } .fr-ml-20v, .fr-ml-10w, .fr-mx-20v, .fr-mx-10w { margin-left: 5rem !important; } .fr-mr-20v, .fr-mr-10w, .fr-mx-20v, .fr-mx-10w { margin-right: 5rem !important; } .fr-mt-20v, .fr-mt-10w, .fr-my-20v, .fr-my-10w { margin-top: 5rem !important; } .fr-mb-20v, .fr-mb-10w, .fr-my-20v, .fr-my-10w { margin-bottom: 5rem !important; } .fr-m-21v { margin: 5.25rem !important; } .fr-ml-21v, .fr-mx-21v { margin-left: 5.25rem !important; } .fr-mr-21v, .fr-mx-21v { margin-right: 5.25rem !important; } .fr-mt-21v, .fr-my-21v { margin-top: 5.25rem !important; } .fr-mb-21v, .fr-my-21v { margin-bottom: 5.25rem !important; } .fr-m-22v, .fr-m-11w { margin: 5.5rem !important; } .fr-ml-22v, .fr-ml-11w, .fr-mx-22v, .fr-mx-11w { margin-left: 5.5rem !important; } .fr-mr-22v, .fr-mr-11w, .fr-mx-22v, .fr-mx-11w { margin-right: 5.5rem !important; } .fr-mt-22v, .fr-mt-11w, .fr-my-22v, .fr-my-11w { margin-top: 5.5rem !important; } .fr-mb-22v, .fr-mb-11w, .fr-my-22v, .fr-my-11w { margin-bottom: 5.5rem !important; } .fr-m-23v { margin: 5.75rem !important; } .fr-ml-23v, .fr-mx-23v { margin-left: 5.75rem !important; } .fr-mr-23v, .fr-mx-23v { margin-right: 5.75rem !important; } .fr-mt-23v, .fr-my-23v { margin-top: 5.75rem !important; } .fr-mb-23v, .fr-my-23v { margin-bottom: 5.75rem !important; } .fr-m-24v, .fr-m-12w { margin: 6rem !important; } .fr-ml-24v, .fr-ml-12w, .fr-mx-24v, .fr-mx-12w { margin-left: 6rem !important; } .fr-mr-24v, .fr-mr-12w, .fr-mx-24v, .fr-mx-12w { margin-right: 6rem !important; } .fr-mt-24v, .fr-mt-12w, .fr-my-24v, .fr-my-12w { margin-top: 6rem !important; } .fr-mb-24v, .fr-mb-12w, .fr-my-24v, .fr-my-12w { margin-bottom: 6rem !important; } .fr-m-25v { margin: 6.25rem !important; } .fr-ml-25v, .fr-mx-25v { margin-left: 6.25rem !important; } .fr-mr-25v, .fr-mx-25v { margin-right: 6.25rem !important; } .fr-mt-25v, .fr-my-25v { margin-top: 6.25rem !important; } .fr-mb-25v, .fr-my-25v { margin-bottom: 6.25rem !important; } .fr-m-26v, .fr-m-13w { margin: 6.5rem !important; } .fr-ml-26v, .fr-ml-13w, .fr-mx-26v, .fr-mx-13w { margin-left: 6.5rem !important; } .fr-mr-26v, .fr-mr-13w, .fr-mx-26v, .fr-mx-13w { margin-right: 6.5rem !important; } .fr-mt-26v, .fr-mt-13w, .fr-my-26v, .fr-my-13w { margin-top: 6.5rem !important; } .fr-mb-26v, .fr-mb-13w, .fr-my-26v, .fr-my-13w { margin-bottom: 6.5rem !important; } .fr-m-27v { margin: 6.75rem !important; } .fr-ml-27v, .fr-mx-27v { margin-left: 6.75rem !important; } .fr-mr-27v, .fr-mx-27v { margin-right: 6.75rem !important; } .fr-mt-27v, .fr-my-27v { margin-top: 6.75rem !important; } .fr-mb-27v, .fr-my-27v { margin-bottom: 6.75rem !important; } .fr-m-28v, .fr-m-14w { margin: 7rem !important; } .fr-ml-28v, .fr-ml-14w, .fr-mx-28v, .fr-mx-14w { margin-left: 7rem !important; } .fr-mr-28v, .fr-mr-14w, .fr-mx-28v, .fr-mx-14w { margin-right: 7rem !important; } .fr-mt-28v, .fr-mt-14w, .fr-my-28v, .fr-my-14w { margin-top: 7rem !important; } .fr-mb-28v, .fr-mb-14w, .fr-my-28v, .fr-my-14w { margin-bottom: 7rem !important; } .fr-m-29v { margin: 7.25rem !important; } .fr-ml-29v, .fr-mx-29v { margin-left: 7.25rem !important; } .fr-mr-29v, .fr-mx-29v { margin-right: 7.25rem !important; } .fr-mt-29v, .fr-my-29v { margin-top: 7.25rem !important; } .fr-mb-29v, .fr-my-29v { margin-bottom: 7.25rem !important; } .fr-m-30v, .fr-m-15w { margin: 7.5rem !important; } .fr-ml-30v, .fr-ml-15w, .fr-mx-30v, .fr-mx-15w { margin-left: 7.5rem !important; } .fr-mr-30v, .fr-mr-15w, .fr-mx-30v, .fr-mx-15w { margin-right: 7.5rem !important; } .fr-mt-30v, .fr-mt-15w, .fr-my-30v, .fr-my-15w { margin-top: 7.5rem !important; } .fr-mb-30v, .fr-mb-15w, .fr-my-30v, .fr-my-15w { margin-bottom: 7.5rem !important; } .fr-m-31v { margin: 7.75rem !important; } .fr-ml-31v, .fr-mx-31v { margin-left: 7.75rem !important; } .fr-mr-31v, .fr-mx-31v { margin-right: 7.75rem !important; } .fr-mt-31v, .fr-my-31v { margin-top: 7.75rem !important; } .fr-mb-31v, .fr-my-31v { margin-bottom: 7.75rem !important; } .fr-m-32v, .fr-m-16w { margin: 8rem !important; } .fr-ml-32v, .fr-ml-16w, .fr-mx-32v, .fr-mx-16w { margin-left: 8rem !important; } .fr-mr-32v, .fr-mr-16w, .fr-mx-32v, .fr-mx-16w { margin-right: 8rem !important; } .fr-mt-32v, .fr-mt-16w, .fr-my-32v, .fr-my-16w { margin-top: 8rem !important; } .fr-mb-32v, .fr-mb-16w, .fr-my-32v, .fr-my-16w { margin-bottom: 8rem !important; } .fr-m-auto { margin: auto; } .fr-ml-auto, .fr-mx-auto { margin-left: auto; } .fr-mr-auto, .fr-mx-auto { margin-right: auto; } .fr-mt-auto, .fr-my-auto { margin-top: auto; } .fr-mb-auto, .fr-my-auto { margin-bottom: auto; } .fr-p-0 { padding: 0rem !important; } .fr-pl-0, .fr-px-0 { padding-left: 0rem !important; } .fr-pr-0, .fr-px-0 { padding-right: 0rem !important; } .fr-pt-0, .fr-py-0 { padding-top: 0rem !important; } .fr-pb-0, .fr-py-0 { padding-bottom: 0rem !important; } .fr-p-1v { padding: 0.25rem !important; } .fr-pl-1v, .fr-px-1v { padding-left: 0.25rem !important; } .fr-pr-1v, .fr-px-1v { padding-right: 0.25rem !important; } .fr-pt-1v, .fr-py-1v { padding-top: 0.25rem !important; } .fr-pb-1v, .fr-py-1v { padding-bottom: 0.25rem !important; } .fr-p-2v, .fr-p-1w { padding: 0.5rem !important; } .fr-pl-2v, .fr-pl-1w, .fr-px-2v, .fr-px-1w { padding-left: 0.5rem !important; } .fr-pr-2v, .fr-pr-1w, .fr-px-2v, .fr-px-1w { padding-right: 0.5rem !important; } .fr-pt-2v, .fr-pt-1w, .fr-py-2v, .fr-py-1w { padding-top: 0.5rem !important; } .fr-pb-2v, .fr-pb-1w, .fr-py-2v, .fr-py-1w { padding-bottom: 0.5rem !important; } .fr-p-3v { padding: 0.75rem !important; } .fr-pl-3v, .fr-px-3v { padding-left: 0.75rem !important; } .fr-pr-3v, .fr-px-3v { padding-right: 0.75rem !important; } .fr-pt-3v, .fr-py-3v { padding-top: 0.75rem !important; } .fr-pb-3v, .fr-py-3v { padding-bottom: 0.75rem !important; } .fr-p-4v, .fr-p-2w { padding: 1rem !important; } .fr-pl-4v, .fr-pl-2w, .fr-px-4v, .fr-px-2w { padding-left: 1rem !important; } .fr-pr-4v, .fr-pr-2w, .fr-px-4v, .fr-px-2w { padding-right: 1rem !important; } .fr-pt-4v, .fr-pt-2w, .fr-py-4v, .fr-py-2w { padding-top: 1rem !important; } .fr-pb-4v, .fr-pb-2w, .fr-py-4v, .fr-py-2w { padding-bottom: 1rem !important; } .fr-p-5v { padding: 1.25rem !important; } .fr-pl-5v, .fr-px-5v { padding-left: 1.25rem !important; } .fr-pr-5v, .fr-px-5v { padding-right: 1.25rem !important; } .fr-pt-5v, .fr-py-5v { padding-top: 1.25rem !important; } .fr-pb-5v, .fr-py-5v { padding-bottom: 1.25rem !important; } .fr-p-6v, .fr-p-3w { padding: 1.5rem !important; } .fr-pl-6v, .fr-pl-3w, .fr-px-6v, .fr-px-3w { padding-left: 1.5rem !important; } .fr-pr-6v, .fr-pr-3w, .fr-px-6v, .fr-px-3w { padding-right: 1.5rem !important; } .fr-pt-6v, .fr-pt-3w, .fr-py-6v, .fr-py-3w { padding-top: 1.5rem !important; } .fr-pb-6v, .fr-pb-3w, .fr-py-6v, .fr-py-3w { padding-bottom: 1.5rem !important; } .fr-p-7v { padding: 1.75rem !important; } .fr-pl-7v, .fr-px-7v { padding-left: 1.75rem !important; } .fr-pr-7v, .fr-px-7v { padding-right: 1.75rem !important; } .fr-pt-7v, .fr-py-7v { padding-top: 1.75rem !important; } .fr-pb-7v, .fr-py-7v { padding-bottom: 1.75rem !important; } .fr-p-8v, .fr-p-4w { padding: 2rem !important; } .fr-pl-8v, .fr-pl-4w, .fr-px-8v, .fr-px-4w { padding-left: 2rem !important; } .fr-pr-8v, .fr-pr-4w, .fr-px-8v, .fr-px-4w { padding-right: 2rem !important; } .fr-pt-8v, .fr-pt-4w, .fr-py-8v, .fr-py-4w { padding-top: 2rem !important; } .fr-pb-8v, .fr-pb-4w, .fr-py-8v, .fr-py-4w { padding-bottom: 2rem !important; } .fr-p-9v { padding: 2.25rem !important; } .fr-pl-9v, .fr-px-9v { padding-left: 2.25rem !important; } .fr-pr-9v, .fr-px-9v { padding-right: 2.25rem !important; } .fr-pt-9v, .fr-py-9v { padding-top: 2.25rem !important; } .fr-pb-9v, .fr-py-9v { padding-bottom: 2.25rem !important; } .fr-p-10v, .fr-p-5w { padding: 2.5rem !important; } .fr-pl-10v, .fr-pl-5w, .fr-px-10v, .fr-px-5w { padding-left: 2.5rem !important; } .fr-pr-10v, .fr-pr-5w, .fr-px-10v, .fr-px-5w { padding-right: 2.5rem !important; } .fr-pt-10v, .fr-pt-5w, .fr-py-10v, .fr-py-5w { padding-top: 2.5rem !important; } .fr-pb-10v, .fr-pb-5w, .fr-py-10v, .fr-py-5w { padding-bottom: 2.5rem !important; } .fr-p-11v { padding: 2.75rem !important; } .fr-pl-11v, .fr-px-11v { padding-left: 2.75rem !important; } .fr-pr-11v, .fr-px-11v { padding-right: 2.75rem !important; } .fr-pt-11v, .fr-py-11v { padding-top: 2.75rem !important; } .fr-pb-11v, .fr-py-11v { padding-bottom: 2.75rem !important; } .fr-p-12v, .fr-p-6w { padding: 3rem !important; } .fr-pl-12v, .fr-pl-6w, .fr-px-12v, .fr-px-6w { padding-left: 3rem !important; } .fr-pr-12v, .fr-pr-6w, .fr-px-12v, .fr-px-6w { padding-right: 3rem !important; } .fr-pt-12v, .fr-pt-6w, .fr-py-12v, .fr-py-6w { padding-top: 3rem !important; } .fr-pb-12v, .fr-pb-6w, .fr-py-12v, .fr-py-6w { padding-bottom: 3rem !important; } .fr-p-13v { padding: 3.25rem !important; } .fr-pl-13v, .fr-px-13v { padding-left: 3.25rem !important; } .fr-pr-13v, .fr-px-13v { padding-right: 3.25rem !important; } .fr-pt-13v, .fr-py-13v { padding-top: 3.25rem !important; } .fr-pb-13v, .fr-py-13v { padding-bottom: 3.25rem !important; } .fr-p-14v, .fr-p-7w { padding: 3.5rem !important; } .fr-pl-14v, .fr-pl-7w, .fr-px-14v, .fr-px-7w { padding-left: 3.5rem !important; } .fr-pr-14v, .fr-pr-7w, .fr-px-14v, .fr-px-7w { padding-right: 3.5rem !important; } .fr-pt-14v, .fr-pt-7w, .fr-py-14v, .fr-py-7w { padding-top: 3.5rem !important; } .fr-pb-14v, .fr-pb-7w, .fr-py-14v, .fr-py-7w { padding-bottom: 3.5rem !important; } .fr-p-15v { padding: 3.75rem !important; } .fr-pl-15v, .fr-px-15v { padding-left: 3.75rem !important; } .fr-pr-15v, .fr-px-15v { padding-right: 3.75rem !important; } .fr-pt-15v, .fr-py-15v { padding-top: 3.75rem !important; } .fr-pb-15v, .fr-py-15v { padding-bottom: 3.75rem !important; } .fr-p-16v, .fr-p-8w { padding: 4rem !important; } .fr-pl-16v, .fr-pl-8w, .fr-px-16v, .fr-px-8w { padding-left: 4rem !important; } .fr-pr-16v, .fr-pr-8w, .fr-px-16v, .fr-px-8w { padding-right: 4rem !important; } .fr-pt-16v, .fr-pt-8w, .fr-py-16v, .fr-py-8w { padding-top: 4rem !important; } .fr-pb-16v, .fr-pb-8w, .fr-py-16v, .fr-py-8w { padding-bottom: 4rem !important; } .fr-p-17v { padding: 4.25rem !important; } .fr-pl-17v, .fr-px-17v { padding-left: 4.25rem !important; } .fr-pr-17v, .fr-px-17v { padding-right: 4.25rem !important; } .fr-pt-17v, .fr-py-17v { padding-top: 4.25rem !important; } .fr-pb-17v, .fr-py-17v { padding-bottom: 4.25rem !important; } .fr-p-18v, .fr-p-9w { padding: 4.5rem !important; } .fr-pl-18v, .fr-pl-9w, .fr-px-18v, .fr-px-9w { padding-left: 4.5rem !important; } .fr-pr-18v, .fr-pr-9w, .fr-px-18v, .fr-px-9w { padding-right: 4.5rem !important; } .fr-pt-18v, .fr-pt-9w, .fr-py-18v, .fr-py-9w { padding-top: 4.5rem !important; } .fr-pb-18v, .fr-pb-9w, .fr-py-18v, .fr-py-9w { padding-bottom: 4.5rem !important; } .fr-p-19v { padding: 4.75rem !important; } .fr-pl-19v, .fr-px-19v { padding-left: 4.75rem !important; } .fr-pr-19v, .fr-px-19v { padding-right: 4.75rem !important; } .fr-pt-19v, .fr-py-19v { padding-top: 4.75rem !important; } .fr-pb-19v, .fr-py-19v { padding-bottom: 4.75rem !important; } .fr-p-20v, .fr-p-10w { padding: 5rem !important; } .fr-pl-20v, .fr-pl-10w, .fr-px-20v, .fr-px-10w { padding-left: 5rem !important; } .fr-pr-20v, .fr-pr-10w, .fr-px-20v, .fr-px-10w { padding-right: 5rem !important; } .fr-pt-20v, .fr-pt-10w, .fr-py-20v, .fr-py-10w { padding-top: 5rem !important; } .fr-pb-20v, .fr-pb-10w, .fr-py-20v, .fr-py-10w { padding-bottom: 5rem !important; } .fr-p-21v { padding: 5.25rem !important; } .fr-pl-21v, .fr-px-21v { padding-left: 5.25rem !important; } .fr-pr-21v, .fr-px-21v { padding-right: 5.25rem !important; } .fr-pt-21v, .fr-py-21v { padding-top: 5.25rem !important; } .fr-pb-21v, .fr-py-21v { padding-bottom: 5.25rem !important; } .fr-p-22v, .fr-p-11w { padding: 5.5rem !important; } .fr-pl-22v, .fr-pl-11w, .fr-px-22v, .fr-px-11w { padding-left: 5.5rem !important; } .fr-pr-22v, .fr-pr-11w, .fr-px-22v, .fr-px-11w { padding-right: 5.5rem !important; } .fr-pt-22v, .fr-pt-11w, .fr-py-22v, .fr-py-11w { padding-top: 5.5rem !important; } .fr-pb-22v, .fr-pb-11w, .fr-py-22v, .fr-py-11w { padding-bottom: 5.5rem !important; } .fr-p-23v { padding: 5.75rem !important; } .fr-pl-23v, .fr-px-23v { padding-left: 5.75rem !important; } .fr-pr-23v, .fr-px-23v { padding-right: 5.75rem !important; } .fr-pt-23v, .fr-py-23v { padding-top: 5.75rem !important; } .fr-pb-23v, .fr-py-23v { padding-bottom: 5.75rem !important; } .fr-p-24v, .fr-p-12w { padding: 6rem !important; } .fr-pl-24v, .fr-pl-12w, .fr-px-24v, .fr-px-12w { padding-left: 6rem !important; } .fr-pr-24v, .fr-pr-12w, .fr-px-24v, .fr-px-12w { padding-right: 6rem !important; } .fr-pt-24v, .fr-pt-12w, .fr-py-24v, .fr-py-12w { padding-top: 6rem !important; } .fr-pb-24v, .fr-pb-12w, .fr-py-24v, .fr-py-12w { padding-bottom: 6rem !important; } .fr-p-25v { padding: 6.25rem !important; } .fr-pl-25v, .fr-px-25v { padding-left: 6.25rem !important; } .fr-pr-25v, .fr-px-25v { padding-right: 6.25rem !important; } .fr-pt-25v, .fr-py-25v { padding-top: 6.25rem !important; } .fr-pb-25v, .fr-py-25v { padding-bottom: 6.25rem !important; } .fr-p-26v, .fr-p-13w { padding: 6.5rem !important; } .fr-pl-26v, .fr-pl-13w, .fr-px-26v, .fr-px-13w { padding-left: 6.5rem !important; } .fr-pr-26v, .fr-pr-13w, .fr-px-26v, .fr-px-13w { padding-right: 6.5rem !important; } .fr-pt-26v, .fr-pt-13w, .fr-py-26v, .fr-py-13w { padding-top: 6.5rem !important; } .fr-pb-26v, .fr-pb-13w, .fr-py-26v, .fr-py-13w { padding-bottom: 6.5rem !important; } .fr-p-27v { padding: 6.75rem !important; } .fr-pl-27v, .fr-px-27v { padding-left: 6.75rem !important; } .fr-pr-27v, .fr-px-27v { padding-right: 6.75rem !important; } .fr-pt-27v, .fr-py-27v { padding-top: 6.75rem !important; } .fr-pb-27v, .fr-py-27v { padding-bottom: 6.75rem !important; } .fr-p-28v, .fr-p-14w { padding: 7rem !important; } .fr-pl-28v, .fr-pl-14w, .fr-px-28v, .fr-px-14w { padding-left: 7rem !important; } .fr-pr-28v, .fr-pr-14w, .fr-px-28v, .fr-px-14w { padding-right: 7rem !important; } .fr-pt-28v, .fr-pt-14w, .fr-py-28v, .fr-py-14w { padding-top: 7rem !important; } .fr-pb-28v, .fr-pb-14w, .fr-py-28v, .fr-py-14w { padding-bottom: 7rem !important; } .fr-p-29v { padding: 7.25rem !important; } .fr-pl-29v, .fr-px-29v { padding-left: 7.25rem !important; } .fr-pr-29v, .fr-px-29v { padding-right: 7.25rem !important; } .fr-pt-29v, .fr-py-29v { padding-top: 7.25rem !important; } .fr-pb-29v, .fr-py-29v { padding-bottom: 7.25rem !important; } .fr-p-30v, .fr-p-15w { padding: 7.5rem !important; } .fr-pl-30v, .fr-pl-15w, .fr-px-30v, .fr-px-15w { padding-left: 7.5rem !important; } .fr-pr-30v, .fr-pr-15w, .fr-px-30v, .fr-px-15w { padding-right: 7.5rem !important; } .fr-pt-30v, .fr-pt-15w, .fr-py-30v, .fr-py-15w { padding-top: 7.5rem !important; } .fr-pb-30v, .fr-pb-15w, .fr-py-30v, .fr-py-15w { padding-bottom: 7.5rem !important; } .fr-p-31v { padding: 7.75rem !important; } .fr-pl-31v, .fr-px-31v { padding-left: 7.75rem !important; } .fr-pr-31v, .fr-px-31v { padding-right: 7.75rem !important; } .fr-pt-31v, .fr-py-31v { padding-top: 7.75rem !important; } .fr-pb-31v, .fr-py-31v { padding-bottom: 7.75rem !important; } .fr-p-32v, .fr-p-16w { padding: 8rem !important; } .fr-pl-32v, .fr-pl-16w, .fr-px-32v, .fr-px-16w { padding-left: 8rem !important; } .fr-pr-32v, .fr-pr-16w, .fr-px-32v, .fr-px-16w { padding-right: 8rem !important; } .fr-pt-32v, .fr-pt-16w, .fr-py-32v, .fr-py-16w { padding-top: 8rem !important; } .fr-pb-32v, .fr-pb-16w, .fr-py-32v, .fr-py-16w { padding-bottom: 8rem !important; } @media (min-width: 48em) { .fr-m-md-n8v, .fr-m-md-n4w { margin: -2rem !important; } .fr-ml-md-n8v, .fr-ml-md-n4w, .fr-mx-md-n8v, .fr-mx-md-n4w { margin-left: -2rem !important; } .fr-mr-md-n8v, .fr-mr-md-n4w, .fr-mx-md-n8v, .fr-mx-md-n4w { margin-right: -2rem !important; } .fr-mt-md-n8v, .fr-mt-md-n4w, .fr-my-md-n8v, .fr-my-md-n4w { margin-top: -2rem !important; } .fr-mb-md-n8v, .fr-mb-md-n4w, .fr-my-md-n8v, .fr-my-md-n4w { margin-bottom: -2rem !important; } .fr-m-md-n7v { margin: -1.75rem !important; } .fr-ml-md-n7v, .fr-mx-md-n7v { margin-left: -1.75rem !important; } .fr-mr-md-n7v, .fr-mx-md-n7v { margin-right: -1.75rem !important; } .fr-mt-md-n7v, .fr-my-md-n7v { margin-top: -1.75rem !important; } .fr-mb-md-n7v, .fr-my-md-n7v { margin-bottom: -1.75rem !important; } .fr-m-md-n6v, .fr-m-md-n3w { margin: -1.5rem !important; } .fr-ml-md-n6v, .fr-ml-md-n3w, .fr-mx-md-n6v, .fr-mx-md-n3w { margin-left: -1.5rem !important; } .fr-mr-md-n6v, .fr-mr-md-n3w, .fr-mx-md-n6v, .fr-mx-md-n3w { margin-right: -1.5rem !important; } .fr-mt-md-n6v, .fr-mt-md-n3w, .fr-my-md-n6v, .fr-my-md-n3w { margin-top: -1.5rem !important; } .fr-mb-md-n6v, .fr-mb-md-n3w, .fr-my-md-n6v, .fr-my-md-n3w { margin-bottom: -1.5rem !important; } .fr-m-md-n5v { margin: -1.25rem !important; } .fr-ml-md-n5v, .fr-mx-md-n5v { margin-left: -1.25rem !important; } .fr-mr-md-n5v, .fr-mx-md-n5v { margin-right: -1.25rem !important; } .fr-mt-md-n5v, .fr-my-md-n5v { margin-top: -1.25rem !important; } .fr-mb-md-n5v, .fr-my-md-n5v { margin-bottom: -1.25rem !important; } .fr-m-md-n4v, .fr-m-md-n2w { margin: -1rem !important; } .fr-ml-md-n4v, .fr-ml-md-n2w, .fr-mx-md-n4v, .fr-mx-md-n2w { margin-left: -1rem !important; } .fr-mr-md-n4v, .fr-mr-md-n2w, .fr-mx-md-n4v, .fr-mx-md-n2w { margin-right: -1rem !important; } .fr-mt-md-n4v, .fr-mt-md-n2w, .fr-my-md-n4v, .fr-my-md-n2w { margin-top: -1rem !important; } .fr-mb-md-n4v, .fr-mb-md-n2w, .fr-my-md-n4v, .fr-my-md-n2w { margin-bottom: -1rem !important; } .fr-m-md-n3v { margin: -0.75rem !important; } .fr-ml-md-n3v, .fr-mx-md-n3v { margin-left: -0.75rem !important; } .fr-mr-md-n3v, .fr-mx-md-n3v { margin-right: -0.75rem !important; } .fr-mt-md-n3v, .fr-my-md-n3v { margin-top: -0.75rem !important; } .fr-mb-md-n3v, .fr-my-md-n3v { margin-bottom: -0.75rem !important; } .fr-m-md-n2v, .fr-m-md-n1w { margin: -0.5rem !important; } .fr-ml-md-n2v, .fr-ml-md-n1w, .fr-mx-md-n2v, .fr-mx-md-n1w { margin-left: -0.5rem !important; } .fr-mr-md-n2v, .fr-mr-md-n1w, .fr-mx-md-n2v, .fr-mx-md-n1w { margin-right: -0.5rem !important; } .fr-mt-md-n2v, .fr-mt-md-n1w, .fr-my-md-n2v, .fr-my-md-n1w { margin-top: -0.5rem !important; } .fr-mb-md-n2v, .fr-mb-md-n1w, .fr-my-md-n2v, .fr-my-md-n1w { margin-bottom: -0.5rem !important; } .fr-m-md-n1v { margin: -0.25rem !important; } .fr-ml-md-n1v, .fr-mx-md-n1v { margin-left: -0.25rem !important; } .fr-mr-md-n1v, .fr-mx-md-n1v { margin-right: -0.25rem !important; } .fr-mt-md-n1v, .fr-my-md-n1v { margin-top: -0.25rem !important; } .fr-mb-md-n1v, .fr-my-md-n1v { margin-bottom: -0.25rem !important; } .fr-m-md-0 { margin: 0rem !important; } .fr-ml-md-0, .fr-mx-md-0 { margin-left: 0rem !important; } .fr-mr-md-0, .fr-mx-md-0 { margin-right: 0rem !important; } .fr-mt-md-0, .fr-my-md-0 { margin-top: 0rem !important; } .fr-mb-md-0, .fr-my-md-0 { margin-bottom: 0rem !important; } .fr-m-md-1v { margin: 0.25rem !important; } .fr-ml-md-1v, .fr-mx-md-1v { margin-left: 0.25rem !important; } .fr-mr-md-1v, .fr-mx-md-1v { margin-right: 0.25rem !important; } .fr-mt-md-1v, .fr-my-md-1v { margin-top: 0.25rem !important; } .fr-mb-md-1v, .fr-my-md-1v { margin-bottom: 0.25rem !important; } .fr-m-md-2v, .fr-m-md-1w { margin: 0.5rem !important; } .fr-ml-md-2v, .fr-ml-md-1w, .fr-mx-md-2v, .fr-mx-md-1w { margin-left: 0.5rem !important; } .fr-mr-md-2v, .fr-mr-md-1w, .fr-mx-md-2v, .fr-mx-md-1w { margin-right: 0.5rem !important; } .fr-mt-md-2v, .fr-mt-md-1w, .fr-my-md-2v, .fr-my-md-1w { margin-top: 0.5rem !important; } .fr-mb-md-2v, .fr-mb-md-1w, .fr-my-md-2v, .fr-my-md-1w { margin-bottom: 0.5rem !important; } .fr-m-md-3v { margin: 0.75rem !important; } .fr-ml-md-3v, .fr-mx-md-3v { margin-left: 0.75rem !important; } .fr-mr-md-3v, .fr-mx-md-3v { margin-right: 0.75rem !important; } .fr-mt-md-3v, .fr-my-md-3v { margin-top: 0.75rem !important; } .fr-mb-md-3v, .fr-my-md-3v { margin-bottom: 0.75rem !important; } .fr-m-md-4v, .fr-m-md-2w { margin: 1rem !important; } .fr-ml-md-4v, .fr-ml-md-2w, .fr-mx-md-4v, .fr-mx-md-2w { margin-left: 1rem !important; } .fr-mr-md-4v, .fr-mr-md-2w, .fr-mx-md-4v, .fr-mx-md-2w { margin-right: 1rem !important; } .fr-mt-md-4v, .fr-mt-md-2w, .fr-my-md-4v, .fr-my-md-2w { margin-top: 1rem !important; } .fr-mb-md-4v, .fr-mb-md-2w, .fr-my-md-4v, .fr-my-md-2w { margin-bottom: 1rem !important; } .fr-m-md-5v { margin: 1.25rem !important; } .fr-ml-md-5v, .fr-mx-md-5v { margin-left: 1.25rem !important; } .fr-mr-md-5v, .fr-mx-md-5v { margin-right: 1.25rem !important; } .fr-mt-md-5v, .fr-my-md-5v { margin-top: 1.25rem !important; } .fr-mb-md-5v, .fr-my-md-5v { margin-bottom: 1.25rem !important; } .fr-m-md-6v, .fr-m-md-3w { margin: 1.5rem !important; } .fr-ml-md-6v, .fr-ml-md-3w, .fr-mx-md-6v, .fr-mx-md-3w { margin-left: 1.5rem !important; } .fr-mr-md-6v, .fr-mr-md-3w, .fr-mx-md-6v, .fr-mx-md-3w { margin-right: 1.5rem !important; } .fr-mt-md-6v, .fr-mt-md-3w, .fr-my-md-6v, .fr-my-md-3w { margin-top: 1.5rem !important; } .fr-mb-md-6v, .fr-mb-md-3w, .fr-my-md-6v, .fr-my-md-3w { margin-bottom: 1.5rem !important; } .fr-m-md-7v { margin: 1.75rem !important; } .fr-ml-md-7v, .fr-mx-md-7v { margin-left: 1.75rem !important; } .fr-mr-md-7v, .fr-mx-md-7v { margin-right: 1.75rem !important; } .fr-mt-md-7v, .fr-my-md-7v { margin-top: 1.75rem !important; } .fr-mb-md-7v, .fr-my-md-7v { margin-bottom: 1.75rem !important; } .fr-m-md-8v, .fr-m-md-4w { margin: 2rem !important; } .fr-ml-md-8v, .fr-ml-md-4w, .fr-mx-md-8v, .fr-mx-md-4w { margin-left: 2rem !important; } .fr-mr-md-8v, .fr-mr-md-4w, .fr-mx-md-8v, .fr-mx-md-4w { margin-right: 2rem !important; } .fr-mt-md-8v, .fr-mt-md-4w, .fr-my-md-8v, .fr-my-md-4w { margin-top: 2rem !important; } .fr-mb-md-8v, .fr-mb-md-4w, .fr-my-md-8v, .fr-my-md-4w { margin-bottom: 2rem !important; } .fr-m-md-9v { margin: 2.25rem !important; } .fr-ml-md-9v, .fr-mx-md-9v { margin-left: 2.25rem !important; } .fr-mr-md-9v, .fr-mx-md-9v { margin-right: 2.25rem !important; } .fr-mt-md-9v, .fr-my-md-9v { margin-top: 2.25rem !important; } .fr-mb-md-9v, .fr-my-md-9v { margin-bottom: 2.25rem !important; } .fr-m-md-10v, .fr-m-md-5w { margin: 2.5rem !important; } .fr-ml-md-10v, .fr-ml-md-5w, .fr-mx-md-10v, .fr-mx-md-5w { margin-left: 2.5rem !important; } .fr-mr-md-10v, .fr-mr-md-5w, .fr-mx-md-10v, .fr-mx-md-5w { margin-right: 2.5rem !important; } .fr-mt-md-10v, .fr-mt-md-5w, .fr-my-md-10v, .fr-my-md-5w { margin-top: 2.5rem !important; } .fr-mb-md-10v, .fr-mb-md-5w, .fr-my-md-10v, .fr-my-md-5w { margin-bottom: 2.5rem !important; } .fr-m-md-11v { margin: 2.75rem !important; } .fr-ml-md-11v, .fr-mx-md-11v { margin-left: 2.75rem !important; } .fr-mr-md-11v, .fr-mx-md-11v { margin-right: 2.75rem !important; } .fr-mt-md-11v, .fr-my-md-11v { margin-top: 2.75rem !important; } .fr-mb-md-11v, .fr-my-md-11v { margin-bottom: 2.75rem !important; } .fr-m-md-12v, .fr-m-md-6w { margin: 3rem !important; } .fr-ml-md-12v, .fr-ml-md-6w, .fr-mx-md-12v, .fr-mx-md-6w { margin-left: 3rem !important; } .fr-mr-md-12v, .fr-mr-md-6w, .fr-mx-md-12v, .fr-mx-md-6w { margin-right: 3rem !important; } .fr-mt-md-12v, .fr-mt-md-6w, .fr-my-md-12v, .fr-my-md-6w { margin-top: 3rem !important; } .fr-mb-md-12v, .fr-mb-md-6w, .fr-my-md-12v, .fr-my-md-6w { margin-bottom: 3rem !important; } .fr-m-md-13v { margin: 3.25rem !important; } .fr-ml-md-13v, .fr-mx-md-13v { margin-left: 3.25rem !important; } .fr-mr-md-13v, .fr-mx-md-13v { margin-right: 3.25rem !important; } .fr-mt-md-13v, .fr-my-md-13v { margin-top: 3.25rem !important; } .fr-mb-md-13v, .fr-my-md-13v { margin-bottom: 3.25rem !important; } .fr-m-md-14v, .fr-m-md-7w { margin: 3.5rem !important; } .fr-ml-md-14v, .fr-ml-md-7w, .fr-mx-md-14v, .fr-mx-md-7w { margin-left: 3.5rem !important; } .fr-mr-md-14v, .fr-mr-md-7w, .fr-mx-md-14v, .fr-mx-md-7w { margin-right: 3.5rem !important; } .fr-mt-md-14v, .fr-mt-md-7w, .fr-my-md-14v, .fr-my-md-7w { margin-top: 3.5rem !important; } .fr-mb-md-14v, .fr-mb-md-7w, .fr-my-md-14v, .fr-my-md-7w { margin-bottom: 3.5rem !important; } .fr-m-md-15v { margin: 3.75rem !important; } .fr-ml-md-15v, .fr-mx-md-15v { margin-left: 3.75rem !important; } .fr-mr-md-15v, .fr-mx-md-15v { margin-right: 3.75rem !important; } .fr-mt-md-15v, .fr-my-md-15v { margin-top: 3.75rem !important; } .fr-mb-md-15v, .fr-my-md-15v { margin-bottom: 3.75rem !important; } .fr-m-md-16v, .fr-m-md-8w { margin: 4rem !important; } .fr-ml-md-16v, .fr-ml-md-8w, .fr-mx-md-16v, .fr-mx-md-8w { margin-left: 4rem !important; } .fr-mr-md-16v, .fr-mr-md-8w, .fr-mx-md-16v, .fr-mx-md-8w { margin-right: 4rem !important; } .fr-mt-md-16v, .fr-mt-md-8w, .fr-my-md-16v, .fr-my-md-8w { margin-top: 4rem !important; } .fr-mb-md-16v, .fr-mb-md-8w, .fr-my-md-16v, .fr-my-md-8w { margin-bottom: 4rem !important; } .fr-m-md-17v { margin: 4.25rem !important; } .fr-ml-md-17v, .fr-mx-md-17v { margin-left: 4.25rem !important; } .fr-mr-md-17v, .fr-mx-md-17v { margin-right: 4.25rem !important; } .fr-mt-md-17v, .fr-my-md-17v { margin-top: 4.25rem !important; } .fr-mb-md-17v, .fr-my-md-17v { margin-bottom: 4.25rem !important; } .fr-m-md-18v, .fr-m-md-9w { margin: 4.5rem !important; } .fr-ml-md-18v, .fr-ml-md-9w, .fr-mx-md-18v, .fr-mx-md-9w { margin-left: 4.5rem !important; } .fr-mr-md-18v, .fr-mr-md-9w, .fr-mx-md-18v, .fr-mx-md-9w { margin-right: 4.5rem !important; } .fr-mt-md-18v, .fr-mt-md-9w, .fr-my-md-18v, .fr-my-md-9w { margin-top: 4.5rem !important; } .fr-mb-md-18v, .fr-mb-md-9w, .fr-my-md-18v, .fr-my-md-9w { margin-bottom: 4.5rem !important; } .fr-m-md-19v { margin: 4.75rem !important; } .fr-ml-md-19v, .fr-mx-md-19v { margin-left: 4.75rem !important; } .fr-mr-md-19v, .fr-mx-md-19v { margin-right: 4.75rem !important; } .fr-mt-md-19v, .fr-my-md-19v { margin-top: 4.75rem !important; } .fr-mb-md-19v, .fr-my-md-19v { margin-bottom: 4.75rem !important; } .fr-m-md-20v, .fr-m-md-10w { margin: 5rem !important; } .fr-ml-md-20v, .fr-ml-md-10w, .fr-mx-md-20v, .fr-mx-md-10w { margin-left: 5rem !important; } .fr-mr-md-20v, .fr-mr-md-10w, .fr-mx-md-20v, .fr-mx-md-10w { margin-right: 5rem !important; } .fr-mt-md-20v, .fr-mt-md-10w, .fr-my-md-20v, .fr-my-md-10w { margin-top: 5rem !important; } .fr-mb-md-20v, .fr-mb-md-10w, .fr-my-md-20v, .fr-my-md-10w { margin-bottom: 5rem !important; } .fr-m-md-21v { margin: 5.25rem !important; } .fr-ml-md-21v, .fr-mx-md-21v { margin-left: 5.25rem !important; } .fr-mr-md-21v, .fr-mx-md-21v { margin-right: 5.25rem !important; } .fr-mt-md-21v, .fr-my-md-21v { margin-top: 5.25rem !important; } .fr-mb-md-21v, .fr-my-md-21v { margin-bottom: 5.25rem !important; } .fr-m-md-22v, .fr-m-md-11w { margin: 5.5rem !important; } .fr-ml-md-22v, .fr-ml-md-11w, .fr-mx-md-22v, .fr-mx-md-11w { margin-left: 5.5rem !important; } .fr-mr-md-22v, .fr-mr-md-11w, .fr-mx-md-22v, .fr-mx-md-11w { margin-right: 5.5rem !important; } .fr-mt-md-22v, .fr-mt-md-11w, .fr-my-md-22v, .fr-my-md-11w { margin-top: 5.5rem !important; } .fr-mb-md-22v, .fr-mb-md-11w, .fr-my-md-22v, .fr-my-md-11w { margin-bottom: 5.5rem !important; } .fr-m-md-23v { margin: 5.75rem !important; } .fr-ml-md-23v, .fr-mx-md-23v { margin-left: 5.75rem !important; } .fr-mr-md-23v, .fr-mx-md-23v { margin-right: 5.75rem !important; } .fr-mt-md-23v, .fr-my-md-23v { margin-top: 5.75rem !important; } .fr-mb-md-23v, .fr-my-md-23v { margin-bottom: 5.75rem !important; } .fr-m-md-24v, .fr-m-md-12w { margin: 6rem !important; } .fr-ml-md-24v, .fr-ml-md-12w, .fr-mx-md-24v, .fr-mx-md-12w { margin-left: 6rem !important; } .fr-mr-md-24v, .fr-mr-md-12w, .fr-mx-md-24v, .fr-mx-md-12w { margin-right: 6rem !important; } .fr-mt-md-24v, .fr-mt-md-12w, .fr-my-md-24v, .fr-my-md-12w { margin-top: 6rem !important; } .fr-mb-md-24v, .fr-mb-md-12w, .fr-my-md-24v, .fr-my-md-12w { margin-bottom: 6rem !important; } .fr-m-md-25v { margin: 6.25rem !important; } .fr-ml-md-25v, .fr-mx-md-25v { margin-left: 6.25rem !important; } .fr-mr-md-25v, .fr-mx-md-25v { margin-right: 6.25rem !important; } .fr-mt-md-25v, .fr-my-md-25v { margin-top: 6.25rem !important; } .fr-mb-md-25v, .fr-my-md-25v { margin-bottom: 6.25rem !important; } .fr-m-md-26v, .fr-m-md-13w { margin: 6.5rem !important; } .fr-ml-md-26v, .fr-ml-md-13w, .fr-mx-md-26v, .fr-mx-md-13w { margin-left: 6.5rem !important; } .fr-mr-md-26v, .fr-mr-md-13w, .fr-mx-md-26v, .fr-mx-md-13w { margin-right: 6.5rem !important; } .fr-mt-md-26v, .fr-mt-md-13w, .fr-my-md-26v, .fr-my-md-13w { margin-top: 6.5rem !important; } .fr-mb-md-26v, .fr-mb-md-13w, .fr-my-md-26v, .fr-my-md-13w { margin-bottom: 6.5rem !important; } .fr-m-md-27v { margin: 6.75rem !important; } .fr-ml-md-27v, .fr-mx-md-27v { margin-left: 6.75rem !important; } .fr-mr-md-27v, .fr-mx-md-27v { margin-right: 6.75rem !important; } .fr-mt-md-27v, .fr-my-md-27v { margin-top: 6.75rem !important; } .fr-mb-md-27v, .fr-my-md-27v { margin-bottom: 6.75rem !important; } .fr-m-md-28v, .fr-m-md-14w { margin: 7rem !important; } .fr-ml-md-28v, .fr-ml-md-14w, .fr-mx-md-28v, .fr-mx-md-14w { margin-left: 7rem !important; } .fr-mr-md-28v, .fr-mr-md-14w, .fr-mx-md-28v, .fr-mx-md-14w { margin-right: 7rem !important; } .fr-mt-md-28v, .fr-mt-md-14w, .fr-my-md-28v, .fr-my-md-14w { margin-top: 7rem !important; } .fr-mb-md-28v, .fr-mb-md-14w, .fr-my-md-28v, .fr-my-md-14w { margin-bottom: 7rem !important; } .fr-m-md-29v { margin: 7.25rem !important; } .fr-ml-md-29v, .fr-mx-md-29v { margin-left: 7.25rem !important; } .fr-mr-md-29v, .fr-mx-md-29v { margin-right: 7.25rem !important; } .fr-mt-md-29v, .fr-my-md-29v { margin-top: 7.25rem !important; } .fr-mb-md-29v, .fr-my-md-29v { margin-bottom: 7.25rem !important; } .fr-m-md-30v, .fr-m-md-15w { margin: 7.5rem !important; } .fr-ml-md-30v, .fr-ml-md-15w, .fr-mx-md-30v, .fr-mx-md-15w { margin-left: 7.5rem !important; } .fr-mr-md-30v, .fr-mr-md-15w, .fr-mx-md-30v, .fr-mx-md-15w { margin-right: 7.5rem !important; } .fr-mt-md-30v, .fr-mt-md-15w, .fr-my-md-30v, .fr-my-md-15w { margin-top: 7.5rem !important; } .fr-mb-md-30v, .fr-mb-md-15w, .fr-my-md-30v, .fr-my-md-15w { margin-bottom: 7.5rem !important; } .fr-m-md-31v { margin: 7.75rem !important; } .fr-ml-md-31v, .fr-mx-md-31v { margin-left: 7.75rem !important; } .fr-mr-md-31v, .fr-mx-md-31v { margin-right: 7.75rem !important; } .fr-mt-md-31v, .fr-my-md-31v { margin-top: 7.75rem !important; } .fr-mb-md-31v, .fr-my-md-31v { margin-bottom: 7.75rem !important; } .fr-m-md-32v, .fr-m-md-16w { margin: 8rem !important; } .fr-ml-md-32v, .fr-ml-md-16w, .fr-mx-md-32v, .fr-mx-md-16w { margin-left: 8rem !important; } .fr-mr-md-32v, .fr-mr-md-16w, .fr-mx-md-32v, .fr-mx-md-16w { margin-right: 8rem !important; } .fr-mt-md-32v, .fr-mt-md-16w, .fr-my-md-32v, .fr-my-md-16w { margin-top: 8rem !important; } .fr-mb-md-32v, .fr-mb-md-16w, .fr-my-md-32v, .fr-my-md-16w { margin-bottom: 8rem !important; } .fr-m-md-auto { margin: auto; } .fr-ml-md-auto, .fr-mx-md-auto { margin-left: auto; } .fr-mr-md-auto, .fr-mx-md-auto { margin-right: auto; } .fr-mt-md-auto, .fr-my-md-auto { margin-top: auto; } .fr-mb-md-auto, .fr-my-md-auto { margin-bottom: auto; } .fr-p-md-0 { padding: 0rem !important; } .fr-pl-md-0, .fr-px-md-0 { padding-left: 0rem !important; } .fr-pr-md-0, .fr-px-md-0 { padding-right: 0rem !important; } .fr-pt-md-0, .fr-py-md-0 { padding-top: 0rem !important; } .fr-pb-md-0, .fr-py-md-0 { padding-bottom: 0rem !important; } .fr-p-md-1v { padding: 0.25rem !important; } .fr-pl-md-1v, .fr-px-md-1v { padding-left: 0.25rem !important; } .fr-pr-md-1v, .fr-px-md-1v { padding-right: 0.25rem !important; } .fr-pt-md-1v, .fr-py-md-1v { padding-top: 0.25rem !important; } .fr-pb-md-1v, .fr-py-md-1v { padding-bottom: 0.25rem !important; } .fr-p-md-2v, .fr-p-md-1w { padding: 0.5rem !important; } .fr-pl-md-2v, .fr-pl-md-1w, .fr-px-md-2v, .fr-px-md-1w { padding-left: 0.5rem !important; } .fr-pr-md-2v, .fr-pr-md-1w, .fr-px-md-2v, .fr-px-md-1w { padding-right: 0.5rem !important; } .fr-pt-md-2v, .fr-pt-md-1w, .fr-py-md-2v, .fr-py-md-1w { padding-top: 0.5rem !important; } .fr-pb-md-2v, .fr-pb-md-1w, .fr-py-md-2v, .fr-py-md-1w { padding-bottom: 0.5rem !important; } .fr-p-md-3v { padding: 0.75rem !important; } .fr-pl-md-3v, .fr-px-md-3v { padding-left: 0.75rem !important; } .fr-pr-md-3v, .fr-px-md-3v { padding-right: 0.75rem !important; } .fr-pt-md-3v, .fr-py-md-3v { padding-top: 0.75rem !important; } .fr-pb-md-3v, .fr-py-md-3v { padding-bottom: 0.75rem !important; } .fr-p-md-4v, .fr-p-md-2w { padding: 1rem !important; } .fr-pl-md-4v, .fr-pl-md-2w, .fr-px-md-4v, .fr-px-md-2w { padding-left: 1rem !important; } .fr-pr-md-4v, .fr-pr-md-2w, .fr-px-md-4v, .fr-px-md-2w { padding-right: 1rem !important; } .fr-pt-md-4v, .fr-pt-md-2w, .fr-py-md-4v, .fr-py-md-2w { padding-top: 1rem !important; } .fr-pb-md-4v, .fr-pb-md-2w, .fr-py-md-4v, .fr-py-md-2w { padding-bottom: 1rem !important; } .fr-p-md-5v { padding: 1.25rem !important; } .fr-pl-md-5v, .fr-px-md-5v { padding-left: 1.25rem !important; } .fr-pr-md-5v, .fr-px-md-5v { padding-right: 1.25rem !important; } .fr-pt-md-5v, .fr-py-md-5v { padding-top: 1.25rem !important; } .fr-pb-md-5v, .fr-py-md-5v { padding-bottom: 1.25rem !important; } .fr-p-md-6v, .fr-p-md-3w { padding: 1.5rem !important; } .fr-pl-md-6v, .fr-pl-md-3w, .fr-px-md-6v, .fr-px-md-3w { padding-left: 1.5rem !important; } .fr-pr-md-6v, .fr-pr-md-3w, .fr-px-md-6v, .fr-px-md-3w { padding-right: 1.5rem !important; } .fr-pt-md-6v, .fr-pt-md-3w, .fr-py-md-6v, .fr-py-md-3w { padding-top: 1.5rem !important; } .fr-pb-md-6v, .fr-pb-md-3w, .fr-py-md-6v, .fr-py-md-3w { padding-bottom: 1.5rem !important; } .fr-p-md-7v { padding: 1.75rem !important; } .fr-pl-md-7v, .fr-px-md-7v { padding-left: 1.75rem !important; } .fr-pr-md-7v, .fr-px-md-7v { padding-right: 1.75rem !important; } .fr-pt-md-7v, .fr-py-md-7v { padding-top: 1.75rem !important; } .fr-pb-md-7v, .fr-py-md-7v { padding-bottom: 1.75rem !important; } .fr-p-md-8v, .fr-p-md-4w { padding: 2rem !important; } .fr-pl-md-8v, .fr-pl-md-4w, .fr-px-md-8v, .fr-px-md-4w { padding-left: 2rem !important; } .fr-pr-md-8v, .fr-pr-md-4w, .fr-px-md-8v, .fr-px-md-4w { padding-right: 2rem !important; } .fr-pt-md-8v, .fr-pt-md-4w, .fr-py-md-8v, .fr-py-md-4w { padding-top: 2rem !important; } .fr-pb-md-8v, .fr-pb-md-4w, .fr-py-md-8v, .fr-py-md-4w { padding-bottom: 2rem !important; } .fr-p-md-9v { padding: 2.25rem !important; } .fr-pl-md-9v, .fr-px-md-9v { padding-left: 2.25rem !important; } .fr-pr-md-9v, .fr-px-md-9v { padding-right: 2.25rem !important; } .fr-pt-md-9v, .fr-py-md-9v { padding-top: 2.25rem !important; } .fr-pb-md-9v, .fr-py-md-9v { padding-bottom: 2.25rem !important; } .fr-p-md-10v, .fr-p-md-5w { padding: 2.5rem !important; } .fr-pl-md-10v, .fr-pl-md-5w, .fr-px-md-10v, .fr-px-md-5w { padding-left: 2.5rem !important; } .fr-pr-md-10v, .fr-pr-md-5w, .fr-px-md-10v, .fr-px-md-5w { padding-right: 2.5rem !important; } .fr-pt-md-10v, .fr-pt-md-5w, .fr-py-md-10v, .fr-py-md-5w { padding-top: 2.5rem !important; } .fr-pb-md-10v, .fr-pb-md-5w, .fr-py-md-10v, .fr-py-md-5w { padding-bottom: 2.5rem !important; } .fr-p-md-11v { padding: 2.75rem !important; } .fr-pl-md-11v, .fr-px-md-11v { padding-left: 2.75rem !important; } .fr-pr-md-11v, .fr-px-md-11v { padding-right: 2.75rem !important; } .fr-pt-md-11v, .fr-py-md-11v { padding-top: 2.75rem !important; } .fr-pb-md-11v, .fr-py-md-11v { padding-bottom: 2.75rem !important; } .fr-p-md-12v, .fr-p-md-6w { padding: 3rem !important; } .fr-pl-md-12v, .fr-pl-md-6w, .fr-px-md-12v, .fr-px-md-6w { padding-left: 3rem !important; } .fr-pr-md-12v, .fr-pr-md-6w, .fr-px-md-12v, .fr-px-md-6w { padding-right: 3rem !important; } .fr-pt-md-12v, .fr-pt-md-6w, .fr-py-md-12v, .fr-py-md-6w { padding-top: 3rem !important; } .fr-pb-md-12v, .fr-pb-md-6w, .fr-py-md-12v, .fr-py-md-6w { padding-bottom: 3rem !important; } .fr-p-md-13v { padding: 3.25rem !important; } .fr-pl-md-13v, .fr-px-md-13v { padding-left: 3.25rem !important; } .fr-pr-md-13v, .fr-px-md-13v { padding-right: 3.25rem !important; } .fr-pt-md-13v, .fr-py-md-13v { padding-top: 3.25rem !important; } .fr-pb-md-13v, .fr-py-md-13v { padding-bottom: 3.25rem !important; } .fr-p-md-14v, .fr-p-md-7w { padding: 3.5rem !important; } .fr-pl-md-14v, .fr-pl-md-7w, .fr-px-md-14v, .fr-px-md-7w { padding-left: 3.5rem !important; } .fr-pr-md-14v, .fr-pr-md-7w, .fr-px-md-14v, .fr-px-md-7w { padding-right: 3.5rem !important; } .fr-pt-md-14v, .fr-pt-md-7w, .fr-py-md-14v, .fr-py-md-7w { padding-top: 3.5rem !important; } .fr-pb-md-14v, .fr-pb-md-7w, .fr-py-md-14v, .fr-py-md-7w { padding-bottom: 3.5rem !important; } .fr-p-md-15v { padding: 3.75rem !important; } .fr-pl-md-15v, .fr-px-md-15v { padding-left: 3.75rem !important; } .fr-pr-md-15v, .fr-px-md-15v { padding-right: 3.75rem !important; } .fr-pt-md-15v, .fr-py-md-15v { padding-top: 3.75rem !important; } .fr-pb-md-15v, .fr-py-md-15v { padding-bottom: 3.75rem !important; } .fr-p-md-16v, .fr-p-md-8w { padding: 4rem !important; } .fr-pl-md-16v, .fr-pl-md-8w, .fr-px-md-16v, .fr-px-md-8w { padding-left: 4rem !important; } .fr-pr-md-16v, .fr-pr-md-8w, .fr-px-md-16v, .fr-px-md-8w { padding-right: 4rem !important; } .fr-pt-md-16v, .fr-pt-md-8w, .fr-py-md-16v, .fr-py-md-8w { padding-top: 4rem !important; } .fr-pb-md-16v, .fr-pb-md-8w, .fr-py-md-16v, .fr-py-md-8w { padding-bottom: 4rem !important; } .fr-p-md-17v { padding: 4.25rem !important; } .fr-pl-md-17v, .fr-px-md-17v { padding-left: 4.25rem !important; } .fr-pr-md-17v, .fr-px-md-17v { padding-right: 4.25rem !important; } .fr-pt-md-17v, .fr-py-md-17v { padding-top: 4.25rem !important; } .fr-pb-md-17v, .fr-py-md-17v { padding-bottom: 4.25rem !important; } .fr-p-md-18v, .fr-p-md-9w { padding: 4.5rem !important; } .fr-pl-md-18v, .fr-pl-md-9w, .fr-px-md-18v, .fr-px-md-9w { padding-left: 4.5rem !important; } .fr-pr-md-18v, .fr-pr-md-9w, .fr-px-md-18v, .fr-px-md-9w { padding-right: 4.5rem !important; } .fr-pt-md-18v, .fr-pt-md-9w, .fr-py-md-18v, .fr-py-md-9w { padding-top: 4.5rem !important; } .fr-pb-md-18v, .fr-pb-md-9w, .fr-py-md-18v, .fr-py-md-9w { padding-bottom: 4.5rem !important; } .fr-p-md-19v { padding: 4.75rem !important; } .fr-pl-md-19v, .fr-px-md-19v { padding-left: 4.75rem !important; } .fr-pr-md-19v, .fr-px-md-19v { padding-right: 4.75rem !important; } .fr-pt-md-19v, .fr-py-md-19v { padding-top: 4.75rem !important; } .fr-pb-md-19v, .fr-py-md-19v { padding-bottom: 4.75rem !important; } .fr-p-md-20v, .fr-p-md-10w { padding: 5rem !important; } .fr-pl-md-20v, .fr-pl-md-10w, .fr-px-md-20v, .fr-px-md-10w { padding-left: 5rem !important; } .fr-pr-md-20v, .fr-pr-md-10w, .fr-px-md-20v, .fr-px-md-10w { padding-right: 5rem !important; } .fr-pt-md-20v, .fr-pt-md-10w, .fr-py-md-20v, .fr-py-md-10w { padding-top: 5rem !important; } .fr-pb-md-20v, .fr-pb-md-10w, .fr-py-md-20v, .fr-py-md-10w { padding-bottom: 5rem !important; } .fr-p-md-21v { padding: 5.25rem !important; } .fr-pl-md-21v, .fr-px-md-21v { padding-left: 5.25rem !important; } .fr-pr-md-21v, .fr-px-md-21v { padding-right: 5.25rem !important; } .fr-pt-md-21v, .fr-py-md-21v { padding-top: 5.25rem !important; } .fr-pb-md-21v, .fr-py-md-21v { padding-bottom: 5.25rem !important; } .fr-p-md-22v, .fr-p-md-11w { padding: 5.5rem !important; } .fr-pl-md-22v, .fr-pl-md-11w, .fr-px-md-22v, .fr-px-md-11w { padding-left: 5.5rem !important; } .fr-pr-md-22v, .fr-pr-md-11w, .fr-px-md-22v, .fr-px-md-11w { padding-right: 5.5rem !important; } .fr-pt-md-22v, .fr-pt-md-11w, .fr-py-md-22v, .fr-py-md-11w { padding-top: 5.5rem !important; } .fr-pb-md-22v, .fr-pb-md-11w, .fr-py-md-22v, .fr-py-md-11w { padding-bottom: 5.5rem !important; } .fr-p-md-23v { padding: 5.75rem !important; } .fr-pl-md-23v, .fr-px-md-23v { padding-left: 5.75rem !important; } .fr-pr-md-23v, .fr-px-md-23v { padding-right: 5.75rem !important; } .fr-pt-md-23v, .fr-py-md-23v { padding-top: 5.75rem !important; } .fr-pb-md-23v, .fr-py-md-23v { padding-bottom: 5.75rem !important; } .fr-p-md-24v, .fr-p-md-12w { padding: 6rem !important; } .fr-pl-md-24v, .fr-pl-md-12w, .fr-px-md-24v, .fr-px-md-12w { padding-left: 6rem !important; } .fr-pr-md-24v, .fr-pr-md-12w, .fr-px-md-24v, .fr-px-md-12w { padding-right: 6rem !important; } .fr-pt-md-24v, .fr-pt-md-12w, .fr-py-md-24v, .fr-py-md-12w { padding-top: 6rem !important; } .fr-pb-md-24v, .fr-pb-md-12w, .fr-py-md-24v, .fr-py-md-12w { padding-bottom: 6rem !important; } .fr-p-md-25v { padding: 6.25rem !important; } .fr-pl-md-25v, .fr-px-md-25v { padding-left: 6.25rem !important; } .fr-pr-md-25v, .fr-px-md-25v { padding-right: 6.25rem !important; } .fr-pt-md-25v, .fr-py-md-25v { padding-top: 6.25rem !important; } .fr-pb-md-25v, .fr-py-md-25v { padding-bottom: 6.25rem !important; } .fr-p-md-26v, .fr-p-md-13w { padding: 6.5rem !important; } .fr-pl-md-26v, .fr-pl-md-13w, .fr-px-md-26v, .fr-px-md-13w { padding-left: 6.5rem !important; } .fr-pr-md-26v, .fr-pr-md-13w, .fr-px-md-26v, .fr-px-md-13w { padding-right: 6.5rem !important; } .fr-pt-md-26v, .fr-pt-md-13w, .fr-py-md-26v, .fr-py-md-13w { padding-top: 6.5rem !important; } .fr-pb-md-26v, .fr-pb-md-13w, .fr-py-md-26v, .fr-py-md-13w { padding-bottom: 6.5rem !important; } .fr-p-md-27v { padding: 6.75rem !important; } .fr-pl-md-27v, .fr-px-md-27v { padding-left: 6.75rem !important; } .fr-pr-md-27v, .fr-px-md-27v { padding-right: 6.75rem !important; } .fr-pt-md-27v, .fr-py-md-27v { padding-top: 6.75rem !important; } .fr-pb-md-27v, .fr-py-md-27v { padding-bottom: 6.75rem !important; } .fr-p-md-28v, .fr-p-md-14w { padding: 7rem !important; } .fr-pl-md-28v, .fr-pl-md-14w, .fr-px-md-28v, .fr-px-md-14w { padding-left: 7rem !important; } .fr-pr-md-28v, .fr-pr-md-14w, .fr-px-md-28v, .fr-px-md-14w { padding-right: 7rem !important; } .fr-pt-md-28v, .fr-pt-md-14w, .fr-py-md-28v, .fr-py-md-14w { padding-top: 7rem !important; } .fr-pb-md-28v, .fr-pb-md-14w, .fr-py-md-28v, .fr-py-md-14w { padding-bottom: 7rem !important; } .fr-p-md-29v { padding: 7.25rem !important; } .fr-pl-md-29v, .fr-px-md-29v { padding-left: 7.25rem !important; } .fr-pr-md-29v, .fr-px-md-29v { padding-right: 7.25rem !important; } .fr-pt-md-29v, .fr-py-md-29v { padding-top: 7.25rem !important; } .fr-pb-md-29v, .fr-py-md-29v { padding-bottom: 7.25rem !important; } .fr-p-md-30v, .fr-p-md-15w { padding: 7.5rem !important; } .fr-pl-md-30v, .fr-pl-md-15w, .fr-px-md-30v, .fr-px-md-15w { padding-left: 7.5rem !important; } .fr-pr-md-30v, .fr-pr-md-15w, .fr-px-md-30v, .fr-px-md-15w { padding-right: 7.5rem !important; } .fr-pt-md-30v, .fr-pt-md-15w, .fr-py-md-30v, .fr-py-md-15w { padding-top: 7.5rem !important; } .fr-pb-md-30v, .fr-pb-md-15w, .fr-py-md-30v, .fr-py-md-15w { padding-bottom: 7.5rem !important; } .fr-p-md-31v { padding: 7.75rem !important; } .fr-pl-md-31v, .fr-px-md-31v { padding-left: 7.75rem !important; } .fr-pr-md-31v, .fr-px-md-31v { padding-right: 7.75rem !important; } .fr-pt-md-31v, .fr-py-md-31v { padding-top: 7.75rem !important; } .fr-pb-md-31v, .fr-py-md-31v { padding-bottom: 7.75rem !important; } .fr-p-md-32v, .fr-p-md-16w { padding: 8rem !important; } .fr-pl-md-32v, .fr-pl-md-16w, .fr-px-md-32v, .fr-px-md-16w { padding-left: 8rem !important; } .fr-pr-md-32v, .fr-pr-md-16w, .fr-px-md-32v, .fr-px-md-16w { padding-right: 8rem !important; } .fr-pt-md-32v, .fr-pt-md-16w, .fr-py-md-32v, .fr-py-md-16w { padding-top: 8rem !important; } .fr-pb-md-32v, .fr-pb-md-16w, .fr-py-md-32v, .fr-py-md-16w { padding-bottom: 8rem !important; } } /* ------------------------------------ *\ CHECKBOXES \* ------------------------------------ */ /** * L'input de type checkbox avec son label est contenu dans un groupe * Ce groupe contient également les textes de validation, d'erreur et d'aide (optionnels) */ .fr-checkbox-group { position: relative; /** * On cache l'input de type checkbox pour le styler via le label */ /** * Dans le cas d'un fieldset, on supprime l'espacement du premier groupe */ /** * Dans le cas d'un fieldset, on supprime l'espacement du dernier groupe */ /** * Texte de validation et d'erreur */ /** * Modificateur de taille sm */ /** * Modificateur pour gérer l'état erreur */ /** * Modificateur pour gérer l'état validé */ } .fr-checkbox-group input[type="checkbox"] { position: absolute; opacity: 0; /** * On applique un display grid sur le label afin de gérer le positionnement des élements */ } .fr-checkbox-group input[type="checkbox"] + label { position: relative; padding: 0.75rem 0; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 2rem; /** * Style du texte d'aide dans le label */ /** * On ajoute l'icône check-line en taille sm via un pseudo element before */ } .fr-checkbox-group input[type="checkbox"] + label .fr-hint-text { margin: 0; width: 100%; } .fr-checkbox-group input[type="checkbox"] + label::before { font: normal normal normal 1rem/1 dsfr-icons; content: ""; display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; top: 0; left: -2rem; margin-top: 0.75rem; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border-radius: 0.25rem; transition: background-color 0.1s, color 0.1s; } .fr-checkbox-group:first-child { margin-top: -0.75rem; } .fr-checkbox-group:last-child { margin-bottom: -0.75rem; } .fr-checkbox-group .fr-error-text, .fr-checkbox-group .fr-valid-text { margin-top: 0.25rem; } .fr-checkbox-group--sm input[type="checkbox"] + label::before { width: 1rem; height: 1rem; margin-top: 1rem; left: -1.75rem; } .fr-checkbox-group--error input[type="checkbox"] + label { color: var(--error); } .fr-checkbox-group--error::before { content: ""; position: absolute; top: 0.75rem; left: -0.5rem; width: 2px; height: 1.5rem; background-color: var(--error); } .fr-checkbox-group--valid input[type="checkbox"] + label { color: var(--success); } .fr-checkbox-group--valid::before { content: ""; position: absolute; top: 0.75rem; left: -0.5rem; width: 2px; height: 1.5rem; background-color: var(--success); } /** * L'input de type checkbox avec son label est contenu dans un groupe * Ce groupe contient également les textes de validation, d'erreur et d'aide (optionnels) */ .fr-checkbox-group { /** * On cache l'input de type checkbox pour le styler via le label */ /** * Modificateur pour gérer l'état erreur */ /** * Modificateur pour gérer l'état validé */ } .fr-checkbox-group input[type="checkbox"] { /** * On applique les styles au pseudo élément before du label quand l'input présente * un état check ou active */ /** * Mixins pour appliquer les styles correspondant au focus ainsi qu'à l'état disabled */ } .fr-checkbox-group input[type="checkbox"] + label::before { border: 1px solid var(--g800); color: var(--t-plain); } .fr-checkbox-group input[type="checkbox"]:checked + label::before, .fr-checkbox-group input[type="checkbox"]:active + label::before { background-color: var(--bf500); color: var(--g100); } .fr-checkbox-group input[type="checkbox"][disabled] + label, .fr-checkbox-group input[type="checkbox"]:disabled + label { color: var(--g600-g400); } .fr-checkbox-group input[type="checkbox"][disabled] + label::before, .fr-checkbox-group input[type="checkbox"]:disabled + label::before { background-color: var(--g200); border: 1px solid var(--g400); } .fr-checkbox-group--error input[type="checkbox"] + label { color: var(--error); } .fr-checkbox-group--error::before { background-color: var(--error); } .fr-checkbox-group--valid input[type="checkbox"] + label { color: var(--success); } .fr-checkbox-group--valid::before { background-color: var(--success); } /* ------------------------------------ *\ CONTENT \* ------------------------------------ */ .fr-content-media { width: 100%; margin: 2.5rem 0; display: flex; flex-direction: column; align-items: center; } .fr-content-media__img { width: 100%; position: relative; } .fr-content-media__img::before { content: ""; display: block; width: 100%; padding-bottom: 56.25%; } .fr-content-media__img img { object-fit: cover; object-position: 50% 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .fr-content-media__caption, .fr-content-media__transcription { width: 100%; margin-top: 0.5rem; text-align: right; } .fr-content-media__caption { font-size: 0.75rem ; line-height: 1.25rem ; } .fr-content-media__transcription .fr-link { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; flex-direction: row-reverse; overflow: initial; max-width: none; max-height: none; } .fr-content-media__transcription .fr-link::before { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; } .fr-content-media__transcription .fr-link::before { margin-right: -0.25rem; margin-left: 0.5rem; font-size: 1rem; } .fr-content-media--sm .fr-content-media__img, .fr-content-media--sm .fr-responsive-vid, .fr-content-media--sm .fr-content-media__caption, .fr-content-media--sm .fr-content-media__transcription { width: 83.33333%; } @media (min-width: 48em) { .fr-content-media--sm .fr-content-media__img, .fr-content-media--sm .fr-responsive-vid, .fr-content-media--sm .fr-content-media__caption, .fr-content-media--sm .fr-content-media__transcription { width: 75%; } } .fr-content-media--lg .fr-content-media__img, .fr-content-media--lg .fr-responsive-vid, .fr-content-media--lg .fr-content-media__caption, .fr-content-media--lg .fr-content-media__transcription { width: 116.66667%; } @media (min-width: 48em) { .fr-content-media--lg .fr-content-media__img, .fr-content-media--lg .fr-responsive-vid, .fr-content-media--lg .fr-content-media__caption, .fr-content-media--lg .fr-content-media__transcription { width: 125%; } } .fr-content-media--lg .fr-content-media__img, .fr-content-media--lg .fr-responsive-vid { max-width: 100vw; } .fr-content-media--lg .fr-content-media__caption, .fr-content-media--lg .fr-content-media__transcription { max-width: calc(100vw - 2rem); } /* ------------------------------------ *\ Radios \* ------------------------------------ */ /** * L'input de type radio avec son label est contenu dans un groupe * Ce groupe contient également le texte d'aide (optionnels) */ .fr-radio-group { /** * Dans le cas d'un groupe de radios, on supprime l'espacement du premier groupe */ /** * Dans le cas d'un groupe de radios, on supprime l'espacement du dernier groupe */ /** * On cache l'input de type radio pour le styler via le label */ /** * Modificateur pour la taille sm */ } .fr-radio-group:first-child { margin-top: -0.75rem; } .fr-radio-group:first-child input[type="radio"] + label { margin-top: 0; } .fr-radio-group:last-child { margin-bottom: -0.75rem; } .fr-radio-group:last-child input[type="radio"] + label[style*='background-image:'], .fr-radio-group:last-child input[type="radio"] + label[class^="fr-ifi-"], .fr-radio-group:last-child input[type="radio"] + label[class*=" fr-ifi-"] { margin-bottom: 1.5rem; } .fr-radio-group input[type="radio"] { position: absolute; opacity: 0; /** * On applique un display grid sur le label afin de gérer le positionnement des élements */ /** * On applique les styles au pseudo élément before du label quand l'input présente * un état check */ } .fr-radio-group input[type="radio"] + label { position: relative; padding: 0.75rem 0; font-size: 1rem ; line-height: 1.5rem ; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 2rem; /** * Style du texte d'aide dans le label */ /** * On utilise un pseudo element before pour customiser l'aspect du bouton radio */ } .fr-radio-group input[type="radio"] + label .fr-hint-text { margin: 0; width: 100%; } .fr-radio-group input[type="radio"] + label::before { content: ""; display: inline-block; position: absolute; top: 0; left: -2rem; width: 1.5rem; height: 1.5rem; margin-top: 0.75rem; margin-right: 0.5rem; border: 1px solid; border-radius: 50%; transform-origin: center; } .fr-radio-group input[type="radio"]:checked + label { /** * Cas du radio riche */ } .fr-radio-group input[type="radio"]:checked + label[style*='background-image:'], .fr-radio-group input[type="radio"]:checked + label[class^="fr-ifi-"], .fr-radio-group input[type="radio"]:checked + label[class*=" fr-ifi-"] { width: 100%; } .fr-radio-group--sm input[type="radio"] + label::before { width: 1rem; height: 1rem; margin-top: 1rem; } .fr-radio-rich input[type="radio"] + .fr-label { padding-left: 3.5rem; margin-left: 0; min-height: 5.5rem; width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 6.5rem; background-position: calc(100% - 0.25rem) center; background-size: 5rem 5rem; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; /** * On applique la taille sm pour le bouton radio riche */ /** * On délimite l'espace pour l'image de droite et une icône illustrative par défaut */ } .fr-radio-rich input[type="radio"] + .fr-label::before { width: 1rem; height: 1rem; position: absolute; top: 50%; left: 1.75rem; margin-top: -0.5rem; } .fr-radio-rich input[type="radio"] + .fr-label::after { content: ""; position: absolute; top: 50%; right: 0; margin: 0.25rem; margin-top: -2.5rem; padding-left: 0.25rem; display: flex; align-items: center; justify-content: center; width: 5.25rem; height: 5rem; vertical-align: middle; } .fr-radio-rich input[type="radio"] + .fr-label .fr-hint-text { margin-left: 0; } .fr-radio-rich__icon { width: 5rem; height: 5rem; position: absolute; right: 0.25rem; object-fit: cover; border-left: 1px solid var(--g300); } /** * Style spécifique des radios intégrés dans un fiedset */ .fr-fieldset { /** * Modificateur pour afficher les radios en ligne */ } .fr-fieldset .fr-radio-rich:first-child input[type="radio"] + label { margin-top: 0.75rem; } .fr-fieldset .fr-radio-rich input[type="radio"] + label { margin-top: 0.5rem; margin-bottom: 1rem; } .fr-fieldset .fr-radio-rich:last-child input[type="radio"] + label { margin-bottom: 1.75rem; } .fr-fieldset--inline { /** * Écart entre le text d'aide et les radios riches dans le cas des radios inline */ } .fr-fieldset--inline .fr-radio-rich:not(:last-child) input[type="radio"] + label { margin-right: 0.75rem; margin-bottom: 0.5rem; } .fr-fieldset--inline .fr-radio-rich:last-child { margin-bottom: 0; } .fr-fieldset--inline .fr-radio-rich:last-child input[type="radio"] + label { margin-bottom: 0.75rem; } .fr-fieldset--inline .fr-hint-text + .fr-fieldset__content .fr-radio-rich:first-child input[type="radio"] + label { margin-top: 1.5rem; } .fr-radio-group { /** * On cache l'input de type radio pour le styler via le label */ /** * Modificateur pour la taille sm */ } .fr-radio-group input[type="radio"] { /** * On applique les styles au pseudo élément before du label quand l'input présente * un état check */ /** * Mixins pour appliquer les styles correspondant au focus ainsi qu'à l'état disabled */ } .fr-radio-group input[type="radio"]:checked + label::before { box-shadow: inset 0 0 0 5px var(--w); background-color: var(--bf500); border: 1px solid var(--bf500); } .fr-radio-group input[type="radio"][disabled] + label, .fr-radio-group input[type="radio"]:disabled + label { color: var(--g600-g400); } .fr-radio-group input[type="radio"][disabled] + label::before, .fr-radio-group input[type="radio"]:disabled + label::before { background-color: var(--g200); border: 1px solid var(--g400); } .fr-radio-group--sm input[type="radio"]:checked + label::before { box-shadow: inset 0 0 0 3px var(--w); } .fr-radio-rich input[type="radio"] + .fr-label::after { border-left: 1px solid var(--g300); } .fr-radio-rich input[type="radio"]:not(:checked) + label { box-shadow: inset 0 0 0 1px var(--g300); background-color: var(--w); } .fr-radio-rich input[type="radio"]:checked + label { background-color: var(--w); box-shadow: inset 0 0 0 1px var(--bf500); } .fr-radio-rich input[type="radio"]:checked + label::before { box-shadow: inset 0 0 0 3px var(--w); } .fr-radio-rich input[type="radio"][disabled] + label, .fr-radio-rich input[type="radio"]:disabled + label { color: var(--g600-g400); filter: grayscale(1); } .fr-radio-rich input[type="radio"][disabled] + label::before, .fr-radio-rich input[type="radio"]:disabled + label::before { background-color: var(--g200); border: 1px solid var(--g400); } .fr-radio-rich input[type="radio"][disabled] + label::after, .fr-radio-rich input[type="radio"]:disabled + label::after { background-color: transparent; } /* ------------------------------------ *\ TABLE \* ------------------------------------ */ .fr-table { position: relative; margin-bottom: 2.5rem; padding-top: calc(var(--table-offset) + 1rem); /* Style bordered, enleve le style even/odd et ajoute des bordures entre chaque ligne */ /* * Cache la caption */ /* * Fixe le caption en bas du tableau */ /* * pas de scroll ni de shadow */ /* * Fixe la taille des colonnes du tableau */ /* * Ombres ajoutées en Js si le contenu est plus grand que le conteneur */ /* * Positionnement ombres sur le tableau sans caption */ /* * Positionnement ombres sur le tableau avec caption en bas */ } .fr-table::before { content: ""; display: block; width: 100%; height: 0; } .fr-table:not(.fr-table--no-scroll) table { width: 100%; } .fr-table table { width: 100%; display: block; overflow: auto; border-spacing: 0; } .fr-table[data-fr-js-table="true"] caption { position: absolute; top: 0; } .fr-table caption { position: initial; font-weight: 700 ; font-size: 1.375rem ; line-height: 1.75rem ; margin: 0 0 1rem; font-weight: 700; text-align: left; } @media (min-width: 48em) { .fr-table caption { font-size: 1.5rem ; line-height: 2rem ; } } .fr-table td, .fr-table th { text-align: left; vertical-align: middle; display: table-cell; border: 0; padding: 0.75rem; font-size: 0.875rem ; line-height: 1.5rem ; } @media (min-width: 48em) { .fr-table td, .fr-table th { padding: 1rem; } } .fr-table th { font-weight: 700; } .fr-table thead td, .fr-table thead th { font-weight: 700; } .fr-table--bordered tbody td, .fr-table--bordered tbody th { border: 0; } .fr-table--no-caption { padding-top: 0; } .fr-table--no-caption caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; height: 0; } .fr-table--caption-bottom { padding-top: 0; margin-bottom: 0; margin-top: 1rem; } .fr-table--caption-bottom table { margin-bottom: calc(var(--table-offset) + 3.75rem); } .fr-table--caption-bottom[data-fr-js-table="true"] caption { position: absolute; top: 100%; right: 0; bottom: 0; left: 0; margin-top: 1rem; } .fr-table--caption-bottom caption { margin-top: 1rem; height: min-content; caption-side: bottom; } .fr-table--no-scroll { min-width: auto; } .fr-table--no-scroll table { overflow-x: hidden; } .fr-table--no-scroll caption { max-width: calc(100vw - 2rem); } .fr-table--layout-fixed table { display: table; table-layout: fixed; } .fr-table--shadow table::before { content: ""; display: block; position: absolute; top: calc(var(--table-offset) + 1rem); right: 0; bottom: 0; left: 0; z-index: 1; opacity: 1; pointer-events: none; } .fr-table--no-caption table::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fr-table--caption-bottom table::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fr-table { /* Style bordered, enleve le style even/odd et ajoute des bordures entre chaque ligne */ /* * Ombres ajoutées en Js si le contenu est plus grand que le conteneur */ } .fr-table caption { color: var(--g800); } .fr-table thead td, .fr-table thead th { border-bottom: 0.125rem solid var(--g600); background-color: var(--beige); color: var(--g700); } .fr-table tbody tr:nth-child(even) { background-color: var(--beige); } .fr-table tbody tr:nth-child(odd) { background-color: var(--white); } .fr-table--bordered tbody td, .fr-table--bordered tbody th { border-bottom: 1px solid var(--g400); } .fr-table--bordered tbody tr:nth-child(odd), .fr-table--bordered tbody tr:nth-child(even) { background-color: var(--t-plain); } .fr-table--shadow { /** * Modifier ombre à gauche **/ /** * Modifier ombre à droite **/ /** * Modifier combinaison ombre à gauche et ombre à droite **/ } .fr-table--shadow table::before { box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent; } .fr-table--shadow-left table::before { content: ""; display: block; box-shadow: inset 2rem 0 1rem -1.5rem var(--scroll-shadow), inset 0 0 0 transparent; } .fr-table--shadow-right table::before { content: ""; display: block; box-shadow: inset 0 0 0 transparent, inset -2rem 0 1rem -2rem var(--scroll-shadow); } .fr-table--shadow-left.fr-table--shadow-right table::before { content: ""; display: block; box-shadow: inset 2rem 0 1rem -1.5rem var(--scroll-shadow), inset -2rem 0 1rem -1.5rem var(--scroll-shadow); } /* ------------------------------------ *\ NAVIGATION \* ------------------------------------ */ .fr-nav { text-align: center; --link-underline: none; --link-blank-font: none; --link-blank-content: none; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; z-index: 3500; } .fr-nav *:focus, .fr-nav *:focus-visible { z-index: 4000; } .fr-nav__list { display: flex; flex-direction: column; margin: 0; padding: 0; } @media (min-width: 62em) { .fr-nav__list { flex-direction: row; flex-wrap: nowrap; margin: 0 -1rem; } .fr-nav__list > *:first-child:nth-last-child(2) ~ *, .fr-nav__list > *:first-child:nth-last-child(3) ~ *, .fr-nav__list > *:first-child:nth-last-child(4) ~ * { margin-left: 1.25rem; } } .fr-nav__list > .fr-nav__link, .fr-nav__list > .fr-nav__btn, .fr-nav__list > * > .fr-nav__link, .fr-nav__list > * > .fr-nav__btn { font-weight: bold; } @media (min-width: 62em) { .fr-nav__list > .fr-nav__link, .fr-nav__list > .fr-nav__btn, .fr-nav__list > * > .fr-nav__link, .fr-nav__list > * > .fr-nav__btn { padding: 1rem; margin: 0; width: auto; height: 100%; min-height: 3.5rem; font-weight: normal; } .fr-nav__list > .fr-nav__link[aria-current], .fr-nav__list > .fr-nav__btn[aria-current], .fr-nav__list > * > .fr-nav__link[aria-current], .fr-nav__list > * > .fr-nav__btn[aria-current] { /** * Pour conserver le souligné de selection par dessus la barre de mega-menu */ } .fr-nav__list > .fr-nav__link[aria-current]::before, .fr-nav__list > .fr-nav__btn[aria-current]::before, .fr-nav__list > * > .fr-nav__link[aria-current]::before, .fr-nav__list > * > .fr-nav__btn[aria-current]::before { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 2px; margin-top: 0; } .fr-nav__list > .fr-nav__link[aria-current]:not([aria-expanded="true"]), .fr-nav__list > .fr-nav__btn[aria-current]:not([aria-expanded="true"]), .fr-nav__list > * > .fr-nav__link[aria-current]:not([aria-expanded="true"]), .fr-nav__list > * > .fr-nav__btn[aria-current]:not([aria-expanded="true"]) { z-index: 3500; } } .fr-nav__item { display: flex; flex-direction: column; align-items: stretch; flex: 0 1 auto; } @media (min-width: 62em) { .fr-nav__item { box-shadow: none; align-items: flex-start; } .fr-nav__item--align-right { align-items: flex-end; } } .fr-nav__link, .fr-nav__btn { width: 100%; padding: 0.75rem 0; font-size: 1rem ; line-height: 1.5rem ; text-align: left; } @media (min-width: 62em) { .fr-nav__link, .fr-nav__btn { font-size: 0.875rem ; line-height: 1.5rem ; } } .fr-nav__link[aria-current], .fr-nav__btn[aria-current] { position: relative; } .fr-nav__link[aria-current]::before, .fr-nav__btn[aria-current]::before { content: ""; display: block; position: absolute; top: 50%; left: -1rem; width: 2px; height: 1.5rem; margin-top: -0.75rem; } .fr-nav__link { display: block; } .fr-nav__btn { display: flex; align-items: center; justify-content: space-between; flex-direction: row; } @media (min-width: 62em) { .fr-nav__btn { padding: 1rem 0.75rem 1rem 1rem; } } .fr-nav__btn::after { font: normal normal normal 1rem/1 dsfr-icons; content: ""; margin-left: 0.5rem; margin-right: 0; transition: transform 0.3s; } @media (min-width: 62em) { .fr-nav__btn { justify-content: flex-start; } } .fr-nav__btn[aria-expanded="true"]::after { transform: rotate(-180deg); } .fr-menu { z-index: 2500; margin: 0 -1rem; padding: 0 1rem; width: auto; } .fr-menu *:focus, .fr-menu *:focus-visible { z-index: 3000; } @media (min-width: 62em) { .fr-menu { position: absolute; top: 100%; margin-top: -0.25rem; padding-top: 0.25rem; } .fr-menu::after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0.25rem 1rem 2rem; z-index: -1; } } .fr-menu__list { margin: 0; padding: 0.5rem 0 1.5rem; } @media (min-width: 62em) { .fr-menu__list { padding: 0 0 2rem; } } @media (min-width: 62em) { .fr-menu__list { width: 20rem; } } .fr-menu__list > *:first-child, .fr-menu__list > *:first-child > .fr-nav__link, .fr-menu__list > *:hover, .fr-menu__list > *:hover > .fr-nav__link, .fr-menu__list > *:hover + *, .fr-menu__list > *:hover + * > .fr-nav__link { box-shadow: none; } .fr-menu .fr-nav__link { padding-left: 1rem; padding-right: 1rem; } .fr-menu .fr-nav__link::before { left: 0; } @media (min-width: 62em) { .fr-menu .fr-nav__link { padding: 0.75rem 1rem; } .fr-menu .fr-nav__link::before { left: 0; } } .fr-mega-menu { z-index: 2500; margin: 0 -1rem 1px; padding: 0 1rem; } .fr-mega-menu *:focus, .fr-mega-menu *:focus-visible { z-index: 3000; } @media (min-width: 62em) { .fr-mega-menu { position: absolute; top: 100%; right: 0; left: 0; margin: -2px 0 0; padding: 0 0 2.25rem; } } .fr-mega-menu:focus { outline: none; } @media (min-width: 62em) { .fr-mega-menu > .fr-container::before { content: ""; display: block; height: 2px; margin-left: -1rem; margin-right: -1rem; margin-bottom: 1rem; } } .fr-mega-menu .fr-link--close { display: none; } @media (min-width: 62em) { .fr-mega-menu .fr-link--close { display: flex; } } .fr-mega-menu .fr-nav__link { padding-left: 1rem; padding-right: 1rem; } .fr-mega-menu .fr-nav__link::before { left: 0; } @media (min-width: 62em) { .fr-mega-menu .fr-nav__link { padding: 0.75rem 1rem; } .fr-mega-menu .fr-nav__link::before { left: 0; } } .fr-mega-menu__leader { padding-left: 1rem; padding-right: 1rem; } @media (min-width: 62em) { .fr-mega-menu__leader { padding-left: 0; padding-right: 0; } } .fr-mega-menu__category { margin-bottom: 0; } .fr-mega-menu__list { padding-bottom: 0.75rem; } @media (min-width: 62em) { .fr-mega-menu__list { box-shadow: none; } } .fr-nav__link, .fr-nav__btn { color: var(--g800); background-color: var(--t-plain); } @media (hover: hover) and (pointer: fine) { .fr-nav__link:not(a):not(:disabled):hover, a.fr-nav__link[href]:hover, a.fr-nav__btn[href]:hover, .fr-nav__btn:not(a):not(:disabled):hover { background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover)); } .fr-nav__link:not(a):not(:disabled):active, a.fr-nav__link[href]:active, a.fr-nav__btn[href]:active, .fr-nav__btn:not(a):not(:disabled):active { background-image: linear-gradient(0deg, var(--color-active), var(--color-active)); } } :root:not([data-fr-theme="dark"]) .fr-nav__link, :root:not([data-fr-theme="dark"]) .fr-nav__btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-nav__link, :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-nav__btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-nav__link, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-nav__btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-nav__link, :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-nav__btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-nav__link, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-nav__btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root[data-fr-theme="dark"] .fr-nav__link, .fr-nav__btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } .fr-nav__link[aria-current], .fr-nav__btn[aria-current] { color: var(--bf500); } .fr-nav__link[aria-current]::before, .fr-nav__btn[aria-current]::before { background-color: var(--bf500); } @media (min-width: 62em) { .fr-nav__btn[aria-expanded="true"] { color: var(--bf500-plain); background-color: var(--bf200-bf300); } } .fr-nav__item { box-shadow: inset 0 -1px 0 0 var(--g300); } @media (min-width: 62em) { .fr-menu::after { background-color: var(--w-g750); } .fr-menu .fr-nav__link { box-shadow: 0 calc(-1rem - 1px) 0 -1rem var(--g300); } } .fr-mega-menu { background-color: var(--w-g750); } @media (min-width: 62em) { .fr-mega-menu > .fr-container::before { background-color: var(--bf200-bf300); } } .fr-mega-menu__list { box-shadow: 0 1px 0 0 var(--g300); } @media (min-width: 62em) { .fr-mega-menu__category { box-shadow: 0 calc(1rem + 1px) 0 -1rem var(--g300); } } /* ------------------------------------ *\ HEADER \* ------------------------------------ */ .fr-header { --link-underline: none; --link-blank-font: none; --link-blank-content: none; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; width: 100%; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px -16px rgba(0, 0, 0, 0.32); position: relative; } .fr-header__body-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 0 -1rem; } @media (min-width: 62em) { .fr-header__body-row { padding: 1.5rem 0; } } .fr-header__brand { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100%; } @media (min-width: 62em) { .fr-header__brand { margin-top: -1rem; margin-bottom: -1rem; } } @media (min-width: 62em) { .fr-header__brand { flex-wrap: nowrap; width: auto; } } .fr-header__brand-top { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; } @media (min-width: 62em) { .fr-header__brand-top { width: auto; } } @media (min-width: 62em) { .fr-header__logo, .fr-header__operator, .fr-header__service { padding: 1rem; } } @media (min-width: 62em) { .fr-header__logo:not(:last-child), .fr-header__operator:not(:last-child), .fr-header__service:not(:last-child) { margin-right: 0.5rem; } } .fr-header__logo { order: 1; flex: 0 0 auto; padding: 0.75rem; } .fr-header__logo .fr-logo { font-size: 0.7875rem; margin: -1em; } .fr-header__logo .fr-logo::before { width: 2.0625rem; height: 0.75rem; margin-bottom: 0.25rem; background-size: 2.0625rem 0.84375rem, 2.0625rem 0.75rem, 0; background-position: 0 -0.04688rem, 0 0, 0 0; } :root[data-fr-mourning] .fr-header__logo .fr-logo::before { background-size: 2.0625rem 0.84375rem, 0, 2.0625rem 0.75rem; } .fr-header__logo .fr-logo::after { min-width: 1.96875rem; background-size: 3.9375rem 2.8125rem; background-position: 0 calc(100% + 1.40625rem); padding-top: 1.65625rem; } :root[data-fr-theme="dark"] .fr-header__logo .fr-logo::after { background-position: -1.96875rem 100%; } .fr-header__operator { padding: 0.75rem; order: 2; flex: 0 1 auto; } .fr-header__operator img { display: block; } .fr-header__service { padding-top: 0.75rem; padding-bottom: 0.75rem; margin-left: 0.75rem; margin-right: 0.75rem; width: 100%; } @media (min-width: 62em) { .fr-header__service { margin-left: 0; margin-right: 0; } } @media (min-width: 62em) { .fr-header__service { box-shadow: none; width: auto; } } .fr-header__service-title { font-weight: 700 ; font-size: 1.125rem ; line-height: 1.5rem ; } @media (min-width: 48em) { .fr-header__service-title { font-size: 1.25rem ; line-height: 1.75rem ; } } .fr-header__service-title, .fr-header__service-tagline { margin-bottom: 0; } .fr-header .fr-modal { overflow: auto; justify-content: initial; padding-top: 1rem; padding-bottom: 4.5rem; } .fr-header .fr-modal:not([role="dialog"]) { transition: none; } .fr-header .fr-modal::before { content: none; } .fr-header .fr-modal::after { content: none; } @media (min-width: 62em) { .fr-header .fr-modal { padding: 0; margin: 0; width: auto; height: auto; visibility: inherit; opacity: 1; position: initial; background-color: transparent; overflow: initial; } } .fr-header .fr-modal > * > .fr-link--close { margin-bottom: 1.5rem; } @media (min-width: 62em) { .fr-header .fr-modal > * > .fr-link--close { display: none; } } .fr-header__navbar { display: flex; flex-direction: row; align-items: flex-end; padding: 0.25rem; margin-left: auto; order: 3; flex: 0 0 auto; align-self: flex-start; z-index: 2500; } @media (min-width: 62em) { .fr-header__navbar { display: none; } } .fr-header__navbar .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; flex-direction: row; overflow: hidden; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; flex: 0 0 auto; white-space: nowrap; } .fr-header__navbar .fr-btn::before { font: normal normal normal 1.5rem/1 dsfr-icons; } .fr-header__navbar .fr-btn::before { margin-left: 0; margin-right: 0.5rem; font-size: 1.5rem; } .fr-header__navbar .fr-btn--menu::before { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; } .fr-header__navbar .fr-btn--search::before { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; } @media (min-width: 62em) { .fr-header__tools { flex-direction: column; align-items: flex-end; text-align: right; padding-left: 1rem; padding-right: 1rem; margin-left: auto; flex: 1 0 auto; } .fr-header__tools-links + .fr-header__search { margin-top: 1rem; } } @media (min-width: 62em) { .fr-header__tools .fr-header__search { max-width: 25rem; margin-left: auto; } } .fr-header .fr-links-group .fr-link { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; flex-direction: row; overflow: initial; max-width: none; max-height: none; } .fr-header .fr-links-group .fr-link::before { font: normal normal normal 1rem/1 dsfr-icons; } .fr-header .fr-links-group .fr-link::before { margin-left: -0.25rem; margin-right: 0.5rem; font-size: 1rem; } .fr-header__tools-links { display: none; } @media (min-width: 62em) { .fr-header__tools-links { display: initial; } } .fr-header__tools-links .fr-links-group { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .fr-header__tools-links .fr-links-group > *:not(:last-child) > .fr-link::after, .fr-header__tools-links .fr-links-group > .fr-link:not(last-child)::after { content: ""; display: block; position: relative; right: -1rem; width: 1px; height: 1rem; } .fr-header__tools-links .fr-link { overflow: initial; margin-left: 0.25rem; margin-right: 0.25rem; } .fr-header .fr-header__menu-links .fr-links-group { display: flex; flex-direction: column; } .fr-header .fr-header__menu-links .fr-links-group .fr-link { border-radius: 0; width: 100%; min-height: 3rem; } @media (min-width: 62em) { .fr-header .fr-nav { justify-content: flex-start; } .fr-header .fr-nav__list { max-width: calc(100% + 1rem); } .fr-header .fr-nav .fr-menu::after, .fr-header .fr-nav .fr-mega-menu { box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px -16px rgba(0, 0, 0, 0.32); } } .fr-header { background-color: var(--w-g750); } .fr-header__service { box-shadow: inset 0 1px 0 0 var(--g300); } .fr-header__menu-links .fr-link { box-shadow: inset 0 -1px 0 0 var(--g300); } .fr-header__tools-links .fr-link::after { background-color: var(--g400); } .fr-header__navbar .fr-service__title { color: var(--g800); } .fr-header__navbar .fr-btn { background-color: var(--t-plain); color: var(--bf500); } :root:not([data-fr-theme="dark"]) .fr-header__navbar .fr-btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-header__navbar .fr-btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-header__navbar .fr-btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-header__navbar .fr-btn, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-header__navbar .fr-btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root[data-fr-theme="dark"] .fr-header__navbar .fr-btn { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } .fr-header__navbar .fr-btn--menu { color: var(--g700); } @media (min-width: 62em) { .fr-header .fr-header__menu { box-shadow: inset 0 1px 0 0 var(--g300); } } .fr-header .fr-modal { background-color: var(--w-g750); } /* ------------------------------------ *\ FOOTER \* ------------------------------------ */ .fr-footer { --link-underline: none; --link-blank-font: none; --link-blank-content: none; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; width: 100%; border-top: 2px solid var(--bf500); border-bottom: 1px solid var(--g400); padding-top: 2.5rem; /** * Conteneur du bloc marque, avec le logo principal et éventuellement * un logo opérateur */ /** * On fixe une largeur maximale pour le logo opérateur */ /** * La partie "content" représente les informations sous forme de texte rajoutées dans le footer * ainsi que les éventuels liens simples */ /** * Contenu texte simple */ /** * Liste des liens situés en dessous de la partie texte */ /** * La partie "top" du footer est constituée de colonnes basées sur le système de grille du Design System * Ces colonnes sont constituées d’une catégorie (optionnel) et d'une liste verticale de liens */ /** * Catégorie (optionnel) */ /** * Style de la liste */ /** * Style du lien */ /** * La partie "bottom" du footer est constituée d'une liste de liens simples (ferrée à gauche) * ainsi que du copyright (ferré à droite) */ /** * Liste de liens avec séparateur */ /** * Style du lien de la liste */ /** * Copyright */ /** * La partie "partners" du footer est constituée de logos organisés * en partenaires principaux (ferré à gauche) et secondaires (ferrés à droite) */ /** * Container des logos partenaires (principaux et secondaires) */ /** * Container des logos partenaires principaux */ /** * Container des logos partenaires secondaires */ } .fr-footer__body { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } @media (min-width: 48em) { .fr-footer__body { margin-bottom: 1.5rem; } } .fr-footer__body + .fr-footer__bottom { margin-top: 1rem; } .fr-footer__brand { display: flex; flex-direction: row; align-items: center; flex-basis: 100%; /** * Si on ajoute un logo opérateur à côté du logo principal, on lui applique une marge à gauche * On prévoit que le logo soit encapsulé dans un , ou bien directement en img ou en svg * (Eventuellement prévoir une classe pour pouvoir le mettre en background image) */ /** * Styles quand un logo opérateur est présent */ } .fr-footer__brand .fr-logo { font-size: 1.05rem; margin: -1em; } .fr-footer__brand .fr-logo::before { width: 2.75rem; height: 1rem; margin-bottom: 0.33333rem; background-size: 2.75rem 1.125rem, 2.75rem 1rem, 0; background-position: 0 -0.0625rem, 0 0, 0 0; } :root[data-fr-mourning] .fr-footer__brand .fr-logo::before { background-size: 2.75rem 1.125rem, 0, 2.75rem 1rem; } .fr-footer__brand .fr-logo::after { min-width: 2.625rem; background-size: 5.25rem 3.75rem; background-position: 0 calc(100% + 1.875rem); padding-top: 2.20833rem; } :root[data-fr-theme="dark"] .fr-footer__brand .fr-logo::after { background-position: -2.625rem 100%; } @media (min-width: 48em) { .fr-footer__brand .fr-logo { font-size: 1.3125rem; } .fr-footer__brand .fr-logo::before { width: 3.4375rem; height: 1.25rem; margin-bottom: 0.41667rem; background-size: 3.4375rem 1.40625rem, 3.4375rem 1.25rem, 0; background-position: 0 -0.07812rem, 0 0, 0 0; } :root[data-fr-mourning] .fr-footer__brand .fr-logo::before { background-size: 3.4375rem 1.40625rem, 0, 3.4375rem 1.25rem; } .fr-footer__brand .fr-logo::after { min-width: 3.28125rem; background-size: 6.5625rem 4.6875rem; background-position: 0 calc(100% + 2.34375rem); padding-top: 2.76042rem; } :root[data-fr-theme="dark"] .fr-footer__brand .fr-logo::after { background-position: -3.28125rem 100%; } } .fr-footer__brand .fr-logo + .fr-footer__brand-link { margin-left: 1.5rem; } @media (min-width: 48em) { .fr-footer__brand .fr-logo + .fr-footer__brand-link { margin-left: 3rem; } } .fr-footer__body--operator .fr-footer__brand .fr-footer__brand-link + .fr-footer__brand-link .fr-footer__logo { width: auto; min-width: initial; max-height: 100px; } .fr-footer__body--operator .fr-footer__brand .fr-footer__logo { min-width: initial; max-width: 100%; } @media (min-width: 36em) { .fr-footer__body--operator .fr-footer__brand .fr-footer__logo { max-width: 200px; } } @media (min-width: 62em) { .fr-footer__body--operator .fr-footer__brand .fr-footer__logo { min-width: 200px; max-width: 100%; } } @media (min-width: 48em) { .fr-footer__brand { flex-basis: auto; padding-right: 1rem; } } .fr-footer__logo { width: 200px; height: auto; max-height: 100%; } .fr-footer__content { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-top: 1.5rem; /** * Si un logo opérateur est présent, on passe le content à 50% de la largeur disponible */ } @media (min-width: 48em) { .fr-footer__content { margin-left: auto; } } @media (min-width: 62em) { .fr-footer__content { margin-top: 0; flex-basis: calc(100% - (100% / 2)); } } .fr-footer__body--operator .fr-footer__content { margin-top: 1.5rem; } @media (min-width: 62em) { .fr-footer__body--operator .fr-footer__content { margin-top: 0; flex-basis: 50%; } } .fr-footer__content-desc { --link-underline: 0 1px 0 0 currentColor; --link-blank-font: normal normal normal 1rem/1 dsfr-icons; --link-blank-content: "\00a0"; margin: 0 0 0.5rem; width: 100%; font-size: 0.875rem ; line-height: 1.5rem ; } .fr-footer__content-list { display: flex; flex-direction: row; align-self: center; flex-wrap: wrap; } .fr-footer__content-list > li { margin-right: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } @media (min-width: 36em) { .fr-footer__content-list > li { margin-right: 1.5rem; } } .fr-footer__content-list > li::before { content: none; } .fr-footer__content-list > li:last-child { margin-right: 0; } .fr-footer__content-link { display: inline-flex; font-weight: bold; font-size: 0.875rem ; line-height: 1.5rem ; } .fr-footer__top { display: flex; margin: -2.5rem 0 1rem; padding: 2rem 0 1rem; } @media (min-width: 48em) { .fr-footer__top { margin: -2.5rem 0 2.5rem; } } .fr-footer__top-cat { margin: 0 0 0.75rem; font-size: 0.75rem ; line-height: 1.25rem ; font-weight: 700; text-align: left; } .fr-footer__top-list { margin: 0; } .fr-footer__top-link { display: block; font-size: 0.75rem ; line-height: 1.25rem ; margin-bottom: 0.75rem; } .fr-footer__bottom { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 2.5rem; } .fr-footer__bottom-list { flex-wrap: wrap; align-items: center; width: 100%; padding: 0.5rem 0 1rem; width: 100%; margin: 0; } .fr-footer__bottom-item { position: relative; margin: 0.5rem 0 0 0.25rem; display: inline; } @media (min-width: 48em) { .fr-footer__bottom-item { margin: 0.5rem 0 0 0.75rem; } } .fr-footer__bottom-item::before { content: ""; display: inline-block; vertical-align: middle; position: relative; width: 1px; height: 1rem; margin-right: 0.25rem; margin-bottom: 0.5rem; margin-top: 0.5rem; } @media (min-width: 48em) { .fr-footer__bottom-item::before { margin-right: 0.75rem; } } @media (min-width: 48em) { .fr-footer__bottom-item::before { margin-bottom: 0.25rem; } } @media (min-width: 48em) { .fr-footer__bottom-item::before { margin-top: 0.25rem; } } .fr-footer__bottom-item:first-child { margin: 0.5rem 0 0; } .fr-footer__bottom-item:first-child::before { content: none; } .fr-footer__bottom-link { font-size: 0.75rem ; line-height: 1.25rem ; } .fr-footer__bottom-copy * { --link-underline: 0 1px 0 0 currentColor; --link-blank-font: normal normal normal 1rem/1 dsfr-icons; --link-blank-content: "\00a0"; font-size: 0.75rem ; line-height: 1.25rem ; margin-bottom: 1rem; margin-top: 0.5rem; } .fr-footer__partners { margin-top: 1rem; padding-top: 1rem; /** * Style des liens qui entourent les logos partenaires */ /** * On surcharge le style du logo de base */ } .fr-footer__partners a { display: flex; align-items: center; justify-content: center; width: 160px; height: 90px; box-shadow: none; } .fr-footer__partners .fr-footer__logo { width: auto; height: auto; max-width: 100%; } .fr-footer__partners + .fr-footer__bottom { margin-top: 0.5rem; } .fr-footer__partners-title { font-size: 0.875rem ; line-height: 1.5rem ; margin: 0; flex-basis: 100%; text-align: center; } @media (min-width: 36em) { .fr-footer__partners-title { text-align: left; } } .fr-footer__partners-logos { display: flex; flex-wrap: wrap; } @media (min-width: 48em) { .fr-footer__partners-logos { flex-wrap: nowrap; margin: 0 -1rem; } } .fr-footer__partners-main { flex-basis: 100%; padding-top: 0.5rem; display: flex; flex-direction: row; justify-content: center; } @media (min-width: 48em) { .fr-footer__partners-main a { margin: 0 0 0 1rem; } } .fr-footer__partners-main + .fr-footer__partners-sub { padding-top: 1rem; } @media (min-width: 48em) { .fr-footer__partners-main + .fr-footer__partners-sub { padding-left: 2rem; padding-top: 0; } .fr-footer__partners-main + .fr-footer__partners-sub > ul { justify-content: flex-end; } .fr-footer__partners-main + .fr-footer__partners-sub > ul > li { margin: 0 1rem 0 0; } .fr-footer__partners-main + .fr-footer__partners-sub > ul > li a { margin-left: 0; } } @media (min-width: 36em) { .fr-footer__partners-main { flex-basis: auto; padding-top: 0; margin-top: 0.5rem; } } .fr-footer__partners-sub { /** * On surcharge le style du lien pour les logos secondaires */ } @media (min-width: 36em) { .fr-footer__partners-sub { margin: 1rem -1rem 0; } } @media (min-width: 48em) { .fr-footer__partners-sub { margin: 0.5rem 0 0 0; } } .fr-footer__partners-sub, .fr-footer__partners-sub > ul { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; } @media (min-width: 36em) { .fr-footer__partners-sub, .fr-footer__partners-sub > ul { flex-direction: row; } } .fr-footer__partners-sub .fr-footer__partners-link { box-shadow: none; margin: 0; margin-bottom: 0.5rem; } @media (min-width: 36em) { .fr-footer__partners-sub .fr-footer__partners-link { margin: 0 0 0.5rem 1rem; } } .fr-footer { border-top: 2px solid var(--bf500); border-bottom: 1px solid var(--g400); } .fr-footer__content-link { color: var(--g800); } .fr-footer__top { background-color: var(--beige); } .fr-footer__top-link { color: var(--g600); } .fr-footer__bottom { border-top: 1px solid var(--g400); } .fr-footer__bottom-item::before { background-color: var(--g400); } .fr-footer__bottom-link { color: var(--g600); background-color: var(--t-plain); } .fr-footer__bottom-copy { color: var(--g600); } .fr-footer__partners { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--g400); } .fr-footer__partners a { background: #fff; } /* ------------------------------------ *\ BREADCRUMB \* ------------------------------------ */ /** un padding de 4px et une marge négative en compensation sont mis en place afin d'éviter de couper le focus. */ .fr-breadcrumb { margin: 1rem 0 2rem; font-size: 0.75rem ; line-height: 1.25rem ; position: relative; /** * margin-bottom de 2v pour créer cet espace entre chaque ligne */ } @media (min-width: 48em) { .fr-breadcrumb { margin-bottom: 2.5rem; } } .fr-breadcrumb__button { box-shadow: var(--link-underline); font-size: 0.75rem ; line-height: 1.25rem ; margin: 0; padding: 0; color: inherit; } .fr-breadcrumb__button[aria-expanded="true"] { display: none; } @media (min-width: 48em) { .fr-breadcrumb__button { display: none; } } .fr-breadcrumb .fr-collapse { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; transform: translateY(-4px); } @media (min-width: 48em) { .fr-breadcrumb .fr-collapse { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; transform: none; visibility: inherit; overflow: visible; max-height: initial; } .fr-breadcrumb .fr-collapse::before { content: none; } } .fr-breadcrumb__list { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: inline-flex; flex-direction: row; flex-wrap: wrap; transform: translateY(4px); } @media (min-width: 48em) { .fr-breadcrumb__list { transform: none; } } .fr-breadcrumb__link { position: relative; display: inline-flex; font-size: 0.75rem ; line-height: 1.25rem ; margin-bottom: 0.5rem; /** * flèche séparatrice en font-icon */ } .fr-breadcrumb__link:not([aria-current]) { margin-right: 1.5rem; } .fr-breadcrumb__link:not([aria-current])::after { font: normal normal normal 1rem/1 dsfr-icons; content: ""; } .fr-breadcrumb__link:not([aria-current])::after { position: absolute; top: 0.125rem; right: -1.25rem; pointer-events: none; } .fr-breadcrumb__link[aria-current] { --link-underline: none; --link-blank-font: none; --link-blank-content: none; pointer-events: none; cursor: default; } .fr-breadcrumb { color: var(--g600); } .fr-breadcrumb__button { background-color: var(--t-plain); } .fr-breadcrumb__link[aria-current] { color: var(--g800); } .fr-breadcrumb { color: var(--g600); } .fr-breadcrumb__button { background-color: var(--t-plain); } .fr-breadcrumb__link[aria-current] { color: var(--g800); } /* ------------------------------------ *\ SUMMARY \* ------------------------------------ */ .fr-summary { --link-underline: none; --link-blank-font: none; --link-blank-content: none; padding: 1.5rem; font-size: 0.75rem ; line-height: 1.25rem ; /** * la base de l'espace occupé par le marker est calculé sur 2 nbsp (270 em-square) */ --summary-offset: 0.54; /** * on ajoute l'écart des éléments ajoutés à chaque sous niveau : un chiffre (600 em-square) et un point (270 em-square) */ } @media (min-width: 48em) { .fr-summary { padding: 2rem; } } .fr-summary ol { --summary-base: calc(var(--summary-offset) + 0.87); list-style-type: none; } .fr-summary li { --summary-offset: var(--summary-base); } .fr-summary li::marker { content: none; } .fr-summary li:nth-of-type(1n + 10) { --summary-offset: calc(var(--summary-base) + 0.4); } .fr-summary__title { margin: 0 0 0.5rem; font-weight: 700; text-transform: uppercase; } .fr-summary__link { display: inline-block; position: relative; padding: 0.5rem 0.5rem 0.5rem calc(var(--summary-offset) * var(--xl-size) + 0.5rem); margin: 0 -0.5rem -0.25rem calc(var(--summary-offset) * var(--xl-size) * -1 - 0.5rem); } .fr-summary__link::before { content: var(--ol-content); position: absolute; left: 0.5rem; font-size: var(--xl-size); font-weight: bold; } .fr-summary { background-color: var(--beige); } .fr-summary__title { color: var(--g800); } .fr-summary li > a { color: var(--g800); background-color: var(--t-plain); } @media (hover: hover) and (pointer: fine) { .fr-summary li > a:not(a):not(:disabled):hover, .fr-summary li > a[href]:hover { background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover)); } .fr-summary li > a:not(a):not(:disabled):active, .fr-summary li > a[href]:active { background-image: linear-gradient(0deg, var(--color-active), var(--color-active)); } } :root:not([data-fr-theme="dark"]) .fr-summary li > a { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-summary li > a, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-summary li > a { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-summary li > a, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-summary li > a { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } :root[data-fr-theme="dark"] .fr-summary li > a { --color-hover: var(--block-color-hover); --color-active: var(--block-color-active); } /* ------------------------------------ *\ CARDS \* ------------------------------------ */ .fr-card { display: flex; flex-direction: column-reverse; position: relative; } .fr-grid-row .fr-card { height: 100%; } .fr-card:not(.fr-card--no-arrow) .fr-card__body::after { font: normal normal normal 1.5rem/1 dsfr-icons; content: ""; width: 1.5rem; height: 1.5rem; margin-top: auto; margin-left: auto; } .fr-card__img { position: relative; width: 100%; } .fr-card__img::before { content: ""; display: block; width: 100%; padding-bottom: 56.25%; } .fr-card__img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .fr-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5rem; } .fr-card__detail { margin-top: 0; margin-bottom: 1rem; font-size: 0.75rem ; line-height: 1.25rem ; order: -1; } .fr-card__title { font-weight: 700 ; font-size: 1.125rem ; line-height: 1.5rem ; font-weight: 700; margin-top: 0; margin-bottom: 0.5rem; } @media (min-width: 48em) { .fr-card__title { font-size: 1.25rem ; line-height: 1.75rem ; } } .fr-card__desc { margin-top: 0; margin-bottom: 1rem; font-size: 0.875rem ; line-height: 1.5rem ; } .fr-card__link { --link-underline: none; --link-blank-font: none; --link-blank-content: none; display: inline-flex; width: 100%; margin-top: auto; } @media (min-width: 48em) { .fr-card--horizontal { flex-direction: row-reverse; } .fr-card--horizontal .fr-card__img { width: 40.78%; flex: 1 0 auto; } } .fr-card { background-color: var(--beige); } .fr-card.fr-enlarge-link { background-color: var(--beige); } @media (hover: hover) and (pointer: fine) { .fr-card.fr-enlarge-link:not(a):not(:disabled):hover, a.fr-card.fr-enlarge-link[href]:hover { background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover)); } .fr-card.fr-enlarge-link:not(a):not(:disabled):active, a.fr-card.fr-enlarge-link[href]:active { background-image: linear-gradient(0deg, var(--color-active), var(--color-active)); } } :root:not([data-fr-theme="dark"]) .fr-card.fr-enlarge-link { --color-hover: rgba(224, 219, 208, 0.5); --color-active: rgba(199, 189, 170, 0.5); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-card.fr-enlarge-link, :root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-card.fr-enlarge-link { --color-hover: rgba(224, 219, 208, 0.5); --color-active: rgba(199, 189, 170, 0.5); } :root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-card.fr-enlarge-link, :root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-card.fr-enlarge-link { --color-hover: rgba(79, 79, 79, 0.5); --color-active: rgba(115, 115, 115, 0.5); } :root[data-fr-theme="dark"] .fr-card.fr-enlarge-link { --color-hover: rgba(79, 79, 79, 0.5); --color-active: rgba(115, 115, 115, 0.5); } .fr-card:not(.fr-card--no-arrow) .fr-card__body::after { color: var(--bf500); } .fr-card__detail { color: var(--g600); } .fr-card__title { color: var(--g800); } /** * FIX Design d'état conflict */ :focus, :focus-visible { z-index: inherit !important; } .odswidget-facet__category-container ol, ol > li, ul, ul > li { padding-bottom: var(--is-list) 0rem; } /** * Style d'un ensemble de champs */ .fr-fieldset { position: relative; margin: 0; padding: 0; border: 0; /** * Modificateur pour afficher les éléments en inline */ /** * Modificateur pour gérer l'état d'erreur */ /** * Modificateur pour gérer l'état de validation */ /** * Mixin disabled pour gérer l'état disabled */ } .fr-fieldset .fr-hint-text { margin-bottom: 1rem; } .fr-fieldset__legend { margin-bottom: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; } .fr-fieldset__legend .fr-hint-text { margin-top: 0.5rem; margin-bottom: 0; font-weight: 400; } .fr-fieldset__content { position: relative; } .fr-fieldset--inline .fr-fieldset__content { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; margin: -0.75rem 0; } .fr-fieldset--inline .fr-checkbox-group { display: inline-flex; margin-bottom: 0; } .fr-fieldset--inline .fr-checkbox-group:first-child { margin-top: 0; } .fr-fieldset--inline .fr-checkbox-group:not(:last-child) { margin-right: 1.25rem; } .fr-fieldset--inline .fr-checkbox-group:last-child { margin-bottom: 0; } .fr-fieldset--inline .fr-radio-group { display: inline-flex; } .fr-fieldset--inline .fr-radio-group:not(:last-child) input[type="radio" i] + label { margin-right: 1.75rem; } .fr-fieldset--inline .fr-radio-group:first-child { margin-top: 0; } .fr-fieldset--inline .fr-radio-group:first-child input[type="radio" i] + label { margin-top: 0; } .fr-fieldset--inline .fr-radio-group:last-child { margin-bottom: 0; } .fr-fieldset--inline .fr-radio-group:last-child input[type="radio" i] + label { margin-bottom: 0; } .fr-fieldset--error .fr-fieldset__content::before { content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: -0.5rem; width: 2px; } .fr-fieldset--valid .fr-fieldset__content::before { content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: -0.5rem; width: 2px; } .fr-fieldset[disabled] .fr-label, .fr-fieldset:disabled .fr-label { color: var(--g600-g400); } /* FIX BARRE NAV BLEUE */ .fr-nav { /*background-color: #FF9575; */} @media (max-width: 1000px) { .fr-nav { background-color: #FFF; } } /* DESKTOP SPECIFICS - STYLE OF DROPDOWN MENU ========================================================================== */ .ods-front-header__menu-item { position: relative; } .ods-front-header__menu-item-link--active { border-bottom: 3px solid #FF9575; color: #FF9575; opacity: 1; } li.dropdown-menu i { font-size: 1.2em; margin-left: 13.5px; color: #565656; } ul.dropdown-menu-submenu { display: none; margin: 0; padding: 22px 28px; list-style: none; background-color: #F6F8FB; } ul.dropdown-menu-submenu.dropdown-menu-submenu__active { display: inherit; } li.dropdown-menu-submenu-item { margin-bottom: 26px; } li.dropdown-menu-submenu-item:last-child { margin-bottom: inherit; } .ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.ods-front-header__menu { display: flex; align-items: center; } .ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.dropdown-menu-submenu { position: absolute; top: 55px; left: 1px; z-index: 1001; filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1)); } .ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .custom-menu-item-submenu { width: auto !important; top: 55px !important; left: 1px !important; padding: 20px !important; filter: drop-shadow(0px 0px 8px rgba(37, 48, 59, 0.2)) !important; } .ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .dropdown-menu-submenu a { white-space: nowrap; }