/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ 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; } @media (min-width: 36em) { /*! 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 (min-width: 48em) { /*! 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 (min-width: 62em) { /*! media lg */ .fr-footer__content { margin-top: 0; flex-basis: 50%; max-width: 36.75rem; } } @media (min-width: 78em) { /*! media xl */ }