@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/Chakra_Petch/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  /*bold*/
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/Chakra_Petch/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  /*Regular*/
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/Chakra_Petch/ChakraPetch-Light.ttf') format('truetype');
  font-weight: 300;
  /*light*/
  font-style: normal;
  font-display: swap;
}

/*  Autres polices dispo
@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/Chakra_Petch/ChakraPetch-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
} */

html {
  font-size: 16px;
}


body {
  font-family: var(--font-family);
  line-height: 1.3;
  color: var(--color);
}

.light {
  color: var(--color-light);
}

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



.stroke-text-shadow {
  color: var(--color);
  text-shadow:
    0.6px 0.6px 0 var(--color-background-secondary),
    -0.6px 0.6px 0 var(--color-background-secondary),
    -0.6px -0.6px 0 var(--color-background-secondary),
    0.6px -0.6px 0 var(--color-background-secondary);
}

.stroke-text-shadow:hover p,
.stroke-text-shadow svg {
  background-color: var(--color-background-secondary);
  border-radius: 10px;
}

.markdown-content a,
.primary {
  color: var(--color-primary);
}

.secondary {
  color: var(--color-secondary);
}

.red {
  color: var(--color-red) !important;
}

.orange {
  color: var(--color-orange);
}

.green {
  color: var(--color-green);
}

.markdown-content a,
.underline {
  text-decoration: underline;
}

.brightness-hover:hover {
  filter: brightness(80%);
}

/* 3 petits points si text trop long sur une seul ligne */
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* empecher retour à la ligne */
.white-space {
  white-space: nowrap;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.absolute {
  position: absolute;
}

.italic {
  font-style: italic;
}

.text-left {
  text-align: left !important;
}

.text-align-justify {
  text-align: justify;
  text-justify: auto;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.normal {
  font-weight: normal;
}

.bold {
  font-weight: 700 !important;
}

.markdown-content a {
  font-weight: 700;
}

/* Majuscule */
.uppercase {
  text-transform: uppercase;
}

.zoom-text-hover {
  line-height: 16px;
}

.zoom-text-hover:hover {
  font-size: 20px;
}

.markdown-content li,
.markdown-content p {
  line-height: 30px;
}

/* desktop styles*/
@media only screen {
  .h1 {
    font-weight: 700;
    font-size: 64px !important;
  }

  .t1 {
    font-weight: 700;
    font-size: 32px !important;
  }


  .markdown-content h1 {
    font-weight: 700;
    font-size: 44px;
  }

  .h2 {
    font-weight: 700;
    font-size: 44px !important;
  }

  .t2 {
    font-weight: 400;
    font-size: 24px !important;
  }

  .markdown-content h2 {
    font-weight: 700;
    font-size: 32px;
  }

  .h3 {
    font-weight: 700;
    font-size: 32px !important;
  }

  .t3 {
    font-weight: 300;
    font-size: 20px !important;
  }

  .markdown-content h3 {
    font-weight: 700;
    font-size: 24px;
  }

  .h4 {
    font-weight: 700;
    font-size: 24px !important;
  }

  .t4 {
    font-weight: 400;
    font-size: 16px !important;
  }


  .h5 {
    font-weight: 700;
    font-size: 16px !important;
  }

  .t5 {
    font-weight: 400;
    font-size: 12px !important;
  }

  .h6 {
    font-weight: 700;
    font-size: 14px !important;
  }

  .t6 {
    font-weight: 400;
    font-size: 10px !important;
  }

  .h7 {
    font-weight: 700;
    font-size: 12px !important;
  }

  .t7 {
    font-weight: 400;
    font-size: 10px !important;
  }

}


/* desktop styles md */
@media only screen and (min-width: 720px) {

  .h1-md {
    font-weight: 700 !important;
    font-size: 64px !important;
    /*100*/
  }

  .t1-md {
    font-weight: 700 !important;
    font-size: 32px !important;
  }

  .h2-md {
    font-weight: 700 !important;
    font-size: 44px !important;
    /*52 */
  }

  .t2-md {
    font-weight: 400 !important;
    font-size: 24px !important;
  }

  .h3-md {
    font-weight: 700 !important;
    font-size: 32px !important;
  }

  .t3-md {
    font-weight: 300 !important;
    font-size: 20px !important;
  }

  .h4-md {
    font-weight: 700 !important;
    font-size: 24px !important;
  }

  .t4-md {
    font-weight: 400 !important;
    font-size: 16px !important;
  }

  .h5-md {
    font-weight: 700 !important;
    font-size: 16px !important;
  }

  .t5-md {
    font-weight: 400 !important;
    font-size: 12px !important;
  }


}