792 lines
20 KiB
CSS
792 lines
20 KiB
CSS
|
/*!
|
||
|
|
* 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;
|
||
|
|
}
|
||
|
|
}
|