/* ============================================================
   RÉNO RESSOURCE — Typographie
   ============================================================ */

/* ----------------------------------------------------------
   GOOGLE FONTS IMPORT
---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ----------------------------------------------------------
   TITRES
---------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------
   CORPS
---------------------------------------------------------- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-marine);
}

.body-light {
  font-weight: var(--weight-light);
  color: var(--color-slate);
}

.body-medium {
  font-weight: var(--weight-medium);
}

/* ----------------------------------------------------------
   PETITS TEXTES
---------------------------------------------------------- */
small, .text-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-slate);
}

/* ----------------------------------------------------------
   LABELS & TAGS
---------------------------------------------------------- */
.label, .tag-text {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   SECTION LABEL (ex: "01 — IDENTITÉ VISUELLE")
---------------------------------------------------------- */
.section-label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-steel);
}

/* ----------------------------------------------------------
   COULEURS DE TEXTE UTILITAIRES
---------------------------------------------------------- */
.text-marine  { color: var(--color-marine); }
.text-blue    { color: var(--color-blue); }
.text-steel   { color: var(--color-steel); }
.text-slate   { color: var(--color-slate); }
.text-amber   { color: var(--color-amber); }
.text-white   { color: var(--color-white); }

/* ----------------------------------------------------------
   ALIGNEMENT
---------------------------------------------------------- */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }