/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ 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; } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! 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 (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }