main,
.editor-styles-wrapper {
  color: var(--tw-color-content);
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "calt" 1;
  font-weight: 350;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 1.15em;
  line-height: 1.5em;
}

::selection {
  background-color: var(--tw-color-primary);
  color: #fff;
}

main a,
.editor-styles-wrapper a {
  color: var(--tw-color-primary);
}

/******* Page title ********/
.page-header,
.wp-block-post-title {
  text-align: center;
}

/***** headings *****/

main h1,
.editor-styles-wrapper h1,
main h2,
.editor-styles-wrapper h2,
main h3,
.editor-styles-wrapper h3,
main h4,
.editor-styles-wrapper h4,
main h5,
.editor-styles-wrapper h5 {
  font-family: "Caveat", cursive, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "calt" 1;
  font-weight: 700;
  font-style: normal;
  margin: 0;
  line-height: 1.1em;
  letter-spacing: -0.01em;
}

main h1,
.editor-styles-wrapper h1 {
  font-size: clamp(4em, 15vw, 5em);
  margin-top: 1em;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 600px) {
  main h1,
  .editor-styles-wrapper h1 {
    padding: 0 16px;
    margin-bottom: 1em;
  }
}

main h2,
.editor-styles-wrapper h2 {
  font-size: 2.5em;
  margin-bottom: 1em;
  margin-top: 1em;
}
main h3,
.editor-styles-wrapper h3 {
  font-size: 1.5em;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "calt" 1;
  font-weight: 650;
  font-style: normal;
  background-image: url("../imgs/subtitle.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  margin-left: -6px;
  padding-left: 6px;
  padding-bottom: 1em;
  /* line-height: 1em; */
}
main h4,
.editor-styles-wrapper h4 {
  font-size: 2em;
}
main h5,
.editor-styles-wrapper h5 {
  font-size: 1.2em;
}

main .subtitle,
.editor-styles-wrapper .subtitle {
  font-size: clamp(2.5em, 10vw, 3em);
  font-weight: 400;
  margin-bottom: 1em;
}

main .little-title,
.editor-styles-wrapper .little-title {
  font-size: 0.9em;
  font-weight: 300;
  color: var(--tw-color-primary);
  margin-bottom: 3em;
}

.justify-content-center {
  display: flex;
  justify-content: center;
}

.image-shadow {
  box-shadow: rgba(100, 100, 111, 0.4) 0px 4px 29px 0px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

.image-shadow img,
.image-shadow video {
  background-size: cover;
  border-radius: 10px;
}

/***** code balise used for highlight *****/
main h2 code,
.editor-styles-wrapper h2 code,
main .subtitle code,
.editor-styles-wrapper .subtitle code {
  font-family: inherit;
  padding: 0 26px 0 20px;
  margin: 0 -16px;
  /* white-space: nowrap; */

  position: relative;
  display: inline-block; /* S'adapte à la taille du texte */
  z-index: 0;
}

main h2 code::before,
.editor-styles-wrapper h2 code::before,
main .subtitle code::before,
.editor-styles-wrapper .subtitle code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../imgs/highlight.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* Déforme pour suivre exactement le texte */
  z-index: -1; /* Derrière le texte */
}

/***** code balise used for nice quotes *****/
main .little-title code,
.editor-styles-wrapper .little-title code {
  font-family: inherit;
  padding: 0 20px 0 26px;
  margin: 0 0px;
  position: relative;
  display: inline-block; /* S'adapte à la taille du texte */
  z-index: 0;
}

main .little-title code::before,
.editor-styles-wrapper .little-title code::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 6px;
  width: 16px;
  height: 16px;
  background-image: url("../imgs/quote-left.svg");
  background-repeat: no-repeat;
  /* Derrière le texte */
}

main .little-title code::after,
.editor-styles-wrapper .little-title code::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-image: url("../imgs/quote-right.svg");
  background-repeat: no-repeat;
}

/***** ul / li *****/

main article ul {
  list-style: none;
}

main article li {
  margin-bottom: 0.8em;
}

main article ul li::before {
  content: "\25AA";
  color: var(--tw-color-primary);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

main article ol {
  list-style: none;
  counter-reset: li;
}

main article ol li::before {
  content: counter(li);
  color: white;
  font-weight: bold;
  display: inline-block;
  width: 1.5em;
  margin-left: -2em;
  margin-right: 0.5em;
  text-align: center;
  border-radius: 50%;
  background-color: var(--tw-color-primary);
}

main article ol li {
  counter-increment: li;
}

/********** Form ***********/

.form-submit input[name="submit"] {
  background-color: var(--tw-color-secondary);
  color: #ffffff;
  font-size: 14px;
  padding: 0.5em 1em;
  border: 0;
  cursor: pointer;
  border-radius: 3px;
}
.form-submit input[name="submit"]:hover {
  background-color: var(--tw-color-secondary);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

form p {
  margin-top: 0;
}
form textarea {
  width: 100%;
  min-height: 170px;
  line-height: 1.5;
  padding: 16px;
  resize: vertical;
}

form input {
  line-height: 1.5;
  padding: 4px 16px;
}

.tip {
  font-family: Caveat, sans-serif;
  font-size: 1.5625rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: -0.01rem;
}

#cmplz-document {
  font-size: unset;
}

#cmplz-document p,
#cmplz-document li,
#cmplz-document td,
.editor-styles-wrapper .cmplz-unlinked-mode p,
.editor-styles-wrapper .cmplz-unlinked-mode li,
.editor-styles-wrapper .cmplz-unlinked-mode td {
  font-size: unset;
}

#cmplz-document h2,
#cmplz-document h3,
.editor-styles-wrapper .cmplz-unlinked-mode h2,
.editor-styles-wrapper .cmplz-unlinked-mode h3 {
  font-size: 1.8em;
  margin-top: 1em;
}