/**
 * SecGram — typography.css
 * Typographie fluide et lisible.
 *
 * Spécificité volontairement nulle (:where) : les réglages typographiques
 * définis dans Divi (Customizer / modules) gardent toujours la main.
 * Les classes .sg-h* permettent de styler un niveau visuel sans imposer
 * le niveau sémantique (voir docs/DIVI.md).
 */

/* Hiérarchie par défaut — surchargeable par Divi. */
:where(h1, .sg-h1) {
	font-size: var(--sg-text-h1);
	line-height: var(--sg-leading-heading);
	font-weight: 700;
	color: var(--sg-color-ink);
}

:where(h2, .sg-h2) {
	font-size: var(--sg-text-h2);
	line-height: var(--sg-leading-heading);
	font-weight: 700;
	color: var(--sg-color-ink);
}

:where(h3, .sg-h3) {
	font-size: var(--sg-text-h3);
	line-height: 1.3;
	font-weight: 600;
	color: var(--sg-color-ink);
}

:where(h4, .sg-h4, h5, h6) {
	font-size: var(--sg-text-h4);
	line-height: 1.35;
	font-weight: 600;
	color: var(--sg-color-ink);
}

/* Les longs mots (URLs, termes techniques) ne cassent pas la mise en
   page sur mobile. */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* ---- Utilitaires éditoriaux ---------------------------------------- */

/* Surtitre court au-dessus d'un H2 (« Nos services », « SEO local »…). */
.sg-eyebrow {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sg-color-primary-strong);
	margin-block-end: var(--sg-space-xs);
}

/* Paragraphe d'introduction, légèrement plus grand. */
.sg-lead {
	font-size: var(--sg-text-lg);
	line-height: 1.65;
	color: var(--sg-color-body);
}

/* Conteneur de prose : longueur de ligne confortable + rythme vertical.
   À appliquer sur un module Texte Divi ou un wrapper d'article. */
.sg-prose {
	max-width: var(--sg-container-text);
}

.sg-prose :where(p, ul, ol, blockquote, figure, pre, table) {
	margin-block: 0 var(--sg-space-md);
}

.sg-prose :where(h2) {
	margin-block: var(--sg-space-xl) var(--sg-space-sm);
}

.sg-prose :where(h3, h4) {
	margin-block: var(--sg-space-lg) var(--sg-space-xs);
}

.sg-prose :where(ul, ol) {
	padding-inline-start: 1.4em;
}

.sg-prose :where(li) {
	margin-block-end: var(--sg-space-2xs);
}

/* Liens dans la prose : soulignés (repère non chromatique — WCAG). */
.sg-prose :where(a) {
	color: var(--sg-color-primary-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--sg-transition-fast);
}

.sg-prose :where(a:hover) {
	color: var(--sg-color-primary);
}