/* ========================================================================== SunLouvre Pergolas : unification typographique. Cree le 25 septembre 2026. Charge en DERNIER, apres common.css, apres Tailwind, apres les CSS de page. C'est le seul fichier a debrancher si quelque chose casse : il ne contient que des alignements, aucune mise en page. Il lit les valeurs de sl-tokens.css, qui est charge en PREMIER. HORS PERIMETRE, par decision du proprio le 25 septembre 2026 : les pages d'atterrissage publicitaires (landing-native.css, landing-native-v2.css, landing-pergola-2semaines.css) restent telles quelles. Elles recoivent le trafic paye, on n'y touche pas. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Les graisses reelles Le kit Adobe duy6uql ne sert futura-pt qu'en 400 et 700. Le theme demandait aussi du 450 et du 500 : le navigateur les rendait deja en 400, la demande etait donc un mensonge sans effet. On l'ecrit franchement, et surtout on arrete d'en ajouter. L'echelle de la refonte, entiere : 400 corps, lede, titres par defaut 700 la moitie accentuee d'un titre, les boutons -------------------------------------------------------------------------- */ body.home [style*="font-weight: 450"], body.home [style*="font-weight:450"], body.home [style*="font-weight: 500"], body.home [style*="font-weight:500"] { font-weight: var(--sl-weight-regular); } /* -------------------------------------------------------------------------- 2. Page d'accueil : la meme typographie que la refonte Perimetre : uniquement les familles et les graisses, comme demande. Les tailles et la mise en page de l'accueil actuelle ne bougent pas, elles seront remplacees quand le gabarit de la refonte sera porte. -------------------------------------------------------------------------- */ /* Sans : tout ce qui se dit Futura passe par la pile des tokens, donc par la vraie futura-pt. Avant, section-reviews.php demandait 'Futura PT', une famille que personne ne charge : ce bloc s'affichait en police systeme. */ /* Pas de selecteur fourre-tout ici : un `.sunlouvre-reviews *` l'emportait sur `.sunlouvre-reviews__title-accent` et retournait l'accent italique en Futura. Les familles du bloc avis sont reglees dans son propre fichier, section-reviews.php, qui pointe desormais sur les tokens. */ body.home .font-futura, body.home .description-wysiwig { font-family: var(--sl-font-sans); } body.home .font-futura, body.home .description-wysiwig, body.home .description-wysiwig p, body.home .sunlouvre-review-card__location, body.home .sunlouvre-review-card__text { font-weight: var(--sl-weight-regular); } /* Serif : Cormorant Garamond italique en 400, comme la refonte. L'accueil l'affichait en 500, ce qui l'epaississait sans raison, alors que le surtitre de la refonte est volontairement fin. */ body.home .font-cormorant, body.home .sunlouvre-reviews__title-accent { font-family: var(--sl-font-serif); font-weight: var(--sl-weight-regular); } /* Les titres de section en majuscules gardent leur graisse de titre. Dans la refonte c'est la moitie accentuee qui porte le 700, pas le titre entier : tant que le gabarit n'est pas porte, on reste en 400 partout plutot que de choisir a sa place quelle moitie est grasse. */ body.home .sunlouvre-reviews__title-main, body.home .sunlouvre-review-card__author { font-family: var(--sl-font-sans); font-weight: var(--sl-weight-regular); } /* Le seul 700 de la page : les boutons, comme dans la refonte. */ body.home .btn strong, body.home .sunlouvre-reviews__cta { font-weight: var(--sl-weight-bold); } /* -------------------------------------------------------------------------- 3. Une seule echelle de titres pour tout le site Mesure du 25 septembre 2026 sur le site local, a 1440 px de large. Les titres de page allaient de 42 px a 75 px et les titres de section de 30 px a 55 px, page par page : H1 soumission 42 · realisations 49 · nous joindre 62 · blogue 64 · accessoires 72 · visite virtuelle 75 H2 nous joindre 30 · accessoires 38 et 42 · villes 44 · accueil 46 et 50 · avis 50 · visite virtuelle 52 et 55 D'ou l'impression de pages venues de sites differents. On ramene tout sur l'echelle de la refonte, qui est fluide (clamp) et se replie donc toute seule sur mobile, sans variante `max-md:` a maintenir. Le serif et le sans continuent de cohabiter, c'est le systeme : un surtitre en Cormorant italique AU-DESSUS d'un titre en Futura. Les deux gardent donc des tailles DIFFERENTES, sinon la hierarchie s'aplatit et le bloc devient laid. Surtitre 28 px, titre 43 px, a 1440 px de large. Ce qu'on ne touche PAS, volontairement : - les titres de CARTE (H2 de 18 px sur le blogue, H3 de 16 a 18 px sur l'accueil et les realisations). Ce sont des vignettes, pas des titres de section : les grossir casserait les grilles. - la coupe grasse/normale des titres. Certaines pages l'ont, d'autres non, et ca reste comme c'est. - les pages d'atterrissage publicitaires, hors perimetre. -------------------------------------------------------------------------- */ /* --- Titre de page ------------------------------------------------------- Un seul H1 par page sur tout le site mesure. Sur le blogue et la page contact, ce H1 est en Cormorant italique : il le reste, seule sa taille rejoint l'echelle. */ body:not([class*="template-landing"]) h1 { font-size: var(--sl-text-h1); line-height: var(--sl-leading-h); letter-spacing: var(--sl-tracking-h); } /* --- Surtitre en serif italique ------------------------------------------ La ligne en Cormorant italique posee AU-DESSUS d'un titre en Futura. Elle faisait 50 px, soit plus gros que le titre qu'elle annonce. Elle passe a l'echelle du surtitre. */ body:not([class*="template-landing"]) h2.italic.font-cormorant, body:not([class*="template-landing"]) .sunlouvre-reviews__title-intro { font-size: var(--sl-text-eyebrow); line-height: 1.2; } /* --- Titre de section en sans -------------------------------------------- Nommes un par un : un `h2` global aurait avale les titres de vignette du blogue et des realisations. */ body:not([class*="template-landing"]) .sl-acc-product__title, body:not([class*="template-landing"]) .sl-acc-cta__title, body:not([class*="template-landing"]) .slr-villes__title, body:not([class*="template-landing"]) .vv-title, body:not([class*="template-landing"]) .sunlouvre-reviews__title-main, body:not([class*="template-landing"]) h2.font-futura { font-size: var(--sl-text-h2); line-height: var(--sl-leading-h); } /* --- Sous-titres surdimensionnes de la visite virtuelle ------------------- 32 px et 37 px, sans classe, dans une page dont le titre fait deja 75 px. Ils rejoignent l'echelle H3. */ body.page-template-template-visite-virtuelle h3 { font-size: var(--sl-text-h3); line-height: var(--sl-leading-h); }