:root { 
  --black: #000000;
  --eerie-black: #1d1d1b;
  --pumice: #cacaca;
  --white: #ffffff;
 
  --font-size-l: 13px;
  --font-size-m: 12px;
  --font-size-s: 10px;
  --font-size-xl: 16px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 32px;
  --font-size-xxxxl: 56px;
 
  --font-family-kokoro-regular: "Kokoro-Regular", Helvetica;
  --font-family-montserrat: "Montserrat", Helvetica;
  --font-family-montserrat_subrayada: "Montserrat Subrayada", Helvetica;
  --font-family-ristretto_pro-semibold: "Ristretto Pro-SemiBold", Helvetica;
}
.onglet-clean {
  font-family: var(--font-family-kokoro-regular);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bloc-texte-description-clean {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0;
}

.montserrat-bold-black-13px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.montserrat-bold-gray-13px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
  opacity: 40%;
}

.montserrat-light-black-12px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
  
}

.montserrat-light-black-12px-bold {
  color: var(--eerie-black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style:normal;
  font-weight: 400;
}
.montserrat-normal-black-10px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.montserrat-light-black-13px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: italic;
  font-weight: 300;
}

.montserrat-medium-black-13px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}
.montserrat-medium-gray-13px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  opacity: 60%;
}

.montserrat-light-pumice-10px {
  color: var(--pumice);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 300;
}

.montserrat-normal-black-12px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.ristrettopro-semi-bold-black-32px {
  color: var(--black);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
}

.ristrettopro-semi-bold-black-24px {
  color: var(--black);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
}

.ristrettopro-semi-bold-gray-24px {
  color: var(-black);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
  opacity:40%;
}

.montserrat-medium-black-16px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.montserratsubrayada-bold-white-12px {
  color: var(--white);
  font-family: var(--font-family-montserrat_subrayada);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.ristrettopro-semi-bold-black-56px {
  color: var(--black);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 600;
}

.ristrettopro-semi-bold-white-48px {
  color: var(--white);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
}

.ristrettopro-semi-bold-white-histoires {
  color: var(--white);
  font-family: var(--font-family-ristretto_pro-semibold);
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
}


.montserrat-medium-black-12px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.montserrat-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}



@media screen and (max-width: 720px) {

.onglet-clean { /* typo des onglets */
  font-family: var(--font-family-kokoro-regular);
  font-size: 1.1em;
  font-style: bold;
  letter-spacing: 0;
}

.montserrat-light-black-12px {
  color: var(--black);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
  padding: 5% 5%;
  
}



}