@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");

:root {
  /* Couleurs */
  --color-principale: black;
  --color-citation: #a39269;

  /* Polices */
  --font-titre-2: "Lora", serif;
  --font-titre-1: "Josefin Sans", serif;
  /* --font-titre-2: var(--font-titre-1); */
  --font-titre-3: var(--font-titre-2);
  --font-titre-4: "Montserrat", serif;
  --font-titre-5: var(--font-titre-4);
  --font-texte-global: "Montserrat", serif;
  --font-texte-annexe: "IBM Plex Mono", serif;
  --font-texte-manuscrit: "Caveat", serif;
  --font-texte-citation: var(--font-titre-2);
  --font-texte-detail: var(--font-texte-global);
  --font-description-grand-titre: var(--font-titre-1);

  /* Tailles de police */
  --font-size-h1: 5.4rem;
  --font-size-h2: 3rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.2rem;
  --font-size-h5: 1rem;
  --font-size-texte-global: 1rem;
  --font-size-texte-annexe: 0.8rem;
  --font-size-texte-manuscrit: 1.3rem;
  --font-size-texte-citation: 1.5rem;
  --font-size-texte-detail: 0.8rem;
  --font-size-description-grand-titre: 1.5rem;

  /* Interlignes et espacements */
  --line-height-titre-1: 1.3;
  --line-height-titre-2: var(--line-height-titre-1);
  --line-height-titre-3: var(--line-height-titre-1);
  --line-height-titre-4: var(--line-height-titre-1);
  --line-height-titre-5: var(--line-height-titre-1);
  --line-height-texte-global: 1.5;
  --line-height-texte-annexe: 1.5;
  --line-height-texte-manuscrit: 1.5;
  --line-height-texte-citation: 1.5;
  --line-height-texte-detail: 1.5;
  --line-height-description-grand-titre: 1.5;
  --letter-spacing-titre-1: 0.5px;
  --letter-spacing-titre-2: var(--letter-spacing-titre-1);
  --letter-spacing-titre-3: var(--letter-spacing-titre-1);
  --letter-spacing-titre-4: 0;
  --letter-spacing-titre-5: var(--letter-spacing-titre-4);
  --letter-spacing-texte-global: 0.5px;
  --letter-spacing-texte-annexe: 0.5px;
  --letter-spacing-texte-manuscrit: 0.5px;
  --letter-spacing-texte-citation: 0.5px;
  --letter-spacing-texte-detail: 0.5px;
  --letter-spacing-description-grand-titre: 0.5px;

  /* Marges */
  --margin-titre-1: 2rem 0 1rem 0;
  --margin-titre-2: 1.5rem 0 0.5rem 0;
  --margin-titre-3: 1rem 0 0.5rem 0;
  --margin-titre-4: 0.5rem 0 0.5rem 0;
  --margin-titre-5: 0.5rem 0 0.5rem 0;
  --margin-texte-global: 0.5rem 0 0.5rem 0;
  --margin-texte-annexe: 0.5rem 0 0.5rem 0;
  --margin-texte-manuscrit: 0.5rem 0 0.5rem 0;
  --margin-texte-citation: 0.5rem 0 0.5rem 0;
  --margin-texte-detail: 0.5rem 0 0.5rem 0;
  --margin-description-grand-titre: 0.5rem 0 0.5rem 0;

  /*Epaisseur */
  --epaisseur-titre-1: 420;
  --epaisseur-titre-2: var(--epaisseur-titre-1);
  --epaisseur-titre-3: var(--epaisseur-titre-1);
  --epaisseur-titre-4: 600;
  --epaisseur-titre-5: var(--epaisseur-titre-4);
  --epaisseur-texte-global: 500;
  --epaisseur-texte-annexe: 400;
  --epaisseur-texte-manuscrit: 500;
  --epaisseur-texte-citation: 700;
  --epaisseur-texte-detail: var(--epaisseur-texte-global);
  --epaisseur-description-grand-titre: var(--epaisseur-titre-1);
}

.titre-1 {
  font-family: var(--font-titre-1);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-titre-1);
  letter-spacing: var(--letter-spacing-titre-1);
  color: var(--color-principale);
  margin: var(--margin-titre-1);
  font-weight: var(--epaisseur-titre-1);
}

.titre-2 {
  font-family: var(--font-titre-2);
  text-align: left;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-titre-2);
  letter-spacing: var(--letter-spacing-titre-2);
  color: var(--color-principale);
  margin: var(--margin-titre-2);
  font-weight: var(--epaisseur-titre-2);
}

.titre-3 {
  font-family: var(--font-titre-3);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-titre-3);
  letter-spacing: var(--letter-spacing-titre-3);
  color: var(--color-principale);
  margin: var(--margin-titre-3);
  font-weight: var(--epaisseur-titre-3);
}

.titre-4 {
  font-family: var(--font-titre-4);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-titre-4);
  letter-spacing: var(--letter-spacing-titre-4);
  color: var(--color-principale);
  margin: var(--margin-titre-4);
  font-weight: var(--epaisseur-titre-4);
}

.titre-5 {
  font-family: var(--font-titre-5);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-titre-5);
  letter-spacing: var(--letter-spacing-titre-5);
  color: var(--color-principale);
  margin: var(--margin-titre-5);
  font-weight: var(--epaisseur-titre-5);
}

.texte-global {
  font-family: var(--font-texte-global);
  font-size: var(--font-size-texte-global);
  line-height: var(--line-height-texte-global);
  letter-spacing: var(--letter-spacing-texte-global);
  color: var(--color-principale);
  margin: var(--margin-texte-global);
  font-weight: var(--epaisseur-texte-global);
}

.texte-annexe {
  font-family: var(--font-texte-annexe);
  font-size: var(--font-size-texte-annexe);
  line-height: var(--line-height-texte-annexe);
  letter-spacing: var(--letter-spacing-texte-annexe);
  color: var(--color-principale);
  margin: var(--margin-texte-annexe);
  font-weight: var(--epaisseur-texte-annexe);
}

.texte-manuscrit {
  font-family: var(--font-texte-manuscrit);
  font-size: var(--font-size-texte-manuscrit);
  line-height: var(--line-height-texte-manuscrit);
  letter-spacing: var(--letter-spacing-texte-manuscrit);
  color: var(--color-principale);
  margin: var(--margin-texte-manuscrit);
  font-weight: var(--epaisseur-texte-manuscrit);
}

.texte-citation {
  font-family: var(--font-texte-citation);
  font-size: var(--font-size-texte-citation);
  line-height: var(--line-height-texte-citation);
  letter-spacing: var(--letter-spacing-texte-citation);
  color: var(--color-citation);
  margin: var(--margin-texte-citation);
  font-weight: var(--epaisseur-texte-citation);
  font-style: italic;
}

.texte-detail {
  font-family: var(--font-texte-detail);
  font-size: var(--font-size-texte-detail);
  line-height: var(--line-height-texte-detail);
  letter-spacing: var(--letter-spacing-texte-detail);
  color: var(--color-principale);
  margin: var(--margin-texte-detail);
  font-weight: var(--epaisseur-texte-detail);
  font-style: italic;
}

.pagine {
  text-align: justify;
  text-justify: inter-word;
}

.description-grand-titre {
  font-family: var(--font-description-grand-titre);
  font-size: var(--font-size-description-grand-titre);
  line-height: var(--line-height-description-grand-titre);
  letter-spacing: var(--letter-spacing-description-grand-titre);
  color: var(--color-principale);
  margin: var(--margin-description-grand-titre);
  font-weight: var(--epaisseur-description-grand-titre);
}

.titre-2-page-pais {
  font-family: var(--font-titre-1);
  text-align: center;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-titre-2);
  letter-spacing: var(--letter-spacing-titre-2);
  color: var(--color-principale);
  margin: var(--margin-titre-2);
  font-weight: var(--epaisseur-titre-2);
}

p em.texte-emphase {
  font-weight: bold;
}

@media (max-width: 1024px) {
  :root {
    --font-size-h1: 3.4rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.2rem;
    --font-size-h5: 1rem;
    --font-size-texte-global: 0.9rem;
    --font-size-texte-annexe: 0.8rem;
    --font-size-texte-manuscrit: 1.3rem;
    --font-size-texte-citation: 1.5rem;
    --font-size-texte-detail: 0.8rem;
    --font-size-description-grand-titre: 1.5rem;
  }
}