/**
  Only outside editor
*/

details[open] summary div.marker::before {
  content: "\2198";
}

details summary {
  position: relative;
  cursor: pointer;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 30px;
}

details summary:hover {
  text-decoration: underline;
}

details summary div.marker {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 30px;
}

details summary div.marker::before {
  font-family: "Sabot";
  font-weight: bold;
  content: "\2192";
  font-size: 3rem;
}

details .content {
  margin-top: 30px;
  padding-left: 20px;
  font-size: 90%;
}

hr.wp-block-separator {
  background-color: var(--primary) !important;
  height: 2px !important;
  opacity: 1 !important;
  margin: var(--page-separator-margin) !important;
  width: var(--page-separator-width) !important;
  max-width: var(--page-separator-width) !important;
}


@media screen and (min-width: 38.75em) {
  details summary div.marker {
    top: 0;
    left: -30px;
  }

  details summary {
    padding-top: 0;
  }
}

@media screen and (min-width: 59.6875em) {}

/**
  Only for editor
*/
.editor-styles-wrapper .summary-details {
  padding: 0 15px 15px 30px;
}

.editor-styles-wrapper .hint {
  font-size: 1rem;
  font-style: italic;
  opacity: 0.55;
}

.editor-styles-wrapper .summary-details div.marker {
  position: absolute;
  top: 20px;
  left: 0;
  min-width: 30px;
}

.editor-styles-wrapper .summary-details div.marker::before {
  font-family: "Sabot";
  font-weight: bold;
  content: "\2198";
  font-size: 1.4rem;
}

.editor-styles-wrapper .summary-details .summary-titre {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background-color: white;
  border: 1px solid gray;
}

.editor-styles-wrapper .summary-details .content {
  background-color: #e9e9e9;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid gray;
  min-height: 100px;
}

.editor-styles-wrapper .summary-details .summary-titre>.block-editor-rich-text {
  display: inline-block;
}