/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ NAVIGATION \* ˍˍˍˍˍˍˍˍˍ */ .fr-nav { --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; } .fr-nav__list { display: flex; flex-direction: column; margin: 0; padding: 0; } .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; } .fr-nav__item { display: flex; flex-direction: column; align-items: stretch; flex: 0 1 auto; position: relative; } .fr-nav__item::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: 0 -1px 0 0 var(--border-default-grey), inset 0 -1px 0 0 var(--border-default-grey); } .fr-nav__item .fr-btn, .fr-nav__item .fr-link { min-height: 3rem; } .fr-nav__link, .fr-nav__btn { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; text-align: left; --hover-tint: var(--hover); --active-tint: var(--active); color: var(--text-action-high-grey); } .fr-nav__link[aria-current]:not([aria-current=false]), .fr-nav__btn[aria-current]:not([aria-current=false]) { position: relative; color: var(--text-active-blue-france); } .fr-nav__link[aria-current]:not([aria-current=false])::before, .fr-nav__btn[aria-current]:not([aria-current=false])::before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 2px; height: 1.5rem; margin-top: -0.75rem; background-color: var(--background-active-blue-france); --idle: transparent; --hover: var(--background-active-blue-france-hover); --active: var(--background-active-blue-france-active); } .fr-nav__link { display: block; } .fr-nav__link:not([href])[aria-current]:not([aria-current=false]) { pointer-events: none; cursor: default; } .fr-nav__btn { display: flex; align-items: center; justify-content: space-between; flex-direction: row; } .fr-nav__btn::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/arrow-down-s-line.svg"); mask-image: url("../../icons/system/arrow-down-s-line.svg"); --icon-size: 1rem; content: ""; margin-left: 0.5rem; margin-right: 0; transition: transform 0.3s; } .fr-nav__btn[aria-expanded=true]::after { transform: rotate(-180deg); } .fr-menu { margin: -4px -1rem; padding: 4px 1rem; width: auto; } .fr-menu.fr-collapsing { margin-top: 0; padding-top: 0; } .fr-menu__list { margin: 0; padding: 0 1rem 1rem; } .fr-menu .fr-nav__link { padding-left: 1rem; padding-right: 1rem; } .fr-menu .fr-nav__link::before { left: 0; } .fr-mega-menu:focus { outline: none; } .fr-mega-menu > .fr-container { padding: 0.5rem 1rem 0; } .fr-mega-menu .fr-btn--close { display: none; } .fr-mega-menu .fr-nav__link { padding-left: 1rem; padding-right: 1rem; } .fr-mega-menu .fr-nav__link::before { left: 0; } .fr-mega-menu__leader { --underline-img: linear-gradient(0deg, currentColor, currentColor); padding-top: 0.5rem; --text-spacing: 0 0 0.5rem; --title-spacing: 0 0 0.5rem; } .fr-mega-menu__leader .fr-link { font-size: 0.875rem; line-height: 1.5rem; padding: 0 0; } .fr-mega-menu__leader .fr-link::before, .fr-mega-menu__leader .fr-link::after { --icon-size: 1rem; } .fr-mega-menu__leader p { font-size: 0.875rem; line-height: 1.5rem; } .fr-mega-menu__category { font-weight: 700; } .fr-mega-menu__list { padding-bottom: 1rem; position: relative; } .fr-mega-menu__list::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: 0 1px 0 0 var(--border-default-grey); } .fr-nav__btn[aria-expanded=true]:not(:disabled) { background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); color: var(--text-action-high-blue-france); } .fr-nav__item:first-child::before { box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-nav__item:last-child::before { box-shadow: 0 -1px 0 0 var(--border-default-grey); } @media (min-width: 36em) { /*! media sm */ /*! media sm */ } @media (min-width: 48em) { /*! media md */ /*! media md */ } @media (min-width: 62em) { /*! media lg */ .fr-nav__list { flex-direction: row; flex-wrap: nowrap; } .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 { padding: 1rem; margin: 0; width: auto; height: 100%; min-height: 3.5rem; font-weight: normal; } .fr-nav__list > .fr-nav__link[aria-current]:not([aria-current=false])::before, .fr-nav__list > .fr-nav__btn[aria-current]:not([aria-current=false])::before, .fr-nav__list > * > .fr-nav__link[aria-current]:not([aria-current=false])::before, .fr-nav__list > * > .fr-nav__btn[aria-current]:not([aria-current=false])::before { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 2px; margin-top: 0; } .fr-nav__item .fr-btn, .fr-nav__item .fr-link { min-height: auto; } .fr-nav__item { position: initial; align-items: flex-start; } .fr-nav__item::before { content: none; } .fr-nav__item--align-right { align-items: flex-end; } .fr-nav__link, .fr-nav__btn { font-size: 0.875rem; line-height: 1.5rem; } .fr-nav__btn { padding: 1rem 0.75rem 1rem 1rem; justify-content: flex-start; } .fr-menu { pointer-events: none; position: absolute; top: 100%; z-index: calc(var(--ground) + 1000); filter: drop-shadow(var(--overlap-shadow)); } .fr-menu__list { width: 20rem; pointer-events: auto; padding: 0; margin-bottom: 2rem; background-color: var(--background-overlap-grey); --idle: transparent; --hover: var(--background-overlap-grey-hover); --active: var(--background-overlap-grey-active); box-shadow: inset 0 1px 0 0 var(--border-open-blue-france); } .fr-menu .fr-nav__link { padding: 0.75rem 1rem; box-shadow: 0 calc(-1rem - 1px) 0 -1rem var(--border-default-grey); } .fr-menu .fr-nav__link::before { left: 0; } .fr-mega-menu { position: absolute; top: 100%; right: 0; left: 0; margin: 0; padding: 0; z-index: calc(var(--ground) + 1000); background-color: var(--background-overlap-grey); --idle: transparent; --hover: var(--background-overlap-grey-hover); --active: var(--background-overlap-grey-active); filter: drop-shadow(var(--overlap-shadow)); box-shadow: inset 0 1px 0 0 var(--border-open-blue-france); } .fr-mega-menu::after { content: ""; display: block; padding-bottom: 1.5rem; } .fr-mega-menu > .fr-container { padding: 0 1.5rem; } .fr-mega-menu > .fr-container::before { content: ""; display: block; padding-top: 1rem; } .fr-mega-menu .fr-btn--close { display: flex; } .fr-mega-menu .fr-nav__link { padding: 0.75rem 1rem; } .fr-mega-menu__leader { margin-top: -1.25rem; padding-top: 0; } .fr-mega-menu__list::before { content: none; } .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-mega-menu__category { box-shadow: 0 calc(1rem + 1px) 0 -1rem var(--border-default-grey); } /*! media lg */ } @media (min-width: 78em) { /*! media xl */ /*! media xl */ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * reset liste à puce */ .fr-nav [href] { text-decoration: none; } .fr-nav ul { list-style-type: none; } .fr-nav ol { list-style-type: none; } .fr-nav ul, .fr-nav ol { padding-left: 0; margin-top: 0; margin-bottom: 0; } /** * reset margin */ .fr-nav__btn::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/system/arrow-down-s-line.svg"); width: 1rem; height: 1rem; } .fr-mega-menu__category { margin: 0; } .fr-nav__link, .fr-nav__btn { color: #161616; } .fr-nav__link[aria-current]:not([aria-current=false]), .fr-nav__btn[aria-current]:not([aria-current=false]) { color: #000091; } .fr-nav__link[aria-current]:not([aria-current=false])::before, .fr-nav__btn[aria-current]:not([aria-current=false])::before { background-color: #000091; } .fr-nav__btn[aria-expanded=true]:not(:disabled) { background-color: #e3e3fd; color: #000091; } .fr-nav__item::before { box-shadow: 0 -1px 0 0 #ddd, inset 0 -1px 0 0 #ddd; } .fr-nav__item:first-child::before { box-shadow: inset 0 -1px 0 0 #ddd; } .fr-nav__item:last-child::before { box-shadow: 0 -1px 0 0 #ddd; } .fr-mega-menu__list::before { box-shadow: 0 1px 0 0 #ddd; } } @media all and (-ms-high-contrast: none) and (-ms-high-contrast: none), (-ms-high-contrast: none) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (-ms-high-contrast: none), (-ms-high-contrast: active) and (-ms-high-contrast: active) { .fr-nav__link, .fr-nav__btn { background-color: transparent; } .fr-nav__link:hover, .fr-nav__btn:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-nav__link:active, .fr-nav__btn:active { background-color: rgba(0, 0, 0, 0.1); } } @media (min-width: 62em) and (-ms-high-contrast: none), (min-width: 62em) and (-ms-high-contrast: active) { /** * Correctif de l'alignement des menus sur la droite */ .fr-nav__item { position: static; } .fr-nav__item--align-right .fr-collapse { transform: translateX(-100%); } /** * Override du reset des marges des ul **/ .fr-menu .fr-menu__list { margin-bottom: 2rem; } .fr-menu { z-index: 1000; } .fr-menu__list { background-color: #fff; box-shadow: inset 0 1px 0 0 #e3e3fd; } .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 { box-shadow: 0 calc(-1rem - 1px) 0 -1rem #ddd; } .fr-mega-menu { z-index: 1000; background-color: #fff; box-shadow: inset 0 1px 0 0 #e3e3fd; } .fr-mega-menu__category { box-shadow: 0 calc(1rem + 1px) 0 -1rem #ddd; } } @media print { .fr-navigation { display: none; } }