565 lines
11 KiB
CSS
565 lines
11 KiB
CSS
/*!
|
||
* 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 <a>, 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 */
|
||
}
|