/**
 * Échelle des titres sur mobile et tablette.
 *
 * Le sélecteur porte un `[class]` de plus que nécessaire à la lecture : le pack
 * applique la taille mobile via `body [style*="--usine-text-ds-mobile-font-size"]`,
 * en !important. À !important égal, c'est la spécificité qui tranche — il faut
 * donc dépasser (0,1,1), ce que `body main h1[class]` fait sans recourir à des
 * classes de blocs qui rendraient la règle fragile.
 *
 * Constat mesuré sur cinq pages : le H1 du héros sortait à 28px (mobile) et
 * 37px (tablette) sous des H2 de bloc à 36px et 48px. Le titre principal était
 * plus petit que ceux qui le suivent — la hiérarchie visuelle disait l'inverse
 * de la hiérarchie sémantique.
 *
 * Deux causes : le plafond posé sur le titre du héros pour l'empêcher de couper
 * « Luxopuncture® », et l'uniformisation des titres de blocs, réglée sans tenir
 * compte du H1. S'y ajoutait une lacune de ciblage : les règles visaient les
 * classes en `__headline`, alors que le héros et la FAQ nomment la leur
 * `__title`.
 *
 * Le ciblage se fait donc par balise : le H1 est unique par page (voir
 * usine_claim_page_heading_tag), les titres de cartes sont en H3. Cette feuille
 * est chargée après celles des blocs, pour trancher la cascade une bonne fois
 * plutôt que d'empiler des sélecteurs de plus en plus spécifiques.
 */

@media (max-width: 768px) {
    /* Les titres de blocs lisent cette variable (voir MOBILE-TYPO-UNIFORM-001) :
       la regler ici evite d'avoir a surenchérir sur la specificite. */
    :root {
        --usine-mobile-headline-size: 28px;
    }

    body main h1[class],
    body [class*="__headline"]:not([class*="--as-text"]),
    body [class*="__headtitle"] {
        line-height: 1.15;
    }

    body main h2[class],
    body main h2 {
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    body main h1[class],
    body main h1 {
        font-size: clamp(30px, 8.6vw, 34px) !important;
        line-height: 1.14 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body main h2[class],
    body main h2 {
        font-size: 36px !important;
        line-height: 1.16 !important;
    }

    body main h1[class],
    body main h1 {
        font-size: clamp(38px, 5.2vw, 44px) !important;
        line-height: 1.14 !important;
    }
}