/* ==============================
   📌 BASE TYPOGRAPHIQUE
   ============================== */
body {
	font-family: var(--font-primary);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}

body a {
	cursor: pointer;
}

/* ==============================
   📌 TITRES
   ============================== */
:root {
  --fs-1: clamp(36px, 5vw, 48px);  /* Titre principal (H1) */
  --fs-2: clamp(30px, 4vw, 36px);  /* Sous-titre (H2) */
  --fs-3: clamp(24px, 3vw, 30px);  /* Intertitres (H3) */
  --fs-4: clamp(18px, 2.5vw, 24px); /* Titres secondaires (H4) */
  --fs-5: clamp(14px, 1.8vw, 18px); /* Paragraphes larges (H5, accents) */
  --fs-6: clamp(12px, 1.5vw, 14px); /* Texte standard (p, span, body) */
  --fs-7: clamp(10px, 1.2vw, 14px); /* Texte secondaire (légendes, labels) */	  }

	  h1 { font-size: var(--fs-1); }
	  h2 { font-size: var(--fs-2); }
	  h3 { font-size: var(--fs-3); }
	  h4 { font-size: var(--fs-4); }
	  h5 { font-size: var(--fs-5); }
	  h6 { font-size: var(--fs-6); }

	  .fs-1 { font-size: var(--fs-1); }
	  .fs-2 { font-size: var(--fs-2); }
	  .fs-3 { font-size: var(--fs-3); }
	  .fs-4 { font-size: var(--fs-4); }
	  .fs-5 { font-size: var(--fs-5); }
	  .fs-6 { font-size: var(--fs-6); }

h1, h2, h3, h4, h5, h6 {
	line-height:1.2em;
}

/* ==============================
   📌 TEXTES SPÉCIFIQUES
   ============================== */
p {
	padding-bottom:var(--font-pb);
}

strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

a {
	color:var(--color-fresh);
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

a:hover {
	color: var(--color-primary-dark);
}

/* ==============================
   📌 LISTES
   ============================== */
ul, ol {
	margin: 1em 0;
	padding-left: 20px;
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

/* ==============================
   📌 BLOCKQUOTE & CITATIONS
   ============================== */
blockquote {
	font-size: 1.25em;
	font-style: italic;
	border-left: 4px solid var(--color-fresh);
	padding-left: 1em;
	margin: 1.5em 0;
	color: #555;
}

/* ==============================
   📌 RÉPONSIVE DESIGN
   ============================== */
@media (max-width: 768px) {
	body {
		font-size: 16px;
	}
	h1 { font-size: 36px; }
	h2 { font-size: 30px; }
	h3 { font-size: 24px; }
}