/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ CORE \* ˍˍˍˍˍˍˍˍˍ */ a { text-decoration: var(--text-decoration); color: inherit; --hover-tint: var(--idle); --active-tint: var(--active); } :root { --underline-max-width: 100%; --underline-hover-width: 0; --underline-idle-width: var(--underline-max-width); --underline-x: calc(var(--underline-max-width) * 0); --underline-thickness: 0.0625em; --underline-img: linear-gradient(0deg, currentColor, currentColor); --external-link-content: ""; --text-decoration: none; --ul-type: disc; --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, ".") ".  "; --text-spacing: 0 0 1.5rem; --title-spacing: 0 0 1.5rem; --display-spacing: 0 0 2rem; --background-default-grey: var(--grey-1000-50); --background-default-grey-hover: var(--grey-1000-50-hover); --background-default-grey-active: var(--grey-1000-50-active); --background-alt-grey: var(--grey-975-75); --background-alt-grey-hover: var(--grey-975-75-hover); --background-alt-grey-active: var(--grey-975-75-active); --background-alt-blue-france: var(--blue-france-975-75); --background-alt-blue-france-hover: var(--blue-france-975-75-hover); --background-alt-blue-france-active: var(--blue-france-975-75-active); --background-alt-red-marianne: var(--red-marianne-975-75); --background-alt-red-marianne-hover: var(--red-marianne-975-75-hover); --background-alt-red-marianne-active: var(--red-marianne-975-75-active); --background-alt-green-tilleul-verveine: var(--green-tilleul-verveine-975-75); --background-alt-green-tilleul-verveine-hover: var(--green-tilleul-verveine-975-75-hover); --background-alt-green-tilleul-verveine-active: var(--green-tilleul-verveine-975-75-active); --background-alt-green-bourgeon: var(--green-bourgeon-975-75); --background-alt-green-bourgeon-hover: var(--green-bourgeon-975-75-hover); --background-alt-green-bourgeon-active: var(--green-bourgeon-975-75-active); --background-alt-green-emeraude: var(--green-emeraude-975-75); --background-alt-green-emeraude-hover: var(--green-emeraude-975-75-hover); --background-alt-green-emeraude-active: var(--green-emeraude-975-75-active); --background-alt-green-menthe: var(--green-menthe-975-75); --background-alt-green-menthe-hover: var(--green-menthe-975-75-hover); --background-alt-green-menthe-active: var(--green-menthe-975-75-active); --background-alt-green-archipel: var(--green-archipel-975-75); --background-alt-green-archipel-hover: var(--green-archipel-975-75-hover); --background-alt-green-archipel-active: var(--green-archipel-975-75-active); --background-alt-blue-ecume: var(--blue-ecume-975-75); --background-alt-blue-ecume-hover: var(--blue-ecume-975-75-hover); --background-alt-blue-ecume-active: var(--blue-ecume-975-75-active); --background-alt-blue-cumulus: var(--blue-cumulus-975-75); --background-alt-blue-cumulus-hover: var(--blue-cumulus-975-75-hover); --background-alt-blue-cumulus-active: var(--blue-cumulus-975-75-active); --background-alt-purple-glycine: var(--purple-glycine-975-75); --background-alt-purple-glycine-hover: var(--purple-glycine-975-75-hover); --background-alt-purple-glycine-active: var(--purple-glycine-975-75-active); --background-alt-pink-macaron: var(--pink-macaron-975-75); --background-alt-pink-macaron-hover: var(--pink-macaron-975-75-hover); --background-alt-pink-macaron-active: var(--pink-macaron-975-75-active); --background-alt-pink-tuile: var(--pink-tuile-975-75); --background-alt-pink-tuile-hover: var(--pink-tuile-975-75-hover); --background-alt-pink-tuile-active: var(--pink-tuile-975-75-active); --background-alt-yellow-tournesol: var(--yellow-tournesol-975-75); --background-alt-yellow-tournesol-hover: var(--yellow-tournesol-975-75-hover); --background-alt-yellow-tournesol-active: var(--yellow-tournesol-975-75-active); --background-alt-yellow-moutarde: var(--yellow-moutarde-975-75); --background-alt-yellow-moutarde-hover: var(--yellow-moutarde-975-75-hover); --background-alt-yellow-moutarde-active: var(--yellow-moutarde-975-75-active); --background-alt-orange-terre-battue: var(--orange-terre-battue-975-75); --background-alt-orange-terre-battue-hover: var(--orange-terre-battue-975-75-hover); --background-alt-orange-terre-battue-active: var(--orange-terre-battue-975-75-active); --background-alt-brown-cafe-creme: var(--brown-cafe-creme-975-75); --background-alt-brown-cafe-creme-hover: var(--brown-cafe-creme-975-75-hover); --background-alt-brown-cafe-creme-active: var(--brown-cafe-creme-975-75-active); --background-alt-brown-caramel: var(--brown-caramel-975-75); --background-alt-brown-caramel-hover: var(--brown-caramel-975-75-hover); --background-alt-brown-caramel-active: var(--brown-caramel-975-75-active); --background-alt-brown-opera: var(--brown-opera-975-75); --background-alt-brown-opera-hover: var(--brown-opera-975-75-hover); --background-alt-brown-opera-active: var(--brown-opera-975-75-active); --background-alt-beige-gris-galet: var(--beige-gris-galet-975-75); --background-alt-beige-gris-galet-hover: var(--beige-gris-galet-975-75-hover); --background-alt-beige-gris-galet-active: var(--beige-gris-galet-975-75-active); --background-contrast-grey: var(--grey-950-100); --background-contrast-grey-hover: var(--grey-950-100-hover); --background-contrast-grey-active: var(--grey-950-100-active); --background-contrast-blue-france: var(--blue-france-950-100); --background-contrast-blue-france-hover: var(--blue-france-950-100-hover); --background-contrast-blue-france-active: var(--blue-france-950-100-active); --background-contrast-red-marianne: var(--red-marianne-950-100); --background-contrast-red-marianne-hover: var(--red-marianne-950-100-hover); --background-contrast-red-marianne-active: var(--red-marianne-950-100-active); --background-contrast-green-tilleul-verveine: var(--green-tilleul-verveine-950-100); --background-contrast-green-tilleul-verveine-hover: var(--green-tilleul-verveine-950-100-hover); --background-contrast-green-tilleul-verveine-active: var(--green-tilleul-verveine-950-100-active); --background-contrast-green-bourgeon: var(--green-bourgeon-950-100); --background-contrast-green-bourgeon-hover: var(--green-bourgeon-950-100-hover); --background-contrast-green-bourgeon-active: var(--green-bourgeon-950-100-active); --background-contrast-green-emeraude: var(--green-emeraude-950-100); --background-contrast-green-emeraude-hover: var(--green-emeraude-950-100-hover); --background-contrast-green-emeraude-active: var(--green-emeraude-950-100-active); --background-contrast-green-menthe: var(--green-menthe-950-100); --background-contrast-green-menthe-hover: var(--green-menthe-950-100-hover); --background-contrast-green-menthe-active: var(--green-menthe-950-100-active); --background-contrast-green-archipel: var(--green-archipel-950-100); --background-contrast-green-archipel-hover: var(--green-archipel-950-100-hover); --background-contrast-green-archipel-active: var(--green-archipel-950-100-active); --background-contrast-blue-ecume: var(--blue-ecume-950-100); --background-contrast-blue-ecume-hover: var(--blue-ecume-950-100-hover); --background-contrast-blue-ecume-active: var(--blue-ecume-950-100-active); --background-contrast-blue-cumulus: var(--blue-cumulus-950-100); --background-contrast-blue-cumulus-hover: var(--blue-cumulus-950-100-hover); --background-contrast-blue-cumulus-active: var(--blue-cumulus-950-100-active); --background-contrast-purple-glycine: var(--purple-glycine-950-100); --background-contrast-purple-glycine-hover: var(--purple-glycine-950-100-hover); --background-contrast-purple-glycine-active: var(--purple-glycine-950-100-active); --background-contrast-pink-macaron: var(--pink-macaron-950-100); --background-contrast-pink-macaron-hover: var(--pink-macaron-950-100-hover); --background-contrast-pink-macaron-active: var(--pink-macaron-950-100-active); --background-contrast-pink-tuile: var(--pink-tuile-950-100); --background-contrast-pink-tuile-hover: var(--pink-tuile-950-100-hover); --background-contrast-pink-tuile-active: var(--pink-tuile-950-100-active); --background-contrast-yellow-tournesol: var(--yellow-tournesol-950-100); --background-contrast-yellow-tournesol-hover: var(--yellow-tournesol-950-100-hover); --background-contrast-yellow-tournesol-active: var(--yellow-tournesol-950-100-active); --background-contrast-yellow-moutarde: var(--yellow-moutarde-950-100); --background-contrast-yellow-moutarde-hover: var(--yellow-moutarde-950-100-hover); --background-contrast-yellow-moutarde-active: var(--yellow-moutarde-950-100-active); --background-contrast-orange-terre-battue: var(--orange-terre-battue-950-100); --background-contrast-orange-terre-battue-hover: var(--orange-terre-battue-950-100-hover); --background-contrast-orange-terre-battue-active: var(--orange-terre-battue-950-100-active); --background-contrast-brown-cafe-creme: var(--brown-cafe-creme-950-100); --background-contrast-brown-cafe-creme-hover: var(--brown-cafe-creme-950-100-hover); --background-contrast-brown-cafe-creme-active: var(--brown-cafe-creme-950-100-active); --background-contrast-brown-caramel: var(--brown-caramel-950-100); --background-contrast-brown-caramel-hover: var(--brown-caramel-950-100-hover); --background-contrast-brown-caramel-active: var(--brown-caramel-950-100-active); --background-contrast-brown-opera: var(--brown-opera-950-100); --background-contrast-brown-opera-hover: var(--brown-opera-950-100-hover); --background-contrast-brown-opera-active: var(--brown-opera-950-100-active); --background-contrast-beige-gris-galet: var(--beige-gris-galet-950-100); --background-contrast-beige-gris-galet-hover: var(--beige-gris-galet-950-100-hover); --background-contrast-beige-gris-galet-active: var(--beige-gris-galet-950-100-active); --background-contrast-info: var(--info-950-100); --background-contrast-info-hover: var(--info-950-100-hover); --background-contrast-info-active: var(--info-950-100-active); --background-contrast-success: var(--success-950-100); --background-contrast-success-hover: var(--success-950-100-hover); --background-contrast-success-active: var(--success-950-100-active); --background-contrast-warning: var(--warning-950-100); --background-contrast-warning-hover: var(--warning-950-100-hover); --background-contrast-warning-active: var(--warning-950-100-active); --background-contrast-error: var(--error-950-100); --background-contrast-error-hover: var(--error-950-100-hover); --background-contrast-error-active: var(--error-950-100-active); --background-flat-grey: var(--grey-200-850); --background-flat-blue-france: var(--blue-france-sun-113-625); --background-flat-red-marianne: var(--red-marianne-425-625); --background-flat-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --background-flat-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --background-flat-green-emeraude: var(--green-emeraude-sun-425-moon-753); --background-flat-green-menthe: var(--green-menthe-sun-373-moon-652); --background-flat-green-archipel: var(--green-archipel-sun-391-moon-716); --background-flat-blue-ecume: var(--blue-ecume-sun-247-moon-675); --background-flat-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --background-flat-purple-glycine: var(--purple-glycine-sun-319-moon-630); --background-flat-pink-macaron: var(--pink-macaron-sun-406-moon-833); --background-flat-pink-tuile: var(--pink-tuile-sun-425-moon-750); --background-flat-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --background-flat-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --background-flat-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --background-flat-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --background-flat-brown-caramel: var(--brown-caramel-sun-425-moon-901); --background-flat-brown-opera: var(--brown-opera-sun-395-moon-820); --background-flat-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --background-flat-info: var(--info-425-625); --background-flat-success: var(--success-425-625); --background-flat-warning: var(--warning-425-625); --background-flat-error: var(--error-425-625); --background-action-high-blue-france: var(--blue-france-sun-113-625); --background-action-high-blue-france-hover: var(--blue-france-sun-113-625-hover); --background-action-high-blue-france-active: var(--blue-france-sun-113-625-active); --background-action-high-red-marianne: var(--red-marianne-425-625); --background-action-high-red-marianne-hover: var(--red-marianne-425-625-hover); --background-action-high-red-marianne-active: var(--red-marianne-425-625-active); --background-action-high-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --background-action-high-green-tilleul-verveine-hover: var(--green-tilleul-verveine-sun-418-moon-817-hover); --background-action-high-green-tilleul-verveine-active: var(--green-tilleul-verveine-sun-418-moon-817-active); --background-action-high-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --background-action-high-green-bourgeon-hover: var(--green-bourgeon-sun-425-moon-759-hover); --background-action-high-green-bourgeon-active: var(--green-bourgeon-sun-425-moon-759-active); --background-action-high-green-emeraude: var(--green-emeraude-sun-425-moon-753); --background-action-high-green-emeraude-hover: var(--green-emeraude-sun-425-moon-753-hover); --background-action-high-green-emeraude-active: var(--green-emeraude-sun-425-moon-753-active); --background-action-high-green-menthe: var(--green-menthe-sun-373-moon-652); --background-action-high-green-menthe-hover: var(--green-menthe-sun-373-moon-652-hover); --background-action-high-green-menthe-active: var(--green-menthe-sun-373-moon-652-active); --background-action-high-green-archipel: var(--green-archipel-sun-391-moon-716); --background-action-high-green-archipel-hover: var(--green-archipel-sun-391-moon-716-hover); --background-action-high-green-archipel-active: var(--green-archipel-sun-391-moon-716-active); --background-action-high-blue-ecume: var(--blue-ecume-sun-247-moon-675); --background-action-high-blue-ecume-hover: var(--blue-ecume-sun-247-moon-675-hover); --background-action-high-blue-ecume-active: var(--blue-ecume-sun-247-moon-675-active); --background-action-high-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --background-action-high-blue-cumulus-hover: var(--blue-cumulus-sun-368-moon-732-hover); --background-action-high-blue-cumulus-active: var(--blue-cumulus-sun-368-moon-732-active); --background-action-high-purple-glycine: var(--purple-glycine-sun-319-moon-630); --background-action-high-purple-glycine-hover: var(--purple-glycine-sun-319-moon-630-hover); --background-action-high-purple-glycine-active: var(--purple-glycine-sun-319-moon-630-active); --background-action-high-pink-macaron: var(--pink-macaron-sun-406-moon-833); --background-action-high-pink-macaron-hover: var(--pink-macaron-sun-406-moon-833-hover); --background-action-high-pink-macaron-active: var(--pink-macaron-sun-406-moon-833-active); --background-action-high-pink-tuile: var(--pink-tuile-sun-425-moon-750); --background-action-high-pink-tuile-hover: var(--pink-tuile-sun-425-moon-750-hover); --background-action-high-pink-tuile-active: var(--pink-tuile-sun-425-moon-750-active); --background-action-high-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --background-action-high-yellow-tournesol-hover: var(--yellow-tournesol-sun-407-moon-922-hover); --background-action-high-yellow-tournesol-active: var(--yellow-tournesol-sun-407-moon-922-active); --background-action-high-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --background-action-high-yellow-moutarde-hover: var(--yellow-moutarde-sun-348-moon-860-hover); --background-action-high-yellow-moutarde-active: var(--yellow-moutarde-sun-348-moon-860-active); --background-action-high-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --background-action-high-orange-terre-battue-hover: var(--orange-terre-battue-sun-370-moon-672-hover); --background-action-high-orange-terre-battue-active: var(--orange-terre-battue-sun-370-moon-672-active); --background-action-high-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --background-action-high-brown-cafe-creme-hover: var(--brown-cafe-creme-sun-383-moon-885-hover); --background-action-high-brown-cafe-creme-active: var(--brown-cafe-creme-sun-383-moon-885-active); --background-action-high-brown-caramel: var(--brown-caramel-sun-425-moon-901); --background-action-high-brown-caramel-hover: var(--brown-caramel-sun-425-moon-901-hover); --background-action-high-brown-caramel-active: var(--brown-caramel-sun-425-moon-901-active); --background-action-high-brown-opera: var(--brown-opera-sun-395-moon-820); --background-action-high-brown-opera-hover: var(--brown-opera-sun-395-moon-820-hover); --background-action-high-brown-opera-active: var(--brown-opera-sun-395-moon-820-active); --background-action-high-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --background-action-high-beige-gris-galet-hover: var(--beige-gris-galet-sun-407-moon-821-hover); --background-action-high-beige-gris-galet-active: var(--beige-gris-galet-sun-407-moon-821-active); --background-action-high-info: var(--info-425-625); --background-action-high-info-hover: var(--info-425-625-hover); --background-action-high-info-active: var(--info-425-625-active); --background-action-high-success: var(--success-425-625); --background-action-high-success-hover: var(--success-425-625-hover); --background-action-high-success-active: var(--success-425-625-active); --background-action-high-warning: var(--warning-425-625); --background-action-high-warning-hover: var(--warning-425-625-hover); --background-action-high-warning-active: var(--warning-425-625-active); --background-action-high-error: var(--error-425-625); --background-action-high-error-hover: var(--error-425-625-hover); --background-action-high-error-active: var(--error-425-625-active); --background-action-low-blue-france: var(--blue-france-925-125); --background-action-low-blue-france-hover: var(--blue-france-925-125-hover); --background-action-low-blue-france-active: var(--blue-france-925-125-active); --background-action-low-red-marianne: var(--red-marianne-925-125); --background-action-low-red-marianne-hover: var(--red-marianne-925-125-hover); --background-action-low-red-marianne-active: var(--red-marianne-925-125-active); --background-action-low-green-tilleul-verveine: var(--green-tilleul-verveine-925-125); --background-action-low-green-tilleul-verveine-hover: var(--green-tilleul-verveine-925-125-hover); --background-action-low-green-tilleul-verveine-active: var(--green-tilleul-verveine-925-125-active); --background-action-low-green-bourgeon: var(--green-bourgeon-925-125); --background-action-low-green-bourgeon-hover: var(--green-bourgeon-925-125-hover); --background-action-low-green-bourgeon-active: var(--green-bourgeon-925-125-active); --background-action-low-green-emeraude: var(--green-emeraude-925-125); --background-action-low-green-emeraude-hover: var(--green-emeraude-925-125-hover); --background-action-low-green-emeraude-active: var(--green-emeraude-925-125-active); --background-action-low-green-menthe: var(--green-menthe-925-125); --background-action-low-green-menthe-hover: var(--green-menthe-925-125-hover); --background-action-low-green-menthe-active: var(--green-menthe-925-125-active); --background-action-low-green-archipel: var(--green-archipel-925-125); --background-action-low-green-archipel-hover: var(--green-archipel-925-125-hover); --background-action-low-green-archipel-active: var(--green-archipel-925-125-active); --background-action-low-blue-ecume: var(--blue-ecume-925-125); --background-action-low-blue-ecume-hover: var(--blue-ecume-925-125-hover); --background-action-low-blue-ecume-active: var(--blue-ecume-925-125-active); --background-action-low-blue-cumulus: var(--blue-cumulus-925-125); --background-action-low-blue-cumulus-hover: var(--blue-cumulus-925-125-hover); --background-action-low-blue-cumulus-active: var(--blue-cumulus-925-125-active); --background-action-low-purple-glycine: var(--purple-glycine-925-125); --background-action-low-purple-glycine-hover: var(--purple-glycine-925-125-hover); --background-action-low-purple-glycine-active: var(--purple-glycine-925-125-active); --background-action-low-pink-macaron: var(--pink-macaron-925-125); --background-action-low-pink-macaron-hover: var(--pink-macaron-925-125-hover); --background-action-low-pink-macaron-active: var(--pink-macaron-925-125-active); --background-action-low-pink-tuile: var(--pink-tuile-925-125); --background-action-low-pink-tuile-hover: var(--pink-tuile-925-125-hover); --background-action-low-pink-tuile-active: var(--pink-tuile-925-125-active); --background-action-low-yellow-tournesol: var(--yellow-tournesol-925-125); --background-action-low-yellow-tournesol-hover: var(--yellow-tournesol-925-125-hover); --background-action-low-yellow-tournesol-active: var(--yellow-tournesol-925-125-active); --background-action-low-yellow-moutarde: var(--yellow-moutarde-925-125); --background-action-low-yellow-moutarde-hover: var(--yellow-moutarde-925-125-hover); --background-action-low-yellow-moutarde-active: var(--yellow-moutarde-925-125-active); --background-action-low-orange-terre-battue: var(--orange-terre-battue-925-125); --background-action-low-orange-terre-battue-hover: var(--orange-terre-battue-925-125-hover); --background-action-low-orange-terre-battue-active: var(--orange-terre-battue-925-125-active); --background-action-low-brown-cafe-creme: var(--brown-cafe-creme-925-125); --background-action-low-brown-cafe-creme-hover: var(--brown-cafe-creme-925-125-hover); --background-action-low-brown-cafe-creme-active: var(--brown-cafe-creme-925-125-active); --background-action-low-brown-caramel: var(--brown-caramel-925-125); --background-action-low-brown-caramel-hover: var(--brown-caramel-925-125-hover); --background-action-low-brown-caramel-active: var(--brown-caramel-925-125-active); --background-action-low-brown-opera: var(--brown-opera-925-125); --background-action-low-brown-opera-hover: var(--brown-opera-925-125-hover); --background-action-low-brown-opera-active: var(--brown-opera-925-125-active); --background-action-low-beige-gris-galet: var(--beige-gris-galet-925-125); --background-action-low-beige-gris-galet-hover: var(--beige-gris-galet-925-125-hover); --background-action-low-beige-gris-galet-active: var(--beige-gris-galet-925-125-active); --background-active-blue-france: var(--blue-france-sun-113-625); --background-active-blue-france-hover: var(--blue-france-sun-113-625-hover); --background-active-blue-france-active: var(--blue-france-sun-113-625-active); --background-active-red-marianne: var(--red-marianne-425-625); --background-active-red-marianne-hover: var(--red-marianne-425-625-hover); --background-active-red-marianne-active: var(--red-marianne-425-625-active); --background-open-blue-france: var(--blue-france-925-125); --background-open-blue-france-hover: var(--blue-france-925-125-hover); --background-open-blue-france-active: var(--blue-france-925-125-active); --background-open-red-marianne: var(--red-marianne-925-125); --background-open-red-marianne-hover: var(--red-marianne-925-125-hover); --background-open-red-marianne-active: var(--red-marianne-925-125-active); --background-disabled-grey: var(--grey-925-125); --background-raised-grey: var(--grey-1000-75); --background-raised-grey-hover: var(--grey-1000-75-hover); --background-raised-grey-active: var(--grey-1000-75-active); --background-overlap-grey: var(--grey-1000-100); --background-overlap-grey-hover: var(--grey-1000-100-hover); --background-overlap-grey-active: var(--grey-1000-100-active); --background-lifted-grey: var(--grey-1000-75); --background-lifted-grey-hover: var(--grey-1000-75-hover); --background-lifted-grey-active: var(--grey-1000-75-active); --background-alt-raised-grey: var(--grey-975-100); --background-alt-raised-grey-hover: var(--grey-975-100-hover); --background-alt-raised-grey-active: var(--grey-975-100-active); --background-alt-overlap-grey: var(--grey-975-125); --background-alt-overlap-grey-hover: var(--grey-975-125-hover); --background-alt-overlap-grey-active: var(--grey-975-125-active); --background-contrast-raised-grey: var(--grey-950-125); --background-contrast-raised-grey-hover: var(--grey-950-125-hover); --background-contrast-raised-grey-active: var(--grey-950-125-active); --background-contrast-overlap-grey: var(--grey-950-150); --background-contrast-overlap-grey-hover: var(--grey-950-150-hover); --background-contrast-overlap-grey-active: var(--grey-950-150-active); --text-default-grey: var(--grey-200-850); --text-default-info: var(--info-425-625); --text-default-success: var(--success-425-625); --text-default-warning: var(--warning-425-625); --text-default-error: var(--error-425-625); --text-action-high-grey: var(--grey-50-1000); --text-action-high-blue-france: var(--blue-france-sun-113-625); --text-action-high-red-marianne: var(--red-marianne-425-625); --text-action-high-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --text-action-high-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --text-action-high-green-emeraude: var(--green-emeraude-sun-425-moon-753); --text-action-high-green-menthe: var(--green-menthe-sun-373-moon-652); --text-action-high-green-archipel: var(--green-archipel-sun-391-moon-716); --text-action-high-blue-ecume: var(--blue-ecume-sun-247-moon-675); --text-action-high-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --text-action-high-purple-glycine: var(--purple-glycine-sun-319-moon-630); --text-action-high-pink-macaron: var(--pink-macaron-sun-406-moon-833); --text-action-high-pink-tuile: var(--pink-tuile-sun-425-moon-750); --text-action-high-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --text-action-high-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --text-action-high-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --text-action-high-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --text-action-high-brown-caramel: var(--brown-caramel-sun-425-moon-901); --text-action-high-brown-opera: var(--brown-opera-sun-395-moon-820); --text-action-high-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --text-title-grey: var(--grey-50-1000); --text-title-blue-france: var(--blue-france-sun-113-625); --text-title-red-marianne: var(--red-marianne-425-625); --text-label-grey: var(--grey-50-1000); --text-label-blue-france: var(--blue-france-sun-113-625); --text-label-red-marianne: var(--red-marianne-425-625); --text-label-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --text-label-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --text-label-green-emeraude: var(--green-emeraude-sun-425-moon-753); --text-label-green-menthe: var(--green-menthe-sun-373-moon-652); --text-label-green-archipel: var(--green-archipel-sun-391-moon-716); --text-label-blue-ecume: var(--blue-ecume-sun-247-moon-675); --text-label-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --text-label-purple-glycine: var(--purple-glycine-sun-319-moon-630); --text-label-pink-macaron: var(--pink-macaron-sun-406-moon-833); --text-label-pink-tuile: var(--pink-tuile-sun-425-moon-750); --text-label-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --text-label-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --text-label-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --text-label-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --text-label-brown-caramel: var(--brown-caramel-sun-425-moon-901); --text-label-brown-opera: var(--brown-opera-sun-395-moon-820); --text-label-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --text-active-grey: var(--grey-50-1000); --text-active-blue-france: var(--blue-france-sun-113-625); --text-active-red-marianne: var(--red-marianne-425-625); --text-mention-grey: var(--grey-425-625); --text-inverted-grey: var(--grey-1000-50); --text-inverted-blue-france: var(--blue-france-975-sun-113); --text-inverted-red-marianne: var(--red-marianne-975-75); --text-inverted-info: var(--info-975-75); --text-inverted-success: var(--success-975-75); --text-inverted-warning: var(--warning-975-75); --text-inverted-error: var(--error-975-75); --text-inverted-green-tilleul-verveine: var(--green-tilleul-verveine-975-75); --text-inverted-green-bourgeon: var(--green-bourgeon-975-75); --text-inverted-green-emeraude: var(--green-emeraude-975-75); --text-inverted-green-menthe: var(--green-menthe-975-75); --text-inverted-green-archipel: var(--green-archipel-975-75); --text-inverted-blue-ecume: var(--blue-ecume-975-75); --text-inverted-blue-cumulus: var(--blue-cumulus-975-75); --text-inverted-purple-glycine: var(--purple-glycine-975-75); --text-inverted-pink-macaron: var(--pink-macaron-975-75); --text-inverted-pink-tuile: var(--pink-tuile-975-75); --text-inverted-yellow-tournesol: var(--yellow-tournesol-975-75); --text-inverted-yellow-moutarde: var(--yellow-moutarde-975-75); --text-inverted-orange-terre-battue: var(--orange-terre-battue-975-75); --text-inverted-brown-cafe-creme: var(--brown-cafe-creme-975-75); --text-inverted-brown-caramel: var(--brown-caramel-975-75); --text-inverted-brown-opera: var(--brown-opera-975-75); --text-inverted-beige-gris-galet: var(--beige-gris-galet-975-75); --text-disabled-grey: var(--grey-625-425); --text-black-white-grey: var(--grey-0-1000); --border-default-grey: var(--grey-900-175); --border-default-blue-france: var(--blue-france-main-525); --border-default-red-marianne: var(--red-marianne-main-472); --border-default-green-tilleul-verveine: var(--green-tilleul-verveine-main-707); --border-default-green-bourgeon: var(--green-bourgeon-main-640); --border-default-green-emeraude: var(--green-emeraude-main-632); --border-default-green-menthe: var(--green-menthe-main-548); --border-default-green-archipel: var(--green-archipel-main-557); --border-default-blue-ecume: var(--blue-ecume-main-400); --border-default-blue-cumulus: var(--blue-cumulus-main-526); --border-default-purple-glycine: var(--purple-glycine-main-494); --border-default-pink-macaron: var(--pink-macaron-main-689); --border-default-pink-tuile: var(--pink-tuile-main-556); --border-default-yellow-tournesol: var(--yellow-tournesol-main-731); --border-default-yellow-moutarde: var(--yellow-moutarde-main-679); --border-default-orange-terre-battue: var(--orange-terre-battue-main-645); --border-default-brown-cafe-creme: var(--brown-cafe-creme-main-782); --border-default-brown-caramel: var(--brown-caramel-main-648); --border-default-brown-opera: var(--brown-opera-main-680); --border-default-beige-gris-galet: var(--beige-gris-galet-main-702); --border-active-blue-france: var(--blue-france-sun-113-625); --border-active-red-marianne: var(--red-marianne-425-625); --border-action-high-grey: var(--grey-50-1000); --border-action-high-blue-france: var(--blue-france-sun-113-625); --border-action-high-red-marianne: var(--red-marianne-425-625); --border-action-high-info: var(--info-425-625); --border-action-high-success: var(--success-425-625); --border-action-high-warning: var(--warning-425-625); --border-action-high-error: var(--error-425-625); --border-action-low-blue-france: var(--blue-france-850-200); --border-action-low-red-marianne: var(--red-marianne-850-200); --border-action-low-green-tilleul-verveine: var(--green-tilleul-verveine-850-200); --border-action-low-green-bourgeon: var(--green-bourgeon-850-200); --border-action-low-green-emeraude: var(--green-emeraude-850-200); --border-action-low-green-menthe: var(--green-menthe-850-200); --border-action-low-green-archipel: var(--green-archipel-850-200); --border-action-low-blue-ecume: var(--blue-ecume-850-200); --border-action-low-blue-cumulus: var(--blue-cumulus-850-200); --border-action-low-purple-glycine: var(--purple-glycine-850-200); --border-action-low-pink-macaron: var(--pink-macaron-850-200); --border-action-low-pink-tuile: var(--pink-tuile-850-200); --border-action-low-yellow-tournesol: var(--yellow-tournesol-850-200); --border-action-low-yellow-moutarde: var(--yellow-moutarde-850-200); --border-action-low-orange-terre-battue: var(--orange-terre-battue-850-200); --border-action-low-brown-cafe-creme: var(--brown-cafe-creme-850-200); --border-action-low-brown-caramel: var(--brown-caramel-850-200); --border-action-low-brown-opera: var(--brown-opera-850-200); --border-action-low-beige-gris-galet: var(--beige-gris-galet-850-200); --border-open-blue-france: var(--blue-france-925-125); --border-open-red-marianne: var(--red-marianne-925-125); --border-plain-grey: var(--grey-200-850); --border-plain-blue-france: var(--blue-france-sun-113-625); --border-plain-red-marianne: var(--red-marianne-425-625); --border-plain-info: var(--info-425-625); --border-plain-success: var(--success-425-625); --border-plain-warning: var(--warning-425-625); --border-plain-error: var(--error-425-625); --border-plain-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --border-plain-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --border-plain-green-emeraude: var(--green-emeraude-sun-425-moon-753); --border-plain-green-menthe: var(--green-menthe-sun-373-moon-652); --border-plain-green-archipel: var(--green-archipel-sun-391-moon-716); --border-plain-blue-ecume: var(--blue-ecume-sun-247-moon-675); --border-plain-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --border-plain-purple-glycine: var(--purple-glycine-sun-319-moon-630); --border-plain-pink-macaron: var(--pink-macaron-sun-406-moon-833); --border-plain-pink-tuile: var(--pink-tuile-sun-425-moon-750); --border-plain-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --border-plain-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --border-plain-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --border-plain-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --border-plain-brown-caramel: var(--brown-caramel-sun-425-moon-901); --border-plain-brown-opera: var(--brown-opera-sun-395-moon-820); --border-plain-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --border-disabled-grey: var(--grey-925-125); --artwork-major-blue-france: var(--blue-france-sun-113-625); --artwork-major-blue-france-hover: var(--blue-france-sun-113-625-hover); --artwork-major-blue-france-active: var(--blue-france-sun-113-625-active); --artwork-major-red-marianne: var(--red-marianne-425-625); --artwork-major-red-marianne-hover: var(--red-marianne-425-625-hover); --artwork-major-red-marianne-active: var(--red-marianne-425-625-active); --artwork-major-green-tilleul-verveine: var(--green-tilleul-verveine-sun-418-moon-817); --artwork-major-green-tilleul-verveine-hover: var(--green-tilleul-verveine-sun-418-moon-817-hover); --artwork-major-green-tilleul-verveine-active: var(--green-tilleul-verveine-sun-418-moon-817-active); --artwork-major-green-bourgeon: var(--green-bourgeon-sun-425-moon-759); --artwork-major-green-bourgeon-hover: var(--green-bourgeon-sun-425-moon-759-hover); --artwork-major-green-bourgeon-active: var(--green-bourgeon-sun-425-moon-759-active); --artwork-major-green-emeraude: var(--green-emeraude-sun-425-moon-753); --artwork-major-green-emeraude-hover: var(--green-emeraude-sun-425-moon-753-hover); --artwork-major-green-emeraude-active: var(--green-emeraude-sun-425-moon-753-active); --artwork-major-green-menthe: var(--green-menthe-sun-373-moon-652); --artwork-major-green-menthe-hover: var(--green-menthe-sun-373-moon-652-hover); --artwork-major-green-menthe-active: var(--green-menthe-sun-373-moon-652-active); --artwork-major-green-archipel: var(--green-archipel-sun-391-moon-716); --artwork-major-green-archipel-hover: var(--green-archipel-sun-391-moon-716-hover); --artwork-major-green-archipel-active: var(--green-archipel-sun-391-moon-716-active); --artwork-major-blue-ecume: var(--blue-ecume-sun-247-moon-675); --artwork-major-blue-ecume-hover: var(--blue-ecume-sun-247-moon-675-hover); --artwork-major-blue-ecume-active: var(--blue-ecume-sun-247-moon-675-active); --artwork-major-blue-cumulus: var(--blue-cumulus-sun-368-moon-732); --artwork-major-blue-cumulus-hover: var(--blue-cumulus-sun-368-moon-732-hover); --artwork-major-blue-cumulus-active: var(--blue-cumulus-sun-368-moon-732-active); --artwork-major-purple-glycine: var(--purple-glycine-sun-319-moon-630); --artwork-major-purple-glycine-hover: var(--purple-glycine-sun-319-moon-630-hover); --artwork-major-purple-glycine-active: var(--purple-glycine-sun-319-moon-630-active); --artwork-major-pink-macaron: var(--pink-macaron-sun-406-moon-833); --artwork-major-pink-macaron-hover: var(--pink-macaron-sun-406-moon-833-hover); --artwork-major-pink-macaron-active: var(--pink-macaron-sun-406-moon-833-active); --artwork-major-pink-tuile: var(--pink-tuile-sun-425-moon-750); --artwork-major-pink-tuile-hover: var(--pink-tuile-sun-425-moon-750-hover); --artwork-major-pink-tuile-active: var(--pink-tuile-sun-425-moon-750-active); --artwork-major-yellow-tournesol: var(--yellow-tournesol-sun-407-moon-922); --artwork-major-yellow-tournesol-hover: var(--yellow-tournesol-sun-407-moon-922-hover); --artwork-major-yellow-tournesol-active: var(--yellow-tournesol-sun-407-moon-922-active); --artwork-major-yellow-moutarde: var(--yellow-moutarde-sun-348-moon-860); --artwork-major-yellow-moutarde-hover: var(--yellow-moutarde-sun-348-moon-860-hover); --artwork-major-yellow-moutarde-active: var(--yellow-moutarde-sun-348-moon-860-active); --artwork-major-orange-terre-battue: var(--orange-terre-battue-sun-370-moon-672); --artwork-major-orange-terre-battue-hover: var(--orange-terre-battue-sun-370-moon-672-hover); --artwork-major-orange-terre-battue-active: var(--orange-terre-battue-sun-370-moon-672-active); --artwork-major-brown-cafe-creme: var(--brown-cafe-creme-sun-383-moon-885); --artwork-major-brown-cafe-creme-hover: var(--brown-cafe-creme-sun-383-moon-885-hover); --artwork-major-brown-cafe-creme-active: var(--brown-cafe-creme-sun-383-moon-885-active); --artwork-major-brown-caramel: var(--brown-caramel-sun-425-moon-901); --artwork-major-brown-caramel-hover: var(--brown-caramel-sun-425-moon-901-hover); --artwork-major-brown-caramel-active: var(--brown-caramel-sun-425-moon-901-active); --artwork-major-brown-opera: var(--brown-opera-sun-395-moon-820); --artwork-major-brown-opera-hover: var(--brown-opera-sun-395-moon-820-hover); --artwork-major-brown-opera-active: var(--brown-opera-sun-395-moon-820-active); --artwork-major-beige-gris-galet: var(--beige-gris-galet-sun-407-moon-821); --artwork-major-beige-gris-galet-hover: var(--beige-gris-galet-sun-407-moon-821-hover); --artwork-major-beige-gris-galet-active: var(--beige-gris-galet-sun-407-moon-821-active); --artwork-minor-blue-france: var(--blue-france-main-525); --artwork-minor-red-marianne: var(--red-marianne-main-472); --artwork-minor-green-tilleul-verveine: var(--green-tilleul-verveine-main-707); --artwork-minor-green-bourgeon: var(--green-bourgeon-main-640); --artwork-minor-green-emeraude: var(--green-emeraude-main-632); --artwork-minor-green-menthe: var(--green-menthe-main-548); --artwork-minor-green-archipel: var(--green-archipel-main-557); --artwork-minor-blue-ecume: var(--blue-ecume-main-400); --artwork-minor-blue-cumulus: var(--blue-cumulus-main-526); --artwork-minor-purple-glycine: var(--purple-glycine-main-494); --artwork-minor-pink-macaron: var(--pink-macaron-main-689); --artwork-minor-pink-tuile: var(--pink-tuile-main-556); --artwork-minor-yellow-tournesol: var(--yellow-tournesol-main-731); --artwork-minor-yellow-moutarde: var(--yellow-moutarde-main-679); --artwork-minor-orange-terre-battue: var(--orange-terre-battue-main-645); --artwork-minor-brown-cafe-creme: var(--brown-cafe-creme-main-782); --artwork-minor-brown-caramel: var(--brown-caramel-main-648); --artwork-minor-brown-opera: var(--brown-opera-main-680); --artwork-minor-beige-gris-galet: var(--beige-gris-galet-main-702); --artwork-decorative-grey: var(--grey-950-100); --artwork-decorative-blue-france: var(--blue-france-950-100); --artwork-decorative-red-marianne: var(--red-marianne-950-100); --artwork-decorative-green-tilleul-verveine: var(--green-tilleul-verveine-950-100); --artwork-decorative-green-bourgeon: var(--green-bourgeon-950-100); --artwork-decorative-green-emeraude: var(--green-emeraude-950-100); --artwork-decorative-green-menthe: var(--green-menthe-950-100); --artwork-decorative-green-archipel: var(--green-archipel-950-100); --artwork-decorative-blue-ecume: var(--blue-ecume-950-100); --artwork-decorative-blue-cumulus: var(--blue-cumulus-950-100); --artwork-decorative-purple-glycine: var(--purple-glycine-950-100); --artwork-decorative-pink-macaron: var(--pink-macaron-950-100); --artwork-decorative-pink-tuile: var(--pink-tuile-950-100); --artwork-decorative-yellow-tournesol: var(--yellow-tournesol-950-100); --artwork-decorative-yellow-moutarde: var(--yellow-moutarde-950-100); --artwork-decorative-orange-terre-battue: var(--orange-terre-battue-950-100); --artwork-decorative-brown-cafe-creme: var(--brown-cafe-creme-950-100); --artwork-decorative-brown-caramel: var(--brown-caramel-950-100); --artwork-decorative-brown-opera: var(--brown-opera-950-100); --artwork-decorative-beige-gris-galet: var(--beige-gris-galet-950-100); --artwork-background-grey: var(--grey-975-75); --artwork-background-blue-france: var(--blue-france-975-75); --artwork-background-red-marianne: var(--red-marianne-975-75); --artwork-background-green-tilleul-verveine: var(--green-tilleul-verveine-975-75); --artwork-background-green-bourgeon: var(--green-bourgeon-975-75); --artwork-background-green-emeraude: var(--green-emeraude-975-75); --artwork-background-green-menthe: var(--green-menthe-975-75); --artwork-background-green-archipel: var(--green-archipel-975-75); --artwork-background-blue-ecume: var(--blue-ecume-975-75); --artwork-background-blue-cumulus: var(--blue-cumulus-975-75); --artwork-background-purple-glycine: var(--purple-glycine-975-75); --artwork-background-pink-macaron: var(--pink-macaron-975-75); --artwork-background-pink-tuile: var(--pink-tuile-975-75); --artwork-background-yellow-tournesol: var(--yellow-tournesol-975-75); --artwork-background-yellow-moutarde: var(--yellow-moutarde-975-75); --artwork-background-orange-terre-battue: var(--orange-terre-battue-975-75); --artwork-background-brown-cafe-creme: var(--brown-cafe-creme-975-75); --artwork-background-brown-caramel: var(--brown-caramel-975-75); --artwork-background-brown-opera: var(--brown-opera-975-75); --artwork-background-beige-gris-galet: var(--beige-gris-galet-975-75); --artwork-motif-grey: var(--grey-925-125); --artwork-motif-blue-france: var(--blue-france-925-125); --artwork-motif-red-marianne: var(--red-marianne-925-125); --artwork-motif-green-tilleul-verveine: var(--green-tilleul-verveine-925-125); --artwork-motif-green-bourgeon: var(--green-bourgeon-925-125); --artwork-motif-green-emeraude: var(--green-emeraude-925-125); --artwork-motif-green-menthe: var(--green-menthe-925-125); --artwork-motif-green-archipel: var(--green-archipel-925-125); --artwork-motif-blue-ecume: var(--blue-ecume-925-125); --artwork-motif-blue-cumulus: var(--blue-cumulus-925-125); --artwork-motif-purple-glycine: var(--purple-glycine-925-125); --artwork-motif-pink-macaron: var(--pink-macaron-925-125); --artwork-motif-pink-tuile: var(--pink-tuile-925-125); --artwork-motif-yellow-tournesol: var(--yellow-tournesol-925-125); --artwork-motif-yellow-moutarde: var(--yellow-moutarde-925-125); --artwork-motif-orange-terre-battue: var(--orange-terre-battue-925-125); --artwork-motif-brown-cafe-creme: var(--brown-cafe-creme-925-125); --artwork-motif-brown-caramel: var(--brown-caramel-925-125); --artwork-motif-brown-opera: var(--brown-opera-925-125); --artwork-motif-beige-gris-galet: var(--beige-gris-galet-925-125); --grey-1000-50: #fff; --grey-1000-50-hover: #f6f6f6; --grey-1000-50-active: #ededed; --grey-975-75: #f6f6f6; --grey-975-75-hover: #dfdfdf; --grey-975-75-active: #cfcfcf; --grey-950-100: #eee; --grey-950-100-hover: #d2d2d2; --grey-950-100-active: #c1c1c1; --grey-200-850: #3a3a3a; --grey-925-125: #e5e5e5; --grey-1000-75: #fff; --grey-1000-75-hover: #f6f6f6; --grey-1000-75-active: #ededed; --grey-1000-100: #fff; --grey-1000-100-hover: #f6f6f6; --grey-1000-100-active: #ededed; --grey-975-100: #f6f6f6; --grey-975-100-hover: #dfdfdf; --grey-975-100-active: #cfcfcf; --grey-975-125: #f6f6f6; --grey-975-125-hover: #dfdfdf; --grey-975-125-active: #cfcfcf; --grey-950-125: #eee; --grey-950-125-hover: #d2d2d2; --grey-950-125-active: #c1c1c1; --grey-950-150: #eee; --grey-950-150-hover: #d2d2d2; --grey-950-150-active: #c1c1c1; --grey-50-1000: #161616; --grey-425-625: #666; --grey-625-425: #929292; --grey-0-1000: #000; --grey-900-175: #ddd; --blue-france-975-75: #f5f5fe; --blue-france-975-75-hover: #dcdcfc; --blue-france-975-75-active: #cbcbfa; --blue-france-950-100: #ececfe; --blue-france-950-100-hover: #cecefc; --blue-france-950-100-active: #bbbbfc; --blue-france-sun-113-625: #000091; --blue-france-sun-113-625-hover: #1212ff; --blue-france-sun-113-625-active: #2323ff; --blue-france-925-125: #e3e3fd; --blue-france-925-125-hover: #c1c1fb; --blue-france-925-125-active: #adadf9; --blue-france-975-sun-113: #f5f5fe; --blue-france-main-525: #6a6af4; --blue-france-850-200: #cacafb; --red-marianne-975-75: #fef4f4; --red-marianne-975-75-hover: #fcd7d7; --red-marianne-975-75-active: #fac4c4; --red-marianne-950-100: #fee9e9; --red-marianne-950-100-hover: #fdc5c5; --red-marianne-950-100-active: #fcafaf; --red-marianne-425-625: #c9191e; --red-marianne-425-625-hover: #f93f42; --red-marianne-425-625-active: #f95a5c; --red-marianne-925-125: #fddede; --red-marianne-925-125-hover: #fbb6b6; --red-marianne-925-125-active: #fa9e9e; --red-marianne-main-472: #e1000f; --red-marianne-850-200: #fcbfbf; --info-950-100: #e8edff; --info-950-100-hover: #c2d1ff; --info-950-100-active: #a9bfff; --info-425-625: #0063cb; --info-425-625-hover: #3b87ff; --info-425-625-active: #6798ff; --info-975-75: #f4f6ff; --success-950-100: #b8fec9; --success-950-100-hover: #46fd89; --success-950-100-active: #34eb7b; --success-425-625: #18753c; --success-425-625-hover: #27a959; --success-425-625-active: #2fc368; --success-975-75: #dffee6; --warning-950-100: #ffe9e6; --warning-950-100-hover: #ffc6bd; --warning-950-100-active: #ffb0a2; --warning-425-625: #b34000; --warning-425-625-hover: #ff6218; --warning-425-625-active: #ff7a55; --warning-975-75: #fff4f3; --error-950-100: #ffe9e9; --error-950-100-hover: #ffc5c5; --error-950-100-active: #ffafaf; --error-425-625: #ce0500; --error-425-625-hover: #ff2725; --error-425-625-active: #ff4140; --error-975-75: #fff4f4; --green-tilleul-verveine-975-75: #fef7da; --green-tilleul-verveine-975-75-hover: #fce552; --green-tilleul-verveine-975-75-active: #ebd54c; --green-tilleul-verveine-950-100: #fceeac; --green-tilleul-verveine-950-100-hover: #e8d45c; --green-tilleul-verveine-950-100-active: #d4c254; --green-tilleul-verveine-sun-418-moon-817: #66673d; --green-tilleul-verveine-sun-418-moon-817-hover: #929359; --green-tilleul-verveine-sun-418-moon-817-active: #a7a967; --green-tilleul-verveine-925-125: #fbe769; --green-tilleul-verveine-925-125-hover: #d7c655; --green-tilleul-verveine-925-125-active: #c2b24c; --green-tilleul-verveine-main-707: #b7a73f; --green-tilleul-verveine-850-200: #e2cf58; --green-bourgeon-975-75: #e6feda; --green-bourgeon-975-75-hover: #a7fc62; --green-bourgeon-975-75-active: #98ed4d; --green-bourgeon-950-100: #c9fcac; --green-bourgeon-950-100-hover: #9ae95d; --green-bourgeon-950-100-active: #8dd555; --green-bourgeon-sun-425-moon-759: #447049; --green-bourgeon-sun-425-moon-759-hover: #639f6a; --green-bourgeon-sun-425-moon-759-active: #72b77a; --green-bourgeon-925-125: #a9fb68; --green-bourgeon-925-125-hover: #8ed654; --green-bourgeon-925-125-active: #7fc04b; --green-bourgeon-main-640: #68a532; --green-bourgeon-850-200: #95e257; --green-emeraude-975-75: #e3fdeb; --green-emeraude-975-75-hover: #94f9b9; --green-emeraude-975-75-active: #6df1a3; --green-emeraude-950-100: #c3fad5; --green-emeraude-950-100-hover: #77eda5; --green-emeraude-950-100-active: #6dd897; --green-emeraude-sun-425-moon-753: #297254; --green-emeraude-sun-425-moon-753-hover: #3ea47a; --green-emeraude-sun-425-moon-753-active: #49bc8d; --green-emeraude-925-125: #9ef9be; --green-emeraude-925-125-hover: #69df97; --green-emeraude-925-125-active: #5ec988; --green-emeraude-main-632: #00a95f; --green-emeraude-850-200: #6fe49d; --green-menthe-975-75: #dffdf7; --green-menthe-975-75-hover: #84f9e7; --green-menthe-975-75-active: #70ebd8; --green-menthe-950-100: #bafaee; --green-menthe-950-100-hover: #79e7d5; --green-menthe-950-100-active: #6fd3c3; --green-menthe-sun-373-moon-652: #37635f; --green-menthe-sun-373-moon-652-hover: #53918c; --green-menthe-sun-373-moon-652-active: #62a9a2; --green-menthe-925-125: #8bf8e7; --green-menthe-925-125-hover: #6ed5c5; --green-menthe-925-125-active: #62bfb1; --green-menthe-main-548: #009081; --green-menthe-850-200: #73e0cf; --green-archipel-975-75: #e5fbfd; --green-archipel-975-75-hover: #99f2f8; --green-archipel-975-75-active: #73e9f0; --green-archipel-950-100: #c7f6fc; --green-archipel-950-100-hover: #64ecf8; --green-archipel-950-100-active: #5bd8e3; --green-archipel-sun-391-moon-716: #006a6f; --green-archipel-sun-391-moon-716-hover: #009fa7; --green-archipel-sun-391-moon-716-active: #00bbc3; --green-archipel-925-125: #a6f2fa; --green-archipel-925-125-hover: #62dbe5; --green-archipel-925-125-active: #58c5cf; --green-archipel-main-557: #009099; --green-archipel-850-200: #60e0eb; --blue-ecume-975-75: #f4f6fe; --blue-ecume-975-75-hover: #d7dffb; --blue-ecume-975-75-active: #c3cffa; --blue-ecume-950-100: #e9edfe; --blue-ecume-950-100-hover: #c5d0fc; --blue-ecume-950-100-active: #adbffc; --blue-ecume-sun-247-moon-675: #2f4077; --blue-ecume-sun-247-moon-675-hover: #4e68bb; --blue-ecume-sun-247-moon-675-active: #667dcf; --blue-ecume-925-125: #dee5fd; --blue-ecume-925-125-hover: #b4c5fb; --blue-ecume-925-125-active: #99b3f9; --blue-ecume-main-400: #465f9d; --blue-ecume-850-200: #bfccfb; --blue-cumulus-975-75: #f3f6fe; --blue-cumulus-975-75-hover: #d3dffc; --blue-cumulus-975-75-active: #bed0fa; --blue-cumulus-950-100: #e6eefe; --blue-cumulus-950-100-hover: #bcd3fc; --blue-cumulus-950-100-active: #9fc3fc; --blue-cumulus-sun-368-moon-732: #3558a2; --blue-cumulus-sun-368-moon-732-hover: #5982e0; --blue-cumulus-sun-368-moon-732-active: #7996e6; --blue-cumulus-925-125: #dae6fd; --blue-cumulus-925-125-hover: #a9c8fb; --blue-cumulus-925-125-active: #8ab8f9; --blue-cumulus-main-526: #417dc4; --blue-cumulus-850-200: #b6cffb; --purple-glycine-975-75: #fef3fd; --purple-glycine-975-75-hover: #fcd4f8; --purple-glycine-975-75-active: #fabff5; --purple-glycine-950-100: #fee7fc; --purple-glycine-950-100-hover: #fdc0f8; --purple-glycine-950-100-active: #fca8f6; --purple-glycine-sun-319-moon-630: #6e445a; --purple-glycine-sun-319-moon-630-hover: #a66989; --purple-glycine-sun-319-moon-630-active: #bb7f9e; --purple-glycine-925-125: #fddbfa; --purple-glycine-925-125-hover: #fbaff5; --purple-glycine-925-125-active: #fa96f2; --purple-glycine-main-494: #a558a0; --purple-glycine-850-200: #fbb8f6; --pink-macaron-975-75: #fef4f2; --pink-macaron-975-75-hover: #fcd8d0; --pink-macaron-975-75-active: #fac5b8; --pink-macaron-950-100: #fee9e6; --pink-macaron-950-100-hover: #fdc6bd; --pink-macaron-950-100-active: #fcb0a2; --pink-macaron-sun-406-moon-833: #8d533e; --pink-macaron-sun-406-moon-833-hover: #ca795c; --pink-macaron-sun-406-moon-833-active: #e08e73; --pink-macaron-925-125: #fddfda; --pink-macaron-925-125-hover: #fbb8ab; --pink-macaron-925-125-active: #faa18d; --pink-macaron-main-689: #e18b76; --pink-macaron-850-200: #fcc0b4; --pink-tuile-975-75: #fef4f3; --pink-tuile-975-75-hover: #fcd7d3; --pink-tuile-975-75-active: #fac4be; --pink-tuile-950-100: #fee9e7; --pink-tuile-950-100-hover: #fdc6c0; --pink-tuile-950-100-active: #fcb0a7; --pink-tuile-sun-425-moon-750: #a94645; --pink-tuile-sun-425-moon-750-hover: #d5706f; --pink-tuile-sun-425-moon-750-active: #da8a89; --pink-tuile-925-125: #fddfdb; --pink-tuile-925-125-hover: #fbb8ad; --pink-tuile-925-125-active: #faa191; --pink-tuile-main-556: #ce614a; --pink-tuile-850-200: #fcbfb7; --yellow-tournesol-975-75: #fef6e3; --yellow-tournesol-975-75-hover: #fce086; --yellow-tournesol-975-75-active: #f5d24b; --yellow-tournesol-950-100: #feecc2; --yellow-tournesol-950-100-hover: #fbd335; --yellow-tournesol-950-100-active: #e6c130; --yellow-tournesol-sun-407-moon-922: #716043; --yellow-tournesol-sun-407-moon-922-hover: #a28a62; --yellow-tournesol-sun-407-moon-922-active: #ba9f72; --yellow-tournesol-925-125: #fde39c; --yellow-tournesol-925-125-hover: #e9c53b; --yellow-tournesol-925-125-active: #d3b235; --yellow-tournesol-main-731: #c8aa39; --yellow-tournesol-850-200: #efcb3a; --yellow-moutarde-975-75: #fef5e8; --yellow-moutarde-975-75-hover: #fcdca3; --yellow-moutarde-975-75-active: #fbcd64; --yellow-moutarde-950-100: #feebd0; --yellow-moutarde-950-100-hover: #fdcd6d; --yellow-moutarde-950-100-active: #f4be30; --yellow-moutarde-sun-348-moon-860: #695240; --yellow-moutarde-sun-348-moon-860-hover: #9b7b61; --yellow-moutarde-sun-348-moon-860-active: #b58f72; --yellow-moutarde-925-125: #fde2b5; --yellow-moutarde-925-125-hover: #f6c43c; --yellow-moutarde-925-125-active: #dfb135; --yellow-moutarde-main-679: #c3992a; --yellow-moutarde-850-200: #fcc63a; --orange-terre-battue-975-75: #fef4f2; --orange-terre-battue-975-75-hover: #fcd8d0; --orange-terre-battue-975-75-active: #fac5b8; --orange-terre-battue-950-100: #fee9e5; --orange-terre-battue-950-100-hover: #fdc6ba; --orange-terre-battue-950-100-active: #fcb09e; --orange-terre-battue-sun-370-moon-672: #755348; --orange-terre-battue-sun-370-moon-672-hover: #ab7b6b; --orange-terre-battue-sun-370-moon-672-active: #c68f7d; --orange-terre-battue-925-125: #fddfd8; --orange-terre-battue-925-125-hover: #fbb8a5; --orange-terre-battue-925-125-active: #faa184; --orange-terre-battue-main-645: #e4794a; --orange-terre-battue-850-200: #fcc0b0; --brown-cafe-creme-975-75: #fbf6ed; --brown-cafe-creme-975-75-hover: #f2deb6; --brown-cafe-creme-975-75-active: #eacf91; --brown-cafe-creme-950-100: #f7ecdb; --brown-cafe-creme-950-100-hover: #edce94; --brown-cafe-creme-950-100-active: #dabd84; --brown-cafe-creme-sun-383-moon-885: #685c48; --brown-cafe-creme-sun-383-moon-885-hover: #97866a; --brown-cafe-creme-sun-383-moon-885-active: #ae9b7b; --brown-cafe-creme-925-125: #f4e3c7; --brown-cafe-creme-925-125-hover: #e1c386; --brown-cafe-creme-925-125-active: #ccb078; --brown-cafe-creme-main-782: #d1b781; --brown-cafe-creme-850-200: #e7ca8e; --brown-caramel-975-75: #fbf5f2; --brown-caramel-975-75-hover: #f1dbcf; --brown-caramel-975-75-active: #ecc9b5; --brown-caramel-950-100: #f7ebe5; --brown-caramel-950-100-hover: #eccbb9; --brown-caramel-950-100-active: #e6b79a; --brown-caramel-sun-425-moon-901: #845d48; --brown-caramel-sun-425-moon-901-hover: #bb8568; --brown-caramel-sun-425-moon-901-active: #d69978; --brown-caramel-925-125: #f3e2d9; --brown-caramel-925-125-hover: #e7bea6; --brown-caramel-925-125-active: #e1a982; --brown-caramel-main-648: #c08c65; --brown-caramel-850-200: #eac7b2; --brown-opera-975-75: #fbf5f2; --brown-opera-975-75-hover: #f1dbcf; --brown-opera-975-75-active: #ecc9b5; --brown-opera-950-100: #f7ece4; --brown-opera-950-100-hover: #eccdb3; --brown-opera-950-100-active: #e6ba90; --brown-opera-sun-395-moon-820: #745b47; --brown-opera-sun-395-moon-820-hover: #a78468; --brown-opera-sun-395-moon-820-active: #c09979; --brown-opera-925-125: #f3e2d7; --brown-opera-925-125-hover: #e7bfa0; --brown-opera-925-125-active: #deaa7e; --brown-opera-main-680: #bd987a; --brown-opera-850-200: #eac7ad; --beige-gris-galet-975-75: #f9f6f2; --beige-gris-galet-975-75-hover: #eadecd; --beige-gris-galet-975-75-active: #e1ceb1; --beige-gris-galet-950-100: #f3ede5; --beige-gris-galet-950-100-hover: #e1d0b5; --beige-gris-galet-950-100-active: #d1bea2; --beige-gris-galet-sun-407-moon-821: #6a6156; --beige-gris-galet-sun-407-moon-821-hover: #988b7c; --beige-gris-galet-sun-407-moon-821-active: #afa08f; --beige-gris-galet-925-125: #eee4d9; --beige-gris-galet-925-125-hover: #dbc3a4; --beige-gris-galet-925-125-active: #c6b094; --beige-gris-galet-main-702: #aea397; --beige-gris-galet-850-200: #e0cab0; box-sizing: border-box; --scrollbar-width: 0; --ground: 0; --shadow-color: rgba(0, 0, 18, 0.16); --raised-shadow: 0 1px 3px var(--shadow-color); --overlap-shadow: 0 2px 6px var(--shadow-color); --lifted-shadow: 0 3px 9px var(--shadow-color); } [href] { background-image: var(--underline-img), var(--underline-img); background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness)); background-repeat: no-repeat, no-repeat; transition: background-size 0s; background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness); } [target=_blank]::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%; --icon-size: 1rem; -webkit-mask-image: url("../icons/system/external-link-line.svg"); mask-image: url("../icons/system/external-link-line.svg"); content: var(--external-link-content); margin-left: 0.25rem; } [target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::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%; --icon-size: 1rem; -webkit-mask-image: url("../icons/system/external-link-line.svg"); mask-image: url("../icons/system/external-link-line.svg"); content: var(--external-link-content); margin-left: 0.25rem; } form[target=_blank]::after { content: none; } .fr-raw-link { --text-decoration: none; } .fr-raw-link[href], .fr-raw-link [href] { --underline-img: none; --external-link-content: none; } .fr-reset-link { --text-decoration: underline; } .fr-reset-link[href], .fr-reset-link [href] { --underline-img: none; text-underline-offset: 2px; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; margin: 0; color: inherit; background-color: transparent; font-family: inherit; font-size: inherit; } input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Marianne", arial, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; border-radius: 0; border: 0; background-color: transparent; margin: 0; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=checkbox], input[type=radio], input[type=range] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button { margin-left: 1rem; margin-right: -1px; width: 1.25rem; height: 1.25rem; -webkit-mask-size: 1.25rem 1.25rem; } input[type=range]:focus::-webkit-slider-thumb { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; outline-style: solid; } input[type=range]:focus::-moz-range-thumb { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; outline-style: solid; } input[type=range]:focus::-ms-thumb { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; outline-style: solid; } a:focus, button:focus, input:focus, input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before, input[type=button]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus, [tabindex]:focus, video:focus[controls], audio:focus[controls], [contenteditable]:not([contenteditable=false]):focus, details:focus, details > summary:first-of-type:focus { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; outline-style: solid; } input[type=range]:focus:not(:focus-visible)::-webkit-slider-thumb { outline-style: none; } input[type=range]:focus:not(:focus-visible)::-moz-range-thumb { outline-style: none; } input[type=range]:focus:not(:focus-visible)::-ms-thumb { outline-style: none; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), input[type=checkbox]:focus:not(:focus-visible) + label::before, input[type=radio]:focus:not(:focus-visible) + label::before, input[type=button]:focus:not(:focus-visible), input[type=image]:focus:not(:focus-visible), input[type=reset]:focus:not(:focus-visible), input[type=submit]:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), video:focus:not(:focus-visible)[controls], audio:focus:not(:focus-visible)[controls], [contenteditable]:not([contenteditable=false]):focus:not(:focus-visible), details:focus:not(:focus-visible), details > summary:first-of-type:focus:not(:focus-visible) { outline-style: none; } input[type=range]:focus-visible::-webkit-slider-thumb { outline-style: solid; } input[type=range]:focus-visible::-moz-range-thumb { outline-style: solid; } input[type=range]:focus-visible::-ms-thumb { outline-style: solid; } a:focus-visible, button:focus-visible, input:focus-visible, input[type=checkbox]:focus-visible + label::before, input[type=radio]:focus-visible + label::before, input[type=button]:focus-visible, input[type=image]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, video:focus-visible[controls], audio:focus-visible[controls], [contenteditable]:not([contenteditable=false]):focus-visible, details:focus-visible, details > summary:first-of-type:focus-visible { outline-style: solid; } button, input[type=button], input[type=image], input[type=reset], input[type=submit] { --hover-tint: var(--hover); --active-tint: var(--active); } a, button, input[type=checkbox], input[type=checkbox] + label, input[type=radio], input[type=radio] + label, input[type=file], input[type=range], input[type=button], input[type=image], input[type=reset], input[type=submit], select, video[controls], audio[controls], details, details > summary:first-of-type { cursor: pointer; } input[type=range]:disabled::-webkit-slider-thumb, input[type=range]:disabled::-webkit-slider-thumb:active { cursor: not-allowed; } input[type=range]:disabled::-moz-range-thumb, input[type=range]:disabled::-moz-range-thumb:active { cursor: not-allowed; } input[type=range]:disabled::-ms-thumb, input[type=range]:disabled::-ms-thumb:active { cursor: not-allowed; } a:not([href]), button:disabled, input:disabled, input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=file]:disabled, input[type=range]:disabled, input[type=button]:disabled, input[type=image]:disabled, input[type=reset]:disabled, input[type=submit]:disabled, select:disabled, textarea:disabled, video:not([href])[controls], audio:not([href])[controls] { cursor: not-allowed; } input[type=range]::-webkit-slider-thumb { cursor: grab; } input[type=range]::-moz-range-thumb { cursor: grab; } input[type=range]::-ms-thumb { cursor: grab; } input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; } input[type=range]::-moz-range-thumb:active { cursor: grabbing; } input[type=range]::-ms-thumb:active { cursor: grabbing; } /** * Override de l'opacité chrome sur un élément disabled */ a:not([href]), button:disabled, input:disabled, input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=radio]:disabled, input[type=radio]:disabled + label, textarea:disabled, video:not([href]), audio:not([href]) { opacity: 1; color: var(--text-disabled-grey); } .fr-enlarge-link { position: relative; } .fr-enlarge-link a { background-image: none; outline-width: 0; } .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-transition-none { transition: none !important; } /** * Déclaration des fontes */ @font-face { font-family: Marianne; src: url("../fonts/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne-Light_Italic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne-Regular_Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne-Medium_Italic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Marianne; src: url("../fonts/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne-Bold_Italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Spectral; src: url("../fonts/Spectral-Regular.woff2") format("woff2"), url("../fonts/Spectral-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Spectral; src: url("../fonts/Spectral-ExtraBold.woff2") format("woff2"), url("../fonts/Spectral-ExtraBold.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } h6 { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; margin: var(--title-spacing); } h5 { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; margin: var(--title-spacing); } h4 { font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; margin: var(--title-spacing); } h3 { font-weight: 700; font-size: 1.5rem; line-height: 2rem; margin: var(--title-spacing); } h2 { font-weight: 700; font-size: 1.75rem; line-height: 2.25rem; margin: var(--title-spacing); } h1 { font-weight: 700; font-size: 2rem; line-height: 2.5rem; margin: var(--title-spacing); } p { font-size: 1rem; line-height: 1.5rem; margin: var(--text-spacing); } ul, ol, dl { 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; } dl, dd { margin: 0; padding-inline-start: var(--ul-start); } li, dd, dt { --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: disc; --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, ".") ".  "; } sub { line-height: 1; } sup { line-height: 1; } .fr-text--light { font-weight: 300 !important; } .fr-text--regular { font-weight: 400 !important; } .fr-text--bold { font-weight: 700 !important; } .fr-text--heavy { font-weight: 900 !important; } .fr-h6 { font-weight: 700 !important; font-size: 1.125rem !important; line-height: 1.5rem !important; margin: var(--title-spacing); } .fr-h5 { font-weight: 700 !important; font-size: 1.25rem !important; line-height: 1.75rem !important; margin: var(--title-spacing); } .fr-h4 { font-weight: 700 !important; font-size: 1.375rem !important; line-height: 1.75rem !important; margin: var(--title-spacing); } .fr-h3 { font-weight: 700 !important; font-size: 1.5rem !important; line-height: 2rem !important; margin: var(--title-spacing); } .fr-h2 { font-weight: 700 !important; font-size: 1.75rem !important; line-height: 2.25rem !important; margin: var(--title-spacing); } .fr-h1 { font-weight: 700 !important; font-size: 2rem !important; line-height: 2.5rem !important; margin: var(--title-spacing); } .fr-display--xs { font-weight: 700 !important; font-size: 2.5rem !important; line-height: 3rem !important; margin: var(--display-spacing); } .fr-display--sm { font-weight: 700 !important; font-size: 3rem !important; line-height: 3.5rem !important; margin: var(--display-spacing); } .fr-display--md { font-weight: 700 !important; font-size: 3.5rem !important; line-height: 4rem !important; margin: var(--display-spacing); } .fr-display--lg { font-weight: 700 !important; font-size: 4rem !important; line-height: 4.5rem !important; margin: var(--display-spacing); } .fr-display--xl { font-weight: 700 !important; font-size: 4.5rem !important; line-height: 5rem !important; margin: var(--display-spacing); } .fr-text--alt { font-family: "Spectral", georgia, serif !important; } .fr-text--xs { font-size: 0.75rem !important; line-height: 1.25rem !important; margin: var(--text-spacing); } .fr-text--sm { font-size: 0.875rem !important; line-height: 1.5rem !important; margin: var(--text-spacing); } .fr-text--md { font-size: 1rem !important; line-height: 1.5rem !important; margin: var(--text-spacing); } .fr-text--lg { font-size: 1.125rem !important; line-height: 1.75rem !important; margin: var(--text-spacing); } .fr-text--xl, .fr-text--lead { font-size: 1.25rem !important; line-height: 2rem !important; margin: var(--text-spacing); } *, *::before, *::after { box-sizing: inherit; } body { font-family: "Marianne", arial, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; font-size: 1rem; line-height: 1.5rem; overflow-wrap: break-word; background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); color: var(--text-default-grey); } input, select, textarea, label, button, a { -webkit-tap-highlight-color: transparent; } select optgroup { font-style: normal; } [class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::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%; --icon-size: 1.5rem; } [class^=fr-icon-]::before, [class*=" fr-icon-"]::before, [class^=fr-fi-]::before, [class*=" fr-fi-"]::before { content: ""; } .fr-icon--xs::before, .fr-icon--xs::after { --icon-size: 0.75rem; } .fr-icon--sm::before, .fr-icon--sm::after { --icon-size: 1rem; } .fr-icon--md::before, .fr-icon--md::after { --icon-size: 1.5rem; } .fr-icon--lg::before, .fr-icon--lg::after { --icon-size: 2rem; } .fr-hidden { display: none !important; } .fr-unhidden { display: inherit !important; } /** * Fixe le scroll en arrière plan */ :root body { border-right: var(--scrollbar-width) solid transparent; } :root[data-fr-scrolling] 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; display: block; } hr { padding: var(--text-spacing); margin: 0; border: 0; display: block; background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-hr { padding: var(--text-spacing); margin: 0; border: 0; display: block; background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-hr--sm { width: 10rem; margin-left: auto; margin-right: auto; } .fr-hr-or { font-size: 0.875rem; line-height: 1.5rem; text-transform: uppercase; font-weight: 700; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; } .fr-hr-or::before, .fr-hr-or::after { content: ""; display: inline-flex; height: 1px; width: 100%; background-color: var(--border-default-grey); --idle: transparent; --hover: var(--border-default-grey-hover); --active: var(--border-default-grey-active); } .fr-hr-or::before { margin-right: 0.75rem; } .fr-hr-or::after { margin-left: 0.75rem; } .fr-ellipsis { display: inline !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } iframe { border: 0; } .fr-fluid-img { max-width: 100%; height: auto; } @supports (aspect-ratio: 16/9) { .fr-ratio-32x9 { aspect-ratio: 3.5555555556 !important; } .fr-ratio-16x9 { aspect-ratio: 1.7777777778 !important; } .fr-ratio-3x2 { aspect-ratio: 1.5 !important; } .fr-ratio-4x3 { aspect-ratio: 1.3333333333 !important; } .fr-ratio-1x1 { aspect-ratio: 1 !important; } .fr-ratio-3x4 { aspect-ratio: 0.75 !important; } .fr-ratio-2x3 { aspect-ratio: 0.6666666667 !important; } } [class^=fr-ratio], [class*=" fr-ratio"] { object-fit: cover; object-position: 50% 50%; width: 100%; } iframe[class^=fr-ratio], iframe[class*=" fr-ratio"] { object-fit: fill; } .fr-responsive-img { width: 100%; height: auto; } .fr-responsive-vid { position: relative; width: 100%; aspect-ratio: 1.7777777778; display: block; } .fr-responsive-vid__player { width: 100%; height: 100%; display: block; border: 0; } .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%; } .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; padding-left: 1rem; padding-right: 1rem; } .fr-container--fluid { padding-left: 0; padding-right: 0; max-width: none; overflow: hidden; } .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-2--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-3--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-4--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-5--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-6--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-7--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-8--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-9--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-10--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-11--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-12--right) { margin-left: calc(1200% / 12); } .fr-col-offset-12--right { margin-right: calc(1200% / 12); } .fr-no-before::before { content: none; } .fr-no-after::after { content: none; } .fr-collapse { --collapse-max-height: 0; --collapse: -99999px; --collapser: ""; overflow: hidden; transition: visibility 0.3s; max-height: 0; max-height: var(--collapse-max-height); } .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); } .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-n1-5v { margin: -0.375rem !important; } .fr-ml-n1-5v, .fr-mx-n1-5v { margin-left: -0.375rem !important; } .fr-mr-n1-5v, .fr-mx-n1-5v { margin-right: -0.375rem !important; } .fr-mt-n1-5v, .fr-my-n1-5v { margin-top: -0.375rem !important; } .fr-mb-n1-5v, .fr-my-n1-5v { margin-bottom: -0.375rem !important; } .fr-m-0 { margin: 0 !important; } .fr-ml-0, .fr-mx-0 { margin-left: 0 !important; } .fr-mr-0, .fr-mx-0 { margin-right: 0 !important; } .fr-mt-0, .fr-my-0 { margin-top: 0 !important; } .fr-mb-0, .fr-my-0 { margin-bottom: 0 !important; } .fr-m-n0-5v { margin: -0.125rem !important; } .fr-ml-n0-5v, .fr-mx-n0-5v { margin-left: -0.125rem !important; } .fr-mr-n0-5v, .fr-mx-n0-5v { margin-right: -0.125rem !important; } .fr-mt-n0-5v, .fr-my-n0-5v { margin-top: -0.125rem !important; } .fr-mb-n0-5v, .fr-my-n0-5v { margin-bottom: -0.125rem !important; } .fr-m-0-5v { margin: 0.125rem !important; } .fr-ml-0-5v, .fr-mx-0-5v { margin-left: 0.125rem !important; } .fr-mr-0-5v, .fr-mx-0-5v { margin-right: 0.125rem !important; } .fr-mt-0-5v, .fr-my-0-5v { margin-top: 0.125rem !important; } .fr-mb-0-5v, .fr-my-0-5v { margin-bottom: 0.125rem !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-1-5v { margin: 0.375rem !important; } .fr-ml-1-5v, .fr-mx-1-5v { margin-left: 0.375rem !important; } .fr-mr-1-5v, .fr-mx-1-5v { margin-right: 0.375rem !important; } .fr-mt-1-5v, .fr-my-1-5v { margin-top: 0.375rem !important; } .fr-mb-1-5v, .fr-my-1-5v { margin-bottom: 0.375rem !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-m-first-n8v, .fr-m-first-n4w { margin: -2rem !important; } .fr-ml-first-n8v, .fr-ml-first-n4w, .fr-mx-first-n8v, .fr-mx-first-n4w { margin-left: -2rem !important; } .fr-mr-first-n8v, .fr-mr-first-n4w, .fr-mx-first-n8v, .fr-mx-first-n4w { margin-right: -2rem !important; } .fr-mt-first-n8v, .fr-mt-first-n4w, .fr-my-first-n8v, .fr-my-first-n4w { margin-top: -2rem !important; } .fr-mb-first-n8v, .fr-mb-first-n4w, .fr-my-first-n8v, .fr-my-first-n4w { margin-bottom: -2rem !important; } .fr-m-first-n7v { margin: -1.75rem !important; } .fr-ml-first-n7v, .fr-mx-first-n7v { margin-left: -1.75rem !important; } .fr-mr-first-n7v, .fr-mx-first-n7v { margin-right: -1.75rem !important; } .fr-mt-first-n7v, .fr-my-first-n7v { margin-top: -1.75rem !important; } .fr-mb-first-n7v, .fr-my-first-n7v { margin-bottom: -1.75rem !important; } .fr-m-first-n6v, .fr-m-first-n3w { margin: -1.5rem !important; } .fr-ml-first-n6v, .fr-ml-first-n3w, .fr-mx-first-n6v, .fr-mx-first-n3w { margin-left: -1.5rem !important; } .fr-mr-first-n6v, .fr-mr-first-n3w, .fr-mx-first-n6v, .fr-mx-first-n3w { margin-right: -1.5rem !important; } .fr-mt-first-n6v, .fr-mt-first-n3w, .fr-my-first-n6v, .fr-my-first-n3w { margin-top: -1.5rem !important; } .fr-mb-first-n6v, .fr-mb-first-n3w, .fr-my-first-n6v, .fr-my-first-n3w { margin-bottom: -1.5rem !important; } .fr-m-first-n5v { margin: -1.25rem !important; } .fr-ml-first-n5v, .fr-mx-first-n5v { margin-left: -1.25rem !important; } .fr-mr-first-n5v, .fr-mx-first-n5v { margin-right: -1.25rem !important; } .fr-mt-first-n5v, .fr-my-first-n5v { margin-top: -1.25rem !important; } .fr-mb-first-n5v, .fr-my-first-n5v { margin-bottom: -1.25rem !important; } .fr-m-first-n4v, .fr-m-first-n2w { margin: -1rem !important; } .fr-ml-first-n4v, .fr-ml-first-n2w, .fr-mx-first-n4v, .fr-mx-first-n2w { margin-left: -1rem !important; } .fr-mr-first-n4v, .fr-mr-first-n2w, .fr-mx-first-n4v, .fr-mx-first-n2w { margin-right: -1rem !important; } .fr-mt-first-n4v, .fr-mt-first-n2w, .fr-my-first-n4v, .fr-my-first-n2w { margin-top: -1rem !important; } .fr-mb-first-n4v, .fr-mb-first-n2w, .fr-my-first-n4v, .fr-my-first-n2w { margin-bottom: -1rem !important; } .fr-m-first-n3v { margin: -0.75rem !important; } .fr-ml-first-n3v, .fr-mx-first-n3v { margin-left: -0.75rem !important; } .fr-mr-first-n3v, .fr-mx-first-n3v { margin-right: -0.75rem !important; } .fr-mt-first-n3v, .fr-my-first-n3v { margin-top: -0.75rem !important; } .fr-mb-first-n3v, .fr-my-first-n3v { margin-bottom: -0.75rem !important; } .fr-m-first-n2v, .fr-m-first-n1w { margin: -0.5rem !important; } .fr-ml-first-n2v, .fr-ml-first-n1w, .fr-mx-first-n2v, .fr-mx-first-n1w { margin-left: -0.5rem !important; } .fr-mr-first-n2v, .fr-mr-first-n1w, .fr-mx-first-n2v, .fr-mx-first-n1w { margin-right: -0.5rem !important; } .fr-mt-first-n2v, .fr-mt-first-n1w, .fr-my-first-n2v, .fr-my-first-n1w { margin-top: -0.5rem !important; } .fr-mb-first-n2v, .fr-mb-first-n1w, .fr-my-first-n2v, .fr-my-first-n1w { margin-bottom: -0.5rem !important; } .fr-m-first-n1v { margin: -0.25rem !important; } .fr-ml-first-n1v, .fr-mx-first-n1v { margin-left: -0.25rem !important; } .fr-mr-first-n1v, .fr-mx-first-n1v { margin-right: -0.25rem !important; } .fr-mt-first-n1v, .fr-my-first-n1v { margin-top: -0.25rem !important; } .fr-mb-first-n1v, .fr-my-first-n1v { margin-bottom: -0.25rem !important; } .fr-m-first-n1-5v { margin: -0.375rem !important; } .fr-ml-first-n1-5v, .fr-mx-first-n1-5v { margin-left: -0.375rem !important; } .fr-mr-first-n1-5v, .fr-mx-first-n1-5v { margin-right: -0.375rem !important; } .fr-mt-first-n1-5v, .fr-my-first-n1-5v { margin-top: -0.375rem !important; } .fr-mb-first-n1-5v, .fr-my-first-n1-5v { margin-bottom: -0.375rem !important; } .fr-m-first-0 { margin: 0 !important; } .fr-ml-first-0, .fr-mx-first-0 { margin-left: 0 !important; } .fr-mr-first-0, .fr-mx-first-0 { margin-right: 0 !important; } .fr-mt-first-0, .fr-my-first-0 { margin-top: 0 !important; } .fr-mb-first-0, .fr-my-first-0 { margin-bottom: 0 !important; } .fr-m-first-n0-5v { margin: -0.125rem !important; } .fr-ml-first-n0-5v, .fr-mx-first-n0-5v { margin-left: -0.125rem !important; } .fr-mr-first-n0-5v, .fr-mx-first-n0-5v { margin-right: -0.125rem !important; } .fr-mt-first-n0-5v, .fr-my-first-n0-5v { margin-top: -0.125rem !important; } .fr-mb-first-n0-5v, .fr-my-first-n0-5v { margin-bottom: -0.125rem !important; } .fr-m-first-0-5v { margin: 0.125rem !important; } .fr-ml-first-0-5v, .fr-mx-first-0-5v { margin-left: 0.125rem !important; } .fr-mr-first-0-5v, .fr-mx-first-0-5v { margin-right: 0.125rem !important; } .fr-mt-first-0-5v, .fr-my-first-0-5v { margin-top: 0.125rem !important; } .fr-mb-first-0-5v, .fr-my-first-0-5v { margin-bottom: 0.125rem !important; } .fr-m-first-1v { margin: 0.25rem !important; } .fr-ml-first-1v, .fr-mx-first-1v { margin-left: 0.25rem !important; } .fr-mr-first-1v, .fr-mx-first-1v { margin-right: 0.25rem !important; } .fr-mt-first-1v, .fr-my-first-1v { margin-top: 0.25rem !important; } .fr-mb-first-1v, .fr-my-first-1v { margin-bottom: 0.25rem !important; } .fr-m-first-1-5v { margin: 0.375rem !important; } .fr-ml-first-1-5v, .fr-mx-first-1-5v { margin-left: 0.375rem !important; } .fr-mr-first-1-5v, .fr-mx-first-1-5v { margin-right: 0.375rem !important; } .fr-mt-first-1-5v, .fr-my-first-1-5v { margin-top: 0.375rem !important; } .fr-mb-first-1-5v, .fr-my-first-1-5v { margin-bottom: 0.375rem !important; } .fr-m-first-2v, .fr-m-first-1w { margin: 0.5rem !important; } .fr-ml-first-2v, .fr-ml-first-1w, .fr-mx-first-2v, .fr-mx-first-1w { margin-left: 0.5rem !important; } .fr-mr-first-2v, .fr-mr-first-1w, .fr-mx-first-2v, .fr-mx-first-1w { margin-right: 0.5rem !important; } .fr-mt-first-2v, .fr-mt-first-1w, .fr-my-first-2v, .fr-my-first-1w { margin-top: 0.5rem !important; } .fr-mb-first-2v, .fr-mb-first-1w, .fr-my-first-2v, .fr-my-first-1w { margin-bottom: 0.5rem !important; } .fr-m-first-3v { margin: 0.75rem !important; } .fr-ml-first-3v, .fr-mx-first-3v { margin-left: 0.75rem !important; } .fr-mr-first-3v, .fr-mx-first-3v { margin-right: 0.75rem !important; } .fr-mt-first-3v, .fr-my-first-3v { margin-top: 0.75rem !important; } .fr-mb-first-3v, .fr-my-first-3v { margin-bottom: 0.75rem !important; } .fr-m-first-4v, .fr-m-first-2w { margin: 1rem !important; } .fr-ml-first-4v, .fr-ml-first-2w, .fr-mx-first-4v, .fr-mx-first-2w { margin-left: 1rem !important; } .fr-mr-first-4v, .fr-mr-first-2w, .fr-mx-first-4v, .fr-mx-first-2w { margin-right: 1rem !important; } .fr-mt-first-4v, .fr-mt-first-2w, .fr-my-first-4v, .fr-my-first-2w { margin-top: 1rem !important; } .fr-mb-first-4v, .fr-mb-first-2w, .fr-my-first-4v, .fr-my-first-2w { margin-bottom: 1rem !important; } .fr-m-first-5v { margin: 1.25rem !important; } .fr-ml-first-5v, .fr-mx-first-5v { margin-left: 1.25rem !important; } .fr-mr-first-5v, .fr-mx-first-5v { margin-right: 1.25rem !important; } .fr-mt-first-5v, .fr-my-first-5v { margin-top: 1.25rem !important; } .fr-mb-first-5v, .fr-my-first-5v { margin-bottom: 1.25rem !important; } .fr-m-first-6v, .fr-m-first-3w { margin: 1.5rem !important; } .fr-ml-first-6v, .fr-ml-first-3w, .fr-mx-first-6v, .fr-mx-first-3w { margin-left: 1.5rem !important; } .fr-mr-first-6v, .fr-mr-first-3w, .fr-mx-first-6v, .fr-mx-first-3w { margin-right: 1.5rem !important; } .fr-mt-first-6v, .fr-mt-first-3w, .fr-my-first-6v, .fr-my-first-3w { margin-top: 1.5rem !important; } .fr-mb-first-6v, .fr-mb-first-3w, .fr-my-first-6v, .fr-my-first-3w { margin-bottom: 1.5rem !important; } .fr-m-first-7v { margin: 1.75rem !important; } .fr-ml-first-7v, .fr-mx-first-7v { margin-left: 1.75rem !important; } .fr-mr-first-7v, .fr-mx-first-7v { margin-right: 1.75rem !important; } .fr-mt-first-7v, .fr-my-first-7v { margin-top: 1.75rem !important; } .fr-mb-first-7v, .fr-my-first-7v { margin-bottom: 1.75rem !important; } .fr-m-first-8v, .fr-m-first-4w { margin: 2rem !important; } .fr-ml-first-8v, .fr-ml-first-4w, .fr-mx-first-8v, .fr-mx-first-4w { margin-left: 2rem !important; } .fr-mr-first-8v, .fr-mr-first-4w, .fr-mx-first-8v, .fr-mx-first-4w { margin-right: 2rem !important; } .fr-mt-first-8v, .fr-mt-first-4w, .fr-my-first-8v, .fr-my-first-4w { margin-top: 2rem !important; } .fr-mb-first-8v, .fr-mb-first-4w, .fr-my-first-8v, .fr-my-first-4w { margin-bottom: 2rem !important; } .fr-m-first-9v { margin: 2.25rem !important; } .fr-ml-first-9v, .fr-mx-first-9v { margin-left: 2.25rem !important; } .fr-mr-first-9v, .fr-mx-first-9v { margin-right: 2.25rem !important; } .fr-mt-first-9v, .fr-my-first-9v { margin-top: 2.25rem !important; } .fr-mb-first-9v, .fr-my-first-9v { margin-bottom: 2.25rem !important; } .fr-m-first-10v, .fr-m-first-5w { margin: 2.5rem !important; } .fr-ml-first-10v, .fr-ml-first-5w, .fr-mx-first-10v, .fr-mx-first-5w { margin-left: 2.5rem !important; } .fr-mr-first-10v, .fr-mr-first-5w, .fr-mx-first-10v, .fr-mx-first-5w { margin-right: 2.5rem !important; } .fr-mt-first-10v, .fr-mt-first-5w, .fr-my-first-10v, .fr-my-first-5w { margin-top: 2.5rem !important; } .fr-mb-first-10v, .fr-mb-first-5w, .fr-my-first-10v, .fr-my-first-5w { margin-bottom: 2.5rem !important; } .fr-m-first-11v { margin: 2.75rem !important; } .fr-ml-first-11v, .fr-mx-first-11v { margin-left: 2.75rem !important; } .fr-mr-first-11v, .fr-mx-first-11v { margin-right: 2.75rem !important; } .fr-mt-first-11v, .fr-my-first-11v { margin-top: 2.75rem !important; } .fr-mb-first-11v, .fr-my-first-11v { margin-bottom: 2.75rem !important; } .fr-m-first-12v, .fr-m-first-6w { margin: 3rem !important; } .fr-ml-first-12v, .fr-ml-first-6w, .fr-mx-first-12v, .fr-mx-first-6w { margin-left: 3rem !important; } .fr-mr-first-12v, .fr-mr-first-6w, .fr-mx-first-12v, .fr-mx-first-6w { margin-right: 3rem !important; } .fr-mt-first-12v, .fr-mt-first-6w, .fr-my-first-12v, .fr-my-first-6w { margin-top: 3rem !important; } .fr-mb-first-12v, .fr-mb-first-6w, .fr-my-first-12v, .fr-my-first-6w { margin-bottom: 3rem !important; } .fr-m-first-13v { margin: 3.25rem !important; } .fr-ml-first-13v, .fr-mx-first-13v { margin-left: 3.25rem !important; } .fr-mr-first-13v, .fr-mx-first-13v { margin-right: 3.25rem !important; } .fr-mt-first-13v, .fr-my-first-13v { margin-top: 3.25rem !important; } .fr-mb-first-13v, .fr-my-first-13v { margin-bottom: 3.25rem !important; } .fr-m-first-14v, .fr-m-first-7w { margin: 3.5rem !important; } .fr-ml-first-14v, .fr-ml-first-7w, .fr-mx-first-14v, .fr-mx-first-7w { margin-left: 3.5rem !important; } .fr-mr-first-14v, .fr-mr-first-7w, .fr-mx-first-14v, .fr-mx-first-7w { margin-right: 3.5rem !important; } .fr-mt-first-14v, .fr-mt-first-7w, .fr-my-first-14v, .fr-my-first-7w { margin-top: 3.5rem !important; } .fr-mb-first-14v, .fr-mb-first-7w, .fr-my-first-14v, .fr-my-first-7w { margin-bottom: 3.5rem !important; } .fr-m-first-15v { margin: 3.75rem !important; } .fr-ml-first-15v, .fr-mx-first-15v { margin-left: 3.75rem !important; } .fr-mr-first-15v, .fr-mx-first-15v { margin-right: 3.75rem !important; } .fr-mt-first-15v, .fr-my-first-15v { margin-top: 3.75rem !important; } .fr-mb-first-15v, .fr-my-first-15v { margin-bottom: 3.75rem !important; } .fr-m-first-16v, .fr-m-first-8w { margin: 4rem !important; } .fr-ml-first-16v, .fr-ml-first-8w, .fr-mx-first-16v, .fr-mx-first-8w { margin-left: 4rem !important; } .fr-mr-first-16v, .fr-mr-first-8w, .fr-mx-first-16v, .fr-mx-first-8w { margin-right: 4rem !important; } .fr-mt-first-16v, .fr-mt-first-8w, .fr-my-first-16v, .fr-my-first-8w { margin-top: 4rem !important; } .fr-mb-first-16v, .fr-mb-first-8w, .fr-my-first-16v, .fr-my-first-8w { margin-bottom: 4rem !important; } .fr-m-first-17v { margin: 4.25rem !important; } .fr-ml-first-17v, .fr-mx-first-17v { margin-left: 4.25rem !important; } .fr-mr-first-17v, .fr-mx-first-17v { margin-right: 4.25rem !important; } .fr-mt-first-17v, .fr-my-first-17v { margin-top: 4.25rem !important; } .fr-mb-first-17v, .fr-my-first-17v { margin-bottom: 4.25rem !important; } .fr-m-first-18v, .fr-m-first-9w { margin: 4.5rem !important; } .fr-ml-first-18v, .fr-ml-first-9w, .fr-mx-first-18v, .fr-mx-first-9w { margin-left: 4.5rem !important; } .fr-mr-first-18v, .fr-mr-first-9w, .fr-mx-first-18v, .fr-mx-first-9w { margin-right: 4.5rem !important; } .fr-mt-first-18v, .fr-mt-first-9w, .fr-my-first-18v, .fr-my-first-9w { margin-top: 4.5rem !important; } .fr-mb-first-18v, .fr-mb-first-9w, .fr-my-first-18v, .fr-my-first-9w { margin-bottom: 4.5rem !important; } .fr-m-first-19v { margin: 4.75rem !important; } .fr-ml-first-19v, .fr-mx-first-19v { margin-left: 4.75rem !important; } .fr-mr-first-19v, .fr-mx-first-19v { margin-right: 4.75rem !important; } .fr-mt-first-19v, .fr-my-first-19v { margin-top: 4.75rem !important; } .fr-mb-first-19v, .fr-my-first-19v { margin-bottom: 4.75rem !important; } .fr-m-first-20v, .fr-m-first-10w { margin: 5rem !important; } .fr-ml-first-20v, .fr-ml-first-10w, .fr-mx-first-20v, .fr-mx-first-10w { margin-left: 5rem !important; } .fr-mr-first-20v, .fr-mr-first-10w, .fr-mx-first-20v, .fr-mx-first-10w { margin-right: 5rem !important; } .fr-mt-first-20v, .fr-mt-first-10w, .fr-my-first-20v, .fr-my-first-10w { margin-top: 5rem !important; } .fr-mb-first-20v, .fr-mb-first-10w, .fr-my-first-20v, .fr-my-first-10w { margin-bottom: 5rem !important; } .fr-m-first-21v { margin: 5.25rem !important; } .fr-ml-first-21v, .fr-mx-first-21v { margin-left: 5.25rem !important; } .fr-mr-first-21v, .fr-mx-first-21v { margin-right: 5.25rem !important; } .fr-mt-first-21v, .fr-my-first-21v { margin-top: 5.25rem !important; } .fr-mb-first-21v, .fr-my-first-21v { margin-bottom: 5.25rem !important; } .fr-m-first-22v, .fr-m-first-11w { margin: 5.5rem !important; } .fr-ml-first-22v, .fr-ml-first-11w, .fr-mx-first-22v, .fr-mx-first-11w { margin-left: 5.5rem !important; } .fr-mr-first-22v, .fr-mr-first-11w, .fr-mx-first-22v, .fr-mx-first-11w { margin-right: 5.5rem !important; } .fr-mt-first-22v, .fr-mt-first-11w, .fr-my-first-22v, .fr-my-first-11w { margin-top: 5.5rem !important; } .fr-mb-first-22v, .fr-mb-first-11w, .fr-my-first-22v, .fr-my-first-11w { margin-bottom: 5.5rem !important; } .fr-m-first-23v { margin: 5.75rem !important; } .fr-ml-first-23v, .fr-mx-first-23v { margin-left: 5.75rem !important; } .fr-mr-first-23v, .fr-mx-first-23v { margin-right: 5.75rem !important; } .fr-mt-first-23v, .fr-my-first-23v { margin-top: 5.75rem !important; } .fr-mb-first-23v, .fr-my-first-23v { margin-bottom: 5.75rem !important; } .fr-m-first-24v, .fr-m-first-12w { margin: 6rem !important; } .fr-ml-first-24v, .fr-ml-first-12w, .fr-mx-first-24v, .fr-mx-first-12w { margin-left: 6rem !important; } .fr-mr-first-24v, .fr-mr-first-12w, .fr-mx-first-24v, .fr-mx-first-12w { margin-right: 6rem !important; } .fr-mt-first-24v, .fr-mt-first-12w, .fr-my-first-24v, .fr-my-first-12w { margin-top: 6rem !important; } .fr-mb-first-24v, .fr-mb-first-12w, .fr-my-first-24v, .fr-my-first-12w { margin-bottom: 6rem !important; } .fr-m-first-25v { margin: 6.25rem !important; } .fr-ml-first-25v, .fr-mx-first-25v { margin-left: 6.25rem !important; } .fr-mr-first-25v, .fr-mx-first-25v { margin-right: 6.25rem !important; } .fr-mt-first-25v, .fr-my-first-25v { margin-top: 6.25rem !important; } .fr-mb-first-25v, .fr-my-first-25v { margin-bottom: 6.25rem !important; } .fr-m-first-26v, .fr-m-first-13w { margin: 6.5rem !important; } .fr-ml-first-26v, .fr-ml-first-13w, .fr-mx-first-26v, .fr-mx-first-13w { margin-left: 6.5rem !important; } .fr-mr-first-26v, .fr-mr-first-13w, .fr-mx-first-26v, .fr-mx-first-13w { margin-right: 6.5rem !important; } .fr-mt-first-26v, .fr-mt-first-13w, .fr-my-first-26v, .fr-my-first-13w { margin-top: 6.5rem !important; } .fr-mb-first-26v, .fr-mb-first-13w, .fr-my-first-26v, .fr-my-first-13w { margin-bottom: 6.5rem !important; } .fr-m-first-27v { margin: 6.75rem !important; } .fr-ml-first-27v, .fr-mx-first-27v { margin-left: 6.75rem !important; } .fr-mr-first-27v, .fr-mx-first-27v { margin-right: 6.75rem !important; } .fr-mt-first-27v, .fr-my-first-27v { margin-top: 6.75rem !important; } .fr-mb-first-27v, .fr-my-first-27v { margin-bottom: 6.75rem !important; } .fr-m-first-28v, .fr-m-first-14w { margin: 7rem !important; } .fr-ml-first-28v, .fr-ml-first-14w, .fr-mx-first-28v, .fr-mx-first-14w { margin-left: 7rem !important; } .fr-mr-first-28v, .fr-mr-first-14w, .fr-mx-first-28v, .fr-mx-first-14w { margin-right: 7rem !important; } .fr-mt-first-28v, .fr-mt-first-14w, .fr-my-first-28v, .fr-my-first-14w { margin-top: 7rem !important; } .fr-mb-first-28v, .fr-mb-first-14w, .fr-my-first-28v, .fr-my-first-14w { margin-bottom: 7rem !important; } .fr-m-first-29v { margin: 7.25rem !important; } .fr-ml-first-29v, .fr-mx-first-29v { margin-left: 7.25rem !important; } .fr-mr-first-29v, .fr-mx-first-29v { margin-right: 7.25rem !important; } .fr-mt-first-29v, .fr-my-first-29v { margin-top: 7.25rem !important; } .fr-mb-first-29v, .fr-my-first-29v { margin-bottom: 7.25rem !important; } .fr-m-first-30v, .fr-m-first-15w { margin: 7.5rem !important; } .fr-ml-first-30v, .fr-ml-first-15w, .fr-mx-first-30v, .fr-mx-first-15w { margin-left: 7.5rem !important; } .fr-mr-first-30v, .fr-mr-first-15w, .fr-mx-first-30v, .fr-mx-first-15w { margin-right: 7.5rem !important; } .fr-mt-first-30v, .fr-mt-first-15w, .fr-my-first-30v, .fr-my-first-15w { margin-top: 7.5rem !important; } .fr-mb-first-30v, .fr-mb-first-15w, .fr-my-first-30v, .fr-my-first-15w { margin-bottom: 7.5rem !important; } .fr-m-first-31v { margin: 7.75rem !important; } .fr-ml-first-31v, .fr-mx-first-31v { margin-left: 7.75rem !important; } .fr-mr-first-31v, .fr-mx-first-31v { margin-right: 7.75rem !important; } .fr-mt-first-31v, .fr-my-first-31v { margin-top: 7.75rem !important; } .fr-mb-first-31v, .fr-my-first-31v { margin-bottom: 7.75rem !important; } .fr-m-first-32v, .fr-m-first-16w { margin: 8rem !important; } .fr-ml-first-32v, .fr-ml-first-16w, .fr-mx-first-32v, .fr-mx-first-16w { margin-left: 8rem !important; } .fr-mr-first-32v, .fr-mr-first-16w, .fr-mx-first-32v, .fr-mx-first-16w { margin-right: 8rem !important; } .fr-mt-first-32v, .fr-mt-first-16w, .fr-my-first-32v, .fr-my-first-16w { margin-top: 8rem !important; } .fr-mb-first-32v, .fr-mb-first-16w, .fr-my-first-32v, .fr-my-first-16w { margin-bottom: 8rem !important; } .fr-m-first-auto { margin: auto; } .fr-ml-first-auto, .fr-mx-first-auto { margin-left: auto; } .fr-mr-first-auto, .fr-mx-first-auto { margin-right: auto; } .fr-mt-first-auto, .fr-my-first-auto { margin-top: auto; } .fr-mb-first-auto, .fr-my-first-auto { margin-bottom: auto; } .fr-p-0 { padding: 0 !important; } .fr-pl-0, .fr-px-0 { padding-left: 0 !important; } .fr-pr-0, .fr-px-0 { padding-right: 0 !important; } .fr-pt-0, .fr-py-0 { padding-top: 0 !important; } .fr-pb-0, .fr-py-0 { padding-bottom: 0 !important; } .fr-p-0-5v { padding: 0.125rem !important; } .fr-pl-0-5v, .fr-px-0-5v { padding-left: 0.125rem !important; } .fr-pr-0-5v, .fr-px-0-5v { padding-right: 0.125rem !important; } .fr-pt-0-5v, .fr-py-0-5v { padding-top: 0.125rem !important; } .fr-pb-0-5v, .fr-py-0-5v { padding-bottom: 0.125rem !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-1-5v { padding: 0.375rem !important; } .fr-pl-1-5v, .fr-px-1-5v { padding-left: 0.375rem !important; } .fr-pr-1-5v, .fr-px-1-5v { padding-right: 0.375rem !important; } .fr-pt-1-5v, .fr-py-1-5v { padding-top: 0.375rem !important; } .fr-pb-1-5v, .fr-py-1-5v { padding-bottom: 0.375rem !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; } .fr-p-first-0 { padding: 0 !important; } .fr-pl-first-0, .fr-px-first-0 { padding-left: 0 !important; } .fr-pr-first-0, .fr-px-first-0 { padding-right: 0 !important; } .fr-pt-first-0, .fr-py-first-0 { padding-top: 0 !important; } .fr-pb-first-0, .fr-py-first-0 { padding-bottom: 0 !important; } .fr-p-first-0-5v { padding: 0.125rem !important; } .fr-pl-first-0-5v, .fr-px-first-0-5v { padding-left: 0.125rem !important; } .fr-pr-first-0-5v, .fr-px-first-0-5v { padding-right: 0.125rem !important; } .fr-pt-first-0-5v, .fr-py-first-0-5v { padding-top: 0.125rem !important; } .fr-pb-first-0-5v, .fr-py-first-0-5v { padding-bottom: 0.125rem !important; } .fr-p-first-1v { padding: 0.25rem !important; } .fr-pl-first-1v, .fr-px-first-1v { padding-left: 0.25rem !important; } .fr-pr-first-1v, .fr-px-first-1v { padding-right: 0.25rem !important; } .fr-pt-first-1v, .fr-py-first-1v { padding-top: 0.25rem !important; } .fr-pb-first-1v, .fr-py-first-1v { padding-bottom: 0.25rem !important; } .fr-p-first-1-5v { padding: 0.375rem !important; } .fr-pl-first-1-5v, .fr-px-first-1-5v { padding-left: 0.375rem !important; } .fr-pr-first-1-5v, .fr-px-first-1-5v { padding-right: 0.375rem !important; } .fr-pt-first-1-5v, .fr-py-first-1-5v { padding-top: 0.375rem !important; } .fr-pb-first-1-5v, .fr-py-first-1-5v { padding-bottom: 0.375rem !important; } .fr-p-first-2v, .fr-p-first-1w { padding: 0.5rem !important; } .fr-pl-first-2v, .fr-pl-first-1w, .fr-px-first-2v, .fr-px-first-1w { padding-left: 0.5rem !important; } .fr-pr-first-2v, .fr-pr-first-1w, .fr-px-first-2v, .fr-px-first-1w { padding-right: 0.5rem !important; } .fr-pt-first-2v, .fr-pt-first-1w, .fr-py-first-2v, .fr-py-first-1w { padding-top: 0.5rem !important; } .fr-pb-first-2v, .fr-pb-first-1w, .fr-py-first-2v, .fr-py-first-1w { padding-bottom: 0.5rem !important; } .fr-p-first-3v { padding: 0.75rem !important; } .fr-pl-first-3v, .fr-px-first-3v { padding-left: 0.75rem !important; } .fr-pr-first-3v, .fr-px-first-3v { padding-right: 0.75rem !important; } .fr-pt-first-3v, .fr-py-first-3v { padding-top: 0.75rem !important; } .fr-pb-first-3v, .fr-py-first-3v { padding-bottom: 0.75rem !important; } .fr-p-first-4v, .fr-p-first-2w { padding: 1rem !important; } .fr-pl-first-4v, .fr-pl-first-2w, .fr-px-first-4v, .fr-px-first-2w { padding-left: 1rem !important; } .fr-pr-first-4v, .fr-pr-first-2w, .fr-px-first-4v, .fr-px-first-2w { padding-right: 1rem !important; } .fr-pt-first-4v, .fr-pt-first-2w, .fr-py-first-4v, .fr-py-first-2w { padding-top: 1rem !important; } .fr-pb-first-4v, .fr-pb-first-2w, .fr-py-first-4v, .fr-py-first-2w { padding-bottom: 1rem !important; } .fr-p-first-5v { padding: 1.25rem !important; } .fr-pl-first-5v, .fr-px-first-5v { padding-left: 1.25rem !important; } .fr-pr-first-5v, .fr-px-first-5v { padding-right: 1.25rem !important; } .fr-pt-first-5v, .fr-py-first-5v { padding-top: 1.25rem !important; } .fr-pb-first-5v, .fr-py-first-5v { padding-bottom: 1.25rem !important; } .fr-p-first-6v, .fr-p-first-3w { padding: 1.5rem !important; } .fr-pl-first-6v, .fr-pl-first-3w, .fr-px-first-6v, .fr-px-first-3w { padding-left: 1.5rem !important; } .fr-pr-first-6v, .fr-pr-first-3w, .fr-px-first-6v, .fr-px-first-3w { padding-right: 1.5rem !important; } .fr-pt-first-6v, .fr-pt-first-3w, .fr-py-first-6v, .fr-py-first-3w { padding-top: 1.5rem !important; } .fr-pb-first-6v, .fr-pb-first-3w, .fr-py-first-6v, .fr-py-first-3w { padding-bottom: 1.5rem !important; } .fr-p-first-7v { padding: 1.75rem !important; } .fr-pl-first-7v, .fr-px-first-7v { padding-left: 1.75rem !important; } .fr-pr-first-7v, .fr-px-first-7v { padding-right: 1.75rem !important; } .fr-pt-first-7v, .fr-py-first-7v { padding-top: 1.75rem !important; } .fr-pb-first-7v, .fr-py-first-7v { padding-bottom: 1.75rem !important; } .fr-p-first-8v, .fr-p-first-4w { padding: 2rem !important; } .fr-pl-first-8v, .fr-pl-first-4w, .fr-px-first-8v, .fr-px-first-4w { padding-left: 2rem !important; } .fr-pr-first-8v, .fr-pr-first-4w, .fr-px-first-8v, .fr-px-first-4w { padding-right: 2rem !important; } .fr-pt-first-8v, .fr-pt-first-4w, .fr-py-first-8v, .fr-py-first-4w { padding-top: 2rem !important; } .fr-pb-first-8v, .fr-pb-first-4w, .fr-py-first-8v, .fr-py-first-4w { padding-bottom: 2rem !important; } .fr-p-first-9v { padding: 2.25rem !important; } .fr-pl-first-9v, .fr-px-first-9v { padding-left: 2.25rem !important; } .fr-pr-first-9v, .fr-px-first-9v { padding-right: 2.25rem !important; } .fr-pt-first-9v, .fr-py-first-9v { padding-top: 2.25rem !important; } .fr-pb-first-9v, .fr-py-first-9v { padding-bottom: 2.25rem !important; } .fr-p-first-10v, .fr-p-first-5w { padding: 2.5rem !important; } .fr-pl-first-10v, .fr-pl-first-5w, .fr-px-first-10v, .fr-px-first-5w { padding-left: 2.5rem !important; } .fr-pr-first-10v, .fr-pr-first-5w, .fr-px-first-10v, .fr-px-first-5w { padding-right: 2.5rem !important; } .fr-pt-first-10v, .fr-pt-first-5w, .fr-py-first-10v, .fr-py-first-5w { padding-top: 2.5rem !important; } .fr-pb-first-10v, .fr-pb-first-5w, .fr-py-first-10v, .fr-py-first-5w { padding-bottom: 2.5rem !important; } .fr-p-first-11v { padding: 2.75rem !important; } .fr-pl-first-11v, .fr-px-first-11v { padding-left: 2.75rem !important; } .fr-pr-first-11v, .fr-px-first-11v { padding-right: 2.75rem !important; } .fr-pt-first-11v, .fr-py-first-11v { padding-top: 2.75rem !important; } .fr-pb-first-11v, .fr-py-first-11v { padding-bottom: 2.75rem !important; } .fr-p-first-12v, .fr-p-first-6w { padding: 3rem !important; } .fr-pl-first-12v, .fr-pl-first-6w, .fr-px-first-12v, .fr-px-first-6w { padding-left: 3rem !important; } .fr-pr-first-12v, .fr-pr-first-6w, .fr-px-first-12v, .fr-px-first-6w { padding-right: 3rem !important; } .fr-pt-first-12v, .fr-pt-first-6w, .fr-py-first-12v, .fr-py-first-6w { padding-top: 3rem !important; } .fr-pb-first-12v, .fr-pb-first-6w, .fr-py-first-12v, .fr-py-first-6w { padding-bottom: 3rem !important; } .fr-p-first-13v { padding: 3.25rem !important; } .fr-pl-first-13v, .fr-px-first-13v { padding-left: 3.25rem !important; } .fr-pr-first-13v, .fr-px-first-13v { padding-right: 3.25rem !important; } .fr-pt-first-13v, .fr-py-first-13v { padding-top: 3.25rem !important; } .fr-pb-first-13v, .fr-py-first-13v { padding-bottom: 3.25rem !important; } .fr-p-first-14v, .fr-p-first-7w { padding: 3.5rem !important; } .fr-pl-first-14v, .fr-pl-first-7w, .fr-px-first-14v, .fr-px-first-7w { padding-left: 3.5rem !important; } .fr-pr-first-14v, .fr-pr-first-7w, .fr-px-first-14v, .fr-px-first-7w { padding-right: 3.5rem !important; } .fr-pt-first-14v, .fr-pt-first-7w, .fr-py-first-14v, .fr-py-first-7w { padding-top: 3.5rem !important; } .fr-pb-first-14v, .fr-pb-first-7w, .fr-py-first-14v, .fr-py-first-7w { padding-bottom: 3.5rem !important; } .fr-p-first-15v { padding: 3.75rem !important; } .fr-pl-first-15v, .fr-px-first-15v { padding-left: 3.75rem !important; } .fr-pr-first-15v, .fr-px-first-15v { padding-right: 3.75rem !important; } .fr-pt-first-15v, .fr-py-first-15v { padding-top: 3.75rem !important; } .fr-pb-first-15v, .fr-py-first-15v { padding-bottom: 3.75rem !important; } .fr-p-first-16v, .fr-p-first-8w { padding: 4rem !important; } .fr-pl-first-16v, .fr-pl-first-8w, .fr-px-first-16v, .fr-px-first-8w { padding-left: 4rem !important; } .fr-pr-first-16v, .fr-pr-first-8w, .fr-px-first-16v, .fr-px-first-8w { padding-right: 4rem !important; } .fr-pt-first-16v, .fr-pt-first-8w, .fr-py-first-16v, .fr-py-first-8w { padding-top: 4rem !important; } .fr-pb-first-16v, .fr-pb-first-8w, .fr-py-first-16v, .fr-py-first-8w { padding-bottom: 4rem !important; } .fr-p-first-17v { padding: 4.25rem !important; } .fr-pl-first-17v, .fr-px-first-17v { padding-left: 4.25rem !important; } .fr-pr-first-17v, .fr-px-first-17v { padding-right: 4.25rem !important; } .fr-pt-first-17v, .fr-py-first-17v { padding-top: 4.25rem !important; } .fr-pb-first-17v, .fr-py-first-17v { padding-bottom: 4.25rem !important; } .fr-p-first-18v, .fr-p-first-9w { padding: 4.5rem !important; } .fr-pl-first-18v, .fr-pl-first-9w, .fr-px-first-18v, .fr-px-first-9w { padding-left: 4.5rem !important; } .fr-pr-first-18v, .fr-pr-first-9w, .fr-px-first-18v, .fr-px-first-9w { padding-right: 4.5rem !important; } .fr-pt-first-18v, .fr-pt-first-9w, .fr-py-first-18v, .fr-py-first-9w { padding-top: 4.5rem !important; } .fr-pb-first-18v, .fr-pb-first-9w, .fr-py-first-18v, .fr-py-first-9w { padding-bottom: 4.5rem !important; } .fr-p-first-19v { padding: 4.75rem !important; } .fr-pl-first-19v, .fr-px-first-19v { padding-left: 4.75rem !important; } .fr-pr-first-19v, .fr-px-first-19v { padding-right: 4.75rem !important; } .fr-pt-first-19v, .fr-py-first-19v { padding-top: 4.75rem !important; } .fr-pb-first-19v, .fr-py-first-19v { padding-bottom: 4.75rem !important; } .fr-p-first-20v, .fr-p-first-10w { padding: 5rem !important; } .fr-pl-first-20v, .fr-pl-first-10w, .fr-px-first-20v, .fr-px-first-10w { padding-left: 5rem !important; } .fr-pr-first-20v, .fr-pr-first-10w, .fr-px-first-20v, .fr-px-first-10w { padding-right: 5rem !important; } .fr-pt-first-20v, .fr-pt-first-10w, .fr-py-first-20v, .fr-py-first-10w { padding-top: 5rem !important; } .fr-pb-first-20v, .fr-pb-first-10w, .fr-py-first-20v, .fr-py-first-10w { padding-bottom: 5rem !important; } .fr-p-first-21v { padding: 5.25rem !important; } .fr-pl-first-21v, .fr-px-first-21v { padding-left: 5.25rem !important; } .fr-pr-first-21v, .fr-px-first-21v { padding-right: 5.25rem !important; } .fr-pt-first-21v, .fr-py-first-21v { padding-top: 5.25rem !important; } .fr-pb-first-21v, .fr-py-first-21v { padding-bottom: 5.25rem !important; } .fr-p-first-22v, .fr-p-first-11w { padding: 5.5rem !important; } .fr-pl-first-22v, .fr-pl-first-11w, .fr-px-first-22v, .fr-px-first-11w { padding-left: 5.5rem !important; } .fr-pr-first-22v, .fr-pr-first-11w, .fr-px-first-22v, .fr-px-first-11w { padding-right: 5.5rem !important; } .fr-pt-first-22v, .fr-pt-first-11w, .fr-py-first-22v, .fr-py-first-11w { padding-top: 5.5rem !important; } .fr-pb-first-22v, .fr-pb-first-11w, .fr-py-first-22v, .fr-py-first-11w { padding-bottom: 5.5rem !important; } .fr-p-first-23v { padding: 5.75rem !important; } .fr-pl-first-23v, .fr-px-first-23v { padding-left: 5.75rem !important; } .fr-pr-first-23v, .fr-px-first-23v { padding-right: 5.75rem !important; } .fr-pt-first-23v, .fr-py-first-23v { padding-top: 5.75rem !important; } .fr-pb-first-23v, .fr-py-first-23v { padding-bottom: 5.75rem !important; } .fr-p-first-24v, .fr-p-first-12w { padding: 6rem !important; } .fr-pl-first-24v, .fr-pl-first-12w, .fr-px-first-24v, .fr-px-first-12w { padding-left: 6rem !important; } .fr-pr-first-24v, .fr-pr-first-12w, .fr-px-first-24v, .fr-px-first-12w { padding-right: 6rem !important; } .fr-pt-first-24v, .fr-pt-first-12w, .fr-py-first-24v, .fr-py-first-12w { padding-top: 6rem !important; } .fr-pb-first-24v, .fr-pb-first-12w, .fr-py-first-24v, .fr-py-first-12w { padding-bottom: 6rem !important; } .fr-p-first-25v { padding: 6.25rem !important; } .fr-pl-first-25v, .fr-px-first-25v { padding-left: 6.25rem !important; } .fr-pr-first-25v, .fr-px-first-25v { padding-right: 6.25rem !important; } .fr-pt-first-25v, .fr-py-first-25v { padding-top: 6.25rem !important; } .fr-pb-first-25v, .fr-py-first-25v { padding-bottom: 6.25rem !important; } .fr-p-first-26v, .fr-p-first-13w { padding: 6.5rem !important; } .fr-pl-first-26v, .fr-pl-first-13w, .fr-px-first-26v, .fr-px-first-13w { padding-left: 6.5rem !important; } .fr-pr-first-26v, .fr-pr-first-13w, .fr-px-first-26v, .fr-px-first-13w { padding-right: 6.5rem !important; } .fr-pt-first-26v, .fr-pt-first-13w, .fr-py-first-26v, .fr-py-first-13w { padding-top: 6.5rem !important; } .fr-pb-first-26v, .fr-pb-first-13w, .fr-py-first-26v, .fr-py-first-13w { padding-bottom: 6.5rem !important; } .fr-p-first-27v { padding: 6.75rem !important; } .fr-pl-first-27v, .fr-px-first-27v { padding-left: 6.75rem !important; } .fr-pr-first-27v, .fr-px-first-27v { padding-right: 6.75rem !important; } .fr-pt-first-27v, .fr-py-first-27v { padding-top: 6.75rem !important; } .fr-pb-first-27v, .fr-py-first-27v { padding-bottom: 6.75rem !important; } .fr-p-first-28v, .fr-p-first-14w { padding: 7rem !important; } .fr-pl-first-28v, .fr-pl-first-14w, .fr-px-first-28v, .fr-px-first-14w { padding-left: 7rem !important; } .fr-pr-first-28v, .fr-pr-first-14w, .fr-px-first-28v, .fr-px-first-14w { padding-right: 7rem !important; } .fr-pt-first-28v, .fr-pt-first-14w, .fr-py-first-28v, .fr-py-first-14w { padding-top: 7rem !important; } .fr-pb-first-28v, .fr-pb-first-14w, .fr-py-first-28v, .fr-py-first-14w { padding-bottom: 7rem !important; } .fr-p-first-29v { padding: 7.25rem !important; } .fr-pl-first-29v, .fr-px-first-29v { padding-left: 7.25rem !important; } .fr-pr-first-29v, .fr-px-first-29v { padding-right: 7.25rem !important; } .fr-pt-first-29v, .fr-py-first-29v { padding-top: 7.25rem !important; } .fr-pb-first-29v, .fr-py-first-29v { padding-bottom: 7.25rem !important; } .fr-p-first-30v, .fr-p-first-15w { padding: 7.5rem !important; } .fr-pl-first-30v, .fr-pl-first-15w, .fr-px-first-30v, .fr-px-first-15w { padding-left: 7.5rem !important; } .fr-pr-first-30v, .fr-pr-first-15w, .fr-px-first-30v, .fr-px-first-15w { padding-right: 7.5rem !important; } .fr-pt-first-30v, .fr-pt-first-15w, .fr-py-first-30v, .fr-py-first-15w { padding-top: 7.5rem !important; } .fr-pb-first-30v, .fr-pb-first-15w, .fr-py-first-30v, .fr-py-first-15w { padding-bottom: 7.5rem !important; } .fr-p-first-31v { padding: 7.75rem !important; } .fr-pl-first-31v, .fr-px-first-31v { padding-left: 7.75rem !important; } .fr-pr-first-31v, .fr-px-first-31v { padding-right: 7.75rem !important; } .fr-pt-first-31v, .fr-py-first-31v { padding-top: 7.75rem !important; } .fr-pb-first-31v, .fr-py-first-31v { padding-bottom: 7.75rem !important; } .fr-p-first-32v, .fr-p-first-16w { padding: 8rem !important; } .fr-pl-first-32v, .fr-pl-first-16w, .fr-px-first-32v, .fr-px-first-16w { padding-left: 8rem !important; } .fr-pr-first-32v, .fr-pr-first-16w, .fr-px-first-32v, .fr-px-first-16w { padding-right: 8rem !important; } .fr-pt-first-32v, .fr-pt-first-16w, .fr-py-first-32v, .fr-py-first-16w { padding-top: 8rem !important; } .fr-pb-first-32v, .fr-pb-first-16w, .fr-py-first-32v, .fr-py-first-16w { padding-bottom: 8rem !important; } :root[data-fr-theme=dark] { --shadow-color: rgba(0, 0, 18, 0.32); --grey-1000-50: #161616; --grey-1000-50-hover: #343434; --grey-1000-50-active: #474747; --grey-975-75: #1e1e1e; --grey-975-75-hover: #3f3f3f; --grey-975-75-active: #525252; --grey-950-100: #242424; --grey-950-100-hover: #474747; --grey-950-100-active: #5b5b5b; --grey-200-850: #cecece; --grey-925-125: #2a2a2a; --grey-1000-75: #1e1e1e; --grey-1000-75-hover: #3f3f3f; --grey-1000-75-active: #525252; --grey-1000-100: #242424; --grey-1000-100-hover: #474747; --grey-1000-100-active: #5b5b5b; --grey-975-100: #242424; --grey-975-100-hover: #474747; --grey-975-100-active: #5b5b5b; --grey-975-125: #2a2a2a; --grey-975-125-hover: #4e4e4e; --grey-975-125-active: #636363; --grey-950-125: #2a2a2a; --grey-950-125-hover: #4e4e4e; --grey-950-125-active: #636363; --grey-950-150: #2f2f2f; --grey-950-150-hover: #545454; --grey-950-150-active: #696969; --grey-50-1000: #fff; --grey-425-625: #929292; --grey-625-425: #666; --grey-0-1000: #fff; --grey-900-175: #353535; --blue-france-975-75: #1b1b35; --blue-france-975-75-hover: #3a3a68; --blue-france-975-75-active: #4d4d83; --blue-france-950-100: #21213f; --blue-france-950-100-hover: #424275; --blue-france-950-100-active: #56568c; --blue-france-sun-113-625: #8585f6; --blue-france-sun-113-625-hover: #b1b1f9; --blue-france-sun-113-625-active: #c6c6fb; --blue-france-925-125: #272747; --blue-france-925-125-hover: #4a4a7d; --blue-france-925-125-active: #5e5e90; --blue-france-975-sun-113: #000091; --blue-france-main-525: #6a6af4; --blue-france-850-200: #313178; --red-marianne-975-75: #2b1919; --red-marianne-975-75-hover: #573737; --red-marianne-975-75-active: #704848; --red-marianne-950-100: #331f1f; --red-marianne-950-100-hover: #613f3f; --red-marianne-950-100-active: #7b5151; --red-marianne-425-625: #f95c5e; --red-marianne-425-625-hover: #fa9293; --red-marianne-425-625-active: #fbabac; --red-marianne-925-125: #3b2424; --red-marianne-925-125-hover: #6b4545; --red-marianne-925-125-active: #865757; --red-marianne-main-472: #e1000f; --red-marianne-850-200: #5e2a2b; --info-950-100: #1d2437; --info-950-100-hover: #3b4767; --info-950-100-active: #4c5b83; --info-425-625: #518fff; --info-425-625-hover: #98b4ff; --info-425-625-active: #b4c7ff; --info-975-75: #171d2e; --success-950-100: #19271d; --success-950-100-hover: #344c3b; --success-950-100-active: #44624d; --success-425-625: #27a658; --success-425-625-hover: #36d975; --success-425-625-active: #3df183; --success-975-75: #142117; --warning-950-100: #361e19; --warning-950-100-hover: #663d35; --warning-950-100-active: #824f44; --warning-425-625: #fc5d00; --warning-425-625-hover: #ff8c73; --warning-425-625-active: #ffa595; --warning-975-75: #2d1814; --error-950-100: #391c1c; --error-950-100-hover: #6c3a3a; --error-950-100-active: #894b4b; --error-425-625: #ff5655; --error-425-625-hover: #ff8c8c; --error-425-625-active: #ffa6a6; --error-975-75: #301717; --green-tilleul-verveine-975-75: #201e14; --green-tilleul-verveine-975-75-hover: #433f2e; --green-tilleul-verveine-975-75-active: #57533d; --green-tilleul-verveine-950-100: #272419; --green-tilleul-verveine-950-100-hover: #4c4734; --green-tilleul-verveine-950-100-active: #615b44; --green-tilleul-verveine-sun-418-moon-817: #d8c634; --green-tilleul-verveine-sun-418-moon-817-hover: #fee943; --green-tilleul-verveine-sun-418-moon-817-active: #fef1ab; --green-tilleul-verveine-925-125: #2d2a1d; --green-tilleul-verveine-925-125-hover: #534f39; --green-tilleul-verveine-925-125-active: #696349; --green-tilleul-verveine-main-707: #b7a73f; --green-tilleul-verveine-850-200: #3f3a20; --green-bourgeon-975-75: #182014; --green-bourgeon-975-75-hover: #35432e; --green-bourgeon-975-75-active: #46573d; --green-bourgeon-950-100: #1e2719; --green-bourgeon-950-100-hover: #3d4c34; --green-bourgeon-950-100-active: #4e6144; --green-bourgeon-sun-425-moon-759: #99c221; --green-bourgeon-sun-425-moon-759-hover: #baec2a; --green-bourgeon-sun-425-moon-759-active: #c9fd2e; --green-bourgeon-925-125: #232d1d; --green-bourgeon-925-125-hover: #435339; --green-bourgeon-925-125-active: #556949; --green-bourgeon-main-640: #68a532; --green-bourgeon-850-200: #2a401a; --green-emeraude-975-75: #142018; --green-emeraude-975-75-hover: #2e4335; --green-emeraude-975-75-active: #3d5846; --green-emeraude-950-100: #19271e; --green-emeraude-950-100-hover: #344c3d; --green-emeraude-950-100-active: #44624f; --green-emeraude-sun-425-moon-753: #34cb6a; --green-emeraude-sun-425-moon-753-hover: #42fb84; --green-emeraude-sun-425-moon-753-active: #80fda3; --green-emeraude-925-125: #1e2e23; --green-emeraude-925-125-hover: #3b5543; --green-emeraude-925-125-active: #4b6b55; --green-emeraude-main-632: #00a95f; --green-emeraude-850-200: #21402c; --green-menthe-975-75: #15201e; --green-menthe-975-75-hover: #30433f; --green-menthe-975-75-active: #3f5753; --green-menthe-950-100: #1a2624; --green-menthe-950-100-hover: #364b47; --green-menthe-950-100-active: #46605b; --green-menthe-sun-373-moon-652: #21ab8e; --green-menthe-sun-373-moon-652-hover: #2eddb8; --green-menthe-sun-373-moon-652-active: #34f4cc; --green-menthe-925-125: #1f2d2a; --green-menthe-925-125-hover: #3c534e; --green-menthe-925-125-active: #4d6963; --green-menthe-main-548: #009081; --green-menthe-850-200: #223f3a; --green-archipel-975-75: #152021; --green-archipel-975-75-hover: #2f4345; --green-archipel-975-75-active: #3f5759; --green-archipel-950-100: #1a2628; --green-archipel-950-100-hover: #364a4e; --green-archipel-950-100-active: #465f63; --green-archipel-sun-391-moon-716: #34bab5; --green-archipel-sun-391-moon-716-hover: #43e9e2; --green-archipel-sun-391-moon-716-active: #4cfdf6; --green-archipel-925-125: #1f2c2e; --green-archipel-925-125-hover: #3c5255; --green-archipel-925-125-active: #4d676b; --green-archipel-main-557: #009099; --green-archipel-850-200: #233e41; --blue-ecume-975-75: #171d2f; --blue-ecume-975-75-hover: #333e5e; --blue-ecume-975-75-active: #445179; --blue-ecume-950-100: #1d2437; --blue-ecume-950-100-hover: #3b4767; --blue-ecume-950-100-active: #4c5b83; --blue-ecume-sun-247-moon-675: #869ece; --blue-ecume-sun-247-moon-675-hover: #b8c5e2; --blue-ecume-sun-247-moon-675-active: #ced6ea; --blue-ecume-925-125: #222940; --blue-ecume-925-125-hover: #424d73; --blue-ecume-925-125-active: #536190; --blue-ecume-main-400: #465f9d; --blue-ecume-850-200: #273962; --blue-cumulus-975-75: #171e2b; --blue-cumulus-975-75-hover: #333f56; --blue-cumulus-975-75-active: #43536f; --blue-cumulus-950-100: #1c2433; --blue-cumulus-950-100-hover: #3a4761; --blue-cumulus-950-100-active: #4a5b7b; --blue-cumulus-sun-368-moon-732: #7ab1e8; --blue-cumulus-sun-368-moon-732-hover: #bad2f2; --blue-cumulus-sun-368-moon-732-active: #d2e2f6; --blue-cumulus-925-125: #212a3a; --blue-cumulus-925-125-hover: #404f69; --blue-cumulus-925-125-active: #516384; --blue-cumulus-main-526: #417dc4; --blue-cumulus-850-200: #263b58; --purple-glycine-975-75: #251a24; --purple-glycine-975-75-hover: #4c394a; --purple-glycine-975-75-active: #634a60; --purple-glycine-950-100: #2c202b; --purple-glycine-950-100-hover: #554053; --purple-glycine-950-100-active: #6c536a; --purple-glycine-sun-319-moon-630: #ce70cc; --purple-glycine-sun-319-moon-630-hover: #dfa4dd; --purple-glycine-sun-319-moon-630-active: #e7bbe6; --purple-glycine-925-125: #332632; --purple-glycine-925-125-hover: #5d485c; --purple-glycine-925-125-active: #755b73; --purple-glycine-main-494: #a558a0; --purple-glycine-850-200: #502e4d; --pink-macaron-975-75: #261b19; --pink-macaron-975-75-hover: #4e3a37; --pink-macaron-975-75-active: #654c48; --pink-macaron-950-100: #2e211f; --pink-macaron-950-100-hover: #58423f; --pink-macaron-950-100-active: #705551; --pink-macaron-sun-406-moon-833: #ffb7ae; --pink-macaron-sun-406-moon-833-hover: #ffe0dc; --pink-macaron-sun-406-moon-833-active: #fff0ee; --pink-macaron-925-125: #352724; --pink-macaron-925-125-hover: #614a45; --pink-macaron-925-125-active: #795d57; --pink-macaron-main-689: #e18b76; --pink-macaron-850-200: #52312a; --pink-tuile-975-75: #281b19; --pink-tuile-975-75-hover: #513a37; --pink-tuile-975-75-active: #694c48; --pink-tuile-950-100: #2f211f; --pink-tuile-950-100-hover: #5a423e; --pink-tuile-950-100-active: #725550; --pink-tuile-sun-425-moon-750: #ff9575; --pink-tuile-sun-425-moon-750-hover: #ffc4b7; --pink-tuile-sun-425-moon-750-active: #ffd8d0; --pink-tuile-925-125: #372624; --pink-tuile-925-125-hover: #644845; --pink-tuile-925-125-active: #7d5b57; --pink-tuile-main-556: #ce614a; --pink-tuile-850-200: #55302a; --yellow-tournesol-975-75: #221d11; --yellow-tournesol-975-75-hover: #473e29; --yellow-tournesol-975-75-active: #5c5136; --yellow-tournesol-950-100: #292416; --yellow-tournesol-950-100-hover: #4f472f; --yellow-tournesol-950-100-active: #655b3d; --yellow-tournesol-sun-407-moon-922: #ffe552; --yellow-tournesol-sun-407-moon-922-hover: #e1c700; --yellow-tournesol-sun-407-moon-922-active: #cab300; --yellow-tournesol-925-125: #302a1a; --yellow-tournesol-925-125-hover: #584e34; --yellow-tournesol-925-125-active: #6f6342; --yellow-tournesol-main-731: #c8aa39; --yellow-tournesol-850-200: #43391a; --yellow-moutarde-975-75: #231d14; --yellow-moutarde-975-75-hover: #483e2e; --yellow-moutarde-975-75-active: #5e513d; --yellow-moutarde-950-100: #2a2319; --yellow-moutarde-950-100-hover: #514534; --yellow-moutarde-950-100-active: #685944; --yellow-moutarde-sun-348-moon-860: #ffca00; --yellow-moutarde-sun-348-moon-860-hover: #cda200; --yellow-moutarde-sun-348-moon-860-active: #b28c00; --yellow-moutarde-925-125: #30291d; --yellow-moutarde-925-125-hover: #584d39; --yellow-moutarde-925-125-active: #6f6149; --yellow-moutarde-main-679: #c3992a; --yellow-moutarde-850-200: #453820; --orange-terre-battue-975-75: #281a16; --orange-terre-battue-975-75-hover: #513932; --orange-terre-battue-975-75-active: #6a4b42; --orange-terre-battue-950-100: #31201c; --orange-terre-battue-950-100-hover: #5d403a; --orange-terre-battue-950-100-active: #77534a; --orange-terre-battue-sun-370-moon-672: #ff732c; --orange-terre-battue-sun-370-moon-672-hover: #ffa48b; --orange-terre-battue-sun-370-moon-672-active: #ffbbab; --orange-terre-battue-925-125: #382621; --orange-terre-battue-925-125-hover: #664840; --orange-terre-battue-925-125-active: #7f5b51; --orange-terre-battue-main-645: #e4794a; --orange-terre-battue-850-200: #543125; --brown-cafe-creme-975-75: #211d16; --brown-cafe-creme-975-75-hover: #453e31; --brown-cafe-creme-975-75-active: #5a5141; --brown-cafe-creme-950-100: #28241c; --brown-cafe-creme-950-100-hover: #4e4739; --brown-cafe-creme-950-100-active: #635b4a; --brown-cafe-creme-sun-383-moon-885: #ecd7a2; --brown-cafe-creme-sun-383-moon-885-hover: #c5b386; --brown-cafe-creme-sun-383-moon-885-active: #af9f77; --brown-cafe-creme-925-125: #2e2a21; --brown-cafe-creme-925-125-hover: #554e3f; --brown-cafe-creme-925-125-active: #6b6351; --brown-cafe-creme-main-782: #d1b781; --brown-cafe-creme-850-200: #423925; --brown-caramel-975-75: #251c16; --brown-caramel-975-75-hover: #4c3c31; --brown-caramel-975-75-active: #624e41; --brown-caramel-950-100: #2c221c; --brown-caramel-950-100-hover: #554439; --brown-caramel-950-100-active: #6c574a; --brown-caramel-sun-425-moon-901: #fbd8ab; --brown-caramel-sun-425-moon-901-hover: #efb547; --brown-caramel-sun-425-moon-901-active: #d6a23e; --brown-caramel-925-125: #332821; --brown-caramel-925-125-hover: #5d4b40; --brown-caramel-925-125-active: #755f51; --brown-caramel-main-648: #c08c65; --brown-caramel-850-200: #4b3525; --brown-opera-975-75: #241c17; --brown-opera-975-75-hover: #4a3c33; --brown-opera-975-75-active: #604f44; --brown-opera-950-100: #2b221c; --brown-opera-950-100-hover: #53443a; --brown-opera-950-100-active: #6a574a; --brown-opera-sun-395-moon-820: #e6be92; --brown-opera-sun-395-moon-820-hover: #f2e2d3; --brown-opera-sun-395-moon-820-active: #f8f0e9; --brown-opera-925-125: #322821; --brown-opera-925-125-hover: #5c4b40; --brown-opera-925-125-active: #735f51; --brown-opera-main-680: #bd987a; --brown-opera-850-200: #493625; --beige-gris-galet-975-75: #211d19; --beige-gris-galet-975-75-hover: #453e37; --beige-gris-galet-975-75-active: #595148; --beige-gris-galet-950-100: #28231f; --beige-gris-galet-950-100-hover: #4e453f; --beige-gris-galet-950-100-active: #635950; --beige-gris-galet-sun-407-moon-821: #d0c3b7; --beige-gris-galet-sun-407-moon-821-hover: #eae5e1; --beige-gris-galet-sun-407-moon-821-active: #f4f2f0; --beige-gris-galet-925-125: #2e2924; --beige-gris-galet-925-125-hover: #554d45; --beige-gris-galet-925-125-active: #6b6157; --beige-gris-galet-main-702: #aea397; --beige-gris-galet-850-200: #433829; } .fr-placement { position: fixed; top: 0; left: 0; } @-moz-document url-prefix() { :root[data-fr-scrolling] body { position: sticky; } :root { --underline-thickness: calc(0.0625em + 0.25px); } } .fr-displayed-lg { display: none !important; } .fr-responsive-img--32x9 { aspect-ratio: 3.5555555556 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--16x9 { aspect-ratio: 1.7777777778 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--3x2 { aspect-ratio: 1.5 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--4x3 { aspect-ratio: 1.3333333333 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--1x1 { aspect-ratio: 1 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--3x4 { aspect-ratio: 0.75 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-img--2x3 { aspect-ratio: 0.6666666667 !important; object-fit: cover; object-position: 50% 50%; } .fr-responsive-vid--16x9 { aspect-ratio: 1.7777777778 !important; } .fr-responsive-vid--4x3 { aspect-ratio: 1.3333333333 !important; } .fr-responsive-vid--1x1 { aspect-ratio: 1 !important; } .fr-fi--xs::before, .fr-fi--xs::after { --icon-size: 0.75rem; } .fr-fi--sm::before, .fr-fi--sm::after { --icon-size: 1rem; } .fr-fi--md::before, .fr-fi--md::after { --icon-size: 1.5rem; } .fr-fi--lg::before, .fr-fi--lg::after { --icon-size: 2rem; } .fr-artwork-decorative { fill: var(--artwork-decorative-blue-france); } .fr-artwork-minor { fill: var(--artwork-minor-red-marianne); } .fr-artwork-major { fill: var(--artwork-major-blue-france); } .fr-artwork-background { fill: var(--artwork-background-grey); } .fr-artwork-motif { fill: var(--artwork-motif-grey); } .fr-artwork--green-tilleul-verveine .fr-artwork-minor { fill: var(--artwork-minor-green-tilleul-verveine); } .fr-artwork--green-bourgeon .fr-artwork-minor { fill: var(--artwork-minor-green-bourgeon); } .fr-artwork--green-emeraude .fr-artwork-minor { fill: var(--artwork-minor-green-emeraude); } .fr-artwork--green-menthe .fr-artwork-minor { fill: var(--artwork-minor-green-menthe); } .fr-artwork--green-archipel .fr-artwork-minor { fill: var(--artwork-minor-green-archipel); } .fr-artwork--blue-ecume .fr-artwork-minor { fill: var(--artwork-minor-blue-ecume); } .fr-artwork--blue-cumulus .fr-artwork-minor { fill: var(--artwork-minor-blue-cumulus); } .fr-artwork--purple-glycine .fr-artwork-minor { fill: var(--artwork-minor-purple-glycine); } .fr-artwork--pink-macaron .fr-artwork-minor { fill: var(--artwork-minor-pink-macaron); } .fr-artwork--pink-tuile .fr-artwork-minor { fill: var(--artwork-minor-pink-tuile); } .fr-artwork--yellow-tournesol .fr-artwork-minor { fill: var(--artwork-minor-yellow-tournesol); } .fr-artwork--yellow-moutarde .fr-artwork-minor { fill: var(--artwork-minor-yellow-moutarde); } .fr-artwork--orange-terre-battue .fr-artwork-minor { fill: var(--artwork-minor-orange-terre-battue); } .fr-artwork--brown-cafe-creme .fr-artwork-minor { fill: var(--artwork-minor-brown-cafe-creme); } .fr-artwork--brown-caramel .fr-artwork-minor { fill: var(--artwork-minor-brown-caramel); } .fr-artwork--brown-opera .fr-artwork-minor { fill: var(--artwork-minor-brown-opera); } .fr-artwork--beige-gris-galet .fr-artwork-minor { fill: var(--artwork-minor-beige-gris-galet); } [disabled] .fr-artwork * { fill: var(--text-disabled-grey); } .fr-h6, .fr-h5, .fr-h4, .fr-h3, .fr-h2, .fr-h1, .fr-display-xs, .fr-display-sm, .fr-display-md, .fr-display-lg, .fr-display-xl { color: var(--text-title-grey); } h6, h5, h4, h3, h2, h1 { color: var(--text-title-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ SCHEME \* ˍˍˍˍˍˍˍˍˍ */ /* ¯¯¯¯¯¯¯¯¯ *\ UPLOAD \* ˍˍˍˍˍˍˍˍˍ */ .fr-upload-group .fr-label .fr-hint-text { margin-top: 0.75rem; } .fr-upload-group .fr-label + .fr-upload { margin-top: 1rem; } .fr-upload-group .fr-message:first-child { margin-top: 0.5rem; } .fr-upload { font-size: 0.875rem; line-height: 1.5rem; width: 100%; display: inline-flex; margin: 0; } .fr-upload:disabled::-webkit-file-upload-button { outline-style: none; cursor: not-allowed; } .fr-upload::-webkit-file-upload-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; font: inherit; cursor: pointer; margin-right: 0.5rem; } /* ¯¯¯¯¯¯¯¯¯ *\ RANGE \* ˍˍˍˍˍˍˍˍˍ */ .fr-range-group { position: relative; } .fr-range-group--valid::before, .fr-range-group--error::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } .fr-range { --thumb-size: 1.5rem; position: relative; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .fr-range input[type=range] { outline: none; width: 100%; } .fr-range__output { visibility: hidden; color: var(--text-active-blue-france); } .fr-range__output, .fr-range__min, .fr-range__max { text-align: center; min-width: var(--thumb-size); font-size: 0.75rem; line-height: 1.25rem; } .fr-range[data-fr-js-range] { --progress-left: 0; --progress-right: calc(var(--thumb-size) * 0.5); } .fr-range[data-fr-js-range]::before, .fr-range[data-fr-js-range]::after { content: ""; display: block; position: absolute; top: 1.625rem; right: 0; left: 0; width: 100%; height: 0.75rem; border-radius: 0.375rem; } .fr-range[data-fr-js-range]::before { outline-offset: -1px; box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); } .fr-range[data-fr-js-range]::after { clip-path: polygon(var(--progress-left) 0, var(--progress-right) 0, var(--progress-right) 100%, var(--progress-left) 100%); background-color: var(--background-active-blue-france); --idle: transparent; --hover: var(--background-active-blue-france-hover); --active: var(--background-active-blue-france-active); } .fr-range[data-fr-js-range] input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; width: 100%; height: var(--thumb-size); z-index: 1; } .fr-range[data-fr-js-range] input[type=range]:not(:only-of-type) { pointer-events: none; } .fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none; pointer-events: auto; z-index: calc(var(--ground) + 500); background-color: var(--background-raised-grey); --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); border: 1px solid var(--border-action-high-blue-france); } .fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb:active { z-index: 2; } .fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none; pointer-events: auto; z-index: calc(var(--ground) + 500); background-color: var(--background-raised-grey); --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); border: 1px solid var(--border-action-high-blue-france); } .fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb:active { z-index: 2; } .fr-range[data-fr-js-range] .fr-range__output { visibility: visible; } .fr-range--sm { --thumb-size: 1rem; } .fr-range--sm[data-fr-js-range]::before, .fr-range--sm[data-fr-js-range]::after { top: 1.5rem; height: 0.5rem; border-radius: 0.25rem; } .fr-range--step[data-fr-js-range] { --step-width: 0; } .fr-range--step[data-fr-js-range]::before, .fr-range--step[data-fr-js-range]::after { padding-left: 0.625rem; padding-right: 0.625rem; background-repeat: repeat-x; background-size: var(--step-width) 100%; background-position: 0.625rem 0; background-clip: content-box; } .fr-range--step.fr-range--sm[data-fr-js-range]::before, .fr-range--step.fr-range--sm[data-fr-js-range]::after { background-position: 0.375rem 0; padding-left: 0.375rem; padding-right: 0.375rem; } .fr-range--double .fr-range__output { min-width: calc(var(--thumb-size) * 2); } .fr-range--double[data-fr-js-range] input[type=range] { width: calc(100% - var(--thumb-size)); } .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(1) { margin-right: var(--thumb-size); } .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(2) { position: absolute; right: 0; top: 1.25rem; } .fr-range--double.fr-range--step[data-fr-js-range]::before, .fr-range--double.fr-range--step[data-fr-js-range]::after { background-size: 0; } .fr-range[data-fr-js-range] input[type=range]:disabled::-webkit-slider-thumb { border: 1px solid var(--border-disabled-grey); } .fr-range[data-fr-js-range] input[type=range]:disabled::-moz-range-thumb { border: 1px solid var(--border-disabled-grey); } .fr-range__min, .fr-range__max { color: var(--text-mention-grey); } .fr-range--step[data-fr-js-range]::before { background-image: radial-gradient(circle at 2px 50%, var(--background-action-high-blue-france) 0, var(--background-action-high-blue-france) 1px, transparent 1px); } .fr-range--step[data-fr-js-range]::after { background-image: radial-gradient(circle at 2px 50%, var(--background-action-low-blue-france) 0, var(--background-action-low-blue-france) 2px, transparent 2px); box-shadow: inset 10px 0 0 0 var(--border-active-blue-france), inset -10px 0 0 0 var(--border-active-blue-france); } .fr-range--step.fr-range--sm[data-fr-js-range]::after { box-shadow: inset 6px 0 0 0 var(--border-active-blue-france), inset -6px 0 0 0 var(--border-active-blue-france); } .fr-range-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-range-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-range-group--disabled .fr-range[data-fr-js-range]::before { box-shadow: inset 0 0 0 1px var(--border-disabled-grey); } .fr-range-group--disabled .fr-range[data-fr-js-range]::after { background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-range-group--disabled .fr-range--step[data-fr-js-range]::before { background-image: radial-gradient(circle at 2px 50%, var(--background-disabled-grey) 0, var(--background-disabled-grey) 1px, transparent 1px); } .fr-range-group--disabled .fr-range--step[data-fr-js-range]::after { background-image: radial-gradient(circle at 2px 50%, var(--background-default-grey) 0, var(--background-default-grey) 2px, transparent 2px); } .fr-range-group--disabled .fr-range__output, .fr-range-group--disabled .fr-range__min, .fr-range-group--disabled .fr-range__max { color: var(--text-disabled-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ ACCORDION \* ˍˍˍˍˍˍˍˍˍ */ .fr-accordion { position: relative; } .fr-accordion::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 1px 0 0 var(--border-default-grey), 0 1px 0 0 var(--border-default-grey); } .fr-accordion__title { margin: 0; display: block; font-size: unset; line-height: unset; } .fr-accordion:focus-within { z-index: 1; } .fr-accordion__btn { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; font-weight: 500; font-size: 1rem; line-height: 1.5rem; min-height: 3rem; padding: 0.75rem 1rem; overflow: initial; max-width: 100%; max-height: none; width: 100%; text-align: left; margin: 0; color: var(--text-action-high-blue-france); } .fr-accordion__btn::before, .fr-accordion__btn::after { display: block; } .fr-accordion__btn::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.25rem; 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"); content: ""; transition: transform 0.3s; margin-right: 0; margin-left: auto; } .fr-accordion__btn::before { content: none; } .fr-accordion__btn[aria-expanded=true]::after { transform: rotate(-180deg); } .fr-accordion .fr-collapse { --ul-type: disc; --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, ".") ".  "; transition: visibility 0.3s, padding 0.3s; } .fr-accordion .fr-collapse--expanded { padding-top: 1rem; padding-bottom: 1.5rem; } .fr-accordions-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; } .fr-accordion__btn[aria-expanded=true] { background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); } /* ------------------------------------ *\ Badge \* ------------------------------------ */ .fr-badge { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); font-size: 0.875rem; line-height: 1.5rem; min-height: 1.5rem; padding: 0 0.5rem; overflow: initial; max-height: none; font-weight: 700; max-width: 100%; text-transform: uppercase; border-radius: 0.25rem; color: var(--text-default-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-badge::before, .fr-badge::after { display: block; } .fr-badge--icon-left[class^=fr-icon-], .fr-badge--icon-left[class*=" fr-icon-"], .fr-badge--icon-left[class^=fr-fi-], .fr-badge--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-badge--icon-left[class^=fr-icon-]::before, .fr-badge--icon-left[class*=" fr-icon-"]::before, .fr-badge--icon-left[class^=fr-fi-]::before, .fr-badge--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.25rem; } .fr-badge[class^=fr-icon-]:not([class*=fr-badge--icon-])::before, .fr-badge[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before, .fr-badge[class^=fr-fi-]:not([class*=fr-badge--icon-])::before, .fr-badge[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before { content: none; } .fr-badge--sm { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.125rem; padding: 0 0.375rem; overflow: initial; max-width: 100%; max-height: none; } .fr-badge--sm.fr-badge--icon-left[class^=fr-icon-], .fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"], .fr-badge--sm.fr-badge--icon-left[class^=fr-fi-], .fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-badge--sm.fr-badge--icon-left[class^=fr-icon-]::before, .fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"]::before, .fr-badge--sm.fr-badge--icon-left[class^=fr-fi-]::before, .fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"]::before { --icon-size: 0.75rem; margin-left: -0.09375rem; margin-right: 0.25rem; } .fr-badge--sm[class^=fr-icon-]:not([class*=fr-badge--icon-])::before, .fr-badge--sm[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before, .fr-badge--sm[class^=fr-fi-]:not([class*=fr-badge--icon-])::before, .fr-badge--sm[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before { content: none; } .fr-badge::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.25rem; 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%; } .fr-badge--sm::before { --icon-size: 0.75rem; margin-left: -0.09375rem; margin-right: 0.25rem; } .fr-badge.fr-badge--info::before, .fr-badge--sm.fr-badge--info::before { -webkit-mask-image: url("../icons/system/fr--info-fill.svg"); mask-image: url("../icons/system/fr--info-fill.svg"); } .fr-badge.fr-badge--success::before, .fr-badge--sm.fr-badge--success::before { -webkit-mask-image: url("../icons/system/fr--success-fill.svg"); mask-image: url("../icons/system/fr--success-fill.svg"); } .fr-badge.fr-badge--error::before, .fr-badge--sm.fr-badge--error::before { -webkit-mask-image: url("../icons/system/fr--error-fill.svg"); mask-image: url("../icons/system/fr--error-fill.svg"); } .fr-badge.fr-badge--warning::before, .fr-badge--sm.fr-badge--warning::before { -webkit-mask-image: url("../icons/system/fr--warning-fill.svg"); mask-image: url("../icons/system/fr--warning-fill.svg"); } .fr-badge.fr-badge--new::before, .fr-badge--sm.fr-badge--new::before { -webkit-mask-image: url("../icons/weather/flashlight-fill.svg"); mask-image: url("../icons/weather/flashlight-fill.svg"); } .fr-badge--info::before, .fr-badge--success::before, .fr-badge--error::before, .fr-badge--warning::before, .fr-badge--new::before, .fr-badge--sm--info::before, .fr-badge--sm--success::before, .fr-badge--sm--error::before, .fr-badge--sm--warning::before, .fr-badge--sm--new::before { content: ""; } .fr-badge.fr-badge--no-icon::before, .fr-badge--sm.fr-badge--no-icon::before { content: none; } .fr-badges-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: flex; flex-wrap: wrap; margin-left: -0.25rem; margin-right: -0.25rem; margin-bottom: 0; } .fr-badges-group > li { display: inline-flex; max-width: 100%; } .fr-badges-group .fr-badge { margin: 0 0.25rem 0.5rem 0.25rem; } .fr-badges-group--sm .fr-badge { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.125rem; padding: 0 0.375rem; } .fr-badges-group--sm .fr-badge::before, .fr-badges-group--sm .fr-badge::after { --icon-size: 0.75rem; } .fr-badge--info { color: var(--text-default-info); background-color: var(--background-contrast-info); --idle: transparent; --hover: var(--background-contrast-info-hover); --active: var(--background-contrast-info-active); } .fr-badge--error { color: var(--text-default-error); background-color: var(--background-contrast-error); --idle: transparent; --hover: var(--background-contrast-error-hover); --active: var(--background-contrast-error-active); } .fr-badge--success { color: var(--text-default-success); background-color: var(--background-contrast-success); --idle: transparent; --hover: var(--background-contrast-success-hover); --active: var(--background-contrast-success-active); } .fr-badge--warning { color: var(--text-default-warning); background-color: var(--background-contrast-warning); --idle: transparent; --hover: var(--background-contrast-warning-hover); --active: var(--background-contrast-warning-active); } .fr-badge--new { color: var(--text-action-high-yellow-moutarde); background-color: var(--background-contrast-yellow-moutarde); --idle: transparent; --hover: var(--background-contrast-yellow-moutarde-hover); --active: var(--background-contrast-yellow-moutarde-active); } .fr-badge--green-tilleul-verveine { color: var(--text-label-green-tilleul-verveine); background-color: var(--background-contrast-green-tilleul-verveine); --idle: transparent; --hover: var(--background-contrast-green-tilleul-verveine-hover); --active: var(--background-contrast-green-tilleul-verveine-active); } .fr-badge--green-bourgeon { color: var(--text-label-green-bourgeon); background-color: var(--background-contrast-green-bourgeon); --idle: transparent; --hover: var(--background-contrast-green-bourgeon-hover); --active: var(--background-contrast-green-bourgeon-active); } .fr-badge--green-emeraude { color: var(--text-label-green-emeraude); background-color: var(--background-contrast-green-emeraude); --idle: transparent; --hover: var(--background-contrast-green-emeraude-hover); --active: var(--background-contrast-green-emeraude-active); } .fr-badge--green-menthe { color: var(--text-label-green-menthe); background-color: var(--background-contrast-green-menthe); --idle: transparent; --hover: var(--background-contrast-green-menthe-hover); --active: var(--background-contrast-green-menthe-active); } .fr-badge--green-archipel { color: var(--text-label-green-archipel); background-color: var(--background-contrast-green-archipel); --idle: transparent; --hover: var(--background-contrast-green-archipel-hover); --active: var(--background-contrast-green-archipel-active); } .fr-badge--blue-ecume { color: var(--text-label-blue-ecume); background-color: var(--background-contrast-blue-ecume); --idle: transparent; --hover: var(--background-contrast-blue-ecume-hover); --active: var(--background-contrast-blue-ecume-active); } .fr-badge--blue-cumulus { color: var(--text-label-blue-cumulus); background-color: var(--background-contrast-blue-cumulus); --idle: transparent; --hover: var(--background-contrast-blue-cumulus-hover); --active: var(--background-contrast-blue-cumulus-active); } .fr-badge--purple-glycine { color: var(--text-label-purple-glycine); background-color: var(--background-contrast-purple-glycine); --idle: transparent; --hover: var(--background-contrast-purple-glycine-hover); --active: var(--background-contrast-purple-glycine-active); } .fr-badge--pink-macaron { color: var(--text-label-pink-macaron); background-color: var(--background-contrast-pink-macaron); --idle: transparent; --hover: var(--background-contrast-pink-macaron-hover); --active: var(--background-contrast-pink-macaron-active); } .fr-badge--pink-tuile { color: var(--text-label-pink-tuile); background-color: var(--background-contrast-pink-tuile); --idle: transparent; --hover: var(--background-contrast-pink-tuile-hover); --active: var(--background-contrast-pink-tuile-active); } .fr-badge--yellow-tournesol { color: var(--text-label-yellow-tournesol); background-color: var(--background-contrast-yellow-tournesol); --idle: transparent; --hover: var(--background-contrast-yellow-tournesol-hover); --active: var(--background-contrast-yellow-tournesol-active); } .fr-badge--yellow-moutarde { color: var(--text-label-yellow-moutarde); background-color: var(--background-contrast-yellow-moutarde); --idle: transparent; --hover: var(--background-contrast-yellow-moutarde-hover); --active: var(--background-contrast-yellow-moutarde-active); } .fr-badge--orange-terre-battue { color: var(--text-label-orange-terre-battue); background-color: var(--background-contrast-orange-terre-battue); --idle: transparent; --hover: var(--background-contrast-orange-terre-battue-hover); --active: var(--background-contrast-orange-terre-battue-active); } .fr-badge--brown-cafe-creme { color: var(--text-label-brown-cafe-creme); background-color: var(--background-contrast-brown-cafe-creme); --idle: transparent; --hover: var(--background-contrast-brown-cafe-creme-hover); --active: var(--background-contrast-brown-cafe-creme-active); } .fr-badge--brown-caramel { color: var(--text-label-brown-caramel); background-color: var(--background-contrast-brown-caramel); --idle: transparent; --hover: var(--background-contrast-brown-caramel-hover); --active: var(--background-contrast-brown-caramel-active); } .fr-badge--brown-opera { color: var(--text-label-brown-opera); background-color: var(--background-contrast-brown-opera); --idle: transparent; --hover: var(--background-contrast-brown-opera-hover); --active: var(--background-contrast-brown-opera-active); } .fr-badge--beige-gris-galet { color: var(--text-label-beige-gris-galet); background-color: var(--background-contrast-beige-gris-galet); --idle: transparent; --hover: var(--background-contrast-beige-gris-galet-hover); --active: var(--background-contrast-beige-gris-galet-active); } .fr-badge-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: flex; flex-wrap: wrap; margin-bottom: 0; } .fr-badge-group > li { display: inline-flex; max-width: 100%; } .fr-badge-group .fr-badge { margin-right: 0.5rem; margin-bottom: 0.5rem; } /* ¯¯¯¯¯¯¯¯¯ *\ LOGO \* ˍˍˍˍˍˍˍˍˍ */ .fr-logo { --text-spacing: 0; --underline-img: none; display: inline-block; font-weight: 700; line-height: 1.0317460317em; letter-spacing: -0.01em; text-transform: uppercase; vertical-align: middle; text-indent: -0.1em; font-size: 1.05rem; color: var(--text-black-white-grey); } .fr-logo::before { width: 2.75rem; height: 1rem; margin-bottom: 0.3333333333rem; background-size: 2.75rem 1.125rem, 2.75rem 1rem, 0; background-position: 0 -0.0625rem, 0 0, 0 0; content: ""; display: block; background-repeat: no-repeat, no-repeat, no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath fill='%23fff' d='M11.3 10.2c-.9.6-1.7 1.3-2.3 2.1v-.1c.4-.5.7-1 1-1.5.4-.2.7-.5 1-.8.5-.5 1-1 1.7-1.3.3-.1.5-.1.8 0-.1.1-.2.1-.4.2H13v-.1c-.3.3-.7.5-1 .9-.1.2-.2.6-.7.6 0 .1.1 0 0 0zm1.6 4.6c0-.1-.1 0-.2 0l-.1.1-.1.1-.2.2s.1.1.2 0l.1-.1c.1 0 .2-.1.2-.2.1 0 .1 0 .1-.1 0 .1 0 0 0 0zm-1.6-4.3c.1 0 .2 0 .2-.1s.1-.1.1-.1v-.1c-.2.1-.3.2-.3.3zm2.4 1.9s0-.1 0 0c.1-.1.2-.1.3-.1.7-.1 1.4-.3 2.1-.6-.8-.5-1.7-.9-2.6-1h.1c-.1-.1-.3-.1-.5-.2h.1c-.2-.1-.5-.1-.7-.2.1 0 .2-.2.2-.3h-.1c-.4.2-.6.5-.8.9.2.1.5 0 .7.1h-.3c-.1 0-.2.1-.2.2h.1c-.1 0-.1.1-.2.1.1.1.2 0 .4 0 0 .1.1.1.1.1-.1 0-.2.1-.3.3-.1.2-.2.2-.3.3v.1c-.3.2-.6.5-.9.8v.1c-.1.1-.2.1-.2.2v.1c.4-.1.6-.4 1-.5l.6-.3c.2 0 .3-.1.5-.1v.1h.2c0 .1-.2 0-.1.1s.3.1.4 0c.2-.2.3-.2.4-.2zM12.4 14c-.4.2-.9.2-1.2.4 0 0 0 .1-.1.1 0 0-.1 0-.1.1-.1 0-.1.1-.2.2l-.1.1s0 .1.1 0l.1-.1s-.1.1-.1.2V15.3l-.1.1s0 .1-.1.1l-.1.1.2-.2.1-.1h.2s0-.1.1-.1c.1-.1.2-.2.3-.2h.1c.1-.1.3-.1.4-.2.1-.1.2-.2.3-.2.2-.2.5-.3.8-.5-.1 0-.2-.1-.3-.1 0 .1-.2 0-.3 0zM30 9.7c-.1.2-.4.2-.6.3-.2.2 0 .4.1.5.1.3-.2.5-.4.5.1.1.2.1.2.1 0 .2.2.2.1.4s-.5.3-.3.5c.1.2.1.5 0 .7-.1.2-.3.4-.5.5-.2.1-.4.1-.6 0-.1 0-.1-.1-.2-.1-.5-.1-1-.2-1.5-.2-.1 0-.3.1-.4.1-.1.1-.3.2-.4.3l-.1.1c-.1.1-.2.2-.2.3-.1.2-.2.4-.2.6-.2.5-.2 1 0 1.4 0 0 1 .3 1.7.6.2.1.5.2.7.4l1.7 1H13.2l1.6-1c.6-.4 1.3-.7 2-1 .5-.2 1.1-.5 1.5-.9.2-.2.3-.4.5-.5.3-.4.6-.7 1-1l.3-.3s0-.1.1-.1c-.2.1-.2.2-.4.2 0 0-.1 0 0-.1s.2-.2.3-.2v-.1c-.4 0-.7.2-1 .5h-.2c-.5.2-.8.5-1.2.7v-.1c-.2.1-.4.2-.5.2-.2 0-.5.1-.8 0-.4 0-.7.1-1.1.2-.2.1-.4.1-.6.2v.1l-.2.2c-.2.1-.3.2-.5.4l-.5.5h-.1l.1-.1.1-.1c0-.1.1-.1.1-.2.2-.1.3-.3.5-.4 0 0-.1 0 0 0 0 0 0-.1.1-.1l-.1.1c-.1.1-.1.2-.2.2v-.1-.1l.2-.2c.1-.1.2-.1.3-.2h.1c-.2.1-.3.1-.5.2H14h-.1c0-.1.1-.1.2-.2h.1c1-.8 2.3-.6 3.4-1 .1-.1.2-.1.3-.2.1-.1.3-.2.5-.3.2-.2.4-.4.5-.7v-.1c-.4.4-.8.7-1.3 1-.6.2-1.3.4-2 .4 0-.1.1-.1.1-.1 0-.1.1-.1.1-.2h.1s0-.1.1-.1h.1c-.1-.1-.3.1-.4 0 .1-.1 0-.2.1-.2h.1s0-.1.1-.1c.5-.3.9-.5 1.3-.7-.1 0-.1.1-.2 0 .1 0 0-.1.1-.1.3-.1.6-.3.9-.4-.1 0-.2.1-.3 0 .1 0 .1-.1.2-.1v-.1h0c0-.1.1 0 .2-.1h-.1c.1-.1.2-.2.4-.2 0-.1-.1 0-.1-.1h.1-.5c-.1 0 0-.1 0-.1.1-.2.2-.5.3-.7h-.1c-.3.3-.8.5-1.2.6h-.2c-.2.1-.4.1-.5 0-.1-.1-.2-.2-.3-.2-.2-.1-.5-.3-.8-.4-.7-.2-1.5-.4-2.3-.3.3-.1.7-.2 1.1-.3.5-.2 1-.3 1.5-.3h-.3c-.4 0-.9.1-1.3.2-.3.1-.6.2-.9.2-.2.1-.3.2-.5.2v-.1c.3-.4.7-.7 1.1-.8.5-.1 1.1 0 1.6.1.4 0 .8.1 1.1.2.1 0 .2.2.3.3.2.1.4 0 .5.1v-.2c.1-.1.3 0 .4 0 .2-.2-.2-.4-.3-.6v-.1c.2.2.5.4.7.6.1.1.5.2.5 0-.2-.3-.4-.6-.7-.9v-.2c-.1 0-.1 0-.1-.1-.1-.1-.1-.2-.1-.3-.1-.2 0-.4-.1-.5-.1-.2-.1-.3-.1-.5-.1-.5-.2-1-.3-1.4-.1-.6.3-1 .6-1.5.2-.4.5-.7.8-1 .1-.4.3-.7.6-1 .3-.3.6-.5.9-.6.3-.1.5-.2.8-.3l2.5-.4H25l1.8.3c.1 0 .2 0 .2.1.1.1.3.2.4.2.2.1.4.3.6.5.1.1.2.3.1.4-.1.1-.1.4-.2.4-.2.1-.4.1-.6.1-.1 0-.2 0-.4-.1.5.2.9.4 1.2.8 0 .1.2.1.3.1v.1c-.1.1-.1.1-.1.2h.1c.1-.1.1-.4.3-.3.2.1.2.3.1.4-.1.1-.2.2-.4.3v.2c.1.1.1.2.2.4s.1.5.2.7c.1.5.2.9.2 1.4 0 .2-.1.5 0 .7l.3.6c.1.2.2.3.3.5.2.3.6.6.4 1zm-15.6 5.2c-.1 0-.1.1-.1.1s.1 0 .1-.1zm5.8-1.8c-.1.1 0 0 0 0zm-6.7-.2c0 .1.1 0 .1 0 .2-.1.5 0 .6-.2-.1-.1-.2 0-.2-.1-.1 0-.2 0-.2.1-.1.1-.3.1-.3.2z'/%3E%3Cpath fill='gray' d='M27.9 6.8c.1 0 .3 0 .3.1-.1.2-.4.3-.6.5h-.1c-.1.1-.1.2-.1.2h-.3c.1.1.3.2.5.2l.1.1h.2V8c-.1.1-.2.1-.4.1.2.1.5.1.7 0 .2-.1 0-.4.1-.5-.1 0 0-.1-.1-.1.1-.1.1-.2.2-.2s.1 0 .2-.1c0-.1-.1-.1-.1-.2.2-.1.3-.3.3-.5 0-.1-.3-.1-.4-.2h-.5c-.2 0-.3.1-.5.1l-.6.3c.2-.1.4-.1.7-.2 0 .3.2.3.4.3'/%3E%3C/svg%3E"), linear-gradient(90deg, #000091 0%, #000091 50%, #e1000f 50%, #e1000f 100%), linear-gradient(90deg, #000 0%, #000 100%); } :root[data-fr-mourning] .fr-logo::before { background-size: 2.75rem 1.125rem, 0, 2.75rem 1rem; box-shadow: 0 0 0 1px #fff; } .fr-logo::after { min-width: 2.625rem; background-size: 5.25rem 3.75rem; background-position: 0 calc(100% + 1.875rem); padding-top: 2.2083333333rem; content: ""; display: block; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 180'%3E%3Cdefs%3E%3Csymbol id='a' viewBox='0 0 11 15.5'%3E%3Cpath d='M10.4 5.3C11.9 1.5 10.1 0 7.9 0 4.2 0 0 6.5 0 11.7c0 2.5 1.2 3.8 3 3.8 2.1 0 4.3-2 6.2-5.5h-1c-1.2 1.5-2.6 2.6-3.9 2.6-1.3 0-2-.8-2-2.6a10.7 10.7 0 01.3-2.2zm-4-3.1c1.1 0 2 .8 1.5 2.6L3.1 6.1c.8-2.2 2.2-4 3.4-4z'/%3E%3C/symbol%3E%3Csymbol id='b' viewBox='0 0 12.4 21.8'%3E%3Cuse width='11' height='15.5' y='6.4' href='%23a'/%3E%3Cpath d='M7.9 4.7L12.4.6V0h-3L6.7 4.7H8z'/%3E%3C/symbol%3E%3Csymbol id='c' viewBox='0 0 11.5 19'%3E%3Cpath d='M1.7 5.7h2.6L.1 17.1a1.3 1.3 0 001.2 2c3 0 6.4-2.6 7.8-6.2h-.7a9.4 9.4 0 01-5.1 3.5L7 5.7H11l.5-1.6H7.7L9 0H7.6L4.9 4.1l-3.2.4v1.2z'/%3E%3C/symbol%3E%3Csymbol id='d' viewBox='0 0 9.8 21.9'%3E%3Cpath d='M7.6 8c.3-1-.4-1.6-1-1.6-2.2 0-5 2.1-6 5h.7A5.6 5.6 0 014.4 9L.1 20.3a1.1 1.1 0 001 1.6c2.2 0 4.7-2 5.8-5H6A5.6 5.6 0 013 19.5zM8 3.7a1.8 1.8 0 001.8-1.8A1.8 1.8 0 008 0a1.8 1.8 0 00-1.8 1.8A1.8 1.8 0 008 3.6'/%3E%3C/symbol%3E%3Csymbol id='e' viewBox='0 0 14.8 15.5'%3E%3Cpath d='M3.3 3.1c.7 0 1 1 0 3.4l-3 6.8c-.7 1.3 0 2.2 1.2 2.2a1.3 1.3 0 001.5-1l3-8C7.4 4.8 10 3 11 3s.8.6.3 1.6l-4.6 9a1.3 1.3 0 001.1 1.9c2.3 0 5-2 6-5h-.6A5.6 5.6 0 0110 13l4-8a6.1 6.1 0 00.8-2.8A2 2 0 0012.6 0c-2 0-3.6 2.2-6 5V2.8C6.6 1.4 6.1 0 4.8 0 3.2 0 1.8 2.5.7 4.9h.7c.7-1.1 1.3-1.8 2-1.8'/%3E%3C/symbol%3E%3Csymbol id='f' viewBox='0 0 12 15.5'%3E%3Cpath d='M11.8 3.5c.5-1.9.2-3.5-1.2-3.5-1.8 0-2.3 1.2-4 5V2.8C6.5 1.3 6 0 4.6 0 3.1 0 1.7 2.5.5 5h.8C2 3.7 2.8 3 3.3 3c.7 0 1 1 0 3.4l-3 6.8c-.7 1.3 0 2.1 1.2 2.1a1.3 1.3 0 001.5-1l3-8a50.3 50.3 0 012.6-3h3.2z'/%3E%3C/symbol%3E%3Csymbol id='g' viewBox='0 0 14.7 16.2'%3E%3Cpath d='M10.5 13.1c-.6 0-1-1 0-3.4L14.6.1 13.4 0l-1.3 1.3h-.3C6.1 1.3 0 8.6 0 14.2a2 2 0 002.1 2.1c1.7 0 3.3-2.4 5.2-5l-.1 1c-.3 2.6.6 4 2 4 1.5 0 3-2.4 4-4.9h-.7c-.7 1.1-1.5 1.8-2 1.8zM7.9 9.8c-1.3 1.6-3.4 3.5-4.3 3.5-.5 0-.9-.5-.9-1.6 0-3.5 4-8.2 6-8.2a4.2 4.2 0 011.4.2z'/%3E%3C/symbol%3E%3Csymbol id='h' viewBox='0 0 21.9 19.8'%3E%3Cpath d='M11.2 19.8l.3-.9c-3.8-.7-4.3-.7-2.7-4.8l1.4-3.9h3c1.9 0 1.9.9 1.6 3h1l2.6-6.9h-1c-1 1.6-1.8 2.9-3.8 2.9h-3l2-5.6c.8-2 1.1-2.4 3.7-2.4h.7c2.6 0 3 .7 3 3.5h1l.9-4.7H7.3L7 .9c3 .6 3.3.9 2 4.8L5.7 14c-1.5 3.9-2 4.2-5.5 4.8l-.3.9z'/%3E%3C/symbol%3E%3Csymbol id='i' viewBox='0 0 10.1 21.9'%3E%3Cpath d='M2.9 19.4L10.1.3 9.8 0l-5 .6v.6l1 .7c.9.7.6 1.3-.2 3.4L.2 19.9a1.3 1.3 0 001.1 2c2.3 0 4.7-2.1 5.8-5h-.7a6.5 6.5 0 01-3.5 2.5'/%3E%3C/symbol%3E%3Csymbol id='j' viewBox='0 0 18 22'%3E%3Cpath d='M18 .6h-4.3a3.8 3.8 0 00-2.1-.6A6.6 6.6 0 005 6.5a3.3 3.3 0 003 3.6c-1.9.8-3 1.8-3 2.9a1.7 1.7 0 00.9 1.5c-4.3 1.3-6 2.8-6 4.7 0 2 2.6 2.8 5.6 2.8 5.3 0 9.6-2.7 9.6-5.1 0-1.8-1.6-2.5-4.3-3.3-2.2-.7-3.2-.8-3.2-1.6A2.4 2.4 0 019 10.2a6.6 6.6 0 006.1-6.5 4.5 4.5 0 00-.2-1.5h2.5zM9.8 16.2c2.1.7 3 1 3 1.6 0 1.4-2 2.5-5.6 2.5-2.7 0-4-.6-4-2 0-1.5 1.4-2.5 3.5-3.3a21.5 21.5 0 003 1.2zM9 9c-1 0-1.3-.8-1.3-1.7 0-2.8 1.4-6.2 3.5-6.2 1 0 1.3.8 1.3 1.6 0 2.9-1.4 6.3-3.5 6.3z'/%3E%3C/symbol%3E%3Csymbol id='k' viewBox='0 0 23 25.1'%3E%3Cpath d='M14.3 15.6c1.9 0 2 .8 1.6 2.8H17l2.5-6.8h-1c-1 1.6-1.7 2.9-3.8 2.9h-4.1l2-5.6c.7-2 1-2.4 3.7-2.4H18c2.6 0 3 .7 3 3.5h1l.9-4.7H7.3l-.3.9c3 .6 3.3.9 2 4.8l-3.2 8.4c-1.5 3.9-2 4.2-5.6 4.8l-.2 1h17.4l3.2-5h-1.2c-2 2-4 3.8-8 3.8-4.7 0-4.3-.3-2.7-4.6l1.4-3.8h4.2zm2.3-11.8L21 .6V0h-3l-2.6 3.9h1.2v-.1z'/%3E%3C/symbol%3E%3Csymbol id='l' viewBox='0 0 13.6 21.8'%3E%3Cpath d='M11.4 6.4c-2 0-4 2.2-5.8 4.8L9.6.3 9.4 0l-5 .6V1l1 .8c.9.7.6 1.3-.2 3.4L.8 16.8A13.9 13.9 0 000 19c0 1.4 1.8 2.7 3.5 2.7 3.8 0 10-6.9 10-12.2 0-2.3-.5-3.2-2.1-3.2zM4.8 19.5c-.8 0-1.9-.7-1.9-1.3a15.5 15.5 0 01.8-2.2L5 12.7C6.3 11 8.4 9.3 9.6 9.3c.7 0 1.2.4 1.2 1.5 0 3.1-2.9 8.7-6 8.7z'/%3E%3C/symbol%3E%3Csymbol id='m' viewBox='0 0 19.2 19.9'%3E%3Cpath d='M17.6 0H7.3L7 .9c3 .6 3.3.9 2 4.8l-3.2 8.5c-1.5 3.9-2 4.2-5.5 4.8L0 20h15.7l3.5-6H18c-2 2-4.2 4.8-7.7 4.8-2.7 0-3-.5-1.6-4.5l3.1-8.5c1.4-3.9 2-4.2 5.5-4.8z'/%3E%3C/symbol%3E%3Csymbol id='n' viewBox='0 0 126 90'%3E%3Cuse width='12.4' height='21.8' x='112.7' y='66.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='102.2' y='69' href='%23c'/%3E%3Cuse width='9.8' height='21.9' x='93.6' y='66.1' href='%23d'/%3E%3Cuse width='14.8' height='15.5' x='77.2' y='72.5' href='%23e'/%3E%3Cuse width='12' height='15.5' x='65.7' y='72.5' href='%23f'/%3E%3Cuse width='11' height='15.5' x='54.3' y='72.5' href='%23a'/%3E%3Cuse width='11.5' height='19' x='43.7' y='69' href='%23c'/%3E%3Cuse width='14.7' height='16.2' x='28.9' y='71.8' href='%23g'/%3E%3Cuse width='12' height='15.5' x='19.6' y='72.5' href='%23f'/%3E%3Cuse width='21.9' height='19.8' y='67.6' href='%23h'/%3E%3Cuse width='12.4' height='21.8' x='77.3' y='33.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='66.8' y='36' href='%23c'/%3E%3Cuse width='9.8' height='21.9' x='58.2' y='33' href='%23d'/%3E%3Cuse width='10.1' height='21.9' x='49.4' y='33.1' href='%23i'/%3E%3Cuse width='14.7' height='16.2' x='34.9' y='38.8' href='%23g'/%3E%3Cuse width='18' height='22' x='18.6' y='39.4' href='%23j'/%3E%3Cuse width='23' height='25.1' y='29.3' href='%23k'/%3E%3Cuse width='12.4' height='21.8' x='76.8' y='.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='66.2' y='2.9' href='%23c'/%3E%3Cuse width='12' height='15.5' x='54.8' y='6.5' href='%23f'/%3E%3Cuse width='11' height='15.5' x='43.4' y='6.4' href='%23a'/%3E%3Cuse width='13.6' height='21.8' x='29.4' y='.1' href='%23l'/%3E%3Cuse width='9.8' height='21.9' x='20.6' href='%23d'/%3E%3Cuse width='19.2' height='19.9' y='1.4' href='%23m'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse fill='%23000' width='126' height='90' x='0' y='0' href='%23n'/%3E%3Cuse fill='%23fff' width='126' height='90' x='126' y='90' href='%23n'/%3E%3C/svg%3E"); } [data-fr-theme=dark] .fr-logo::after { background-position: -2.625rem 100%; } .fr-logo--sm { font-size: 0.7875rem; } .fr-logo--sm::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-logo--sm::before { background-size: 2.0625rem 0.84375rem, 0, 2.0625rem 0.75rem; } .fr-logo--sm::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-logo--sm::after { background-position: -1.96875rem 100%; } .fr-logo--lg { font-size: 1.3125rem; } .fr-logo--lg::before { width: 3.4375rem; height: 1.25rem; margin-bottom: 0.4166666667rem; background-size: 3.4375rem 1.40625rem, 3.4375rem 1.25rem, 0; background-position: 0 -0.078125rem, 0 0, 0 0; } :root[data-fr-mourning] .fr-logo--lg::before { background-size: 3.4375rem 1.40625rem, 0, 3.4375rem 1.25rem; } .fr-logo--lg::after { min-width: 3.28125rem; background-size: 6.5625rem 4.6875rem; background-position: 0 calc(100% + 2.34375rem); padding-top: 2.7604166667rem; } [data-fr-theme=dark] .fr-logo--lg::after { background-position: -3.28125rem 100%; } /* ¯¯¯¯¯¯¯¯¯ *\ BUTTON \* ˍˍˍˍˍˍˍˍˍ */ .fr-btn { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); font-weight: 500; font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; background-color: var(--background-action-high-blue-france); --idle: transparent; --hover: var(--background-action-high-blue-france-hover); --active: var(--background-action-high-blue-france-active); color: var(--text-inverted-blue-france); } .fr-btn::before, .fr-btn::after { display: block; } .fr-btn[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--align-on-content { margin-left: -1rem; margin-right: -1rem; } .fr-btn[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--icon-left[class^=fr-icon-], .fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--icon-left[class^=fr-fi-], .fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -0.875rem; margin-right: -1rem; } .fr-btn--icon-right[class^=fr-icon-], .fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--icon-right[class^=fr-fi-], .fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -1rem; margin-right: -0.875rem; } .fr-btn--sm { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; } .fr-btn--sm[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content { margin-left: -0.75rem; margin-right: -0.75rem; } .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--sm.fr-btn--icon-left[class^=fr-icon-], .fr-btn--sm.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--sm.fr-btn--icon-left[class^=fr-fi-], .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm.fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--sm.fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--sm.fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -0.625rem; margin-right: -0.75rem; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-], .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-], .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -0.75rem; margin-right: -0.625rem; } .fr-btn--lg { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; } .fr-btn--lg[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg[target=_blank]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content { margin-left: -1.5rem; margin-right: -1.5rem; } .fr-btn--lg[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--lg[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--lg[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--lg[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--lg[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 2rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--lg.fr-btn--icon-left[class^=fr-icon-], .fr-btn--lg.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--lg.fr-btn--icon-left[class^=fr-fi-], .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg.fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--lg.fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--lg.fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -1.3125rem; margin-right: -1.5rem; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-], .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-], .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -1.5rem; margin-right: -1.3125rem; } .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-left: -0.5rem; margin-right: -0.5rem; /** * 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--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, .fr-btns-group > div { width: 100%; max-width: 100%; } .fr-btns-group .fr-btn { width: calc(100% - 1rem); margin: 0 0.5rem 1rem; justify-content: center; } .fr-btns-group--inline .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .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--between, .fr-btns-group--between li { justify-content: space-between; text-align: center; } .fr-btns-group--equisized { --equisized-width: auto; } .fr-btns-group--equisized .fr-btn { justify-content: center; width: var(--equisized-width); } .fr-btns-group--sm .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; } .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-], .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .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 0.75rem; overflow: hidden; white-space: nowrap; 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-icon-]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .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 { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .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 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::before, .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 { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .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 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::before, .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 { content: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; } .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-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-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 1rem; overflow: hidden; white-space: nowrap; 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-icon-]::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-icon-"]::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, .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: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .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 1rem; overflow: initial; max-width: 100%; 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-icon-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::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, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .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 1rem; overflow: initial; max-width: 100%; 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-icon-]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::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, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { content: none; } .fr-btns-group--lg .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; } .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-], .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .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.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .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 { --icon-size: 2rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .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.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::before, .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 { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .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.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::before, .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 { content: none; } .fr-fieldset__element > .fr-btns-group { margin-bottom: -1rem; } .fr-btn--close { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; display: flex; margin-left: auto; } .fr-btn--close::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); content: ""; } .fr-btn--close::before { content: none; } .fr-btn--tooltip { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--tooltip::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/question-line.svg"); mask-image: url("../icons/system/question-line.svg"); content: ""; } .fr-btn--fullscreen { 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-btn--fullscreen::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/media/fullscreen-line.svg"); mask-image: url("../icons/media/fullscreen-line.svg"); content: ""; } .fr-btn--fullscreen::before { content: none; } .fr-btn--display { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--display::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/fr--theme-fill.svg"); mask-image: url("../icons/system/fr--theme-fill.svg"); content: ""; } .fr-btn--account { 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-btn--account::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/user/account-circle-fill.svg"); mask-image: url("../icons/user/account-circle-fill.svg"); content: ""; } .fr-btn--team { 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-btn--team::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/user/team-line.svg"); mask-image: url("../icons/user/team-line.svg"); content: ""; } .fr-btn--briefcase { 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-btn--briefcase::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/business/briefcase-fill.svg"); mask-image: url("../icons/business/briefcase-fill.svg"); content: ""; } .fr-btn:disabled, a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-btn--secondary { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); } .fr-btn--secondary:disabled, a.fr-btn--secondary: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-btn--tertiary, .fr-btn--account { 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-btn--tertiary:disabled, a.fr-btn--tertiary:not([href]), a.fr-btn--account:not([href]), .fr-btn--account:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip, .fr-btn--briefcase, .fr-btn--team { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-btn--tertiary-no-outline:disabled, a.fr-btn--tertiary-no-outline:not([href]), a.fr-btn--close:not([href]), a.fr-btn--display:not([href]), a.fr-btn--fullscreen:not([href]), a.fr-btn--tooltip:not([href]), a.fr-btn--briefcase:not([href]), a.fr-btn--team:not([href]), .fr-btn--close:disabled, .fr-btn--display:disabled, .fr-btn--fullscreen:disabled, .fr-btn--tooltip:disabled, .fr-btn--briefcase:disabled, .fr-btn--team:disabled { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } /* ¯¯¯¯¯¯¯¯¯ *\ CONNECT \* ˍˍˍˍˍˍˍˍˍ */ .fr-connect { position: relative; padding: 0.625em 0.75em 0.625em 4em; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: 0.75rem; --underline-img: none; --hover-tint: var(--hover); --active-tint: var(--active); --external-link-content: none; background-color: var(--background-action-high-blue-france); --idle: transparent; --hover: var(--background-action-high-blue-france-hover); --active: var(--background-action-high-blue-france-active); color: var(--text-inverted-blue-france); } .fr-connect:hover { background-color: var(--hover-tint); } .fr-connect:active { background-color: var(--active-tint); } .fr-connect::before { content: ""; display: block; position: absolute; top: 50%; bottom: 0.25em; left: 0.75em; width: 2.5em; height: 3em; margin-top: -1.5em; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill='%232a2f82' d='M34.965 15.1 19.971 6.423 4.977 15.184a.606.606 0 0 0-.306.524v16.948a.666.666 0 0 0 .306.524l14.992 8.6 14.994-8.706a.665.665 0 0 0 .306-.524V15.628a.605.605 0 0 0-.304-.528Z'/%3E%3Cpath fill='%23df1f26' d='m14.614 15.6-5.029 8.628-4.557-9.175 5.39-3.113 4.489 3.16ZM35.27 32.58V15.622a.6.6 0 0 0-.306-.523L19.971 6.423'/%3E%3Cpath fill='%232e65b0' d='m4.673 32.58 15.3-26.157v35.362L4.977 33.18a.666.666 0 0 1-.306-.524V15.708Zm24.669-20.735L34.8 15l-4.489 9.15-5.387-9.236Z'/%3E%3Cpath fill='%23fff' d='m39.606 12.305-19.19-11.02a.933.933 0 0 0-.832 0L.394 12.305A.886.886 0 0 0 0 13v22a.886.886 0 0 0 .394.7l19.189 11.02a.933.933 0 0 0 .832 0L39.606 35.7A.886.886 0 0 0 40 35V13a.886.886 0 0 0-.394-.695ZM10.762 30.061h.079c-.042 0-.079.007-.079.05 0 .1.151 0 .2.1a.912.912 0 0 0-.629.276c0 .051.1.051.151.051-.075.1-.226.05-.277.151a.177.177 0 0 0 .1.05c-.05 0-.1 0-.1.051v.151c-.126 0-.176.1-.277.151.2.151.327 0 .528 0-.528.2-.956.478-1.484.629-.1 0 0 .151-.1.151.151.1.227-.05.377-.05-.654.377-1.333.7-2.037 1.132a.351.351 0 0 0-.1.2h-.2c-.1.05-.05.176-.151.277.226.151.5-.2.654 0 .05 0-.1.05-.2.05-.05 0-.05.1-.1.1h-.154c-.1.075-.2.126-.2.276a.219.219 0 0 0-.226.1 9.034 9.034 0 0 0 3.144-.578 7.685 7.685 0 0 0 2.088-1.559.176.176 0 0 1 .05.1 2.168 2.168 0 0 1-.806 1.08c-.277.151-.478.377-.7.478a4.045 4.045 0 0 0-.428.276 10.761 10.761 0 0 1-1.939.412l-.305.044c-.225.033-.449.069-.671.108L4.977 33.18a.648.648 0 0 1-.288-.411.574.574 0 0 0 .094-.063.265.265 0 0 0-.113-.071v-.65a12.786 12.786 0 0 0 3.038-.942A8.746 8.746 0 0 0 4.671 29.7v-1.515a11.662 11.662 0 0 1 1.639.392 6.415 6.415 0 0 1 1.182.578 3.113 3.113 0 0 0 .478.377.91.91 0 0 0 .8.05h.33a3.961 3.961 0 0 0 1.937-.905c0 .05.05.05.1.05a3.63 3.63 0 0 1-.428 1.132c.003.051-.048.152.053.202Zm2.817 3.571c.251-.1.4-.277.629-.377-.05.05-.05.151-.1.2a3.691 3.691 0 0 0-.528.4 15.96 15.96 0 0 0-1.585 1.61c-.252.3-.528.578-.8.855a2.385 2.385 0 0 1-.31.245l-2.527-1.45a4.047 4.047 0 0 0 1.076-.053 4.984 4.984 0 0 0 .855-.327v.1c.7-.277 1.232-.906 1.937-1.132.025 0 .126.1.226.05a1.883 1.883 0 0 1 1.509-.7c0 .05 0 .1.05.1h.025c-.151.126-.327.251-.5.377-.057.052-.007.102.043.102Zm-8.908-6.164v-.186a5.814 5.814 0 0 1 1.588-.188 1.52 1.52 0 0 1 .478 0 5.861 5.861 0 0 0-2.066.374Zm30.6 5.088a.665.665 0 0 1-.306.524l-10.079 5.851a32.3 32.3 0 0 1-3.408-1.185 2.826 2.826 0 0 1-.05-2.245 3.794 3.794 0 0 1 .352-.883c.025-.025.05-.05.05-.076a.025.025 0 0 0 .025-.025 4.316 4.316 0 0 1 .377-.555l.015-.015.02-.021.015-.015c0-.025.025-.05.05-.076.025-.051.075-.076.1-.126a3.771 3.771 0 0 1 .579-.5 4.07 4.07 0 0 1 .654-.177 19.817 19.817 0 0 1 2.415.328.751.751 0 0 1 .277.1 1.849 1.849 0 0 0 .905-.05 1.137 1.137 0 0 0 .855-.706 1.212 1.212 0 0 0 .05-1.059c-.178-.276-.013-.437.181-.59l.068-.055a1.17 1.17 0 0 0 .231-.216c.126-.252-.1-.4-.151-.63-.05-.1-.226-.05-.327-.2.352-.151.855-.429.629-.857-.151-.227-.377-.63-.1-.857.352-.2.855-.151 1.006-.479a1.138 1.138 0 0 0-.292-1.085l-.075-.108a4.754 4.754 0 0 1-.211-.32 6.914 6.914 0 0 0-.528-.757 4.3 4.3 0 0 1-.528-1.009c-.151-.378.05-.706.05-1.084a6.347 6.347 0 0 0-.327-2.144c-.126-.353-.176-.731-.327-1.059a1.12 1.12 0 0 0-.226-.58.375.375 0 0 1 0-.328 4.874 4.874 0 0 0 .579-.479.567.567 0 0 0-.2-.706c-.327-.151-.3.328-.528.429h-.151c-.05-.126.05-.177.151-.277 0-.05 0-.151-.05-.151-.2 0-.377-.051-.428-.151a3.957 3.957 0 0 0-1.861-1.286 2.319 2.319 0 0 0 .579.1 1.67 1.67 0 0 0 1.006-.1c.227-.076.277-.479.377-.706a.8.8 0 0 0-.151-.631 2.189 2.189 0 0 0-.906-.756 9.13 9.13 0 0 1-.679-.353.952.952 0 0 0-.251-.126c-2.965-1.485-9.069-.2-9.534 0h-.009a8.244 8.244 0 0 0-1.249.475 3.922 3.922 0 0 0-2.365 2.465 3.829 3.829 0 0 0-1.333 1.509c-.428.8-1.056 1.509-.956 2.414.1.78.277 1.484.428 2.289a4.668 4.668 0 0 0 .2.8c.1.276 0 .629.151.855.075.151.025.327.227.428v.2c.05.05.05.1.151.1v.2a6.446 6.446 0 0 1 1.107 1.434c.1.276-.478.151-.7.05a5.979 5.979 0 0 1-1.132-.956.175.175 0 0 0-.051.1c.2.352.906.78.528 1.006-.2.1-.428-.151-.629.051-.05.075 0 .176 0 .276-.277-.2-.578-.1-.855-.2-.2-.05-.252-.427-.478-.427a15.162 15.162 0 0 0-1.811-.327 15.137 15.137 0 0 0-1.739-.159V15.708a.606.606 0 0 1 .306-.524l14.987-8.761L34.965 15.1a.605.605 0 0 1 .306.524Zm-7.954-8.261a.325.325 0 0 1-.282.149 2.843 2.843 0 0 0-.282.273c.1 0 0 .149.1.149-.205.223.077.694-.205.793a2.176 2.176 0 0 1-1.127 0 .722.722 0 0 1 .167-.016h.085a.382.382 0 0 0 .337-.132v-.2c0-.05-.051-.05-.1-.05a.161.161 0 0 1-.1.05.223.223 0 0 0-.154-.2.807.807 0 0 1-.718-.273.67.67 0 0 1 .436-.05c.128 0 .077-.223.231-.322h.154c.307-.372.871-.471.974-.843 0-.1-.282-.1-.487-.149a2.259 2.259 0 0 0-.82.05 4.65 4.65 0 0 0-1.051.273 3.225 3.225 0 0 1 .923-.471 3.886 3.886 0 0 1 .718-.2l.132-.026.133-.027a.971.971 0 0 1 .556 0c.231.1.615.1.666.248.1.273-.154.545-.435.744-.057.081.148.135.148.23Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 2.5em 3em; } .fr-connect__login, .fr-connect__brand { line-height: 1; z-index: 1; white-space: nowrap; } .fr-connect__login { font-size: 1.0625em; } .fr-connect__brand { font-weight: bold; font-size: 1.125em; } .fr-connect--plus { padding-right: 3em; } .fr-connect--plus::after { content: "+"; display: block; position: absolute; right: 0.25em; bottom: 0; font-size: 3em; font-weight: bold; line-height: 1; transform: translate(5%, -17%); } .fr-connect-group { --text-spacing: 0 0 1rem 0; } .fr-connect-group p { font-size: 0.75rem; line-height: 1.25rem; color: var(--text-mention-grey); } .fr-connect-group .fr-connect + p a { font-size: 0.875rem; line-height: 1.5rem; color: var(--text-action-high-blue-france); } .fr-connect:disabled, a.fr-connect:not([href]) { background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); color: var(--text-disabled-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ QUOTE \* ˍˍˍˍˍˍˍˍˍ */ .fr-quote { position: relative; margin: 0; padding: 0 0.5rem 2rem 0.5rem; background-size: 50% 1px; background-repeat: no-repeat; background-position: 0.5rem 100%; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-quote::before, .fr-quote::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/editor/fr--quote-line.svg"); mask-image: url("../icons/editor/fr--quote-line.svg"); --icon-size: 2rem; } .fr-quote::before { content: ""; display: block; margin-bottom: 0.5rem; color: var(--artwork-minor-blue-france); } .fr-quote--column { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .fr-quote--column .fr-quote__author { margin-left: 5.25rem; } .fr-quote--column .fr-quote__source { margin-left: 5.25rem; } .fr-quote--column figcaption { min-height: 4.25rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .fr-quote blockquote { margin: 0; --text-spacing: 0 0 1rem; } .fr-quote blockquote p { font-size: 1.25rem; line-height: 2rem; font-weight: 700; } .fr-quote__author { font-weight: 700; font-size: 1rem; line-height: 1.5rem; --text-spacing: 0 0 0.25rem; } .fr-quote__image { width: 4.25rem; background-size: cover; border-radius: 50%; overflow: hidden; position: absolute; display: flex; flex-direction: row; } .fr-quote__image img { width: 100%; height: 100%; } .fr-quote cite { font-style: italic; } .fr-quote figcaption { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; } .fr-quote figcaption .fr-quote__source { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.25rem; } .fr-quote figcaption .fr-quote__source li { display: inline-block; } .fr-quote figcaption .fr-quote__source li:not(:last-child)::after { content: "·"; display: inline-block; padding-left: 0.25rem; padding-right: 0.25rem; } .fr-quote--green-tilleul-verveine::before { color: var(--artwork-minor-green-tilleul-verveine); } .fr-quote--green-bourgeon::before { color: var(--artwork-minor-green-bourgeon); } .fr-quote--green-emeraude::before { color: var(--artwork-minor-green-emeraude); } .fr-quote--green-menthe::before { color: var(--artwork-minor-green-menthe); } .fr-quote--green-archipel::before { color: var(--artwork-minor-green-archipel); } .fr-quote--blue-ecume::before { color: var(--artwork-minor-blue-ecume); } .fr-quote--blue-cumulus::before { color: var(--artwork-minor-blue-cumulus); } .fr-quote--purple-glycine::before { color: var(--artwork-minor-purple-glycine); } .fr-quote--pink-macaron::before { color: var(--artwork-minor-pink-macaron); } .fr-quote--pink-tuile::before { color: var(--artwork-minor-pink-tuile); } .fr-quote--yellow-tournesol::before { color: var(--artwork-minor-yellow-tournesol); } .fr-quote--yellow-moutarde::before { color: var(--artwork-minor-yellow-moutarde); } .fr-quote--orange-terre-battue::before { color: var(--artwork-minor-orange-terre-battue); } .fr-quote--brown-cafe-creme::before { color: var(--artwork-minor-brown-cafe-creme); } .fr-quote--brown-caramel::before { color: var(--artwork-minor-brown-caramel); } .fr-quote--brown-opera::before { color: var(--artwork-minor-brown-opera); } .fr-quote--beige-gris-galet::before { color: var(--artwork-minor-beige-gris-galet); } .fr-quote__source { color: var(--text-mention-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ 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; --text-spacing: 0 0 0.5rem; position: relative; color: var(--text-mention-grey); } .fr-breadcrumb__button { background-image: var(--underline-img), var(--underline-img); background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness)); background-repeat: no-repeat, no-repeat; transition: background-size 0s; background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness); font-size: 0.75rem; line-height: 1.25rem; margin: 0; padding: 0; --hover-tint: var(--idle); --active-tint: var(--idle); color: inherit; } .fr-breadcrumb__button:hover, .fr-breadcrumb__button:active { --underline-hover-width: var(--underline-max-width); } .fr-breadcrumb__button[aria-expanded=true] { display: none; } .fr-breadcrumb .fr-collapse { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; transform: translateY(-4px); } .fr-breadcrumb__list { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; transform: translateY(4px); } .fr-breadcrumb__list li { display: inline; line-height: 1.75rem; /** * flèche séparatrice en font-icon */ } .fr-breadcrumb__list li:not(:first-child)::before { 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-right-s-line.svg"); mask-image: url("../icons/system/arrow-right-s-line.svg"); --icon-size: 1rem; content: ""; margin-left: 0.25rem; margin-right: 0.25rem; vertical-align: -0.0625em; } .fr-breadcrumb__link { vertical-align: top; position: relative; background-image: var(--underline-img), var(--underline-img); background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness)); background-repeat: no-repeat, no-repeat; transition: background-size 0s; background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness); --hover-tint: var(--idle); --active-tint: var(--idle); font-size: 0.75rem; line-height: 1.25rem; padding: 0; } .fr-breadcrumb__link:hover, .fr-breadcrumb__link:active { --underline-hover-width: var(--underline-max-width); } .fr-breadcrumb__link[aria-current]:not([aria-current=false]) { pointer-events: none; cursor: default; --underline-img: none; color: var(--text-default-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ FORM \* ˍˍˍˍˍˍˍˍˍ */ .fr-label { display: block; font-size: 1rem; line-height: 1.5rem; color: var(--text-label-grey); } .fr-label + .fr-input, .fr-label + .fr-input-wrap, .fr-label + .fr-select { margin-top: 0.5rem; } .fr-hint-text { display: block; font-size: 0.75rem; line-height: 1.25rem; --text-spacing: 0 0 1rem; } .fr-hint-text + .fr-hint-text { margin-top: 0.25rem; } .fr-fieldset { position: relative; margin: 0 -0.75rem 1rem; padding: 0 0.25rem; display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; border: 0; } .fr-fieldset__legend { padding-bottom: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.25rem; margin-right: -0.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; width: 100%; color: var(--text-label-grey); } .fr-fieldset__legend--regular { font-weight: 400; } .fr-fieldset__legend .fr-hint-text { margin-top: 0.5rem; font-weight: 400; } .fr-fieldset--valid, .fr-fieldset--error, .fr-fieldset--info { background-repeat: no-repeat; background-position: 0 -2.25rem; background-size: 2px calc(100% + 1.25rem); } .fr-fieldset--valid .fr-fieldset__legend, .fr-fieldset--error .fr-fieldset__legend, .fr-fieldset--info .fr-fieldset__legend { background-repeat: no-repeat; background-position: 0 0; background-size: 2px 100%; } .fr-fieldset__element { flex: 1 1 100%; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 1rem; } .fr-fieldset__element--inline { flex: 0 0 auto; } .fr-fieldset__element--inline-grow, .fr-fieldset__element--inline\@md.fr-fieldset__element--inline-grow { flex-grow: 1; } .fr-fieldset__element--year { flex: 0 0 8rem; } .fr-fieldset__element--year:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 8rem); } .fr-fieldset__element--postal { flex: 0 0 16rem; } .fr-fieldset__element--postal:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 16rem); } .fr-fieldset__element--number { flex: 0 0 6rem; } .fr-fieldset__element--number:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 6rem); } .fr-fieldset__legend > h1:last-child::after, .fr-fieldset__legend > h2:last-child::after, .fr-fieldset__legend > h3:last-child::after, .fr-fieldset__legend > h4:last-child::after, .fr-fieldset__legend > h5:last-child::after, .fr-fieldset__legend > h6:last-child::after, .fr-fieldset__legend > p:last-child::after, .fr-fieldset__legend > .fr-fieldset:last-child::after, .fr-fieldset__element > h1:last-child::after, .fr-fieldset__element > h2:last-child::after, .fr-fieldset__element > h3:last-child::after, .fr-fieldset__element > h4:last-child::after, .fr-fieldset__element > h5:last-child::after, .fr-fieldset__element > h6:last-child::after, .fr-fieldset__element > p:last-child::after, .fr-fieldset__element > .fr-fieldset:last-child::after { content: ""; display: block; margin-bottom: -1rem; } .fr-fieldset > .fr-messages-group { flex: 1 1 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-fieldset > .fr-messages-group > .fr-message:last-child { margin-bottom: 1rem; } .fr-message { --comma: ", "; --content: var(--comma); display: flex; flex-direction: row; align-items: flex-start; font-size: 0.75rem; line-height: 1.25rem; margin: 0 0 0.25rem 0; } .fr-message::after { content: var(--content); 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; display: block; } .fr-message:last-child { --comma: ". "; margin-bottom: 0; } .fr-message--error::before, .fr-message--valid::before, .fr-message--info::before { flex: 0 0 auto; 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%; --icon-size: 1rem; content: ""; display: inline-block; margin-right: 0.25rem; margin-top: 0.125rem; } .fr-message--error::before { -webkit-mask-image: url("../icons/system/fr--error-fill.svg"); mask-image: url("../icons/system/fr--error-fill.svg"); } .fr-message--valid::before { -webkit-mask-image: url("../icons/system/fr--success-fill.svg"); mask-image: url("../icons/system/fr--success-fill.svg"); } .fr-message--info::before { -webkit-mask-image: url("../icons/system/fr--info-fill.svg"); mask-image: url("../icons/system/fr--info-fill.svg"); } .fr-select-group--valid label, .fr-input-group--valid label, .fr-range-group--valid label, .fr-upload-group--valid label { color: var(--text-default-success); } .fr-select-group--error label, .fr-input-group--error label, .fr-range-group--error label, .fr-upload-group--error label { color: var(--text-default-error); } .fr-select-group--info label, .fr-input-group--info label, .fr-range-group--info label, .fr-upload-group--info label { color: var(--text-default-info); } .fr-select-group--disabled label, .fr-select-group--disabled .fr-hint-text, .fr-input-group--disabled label, .fr-input-group--disabled .fr-hint-text, .fr-range-group--disabled label, .fr-range-group--disabled .fr-hint-text, .fr-upload-group--disabled label, .fr-upload-group--disabled .fr-hint-text { color: var(--text-disabled-grey); } .fr-label--error { color: var(--text-default-error); } .fr-label--success { color: var(--text-default-success); } .fr-label--info { color: var(--text-default-info); } .fr-label--disabled, .fr-label--disabled .fr-hint-text { color: var(--text-disabled-grey); } .fr-hint-text, .fr-message { color: var(--text-mention-grey); } .fr-message--error { color: var(--text-default-error); } .fr-message--valid { color: var(--text-default-success); } .fr-message--info { color: var(--text-default-info); } .fr-fieldset:disabled .fr-label, .fr-fieldset:disabled .fr-hint-text, .fr-fieldset:disabled .fr-fieldset__legend { color: var(--text-disabled-grey); } .fr-fieldset input:disabled + label, .fr-fieldset input:disabled + label .fr-hint-text, .fr-fieldset input:disabled + label + .fr-hint-text { color: var(--text-disabled-grey); } .fr-fieldset--error, .fr-fieldset--error .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-fieldset--error .fr-fieldset__legend, .fr-fieldset--error .fr-label { color: var(--text-default-error); } .fr-fieldset--valid, .fr-fieldset--valid .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-fieldset--valid .fr-fieldset__legend, .fr-fieldset--valid .fr-label { color: var(--text-default-success); } .fr-fieldset--info, .fr-fieldset--info .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } .fr-fieldset--info .fr-fieldset__legend, .fr-fieldset--info .fr-label { color: var(--text-default-info); } .fr-select-group:not(:last-child), .fr-input-group:not(:last-child) { margin-bottom: 1.5rem; } .fr-select-group .fr-label .fr-hint-text, .fr-input-group .fr-label .fr-hint-text { margin-top: 0.25rem; } .fr-fieldset--inline .fr-fieldset__content { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; margin: -0.75rem 0.5rem 0 0.5rem; } .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) { margin-right: 1.75rem; } .fr-fieldset--inline .fr-radio-group:first-child { margin-top: 0; } .fr-fieldset--inline .fr-radio-group:last-child { margin-bottom: 0; } .fr-fieldset__content { position: relative; margin: 0 0.5rem; width: 100%; } .fr-fieldset__content .fr-radio-group:first-child, .fr-fieldset__content .fr-checkbox-group:first-child { margin-top: -0.75rem; } .fr-fieldset__content .fr-radio-group label, .fr-fieldset__content .fr-checkbox-group label { padding: 0.75rem 0; } .fr-fieldset__content .fr-radio-group:not(.fr-radio-rich) input[type=radio] + label::before, .fr-fieldset__content .fr-checkbox-group input[type=checkbox] + label::before { top: 0.75rem; } .fr-fieldset__content + .fr-error-text, .fr-fieldset__content + .fr-valid-text, .fr-fieldset__content + .fr-info-text { margin-top: 0; margin-left: 0.5rem; margin-bottom: 1rem; } .fr-error-text, .fr-valid-text, .fr-info-text { display: flex; flex-direction: row; align-items: center; font-size: 0.75rem; line-height: 1.25rem; margin-top: 1rem; margin-bottom: 0; } .fr-error-text::before, .fr-valid-text::before, .fr-info-text::before { flex: 0 0 auto; 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%; --icon-size: 1rem; content: ""; display: inline-block; margin-right: 0.25rem; } .fr-error-text + .fr-error-text, .fr-error-text + .fr-valid-text, .fr-error-text + .fr-info-text, .fr-valid-text + .fr-error-text, .fr-valid-text + .fr-valid-text, .fr-valid-text + .fr-info-text, .fr-info-text + .fr-error-text, .fr-info-text + .fr-valid-text, .fr-info-text + .fr-info-text { margin-top: 0.25rem; } .fr-error-text::before { -webkit-mask-image: url("../icons/system/fr--error-fill.svg"); mask-image: url("../icons/system/fr--error-fill.svg"); } .fr-valid-text::before { -webkit-mask-image: url("../icons/system/fr--success-fill.svg"); mask-image: url("../icons/system/fr--success-fill.svg"); } .fr-info-text::before { -webkit-mask-image: url("../icons/system/fr--info-fill.svg"); mask-image: url("../icons/system/fr--info-fill.svg"); } .fr-error-text { color: var(--text-default-error); } .fr-valid-text { color: var(--text-default-success); } .fr-info-text { color: var(--text-default-info); } .fr-fieldset--valid .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-error); } .fr-fieldset--info .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-info); } /* ¯¯¯¯¯¯¯¯¯ *\ STEPPER \* ˍˍˍˍˍˍˍˍˍ */ .fr-stepper { --title-spacing: 0; --text-spacing: 0; margin-bottom: 2rem; display: flex; flex-direction: column; } .fr-stepper__title { display: flex; flex-direction: column-reverse; font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; --title-spacing: 0 0 0.75rem 0; --text-spacing: 0 0 0.75rem 0; color: var(--text-title-grey); } .fr-stepper__state { font-size: 0.875rem; line-height: 1.5rem; --title-spacing: 0 0 0.25rem 0; --text-spacing: 0 0 0.25rem 0; font-weight: 400; color: var(--text-mention-grey); } .fr-stepper__state::after { content: "\a"; white-space: pre; line-height: 2rem; } .fr-stepper__details { font-size: 0.75rem; line-height: 1.25rem; margin-top: 0.75rem; color: var(--text-mention-grey); } .fr-stepper .fr-stepper__steps[data-fr-steps="2"][data-fr-current-step="2"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="3"][data-fr-current-step="3"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="4"][data-fr-current-step="4"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="5"][data-fr-current-step="5"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="6"][data-fr-current-step="6"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="7"][data-fr-current-step="7"] + .fr-stepper__details, .fr-stepper .fr-stepper__steps[data-fr-steps="8"][data-fr-current-step="8"] + .fr-stepper__details { display: none; } .fr-stepper__steps { --stepper-size: 0.5rem; --default-outer: calc((100% + var(--stepper-size)) / var(--steps)); --default-inner: calc(var(--default-outer) - var(--stepper-size)); --active-outer: calc((100% + var(--stepper-size)) / var(--current-step)); --active-inner: calc(var(--active-outer) - var(--stepper-size)); width: 100%; height: var(--stepper-size); background-repeat: no-repeat; background-size: calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%, 100% 100%; background-position: 0 0, 0 0; --current-step: 0; background-image: repeating-linear-gradient(to right, var(--background-active-blue-france) 0, var(--background-active-blue-france) var(--active-inner), transparent var(--active-inner), transparent var(--active-outer)), repeating-linear-gradient(to right, var(--background-contrast-grey) 0, var(--background-contrast-grey) var(--default-inner), transparent var(--default-inner), transparent var(--default-outer)); } .fr-stepper__steps[data-fr-steps="2"] { --steps: 2; --step-width: calc(100% / 2); } .fr-stepper__steps[data-fr-steps="3"] { --steps: 3; --step-width: calc(100% / 3); } .fr-stepper__steps[data-fr-steps="4"] { --steps: 4; --step-width: calc(100% / 4); } .fr-stepper__steps[data-fr-steps="5"] { --steps: 5; --step-width: calc(100% / 5); } .fr-stepper__steps[data-fr-steps="6"] { --steps: 6; --step-width: calc(100% / 6); } .fr-stepper__steps[data-fr-steps="7"] { --steps: 7; --step-width: calc(100% / 7); } .fr-stepper__steps[data-fr-steps="8"] { --steps: 8; --step-width: calc(100% / 8); } .fr-stepper__steps[data-fr-current-step="1"] { --current-step: 1; } .fr-stepper__steps[data-fr-current-step="2"] { --current-step: 2; } .fr-stepper__steps[data-fr-current-step="3"] { --current-step: 3; } .fr-stepper__steps[data-fr-current-step="4"] { --current-step: 4; } .fr-stepper__steps[data-fr-current-step="5"] { --current-step: 5; } .fr-stepper__steps[data-fr-current-step="6"] { --current-step: 6; } .fr-stepper__steps[data-fr-current-step="7"] { --current-step: 7; } .fr-stepper__steps[data-fr-current-step="8"] { --current-step: 8; } /* ¯¯¯¯¯¯¯¯¯ *\ TOOLTIP \* ˍˍˍˍˍˍˍˍˍ */ .fr-tooltip { --arrow-x: 0; display: block; max-width: min(24rem, calc((100vw - 2rem) * 2 / 3)); padding: 0.5rem 0.5rem 1.25rem; font-size: 0.75rem; line-height: 1.25rem; opacity: 1; visibility: visible; transition: opacity 0s 0.15s, visibility 0s 0.15s; text-align: left; background-repeat: no-repeat; background-position: calc(50% + var(--arrow-x)) calc(100% - 0.5rem), calc(50% + var(--arrow-x)) calc(100% - 0.375rem), 50% calc(100% - 0.75rem), 50% calc(100% - 0.75rem); background-size: 0.5rem 0.375rem, 0.5rem 0.375rem, 100% 1px, 100% calc(100% - 0.75rem); color: var(--text-default-grey); } .fr-tooltip:not(.fr-tooltip--shown) { display: none; opacity: 0; } .fr-tooltip.fr-placement--bottom { padding-top: 1.25rem; padding-bottom: 0.5rem; background-position-y: 0.5rem, 0.375rem, 0.75rem, 0.75rem; } .fr-tooltip.fr-placement { z-index: calc(var(--ground) + 1000); filter: drop-shadow(var(--overlap-shadow)); background-image: linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey)); } @supports (background: conic-gradient(white, black)) { .fr-tooltip.fr-placement--top { background-image: conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey)); } .fr-tooltip.fr-placement--bottom { background-image: conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey)); } } /* ¯¯¯¯¯¯¯¯¯ *\ LINK \* ˍˍˍˍˍˍˍˍˍ */ .fr-link { --text-spacing: 0; --title-spacing: 0; display: inline; font-size: 1rem; line-height: 1.5rem; padding: 0 0; color: var(--text-action-high-blue-france); } .fr-link[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-link[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-link--icon-left[class^=fr-icon-], .fr-link--icon-left[class*=" fr-icon-"], .fr-link--icon-left[class^=fr-fi-], .fr-link--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--icon-left[class^=fr-icon-]::before, .fr-link--icon-left[class*=" fr-icon-"]::before, .fr-link--icon-left[class^=fr-fi-]::before, .fr-link--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-link--icon-right[class^=fr-icon-], .fr-link--icon-right[class*=" fr-icon-"], .fr-link--icon-right[class^=fr-fi-], .fr-link--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--icon-right[class^=fr-icon-]::after, .fr-link--icon-right[class*=" fr-icon-"]::after, .fr-link--icon-right[class^=fr-fi-]::after, .fr-link--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-link--icon-right[class^=fr-icon-]::before, .fr-link--icon-right[class*=" fr-icon-"]::before, .fr-link--icon-right[class^=fr-fi-]::before, .fr-link--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-link[class^=fr-icon-]:not([class*=fr-link--icon-])::before, .fr-link[class*=" fr-icon-"]:not([class*=fr-link--icon-])::before, .fr-link[class^=fr-fi-]:not([class*=fr-link--icon-])::before, .fr-link[class*=" fr-fi-"]:not([class*=fr-link--icon-])::before { content: none; } .fr-link--xs { font-size: 0.75rem; line-height: 1.25rem; padding: 0 0; } .fr-link--xs[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--xs[target=_blank]::after { content: ""; --icon-size: 0.75rem; margin-right: -0.09375rem; margin-left: 0.5rem; } .fr-link--xs.fr-link--icon-left[class^=fr-icon-], .fr-link--xs.fr-link--icon-left[class*=" fr-icon-"], .fr-link--xs.fr-link--icon-left[class^=fr-fi-], .fr-link--xs.fr-link--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--xs.fr-link--icon-left[class^=fr-icon-]::before, .fr-link--xs.fr-link--icon-left[class*=" fr-icon-"]::before, .fr-link--xs.fr-link--icon-left[class^=fr-fi-]::before, .fr-link--xs.fr-link--icon-left[class*=" fr-fi-"]::before { --icon-size: 0.75rem; margin-left: -0.09375rem; margin-right: 0.5rem; } .fr-link--xs.fr-link--icon-right[class^=fr-icon-], .fr-link--xs.fr-link--icon-right[class*=" fr-icon-"], .fr-link--xs.fr-link--icon-right[class^=fr-fi-], .fr-link--xs.fr-link--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--xs.fr-link--icon-right[class^=fr-icon-]::after, .fr-link--xs.fr-link--icon-right[class*=" fr-icon-"]::after, .fr-link--xs.fr-link--icon-right[class^=fr-fi-]::after, .fr-link--xs.fr-link--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 0.75rem; margin-right: -0.09375rem; margin-left: 0.5rem; } .fr-link--xs.fr-link--icon-right[class^=fr-icon-]::before, .fr-link--xs.fr-link--icon-right[class*=" fr-icon-"]::before, .fr-link--xs.fr-link--icon-right[class^=fr-fi-]::before, .fr-link--xs.fr-link--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-link--xs[class^=fr-icon-]:not([class*=fr-link--icon-])::before, .fr-link--xs[class*=" fr-icon-"]:not([class*=fr-link--icon-])::before, .fr-link--xs[class^=fr-fi-]:not([class*=fr-link--icon-])::before, .fr-link--xs[class*=" fr-fi-"]:not([class*=fr-link--icon-])::before { content: none; } .fr-link--sm { font-size: 0.875rem; line-height: 1.5rem; padding: 0 0; } .fr-link--sm[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--sm[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-link--sm.fr-link--icon-left[class^=fr-icon-], .fr-link--sm.fr-link--icon-left[class*=" fr-icon-"], .fr-link--sm.fr-link--icon-left[class^=fr-fi-], .fr-link--sm.fr-link--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--sm.fr-link--icon-left[class^=fr-icon-]::before, .fr-link--sm.fr-link--icon-left[class*=" fr-icon-"]::before, .fr-link--sm.fr-link--icon-left[class^=fr-fi-]::before, .fr-link--sm.fr-link--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-link--sm.fr-link--icon-right[class^=fr-icon-], .fr-link--sm.fr-link--icon-right[class*=" fr-icon-"], .fr-link--sm.fr-link--icon-right[class^=fr-fi-], .fr-link--sm.fr-link--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--sm.fr-link--icon-right[class^=fr-icon-]::after, .fr-link--sm.fr-link--icon-right[class*=" fr-icon-"]::after, .fr-link--sm.fr-link--icon-right[class^=fr-fi-]::after, .fr-link--sm.fr-link--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-link--sm.fr-link--icon-right[class^=fr-icon-]::before, .fr-link--sm.fr-link--icon-right[class*=" fr-icon-"]::before, .fr-link--sm.fr-link--icon-right[class^=fr-fi-]::before, .fr-link--sm.fr-link--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-link--sm[class^=fr-icon-]:not([class*=fr-link--icon-])::before, .fr-link--sm[class*=" fr-icon-"]:not([class*=fr-link--icon-])::before, .fr-link--sm[class^=fr-fi-]:not([class*=fr-link--icon-])::before, .fr-link--sm[class*=" fr-fi-"]:not([class*=fr-link--icon-])::before { content: none; } .fr-link--lg { font-size: 1.125rem; line-height: 1.75rem; padding: 0 0; } .fr-link--lg[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--lg[target=_blank]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-link--lg.fr-link--icon-left[class^=fr-icon-], .fr-link--lg.fr-link--icon-left[class*=" fr-icon-"], .fr-link--lg.fr-link--icon-left[class^=fr-fi-], .fr-link--lg.fr-link--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--lg.fr-link--icon-left[class^=fr-icon-]::before, .fr-link--lg.fr-link--icon-left[class*=" fr-icon-"]::before, .fr-link--lg.fr-link--icon-left[class^=fr-fi-]::before, .fr-link--lg.fr-link--icon-left[class*=" fr-fi-"]::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-link--lg.fr-link--icon-right[class^=fr-icon-], .fr-link--lg.fr-link--icon-right[class*=" fr-icon-"], .fr-link--lg.fr-link--icon-right[class^=fr-fi-], .fr-link--lg.fr-link--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-link--lg.fr-link--icon-right[class^=fr-icon-]::after, .fr-link--lg.fr-link--icon-right[class*=" fr-icon-"]::after, .fr-link--lg.fr-link--icon-right[class^=fr-fi-]::after, .fr-link--lg.fr-link--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-link--lg.fr-link--icon-right[class^=fr-icon-]::before, .fr-link--lg.fr-link--icon-right[class*=" fr-icon-"]::before, .fr-link--lg.fr-link--icon-right[class^=fr-fi-]::before, .fr-link--lg.fr-link--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-link--lg[class^=fr-icon-]:not([class*=fr-link--icon-])::before, .fr-link--lg[class*=" fr-icon-"]:not([class*=fr-link--icon-])::before, .fr-link--lg[class^=fr-fi-]:not([class*=fr-link--icon-])::before, .fr-link--lg[class*=" fr-fi-"]:not([class*=fr-link--icon-])::before { content: none; } .fr-links-group--download .fr-link, .fr-link--download { position: relative; font-size: 1rem; line-height: 1.5rem; padding: 0 0; overflow: initial; max-width: 100%; max-height: none; } .fr-links-group--download .fr-link::after, .fr-link--download::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/download-line.svg"); mask-image: url("../icons/system/download-line.svg"); content: ""; margin-bottom: 1.75rem; vertical-align: calc((0.75rem - var(--icon-size)) * 0.5 - 1.75rem); } .fr-links-group--download .fr-link::before, .fr-link--download::before { content: none; } .fr-links-group--download .fr-link .fr-link__detail, .fr-link--download .fr-link__detail { position: absolute; left: 0; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; margin-top: 1.75rem; white-space: nowrap; pointer-events: none; cursor: text; } .fr-links-group--download .fr-link .fr-link__detail abbr, .fr-link--download .fr-link__detail abbr { text-decoration: none; } .fr-links-group--download { --ul-type: disc; --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, ".") ".  "; } .fr-links-group--download > li { display: block; } .fr-links-group--download .fr-link, .fr-links-group .fr-link--download { margin-bottom: 2.5rem; } .fr-links-group { --li-bottom: 0.5rem; } .fr-links-group--inline { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: inline; margin: 0 -0.5rem; } .fr-links-group--inline > li { display: inline; line-height: 2.75rem; } .fr-links-group--inline .fr-link { margin: 0 0.5rem 1rem; } .fr-links-group--sm .fr-link { font-size: 0.875rem; line-height: 1.5rem; padding: 0 0; } .fr-links-group--sm .fr-link::before, .fr-links-group--sm .fr-link::after { --icon-size: 1rem; } .fr-links-group--sm .fr-link:not(.fr-link--download) { vertical-align: top; } .fr-links-group--lg .fr-link { font-size: 1.125rem; line-height: 1.75rem; padding: 0 0; } .fr-links-group--lg .fr-link::before, .fr-links-group--lg .fr-link::after { --icon-size: 1.5rem; } .fr-links-group__title { font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; margin: var(--title-spacing); } .fr-links-group--bordered { padding: 1.5rem 1.5rem 0.5rem; box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-link--close { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; display: flex; margin-left: auto; margin-right: -1rem; background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-link--close::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); content: ""; } .fr-link--close::before { content: none; } .fr-link.fr-link--icon-left.fr-fi-theme-fill { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-link.fr-link--icon-left.fr-fi-theme-fill::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-link__detail { color: var(--text-mention-grey); } .fr-links-group li::marker { color: var(--text-action-high-blue-france); } .fr-link--close:disabled, a.fr-link--close:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } /* ¯¯¯¯¯¯¯¯¯ *\ SIDEMENU \* ˍˍˍˍˍˍˍˍˍ */ .fr-sidemenu { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; --underline-img: none; --text-spacing: 0; --title-spacing: 0; position: relative; margin-left: -1rem; margin-right: -1rem; /** * Titre facultatif */ /** * Variantes du sidemenu proposées juste à partir du breakpoint md */ box-shadow: inset 0 -1px 0 0 var(--border-default-grey), inset 0 1px 0 0 var(--border-default-grey); /* @include elevation.elevate(raised, (legacy:$legacy)); @include respond-from(md) { @include elevation.drop((legacy:$legacy)); } */ } .fr-sidemenu a:not([href]) { cursor: default; } .fr-sidemenu .fr-collapse { margin: -0.25rem -0.25rem 0; padding: 0.25rem 0.25rem 0; } .fr-sidemenu .fr-collapse.fr-collapsing { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .fr-sidemenu__title { padding: 1rem 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--text-title-grey); box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__list { font-weight: 700; } .fr-sidemenu__list .fr-sidemenu__list { margin: 0 1rem 1rem; font-weight: 400; } .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__link, .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__btn { font-size: 1rem; line-height: 1.5rem; font-weight: 400; } .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__link, .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__btn { font-size: 0.875rem; line-height: 1.5rem; } .fr-sidemenu__item { position: relative; } .fr-sidemenu__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-sidemenu__item .fr-sidemenu__item .fr-sidemenu__item::before { content: none; } .fr-sidemenu__inner { /** * Ce wrapper ne sert que pour la version mobile * On l'utilise pour l'ouverture/fermeture du sidemenu entier */ } .fr-sidemenu__inner > .fr-collapse { margin: -0.25rem 0.75rem 0; padding: 0.25rem 0.75rem 0; } /** * Styles du bouton et du lien d'accès direct du sidemnu */ .fr-sidemenu__link, .fr-sidemenu__btn { position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; text-align: left; font-weight: 700; --hover-tint: var(--hover); --active-tint: var(--active); color: var(--text-action-high-blue-france); } .fr-sidemenu__link[aria-current]:not([aria-current=false])::before, .fr-sidemenu__btn[aria-current]:not([aria-current=false])::before { content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 0; width: 2px; background-color: var(--border-active-blue-france); --idle: transparent; --hover: var(--border-active-blue-france-hover); --active: var(--border-active-blue-france-active); } .fr-sidemenu__link:not([href])[aria-current]:not([aria-current=false]) { pointer-events: none; cursor: default; } /** * Style du bouton du sidemnenu pour ouvrir/refermer les listes de niveaux 1 et 2 * Bouton pour la version mobile pour ouvrir/refermer le sidemenu */ .fr-sidemenu__btn[aria-expanded] { display: flex; flex-direction: row; align-items: center; } .fr-sidemenu__btn[aria-expanded]::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: auto; margin-right: 0; transition: transform 0.3s; } .fr-sidemenu__btn[aria-expanded=true]::after { transform: rotate(-180deg); } /** * Modificateur pour le bouton en version mobile permettant d'ouvrir/refermer le sidemenu * L'icône de gauche est défini dans _sidemenu.scss (provisoire) */ .fr-sidemenu__inner > .fr-sidemenu__btn { width: 100%; font-weight: 500; /** * Ajout de l'icône de menu en mode mobile (provisoire) */ } .fr-sidemenu__inner > .fr-sidemenu__btn::after { margin-right: 1rem; } .fr-sidemenu__inner > .fr-sidemenu__btn::before { 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-2-fill.svg"); mask-image: url("../icons/system/menu-2-fill.svg"); --icon-size: 1rem; content: ""; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-sidemenu__item .fr-sidemenu__link, .fr-sidemenu__item .fr-sidemenu__btn { color: var(--text-action-high-grey); } .fr-sidemenu__item:first-child::before { box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__item:last-child::before { box-shadow: 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__link[aria-current]:not([aria-current=false]), .fr-sidemenu__btn[aria-current]:not([aria-current=false]) { color: var(--text-active-blue-france); } .fr-sidemenu__btn[aria-expanded=true] { background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); } /* ¯¯¯¯¯¯¯¯¯ *\ HIGHLIGHT \* ˍˍˍˍˍˍˍˍˍ */ .fr-highlight { padding-left: 1.25rem; font-size: 1rem; line-height: 1.5rem; background-size: 0.25rem 100%; background-position: 0 0; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--border-default-blue-france), var(--border-default-blue-france)); } .fr-highlight--green-tilleul-verveine { background-image: linear-gradient(0deg, var(--border-default-green-tilleul-verveine), var(--border-default-green-tilleul-verveine)); } .fr-highlight--green-bourgeon { background-image: linear-gradient(0deg, var(--border-default-green-bourgeon), var(--border-default-green-bourgeon)); } .fr-highlight--green-emeraude { background-image: linear-gradient(0deg, var(--border-default-green-emeraude), var(--border-default-green-emeraude)); } .fr-highlight--green-menthe { background-image: linear-gradient(0deg, var(--border-default-green-menthe), var(--border-default-green-menthe)); } .fr-highlight--green-archipel { background-image: linear-gradient(0deg, var(--border-default-green-archipel), var(--border-default-green-archipel)); } .fr-highlight--blue-ecume { background-image: linear-gradient(0deg, var(--border-default-blue-ecume), var(--border-default-blue-ecume)); } .fr-highlight--blue-cumulus { background-image: linear-gradient(0deg, var(--border-default-blue-cumulus), var(--border-default-blue-cumulus)); } .fr-highlight--purple-glycine { background-image: linear-gradient(0deg, var(--border-default-purple-glycine), var(--border-default-purple-glycine)); } .fr-highlight--pink-macaron { background-image: linear-gradient(0deg, var(--border-default-pink-macaron), var(--border-default-pink-macaron)); } .fr-highlight--pink-tuile { background-image: linear-gradient(0deg, var(--border-default-pink-tuile), var(--border-default-pink-tuile)); } .fr-highlight--yellow-tournesol { background-image: linear-gradient(0deg, var(--border-default-yellow-tournesol), var(--border-default-yellow-tournesol)); } .fr-highlight--yellow-moutarde { background-image: linear-gradient(0deg, var(--border-default-yellow-moutarde), var(--border-default-yellow-moutarde)); } .fr-highlight--orange-terre-battue { background-image: linear-gradient(0deg, var(--border-default-orange-terre-battue), var(--border-default-orange-terre-battue)); } .fr-highlight--brown-cafe-creme { background-image: linear-gradient(0deg, var(--border-default-brown-cafe-creme), var(--border-default-brown-cafe-creme)); } .fr-highlight--brown-caramel { background-image: linear-gradient(0deg, var(--border-default-brown-caramel), var(--border-default-brown-caramel)); } .fr-highlight--brown-opera { background-image: linear-gradient(0deg, var(--border-default-brown-opera), var(--border-default-brown-opera)); } .fr-highlight--beige-gris-galet { background-image: linear-gradient(0deg, var(--border-default-beige-gris-galet), var(--border-default-beige-gris-galet)); } /* ¯¯¯¯¯¯¯¯¯ *\ TAB \* ˍˍˍˍˍˍˍˍˍ */ .fr-tabs__tab { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; position: relative; overflow: visible; font-weight: 700; z-index: 1; margin: 0 0.25rem; height: 100%; white-space: nowrap; background-size: 0 2px, 1px 0, 1px 0, 100% 1px; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 calc(100% - 1px), 100% calc(100% - 1px), 100% 100%; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); box-shadow: 0 2px 0 0 var(--background-default-grey); } .fr-tabs__tab::before, .fr-tabs__tab::after { display: block; } .fr-tabs__tab[class^=fr-icon-]:not([class*=fr-tabs__tab--icon-]), .fr-tabs__tab[class*=" fr-icon-"]:not([class*=fr-tabs__tab--icon-]), .fr-tabs__tab[class^=fr-fi-]:not([class*=fr-tabs__tab--icon-]), .fr-tabs__tab[class*=" fr-fi-"]:not([class*=fr-tabs__tab--icon-]) { overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.75rem; padding-right: 0.75rem; } .fr-tabs__tab[class^=fr-icon-]:not([class*=fr-tabs__tab--icon-])::before, .fr-tabs__tab[class*=" fr-icon-"]:not([class*=fr-tabs__tab--icon-])::before, .fr-tabs__tab[class^=fr-fi-]:not([class*=fr-tabs__tab--icon-])::before, .fr-tabs__tab[class*=" fr-fi-"]:not([class*=fr-tabs__tab--icon-])::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.75rem; } .fr-tabs__tab--icon-left[class^=fr-icon-], .fr-tabs__tab--icon-left[class*=" fr-icon-"], .fr-tabs__tab--icon-left[class^=fr-fi-], .fr-tabs__tab--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-tabs__tab--icon-left[class^=fr-icon-]::before, .fr-tabs__tab--icon-left[class*=" fr-icon-"]::before, .fr-tabs__tab--icon-left[class^=fr-fi-]::before, .fr-tabs__tab--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-tabs { --tabs-height: auto; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; --underline-img: none; position: relative; overflow: hidden; margin-left: 0; margin-right: 0; margin-top: -4px; padding-top: 4px; display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; height: var(--tabs-height); /** * Animation de la hauteur du panel */ transition: height 0.3s; /** * ul : element srollable des boutons */ /** * Tab button */ /** * Tab Panel */ box-shadow: inset 0 -1px 0 0 var(--border-default-grey); /** * Tab button */ } .fr-tabs--viewport-width { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .fr-tabs::before { content: ""; display: block; width: 100%; height: 100%; margin-top: -1px; order: 2; box-shadow: inset 0 1px 0 0 var(--border-default-grey), inset 1px 0 0 0 var(--border-default-grey), inset -1px 0 0 0 var(--border-default-grey); } .fr-tabs__list { display: flex; align-items: stretch; overflow-x: auto; width: 100%; min-height: 3rem; z-index: 1; order: 1; /** * overflow vertical de 4px pour le focus */ margin: -4px 0 -4px; padding: 4px 0.75rem; } .fr-tabs__tab[aria-selected=true] { background-size: 100% 2px, 1px calc(100% - 1px), 1px calc(100% - 1px), 0 1px; } .fr-tabs__panel { --underline-img: linear-gradient(0deg, currentColor, currentColor); --ul-type: disc; --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, ".") ".  "; display: block; order: 3; position: relative; left: -100%; width: 100%; height: auto; padding: 1rem; margin-right: -100%; flex: 0 0 100%; transition: visibility 0.3s, transform 0.3s; /** * Les éléments non sélectionnés sont cachés et rendus innaccessibles au focus * Point d'attention : visibility hidden sur le panel et surcharge sur l'élément selected avec visibility visible créé des problèmes dans la gestion du focus en cas d'imbrication d'onglets * * tabs * └─ panel selected * └─ panel (visibility hidden, tabindex -1) * └─ tabs * └─ panel selected (visibility visible tabindex 0) * ↑ ce panel est accessible alors que caché par son panel parent * solution : visibility hidden seulement sur les éléments non sélectionnés **/ } .fr-tabs__panel:focus, .fr-tabs__panel:focus-visible { outline-offset: calc(-1rem + 2px); } .fr-tabs__panel--direction-end { transform: translate(100%); } .fr-tabs__panel--direction-start { transform: translate(-100%); } .fr-tabs__panel:not(.fr-tabs__panel--selected) { visibility: hidden; } /* * Ombres ajoutées en Js si le contenu est plus grand que le conteneur */ .fr-tabs__shadow { --tabs-list-height: 3rem; /** * Modifier ombre à gauche **/ /** * Modifier ombre à droite **/ /** * Modifier combinaison ombre à gauche et ombre à droite **/ } .fr-tabs__shadow::before { content: ""; display: block; position: absolute; top: 4px; right: 0; left: 0; z-index: 2; box-shadow: inset 0 0 0 0 rgba(22, 22, 22, 0), inset 0 0 0 0 rgba(22, 22, 22, 0); height: calc(var(--tabs-list-height) - 8px); opacity: 0.8; pointer-events: none; transition: box-shadow 0.3s; } .fr-tabs__shadow--left::before { box-shadow: inset 2rem 0 1.5rem -2rem #161616, inset 0 0 0 0 rgba(22, 22, 22, 0); } .fr-tabs__shadow--right::before { box-shadow: inset 0 0 0 0 rgba(22, 22, 22, 0), inset -2rem 0 1.5rem -2rem #161616; } .fr-tabs__shadow--left.fr-tabs__shadow--right::before { box-shadow: inset 2rem 0 1.5rem -2rem #161616, inset -2rem 0 1.5rem -2rem #161616; } :root[data-fr-theme=dark] .fr-tabs__shadow::before { opacity: 1; } .fr-tabs__tab:not([aria-selected=true]) { background-color: var(--background-action-low-blue-france); --idle: transparent; --hover: var(--background-action-low-blue-france-hover); --active: var(--background-action-low-blue-france-active); color: var(--text-action-high-grey); } .fr-tabs__tab[aria-selected=true]:not(:disabled) { background-image: linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); color: var(--text-active-blue-france); } .fr-tabs__tab:disabled { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } /* ¯¯¯¯¯¯¯¯¯ *\ PAGINATION \* ˍˍˍˍˍˍˍˍˍ */ .fr-pagination__link { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --hover-tint: var(--hover); font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; min-width: 2rem; margin-left: 0.5rem; margin-right: 0.5rem; margin-bottom: 1rem; --underline-img: none; position: relative; } .fr-pagination__link::before, .fr-pagination__link::after { display: block; } .fr-pagination { --underline-img: none; --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; color: var(--text-action-high-grey); } .fr-pagination__list { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .fr-pagination__list > *:first-child, .fr-pagination__list > *:first-child * { margin-left: 0; } .fr-pagination__list > *:last-child, .fr-pagination__list > *:last-child * { margin-right: 0; } .fr-pagination__link:not([href])[aria-current]:not([aria-current=false]) { cursor: default; pointer-events: none; } .fr-pagination__link--first { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-pagination__link--first::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/fr--arrow-left-s-first-line.svg"); mask-image: url("../icons/system/fr--arrow-left-s-first-line.svg"); content: ""; } .fr-pagination__link--first.fr-pagination__link--label { 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-pagination__link--first.fr-pagination__link--label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/fr--arrow-left-s-first-line.svg"); mask-image: url("../icons/system/fr--arrow-left-s-first-line.svg"); content: ""; } .fr-pagination__link--prev { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-pagination__link--prev::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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-left-s-line.svg"); mask-image: url("../icons/system/arrow-left-s-line.svg"); content: ""; } .fr-pagination__link--prev.fr-pagination__link--label { 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-pagination__link--prev.fr-pagination__link--label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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-left-s-line.svg"); mask-image: url("../icons/system/arrow-left-s-line.svg"); content: ""; } .fr-pagination__link--next { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-pagination__link--next::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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-right-s-line.svg"); mask-image: url("../icons/system/arrow-right-s-line.svg"); content: ""; } .fr-pagination__link--next.fr-pagination__link--label { 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-pagination__link--next.fr-pagination__link--label::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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-right-s-line.svg"); mask-image: url("../icons/system/arrow-right-s-line.svg"); content: ""; } .fr-pagination__link--next.fr-pagination__link--label::before { content: none; } .fr-pagination__link--last { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-pagination__link--last::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/fr--arrow-right-s-last-line.svg"); mask-image: url("../icons/system/fr--arrow-right-s-last-line.svg"); content: ""; } .fr-pagination__link--last.fr-pagination__link--label { 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-pagination__link--last.fr-pagination__link--label::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/fr--arrow-right-s-last-line.svg"); mask-image: url("../icons/system/fr--arrow-right-s-last-line.svg"); content: ""; } .fr-pagination__link--last.fr-pagination__link--label::before { content: none; } .fr-pagination__link[aria-current]:not([aria-current=false]) { background-color: var(--background-active-blue-france); --idle: transparent; --hover: var(--background-active-blue-france-hover); --active: var(--background-active-blue-france-active); color: var(--text-inverted-blue-france); } .fr-pagination__link:not([aria-current]):disabled, a.fr-pagination__link:not([aria-current]):not([href]), a.fr-pagination__link[aria-current=false]:not([href]), .fr-pagination__link[aria-current=false]:disabled { color: var(--text-disabled-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ SUMMARY \* ˍˍˍˍˍˍˍˍˍ */ .fr-summary { --text-spacing: 0 0 0.5rem 0; --title-spacing: 0 0 0.5rem 0; padding: 1.5rem; font-size: 0.75rem; line-height: 1.25rem; background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-summary ol { list-style-type: none; } .fr-summary li { padding: 0.5rem 0; } .fr-summary li::marker { content: none; } .fr-summary__title { font-size: 0.75rem; line-height: 1.25rem; padding-left: 0.5rem; font-weight: 700; text-transform: uppercase; color: var(--text-title-grey); } .fr-summary__link { display: inline; position: relative; font-size: 0.75rem; line-height: 1.25rem; } .fr-summary__link::before { content: var(--ol-content); position: absolute; right: 100%; font-size: var(--xl-size); font-weight: bold; } .fr-summary__link:not(:hover):not(:active) { --underline-idle-width: 0; } .fr-summary li > a { color: var(--text-action-high-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ TABLE \* ˍˍˍˍˍˍˍˍˍ */ .fr-table { --table-offset: 1rem; --text-spacing: 0; --title-spacing: 0; position: relative; margin-bottom: 2.5rem; padding-top: var(--table-offset); /* Style bordered, ajoute des bordures entre chaque ligne */ } .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-size: 1.375rem; line-height: 1.75rem; margin: var(--title-spacing); font-weight: 700; text-align: left; color: var(--text-title-grey); } .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; } .fr-table th { font-weight: 700; } .fr-table thead { background-size: 100% 2px; background-position: bottom; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); color: var(--text-title-grey); } .fr-table thead td, .fr-table thead th { font-weight: 700; padding-bottom: 0.875rem; } /* * Cache la caption */ .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; display: block; height: 0; } /* * Fixe le caption en bas du tableau */ .fr-table--caption-bottom { padding-top: 0; margin-bottom: 0; margin-top: 1rem; } .fr-table--caption-bottom table { margin-bottom: calc(var(--table-offset) + 2.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; } /* * pas de scroll ni de shadow */ .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); } /* * Fixe la taille des colonnes du tableau */ .fr-table--layout-fixed table { display: table; table-layout: fixed; } /* Style bordered, ajoute des bordures entre chaque ligne */ .fr-table--bordered tbody tr { background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); /* Style bordered, enleve le style even/odd */ } /* * Ombres ajoutées en Js si le contenu est plus grand que le conteneur */ .fr-table__shadow { /** * Modifier ombre à gauche **/ /** * Modifier ombre à droite **/ /** * Modifier combinaison ombre à gauche et ombre à droite **/ } .fr-table__shadow::before { content: ""; display: block; position: absolute; top: var(--table-offset); right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: inset 0 0 0 0 #161616, inset 0 0 0 0 #161616; opacity: 0.32; pointer-events: none; transition: box-shadow 0.3s; } .fr-table__shadow--left::before { box-shadow: inset 2rem 0 1rem -2rem #161616, inset 0 0 0 0 #161616; } .fr-table__shadow--right::before { box-shadow: inset 0 0 0 0 #161616, inset -2rem 0 1rem -2rem #161616; } .fr-table__shadow--left.fr-table__shadow--right::before { content: ""; display: block; box-shadow: inset 2rem 0 1rem -2rem #161616, inset -2rem 0 1rem -2rem #161616; } /* * Positionnement ombres sur le tableau sans caption */ .fr-table--no-caption .fr-table__shadow::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* * Positionnement ombres sur le tableau avec caption en bas */ .fr-table--caption-bottom .fr-table__shadow::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } :root[data-fr-theme=dark] .fr-table__shadow::before { opacity: 1; } .fr-table tbody { background-color: var(--background-alt-grey); --idle: transparent; --hover: var(--background-alt-grey-hover); --active: var(--background-alt-grey-active); } .fr-table tbody tr:nth-child(even) { background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-table--green-tilleul-verveine { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-tilleul-verveine thead { background-image: linear-gradient(0deg, var(--border-plain-green-tilleul-verveine), var(--border-plain-green-tilleul-verveine)); background-color: var(--background-contrast-green-tilleul-verveine); --idle: transparent; --hover: var(--background-contrast-green-tilleul-verveine-hover); --active: var(--background-contrast-green-tilleul-verveine-active); } .fr-table--green-tilleul-verveine tbody { background-color: var(--background-alt-green-tilleul-verveine); --idle: transparent; --hover: var(--background-alt-green-tilleul-verveine-hover); --active: var(--background-alt-green-tilleul-verveine-active); } .fr-table--green-tilleul-verveine tbody tr:nth-child(even) { background-color: var(--background-contrast-green-tilleul-verveine); --idle: transparent; --hover: var(--background-contrast-green-tilleul-verveine-hover); --active: var(--background-contrast-green-tilleul-verveine-active); } .fr-table--green-tilleul-verveine.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-green-tilleul-verveine), var(--border-default-green-tilleul-verveine)); } .fr-table--green-bourgeon { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-bourgeon thead { background-image: linear-gradient(0deg, var(--border-plain-green-bourgeon), var(--border-plain-green-bourgeon)); background-color: var(--background-contrast-green-bourgeon); --idle: transparent; --hover: var(--background-contrast-green-bourgeon-hover); --active: var(--background-contrast-green-bourgeon-active); } .fr-table--green-bourgeon tbody { background-color: var(--background-alt-green-bourgeon); --idle: transparent; --hover: var(--background-alt-green-bourgeon-hover); --active: var(--background-alt-green-bourgeon-active); } .fr-table--green-bourgeon tbody tr:nth-child(even) { background-color: var(--background-contrast-green-bourgeon); --idle: transparent; --hover: var(--background-contrast-green-bourgeon-hover); --active: var(--background-contrast-green-bourgeon-active); } .fr-table--green-bourgeon.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-green-bourgeon), var(--border-default-green-bourgeon)); } .fr-table--green-emeraude { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-emeraude thead { background-image: linear-gradient(0deg, var(--border-plain-green-emeraude), var(--border-plain-green-emeraude)); background-color: var(--background-contrast-green-emeraude); --idle: transparent; --hover: var(--background-contrast-green-emeraude-hover); --active: var(--background-contrast-green-emeraude-active); } .fr-table--green-emeraude tbody { background-color: var(--background-alt-green-emeraude); --idle: transparent; --hover: var(--background-alt-green-emeraude-hover); --active: var(--background-alt-green-emeraude-active); } .fr-table--green-emeraude tbody tr:nth-child(even) { background-color: var(--background-contrast-green-emeraude); --idle: transparent; --hover: var(--background-contrast-green-emeraude-hover); --active: var(--background-contrast-green-emeraude-active); } .fr-table--green-emeraude.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-green-emeraude), var(--border-default-green-emeraude)); } .fr-table--green-menthe { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-menthe thead { background-image: linear-gradient(0deg, var(--border-plain-green-menthe), var(--border-plain-green-menthe)); background-color: var(--background-contrast-green-menthe); --idle: transparent; --hover: var(--background-contrast-green-menthe-hover); --active: var(--background-contrast-green-menthe-active); } .fr-table--green-menthe tbody { background-color: var(--background-alt-green-menthe); --idle: transparent; --hover: var(--background-alt-green-menthe-hover); --active: var(--background-alt-green-menthe-active); } .fr-table--green-menthe tbody tr:nth-child(even) { background-color: var(--background-contrast-green-menthe); --idle: transparent; --hover: var(--background-contrast-green-menthe-hover); --active: var(--background-contrast-green-menthe-active); } .fr-table--green-menthe.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-green-menthe), var(--border-default-green-menthe)); } .fr-table--green-archipel { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--green-archipel thead { background-image: linear-gradient(0deg, var(--border-plain-green-archipel), var(--border-plain-green-archipel)); background-color: var(--background-contrast-green-archipel); --idle: transparent; --hover: var(--background-contrast-green-archipel-hover); --active: var(--background-contrast-green-archipel-active); } .fr-table--green-archipel tbody { background-color: var(--background-alt-green-archipel); --idle: transparent; --hover: var(--background-alt-green-archipel-hover); --active: var(--background-alt-green-archipel-active); } .fr-table--green-archipel tbody tr:nth-child(even) { background-color: var(--background-contrast-green-archipel); --idle: transparent; --hover: var(--background-contrast-green-archipel-hover); --active: var(--background-contrast-green-archipel-active); } .fr-table--green-archipel.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-green-archipel), var(--border-default-green-archipel)); } .fr-table--blue-ecume { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--blue-ecume thead { background-image: linear-gradient(0deg, var(--border-plain-blue-ecume), var(--border-plain-blue-ecume)); background-color: var(--background-contrast-blue-ecume); --idle: transparent; --hover: var(--background-contrast-blue-ecume-hover); --active: var(--background-contrast-blue-ecume-active); } .fr-table--blue-ecume tbody { background-color: var(--background-alt-blue-ecume); --idle: transparent; --hover: var(--background-alt-blue-ecume-hover); --active: var(--background-alt-blue-ecume-active); } .fr-table--blue-ecume tbody tr:nth-child(even) { background-color: var(--background-contrast-blue-ecume); --idle: transparent; --hover: var(--background-contrast-blue-ecume-hover); --active: var(--background-contrast-blue-ecume-active); } .fr-table--blue-ecume.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-blue-ecume), var(--border-default-blue-ecume)); } .fr-table--blue-cumulus { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--blue-cumulus thead { background-image: linear-gradient(0deg, var(--border-plain-blue-cumulus), var(--border-plain-blue-cumulus)); background-color: var(--background-contrast-blue-cumulus); --idle: transparent; --hover: var(--background-contrast-blue-cumulus-hover); --active: var(--background-contrast-blue-cumulus-active); } .fr-table--blue-cumulus tbody { background-color: var(--background-alt-blue-cumulus); --idle: transparent; --hover: var(--background-alt-blue-cumulus-hover); --active: var(--background-alt-blue-cumulus-active); } .fr-table--blue-cumulus tbody tr:nth-child(even) { background-color: var(--background-contrast-blue-cumulus); --idle: transparent; --hover: var(--background-contrast-blue-cumulus-hover); --active: var(--background-contrast-blue-cumulus-active); } .fr-table--blue-cumulus.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-blue-cumulus), var(--border-default-blue-cumulus)); } .fr-table--purple-glycine { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--purple-glycine thead { background-image: linear-gradient(0deg, var(--border-plain-purple-glycine), var(--border-plain-purple-glycine)); background-color: var(--background-contrast-purple-glycine); --idle: transparent; --hover: var(--background-contrast-purple-glycine-hover); --active: var(--background-contrast-purple-glycine-active); } .fr-table--purple-glycine tbody { background-color: var(--background-alt-purple-glycine); --idle: transparent; --hover: var(--background-alt-purple-glycine-hover); --active: var(--background-alt-purple-glycine-active); } .fr-table--purple-glycine tbody tr:nth-child(even) { background-color: var(--background-contrast-purple-glycine); --idle: transparent; --hover: var(--background-contrast-purple-glycine-hover); --active: var(--background-contrast-purple-glycine-active); } .fr-table--purple-glycine.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-purple-glycine), var(--border-default-purple-glycine)); } .fr-table--pink-macaron { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--pink-macaron thead { background-image: linear-gradient(0deg, var(--border-plain-pink-macaron), var(--border-plain-pink-macaron)); background-color: var(--background-contrast-pink-macaron); --idle: transparent; --hover: var(--background-contrast-pink-macaron-hover); --active: var(--background-contrast-pink-macaron-active); } .fr-table--pink-macaron tbody { background-color: var(--background-alt-pink-macaron); --idle: transparent; --hover: var(--background-alt-pink-macaron-hover); --active: var(--background-alt-pink-macaron-active); } .fr-table--pink-macaron tbody tr:nth-child(even) { background-color: var(--background-contrast-pink-macaron); --idle: transparent; --hover: var(--background-contrast-pink-macaron-hover); --active: var(--background-contrast-pink-macaron-active); } .fr-table--pink-macaron.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-pink-macaron), var(--border-default-pink-macaron)); } .fr-table--pink-tuile { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--pink-tuile thead { background-image: linear-gradient(0deg, var(--border-plain-pink-tuile), var(--border-plain-pink-tuile)); background-color: var(--background-contrast-pink-tuile); --idle: transparent; --hover: var(--background-contrast-pink-tuile-hover); --active: var(--background-contrast-pink-tuile-active); } .fr-table--pink-tuile tbody { background-color: var(--background-alt-pink-tuile); --idle: transparent; --hover: var(--background-alt-pink-tuile-hover); --active: var(--background-alt-pink-tuile-active); } .fr-table--pink-tuile tbody tr:nth-child(even) { background-color: var(--background-contrast-pink-tuile); --idle: transparent; --hover: var(--background-contrast-pink-tuile-hover); --active: var(--background-contrast-pink-tuile-active); } .fr-table--pink-tuile.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-pink-tuile), var(--border-default-pink-tuile)); } .fr-table--yellow-tournesol { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--yellow-tournesol thead { background-image: linear-gradient(0deg, var(--border-plain-yellow-tournesol), var(--border-plain-yellow-tournesol)); background-color: var(--background-contrast-yellow-tournesol); --idle: transparent; --hover: var(--background-contrast-yellow-tournesol-hover); --active: var(--background-contrast-yellow-tournesol-active); } .fr-table--yellow-tournesol tbody { background-color: var(--background-alt-yellow-tournesol); --idle: transparent; --hover: var(--background-alt-yellow-tournesol-hover); --active: var(--background-alt-yellow-tournesol-active); } .fr-table--yellow-tournesol tbody tr:nth-child(even) { background-color: var(--background-contrast-yellow-tournesol); --idle: transparent; --hover: var(--background-contrast-yellow-tournesol-hover); --active: var(--background-contrast-yellow-tournesol-active); } .fr-table--yellow-tournesol.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-yellow-tournesol), var(--border-default-yellow-tournesol)); } .fr-table--yellow-moutarde { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--yellow-moutarde thead { background-image: linear-gradient(0deg, var(--border-plain-yellow-moutarde), var(--border-plain-yellow-moutarde)); background-color: var(--background-contrast-yellow-moutarde); --idle: transparent; --hover: var(--background-contrast-yellow-moutarde-hover); --active: var(--background-contrast-yellow-moutarde-active); } .fr-table--yellow-moutarde tbody { background-color: var(--background-alt-yellow-moutarde); --idle: transparent; --hover: var(--background-alt-yellow-moutarde-hover); --active: var(--background-alt-yellow-moutarde-active); } .fr-table--yellow-moutarde tbody tr:nth-child(even) { background-color: var(--background-contrast-yellow-moutarde); --idle: transparent; --hover: var(--background-contrast-yellow-moutarde-hover); --active: var(--background-contrast-yellow-moutarde-active); } .fr-table--yellow-moutarde.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-yellow-moutarde), var(--border-default-yellow-moutarde)); } .fr-table--orange-terre-battue { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--orange-terre-battue thead { background-image: linear-gradient(0deg, var(--border-plain-orange-terre-battue), var(--border-plain-orange-terre-battue)); background-color: var(--background-contrast-orange-terre-battue); --idle: transparent; --hover: var(--background-contrast-orange-terre-battue-hover); --active: var(--background-contrast-orange-terre-battue-active); } .fr-table--orange-terre-battue tbody { background-color: var(--background-alt-orange-terre-battue); --idle: transparent; --hover: var(--background-alt-orange-terre-battue-hover); --active: var(--background-alt-orange-terre-battue-active); } .fr-table--orange-terre-battue tbody tr:nth-child(even) { background-color: var(--background-contrast-orange-terre-battue); --idle: transparent; --hover: var(--background-contrast-orange-terre-battue-hover); --active: var(--background-contrast-orange-terre-battue-active); } .fr-table--orange-terre-battue.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-orange-terre-battue), var(--border-default-orange-terre-battue)); } .fr-table--brown-cafe-creme { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-cafe-creme thead { background-image: linear-gradient(0deg, var(--border-plain-brown-cafe-creme), var(--border-plain-brown-cafe-creme)); background-color: var(--background-contrast-brown-cafe-creme); --idle: transparent; --hover: var(--background-contrast-brown-cafe-creme-hover); --active: var(--background-contrast-brown-cafe-creme-active); } .fr-table--brown-cafe-creme tbody { background-color: var(--background-alt-brown-cafe-creme); --idle: transparent; --hover: var(--background-alt-brown-cafe-creme-hover); --active: var(--background-alt-brown-cafe-creme-active); } .fr-table--brown-cafe-creme tbody tr:nth-child(even) { background-color: var(--background-contrast-brown-cafe-creme); --idle: transparent; --hover: var(--background-contrast-brown-cafe-creme-hover); --active: var(--background-contrast-brown-cafe-creme-active); } .fr-table--brown-cafe-creme.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-brown-cafe-creme), var(--border-default-brown-cafe-creme)); } .fr-table--brown-caramel { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-caramel thead { background-image: linear-gradient(0deg, var(--border-plain-brown-caramel), var(--border-plain-brown-caramel)); background-color: var(--background-contrast-brown-caramel); --idle: transparent; --hover: var(--background-contrast-brown-caramel-hover); --active: var(--background-contrast-brown-caramel-active); } .fr-table--brown-caramel tbody { background-color: var(--background-alt-brown-caramel); --idle: transparent; --hover: var(--background-alt-brown-caramel-hover); --active: var(--background-alt-brown-caramel-active); } .fr-table--brown-caramel tbody tr:nth-child(even) { background-color: var(--background-contrast-brown-caramel); --idle: transparent; --hover: var(--background-contrast-brown-caramel-hover); --active: var(--background-contrast-brown-caramel-active); } .fr-table--brown-caramel.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-brown-caramel), var(--border-default-brown-caramel)); } .fr-table--brown-opera { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--brown-opera thead { background-image: linear-gradient(0deg, var(--border-plain-brown-opera), var(--border-plain-brown-opera)); background-color: var(--background-contrast-brown-opera); --idle: transparent; --hover: var(--background-contrast-brown-opera-hover); --active: var(--background-contrast-brown-opera-active); } .fr-table--brown-opera tbody { background-color: var(--background-alt-brown-opera); --idle: transparent; --hover: var(--background-alt-brown-opera-hover); --active: var(--background-alt-brown-opera-active); } .fr-table--brown-opera tbody tr:nth-child(even) { background-color: var(--background-contrast-brown-opera); --idle: transparent; --hover: var(--background-contrast-brown-opera-hover); --active: var(--background-contrast-brown-opera-active); } .fr-table--brown-opera.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-brown-opera), var(--border-default-brown-opera)); } .fr-table--beige-gris-galet { /* Style bordered, ajoute des bordures entre chaque ligne */ } .fr-table--beige-gris-galet thead { background-image: linear-gradient(0deg, var(--border-plain-beige-gris-galet), var(--border-plain-beige-gris-galet)); background-color: var(--background-contrast-beige-gris-galet); --idle: transparent; --hover: var(--background-contrast-beige-gris-galet-hover); --active: var(--background-contrast-beige-gris-galet-active); } .fr-table--beige-gris-galet tbody { background-color: var(--background-alt-beige-gris-galet); --idle: transparent; --hover: var(--background-alt-beige-gris-galet-hover); --active: var(--background-alt-beige-gris-galet-active); } .fr-table--beige-gris-galet tbody tr:nth-child(even) { background-color: var(--background-contrast-beige-gris-galet); --idle: transparent; --hover: var(--background-contrast-beige-gris-galet-hover); --active: var(--background-contrast-beige-gris-galet-active); } .fr-table--beige-gris-galet.fr-table--bordered tbody tr { background-image: linear-gradient(0deg, var(--border-default-beige-gris-galet), var(--border-default-beige-gris-galet)); } .fr-table--bordered tbody tr:nth-child(even) { background-color: transparent; --hover: inherit; --active: inherit; } /* ¯¯¯¯¯¯¯¯¯ *\ TAG \* ˍˍˍˍˍˍˍˍˍ */ .fr-tag { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 1rem; min-width: 2.25rem; justify-content: center; color: var(--text-label-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-tag::before, .fr-tag::after { display: block; } .fr-tag[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-tag[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.25rem; } .fr-tag--icon-left[class^=fr-icon-], .fr-tag--icon-left[class*=" fr-icon-"], .fr-tag--icon-left[class^=fr-fi-], .fr-tag--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-tag--icon-left[class^=fr-icon-]::before, .fr-tag--icon-left[class*=" fr-icon-"]::before, .fr-tag--icon-left[class^=fr-fi-]::before, .fr-tag--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.25rem; } .fr-tag[class^=fr-icon-]:not([class*=fr-tag--icon-])::before, .fr-tag[class*=" fr-icon-"]:not([class*=fr-tag--icon-])::before, .fr-tag[class^=fr-fi-]:not([class*=fr-tag--icon-])::before, .fr-tag[class*=" fr-fi-"]:not([class*=fr-tag--icon-])::before { content: none; } .fr-tag--sm { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.75rem; } .fr-tag--sm[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-tag--sm[target=_blank]::after { content: ""; --icon-size: 0.75rem; margin-right: -0.09375rem; margin-left: 0.25rem; } .fr-tag--sm.fr-tag--icon-left[class^=fr-icon-], .fr-tag--sm.fr-tag--icon-left[class*=" fr-icon-"], .fr-tag--sm.fr-tag--icon-left[class^=fr-fi-], .fr-tag--sm.fr-tag--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-tag--sm.fr-tag--icon-left[class^=fr-icon-]::before, .fr-tag--sm.fr-tag--icon-left[class*=" fr-icon-"]::before, .fr-tag--sm.fr-tag--icon-left[class^=fr-fi-]::before, .fr-tag--sm.fr-tag--icon-left[class*=" fr-fi-"]::before { --icon-size: 0.75rem; margin-left: -0.09375rem; margin-right: 0.25rem; } .fr-tag--sm[class^=fr-icon-]:not([class*=fr-tag--icon-])::before, .fr-tag--sm[class*=" fr-icon-"]:not([class*=fr-tag--icon-])::before, .fr-tag--sm[class^=fr-fi-]:not([class*=fr-tag--icon-])::before, .fr-tag--sm[class*=" fr-fi-"]:not([class*=fr-tag--icon-])::before { content: none; } a.fr-tag[aria-pressed=true], button.fr-tag[aria-pressed=true], input[type=button].fr-tag[aria-pressed=true], input[type=image].fr-tag[aria-pressed=true], input[type=reset].fr-tag[aria-pressed=true], input[type=submit].fr-tag[aria-pressed=true] { position: relative; overflow: visible; background-position: 50%; background-size: 100%; background-repeat: no-repeat; } a.fr-tag[aria-pressed=true]::after, button.fr-tag[aria-pressed=true]::after, input[type=button].fr-tag[aria-pressed=true]::after, input[type=image].fr-tag[aria-pressed=true]::after, input[type=reset].fr-tag[aria-pressed=true]::after, input[type=submit].fr-tag[aria-pressed=true]::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/checkbox-circle-line.svg"); mask-image: url("../icons/system/checkbox-circle-line.svg"); --icon-size: 1rem; content: ""; position: absolute; top: 4px; right: 0; margin: -0.5rem; } a.fr-tag[aria-pressed=true].fr-tag--sm::after, button.fr-tag[aria-pressed=true].fr-tag--sm::after, input[type=button].fr-tag[aria-pressed=true].fr-tag--sm::after, input[type=image].fr-tag[aria-pressed=true].fr-tag--sm::after, input[type=reset].fr-tag[aria-pressed=true].fr-tag--sm::after, input[type=submit].fr-tag[aria-pressed=true].fr-tag--sm::after { --icon-size: 0.75rem; content: ""; position: absolute; top: 3px; right: 0; margin: -0.375rem; } a.fr-tag--dismiss::before, button.fr-tag--dismiss::before, input[type=button].fr-tag--dismiss::before, input[type=image].fr-tag--dismiss::before, input[type=reset].fr-tag--dismiss::before, input[type=submit].fr-tag--dismiss::before { content: none; } a.fr-tag--dismiss::after, button.fr-tag--dismiss::after, input[type=button].fr-tag--dismiss::after, input[type=image].fr-tag--dismiss::after, input[type=reset].fr-tag--dismiss::after, input[type=submit].fr-tag--dismiss::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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); --icon-size: 1rem; content: ""; margin-left: 0.25rem; margin-right: -0.25rem; } a.fr-tag--dismiss.fr-tag--sm::after, button.fr-tag--dismiss.fr-tag--sm::after, input[type=button].fr-tag--dismiss.fr-tag--sm::after, input[type=image].fr-tag--dismiss.fr-tag--sm::after, input[type=reset].fr-tag--dismiss.fr-tag--sm::after, input[type=submit].fr-tag--dismiss.fr-tag--sm::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%; --icon-size: 0.75rem; content: ""; margin-right: -0.1875rem; margin-left: 0.125rem; } .fr-tags-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: flex; flex-direction: row; margin-left: -0.25rem; margin-right: -0.25rem; flex-wrap: wrap; } .fr-tags-group > li { line-height: 2.75rem; } .fr-tags-group .fr-tag { margin: 0 0.25rem 0.5rem 0.25rem; vertical-align: top; } .fr-tags-group.fr-tags-group--sm .fr-tag { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.75rem; } .fr-tags-group.fr-tags-group--sm .fr-tag::before, .fr-tags-group.fr-tags-group--sm .fr-tag::after { --icon-size: 0.75rem; } .fr-tags-group.fr-tags-group--sm button.fr-tag.fr-tag--dismiss::after, .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag.fr-tag--dismiss::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%; --icon-size: 0.75rem; content: ""; margin-right: -0.1875rem; } .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]::after, .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]::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%; --icon-size: 0.75rem; content: ""; position: absolute; top: 3px; right: 0; margin: -0.375rem; } .fr-tag[aria-pressed=false] { color: var(--text-action-high-blue-france); background-color: var(--background-action-low-blue-france); --idle: transparent; --hover: var(--background-action-low-blue-france-hover); --active: var(--background-action-low-blue-france-active); } .fr-tag.fr-tag--dismiss { color: var(--text-inverted-blue-france); background-color: var(--background-action-high-blue-france); --idle: transparent; --hover: var(--background-action-high-blue-france-hover); --active: var(--background-action-high-blue-france-active); } a.fr-tag, button.fr-tag, input[type=button].fr-tag { color: var(--text-action-high-blue-france); background-color: var(--background-action-low-blue-france); --idle: transparent; --hover: var(--background-action-low-blue-france-hover); --active: var(--background-action-low-blue-france-active); } a.fr-tag--green-tilleul-verveine, button.fr-tag--green-tilleul-verveine, input[type=button].fr-tag--green-tilleul-verveine { color: var(--text-action-high-green-tilleul-verveine); background-color: var(--background-action-low-green-tilleul-verveine); --idle: transparent; --hover: var(--background-action-low-green-tilleul-verveine-hover); --active: var(--background-action-low-green-tilleul-verveine-active); } a.fr-tag--green-bourgeon, button.fr-tag--green-bourgeon, input[type=button].fr-tag--green-bourgeon { color: var(--text-action-high-green-bourgeon); background-color: var(--background-action-low-green-bourgeon); --idle: transparent; --hover: var(--background-action-low-green-bourgeon-hover); --active: var(--background-action-low-green-bourgeon-active); } a.fr-tag--green-emeraude, button.fr-tag--green-emeraude, input[type=button].fr-tag--green-emeraude { color: var(--text-action-high-green-emeraude); background-color: var(--background-action-low-green-emeraude); --idle: transparent; --hover: var(--background-action-low-green-emeraude-hover); --active: var(--background-action-low-green-emeraude-active); } a.fr-tag--green-menthe, button.fr-tag--green-menthe, input[type=button].fr-tag--green-menthe { color: var(--text-action-high-green-menthe); background-color: var(--background-action-low-green-menthe); --idle: transparent; --hover: var(--background-action-low-green-menthe-hover); --active: var(--background-action-low-green-menthe-active); } a.fr-tag--green-archipel, button.fr-tag--green-archipel, input[type=button].fr-tag--green-archipel { color: var(--text-action-high-green-archipel); background-color: var(--background-action-low-green-archipel); --idle: transparent; --hover: var(--background-action-low-green-archipel-hover); --active: var(--background-action-low-green-archipel-active); } a.fr-tag--blue-ecume, button.fr-tag--blue-ecume, input[type=button].fr-tag--blue-ecume { color: var(--text-action-high-blue-ecume); background-color: var(--background-action-low-blue-ecume); --idle: transparent; --hover: var(--background-action-low-blue-ecume-hover); --active: var(--background-action-low-blue-ecume-active); } a.fr-tag--blue-cumulus, button.fr-tag--blue-cumulus, input[type=button].fr-tag--blue-cumulus { color: var(--text-action-high-blue-cumulus); background-color: var(--background-action-low-blue-cumulus); --idle: transparent; --hover: var(--background-action-low-blue-cumulus-hover); --active: var(--background-action-low-blue-cumulus-active); } a.fr-tag--purple-glycine, button.fr-tag--purple-glycine, input[type=button].fr-tag--purple-glycine { color: var(--text-action-high-purple-glycine); background-color: var(--background-action-low-purple-glycine); --idle: transparent; --hover: var(--background-action-low-purple-glycine-hover); --active: var(--background-action-low-purple-glycine-active); } a.fr-tag--pink-macaron, button.fr-tag--pink-macaron, input[type=button].fr-tag--pink-macaron { color: var(--text-action-high-pink-macaron); background-color: var(--background-action-low-pink-macaron); --idle: transparent; --hover: var(--background-action-low-pink-macaron-hover); --active: var(--background-action-low-pink-macaron-active); } a.fr-tag--pink-tuile, button.fr-tag--pink-tuile, input[type=button].fr-tag--pink-tuile { color: var(--text-action-high-pink-tuile); background-color: var(--background-action-low-pink-tuile); --idle: transparent; --hover: var(--background-action-low-pink-tuile-hover); --active: var(--background-action-low-pink-tuile-active); } a.fr-tag--yellow-tournesol, button.fr-tag--yellow-tournesol, input[type=button].fr-tag--yellow-tournesol { color: var(--text-action-high-yellow-tournesol); background-color: var(--background-action-low-yellow-tournesol); --idle: transparent; --hover: var(--background-action-low-yellow-tournesol-hover); --active: var(--background-action-low-yellow-tournesol-active); } a.fr-tag--yellow-moutarde, button.fr-tag--yellow-moutarde, input[type=button].fr-tag--yellow-moutarde { color: var(--text-action-high-yellow-moutarde); background-color: var(--background-action-low-yellow-moutarde); --idle: transparent; --hover: var(--background-action-low-yellow-moutarde-hover); --active: var(--background-action-low-yellow-moutarde-active); } a.fr-tag--orange-terre-battue, button.fr-tag--orange-terre-battue, input[type=button].fr-tag--orange-terre-battue { color: var(--text-action-high-orange-terre-battue); background-color: var(--background-action-low-orange-terre-battue); --idle: transparent; --hover: var(--background-action-low-orange-terre-battue-hover); --active: var(--background-action-low-orange-terre-battue-active); } a.fr-tag--brown-cafe-creme, button.fr-tag--brown-cafe-creme, input[type=button].fr-tag--brown-cafe-creme { color: var(--text-action-high-brown-cafe-creme); background-color: var(--background-action-low-brown-cafe-creme); --idle: transparent; --hover: var(--background-action-low-brown-cafe-creme-hover); --active: var(--background-action-low-brown-cafe-creme-active); } a.fr-tag--brown-caramel, button.fr-tag--brown-caramel, input[type=button].fr-tag--brown-caramel { color: var(--text-action-high-brown-caramel); background-color: var(--background-action-low-brown-caramel); --idle: transparent; --hover: var(--background-action-low-brown-caramel-hover); --active: var(--background-action-low-brown-caramel-active); } a.fr-tag--brown-opera, button.fr-tag--brown-opera, input[type=button].fr-tag--brown-opera { color: var(--text-action-high-brown-opera); background-color: var(--background-action-low-brown-opera); --idle: transparent; --hover: var(--background-action-low-brown-opera-hover); --active: var(--background-action-low-brown-opera-active); } a.fr-tag--beige-gris-galet, button.fr-tag--beige-gris-galet, input[type=button].fr-tag--beige-gris-galet { color: var(--text-action-high-beige-gris-galet); background-color: var(--background-action-low-beige-gris-galet); --idle: transparent; --hover: var(--background-action-low-beige-gris-galet-hover); --active: var(--background-action-low-beige-gris-galet-active); } button.fr-tag[aria-pressed=true]:not(:disabled), input[type=button].fr-tag[aria-pressed=true]:not(:disabled) { background-color: transparent; color: var(--text-inverted-blue-france); background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--background-active-blue-france) 0.625rem); } button.fr-tag[aria-pressed=true]:not(:disabled):hover, input[type=button].fr-tag[aria-pressed=true]:not(:disabled):hover { background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--background-active-blue-france-hover) 0.625rem); } button.fr-tag[aria-pressed=true]:not(:disabled):active, input[type=button].fr-tag[aria-pressed=true]:not(:disabled):active { background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--background-active-blue-france-active) 0.625rem); } button.fr-tag[aria-pressed=true]::after, input[type=button].fr-tag[aria-pressed=true]::after { color: var(--text-action-high-blue-france); } button.fr-tag[aria-pressed=true]:disabled, input[type=button].fr-tag[aria-pressed=true]:disabled { background-color: transparent; background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--background-disabled-grey) 0.625rem); } button.fr-tag[aria-pressed=true]:disabled::after, input[type=button].fr-tag[aria-pressed=true]:disabled::after { color: var(--text-disabled-grey); } button.fr-tag[aria-pressed=true].fr-tag--sm, input[type=button].fr-tag[aria-pressed=true].fr-tag--sm { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france) 0.5rem); } button.fr-tag[aria-pressed=true].fr-tag--sm:hover, input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:hover { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france-hover) 0.5rem); } button.fr-tag[aria-pressed=true].fr-tag--sm:active, input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:active { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france-active) 0.5rem); } button.fr-tag[aria-pressed=true].fr-tag--sm:disabled, input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:disabled { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-disabled-grey) 0.5rem); } button.fr-tag:disabled, input[type=button].fr-tag:disabled { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } a:not([href]).fr-tag { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true], .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true] { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france) 0.5rem); } .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:hover, .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:hover { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france-hover) 0.5rem); } .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:active, .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:active { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-active-blue-france-active) 0.5rem); } .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:disabled, .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:disabled { background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-disabled-grey) 0.5rem); } /* ¯¯¯¯¯¯¯¯¯ *\ Download \* ˍˍˍˍˍˍˍˍˍ */ .fr-download__link { --text-spacing: 0; --title-spacing: 0; display: inline; color: var(--text-action-high-blue-france); } .fr-download { --text-spacing: 0; --title-spacing: 0; position: relative; padding-bottom: 1.5rem; margin: 0 0 1rem 0; } .fr-download .fr-download__link { font-size: 1rem; line-height: 1.5rem; padding: 0 0; overflow: initial; max-width: 100%; max-height: none; font-weight: 400; } .fr-download .fr-download__link::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/download-line.svg"); mask-image: url("../icons/system/download-line.svg"); content: ""; } .fr-download__desc { font-size: 0.875rem; line-height: 1.5rem; font-weight: 400; display: none; } .fr-download__detail { position: absolute; bottom: 0; left: 0; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; max-width: 100%; white-space: nowrap; pointer-events: none; cursor: text; overflow: hidden; text-overflow: ellipsis; color: var(--text-mention-grey); } .fr-download__detail abbr { text-decoration: none; } .fr-download--card { padding: 1.5rem 1.5rem 4rem 1.5rem; --text-spacing: 0; --title-spacing: 0; background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-download--card .fr-download__link { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: var(--text-action-high-blue-france); } .fr-download--card .fr-download__link::after { --icon-size: 1rem; position: absolute; right: 1.5rem; bottom: 1.5rem; margin: 0; color: var(--text-action-high-blue-france); } .fr-download--card .fr-download__desc { display: block; margin-top: 0.5rem; } .fr-download--card .fr-download__detail { position: absolute; bottom: 1.5rem; left: 1.5rem; max-width: calc(100% - 6.25rem); } .fr-download--card .fr-download__detail[class^=fr-icon-]::before, .fr-download--card .fr-download__detail[class*=" fr-icon-"]::before, .fr-download--card .fr-download__detail[class^=fr-fi-]::before, .fr-download--card .fr-download__detail[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-right: 0.5rem; } .fr-downloads-group__title { font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; margin: var(--title-spacing); } .fr-downloads-group--bordered { padding: 1.5rem 1.5rem 0.5rem; box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-downloads-group > ul { margin-top: 0; margin-bottom: 0; } .fr-downloads-group > ul > li { padding-bottom: 0; } .fr-downloads-group .fr-download { margin-bottom: 1rem; } .fr-downloads-group li::marker { color: var(--text-action-high-blue-france); } /* ¯¯¯¯¯¯¯¯¯ *\ ALERT \* ˍˍˍˍˍˍˍˍˍ */ .fr-alert { position: relative; padding: 1rem 2.25rem 0.75rem 3.5rem; --title-spacing: 0 0 0.25rem; --text-spacing: 0 0 0.25rem; background-size: 100% 1px, 1px 100%, 100% 1px, 2.5rem 100%; background-position: 0 0, 100% 0, 0 100%, 0 0, 100% 100%; background-repeat: no-repeat, no-repeat no-repeat, no-repeat; background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)), linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)), linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)), linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)), linear-gradient(0deg, var(--background-flat-grey), var(--background-flat-grey)); } .fr-alert::before { --icon-size: 1.5rem; 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%; position: absolute; top: 0; left: 0; margin: 1rem 0.5rem; color: var(--text-inverted-grey); } .fr-alert__title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; } .fr-alert .fr-btn--close { position: absolute; top: 0.25rem; right: 0.25rem; font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-alert .fr-btn--close::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); content: ""; } .fr-alert + .fr-alert { margin-top: 1rem; } .fr-alert--info::before { -webkit-mask-image: url("../icons/system/fr--info-fill.svg"); mask-image: url("../icons/system/fr--info-fill.svg"); } .fr-alert--success::before { -webkit-mask-image: url("../icons/system/fr--success-fill.svg"); mask-image: url("../icons/system/fr--success-fill.svg"); } .fr-alert--error::before { -webkit-mask-image: url("../icons/system/fr--error-fill.svg"); mask-image: url("../icons/system/fr--error-fill.svg"); } .fr-alert--warning::before { -webkit-mask-image: url("../icons/system/fr--warning-fill.svg"); mask-image: url("../icons/system/fr--warning-fill.svg"); } .fr-alert--info::before, .fr-alert--success::before, .fr-alert--error::before, .fr-alert--warning::before { content: ""; } .fr-alert--sm { padding: 0.5rem 2.25rem 0.25rem 3rem; } .fr-alert--sm::before { margin: 0.5rem 0.5rem; } .fr-alert .fr-link--close { position: absolute; top: 0.25rem; right: 1.25rem; font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; align-items: center; } .fr-alert .fr-link--close::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); content: ""; } .fr-alert--info { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)), linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)), linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)), linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)), linear-gradient(0deg, var(--background-flat-info), var(--background-flat-info)); } .fr-alert--error { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)), linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)), linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)), linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)), linear-gradient(0deg, var(--background-flat-error), var(--background-flat-error)); } .fr-alert--success { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)), linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)), linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)), linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)), linear-gradient(0deg, var(--background-flat-success), var(--background-flat-success)); } .fr-alert--warning { background-image: linear-gradient(0deg, var(--border-plain-warning), var(--border-plain-warning)), linear-gradient(0deg, var(--border-plain-warning), var(--border-plain-warning)), linear-gradient(0deg, var(--border-plain-warning), var(--border-plain-warning)), linear-gradient(0deg, var(--border-plain-warning), var(--border-plain-warning)), linear-gradient(0deg, var(--background-flat-warning), var(--background-flat-warning)); } /* ¯¯¯¯¯¯¯¯¯ *\ ALERT \* ˍˍˍˍˍˍˍˍˍ */ .fr-notice { position: relative; --title-spacing: 0; --text-spacing: 0; padding-top: 1rem; padding-bottom: 1rem; background-color: var(--background-contrast-grey); color: var(--text-title-grey); } .fr-notice__body { position: relative; padding: 0 2.5rem 0 2.5rem; } .fr-notice__body::before { --icon-size: 1.5rem; 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%; position: absolute; left: 0; } .fr-notice__title { position: relative; font-size: 1rem; line-height: 1.5rem; font-weight: 700; } .fr-notice .fr-btn--close { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; position: absolute; top: -0.25rem; right: 0; } .fr-notice .fr-btn--close::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; 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/close-line.svg"); mask-image: url("../icons/system/close-line.svg"); content: ""; } .fr-notice--info .fr-notice__body::before { -webkit-mask-image: url("../icons/system/fr--info-fill.svg"); mask-image: url("../icons/system/fr--info-fill.svg"); content: ""; } .fr-notice--info { background-color: var(--background-contrast-info); --idle: transparent; --hover: var(--background-contrast-info-hover); --active: var(--background-contrast-info-active); color: var(--text-default-info); } /* ¯¯¯¯¯¯¯¯¯ *\ RADIO \* ˍˍˍˍˍˍˍˍˍ */ .fr-radio-group { position: relative; max-width: max-content; } .fr-radio-group input[type=radio] { position: absolute; margin: 0; width: 1.5rem; height: 1.5rem; opacity: 0; } .fr-radio-group input[type=radio] + label { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-left: 2rem; background-position: calc(-0.25rem + 1px) calc(-0.25rem + 1px), calc(-0.25rem + 1px) calc(-0.25rem + 1px); background-size: 1.875rem 1.875rem, 1.875rem 1.875rem; background-repeat: no-repeat, no-repeat; background-image: radial-gradient(transparent 10px, var(--border-action-high-blue-france) 11px, transparent 12px); } .fr-radio-group input[type=radio] + label::before { content: ""; width: 1.5rem; height: 1.5rem; position: absolute; top: 0; border-radius: 1.5rem; margin-left: -2rem; } .fr-radio-group input[type=radio] + label .fr-hint-text { margin: 0; width: 100%; } .fr-radio-group--sm input[type=radio] { width: 1rem; height: 1rem; top: 0.25rem; } .fr-radio-group--sm input[type=radio] + label { padding-left: 1.5rem; background-position: calc(-0.125rem + 1px) calc(0.25rem - 1px), calc(-0.125rem + 1px) calc(0.25rem - 1px); background-size: 1.125rem 1.125rem, 1.125rem 1.125rem; background-image: radial-gradient(transparent 6px, var(--border-action-high-blue-france) 7px, transparent 8px); } .fr-radio-group--sm input[type=radio] + label::before { top: 0.25rem; width: 1rem; height: 1rem; border-radius: 1rem; margin-left: -1.5rem; } .fr-radio-rich { position: relative; display: flex; flex-direction: row; align-items: center; max-width: 100%; } .fr-radio-rich input[type=radio] { width: 1rem; height: 1rem; left: 1.75rem; top: calc(50% - 0.5rem); } .fr-radio-rich input[type=radio] + label { padding-left: 3.5rem; margin-left: 0; align-self: stretch; min-height: 5rem; width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 1.5rem; display: flex; flex-direction: column; align-items: stretch; justify-content: center; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, 1.125rem 1.125rem, 1.125rem 1.125rem; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 100% 0, 0 100%, 0 0, 1.75rem 50%, 1.75rem 50%; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--border-action-high-blue-france) 7px, transparent 8px); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-radio-rich input[type=radio] + label::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin-left: 0; border-radius: 0; } .fr-radio-rich input[type=radio] + label .fr-hint-text { margin-left: 0; } .fr-radio-rich input[type=radio]:not(:disabled) ~ label { --hover-tint: var(--hover); --active-tint: var(--active); } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:hover { background-color: var(--hover-tint); } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:active { background-color: var(--active-tint); } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:hover + .fr-radio-rich__pictogram { background-color: var(--hover); } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:active + .fr-radio-rich__pictogram { background-color: var(--active); } .fr-radio-rich__pictogram { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-left: -1px; padding: 0.25rem; width: 5.5rem; min-width: 5.5rem; align-self: stretch; pointer-events: none; background-size: 100% 1px, 100% 1px, 1px 100%, 1px calc(100% - 0.5rem); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 100%, 100% 0, 0 0.25rem; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-radio-rich__pictogram img, .fr-radio-rich__pictogram svg { max-width: 3.5rem; max-height: 3.5rem; } .fr-control > .fr-radio-rich.fr-radio-group { margin-top: 0; margin-bottom: 0; } .fr-radio-group input[type=radio]:disabled + label { background-image: radial-gradient(transparent 10px, var(--background-disabled-grey) 11px, transparent 12px); } .fr-radio-group input[type=radio]:checked + label { background-image: radial-gradient(transparent 10px, var(--border-active-blue-france) 11px, transparent 12px), radial-gradient(var(--background-active-blue-france) 5px, transparent 6px); } .fr-radio-group input[type=radio]:checked:disabled + label { background-image: radial-gradient(transparent 10px, var(--background-disabled-grey) 11px, transparent 12px), radial-gradient(var(--background-disabled-grey) 5px, transparent 6px); } .fr-fieldset--error .fr-radio-group input[type=radio] + label { background-image: radial-gradient(transparent 10px, var(--border-plain-error) 11px, transparent 12px); } .fr-fieldset--error .fr-radio-group input[type=radio]:checked + label { background-image: radial-gradient(transparent 10px, var(--border-plain-error) 11px, transparent 12px), radial-gradient(var(--background-active-blue-france) 5px, transparent 6px); } .fr-fieldset--valid .fr-radio-group input[type=radio] + label { background-image: radial-gradient(transparent 10px, var(--border-plain-success) 11px, transparent 12px); } .fr-fieldset--valid .fr-radio-group input[type=radio]:checked + label { background-image: radial-gradient(transparent 10px, var(--border-plain-success) 11px, transparent 12px), radial-gradient(var(--background-active-blue-france) 5px, transparent 6px); } .fr-fieldset--info .fr-radio-group input[type=radio] + label { background-image: radial-gradient(transparent 10px, var(--border-plain-info) 11px, transparent 12px); } .fr-fieldset--info .fr-radio-group input[type=radio]:checked + label { background-image: radial-gradient(transparent 10px, var(--border-plain-info) 11px, transparent 12px), radial-gradient(var(--background-active-blue-france) 5px, transparent 6px); } .fr-fieldset .fr-radio-group input[type=radio]:disabled + label { background-image: radial-gradient(transparent 10px, var(--background-disabled-grey) 11px, transparent 12px); } .fr-fieldset .fr-radio-group input[type=radio]:disabled:checked + label { background-image: radial-gradient(transparent 10px, var(--background-disabled-grey) 11px, transparent 12px), radial-gradient(var(--background-disabled-grey) 5px, transparent 6px); } .fr-radio-group--sm input[type=radio]:disabled + label { background-image: radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px); } .fr-radio-group--sm input[type=radio]:checked + label { background-image: radial-gradient(transparent 6px, var(--border-active-blue-france) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-radio-group--sm input[type=radio]:checked:disabled + label { background-image: radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px), radial-gradient(var(--background-disabled-grey) 3px, transparent 4px); } .fr-fieldset--error .fr-radio-group--sm input[type=radio] + label { background-image: radial-gradient(transparent 6px, var(--border-plain-error) 7px, transparent 8px); } .fr-fieldset--error .fr-radio-group--sm input[type=radio]:checked + label { background-image: radial-gradient(transparent 6px, var(--border-plain-error) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset--valid .fr-radio-group--sm input[type=radio] + label { background-image: radial-gradient(transparent 6px, var(--border-plain-success) 7px, transparent 8px); } .fr-fieldset--valid .fr-radio-group--sm input[type=radio]:checked + label { background-image: radial-gradient(transparent 6px, var(--border-plain-success) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset--info .fr-radio-group--sm input[type=radio] + label { background-image: radial-gradient(transparent 6px, var(--border-plain-info) 7px, transparent 8px); } .fr-fieldset--info .fr-radio-group--sm input[type=radio]:checked + label { background-image: radial-gradient(transparent 6px, var(--border-plain-info) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset .fr-radio-group--sm input[type=radio]:disabled + label { background-image: radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px); } .fr-fieldset .fr-radio-group--sm input[type=radio]:disabled:checked + label { background-image: radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px), radial-gradient(var(--background-disabled-grey) 3px, transparent 4px); } .fr-radio-rich input[type=radio]:disabled + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px); } .fr-radio-rich input[type=radio]:disabled ~ .fr-radio-rich__pictogram svg * { fill: var(--text-disabled-grey); } .fr-radio-rich input[type=radio]:checked + label { background-image: linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)), linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)), linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)), linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(transparent 6px, var(--border-active-blue-france) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-radio-rich input[type=radio]:checked ~ .fr-radio-rich__pictogram { background-image: linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-radio-rich input[type=radio]:checked:disabled + label { background-image: linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px), radial-gradient(var(--background-disabled-grey) 3px, transparent 4px); } .fr-radio-rich input[type=radio]:checked:disabled ~ .fr-radio-rich__pictogram { background-image: linear-gradient(0deg, var(--background-disabled-grey), var(--background-disabled-grey)), linear-gradient(0deg, var(--background-disabled-grey), var(--background-disabled-grey)), linear-gradient(0deg, var(--background-disabled-grey), var(--background-disabled-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-fieldset--error .fr-radio-rich input[type=radio] + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--border-plain-error) 7px, transparent 8px); } .fr-fieldset--error .fr-radio-rich input[type=radio]:checked + label { background-image: linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), radial-gradient(transparent 6px, var(--border-plain-error) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset--valid .fr-radio-rich input[type=radio] + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--border-plain-success) 7px, transparent 8px); } .fr-fieldset--valid .fr-radio-rich input[type=radio]:checked + label { background-image: linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), radial-gradient(transparent 6px, var(--border-plain-success) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset--info .fr-radio-rich input[type=radio] + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--border-plain-info) 7px, transparent 8px); } .fr-fieldset--info .fr-radio-rich input[type=radio]:checked + label { background-image: linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), radial-gradient(transparent 6px, var(--border-plain-info) 7px, transparent 8px), radial-gradient(var(--background-active-blue-france) 3px, transparent 4px); } .fr-fieldset .fr-radio-rich input[type=radio]:disabled + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px); } .fr-fieldset .fr-radio-rich input[type=radio]:disabled:checked + label { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), radial-gradient(transparent 6px, var(--background-disabled-grey) 7px, transparent 8px), radial-gradient(var(--background-disabled-grey) 3px, transparent 4px); } .fr-fieldset .fr-fieldset__content .fr-radio-group:not(.fr-radio-rich) input[type=radio] + label { background-position: calc(-0.25rem + 1px) calc(0.5rem + 1px), calc(-0.25rem + 1px) calc(0.5rem + 1px); } .fr-fieldset .fr-fieldset__content .fr-radio-group--sm:not(.fr-radio-rich) input[type=radio] + label { background-position: calc(-0.125rem + 1px) calc(1rem - 1px), calc(-0.125rem + 1px) calc(1rem - 1px); } .fr-fieldset .fr-fieldset__content .fr-radio-rich { margin-top: 0.5rem; margin-bottom: 1rem; } .fr-fieldset .fr-fieldset__content .fr-radio-rich:last-child { margin-bottom: 0.75rem; } .fr-fieldset .fr-fieldset__content .fr-radio-rich:first-child { margin-top: 0; } .fr-fieldset--inline .fr-fieldset__content .fr-radio-rich:not(:last-child) { margin-right: 0.75rem; margin-bottom: 0.5rem; } .fr-fieldset--inline .fr-fieldset__content .fr-radio-rich:first-child { margin-top: 0.75rem; } .fr-fieldset--inline .fr-fieldset__content .fr-radio-rich:first-child .fr-radio-rich__img { top: 1rem; } .fr-fieldset--inline .fr-fieldset__content .fr-radio-rich__img { top: 0.75rem; } .fr-fieldset--inline .fr-hint-text + .fr-fieldset__content .fr-radio-rich:first-child { margin-top: 1.5rem; } .fr-radio-rich__img { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-left: -1px; padding: 0.25rem; width: 5.5rem; min-width: 5.5rem; align-self: stretch; pointer-events: none; background-size: 100% 1px, 100% 1px, 1px 100%, 1px calc(100% - 0.5rem); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 100%, 100% 0, 0 0.25rem; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-radio-rich__img img, .fr-radio-rich__img svg { max-width: 3.5rem; max-height: 3.5rem; } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:hover + .fr-radio-rich__img { background-color: var(--hover); } .fr-radio-rich input[type=radio]:not(:disabled) ~ label:active + .fr-radio-rich__img { background-color: var(--active); } .fr-radio-rich input[type=radio]:disabled ~ .fr-radio-rich__img svg * { fill: var(--text-disabled-grey); } .fr-radio-rich input[type=radio]:checked ~ .fr-radio-rich__img { background-image: linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-radio-rich input[type=radio]:checked:disabled ~ .fr-radio-rich__img { background-image: linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--text-disabled-grey), var(--text-disabled-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } /* ¯¯¯¯¯¯¯¯¯ *\ CARD \* ˍˍˍˍˍˍˍˍˍ */ .fr-card { display: flex; flex-direction: column; position: relative; background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-card.fr-enlarge-link .fr-card__title a::after { --icon-size: 1.5rem; position: absolute; right: 2rem; bottom: 2rem; } .fr-card:not(.fr-card--no-border):not(.fr-card--shadow) { background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: 100% 100%, 0 0, 100% 0, 100% 0; padding: 1px; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-card--no-icon .fr-card__title a:not([target=_blank])::after, .fr-card:not(.fr-enlarge-link):not(.fr-card--download) .fr-card__title a:not([target=_blank])::after { content: none; } .fr-card__body { display: flex; flex-direction: column; height: 100%; flex: 1 1 auto; order: 2; padding: 0 2rem; } .fr-grid-row .fr-card { height: 100%; } .fr-card__header { order: 1; position: relative; flex: 0 0 auto; } .fr-card__header .fr-badges-group { position: absolute; top: 0; left: 0; padding: 0.75rem; } .fr-card.fr-enlarge-link:hover .fr-card__img, .fr-card.fr-enlarge-link:hover .fr-card__vid { --brightness: calc(100% + var(--brighten) * 10%); } .fr-card.fr-enlarge-link:active .fr-card__img, .fr-card.fr-enlarge-link:active .fr-card__vid { --brightness: calc(100% + var(--brighten) * 20%); } .fr-card__img, .fr-card__vid { filter: brightness(var(--brightness)); } .fr-card__img img, .fr-card__img svg, .fr-card__vid iframe, .fr-card__vid video { aspect-ratio: 1.7777777778; object-fit: cover; object-position: 50% 50%; } .fr-card__img img { display: block; } .fr-card__content { order: 1; display: flex; flex-direction: column; padding: 2rem; height: 100%; margin: 0 -2rem; } .fr-card__title { order: 2; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0; color: var(--text-title-grey); } .fr-card__title a::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-right-line.svg"); mask-image: url("../icons/system/arrow-right-line.svg"); --icon-size: 1rem; content: ""; margin-left: 0.5rem; } .fr-card__title [target=_blank]::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/external-link-line.svg"); mask-image: url("../icons/system/external-link-line.svg"); --icon-size: 1rem; content: ""; } .fr-card__desc { order: 3; font-size: 0.875rem; line-height: 1.5rem; margin-top: 0.75rem; margin-bottom: 0; } .fr-card__start { order: 1; margin-bottom: 0.25rem; } .fr-card__start .fr-badges-group, .fr-card__start .fr-tags-group { margin-bottom: 0.25rem; } .fr-card__start .fr-card__detail { margin-bottom: 0.75rem; } .fr-card__end { order: 4; display: flex; flex-direction: column; margin-top: 1rem; padding-top: 0.5rem; height: 100%; } .fr-card__detail { font-size: 0.75rem; line-height: 1.25rem; display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 0; color: var(--text-mention-grey); } .fr-card__detail[class^=fr-icon-]::before, .fr-card__detail[class*=" fr-icon-"]::before, .fr-card__detail[class^=fr-fi-]::before, .fr-card__detail[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-right: 0.5rem; } .fr-card.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__end { margin-bottom: -3rem; min-height: 2rem; padding-right: 2rem; justify-content: flex-end; } .fr-card.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__content { padding-bottom: 5rem; } .fr-card__footer { order: 2; padding: 0.5rem 2rem 2rem; margin: 0 -2rem; } .fr-card__footer .fr-btns-group, .fr-card__footer .fr-links-group { margin-bottom: -1rem; } .fr-card--sm .fr-card__header .fr-badge { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.125rem; padding: 0 0.375rem; } .fr-card--sm .fr-card__header .fr-badge::before, .fr-card--sm .fr-card__header .fr-badge::after { --icon-size: 0.75rem; } .fr-card--sm .fr-card__header .fr-tag { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.75rem; } .fr-card--sm .fr-card__header .fr-tag::before, .fr-card--sm .fr-card__header .fr-tag::after { --icon-size: 0.75rem; } .fr-card--sm .fr-card__content { padding: 1.5rem; } .fr-card--sm .fr-card__content .fr-badge { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.125rem; padding: 0 0.375rem; } .fr-card--sm .fr-card__content .fr-badge::before, .fr-card--sm .fr-card__content .fr-badge::after { --icon-size: 0.75rem; } .fr-card--sm .fr-card__content .fr-tag { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.75rem; } .fr-card--sm .fr-card__content .fr-tag::before, .fr-card--sm .fr-card__content .fr-tag::after { --icon-size: 0.75rem; } .fr-card--sm .fr-card__title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; } .fr-card--sm .fr-card__title a::after { --icon-size: 1rem; } .fr-card--sm .fr-card__desc { margin-top: 0.5rem; } .fr-card--sm .fr-card__start .fr-badges-group, .fr-card--sm .fr-card__start .fr-tags-group { margin-bottom: 0; } .fr-card--sm .fr-card__start .fr-card__detail { margin-bottom: 0.5rem; } .fr-card--sm .fr-card__end { margin-top: 0.75rem; padding-top: 0.25rem; margin-top: 1.5rem; padding-top: 0.5rem; } .fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__end { margin-bottom: -2rem; min-height: 1.25rem; padding-right: 1.5rem; } .fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__content { padding-bottom: 3.5rem; } .fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title a::after { --icon-size: 1rem; right: 1.5rem; bottom: 1.5rem; } .fr-card--sm .fr-card__footer { padding: 0.5rem 1.5rem 1.5rem; } .fr-card--lg .fr-card__content { padding: 2.5rem; } .fr-card--lg .fr-card__title { font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; } .fr-card--lg .fr-card__title a::after { --icon-size: 1.5rem; } .fr-card--lg .fr-card__desc { font-size: 1rem; line-height: 1.5rem; margin-top: 1rem; } .fr-card--lg .fr-card__start { margin-bottom: 0.5rem; } .fr-card--lg .fr-card__start .fr-badges-group, .fr-card--lg .fr-card__start .fr-tags-group { margin-bottom: 0.5rem; } .fr-card--lg .fr-card__start .fr-card__detail { margin-bottom: 1rem; } .fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__end { margin-bottom: -4rem; min-height: 2.5rem; padding-right: 2.5rem; } .fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__content { padding-bottom: 6.5rem; } .fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title a::after { --icon-size: 2rem; right: 2.5rem; bottom: 2.5rem; } .fr-card--lg .fr-card__footer { padding: 0.5rem 2.5rem 2.5rem; } .fr-card--download .fr-card__header { aspect-ratio: 16/9; } .fr-card--download .fr-card__header .fr-card__img { position: absolute; top: 0.5rem; left: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); } .fr-card--download .fr-card__header .fr-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .fr-card--download .fr-card__title a::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/download-line.svg"); mask-image: url("../icons/system/download-line.svg"); content: ""; } .fr-card__body > .fr-card__detail, .fr-card__body > .fr-card__title { margin-top: 2rem; } .fr-card__body > .fr-card__detail { margin-bottom: -1rem; } .fr-card__body > .fr-card__desc, .fr-card__body > .fr-card__title { margin-bottom: 2rem; } .fr-card__body > .fr-card__desc { margin-top: -1rem; } .fr-card.fr-enlarge-link:not(.fr-card--no-arrow) .fr-card__body > .fr-card__desc, .fr-card.fr-enlarge-link:not(.fr-card--no-arrow) .fr-card__body > .fr-card__title { margin-bottom: 4.5rem; } .fr-card.fr-enlarge-link:not(.fr-card--no-arrow) .fr-card__body > .fr-card__desc { margin-top: -3.5rem; } .fr-card--grey { background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-card--shadow { z-index: calc(var(--ground) + 500); 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-card--shadow.fr-card--grey { background-color: var(--background-contrast-raised-grey); --idle: transparent; --hover: var(--background-contrast-raised-grey-hover); --active: var(--background-contrast-raised-grey-active); } .fr-card--no-background { background-color: transparent; --hover: inherit; --active: inherit; } .fr-card--download:not(.fr-card--no-background) .fr-card__header { background-color: var(--background-alt-grey); --idle: transparent; --hover: var(--background-alt-grey-hover); --active: var(--background-alt-grey-active); } .fr-card__title a[href] { color: var(--text-action-high-blue-france); } .fr-card__title:disabled, a.fr-card__title:not([href]) { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } /* ¯¯¯¯¯¯¯¯¯ *\ CHECKBOX \* ˍˍˍˍˍˍˍˍˍ */ .fr-checkbox-group { position: relative; } .fr-checkbox-group input[type=checkbox] { position: absolute; margin: 0; width: 1.5rem; height: 1.5rem; opacity: 0; } .fr-checkbox-group input[type=checkbox] + label { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 2rem; --data-uri-svg: none; /** * 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 { content: ""; display: block; position: absolute; top: 0; left: -2rem; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border-radius: 0.25rem; background-size: 0.25rem 0.25rem, calc(100% - 0.25rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 0.25rem 0.25rem, calc(100% - 0.5rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 1rem; background-position: 0 0, 0.25rem 0, 100% 0, 0 0.25rem, 100% 100%, calc(100% - 0.25rem) 100%, 0 100%, 100% 0.25rem, center; background-repeat: no-repeat; background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg); } .fr-checkbox-group--sm input[type=checkbox] { top: 0.25rem; width: 1rem; height: 1rem; } .fr-checkbox-group--sm input[type=checkbox] + label { margin-left: 1.5rem; } .fr-checkbox-group--sm input[type=checkbox] + label::before { width: 1rem; height: 1rem; margin-top: 0.25rem; left: -1.5rem; } .fr-checkbox-group--error::before { content: ""; position: absolute; top: 0; left: -0.75rem; width: 2px; height: 100%; background-color: var(--border-plain-error); --idle: transparent; --hover: var(--border-plain-error-hover); --active: var(--border-plain-error-active); } .fr-checkbox-group--valid::before { content: ""; position: absolute; top: 0; left: -0.75rem; width: 2px; height: 100%; background-color: var(--border-plain-success); --idle: transparent; --hover: var(--border-plain-success-hover); --active: var(--border-plain-success-active); } .fr-checkbox-group .fr-message:first-child { margin-top: 1rem; } .fr-checkbox-group input[type=checkbox]:checked + label::before { background-color: var(--background-active-blue-france); background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), var(--data-uri-svg); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group input[type=checkbox]:disabled + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), var(--data-uri-svg); } .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { background-color: var(--background-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group--error input[type=checkbox] + label, .fr-checkbox-group--error input[type=checkbox]:checked + label { color: var(--text-default-error); } .fr-checkbox-group--error input[type=checkbox] + label::before, .fr-checkbox-group--error input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-checkbox-group--valid input[type=checkbox] + label, .fr-checkbox-group--valid input[type=checkbox]:checked + label { color: var(--text-default-success); } .fr-checkbox-group--valid input[type=checkbox] + label::before, .fr-checkbox-group--valid input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } .fr-fieldset--error .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-fieldset--valid .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } .fr-fieldset .fr-fieldset__content .fr-checkbox-group--sm label::before { margin-top: 0.25rem; } .fr-fieldset .fr-fieldset__content .fr-checkbox-group input[type=checkbox] { margin-top: 0.75rem; } /* ¯¯¯¯¯¯¯¯¯ *\ SEGMENTED \* ˍˍˍˍˍˍˍˍˍ */ .fr-segmented { position: relative; padding: 0; margin: 0; display: inline-flex; align-items: center; border: 0; } .fr-segmented__legend { margin-bottom: 0.75rem; padding: 0; } .fr-segmented__legend .fr-hint-text { margin-top: 0.25rem; } .fr-segmented__legend--inline { float: left; display: contents; } .fr-segmented__legend--inline + .fr-segmented__elements { margin-left: 1rem; } .fr-segmented__elements { display: flex; flex-direction: row; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-segmented__element { position: relative; } .fr-segmented .fr-segmented__element input { opacity: 0; } .fr-segmented input { position: absolute; margin: 0; width: 100%; height: 100%; z-index: -1; } .fr-segmented input + label { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; width: 100%; font-weight: 500; display: inline-flex; align-items: center; border-radius: 0.25rem; white-space: nowrap; } .fr-segmented input + label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-segmented input:not([disabled]):not(:checked) + label { -webkit-mask-image: linear-gradient(0deg, #fff 0, #fff 100%), linear-gradient(0deg, #fff 0, #fff 100%), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"); mask-image: linear-gradient(0deg, #fff 0, #fff 100%), linear-gradient(0deg, #fff 0, #fff 100%), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"), url("data:image/svg+xml;charset=uft8,"); -webkit-mask-size: calc(100% - 0.5rem) calc(100% - 0.75rem), calc(100% - 0.75rem) calc(100% - 0.5rem), 0.25rem 0.25rem, 0.25rem 0.25rem, 0.25rem 0.25rem, 0.25rem 0.25rem; mask-size: calc(100% - 0.5rem) calc(100% - 0.75rem), calc(100% - 0.75rem) calc(100% - 0.5rem), 0.25rem 0.25rem, 0.25rem 0.25rem, 0.25rem 0.25rem, 0.25rem 0.25rem; -webkit-mask-position: 0.25rem 0.375rem, 0.375rem 0.25rem, 0.25rem 0.25rem, calc(100% - 0.25rem) 0.25rem, 0.25rem calc(100% - 0.25rem), calc(100% - 0.25rem) calc(100% - 0.25rem); mask-position: 0.25rem 0.375rem, 0.375rem 0.25rem, 0.25rem 0.25rem, calc(100% - 0.25rem) 0.25rem, 0.25rem calc(100% - 0.25rem), calc(100% - 0.25rem) calc(100% - 0.25rem); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .fr-segmented input:not([disabled]):not(:checked) + label:hover { background-color: var(--hover); } .fr-segmented input:not([disabled]):not(:checked) + label:active { background-color: var(--active); } .fr-segmented--vertical .fr-segmented__elements { flex-direction: column; margin-left: 0; } .fr-segmented--vertical .fr-segmented__legend--inline { float: none; display: block; } .fr-segmented--no-legend legend { 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; display: block; } .fr-segmented--no-legend legend + .fr-segmented__elements { margin-left: 0; } .fr-segmented__element input:focus + label { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; outline-style: solid; } .fr-segmented__element input:focus:not(:focus-visible) + label { outline-style: none; } .fr-segmented__element input:focus-visible + label { outline-style: solid; } .fr-segmented--sm .fr-segmented__legend { font-size: 0.875rem; line-height: 1.5rem; } .fr-segmented--sm input + label { 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-segmented--sm input + label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-segmented__element label { color: var(--text-action-high-grey); } .fr-segmented__element input:checked + label { box-shadow: inset 0 0 0 1px var(--border-active-blue-france); color: var(--text-active-blue-france); } .fr-segmented__element input:checked:disabled + label { box-shadow: inset 0 0 0 1px var(--text-disabled-grey); color: var(--text-disabled-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ TOGGLE \* ˍˍˍˍˍˍˍˍˍ */ .fr-toggle { display: flex; flex-wrap: wrap; position: relative; padding: 1rem 0; --text-spacing: 0; --title-spacing: 0; } .fr-toggle input[type=checkbox] { width: 2.5rem; height: 1.5rem; position: absolute; opacity: 0; box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); } .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label[data-fr-unchecked-label][data-fr-checked-label]::before { content: attr(data-fr-checked-label); } .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::after { transform: translateX(1rem); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } .fr-toggle label { --toggle-status-width: auto; display: inline-flex; width: calc(100% - 2rem); min-height: 1.5rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-label-grey); } .fr-toggle label[data-fr-unchecked-label][data-fr-checked-label] { padding-left: 0; } .fr-toggle label[data-fr-unchecked-label][data-fr-checked-label]::before { content: attr(data-fr-unchecked-label); margin-right: calc(var(--toggle-status-width) - 0.5rem); margin-bottom: 1rem; } .fr-toggle label[data-fr-unchecked-label][data-fr-checked-label] + .fr-hint-text { margin-top: 0.5rem; } .fr-toggle label::before { content: ""; display: block; flex-shrink: 0; height: calc(1.25rem + 1px); padding-top: 1.75rem; font-size: 0.75rem; line-height: 1.25rem; border-radius: 0.75rem; margin-right: 2rem; min-width: 2.5rem; max-width: 2.5rem; background-repeat: no-repeat; color: var(--text-active-blue-france); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } .fr-toggle label::after { content: ""; display: flex; align-items: center; justify-content: center; position: absolute; top: 1rem; left: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-repeat: no-repeat; background-size: 1rem; background-position: center; color: var(--text-active-blue-france); box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-toggle .fr-hint-text { display: block; margin-top: 1rem; margin-bottom: 0; font-size: 0.75rem; line-height: 1.25rem; flex-basis: 100%; color: var(--text-mention-grey); } .fr-toggle--label-left .fr-toggle__input { order: 1; margin: 0 0 0 auto; } .fr-toggle--label-left .fr-toggle__input + label[data-fr-checked-label]::before { margin-right: 0; margin-left: calc(var(--toggle-status-width) - 0.5rem); } .fr-toggle--label-left .fr-toggle__label { justify-content: space-between; padding-left: 0; width: calc(100% - 2rem); flex: 1; } .fr-toggle--label-left .fr-toggle__label::before { flex-shrink: 0; order: 1; margin-left: 1rem; margin-right: 0; text-align: right; direction: rtl; } .fr-toggle--label-left .fr-toggle__label::after { left: auto; right: 1rem; } .fr-toggle--label-left .fr-hint-text { order: 2; } .fr-toggle__list { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; } .fr-fieldset .fr-toggle__list li:first-child .fr-toggle { padding-top: 0; } .fr-fieldset .fr-toggle__list li:first-child .fr-toggle label::after { top: 0; } :root[data-fr-theme=dark] .fr-toggle label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle input[type=checkbox]:checked { background-color: var(--background-active-blue-france); --idle: transparent; --hover: var(--background-active-blue-france-hover); --active: var(--background-active-blue-france-active); } .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::after { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle input[type=checkbox]:disabled { box-shadow: inset 0 0 0 1px var(--border-disabled-grey); } .fr-toggle input[type=checkbox]:disabled:checked { background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-toggle input[type=checkbox]:disabled:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle input[type=checkbox]:disabled:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle input[type=checkbox]:disabled:checked ~ .fr-toggle__label::after { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle input[type=checkbox]:disabled:checked ~ .fr-toggle__label::after { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle input[type=checkbox]:disabled ~ .fr-toggle__label::before { color: var(--text-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle input[type=checkbox]:disabled ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle input[type=checkbox]:disabled ~ .fr-toggle__label::after { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); } .fr-toggle--border-bottom { box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-toggle--error label, .fr-fieldset--error .fr-toggle label { color: var(--text-default-error); } .fr-toggle--error label::before, .fr-fieldset--error .fr-toggle label::before { color: var(--text-default-error); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle--error label::before, :root[data-fr-theme=dark] .fr-fieldset--error .fr-toggle label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle--error label::after, .fr-fieldset--error .fr-toggle label::after { box-shadow: inset 0 0 0 1px var(--border-plain-error); } .fr-toggle--error input[type=checkbox]:checked ~ .fr-toggle__label::before, .fr-fieldset--error .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle--error input[type=checkbox]:checked ~ .fr-toggle__label::before, :root[data-fr-theme=dark] .fr-fieldset--error .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle--valid label, .fr-fieldset--valid .fr-toggle label { color: var(--text-default-success); } .fr-toggle--valid label::before, .fr-fieldset--valid .fr-toggle label::before { color: var(--text-default-success); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle--valid label::before, :root[data-fr-theme=dark] .fr-fieldset--valid .fr-toggle label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-toggle--valid label::after, .fr-fieldset--valid .fr-toggle label::after { box-shadow: inset 0 0 0 1px var(--border-plain-success); } .fr-toggle--valid input[type=checkbox]:checked ~ .fr-toggle__label::before, .fr-fieldset--valid .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-toggle--valid input[type=checkbox]:checked ~ .fr-toggle__label::before, :root[data-fr-theme=dark] .fr-fieldset--valid .fr-toggle input[type=checkbox]:checked ~ .fr-toggle__label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } /* ¯¯¯¯¯¯¯¯¯ *\ SKIPLINK \* ˍˍˍˍˍˍˍˍˍ */ .fr-skiplinks { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; position: absolute; top: 0; padding: 1rem 0; transform: translateY(-100%); opacity: 0; background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-skiplinks:focus-within { position: relative; transform: translateY(0); opacity: 1; } .fr-skiplinks__list { display: flex; flex-direction: column; } .fr-skiplinks__list > li { margin-bottom: 1rem; } .fr-skiplinks__list > li::before { content: none; } .fr-skiplinks__list > li .fr-link { font-size: 1rem; line-height: 1.5rem; padding: 0 0; } .fr-skiplinks__list > li .fr-link::before, .fr-skiplinks__list > li .fr-link::after { --icon-size: 1rem; } .fr-skiplinks__list > li:last-child { margin-bottom: 0; } .fr-skiplinks__list:focus-within { position: relative; transform: translateY(0); } /* ¯¯¯¯¯¯¯¯¯ *\ SELECT \* ˍˍˍˍˍˍˍˍˍ */ .fr-select { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border-radius: 0.25rem 0.25rem 0 0; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 2.5rem 0.5rem 1rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) 50%; background-size: 1rem 1rem; color: var(--text-default-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); box-shadow: inset 0 -2px 0 0 var(--border-plain-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); /** * Mixin pour gérer l'état disabled */ /** * On applique un style lorsque la valeur est automatiquement remplie par le navigateur * sur les navigateurs webkit. */ } .fr-select-group { position: relative; } .fr-select-group .fr-message:first-child { margin-top: 1rem; } .fr-select-group--valid::before, .fr-select-group--error::before, .fr-select-group--info::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } :root[data-fr-theme=dark] .fr-select { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-fieldset--valid .fr-select, .fr-select-group--valid .fr-select { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-select, .fr-select-group--error .fr-select { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } .fr-select-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-select-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-select-group--info::before { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } .fr-select:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-select:disabled { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-select:-webkit-autofill, .fr-select:-webkit-autofill:hover, .fr-select:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 var(--border-plain-grey), inset 0 0 0 1000px var(--background-contrast-blue-france); -webkit-text-fill-color: var(--text-label-grey); } /* ¯¯¯¯¯¯¯¯¯ *\ CALLOUT \* ˍˍˍˍˍˍˍˍˍ */ .fr-callout { position: relative; padding: 1.5rem; --title-spacing: 0 0 0.5rem; --text-spacing: 0; margin: 0 0 1.5rem; background-size: 0.25rem 100%; background-position: 0 0; background-repeat: no-repeat; /** * Inclusion de l'icône (optionnel) */ /** * Ajout de marge quand on inclut un bouton (optionnel) */ background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); background-image: linear-gradient(0deg, var(--border-default-blue-france), var(--border-default-blue-france)); } .fr-callout[class^=fr-icon-]::before, .fr-callout[class*=" fr-icon-"]::before, .fr-callout[class^=fr-fi-]::before, .fr-callout[class*=" fr-fi-"]::before { display: block; margin: -0.5rem 0 0.5rem; } .fr-callout__title { font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; color: var(--text-title-grey); } .fr-callout__text { font-size: 1.125rem; line-height: 1.75rem; } .fr-callout .fr-btn { margin-top: 1rem; } .fr-callout::before { color: var(--text-title-grey); } .fr-callout--green-tilleul-verveine { background-image: linear-gradient(0deg, var(--border-default-green-tilleul-verveine), var(--border-default-green-tilleul-verveine)); background-color: var(--background-contrast-green-tilleul-verveine); --idle: transparent; --hover: var(--background-contrast-green-tilleul-verveine-hover); --active: var(--background-contrast-green-tilleul-verveine-active); } .fr-callout--green-bourgeon { background-image: linear-gradient(0deg, var(--border-default-green-bourgeon), var(--border-default-green-bourgeon)); background-color: var(--background-contrast-green-bourgeon); --idle: transparent; --hover: var(--background-contrast-green-bourgeon-hover); --active: var(--background-contrast-green-bourgeon-active); } .fr-callout--green-emeraude { background-image: linear-gradient(0deg, var(--border-default-green-emeraude), var(--border-default-green-emeraude)); background-color: var(--background-contrast-green-emeraude); --idle: transparent; --hover: var(--background-contrast-green-emeraude-hover); --active: var(--background-contrast-green-emeraude-active); } .fr-callout--green-menthe { background-image: linear-gradient(0deg, var(--border-default-green-menthe), var(--border-default-green-menthe)); background-color: var(--background-contrast-green-menthe); --idle: transparent; --hover: var(--background-contrast-green-menthe-hover); --active: var(--background-contrast-green-menthe-active); } .fr-callout--green-archipel { background-image: linear-gradient(0deg, var(--border-default-green-archipel), var(--border-default-green-archipel)); background-color: var(--background-contrast-green-archipel); --idle: transparent; --hover: var(--background-contrast-green-archipel-hover); --active: var(--background-contrast-green-archipel-active); } .fr-callout--blue-ecume { background-image: linear-gradient(0deg, var(--border-default-blue-ecume), var(--border-default-blue-ecume)); background-color: var(--background-contrast-blue-ecume); --idle: transparent; --hover: var(--background-contrast-blue-ecume-hover); --active: var(--background-contrast-blue-ecume-active); } .fr-callout--blue-cumulus { background-image: linear-gradient(0deg, var(--border-default-blue-cumulus), var(--border-default-blue-cumulus)); background-color: var(--background-contrast-blue-cumulus); --idle: transparent; --hover: var(--background-contrast-blue-cumulus-hover); --active: var(--background-contrast-blue-cumulus-active); } .fr-callout--purple-glycine { background-image: linear-gradient(0deg, var(--border-default-purple-glycine), var(--border-default-purple-glycine)); background-color: var(--background-contrast-purple-glycine); --idle: transparent; --hover: var(--background-contrast-purple-glycine-hover); --active: var(--background-contrast-purple-glycine-active); } .fr-callout--pink-macaron { background-image: linear-gradient(0deg, var(--border-default-pink-macaron), var(--border-default-pink-macaron)); background-color: var(--background-contrast-pink-macaron); --idle: transparent; --hover: var(--background-contrast-pink-macaron-hover); --active: var(--background-contrast-pink-macaron-active); } .fr-callout--pink-tuile { background-image: linear-gradient(0deg, var(--border-default-pink-tuile), var(--border-default-pink-tuile)); background-color: var(--background-contrast-pink-tuile); --idle: transparent; --hover: var(--background-contrast-pink-tuile-hover); --active: var(--background-contrast-pink-tuile-active); } .fr-callout--yellow-tournesol { background-image: linear-gradient(0deg, var(--border-default-yellow-tournesol), var(--border-default-yellow-tournesol)); background-color: var(--background-contrast-yellow-tournesol); --idle: transparent; --hover: var(--background-contrast-yellow-tournesol-hover); --active: var(--background-contrast-yellow-tournesol-active); } .fr-callout--yellow-moutarde { background-image: linear-gradient(0deg, var(--border-default-yellow-moutarde), var(--border-default-yellow-moutarde)); background-color: var(--background-contrast-yellow-moutarde); --idle: transparent; --hover: var(--background-contrast-yellow-moutarde-hover); --active: var(--background-contrast-yellow-moutarde-active); } .fr-callout--orange-terre-battue { background-image: linear-gradient(0deg, var(--border-default-orange-terre-battue), var(--border-default-orange-terre-battue)); background-color: var(--background-contrast-orange-terre-battue); --idle: transparent; --hover: var(--background-contrast-orange-terre-battue-hover); --active: var(--background-contrast-orange-terre-battue-active); } .fr-callout--brown-cafe-creme { background-image: linear-gradient(0deg, var(--border-default-brown-cafe-creme), var(--border-default-brown-cafe-creme)); background-color: var(--background-contrast-brown-cafe-creme); --idle: transparent; --hover: var(--background-contrast-brown-cafe-creme-hover); --active: var(--background-contrast-brown-cafe-creme-active); } .fr-callout--brown-caramel { background-image: linear-gradient(0deg, var(--border-default-brown-caramel), var(--border-default-brown-caramel)); background-color: var(--background-contrast-brown-caramel); --idle: transparent; --hover: var(--background-contrast-brown-caramel-hover); --active: var(--background-contrast-brown-caramel-active); } .fr-callout--brown-opera { background-image: linear-gradient(0deg, var(--border-default-brown-opera), var(--border-default-brown-opera)); background-color: var(--background-contrast-brown-opera); --idle: transparent; --hover: var(--background-contrast-brown-opera-hover); --active: var(--background-contrast-brown-opera-active); } .fr-callout--beige-gris-galet { background-image: linear-gradient(0deg, var(--border-default-beige-gris-galet), var(--border-default-beige-gris-galet)); background-color: var(--background-contrast-beige-gris-galet); --idle: transparent; --hover: var(--background-contrast-beige-gris-galet-hover); --active: var(--background-contrast-beige-gris-galet-active); } /* ¯¯¯¯¯¯¯¯¯ *\ MODAL \* ˍˍˍˍˍˍˍˍˍ */ .fr-modal { border: none; color: inherit; visibility: hidden; opacity: 0; background-color: rgba(22, 22, 22, 0.64); --ground: 2000; z-index: 1750; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s, visibility 0.3s; /** * Modifier pour fixer la modale en haut en mobile (par defaut en bas) */ } .fr-modal > .fr-container { pointer-events: none; } .fr-modal:focus { outline: none; } .fr-modal::before { content: ""; display: block; width: 0; height: 2rem; flex: 1 0 2rem; } .fr-modal::after { content: none; display: block; width: 0; height: 2rem; flex: 1 0 2rem; } .fr-modal--top::before { content: none; } .fr-modal--top::after { content: ""; } .fr-modal--opened { visibility: inherit; opacity: 1; width: 100%; height: 100%; transition: opacity 0.3s, visibility 0.3s; } .fr-modal__body { --modal-max-height: calc(100vh - 2rem); pointer-events: all; overflow-y: auto; flex: 1 1 auto; max-height: var(--modal-max-height); z-index: calc(var(--ground) + 2000); background-color: var(--background-lifted-grey); --idle: transparent; --hover: var(--background-lifted-grey-hover); --active: var(--background-lifted-grey-active); filter: drop-shadow(var(--lifted-shadow)); } .fr-modal__header { flex: auto 0 0; display: flex; align-items: center; padding: 1rem 1rem 0.5rem; } .fr-modal__content { padding-left: 1rem; padding-right: 1rem; margin-bottom: 3.5rem; } .fr-modal__footer { flex: auto 0 0; display: flex; padding: 1rem; margin-top: -2.5rem; position: sticky; bottom: 0; transition: box-shadow 0.3s; background-color: var(--background-lifted-grey); --idle: transparent; --hover: var(--background-lifted-grey-hover); --active: var(--background-lifted-grey-active); } .fr-modal__footer .fr-btns-group { margin-bottom: -1rem; width: calc(100% + 1rem); } .fr-modal__title { --title-spacing: 0 0 1rem 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; color: var(--text-title-grey); } .fr-modal__title[class^=fr-icon-], .fr-modal__title[class*=" fr-icon-"], .fr-modal__title[class^=fr-fi-], .fr-modal__title[class*=" fr-fi-"] { margin-right: 0.5rem; } .fr-modal__body.fr-scroll-divider .fr-modal__footer { background-position: 0 0; background-repeat: no-repeat; background-size: 100% 1px; background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } /* ¯¯¯¯¯¯¯¯¯ *\ 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); } /* ¯¯¯¯¯¯¯¯¯ *\ SHARE \* ˍˍˍˍˍˍˍˍˍ */ .fr-share { display: flex; flex-direction: column; --text-spacing: 0 0 1rem; --title-spacing: 0 0 1rem; } .fr-share__title { font-size: 1rem; line-height: 1.5rem; order: 1; } .fr-share__text { font-size: 0.75rem; line-height: 1.25rem; order: 3; color: var(--text-mention-grey); } .fr-share .fr-btns-group { width: auto; order: 2; } .fr-share .fr-btns-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; justify-content: flex-start; } .fr-share .fr-btns-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-share .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before { margin-left: 0; margin-right: 0.5rem; 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%; --icon-size: 1.5rem; content: ""; } .fr-btn--facebook::before { -webkit-mask-image: url("../icons/logo/facebook-circle-line.svg"); mask-image: url("../icons/logo/facebook-circle-line.svg"); } .fr-btn--linkedin::before { -webkit-mask-image: url("../icons/logo/linkedin-box-line.svg"); mask-image: url("../icons/logo/linkedin-box-line.svg"); } .fr-btn--mastodon::before { -webkit-mask-image: url("../icons/logo/mastodon-line.svg"); mask-image: url("../icons/logo/mastodon-line.svg"); } .fr-btn--threads::before { -webkit-mask-image: url("../icons/logo/threads-line.svg"); mask-image: url("../icons/logo/threads-line.svg"); } .fr-btn--twitter::before { -webkit-mask-image: url("../icons/logo/twitter-line.svg"); mask-image: url("../icons/logo/twitter-line.svg"); } .fr-btn--twitter-x::before { -webkit-mask-image: url("../icons/logo/twitter-x-line.svg"); mask-image: url("../icons/logo/twitter-x-line.svg"); } .fr-btn--mail::before { -webkit-mask-image: url("../icons/business/mail-line.svg"); mask-image: url("../icons/business/mail-line.svg"); } .fr-btn--copy::before { -webkit-mask-image: url("../icons/business/links-fill.svg"); mask-image: url("../icons/business/links-fill.svg"); } .fr-share__group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; margin-left: -0.5rem; margin-right: -0.5rem; width: auto; order: 2; display: flex; } .fr-share__group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-share__group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-share__link { --underline-img: none; --hover-tint: var(--hover); display: inline-flex; margin-left: 0.5rem; margin-right: 0.5rem; margin-bottom: 1rem; 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-share__link--facebook { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share__link--facebook::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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/logo/facebook-circle-line.svg"); mask-image: url("../icons/logo/facebook-circle-line.svg"); content: ""; } .fr-share__link--twitter { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share__link--twitter::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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/logo/twitter-line.svg"); mask-image: url("../icons/logo/twitter-line.svg"); content: ""; } .fr-share__link--linkedin { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share__link--linkedin::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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/logo/linkedin-box-line.svg"); mask-image: url("../icons/logo/linkedin-box-line.svg"); content: ""; } .fr-share__link--mail { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share__link--mail::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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/business/mail-line.svg"); mask-image: url("../icons/business/mail-line.svg"); content: ""; } .fr-share__link--copy { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-share__link--copy::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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/business/links-fill.svg"); mask-image: url("../icons/business/links-fill.svg"); content: ""; } .fr-share .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-share .fr-btn:disabled, .fr-share 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-share__link:disabled, a.fr-share__link: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; } /* ¯¯¯¯¯¯¯¯¯ *\ FOOTER \* ˍˍˍˍˍˍˍˍˍ */ .fr-footer { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; width: 100%; padding-top: 2rem; /** * Conteneur du bloc marque, avec le logo principal et éventuellement * un logo opérateur */ /** * Hauteur auto pour le logo opérateur */ /** * Contenu texte simple */ /** * Liste des liens situés en dessous de la partie texte */ /** * Catégorie (optionnel) */ /** * Style de la liste */ /** * Style du lien */ /** * Liste de liens avec séparateur */ /** * Style du lien de la liste */ /** * Copyright */ /** * Container des logos partenaires (principaux et secondaires) */ /** * Container des logos partenaires principaux */ /** * Container des logos partenaires secondaires */ box-shadow: inset 0 2px 0 0 var(--border-plain-blue-france), inset 0 -1px 0 0 var(--border-default-grey); } .fr-footer__body { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .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) */ } .fr-footer__brand .fr-logo { font-size: 1.05rem; padding: 1rem; margin: -1rem; } .fr-footer__brand .fr-logo::before { width: 2.75rem; height: 1rem; margin-bottom: 0.3333333333rem; 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.2083333333rem; } [data-fr-theme=dark] .fr-footer__brand .fr-logo::after { background-position: -2.625rem 100%; } .fr-footer__brand-link { display: flex; flex-direction: row; --external-link-content: none; } .fr-footer__brand .fr-logo + .fr-footer__brand-link { margin-left: 1.5rem; } .fr-footer__logo { height: auto; max-height: 100%; } /** * La partie "content" représente les informations sous forme de texte rajoutées dans le footer * ainsi que les éventuels liens simples */ .fr-footer__content { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-top: 1.5rem; } .fr-footer__content-desc { --underline-img: linear-gradient(0deg, currentColor, currentColor); --text-spacing: 0 0 0 0; width: 100%; font-size: 0.875rem; line-height: 1.5rem; } .fr-footer__content-list { display: flex; flex-direction: row; align-self: center; margin-bottom: -0.5rem; margin-top: 1rem; flex-wrap: wrap; } .fr-footer__content-list > li { margin-right: 1.25rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .fr-footer__content-list > li::before { content: none; } .fr-footer__content-list > li:last-child { margin-right: 0; } .fr-footer__content-link { font-weight: bold; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-default-grey); } .fr-footer__content-link:not(:hover):not(:active) { --underline-idle-width: 0; } /** * 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 */ .fr-footer__top { display: flex; margin: -1.875rem 0 1.5rem; padding: 2rem 0 1.25rem; background-color: var(--background-alt-grey); --idle: transparent; --hover: var(--background-alt-grey-hover); --active: var(--background-alt-grey-active); } .fr-footer__top-cat { margin: 0 0 0.75rem; font-size: 0.75rem; line-height: 1.25rem; display: block; font-weight: 700; text-align: left; color: var(--text-title-grey); } .fr-footer__top-list { font-size: 0.75rem; line-height: 1.25rem; margin: 0; } .fr-footer__top-list li { margin-bottom: 0.75rem; } .fr-footer__top-link { font-size: 0.75rem; line-height: 1.25rem; } .fr-footer__top-link:not(:hover):not(:active) { --underline-idle-width: 0; } /** * La partie "bottom" du footer est constituée d'une liste de liens simples (ferrée à gauche) * ainsi que du copyright (ferré à droite) */ .fr-footer__bottom { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 2.5rem; box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-footer__bottom .fr-btn { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.25rem; padding: 0 0.5rem; overflow: initial; max-width: 100%; max-height: none; display: inline; color: var(--text-mention-grey); } .fr-footer__bottom .fr-btn::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-footer__bottom-list { padding: 0.5rem 0; width: 100%; margin: 0; } .fr-footer__bottom-item { position: relative; margin: 0.5rem 0 0 0.25rem; display: inline; } .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.625rem; margin-top: 0.625rem; box-shadow: inset 0 0 0 1px var(--border-default-grey); } .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; color: var(--text-mention-grey); } .fr-footer__bottom-link:not(:hover):not(:active) { --underline-idle-width: 0; } .fr-footer__bottom-copy { --text-spacing: 0 0 1rem 0; margin-top: 0.5rem; color: var(--text-mention-grey); } .fr-footer__bottom-copy * { font-size: 0.75rem; line-height: 1.25rem; } /** * La partie "partners" du footer est constituée de logos organisés * en partenaires principaux (ferré à gauche) et secondaires (ferrés à droite) */ .fr-footer__partners { margin-top: 1rem; padding-top: 1rem; /** * On surcharge le style du logo de base */ box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-footer__partners a { display: flex; align-items: center; justify-content: center; } .fr-footer__partners .fr-footer__logo { width: auto; height: auto; background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-footer__partners + .fr-footer__bottom { margin-top: 0.5rem; } .fr-footer__partners-title { --title-spacing: 0 0 0.75rem 0; font-size: 0.875rem; line-height: 1.5rem; font-weight: 400; flex-basis: 100%; text-align: center; color: var(--text-default-grey); } .fr-footer__partners-link { --external-link-content: none; } .fr-footer__partners-logos { display: flex; flex-direction: column; flex-wrap: wrap; margin: 0 0 -0.5rem 0; } .fr-footer__partners-main { display: flex; flex-direction: row; justify-content: center; margin-bottom: 2rem; } .fr-footer__partners-sub { margin-bottom: 0.5rem; /** * On surcharge le style du lien pour les logos secondaires */ } .fr-footer__partners-sub, .fr-footer__partners-sub > ul { display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; } .fr-footer__partners-sub > li:first-child, .fr-footer__partners-sub > ul > li:first-child { margin-left: 0; } .fr-footer__partners-sub .fr-footer__partners-link { margin-bottom: 1rem; } .fr-footer__partners .fr-footer__partners-link, .fr-footer__partners .fr-footer__partners-link:hover, .fr-footer__partners .fr-footer__partners-link:active { background: #fff; } /* ¯¯¯¯¯¯¯¯¯ *\ TILE \* ˍˍˍˍˍˍˍˍˍ */ .fr-tile { position: relative; display: flex; flex-direction: column; --text-spacing: 0; --title-spacing: 0 0 0.25rem; background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 100%, 0 0, 100% 0, 100% 0; padding: 2rem 2rem 2.25rem; text-align: center; background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-grid-row .fr-tile { height: 100%; } .fr-tile.fr-enlarge-link:hover .fr-tile__pictogram { --brightness: calc(100% + var(--brighten) * 10%); } .fr-tile.fr-enlarge-link:active .fr-tile__pictogram { --brightness: calc(100% + var(--brighten) * 20%); } .fr-tile__header { order: 1; margin-bottom: 1rem; } .fr-tile__pictogram { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 5rem; height: 5rem; margin: 0 auto; overflow: hidden; } .fr-tile__pictogram > svg { width: 100%; height: 100%; } .fr-tile__content { display: flex; flex-direction: column; align-items: center; height: 100%; } .fr-tile__body { height: 100%; order: 2; flex: 1 1 auto; } .fr-tile.fr-enlarge-link .fr-tile__title a::before, .fr-tile.fr-enlarge-link .fr-tile__title a::after { --icon-size: 1.5rem; position: absolute; right: 2rem; bottom: 2.25rem; } .fr-tile--no-icon .fr-tile__title a:not([target=_blank])::after, .fr-tile:not(.fr-enlarge-link):not(.fr-tile--download) .fr-tile__title a:not([target=_blank])::after { content: none; } .fr-tile__title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; margin-bottom: 0.5rem; order: 2; color: var(--text-title-grey); } .fr-tile__title::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background-position: 0 100%; background-size: 100% 0.25rem; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)); } .fr-tile__title a::before { background-position: 0 100%; background-size: 100% 0.25rem; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france)); } .fr-tile__title a::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-right-line.svg"); mask-image: url("../icons/system/arrow-right-line.svg"); --icon-size: 1rem; content: ""; margin-left: 0.5rem; } .fr-tile__title [target=_blank]::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/external-link-line.svg"); mask-image: url("../icons/system/external-link-line.svg"); --icon-size: 1rem; content: ""; } .fr-tile__desc { font-size: 1rem; line-height: 1.5rem; flex: 1 1 auto; order: 3; } .fr-tile__start { order: 1; margin-bottom: 0.75rem; } .fr-tile__start .fr-badges-group, .fr-tile__start .fr-tags-group { margin-bottom: -0.5rem; } .fr-tile__detail { font-size: 0.75rem; line-height: 1.25rem; display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 0; margin-top: 0.75rem; order: 4; } .fr-tile__detail[class^=fr-icon-]::before, .fr-tile__detail[class*=" fr-icon-"]::before, .fr-tile__detail[class^=fr-fi-]::before, .fr-tile__detail[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-right: 0.5rem; } .fr-tile.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__content { padding-bottom: 2.5rem; } .fr-tile--sm { padding: 1.5rem 1.5rem 1.75rem; } .fr-tile--sm .fr-badge { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.125rem; padding: 0 0.375rem; } .fr-tile--sm .fr-badge::before, .fr-tile--sm .fr-badge::after { --icon-size: 0.75rem; } .fr-tile--sm .fr-tag { font-size: 0.75rem; line-height: 1.25rem; min-height: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.75rem; } .fr-tile--sm .fr-tag::before, .fr-tile--sm .fr-tag::after { --icon-size: 0.75rem; } .fr-tile--sm .fr-tile__title { font-size: 1rem; line-height: 1.5rem; margin-bottom: 0.25rem; } .fr-tile--sm .fr-tile__title a::after { --icon-size: 1rem; } .fr-tile--sm .fr-tile__desc { font-size: 0.875rem; line-height: 1.5rem; } .fr-tile--sm .fr-tile__start { margin-bottom: 0.5rem; } .fr-tile--sm .fr-tile__pictogram { width: 3.5rem; height: 3.5rem; } .fr-tile--sm.fr-tile--horizontal .fr-tile__header { margin-right: 1.5rem; } .fr-tile--sm.fr-tile--horizontal .fr-tile__pictogram { width: 2.5rem; height: 2.5rem; } .fr-tile--sm.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__title a::after { --icon-size: 1rem; position: absolute; right: 1.5rem; bottom: 1.75rem; } .fr-tile--sm.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__content { padding-bottom: 2rem; } .fr-tile--horizontal, .fr-tile--download { flex-direction: row; align-items: flex-start; justify-content: center; text-align: left; } .fr-tile--horizontal .fr-tile__header, .fr-tile--download .fr-tile__header { margin-right: 2rem; margin-bottom: 0; } .fr-tile--horizontal .fr-tile__pictogram, .fr-tile--download .fr-tile__pictogram { width: 4rem; height: 4rem; } .fr-tile--horizontal .fr-tile__content, .fr-tile--download .fr-tile__content { align-items: flex-start; } .fr-tile--horizontal:not(.fr-tile--no-icon) .fr-tile__detail, .fr-tile--download:not(.fr-tile--no-icon) .fr-tile__detail { padding-right: 2rem; margin-bottom: -2.5rem; margin-top: 1.25rem; } .fr-tile--horizontal:not(.fr-tile--no-icon) .fr-tile__content, .fr-tile--download:not(.fr-tile--no-icon) .fr-tile__content { padding-bottom: 2.5rem; } .fr-tile--horizontal:not(.fr-tile--no-icon).fr-tile--sm .fr-tile__detail, .fr-tile--download:not(.fr-tile--no-icon).fr-tile--sm .fr-tile__detail { padding-right: 2rem; margin-bottom: -2rem; margin-top: 0.75rem; } .fr-tile--horizontal:not(.fr-tile--no-icon).fr-tile--sm .fr-tile__content, .fr-tile--download:not(.fr-tile--no-icon).fr-tile--sm .fr-tile__content { padding-bottom: 2rem; } .fr-tile.fr-tile--download .fr-tile__title a::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/download-line.svg"); mask-image: url("../icons/system/download-line.svg"); content: ""; } .fr-tile:not(.fr-tile--no-border):not(.fr-tile--shadow) { background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)); } .fr-tile--grey { background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-tile--shadow { z-index: calc(var(--ground) + 500); 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-tile--shadow.fr-tile--grey { background-color: var(--background-contrast-raised-grey); --idle: transparent; --hover: var(--background-contrast-raised-grey-hover); --active: var(--background-contrast-raised-grey-active); } .fr-tile--no-background { background-color: transparent; --hover: inherit; --active: inherit; } .fr-tile__title:disabled, a.fr-tile__title:not([href]) { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-tile__title a { color: var(--text-action-high-blue-france); } .fr-tile__title a:not([href]) { color: var(--text-disabled-grey); } .fr-tile__title a:not([href])::before { background-image: linear-gradient(0deg, var(--border-disabled-grey), var(--border-disabled-grey)); } .fr-tile__img { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; overflow: hidden; filter: brightness(var(--brightness)); } .fr-tile__img > svg { width: 100%; height: 100%; } .fr-tile__body > .fr-tile__desc { padding-bottom: 2.5rem; } .fr-tile--horizontal .fr-tile__img { width: 3rem; height: 3rem; margin: 0 1.5rem 0 0; } /* ¯¯¯¯¯¯¯¯¯ *\ TRANSLATE \* ˍˍˍˍˍˍˍˍˍ */ .fr-translate { --rows: 8; position: relative; } .fr-translate .fr-translate__btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; font-weight: 500; min-height: 3rem; width: 100%; } .fr-translate .fr-translate__btn::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/editor/translate-2.svg"); mask-image: url("../icons/editor/translate-2.svg"); content: ""; } .fr-translate .fr-translate__btn::after { transition: transform 0.3s; 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: auto; } .fr-translate .fr-translate__btn[aria-expanded=true]::after { transform: rotate(-180deg); } .fr-translate__language { white-space: nowrap; } .fr-translate__language[aria-current]:not([aria-current=false]) { display: none; } .fr-translate__menu { margin: 0; } .fr-translate .fr-nav__item::before { content: none; } .fr-translate .fr-menu__list { width: auto; padding: 0; } .fr-translate .fr-translate__btn[aria-expanded=true] { color: var(--text-active-blue-france); background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); } .fr-translate .fr-translate__btn[aria-expanded=true]:hover { background-color: var(--hover-tint); } .fr-translate .fr-translate__btn[aria-expanded=true]:active { background-color: var(--active-tint); } .fr-translate__menu .fr-translate__language { box-shadow: none; } /* ¯¯¯¯¯¯¯¯¯ *\ TRANSCRIPTION \* ˍˍˍˍˍˍˍˍˍ */ .fr-transcription { position: relative; width: 100%; } .fr-transcription::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-transcription__btn { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; font-weight: 500; font-size: 1rem; line-height: 1.5rem; min-height: 3rem; overflow: initial; max-width: 100%; max-height: none; width: 100%; text-align: left; margin: 0; padding: 0.75rem 1rem; color: var(--text-action-high-blue-france); } .fr-transcription__btn::before, .fr-transcription__btn::after { display: block; } .fr-transcription__btn::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.25rem; 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"); content: ""; margin-right: 0; margin-left: auto; transition: transform 0.3s; } .fr-transcription__btn::before { content: none; 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/media/align-left.svg"); mask-image: url("../icons/media/align-left.svg"); --icon-size: 1rem; content: ""; margin-right: 0.5rem; } .fr-transcription__btn[aria-expanded=true]::after { transform: rotate(-180deg); } .fr-transcription__content::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-transcription__footer { position: relative; padding: 0.75rem 1rem; margin: 0; } .fr-transcription__footer::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-transcription__actions-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: center; justify-content: flex-end; flex-wrap: nowrap; } .fr-transcription__actions-group > li, .fr-transcription__actions-group > div { width: 100%; max-width: 100%; } .fr-transcription__actions-group .fr-btn { width: calc(100% - 1rem); margin: 0 0.5rem 1rem; justify-content: center; width: auto; margin-left: 0.5rem; margin-right: 0.5rem; font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; margin-bottom: 0; margin-right: 0; } .fr-transcription__actions-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-transcription__actions-group .fr-btn::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-transcription__actions-group .fr-btn::before { content: none; } .fr-transcription__actions-group .fr-link { font-size: 0.875rem; line-height: 1.5rem; padding: 0 0; } .fr-transcription__actions-group .fr-link::before, .fr-transcription__actions-group .fr-link::after { --icon-size: 1rem; } .fr-transcription__actions-group > *:not(:first-child) { margin-left: 1rem; } .fr-transcription .fr-collapse { display: flex; flex-direction: column-reverse; } .fr-transcription .fr-collapse--expanded { margin: 0 0.0625rem; } .fr-transcription .fr-modal:not(.fr-modal--opened) { visibility: inherit; opacity: inherit; background-color: inherit; position: relative; z-index: auto; } .fr-transcription .fr-modal:not(.fr-modal--opened)::after { content: none; } .fr-transcription .fr-modal:not(.fr-modal--opened)::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 1px 0 0 var(--border-default-grey); } .fr-transcription .fr-modal:not(.fr-modal--opened) > .fr-container { padding: 0.0625rem 0; } .fr-transcription .fr-modal:not(.fr-modal--opened) > .fr-container > .fr-grid-row { display: inherit; } .fr-transcription .fr-modal:not(.fr-modal--opened) > .fr-container > .fr-grid-row > [class^=fr-col-], .fr-transcription .fr-modal:not(.fr-modal--opened) > .fr-container > .fr-grid-row > [class*=" fr-col-"], .fr-transcription .fr-modal:not(.fr-modal--opened) > .fr-container > .fr-grid-row > .fr-col { flex: inherit; width: inherit; max-width: inherit; } .fr-transcription .fr-modal:not(.fr-modal--opened) .fr-modal__body { filter: inherit; max-height: inherit; background-color: inherit; } .fr-transcription .fr-modal:not(.fr-modal--opened) .fr-modal__header { display: none; } .fr-transcription .fr-modal:not(.fr-modal--opened) .fr-modal__content { --transcription-max-height: 9.5rem; overflow-y: auto; max-height: var(--transcription-max-height); margin: 0; padding: 1rem; } .fr-transcription .fr-modal:not(.fr-modal--opened) .fr-modal__title { display: none; } .fr-transcription .fr-modal--opened .fr-transcription__footer { display: none; } .fr-transcription__btn[aria-expanded=true] { background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); } /* ¯¯¯¯¯¯¯¯¯ *\ INPUT \* ˍˍˍˍˍˍˍˍˍ */ .fr-input { display: block; width: 100%; border-radius: 0.25rem 0.25rem 0 0; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 1rem; color: var(--text-default-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); box-shadow: inset 0 -2px 0 0 var(--border-plain-grey); } .fr-input:not(textarea) { max-height: 2.5rem; } .fr-input::placeholder { opacity: 1; font-style: italic; color: var(--text-mention-grey); } .fr-input::-webkit-contacts-auto-fill-button { cursor: pointer; background-color: var(--text-label-grey); --idle: transparent; --hover: var(--text-label-grey-hover); --active: var(--text-label-grey-active); } .fr-input[type=date] { min-height: 2.5rem; } @supports selector(::-webkit-calendar-picker-indicator) { .fr-input[type=date] { background-repeat: no-repeat; background-position: calc(100% - 1rem) 50%; background-size: 1rem 1rem; padding-right: 3rem; --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } .fr-input[type=date]::-webkit-calendar-picker-indicator { display: block; padding: 1rem; margin-right: -2.5rem; opacity: 0; } } .fr-input-wrap { position: relative; display: block; } .fr-input-wrap[class^=fr-icon-] .fr-input, .fr-input-wrap[class*=" fr-icon-"] .fr-input, .fr-input-wrap[class^=fr-fi-] .fr-input, .fr-input-wrap[class*=" fr-fi-"] .fr-input { padding-right: 3rem; } .fr-input-wrap[class^=fr-icon-]::before, .fr-input-wrap[class*=" fr-icon-"]::before, .fr-input-wrap[class^=fr-fi-]::before, .fr-input-wrap[class*=" fr-fi-"]::before { --icon-size: 1rem; position: absolute; top: 0.75rem; right: 1rem; bottom: 0.75rem; margin: auto; pointer-events: none; } .fr-input-wrap--addon, .fr-input-wrap--action { display: flex; flex-direction: row; width: 100%; } .fr-input-wrap--addon > *:first-child:not(:last-child) { border-radius: 0.25rem 0 0 0; } .fr-input-wrap--addon > *:last-child:not(:first-child) { border-radius: 0 0.25rem 0 0; } .fr-input-wrap--action .fr-btn { margin-left: 1rem; } .fr-input-wrap + .fr-hint-text { margin-top: 1rem; } .fr-input-group { position: relative; } .fr-input-group .fr-message:first-child { margin-top: 1rem; } .fr-input-group--valid::before, .fr-input-group--error::before, .fr-input-group--info::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } textarea.fr-input { min-height: 3.75rem; } .fr-input:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); } .fr-input:autofill, .fr-input:autofill:hover, .fr-input:autofill:focus, .fr-input:-webkit-autofill, .fr-input:-webkit-autofill:hover, .fr-input:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 var(--border-plain-grey), inset 0 0 0 1000px var(--background-contrast-info); -webkit-text-fill-color: var(--text-label-grey); } @supports selector(::-webkit-calendar-picker-indicator) { :root[data-fr-theme=dark] .fr-input[type=date] { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-input[type=date]:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-input[type=date]:disabled { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } } .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france); } .fr-fieldset--valid .fr-input, .fr-fieldset--valid .fr-input-wrap--addon > .fr-input:not(:last-child), .fr-input-group--valid .fr-input, .fr-input-group--valid .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-input, .fr-fieldset--error .fr-input-wrap--addon > .fr-input:not(:last-child), .fr-input-group--error .fr-input, .fr-input-group--error .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } .fr-input-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-input-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-input-group--info::before { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } /* ¯¯¯¯¯¯¯¯¯ *\ 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; display: block; } .fr-search-bar .fr-input { margin: 0; border-radius: 0.25rem 0 0; max-height: 2.5rem; box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france); } .fr-search-bar .fr-input::placeholder { font-style: italic; } .fr-search-bar .fr-input::-webkit-search-cancel-button { -webkit-appearance: none; width: 1rem; height: 1rem; background-repeat: no-repeat; background-size: 1rem 1rem; --data-uri-svg: url('data:image/svg+xml;charset=utf-8,'); background-image: var(--data-uri-svg); } .fr-search-bar .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; 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 { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; 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"); content: ""; } .fr-search-bar .fr-input--valid { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-search-bar .fr-input--error { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } :root[data-fr-theme=dark] .fr-search-bar .fr-input::-webkit-search-cancel-button { --data-uri-svg: url('data:image/svg+xml;charset=utf-8,'); } /* ¯¯¯¯¯¯¯¯¯ *\ CONTENT \* ˍˍˍˍˍˍˍˍˍ */ .fr-content-media { width: 100%; margin: 2.5rem 0; display: flex; flex-direction: column; align-items: center; --text-spacing: 0; --title-spacing: 0; } .fr-content-media__img { width: 100%; } .fr-content-media [class^=fr-responsive-img], .fr-content-media [class*=" fr-responsive-img"], .fr-content-media [class^=fr-responsive-vid], .fr-content-media [class*=" fr-responsive-vid"] { aspect-ratio: 1.7777777778; } .fr-content-media__caption { display: flex; flex-direction: column; width: 100%; margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.25rem; } .fr-content-media__caption .fr-link { font-size: 0.75rem; line-height: 1.25rem; padding: 0 0; margin-right: auto; } .fr-content-media__caption .fr-link::before, .fr-content-media__caption .fr-link::after { --icon-size: 0.75rem; } .fr-content-media .fr-transcription { margin-top: 1.5rem; } .fr-content-media--sm .fr-content-media__img, .fr-content-media--sm .fr-responsive-vid { width: 83.3333333333%; } .fr-content-media--lg .fr-content-media__img, .fr-content-media--lg .fr-responsive-vid { width: 116.6666666667%; max-width: 100vw; } .fr-content-media__transcription .fr-link { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; --underline-img: none; --hover-tint: var(--hover); background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-content-media__transcription .fr-link::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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-2-fill.svg"); mask-image: url("../icons/system/menu-2-fill.svg"); content: ""; } .fr-content-media__transcription .fr-link::before { content: none; } .fr-content-media__caption, .fr-content-media .fr-link { color: var(--text-mention-grey); } .fr-content-media__transcription .fr-link:disabled, .fr-content-media__transcription a.fr-link:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } /* ¯¯¯¯¯¯¯¯¯ *\ CONSENT MAIN \* ˍˍˍˍˍˍˍˍˍ */ .fr-consent-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; text-align: center; --text-spacing: 0 0 1.5rem; --title-spacing: 0 0 0.5rem; background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); } .fr-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; max-height: calc(100% - 8rem); padding: 1rem; overflow: auto; --text-spacing: 0 0 1rem; --title-spacing: 0 0 1rem; z-index: calc(var(--ground) + 1500); background-color: var(--background-alt-overlap-grey); --idle: transparent; --hover: var(--background-alt-overlap-grey-hover); --active: var(--background-alt-overlap-grey-active); filter: drop-shadow(var(--overlap-shadow)); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-consent-banner__title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; margin-bottom: 1rem; } .fr-consent-banner__buttons { margin-top: 1.5rem; margin-bottom: -1rem; } .fr-consent-service { position: relative; } .fr-consent-service > .fr-fieldset { padding: 0 0 1.25rem; margin: 0; align-items: flex-start; display: flex; flex-direction: column; width: 100%; position: initial; } .fr-consent-service:last-child > .fr-fieldset { padding: 2rem 0 1rem; } .fr-consent-service:last-child > .fr-fieldset .fr-consent-service > .fr-fieldset:last-child { margin-bottom: 0; } .fr-consent-service__title { font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; padding: 2rem 0 0.75rem; margin: 0; color: var(--text-title-grey); } .fr-consent-service__desc { font-size: 0.875rem; line-height: 1.5rem; --text-spacing: 0.75rem 0 0.5rem 0; } .fr-consent-service__collapse { margin-top: -0.25rem; margin-bottom: 0.75rem; width: 100%; } .fr-consent-service__collapse .fr-consent-service__collapse-btn { font-size: 0.875rem; line-height: 1.5rem; padding: 0 0; overflow: initial; max-width: 100%; max-height: none; } .fr-consent-service__collapse .fr-consent-service__collapse-btn::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.25rem; 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"); content: ""; } .fr-consent-service__collapse .fr-consent-service__collapse-btn::before { content: none; } .fr-consent-service__radios { margin-top: 0.75rem; margin-bottom: 0.75rem; display: flex; flex-direction: row; flex-wrap: wrap; } .fr-consent-service .fr-radio-group { position: relative; } .fr-consent-service .fr-radio-group:not(:last-child) { margin-right: 3rem; } .fr-consent-service .fr-radio-group:not(:first-child)::before { content: ""; display: block; width: 1px; height: 1.5rem; position: absolute; top: 0; left: calc(-1.5rem - 1px); } .fr-consent-service .fr-consent-service__collapse-btn { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); background: transparent; padding: 0 0.25rem 0 0; color: inherit; --hover-tint: var(--idle); --active-tint: var(--idle); background-image: var(--underline-img), var(--underline-img); background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness)); background-repeat: no-repeat, no-repeat; transition: background-size 0s; background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness); color: var(--text-action-high-blue-france); } .fr-consent-service .fr-consent-service__collapse-btn::before, .fr-consent-service .fr-consent-service__collapse-btn::after { display: block; } .fr-consent-service .fr-consent-service__collapse-btn:hover, .fr-consent-service .fr-consent-service__collapse-btn:active { --underline-hover-width: var(--underline-max-width); } .fr-consent-service .fr-consent-service__collapse-btn::after { margin-right: -1.25rem; transition: transform 0.3s; } .fr-consent-service .fr-consent-service__collapse-btn[aria-expanded=true]::after { transform: rotate(-180deg); } .fr-consent-services { margin-top: 0.5rem; margin-bottom: -0.5rem; width: 100%; } .fr-consent-services .fr-consent-service > .fr-fieldset, .fr-consent-services .fr-consent-service:last-child > .fr-fieldset { padding: 0; } .fr-consent-services .fr-consent-service:last-child > .fr-fieldset { margin-bottom: 1.25rem; } .fr-consent-services .fr-consent-service__title { padding-top: 0.75rem; } .fr-consent-services .fr-consent-service__radios { top: 0; } .fr-consent-services .fr-consent-service__desc { --text-spacing: 0.25rem 0 0.75rem 0; } .fr-consent-manager__header { padding-top: 0; } .fr-consent-manager__header .fr-consent-service__title { width: 100%; padding: 0 0 0.75rem 0; font-size: 1rem; line-height: 1.5rem; font-weight: 400; } .fr-consent-manager__header .fr-consent-service__radios { width: 100%; justify-content: flex-start; top: 0; position: initial; } .fr-consent-manager__buttons { margin-bottom: -3rem; margin-top: 1rem; } .fr-consent-manager__header, .fr-consent-service { box-shadow: inset 0 -1px 0 0 var(--border-default-grey); color: var(--text-default-grey); } .fr-consent-manager__header .fr-radio-group + .fr-radio-group::before, .fr-consent-service .fr-radio-group + .fr-radio-group::before { box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-consent-service:last-of-type, .fr-consent-service .fr-consent-service { box-shadow: none; } /* ¯¯¯¯¯¯¯¯¯ *\ FOLLOW \* ˍˍˍˍˍˍˍˍˍ */ /** * Mixin d'ajout des icones des réseaux sociaux **/ /** * Mixin d'ajout des icones des réseaux sociaux **/ .fr-follow { padding: 1.5rem 0; --title-spacing: 0 0 0.5rem; --text-spacing: 0 0 1rem; background-color: var(--background-alt-blue-france); --idle: transparent; --hover: var(--background-alt-blue-france-hover); --active: var(--background-alt-blue-france-active); } .fr-follow__newsletter .fr-input-group { margin-bottom: 1rem; } .fr-follow__newsletter .fr-hint-text { margin-bottom: 0; } .fr-follow__newsletter .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; display: block; } .fr-follow__newsletter .fr-input-wrap { display: flex; flex-direction: column; max-width: 37.5rem; margin-top: 0; } .fr-follow__newsletter .fr-input-wrap .fr-input { margin-bottom: 1rem; margin-top: 0; border-radius: 0.25rem 0.25rem 0 0; } .fr-follow__newsletter .fr-input-wrap .fr-btn { justify-content: center; width: 100%; border-radius: 0; } .fr-follow__newsletter .fr-messages-group { margin-top: 1rem; } .fr-follow__social { --text-spacing: 0 0 0.75rem; --title-spacing: 0 0 0.75rem; } .fr-follow__social .fr-btns-group { margin-bottom: -1rem; width: auto; } .fr-follow__social .fr-btns-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; justify-content: flex-start; } .fr-follow__social .fr-btns-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-follow__social .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-follow__social .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before { margin-left: 0; margin-right: 0.5rem; 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%; --icon-size: 1.5rem; content: ""; } .fr-follow__social .fr-btns-group--lg .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-follow__social .fr-btns-group--lg .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"])::before { margin-left: 0; margin-right: 0.5rem; 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%; --icon-size: 2rem; content: ""; } .fr-follow .fr-grid-row > *:not(:first-child) { margin-top: 1.5rem; padding-top: 1.5rem; box-shadow: 0 -1px 0 0 var(--border-default-blue-france); } .fr-follow .fr-btn--dailymotion::before { -webkit-mask-image: url("../icons/logo/fr--dailymotion-fill.svg"); mask-image: url("../icons/logo/fr--dailymotion-fill.svg"); } .fr-follow .fr-btn--facebook::before { -webkit-mask-image: url("../icons/logo/facebook-circle-fill.svg"); mask-image: url("../icons/logo/facebook-circle-fill.svg"); } .fr-follow .fr-btn--github::before { -webkit-mask-image: url("../icons/logo/github-fill.svg"); mask-image: url("../icons/logo/github-fill.svg"); } .fr-follow .fr-btn--instagram::before { -webkit-mask-image: url("../icons/logo/instagram-fill.svg"); mask-image: url("../icons/logo/instagram-fill.svg"); } .fr-follow .fr-btn--linkedin::before { -webkit-mask-image: url("../icons/logo/linkedin-box-fill.svg"); mask-image: url("../icons/logo/linkedin-box-fill.svg"); } .fr-follow .fr-btn--mastodon::before { -webkit-mask-image: url("../icons/logo/mastodon-fill.svg"); mask-image: url("../icons/logo/mastodon-fill.svg"); } .fr-follow .fr-btn--snapchat::before { -webkit-mask-image: url("../icons/logo/snapchat-fill.svg"); mask-image: url("../icons/logo/snapchat-fill.svg"); } .fr-follow .fr-btn--telegram::before { -webkit-mask-image: url("../icons/logo/telegram-fill.svg"); mask-image: url("../icons/logo/telegram-fill.svg"); } .fr-follow .fr-btn--threads::before { -webkit-mask-image: url("../icons/logo/threads-fill.svg"); mask-image: url("../icons/logo/threads-fill.svg"); } .fr-follow .fr-btn--tiktok::before { -webkit-mask-image: url("../icons/logo/fr--tiktok-fill.svg"); mask-image: url("../icons/logo/fr--tiktok-fill.svg"); } .fr-follow .fr-btn--twitch::before { -webkit-mask-image: url("../icons/logo/twitch-fill.svg"); mask-image: url("../icons/logo/twitch-fill.svg"); } .fr-follow .fr-btn--twitter::before { -webkit-mask-image: url("../icons/logo/twitter-fill.svg"); mask-image: url("../icons/logo/twitter-fill.svg"); } .fr-follow .fr-btn--twitter-x::before { -webkit-mask-image: url("../icons/logo/twitter-x-fill.svg"); mask-image: url("../icons/logo/twitter-x-fill.svg"); } .fr-follow .fr-btn--vimeo::before { -webkit-mask-image: url("../icons/logo/vimeo-fill.svg"); mask-image: url("../icons/logo/vimeo-fill.svg"); } .fr-follow .fr-btn--youtube::before { -webkit-mask-image: url("../icons/logo/youtube-fill.svg"); mask-image: url("../icons/logo/youtube-fill.svg"); } .fr-follow .fr-links-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; margin: 0 -1rem -1rem -1rem; width: auto; display: flex; flex-wrap: wrap; } .fr-follow .fr-links-group .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-follow .fr-links-group > li { display: inline-flex; max-width: 100%; width: auto; } .fr-follow .fr-valid-text, .fr-follow .fr-error-text { margin-top: 1rem; } .fr-follow .fr-hint-text { margin-top: 1rem; } .fr-follow__social .fr-link { --underline-img: none; --hover-tint: var(--hover); display: inline-flex; margin-left: 0.5rem; margin-right: 0.5rem; margin-bottom: 1rem; font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-follow__social .fr-link::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-follow__social .fr-links-group--lg .fr-link { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-follow__social .fr-links-group--lg .fr-link::before { --icon-size: 2rem; margin-left: 0; margin-right: 0.5rem; } .fr-follow .fr-link--facebook::before { 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/logo/facebook-circle-fill.svg"); mask-image: url("../icons/logo/facebook-circle-fill.svg"); content: ""; } .fr-follow .fr-link--twitter::before { 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/logo/twitter-fill.svg"); mask-image: url("../icons/logo/twitter-fill.svg"); content: ""; } .fr-follow .fr-link--instagram::before { 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/logo/instagram-fill.svg"); mask-image: url("../icons/logo/instagram-fill.svg"); content: ""; } .fr-follow .fr-link--linkedin::before { 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/logo/linkedin-box-fill.svg"); mask-image: url("../icons/logo/linkedin-box-fill.svg"); content: ""; } .fr-follow .fr-link--youtube::before { 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/logo/youtube-fill.svg"); mask-image: url("../icons/logo/youtube-fill.svg"); content: ""; } .fr-follow .fr-input { background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); } .fr-follow__title { color: var(--text-title-grey); } .fr-follow__newsletter-legal { color: var(--text-mention-grey); } .fr-follow__social .fr-btn { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-follow__social .fr-btn:disabled, .fr-follow__social a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-follow__social .fr-link:disabled, .fr-follow__social a.fr-link:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } /* ¯¯¯¯¯¯¯¯¯ *\ Password \* ˍˍˍˍˍˍˍˍˍ */ .fr-password { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; --text-spacing: 0 0 0.5rem 0; } .fr-password [data-fr-capslock] .fr-password__input { padding-right: 3rem; } .fr-password [data-fr-capslock]::before { content: ""; display: block; position: absolute; top: 0.75rem; right: 1rem; width: 1rem; height: 1rem; pointer-events: none; --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } .fr-password__checkbox { order: -1; flex: 0; align-self: flex-end; margin-left: auto; padding-left: 0.5rem; } .fr-password__checkbox .fr-label { text-wrap: nowrap; } .fr-password .fr-input-wrap { flex: 1 0 100%; } .fr-password__input { margin-bottom: 0.75rem; } .fr-password__input::-webkit-caps-lock-indicator { content: none; } .fr-password__input::-ms-reveal { display: none; } .fr-password > .fr-label { order: -1; flex: 1; min-width: 50%; } .fr-password .fr-message:first-child { --comma: " "; } .fr-password .fr-message--valid[data-fr-valid] { --content: " - "attr(data-fr-valid) var(--comma); } .fr-password .fr-message--error[data-fr-error] { --content: " - "attr(data-fr-error) var(--comma); } .fr-password__btn { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-password__btn:disabled, a.fr-password__btn:not([href]) { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } :root[data-fr-theme=dark] .fr-password [data-fr-capslock]::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-password .fr-password__checkbox input[type=checkbox] + label { color: var(--text-label-grey); } .fr-password .fr-password__checkbox input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg); } /* ¯¯¯¯¯¯¯¯¯ *\ 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 sm */ /*! media sm */ .fr-hidden-sm { display: none !important; } .fr-unhidden-sm { display: inherit !important; } .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; display: block; } .fr-container-sm { padding-left: 1rem; padding-right: 1rem; } .fr-container-sm--fluid { padding-left: 0; padding-right: 0; max-width: none; overflow: hidden; } .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-sm-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-sm-2--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-sm-3--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-sm-4--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-sm-5--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-sm-6--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-sm-7--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-sm-8--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-sm-9--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-sm-10--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-sm-11--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-sm-12--right) { margin-left: calc(1200% / 12); } .fr-col-offset-sm-12--right { margin-right: calc(1200% / 12); } /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ .fr-btns-group--inline-sm .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-sm > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-sm.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ .fr-footer__content-list > li { margin-right: 1.5rem; } .fr-footer__partners-title { text-align: left; } .fr-footer__partners-logos { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-right: -0.5rem; } .fr-footer__partners-main { margin-bottom: 1rem; } .fr-footer__partners-sub, .fr-footer__partners-sub > ul { flex-direction: row; align-items: flex-start; } .fr-footer__partners-sub > li, .fr-footer__partners-sub > ul > li { margin: 0 0.5rem 0 0.5rem; } .fr-footer__partners-sub { order: 3; } /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ /*! media sm */ .fr-follow__newsletter .fr-input-group { margin-bottom: 0.5rem; } .fr-follow__newsletter .fr-input-wrap .fr-btn { width: auto; border-radius: 0 0.25rem 0 0; } .fr-follow__newsletter .fr-input-wrap { flex-direction: row; } .fr-follow__newsletter .fr-input-wrap .fr-input { margin-bottom: 0; border-radius: 0.25rem 0 0 0; } .fr-follow__newsletter .fr-messages-group { margin-bottom: 0.5rem; } /*! media sm */ /*! media sm */ } @media (min-width: 48em) { /*! media md */ /*! media md */ /*! media md */ h6 { font-size: 1.25rem; line-height: 1.75rem; } h5 { font-size: 1.375rem; line-height: 1.75rem; } h4 { font-size: 1.5rem; line-height: 2rem; } h3 { font-size: 1.75rem; line-height: 2.25rem; } h2 { font-size: 2rem; line-height: 2.5rem; } h1 { font-size: 2.5rem; line-height: 3rem; } .fr-h6 { font-size: 1.25rem !important; line-height: 1.75rem !important; } .fr-h5 { font-size: 1.375rem !important; line-height: 1.75rem !important; } .fr-h4 { font-size: 1.5rem !important; line-height: 2rem !important; } .fr-h3 { font-size: 1.75rem !important; line-height: 2.25rem !important; } .fr-h2 { font-size: 2rem !important; line-height: 2.5rem !important; } .fr-h1 { font-size: 2.5rem !important; line-height: 3rem !important; } .fr-display--xs { font-size: 3rem !important; line-height: 3.5rem !important; } .fr-display--sm { font-size: 3.5rem !important; line-height: 4rem !important; } .fr-display--md { font-size: 4rem !important; line-height: 4.5rem !important; } .fr-display--lg { font-size: 4.5rem !important; line-height: 5rem !important; } .fr-display--xl { font-size: 5rem !important; line-height: 5.5rem !important; } .fr-hidden-md { display: none !important; } .fr-unhidden-md { display: inherit !important; } .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; display: block; } .fr-container-md { padding-left: 1rem; padding-right: 1rem; } .fr-container-md--fluid { padding-left: 0; padding-right: 0; max-width: none; overflow: hidden; } .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-md-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-md-2--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-md-3--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-md-4--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-md-5--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-md-6--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-md-7--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-md-8--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-md-9--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-md-10--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-md-11--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-md-12--right) { margin-left: calc(1200% / 12); } .fr-col-offset-md-12--right { margin-right: calc(1200% / 12); } .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-n1-5v { margin: -0.375rem !important; } .fr-ml-md-n1-5v, .fr-mx-md-n1-5v { margin-left: -0.375rem !important; } .fr-mr-md-n1-5v, .fr-mx-md-n1-5v { margin-right: -0.375rem !important; } .fr-mt-md-n1-5v, .fr-my-md-n1-5v { margin-top: -0.375rem !important; } .fr-mb-md-n1-5v, .fr-my-md-n1-5v { margin-bottom: -0.375rem !important; } .fr-m-md-0 { margin: 0 !important; } .fr-ml-md-0, .fr-mx-md-0 { margin-left: 0 !important; } .fr-mr-md-0, .fr-mx-md-0 { margin-right: 0 !important; } .fr-mt-md-0, .fr-my-md-0 { margin-top: 0 !important; } .fr-mb-md-0, .fr-my-md-0 { margin-bottom: 0 !important; } .fr-m-md-n0-5v { margin: -0.125rem !important; } .fr-ml-md-n0-5v, .fr-mx-md-n0-5v { margin-left: -0.125rem !important; } .fr-mr-md-n0-5v, .fr-mx-md-n0-5v { margin-right: -0.125rem !important; } .fr-mt-md-n0-5v, .fr-my-md-n0-5v { margin-top: -0.125rem !important; } .fr-mb-md-n0-5v, .fr-my-md-n0-5v { margin-bottom: -0.125rem !important; } .fr-m-md-0-5v { margin: 0.125rem !important; } .fr-ml-md-0-5v, .fr-mx-md-0-5v { margin-left: 0.125rem !important; } .fr-mr-md-0-5v, .fr-mx-md-0-5v { margin-right: 0.125rem !important; } .fr-mt-md-0-5v, .fr-my-md-0-5v { margin-top: 0.125rem !important; } .fr-mb-md-0-5v, .fr-my-md-0-5v { margin-bottom: 0.125rem !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-1-5v { margin: 0.375rem !important; } .fr-ml-md-1-5v, .fr-mx-md-1-5v { margin-left: 0.375rem !important; } .fr-mr-md-1-5v, .fr-mx-md-1-5v { margin-right: 0.375rem !important; } .fr-mt-md-1-5v, .fr-my-md-1-5v { margin-top: 0.375rem !important; } .fr-mb-md-1-5v, .fr-my-md-1-5v { margin-bottom: 0.375rem !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: 0 !important; } .fr-pl-md-0, .fr-px-md-0 { padding-left: 0 !important; } .fr-pr-md-0, .fr-px-md-0 { padding-right: 0 !important; } .fr-pt-md-0, .fr-py-md-0 { padding-top: 0 !important; } .fr-pb-md-0, .fr-py-md-0 { padding-bottom: 0 !important; } .fr-p-md-0-5v { padding: 0.125rem !important; } .fr-pl-md-0-5v, .fr-px-md-0-5v { padding-left: 0.125rem !important; } .fr-pr-md-0-5v, .fr-px-md-0-5v { padding-right: 0.125rem !important; } .fr-pt-md-0-5v, .fr-py-md-0-5v { padding-top: 0.125rem !important; } .fr-pb-md-0-5v, .fr-py-md-0-5v { padding-bottom: 0.125rem !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-1-5v { padding: 0.375rem !important; } .fr-pl-md-1-5v, .fr-px-md-1-5v { padding-left: 0.375rem !important; } .fr-pr-md-1-5v, .fr-px-md-1-5v { padding-right: 0.375rem !important; } .fr-pt-md-1-5v, .fr-py-md-1-5v { padding-top: 0.375rem !important; } .fr-pb-md-1-5v, .fr-py-md-1-5v { padding-bottom: 0.375rem !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; } /*! media md */ /*! media md */ /*! media md */ /*! media md */ /*! media md */ .fr-accordion .fr-collapse { margin: 0 -0.25rem; padding-left: 1rem; padding-right: 1rem; } /*! media md */ /*! media md */ /*! media md */ .fr-btns-group--inline-md .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-md > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-md.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media md */ /*! media md */ .fr-quote { padding: 0 0 0 2rem; background-size: 1px 100%; background-position: 0 0; } .fr-quote--column { margin-left: 13.5rem; min-height: 13rem; } .fr-quote--column .fr-quote__author { margin-left: 0; } .fr-quote--column .fr-quote__source { margin-left: 0; } .fr-quote--column figcaption { min-height: auto; } .fr-quote__image { position: absolute; top: 50%; left: -13.5rem; width: 11.5rem; height: 11.5rem; margin-top: -5.75rem; } /*! media md */ .fr-breadcrumb { margin-bottom: 2.5rem; } .fr-breadcrumb__button { display: none; } .fr-breadcrumb .fr-collapse { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; transform: none; visibility: inherit; overflow: visible; max-height: none; } .fr-breadcrumb .fr-collapse::before { content: none; } .fr-breadcrumb__list { transform: none; } /*! media md */ .fr-fieldset__element--inline\@md { flex: 0 0 auto; } /*! media md */ .fr-stepper__title { font-size: 1.25rem; line-height: 1.75rem; } /*! media md */ /*! media md */ .fr-links-group--download .fr-link, .fr-links-group .fr-link--download { margin-bottom: 3rem; } .fr-links-group__title { font-size: 1.5rem; line-height: 2rem; } .fr-links-group--bordered { padding: 2rem 2rem 0.5rem; } /*! media md */ .fr-sidemenu { margin-left: 0; margin-right: 0; padding-right: 2rem; /** * Modificateur pour que le sidemenu s'adapte à un affichage à droite du contenu * La bordure se met sur la gauche */ /** * Modificateur pour que le sidemenu soit sticky */ /** * Modificateur pour que le sidemenu soit à la fois sticky et prenne toute la hauteur de la page */ box-shadow: none; } .fr-sidemenu .fr-collapse { margin-left: -0.25rem; margin-right: -0.25rem; padding-left: 0.25rem; padding-right: 0.25rem; } .fr-sidemenu__title { margin: 0 0 1.5rem; padding: 0; box-shadow: none; } .fr-sidemenu__list .fr-sidemenu__list { margin: 0 1rem 1rem; } .fr-sidemenu__list { margin: 0; } .fr-sidemenu__item::before { content: none; } .fr-sidemenu__inner { padding: 0 1.5rem 0 0; box-shadow: inset -1px 0 0 0 var(--border-default-grey); } .fr-sidemenu__inner > .fr-collapse { padding: 0; margin: 0; overflow: initial; max-height: none; } .fr-sidemenu__inner > .fr-collapse::before { display: none; } .fr-sidemenu__inner > .fr-collapse:not(.fr-collapse--expanded) { visibility: inherit; } .fr-sidemenu--right { padding-left: 2rem; padding-right: 0; } .fr-sidemenu--right .fr-sidemenu__inner { padding: 0 1rem 0 2rem; border-right: 0; box-shadow: inset 1px 0 0 0 var(--border-default-grey); } .fr-sidemenu--sticky { position: sticky; top: 0; } .fr-sidemenu--sticky .fr-sidemenu__inner { padding-top: 0.5rem; overflow: auto; max-height: 100vh; } .fr-sidemenu--sticky-full-height { position: sticky; top: 0; height: 100vh; } .fr-sidemenu--sticky-full-height .fr-sidemenu__inner { padding-top: 0.5rem; overflow: auto; height: 100%; } .fr-sidemenu__link, .fr-sidemenu__btn { margin: 0; width: 100%; } .fr-sidemenu__btn[aria-expanded] { padding: 0.75rem 2.5rem 0.75rem 1rem; } .fr-sidemenu__btn[aria-expanded]::after { margin-right: -1.5rem; } .fr-sidemenu__inner > .fr-sidemenu__btn { display: none; } /*! media md */ .fr-highlight { padding-left: 2.25rem; margin-left: 2rem; } /*! media md */ .fr-tabs--viewport-width { margin-left: 0; margin-right: 0; } .fr-tabs__panel { padding: 2rem; } .fr-tabs__panel:focus, .fr-tabs__panel:focus-visible { outline-offset: calc(-2rem + 2px); } /*! media md */ /*! media md */ .fr-summary { padding: 2rem; } /*! media md */ .fr-table caption { font-size: 1.5rem; line-height: 2rem; } .fr-table td, .fr-table th { padding: 1rem; } .fr-table thead td, .fr-table thead th { padding-bottom: 1.125rem; } /*! media md */ /*! media md */ /*! media md */ .fr-download--card { padding: 2rem 2rem 5rem 2rem; } .fr-download--card .fr-download__link { font-size: 1.375rem; line-height: 1.75rem; } .fr-download--card .fr-download__link::after { --icon-size: 1.5rem; bottom: 2rem; right: 2rem; } .fr-download--card .fr-download__desc { margin-top: 0.75rem; } .fr-download--card .fr-download__detail { bottom: 2rem; left: 2rem; } .fr-downloads-group__title { font-size: 1.5rem; line-height: 2rem; } .fr-downloads-group--bordered { padding: 2rem 2rem 0.5rem; } .fr-downloads-group .fr-download { margin-bottom: 1.5rem; } /*! media md */ .fr-alert__title { font-size: 1.25rem; line-height: 1.75rem; } /*! media md */ /*! media md */ /*! media md */ .fr-card__title { font-size: 1.375rem; line-height: 1.75rem; } .fr-card--sm .fr-card__title { font-size: 1.25rem; line-height: 1.75rem; } .fr-card--lg .fr-card__title { font-size: 1.5rem; line-height: 2rem; } .fr-card--horizontal, .fr-card--horizontal-half, .fr-card--horizontal-tier { flex-direction: row; } .fr-card--horizontal .fr-card__img, .fr-card--horizontal-half .fr-card__img, .fr-card--horizontal-tier .fr-card__img { height: 100%; } .fr-card--horizontal .fr-card__img img, .fr-card--horizontal-half .fr-card__img img, .fr-card--horizontal-tier .fr-card__img img { height: 100%; object-fit: cover; } .fr-card--horizontal .fr-card__header { width: 40%; flex: 0 0 40%; } .fr-card--horizontal-half .fr-card__header { width: 50%; flex: 0 0 50%; } .fr-card--horizontal-tier .fr-card__header { width: 33.3333333333%; flex: 0 0 33.3333333333%; } .fr-card--download { flex-direction: row; } .fr-card--download .fr-card__header { width: 40%; flex: 0 0 40%; aspect-ratio: auto; } .fr-card--download .fr-card__header .fr-card__img img { object-position: 50% 0; } .fr-card--download .fr-card__img { height: 100%; } .fr-card--download .fr-card__img img { height: 100%; object-fit: cover; } /*! media md */ /*! media md */ /*! media md */ /*! media md */ .fr-skiplinks { padding: 0.75rem 0; } .fr-skiplinks__list > li { margin: 0 0.5rem; } .fr-skiplinks__list { flex-direction: row; flex-wrap: wrap; margin: 0 -1rem; } /*! media md */ /*! media md */ .fr-callout { padding: 2rem 3rem; } .fr-callout[class^=fr-icon-]::before, .fr-callout[class*=" fr-icon-"]::before, .fr-callout[class^=fr-fi-]::before, .fr-callout[class*=" fr-fi-"]::before { margin: -1rem 0 1rem -2rem; } .fr-callout__title { font-size: 1.5rem; line-height: 2rem; } /*! media md */ .fr-modal { padding-right: var(--scrollbar-width); } .fr-modal--top::before { content: ""; } .fr-modal::before { width: 0; height: 10vh; flex: 1 0 10vh; } .fr-modal::after { content: ""; width: 0; height: 10vh; flex: 1 0 10vh; } .fr-modal__body { max-height: 80vh !important; } .fr-modal__header { padding: 1rem 2rem; } .fr-modal__content { padding-left: 2rem; padding-right: 2rem; margin-bottom: 4rem; } .fr-modal__footer { padding: 2rem; margin-top: -3rem; } .fr-modal__title { font-size: 1.5rem; line-height: 2rem; } /*! media md */ /*! media md */ .fr-share__text { max-width: 18rem; } /*! media md */ .fr-footer__body { margin-bottom: 1.5rem; } .fr-footer__brand .fr-logo { font-size: 1.3125rem; padding: 1.25rem; margin: -1.25rem; } .fr-footer__brand .fr-logo::before { width: 3.4375rem; height: 1.25rem; margin-bottom: 0.4166666667rem; background-size: 3.4375rem 1.40625rem, 3.4375rem 1.25rem, 0; background-position: 0 -0.078125rem, 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.7604166667rem; } [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: 2rem; } .fr-footer__brand { flex-basis: auto; margin-right: 1rem; } .fr-footer__brand.fr-enlarge-link { margin: -1rem 0 -1rem -1rem; padding: 1rem; align-self: flex-start; } .fr-footer__content { margin-left: auto; } .fr-footer__content-list { margin-top: 0.5rem; } .fr-footer__top { margin: -1.875rem 0 2rem; } .fr-footer__bottom-item { margin: 0.5rem 0 0 0.75rem; } .fr-footer__bottom-item::before { margin-right: 0.75rem; } .fr-footer__partners-logos { margin-right: -1rem; flex-wrap: nowrap; } .fr-footer__partners-main + .fr-footer__partners-sub { padding-left: 1rem; } .fr-footer__partners-sub, .fr-footer__partners-sub > ul { padding-top: 0; } .fr-footer__partners-sub > ul, .fr-footer__partners-sub > ul > ul { justify-content: flex-end; } .fr-footer__partners-sub > li, .fr-footer__partners-sub > ul > li { margin: 0 1rem 0 1rem; } .fr-footer__partners-sub .fr-footer__partners-link { margin-bottom: 0.5rem; } /*! media md */ .fr-tile__title { font-size: 1.25rem; line-height: 1.75rem; } .fr-tile--vertical\@md { flex-direction: column; text-align: center; align-items: center; } .fr-tile--vertical\@md .fr-tile__header { margin-bottom: 1rem; margin-right: 0 !important; } .fr-tile--vertical\@md .fr-tile__pictogram { width: 5rem; height: 5rem; } .fr-tile--vertical\@md .fr-tile__content { align-items: center; } .fr-tile--vertical\@md .fr-tile__detail { margin-top: 0.75rem; } .fr-tile--vertical\@md.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__content { padding-bottom: 2.5rem; } .fr-tile--vertical\@md.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__detail { margin-bottom: 0; padding-right: 0; } .fr-tile--horizontal .fr-tile__img { width: 5rem; height: 5rem; margin: 0 2rem 0 0; } /*! media md */ /*! media md */ /*! media md */ /*! media md */ /*! media md */ .fr-search-bar--lg .fr-btn { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-search-bar--lg .fr-btn::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-search-bar--lg .fr-input { max-height: 3rem; } /*! media md */ .fr-content-media--sm .fr-content-media__img, .fr-content-media--sm .fr-responsive-vid { width: 75%; } .fr-content-media--lg .fr-content-media__img, .fr-content-media--lg .fr-responsive-vid { width: 125%; } /*! media md */ .fr-consent-banner { padding: 2rem; bottom: 2.5rem; left: 2.5rem; max-width: 40rem; max-height: calc(100% - 5rem); } .fr-consent-banner__title { font-size: 1.25rem; line-height: 1.75rem; } .fr-consent-banner__buttons { margin-top: 2rem; } .fr-consent-service > .fr-fieldset { padding: 0 0 1.25rem; display: flex; flex-direction: row; flex-wrap: wrap; } .fr-consent-service:last-child > .fr-fieldset { padding: 1.25rem 0 1rem; } .fr-consent-service__title { font-size: 1.25rem; line-height: 1.75rem; width: 50%; } .fr-consent-service__desc { --text-spacing: 0.25rem 1.5rem 0.5rem 0; width: 60%; } .fr-consent-service__radios { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; position: absolute; top: 1.25rem; right: 0; width: 50%; } .fr-consent-services .fr-consent-service + .fr-consent-service { margin-top: -0.25rem; } .fr-consent-services .fr-consent-service__desc { --text-spacing: 0.25rem 0 0.5rem 0; } /*! media md */ .fr-follow { padding: 2rem 0; } .fr-follow .fr-grid-row > * > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; } .fr-follow .fr-grid-row > *:not(:first-child) { padding-left: 8.3333333333%; padding-top: 0; margin-top: 0; box-shadow: -1px 0 0 0 var(--border-default-blue-france); } .fr-follow .fr-grid-row > *:not(:last-child) { padding-right: 8.3333333333%; } .fr-follow .fr-grid-row > *:first-child:last-child > div { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .fr-follow .fr-grid-row > *:first-child:last-child > .fr-follow__newsletter { --text-spacing: 0; } .fr-follow .fr-grid-row > *:first-child:last-child > .fr-follow__newsletter > * { max-width: 50%; padding-right: 0.75rem; padding-left: 0.75rem; } .fr-follow .fr-grid-row > *:first-child:last-child > .fr-follow__newsletter > :first-child { padding-right: 0.75rem; padding-left: 0; } .fr-follow .fr-grid-row > *:first-child:last-child > .fr-follow__newsletter > :last-child { padding-right: 0; padding-left: 0.75rem; } .fr-follow .fr-grid-row > *:first-child:last-child > .fr-follow__social { --title-spacing: 0; } .fr-follow .fr-hint-text { margin-top: 0.5rem; } /*! media md */ /*! media md */ .fr-header__service-title { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 62em) { /*! media lg */ /*! media lg */ /*! media lg */ .fr-hidden-lg { display: none !important; } .fr-unhidden-lg { display: inherit !important; } .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; display: block; } .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; overflow: hidden; } .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-lg-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-lg-2--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-lg-3--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-lg-4--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-lg-5--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-lg-6--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-lg-7--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-lg-8--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-lg-9--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-lg-10--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-lg-11--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-lg-12--right) { margin-left: calc(1200% / 12); } .fr-col-offset-lg-12--right { margin-right: calc(1200% / 12); } .fr-displayed-lg { display: inherit !important; } /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ .fr-btns-group--inline-lg .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-lg > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-lg.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ .fr-pagination__link--first.fr-pagination__link--lg-label { 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-pagination__link--first.fr-pagination__link--lg-label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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/fr--arrow-left-s-first-line.svg"); mask-image: url("../icons/system/fr--arrow-left-s-first-line.svg"); content: ""; } .fr-pagination__link--prev.fr-pagination__link--lg-label { 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-pagination__link--prev.fr-pagination__link--lg-label::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; 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-left-s-line.svg"); mask-image: url("../icons/system/arrow-left-s-line.svg"); content: ""; } .fr-pagination__link--next.fr-pagination__link--lg-label { 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-pagination__link--next.fr-pagination__link--lg-label::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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-right-s-line.svg"); mask-image: url("../icons/system/arrow-right-s-line.svg"); content: ""; } .fr-pagination__link--next.fr-pagination__link--lg-label::before { content: none; } .fr-pagination__link--last.fr-pagination__link--lg-label { 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-pagination__link--last.fr-pagination__link--lg-label::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; 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/fr--arrow-right-s-last-line.svg"); mask-image: url("../icons/system/fr--arrow-right-s-last-line.svg"); content: ""; } .fr-pagination__link--last.fr-pagination__link--lg-label::before { content: none; } /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! 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 lg */ .fr-footer__content { margin-top: 0; flex-basis: 50%; max-width: 36.75rem; } /*! media lg */ .fr-tile--vertical\@lg { flex-direction: column; text-align: center; align-items: center; } .fr-tile--vertical\@lg .fr-tile__header { margin-bottom: 1rem; margin-right: 0 !important; } .fr-tile--vertical\@lg .fr-tile__pictogram { width: 5rem; height: 5rem; } .fr-tile--vertical\@lg .fr-tile__content { align-items: center; } .fr-tile--vertical\@lg .fr-tile__detail { margin-top: 0.75rem; } .fr-tile--vertical\@lg.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__content { padding-bottom: 2.5rem; } .fr-tile--vertical\@lg.fr-enlarge-link:not(.fr-tile--no-icon) .fr-tile__detail { margin-bottom: 0; padding-right: 0; } /*! media lg */ .fr-translate .fr-translate__btn { min-height: auto; width: auto; font-size: 0.875rem; line-height: 1.5rem; padding: 0.25rem 0.75rem; } .fr-translate .fr-translate__btn::after { margin-left: 0.25rem; margin-right: -0.25rem; } .fr-translate .fr-translate__btn::before { --icon-size: 1rem; } .fr-translate__language[aria-current]:not([aria-current=false]) { display: inline-flex; } .fr-translate__menu { margin: -0.25rem -1rem 0; } .fr-translate .fr-menu__list { display: grid; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; } .fr-btns-group .fr-translate__menu { margin: -1.25rem -0.75rem 0; } /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ /*! media lg */ .fr-consent-manager__header .fr-consent-service__title { width: 44%; } .fr-consent-manager__header .fr-consent-service__radios { width: 56%; position: absolute; justify-content: flex-end; } /*! media lg */ /*! media lg */ /*! 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 xl */ /*! media xl */ .fr-hidden-xl { display: none !important; } .fr-unhidden-xl { display: inherit !important; } .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; display: block; } .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; overflow: hidden; } .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-xl-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-xl-2--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-xl-3--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-xl-4--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-xl-5--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-xl-6--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-xl-7--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-xl-8--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-xl-9--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-xl-10--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-xl-11--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-xl-12--right) { margin-left: calc(1200% / 12); } .fr-col-offset-xl-12--right { margin-right: calc(1200% / 12); } /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ /*! media xl */ .fr-consent-manager__header .fr-consent-service__title { width: 50%; } .fr-consent-manager__header .fr-consent-service__radios { width: 50%; } /*! media xl */ /*! media xl */ /*! media xl */ } @media (hover: hover) and (pointer: fine) { :root { --brighten: -1; } a[href]:hover, button:not(:disabled):hover, input[type=button]:not(:disabled):hover, input[type=image]:not(:disabled):hover, input[type=reset]:not(:disabled):hover, input[type=submit]:not(:disabled):hover { background-color: var(--hover-tint); } a[href]:active, button:not(:disabled):active, input[type=button]:not(:disabled):active, input[type=image]:not(:disabled):active, input[type=reset]:not(:disabled):active, input[type=submit]:not(:disabled):active { background-color: var(--active-tint); } a[href]:hover, a[href]:active { --underline-hover-width: var(--underline-max-width); } .fr-enlarge-link a:hover, .fr-enlarge-link a:active { background: none; } .fr-enlarge-link:hover { background-color: var(--hover); } .fr-enlarge-link:active { background-color: var(--active); } :root[data-fr-theme=dark] { --brighten: 1; } .fr-card--download.fr-enlarge-link:hover .fr-card__header { background-color: var(--hover); } .fr-card--download.fr-enlarge-link:active .fr-card__header { background-color: var(--active); } .fr-header__brand.fr-enlarge-link a[href]:hover { --a: 0.1; } .fr-header__brand.fr-enlarge-link a[href]:active { --a: 0.2; } } @media (forced-colors: active), (prefers-contrast: more) { .fr-pagination__link[aria-current]:not([aria-current=false]) { justify-content: center; padding: calc(0.25rem - 1px) calc(0.75rem - 1px); border: 1px solid var(--border-active-blue-france); } }