/*
* Bouton pour afficher/masquer la légende
*/
.toggle-caption {
  position: relative;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 1.2rem;

  padding: 1.8rem 2rem;
  background-color: #e3ebf2;
  font-family: 'Geomanist',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1.9rem;
  color: #0b1b34;
  font-weight: 600;
}

/* Icône ouvrante/fermante */
.toggle-caption::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: solid #0b1b34;
  border-width: 0 .4rem .4rem 0;
  pointer-events: none;
  transform: translateY(-60%) rotate(45deg);
  margin-top: 1rem;
  margin-bottom: -1rem;
}

/* Lorsque la description est ouverte */
.toggle-caption[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(-135deg);
  margin-top: 1.5rem;
}

/* On style le bouton au survol et au focus */
.toggle-caption:hover,
.toggle-caption:focus {
  background-color: #31486e;
  color: #fff;
}

.toggle-caption:hover::before,
.toggle-caption:focus::before {
  border-color: #fff;
}

/* Dans un bloc CTA, la couleur de fond est la couleur c1 */
.cta-block .toggle-caption:hover,
.cta-block .toggle-caption:focus {
  background-color: #0b1b34;
}

/* Légende */
.post-content .caption.toggleable-figcaption,
.cta-block .caption.toggleable-figcaption {
  padding-left: 0;
  padding-right: 5rem;
  background-color: transparent;
}

.caption.toggleable-figcaption:not(.is-open) {
  display: none;
}