/* ========================================
   SA CORP — TYPOGRAPHY SYSTEM
   Cohérence, hiérarchie, simplicité
======================================== */

/* ----------------------------------------
   VARIABLES DE TAILLE DE POLICE
---------------------------------------- */

:root {
  /* Headings */
  --font-size-h1: 3.6rem;       /* 57.6px */
  --font-size-h2: 3.6rem;        /* 57.6px */
  --font-size-h3: 1.6rem;        /* 25.6px */
  --font-size-h4: 1.2rem;        /* 19.2px */
  
  /* Text scale */
  --font-size-3xs: 0.60rem;       /* 9.6px */
  --font-size-2xs: 0.70rem;       /* 11.2px */
  --font-size-xs: 0.85rem;       /* 13.6px */
  --font-size-sm: 0.95rem;       /* 15.2px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.15rem;       /* 18.4px */
  --font-size-xl: 1.35rem;       /* 21.6px */
  --font-size-2xl: 1.75rem;      /* 28px */
  --font-size-3xl: 2rem;         /* 32px */
  
  /* Hero & Special */
  --font-size-hero: 4rem;        /* 64px */
  --font-size-title-hero: 3.8rem; /* 60.8px */
  --font-size-title-xl: 3rem;    /* 48px */
}

/* ----------------------------------------
   BASE
---------------------------------------- */

html {
  font-size: 16px;
}

body {
  line-height: 1.6;
  color: var(--color-primary-dark);
  font-weight: 400;
}

/* ----------------------------------------
   HEADINGS (Structure sémantique)
---------------------------------------- */

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
}

/* H1 — Page title (unique per page) */
h1 {
  font-size: var(--font-size-h1);
  margin-bottom: 3rem;

}

/* H2 — Section title */
h2 {
  font-size: var(--font-size-h2);
  margin-bottom: 2.5rem;

}

/* H3 — Subsection */
h3 {
  font-size: var(--font-size-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* H4 — Card titles / small headings */
h4 {
  font-size: var(--font-size-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-subtitle {
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto 4rem;
}

/* ----------------------------------------
   PARAGRAPHS
---------------------------------------- */

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-text-light);
}

/* ----------------------------------------
   TEXT SCALE (Utilities propres)
---------------------------------------- */

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }
.text-hero { font-size: var(--font-size-hero); line-height: 1.1; }

/* ----------------------------------------
   FONT WEIGHT UTILITIES
---------------------------------------- */

.fw-normal     { font-weight: 400; }
.fw-medium     { font-weight: 500; }
.fw-semibold   { font-weight: 600; }
.fw-bold       { font-weight: 700; }
.fw-extrabold  { font-weight: 800; }

/* ----------------------------------------
   ALIGNMENT UTILITIES (Minimal & Clean)
---------------------------------------- */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ----------------------------------------
   SPECIAL TITLE VARIANTS
---------------------------------------- */

/* Section Hero Large */
.title-hero {
  font-size: var(--font-size-title-hero);
  font-weight: 800;
  line-height: 1.1;
}

/* Large section headline */
.title-xl {
  font-size: var(--font-size-title-xl);
  font-weight: 800;
}


/* ----------------------------------------
   RESPONSIVE SCALE
---------------------------------------- */

@media (max-width: 1020px) {

  h1 { font-size: 3rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 1.4rem; }

  .title-hero { font-size: 3.2rem; }
  .text-hero  { font-size: 3.2rem; }

}

@media (max-width: 740px) {

  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; margin-bottom: 1rem; }
  h3 { font-size: 1.2rem; }
  .section-subtitle {        font-size: var(--font-size-xs); margin-bottom: 2.5rem; }

  .title-hero { font-size: 2.6rem; }
  .text-hero  { font-size: 2.6rem; }

}

@media (max-width: 560px) {

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.1rem; }

  p { font-size: 0.95rem; }

}