/* =============================================================
   Pattern : Contenu éditorial
   Styles typographiques inspirés de single.css, re-scopés sur
   .pattern_contenu_editorial__wrapper.
   ============================================================= */

.pattern_contenu_editorial {
  background-color: var(--background);
}

.pattern_contenu_editorial__wrapper {
  max-width: 980px;
  padding: 72px 24px;
  margin: 0 auto;
}

/* Paragraphes */
.pattern_contenu_editorial__wrapper p {
  text-align: justify;
  line-height: 1.8;
}

/* Titres */
.pattern_contenu_editorial__wrapper h2,
.pattern_contenu_editorial__wrapper h3,
.pattern_contenu_editorial__wrapper h4 {
  font-family: var(--font-heading);
  margin-top: 48px;
  margin-bottom: 16px;
}

.pattern_contenu_editorial__wrapper h2 {
  position: relative;
  width: max-content;
  margin-bottom: 32px;
}

.pattern_contenu_editorial__wrapper h2::after {
  position: absolute;
  bottom: -12px;
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--primary-50);
}

/* Listes */
.pattern_contenu_editorial__wrapper ul,
.pattern_contenu_editorial__wrapper ol {
  padding-left: 24px;
}

.pattern_contenu_editorial__wrapper ul {
  list-style: disc;
}

.pattern_contenu_editorial__wrapper ol {
  list-style: decimal;
}

.pattern_contenu_editorial__wrapper li {
  margin-bottom: 8px;
}

.pattern_contenu_editorial__wrapper li::marker {
  color: var(--primary);
}

/* Citation */
.pattern_contenu_editorial__wrapper blockquote {
  border-left: 4px solid var(--primary-50);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  opacity: 0.85;
}

/* Séparateur */
.pattern_contenu_editorial__wrapper hr {
  border: none;
  border-top: 1px solid var(--primary-15);
  margin: 48px 0;
}

/* Images */
.pattern_contenu_editorial__wrapper figure {
  margin: 32px 0;
}

.pattern_contenu_editorial__wrapper figcaption {
  font-size: 14px;
  font-style: italic;
  color: var(--black);
  opacity: 0.6;
  text-align: center;
  margin-top: 8px;
}

/* Responsive */
@media screen and (min-width: 768px) {
  .pattern_contenu_editorial__wrapper {
    padding: 100px 24px;
  }
}

@media screen and (max-width: 767px) {
  .pattern_contenu_editorial__wrapper h2 {
    width: 100%;
    font-size: 24px;
  }

  .pattern_contenu_editorial__wrapper h3 {
    font-size: 20px;
  }

  .pattern_contenu_editorial__wrapper blockquote {
    font-size: 17px;
  }

  .pattern_contenu_editorial__wrapper .wp-block-image img {
    width: 100%;
    max-width: 100%;
  }
}