/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ HEADER \* ˍˍˍˍˍˍˍˍˍ */ .fr-header { --underline-img: none; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; --text-spacing: 0; --title-spacing: 0; width: 100%; position: relative; } .fr-header__body-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 0 -1rem; } .fr-header__brand { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; z-index: calc(var(--ground) + 750); background-color: var(--background-raised-grey); --idle: transparent; --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); } .fr-header__brand-top { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; } .fr-header__logo { order: 1; flex: 0 0 auto; padding: 0.75rem; } .fr-header__logo .fr-logo { font-size: 0.7875rem; padding: 0.75rem; margin: -0.75rem; } .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.046875rem, 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; } [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; min-width: 3.5rem; } .fr-header__service { padding-top: 0.75rem; padding-bottom: 0.75rem; margin-left: 0.75rem; margin-right: 0.75rem; width: 100%; --external-link-content: none; color: var(--text-title-grey); box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-header__service-title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; } .fr-header__service-title .fr-badge { vertical-align: middle; margin: -0.25rem 0 0 0.25rem; } .fr-header__service-tagline { font-size: 0.875rem; line-height: 1.5rem; } .fr-header .fr-modal { overflow: auto; justify-content: initial; background-color: var(--background-lifted-grey); --idle: transparent; --hover: var(--background-lifted-grey-hover); --active: var(--background-lifted-grey-active); } .fr-header .fr-modal:not([role=dialog]) { transition: none; } .fr-header .fr-modal::before { content: none; } .fr-header .fr-modal::after { content: none; } .fr-header .fr-modal > * > .fr-btn--close { margin-bottom: 1.5rem; } .fr-header .fr-modal > .fr-container { pointer-events: all; padding-top: 1rem; padding-bottom: 4.5rem; height: 100%; overflow: inherit; } .fr-header__navbar { display: flex; flex-direction: row; align-items: flex-end; padding: 0.25rem; margin-left: auto; margin-right: -0.5rem; margin-top: 0.25rem; order: 3; flex: 0 0 auto; align-self: flex-start; z-index: calc(var(--ground) + 1000); } .fr-header__navbar .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; margin-left: 0.5rem; margin-right: 0.5rem; flex: 0 0 auto; white-space: nowrap; background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-header__navbar .fr-btn::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-header__navbar .fr-btn--menu::before, .fr-header__navbar .fr-btn--menu::after { flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/menu-fill.svg"); mask-image: url("../../icons/system/menu-fill.svg"); --icon-size: 1.5rem; } .fr-header__navbar .fr-btn--menu::before { content: ""; } .fr-header__navbar .fr-btn--search::before, .fr-header__navbar .fr-btn--search::after { flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/search-line.svg"); mask-image: url("../../icons/system/search-line.svg"); --icon-size: 1.5rem; } .fr-header__navbar .fr-btn--search::before { content: ""; } .fr-header .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 { justify-content: flex-start; font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header .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::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-header__tools-links { display: none; } .fr-header__tools-links > .fr-btn[class^=fr-icon-], .fr-header__tools-links > .fr-btn[class*=" fr-icon-"], .fr-header__tools-links > .fr-btn[class^=fr-fi-], .fr-header__tools-links > .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header__tools-links > .fr-btn[class^=fr-icon-]::before, .fr-header__tools-links > .fr-btn[class*=" fr-icon-"]::before, .fr-header__tools-links > .fr-btn[class^=fr-fi-]::before, .fr-header__tools-links > .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-header__tools-links > .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header__tools-links > .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-header .fr-header__menu-links::after { content: ""; display: block; margin: 0.75rem -1rem; width: calc(100% + 2rem); height: 1px; } .fr-header .fr-header__menu-links .fr-translate { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-header .fr-header__menu-links .fr-translate__btn { padding-left: 0.5rem; padding-right: 0.5rem; } .fr-header .fr-header__menu-links .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-"]) { display: flex; flex-direction: column; } .fr-header .fr-header__menu-links .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 { margin-bottom: 0; } .fr-header .fr-header__menu-links .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-icon-], .fr-header .fr-header__menu-links .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-icon-"], .fr-header .fr-header__menu-links .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-header .fr-header__menu-links .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-"] { min-height: 3rem; padding-left: 0; padding-right: 0; } .fr-header .fr-header__menu-links .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:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { min-height: 3rem; padding-left: 0; padding-right: 0; } .fr-header .fr-links-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; } .fr-header .fr-links-group > li, .fr-header .fr-links-group > div { width: 100%; max-width: 100%; } .fr-header .fr-links-group .fr-btn { width: calc(100% - 1rem); margin: 0 0.5rem 1rem; justify-content: center; } .fr-header .fr-links-group .fr-link { --underline-img: none; --hover-tint: var(--hover); --active-tint: var(--active); } .fr-header .fr-links-group .fr-link:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; } .fr-header .fr-links-group .fr-link:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before, .fr-header .fr-links-group .fr-link:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::after { --icon-size: 1rem; } .fr-header .fr-links-group .fr-link[class^=fr-icon-], .fr-header .fr-links-group .fr-link[class*=" fr-icon-"], .fr-header .fr-links-group .fr-link[class^=fr-fi-], .fr-header .fr-links-group .fr-link[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header .fr-links-group .fr-link[class^=fr-icon-]::before, .fr-header .fr-links-group .fr-link[class*=" fr-icon-"]::before, .fr-header .fr-links-group .fr-link[class^=fr-fi-]::before, .fr-header .fr-links-group .fr-link[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; content: ""; } .fr-header .fr-header__menu-links .fr-links-group .fr-link { width: 100%; min-height: 3rem; padding-left: 0; margin-bottom: 0; } .fr-header .fr-modal > * > .fr-link--close { margin-bottom: 1.5rem; } .fr-header__menu-links::after { box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-header__menu-links .fr-btn { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: none; } .fr-header__menu-links .fr-btn:disabled, .fr-header__menu-links a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__tools-links .fr-btn { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-header__tools-links .fr-btn:disabled, .fr-header__tools-links a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__tools-links > .fr-translate:first-child:last-child .fr-btn { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-header__tools-links > .fr-translate:first-child:last-child .fr-btn:disabled, .fr-header__tools-links > .fr-translate:first-child:last-child a.fr-btn:not([href]) { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__navbar .fr-service__title { color: var(--text-title-grey); } .fr-header__navbar .fr-btn:disabled, .fr-header__navbar a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__navbar .fr-btn--menu { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-header__navbar .fr-btn--menu:disabled, .fr-header__navbar a.fr-btn--menu:not([href]) { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__menu-links .fr-link { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-header__menu-links .fr-link:disabled, .fr-header__menu-links a.fr-link:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-header__tools-links .fr-link { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-header__tools-links .fr-link:disabled, .fr-header__tools-links a.fr-link:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ .fr-header__service-title { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 62em) { /*! media lg */ .fr-header__body-row { padding: 1.5rem 0; } .fr-header__brand { margin-top: -1rem; margin-bottom: -1rem; flex-wrap: nowrap; width: auto; padding-left: 0; padding-right: 0; z-index: auto; background: transparent; filter: none; } .fr-header__brand-top { width: auto; } .fr-header__logo, .fr-header__operator, .fr-header__service { padding: 1rem; } .fr-header__service { margin-left: 0; margin-right: 0; width: auto; box-shadow: none; } .fr-header .fr-modal { margin: 0; width: auto; height: auto; visibility: inherit; opacity: 1; position: initial; background-color: transparent; overflow: initial; } .fr-header .fr-modal > * > .fr-btn--close { display: none; } .fr-header .fr-modal > .fr-container { padding-top: 0; padding-bottom: 0; height: auto; } .fr-header__navbar { display: none; } .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; } .fr-header__tools .fr-header__search { max-width: 24rem; margin-left: auto; } .fr-header .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-icon-], .fr-header .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-icon-"], .fr-header .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-header .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: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header .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-icon-]::before, .fr-header .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-icon-"]::before, .fr-header .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-header .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 { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-header .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:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-header .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:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-header__tools-links { display: flex; flex-direction: row; justify-content: flex-end; gap: 0.5rem; } .fr-header__tools-links .fr-btns-group { justify-content: flex-end; margin: 0 -0.25rem -1rem; } .fr-header__tools-links .fr-btns-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; margin-left: 0.25rem; margin-right: 0.25rem; } .fr-header__tools-links .fr-btns-group > li { display: inline-flex; max-width: 100%; width: auto; align-items: flex-start; } .fr-header .fr-header__menu-links .fr-translate { margin-left: 0; margin-right: 0; margin-bottom: -1rem; } .fr-header .fr-header__menu-links { display: none; } .fr-header .fr-nav { justify-content: flex-start; } .fr-header .fr-nav__list { margin: 0 -1rem; max-width: calc(100% + 1rem); } .fr-header .fr-links-group { justify-content: flex-end; } .fr-header .fr-links-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-header .fr-links-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-header__tools-links .fr-links-group { justify-content: flex-end; margin: 0 -0.25rem; } .fr-header__tools-links .fr-links-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-header__tools-links .fr-links-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-header__tools-links .fr-links-group .fr-link { margin-left: 0.25rem; margin-right: 0.25rem; } .fr-header .fr-modal > * > .fr-link--close { display: none; } .fr-header { z-index: calc(var(--ground) + 750); background-color: var(--background-raised-grey); --idle: transparent; --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); } .fr-header .fr-header__menu { box-shadow: inset 0 1px 0 0 var(--border-default-grey); } } @media (min-width: 78em) { /*! media xl */ } @media (hover: hover) and (pointer: fine) { .fr-header__brand.fr-enlarge-link a[href]:hover { --a: 0.1; } .fr-header__brand.fr-enlarge-link a[href]:active { --a: 0.2; } }