TP_JO2024/home/dist/component/quote/quote.css

/*!
 * 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 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 md */
}

@media (min-width: 62em) {
  /*! media lg */

  /*! media lg */
}

@media (min-width: 78em) {
  /*! media xl */

  /*! media xl */
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
  * Correction largeur max du texte
  */
  .fr-quote::before,
  .fr-quote::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../icons/editor/fr--quote-line.svg");
    width: 2rem;
    height: 2rem;
  }

  ul.fr-quote__source {
    list-style-type: none;
  }

  ol.fr-quote__source {
    list-style-type: none;
  }

  ul.fr-quote__source,
  ol.fr-quote__source {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .fr-quote blockquote {
    max-width: 100%;
  }

  .fr-quote::before {
    color: #6a6af4;
  }

  .fr-quote--green-tilleul-verveine::before {
    color: #b7a73f;
  }

  .fr-quote--green-bourgeon::before {
    color: #68a532;
  }

  .fr-quote--green-emeraude::before {
    color: #00a95f;
  }

  .fr-quote--green-menthe::before {
    color: #009081;
  }

  .fr-quote--green-archipel::before {
    color: #009099;
  }

  .fr-quote--blue-ecume::before {
    color: #465f9d;
  }

  .fr-quote--blue-cumulus::before {
    color: #417dc4;
  }

  .fr-quote--purple-glycine::before {
    color: #a558a0;
  }

  .fr-quote--pink-macaron::before {
    color: #e18b76;
  }

  .fr-quote--pink-tuile::before {
    color: #ce614a;
  }

  .fr-quote--yellow-tournesol::before {
    color: #c8aa39;
  }

  .fr-quote--yellow-moutarde::before {
    color: #c3992a;
  }

  .fr-quote--orange-terre-battue::before {
    color: #e4794a;
  }

  .fr-quote--brown-cafe-creme::before {
    color: #d1b781;
  }

  .fr-quote--brown-caramel::before {
    color: #c08c65;
  }

  .fr-quote--brown-opera::before {
    color: #bd987a;
  }

  .fr-quote--beige-gris-galet::before {
    color: #aea397;
  }

  .fr-quote {
    background-image: linear-gradient(0deg, #ddd, #ddd);
  }

  .fr-quote__source {
    color: #666;
  }
}

@media print {
  .fr-quote {
    background-image: linear-gradient(0deg, #ddd, #ddd);
  }

  .fr-quote::before {
    color: #6a6af4;
  }

  .fr-quote--green-tilleul-verveine::before {
    color: #b7a73f;
  }

  .fr-quote--green-bourgeon::before {
    color: #68a532;
  }

  .fr-quote--green-emeraude::before {
    color: #00a95f;
  }

  .fr-quote--green-menthe::before {
    color: #009081;
  }

  .fr-quote--green-archipel::before {
    color: #009099;
  }

  .fr-quote--blue-ecume::before {
    color: #465f9d;
  }

  .fr-quote--blue-cumulus::before {
    color: #417dc4;
  }

  .fr-quote--purple-glycine::before {
    color: #a558a0;
  }

  .fr-quote--pink-macaron::before {
    color: #e18b76;
  }

  .fr-quote--pink-tuile::before {
    color: #ce614a;
  }

  .fr-quote--yellow-tournesol::before {
    color: #c8aa39;
  }

  .fr-quote--yellow-moutarde::before {
    color: #c3992a;
  }

  .fr-quote--orange-terre-battue::before {
    color: #e4794a;
  }

  .fr-quote--brown-cafe-creme::before {
    color: #d1b781;
  }

  .fr-quote--brown-caramel::before {
    color: #c08c65;
  }

  .fr-quote--brown-opera::before {
    color: #bd987a;
  }

  .fr-quote--beige-gris-galet::before {
    color: #aea397;
  }

  .fr-quote__source {
    color: #666;
  }

  .fr-quote__author,
  .fr-quote cite,
  .fr-quote figcaption li {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}