/* HBD V834 — Encadrés de fin de chapitre, FR maître et EN miroir. */

/*
 * Ces encadrés sont des cartes éditoriales, pas des boutons CTA.
 * La forte spécificité empêche les anciens systèmes CTA de leur imposer
 * inline-flex, une petite hauteur ou une typographie de bouton.
 */
html body.hbd-story .teaser,
html body.hbd-story a.teaser.teaser-link {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "chapter next"
    "title title"
    "summary summary" !important;
  align-items: start !important;
  gap: 10px 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 50px 0 10px !important;
  padding: 28px 32px 30px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f56600 !important;
  background-image: none !important;
  border: 2px solid #11100f !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #11100f !important;
  -webkit-text-fill-color: #11100f !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  cursor: default !important;
}

html body.hbd-story a.teaser.teaser-link {
  cursor: pointer !important;
}

html body.hbd-story .teaser::before,
html body.hbd-story a.teaser.teaser-link::before {
  content: "CHAPITRE SUIVANT" !important;
  grid-area: next !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  color: #11100f !important;
  -webkit-text-fill-color: #11100f !important;
  font-family: "Oswald", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
  text-align: right !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: .72 !important;
}

html[lang^="en"] body.hbd-story .teaser::before,
html[lang^="en"] body.hbd-story a.teaser.teaser-link::before {
  content: "NEXT CHAPTER" !important;
}

html body.hbd-story .teaser > .eyebrow,
html body.hbd-story a.teaser.teaser-link > .eyebrow {
  grid-area: chapter !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #11100f !important;
  -webkit-text-fill-color: #11100f !important;
  font-family: "Oswald", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

html body.hbd-story .teaser > h3,
html body.hbd-story a.teaser.teaser-link > h3 {
  grid-area: title !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: #11100f !important;
  -webkit-text-fill-color: #11100f !important;
  font-family: "Oswald", Arial, sans-serif !important;
  font-size: clamp(25px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body.hbd-story .teaser > p:not(.eyebrow),
html body.hbd-story a.teaser.teaser-link > p:not(.eyebrow) {
  grid-area: summary !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 68ch !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #11100f !important;
  -webkit-text-fill-color: #11100f !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

html body.hbd-story a.teaser.teaser-link:is(:hover, :focus-visible, :active) {
  background: #11100f !important;
  border-color: #f56600 !important;
  color: #f56600 !important;
  -webkit-text-fill-color: #f56600 !important;
  outline: 3px solid #f56600 !important;
  outline-offset: 3px !important;
}

html body.hbd-story a.teaser.teaser-link:is(:hover, :focus-visible, :active)::before,
html body.hbd-story a.teaser.teaser-link:is(:hover, :focus-visible, :active) > .eyebrow,
html body.hbd-story a.teaser.teaser-link:is(:hover, :focus-visible, :active) > h3,
html body.hbd-story a.teaser.teaser-link:is(:hover, :focus-visible, :active) > p:not(.eyebrow) {
  color: #f56600 !important;
  -webkit-text-fill-color: #f56600 !important;
  text-decoration: none !important;
}

@media (max-width: 640px) {
  html body.hbd-story .teaser,
  html body.hbd-story a.teaser.teaser-link {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chapter"
      "next"
      "title"
      "summary" !important;
    gap: 8px !important;
    padding: 24px 20px 26px !important;
  }

  html body.hbd-story .teaser::before,
  html body.hbd-story a.teaser.teaser-link::before {
    text-align: left !important;
    white-space: normal !important;
  }

  html body.hbd-story .teaser > h3,
  html body.hbd-story a.teaser.teaser-link > h3 {
    margin-top: 4px !important;
    font-size: clamp(23px, 9vw, 32px) !important;
  }
}