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