/* variables */
:root {
  /* Couleurs */
  --color-primary: #0c374b;
  --color-secondary: #a0642f;
  --color-background-primary: #0c374b;
  --color-background-secondary: #ffffff;
  --color-text: #0c374b;
  --color-text-secondary: #a0642f;
  --color-text-tertiary: #ffffff;

  /* Polices */
  --font-family-primary: "OpenSansRegular", sans-serif;
  --font-family-title: "MontserratBold", sans-serif;

  /* H1 - Titre Principal */
  --h1-size-mobile: 2rem; /* 32px */
  --h1-size-tablet: 3rem; /* 48px */
  --h1-size-desktop: 4rem; /* 64px */
  --h1-line-height: 1.2;
  --h1-weight: 500;

  /* H2 - Titre de Section */
  --h2-size-mobile: 1.75rem; /* 28px */
  --h2-size-tablet: 2rem; /* 32px */
  --h2-size-desktop: 2.5rem; /* 40px */
  --h2-line-height: 1.3;
  --h2-weight: 500;

  /* H3 - Sous-titre Important */
  --h3-size-mobile: 1.5rem; /* 24px */
  --h3-size-tablet: 1.75rem; /* 28px */
  --h3-size-desktop: 2rem; /* 32px */
  --h3-line-height: 1.4;
  --h3-weight: 500;

  /* H4 - Sous-titre Secondaire */
  --h4-size-mobile: 1.25rem; /* 20px */
  --h4-size-tablet: 1.375rem; /* 22px */
  --h4-size-desktop: 1.5rem; /* 24px */
  --h4-line-height: 1.5;
  --h4-weight: 500;

  /* Corps de texte */
  --body-size: 1.5rem; /* 24px */
  --body-line-height: 1.6;

  /* Espacement */
  --heading-margin-bottom: 1rem;

  /* border radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;

  /* Breakpoints */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}

h1 {
  font-family: var(--font-family-title);
  font-size: clamp(var(--h1-size-mobile), 4vw + 1rem, var(--h1-size-desktop));
  line-height: var(--h1-line-height);
  font-weight: var(--h1-weight);
  letter-spacing: 0px;
}

h2 {
  font-family: var(--font-family-title);
  font-size: clamp(var(--h2-size-mobile), 3.5vw + 1rem, var(--h2-size-desktop));
  line-height: var(--h2-line-height);
  font-weight: var(--h2-weight);
  letter-spacing: 0px;
}

h3 {
  font-family: var(--font-family-title);
  font-size: clamp(var(--h3-size-mobile), 3vw + 1rem, var(--h3-size-desktop));
  line-height: var(--h3-line-height);
  font-weight: var(--h3-weight);
  letter-spacing: 0px;
}

h4 {
  font-family: var(--font-family-title);
  font-size: clamp(var(--h4-size-mobile), 2.5vw + 1rem, var(--h4-size-desktop));
  line-height: var(--h4-line-height);
  font-weight: var(--h4-weight);
  letter-spacing: 0px;
}

p {
  font-family: var(--font-family-primary);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
}