/* ════════════════════════════════════════════════════════════
   ÉCHELLE TYPOGRAPHIQUE — 7 niveaux, valeurs paires uniquement
   Chargée en dernier : elle fixe toutes les tailles de la page d'accueil
   (sauf les textes des interfaces illustrées dans les démos).

   Paliers fixes (pas de clamp, pour garder des valeurs rondes) :
     mobile   < 768 px
     tablette 768 → 1199 px
     desktop  ≥ 1200 px

   Niveau       desktop   tablette   mobile      (taille / interligne, px)
   Display      72 / 76   56 / 60    40 / 44     titre du hero, titre du contact
   Titre        48 / 52   40 / 44    32 / 36     titres de section, titres d'étapes
   Sous-titre   28 / 32   24 / 28    24 / 28     « Histoires Client », cartes du contact
   Accroche     22 / 32   20 / 28    18 / 26     phrase d'accroche, liste « pas la bonne personne »
   Corps        18 / 28   18 / 28    16 / 24     descriptions des études de cas et des étapes
   Label        16 / 20                          surtitres d'étapes, menu, liens, boutons
   Micro        14 / 20                          tags, bandeau, message de copie
   Titres mixtes Nocturne + Neue : la Neue un cran en dessous
   (72→68, 56→52, 48→46, 40→38, 32→30).
   Le préfixe « body » sert juste à passer devant les règles d'origine.
════════════════════════════════════════════════════════════ */

:root {
	/* mobile */
	--ts-display: 40px;   --lh-display: 44px;   --ts-display-sans: 38px;
	--ts-title: 32px;     --lh-title: 36px;     --ts-title-sans: 30px;
	--ts-sub: 24px;       --lh-sub: 28px;
	--ts-lead: 18px;      --lh-lead: 26px;
	--ts-body: 16px;      --lh-body: 24px;
	--ts-label: 16px;     --lh-label: 20px;
	--ts-micro: 14px;     --lh-micro: 20px;
	--ts-logo: 20px;
}
@media (min-width: 768px) {
	:root {
		--ts-display: 56px;   --lh-display: 60px;   --ts-display-sans: 52px;
		--ts-title: 40px;     --lh-title: 44px;     --ts-title-sans: 38px;
		--ts-sub: 24px;       --lh-sub: 28px;
		--ts-lead: 20px;      --lh-lead: 28px;
		--ts-body: 18px;      --lh-body: 28px;
	}
}
@media (min-width: 1200px) {
	:root {
		--ts-display: 72px;   --lh-display: 76px;   --ts-display-sans: 68px;
		--ts-title: 48px;     --lh-title: 52px;     --ts-title-sans: 46px;
		--ts-sub: 28px;       --lh-sub: 32px;
		--ts-lead: 22px;      --lh-lead: 32px;
		--ts-body: 18px;      --lh-body: 28px;
	}
}

/* ── Display ── */
body .hj .hs__title,
body .contact-sec__title {
	font-size: var(--ts-display);
	line-height: var(--lh-display);
}
body .contact-sec__title .contact-sec__title-sans { font-size: var(--ts-display-sans); }

/* ── Titre ── */
body .svc-heading,
body .marques__heading,
body .proc .proc-step__title {
	font-size: var(--ts-title);
	line-height: var(--lh-title);
}
body .proc .proc-step__title .svc-item__title-outline {
	font-size: var(--ts-title-sans);
	line-height: var(--lh-title);
	margin-top: 0;
}

/* ── Sous-titre ── */
body .svc-eyebrow.hj__label,
body .metiers__card-label {
	font-size: var(--ts-sub);
	line-height: var(--lh-sub);
}

/* ── Accroche ── */
body .hs__sub,
body .fit-list li {
	font-size: var(--ts-lead);
	line-height: var(--lh-lead);
}

/* ── Corps ── */
body .hj-case .hs__quote,
body .proc .svc-item__desc {
	font-size: var(--ts-body);
	line-height: var(--lh-body);
}

/* ── Label ── */
body .proc-kicker,
body .nav__links a,
body .hs__link,
body .btn,
body .contact-sec__actions .btn,
body .hs__bar-label,
body .marques__eyebrow,
body .svc-eyebrow:not(.hj__label) {
	font-size: var(--ts-label);
	line-height: var(--lh-label);
}

/* ── Micro ── */
body .proc-step__text .svc-tag,
body .proc-band__list li,
body .contact-sec__status {
	font-size: var(--ts-micro);
	line-height: var(--lh-micro);
}
body .proc-band__arc text { font-size: var(--ts-micro); }

/* ── Logo (« Soler » est ensuite calé sur la largeur de « Leslie ») ── */
body .hs__logo { font-size: var(--ts-logo); }

/* Mobile : le titre du hero peut passer sur plusieurs lignes */
@media (max-width: 767px) {
	body .hj .hs__title { white-space: normal; }
}