/* ===== Échelle typographique unifiée (issue #70, option A) =====
*
* PROBLÈME : 54 coefficients vw différents dans le thème -> chaque texte atteint son
* minimum à une largeur différente, les rapports entre titres et corps s'écrasent
* (titre de section / corps : 3,0 à 1728px mais 1,9 à 1100px).
*
* PRINCIPE : UNE taille de base fluide, toutes les autres en sont des multiples.
* Les rapports sont donc constants à toutes les largeurs.
* base = 20px à 1728px (largeur des maquettes Figma), 16px à 980px et en dessous,
* interpolation linéaire entre les deux.
*
* PORTÉE : desktop/tablette (≥901px). En dessous, les règles d'origine et
* mobile-foundations.css continuent de s'appliquer telles quelles.
*
* ROLLBACK : cette feuille est chargée par inc/modules/92-echelle-typo.php et se
* désactive sans toucher à aucun autre fichier :
* php wp-cli.phar option update braillard_type_scale off
* (ou ?typo=off / ?typo=on dans l'URL pour comparer à la volée).
*/
@media (min-width: 901px){
:root{
/* 16px à 980, 20px à 1728, linéaire entre les deux */
--fs: clamp(16px, calc(16px + (100vw - 980px) * 0.005348), 20px);
--fs-meta: calc(var(--fs) * 0.8); /* dates, légendes, petits liens 16px @1728 */
--fs-anchor: calc(var(--fs) * 0.9); /* ancres du sous-menu 18 */
--fs-body: var(--fs); /* corps de texte 20 */
--fs-lead: calc(var(--fs) * 1.1); /* intertitres courts 22 */
--fs-strong: calc(var(--fs) * 1.4); /* titres de cartes, sous-menu 28 */
--fs-dots: calc(var(--fs) * 1.5); /* paginations PP Eiko 30 */
--fs-nav: calc(var(--fs) * 1.7); /* piliers de la nav de page 34 */
--fs-title-s: calc(var(--fs) * 2.2); /* titre « moyen » 44 */
--fs-title: calc(var(--fs) * 3.0); /* titres de section 60 */
--fs-title-l: calc(var(--fs) * 3.2); /* titre « grand » 64 */
--fs-hero: calc(var(--fs) * 3.6); /* piliers du hero d'accueil 72 */
--fs-num: calc(var(--fs) * 6.55); /* chiffres .01 des Missions 131 */
/* le token historique du corps suit désormais l'échelle */
--br-fs-text: var(--fs-body);
}
/* ---------- Accueil ---------- */
.br-hero__theme-btn{ font-size: var(--fs-hero); }
.br-hero__more{ font-size: var(--fs-meta); }
.br-band__text{ font-size: var(--band-text-size, var(--fs-body)); }
.br-actu__heading{ font-size: var(--fs-title); }
.br-actu__title{ font-size: var(--fs-strong); }
.br-actu__date{ font-size: var(--fs-meta); }
.br-actu__excerpt{ font-size: var(--fs-body); }
.br-actu__dots{ font-size: var(--fs-dots); }
.br-actu__all{ font-size: var(--fs-meta); }
.br-mission__heading{ font-size: var(--fs-title); }
.br-mission__num{ font-size: var(--fs-num); }
.br-mission__title{ font-size: var(--fs-lead); }
.br-mission__text{ font-size: var(--fs-strong); }
.br-mission__dots{ font-size: var(--fs-dots); }
.br-mission__btn{ font-size: var(--fs-anchor); } /* « En savoir plus » : 18px @1728 */
/* Variante « page de contenu » (mission--narrow, colonne étroite) : elle avait ses
propres tailles, bien plus petites (titre 16px, texte 14px) et hors échelle.
On la remonte d'un cran tout en gardant la nuance avec la version pleine largeur
(titre 22 / texte 20 au lieu de 22 / 28). Espacements internes alignés sur
l'échelle pour rester proportionnés au texte. */
.br-mission--narrow .br-mission__heading{ font-size: var(--fs-title-s); }
.br-mission--narrow .br-mission__title{ font-size: var(--fs-lead); }
.br-mission--narrow .br-mission__text{ font-size: var(--fs-body); line-height: 1.4; }
.br-mission--narrow .br-mission__btn{ font-size: var(--fs-anchor); }
.br-mission--narrow .br-mission__body{ margin-top: calc(var(--fs) * 1.3); }
.br-mission--narrow .br-mission__btn{ padding-top: calc(var(--fs) * 0.6); }
.br-mission__body{ margin-top: calc(var(--fs) * 1.3); }
/* Lien collé au texte (option B, client 2026-09-26) : sans margin-top:auto, le lien
suit immédiatement sa description au lieu d'être aligné en bas de carte. Les liens
des 3 cartes sont donc en escalier, avec le MÊME écart partout. */
.br-mission__btn{ padding-top: calc(var(--fs) * 0.6); margin-top: 0; }
.br-btn{ font-size: var(--fs-body); }
.br-btn--lien{ font-size: calc(var(--fs) * 0.85); }
/* Hero « activités » (V1 / V2 / V3) */
.br-hh__title{ font-size: var(--fs-body) !important; } /* la règle d'origine est !important */
.br-hh__text{ font-size: var(--fs-body); }
.br-hh__date{ font-size: var(--fs-meta); }
.br-hh__more{ font-size: var(--fs-meta); }
.br-hh__eyebrow{ font-size: calc(var(--fs) * 1.2); }
.br-hh--v1 .br-hh__figure,
.br-hh-wrap--figtitle .br-hh--v1 .br-hh__figure,
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure{ font-size: calc(var(--fs) * 2.6); }
.br-hh--v2 .br-hh__figure{ font-size: calc(var(--fs) * 5.6); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure{ font-size: var(--fs-title); }
.br-hh--v3 .br-hh__figure{ font-size: calc(var(--fs) * 3.7); }
.br-hh--v1 .br-hh__figure.is-long,
.br-hh--v3 .br-hh__figure.is-long{ font-size: calc(var(--fs) * 2.3); }
.br-hh--v2 .br-hh__figure.is-long{ font-size: var(--fs-title); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure.is-long{ font-size: calc(var(--fs) * 2.8); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure.is-xlong{ font-size: calc(var(--fs) * 2.1); }
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure.is-long{ font-size: calc(var(--fs) * 2.4); }
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure.is-xlong{ font-size: calc(var(--fs) * 1.8); }
.br-ibar__item a{ font-size: calc(var(--fs) * 1.1); }
/* ---------- Pages de contenu (origines…) ---------- */
.br-page-title{ font-size: var(--fs-title); }
.br-pagenav__pillar a{ font-size: var(--fs-nav); }
.br-pagenav__subitem a{ font-size: var(--fs-body); }
.br-subnav__heading,
.br-subnav__item a{ font-size: var(--fs-strong); }
.br-subnav__anchor a{ font-size: var(--fs-anchor); }
.br-titre--grand .br-titre__title{ font-size: var(--fs-title-l); }
.br-titre--moyen .br-titre__title{ font-size: var(--fs-title-s); }
.br-titre--petit .br-titre__title{ font-size: calc(var(--fs) * 1.6); }
.br-titre__sub{ font-size: var(--fs-strong); }
/* Corps de page : les /
héritaient de body (figé à 20px via --br-fs-body) alors
que les titres suivaient l'échelle -> le rapport titre/texte s'écrasait. */
body{ font-size: var(--fs-body); }
.elementor-widget-text-editor,
.elementor-widget-theme-post-content{ font-size: var(--fs-body); }
.elementor-widget-text-editor p, .elementor-widget-text-editor li,
.elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li{ font-size: var(--fs-body); }
/* Intertitres du contenu (h2 = 40px @1728, h3 = 28, h4 = 22) */
.elementor-widget-text-editor h2,
.elementor-widget-theme-post-content h2,
.br-article__content h2{ font-size: var(--fs-title-h2, calc(var(--fs) * 2.0)); }
.elementor-widget-text-editor h3,
.elementor-widget-theme-post-content h3{ font-size: var(--fs-strong); }
.elementor-widget-text-editor h4,
.elementor-widget-theme-post-content h4{ font-size: var(--fs-lead); }
/* ---------- Classes utilitaires pour Elementor ----------
* Un réglage « Typographie » posé dans Elementor est PLUS SPÉCIFIQUE que cette feuille :
* il fige la taille en px et ne suit plus l'échelle. Pour qu'un widget suive l'échelle,
* laisser la typographie VIDE dans Elementor et ajouter l'une de ces classes dans
* « Avancé → Classes CSS » :
* br-fs-meta (0,8x) · br-fs-body (1x) · br-fs-lead (1,1x) · br-fs-strong (1,4x)
* br-fs-title-s (2,2x) · br-fs-title (3x) · br-fs-title-l (3,2x) · br-fs-hero (3,6x)
*/
.br-fs-meta, .br-fs-meta p, .br-fs-meta li, .br-fs-meta h1, .br-fs-meta h2, .br-fs-meta h3, .br-fs-meta h4, .br-fs-meta h5, .br-fs-meta h6{ font-size: var(--fs-meta); }
.br-fs-body, .br-fs-body p, .br-fs-body li, .br-fs-body h1, .br-fs-body h2, .br-fs-body h3, .br-fs-body h4, .br-fs-body h5, .br-fs-body h6{ font-size: var(--fs-body); }
.br-fs-lead, .br-fs-lead p, .br-fs-lead li, .br-fs-lead h1, .br-fs-lead h2, .br-fs-lead h3, .br-fs-lead h4, .br-fs-lead h5, .br-fs-lead h6{ font-size: var(--fs-lead); }
.br-fs-strong, .br-fs-strong p, .br-fs-strong li, .br-fs-strong h1, .br-fs-strong h2, .br-fs-strong h3, .br-fs-strong h4, .br-fs-strong h5, .br-fs-strong h6{ font-size: var(--fs-strong); }
.br-fs-title-s, .br-fs-title-s p, .br-fs-title-s h1, .br-fs-title-s h2, .br-fs-title-s h3, .br-fs-title-s h4{ font-size: var(--fs-title-s); }
.br-fs-title, .br-fs-title p, .br-fs-title h1, .br-fs-title h2, .br-fs-title h3, .br-fs-title h4{ font-size: var(--fs-title); }
.br-fs-title-l, .br-fs-title-l p, .br-fs-title-l h1, .br-fs-title-l h2, .br-fs-title-l h3, .br-fs-title-l h4{ font-size: var(--fs-title-l); }
.br-fs-hero, .br-fs-hero p, .br-fs-hero h1, .br-fs-hero h2, .br-fs-hero h3, .br-fs-hero h4{ font-size: var(--fs-hero); }
/* ---------- Pied de page ---------- */
/* Les piliers étaient fluides (24-34px) et les liens FIGÉS à 16px : en rétrécissant,
les piliers fondaient tout seuls. Tout le footer passe sur l'échelle. */
.br-footer__pillars-list a{ font-size: var(--fs-nav); } /* 34px @1728 */
.br-footer__links-list a,
.br-footer__addr,
.br-footer__contactinfo{ font-size: var(--fs-meta); } /* 16px @1728 */
.br-footer__social{ font-size: calc(var(--fs) * 1.1); } /* 22px @1728 */
.br-slideshow__cap, .br-slideshow__count,
.br-sscp__count{ font-size: var(--fs-meta); }
.br-sscp__cap{ font-size: calc(var(--fs) * 0.7); }
}