/* ============================================================ /css/lms-chrome.css — chrome FR pour lancemonshop.com. Posé par le chantier « alignement chrome des pages contenu FR » pour donner aux 9 pages contenu héritées (outils, blog index, 2 articles, à-propos, calculateur, mentions-légales, merci, bienvenue) le même header, footer et typo que la nouvelle home FR — SANS rebâtir leurs corps (qui restent stylés par le legacy /assets/lms/css/style.css). Chargé sur : - la home FR (home-fr/index.html) — pour le @font-face source unique ET pour l'override grid footer 5 colonnes (qui accueille la 4e col « Site »). - les 9 pages contenu FR — pour TOUT (typo + chrome). PAS chargé sur la home EN, ni sur les pages-outils EN, ni sur les pages légales EN — ils ont leur propre chaîne de chrome via /css/style.css + /css/listingprep.css + /css/home.css. Ordre de chargement obligatoire sur les pages contenu FR : 1. /assets/lms/css/style.css legacy : body, .container, .card, .hero, .btn, .calc__*, .article-card, .nav-card, .newsletter-form (corps) 2. /css/listingprep.css footer-global complet + brand-mark SVG + brand-wordmark layout 3. /css/lms-chrome.css CE FICHIER : @font-face + tokens + .site-header__brand font + .home-nav + override grid footer 5 cols NE PAS charger : - /css/style.css → collision token --color-primary (legacy orange #d96e3c vs nouveau bleu #2563eb). Casserait .btn--primary, .newsletter-form, .calc__status et .a:hover dans le corps. - /css/home.css → .hero un-scoped dans home.css collisionnerait avec .hero legacy utilisée dans /outils/, /calculateur/, /a-propos/ comme conteneur h1. Body-page-scoped rules inertes ailleurs, OK, mais le .hero un-scoped suffit à bloquer. Sonde intersection prouvée (T1.0 du chantier) listingprep.css × /assets/lms/css/style.css : 1 SEUL sélecteur partagé (`:root`), et listingprep n'ajoute que --color-brand — pas de chevauchement de propriété, pas d'écrasement. Cohabitation safe par construction, zéro !important nécessaire. Backlog (dette assumée) : - Duplication des règles .home-nav__* depuis /css/home.css (pas de moyen propre de partager sans toucher home.css). À résorber au refactor CSS global. - Duplication des règles body.home-page header (background blur, hauteur 72px, font Schibsted) avec scope body.lms-content. Idem refactor à venir. ============================================================ */ /* ============================================================ @font-face — polices auto-hébergées (RGPD/CNIL). SOURCE UNIQUE depuis le chantier d'alignement chrome contenu : ces 8 déclarations vivaient dans home-fr.css avant ce chantier ; elles ont déménagé ici pour servir TOUTE l'identité FR (home + contenu) depuis un seul point. home-fr.css ne les détient plus. Variable fonts modernes : 1 woff2 par famille couvre tous les weights (Schibsted 400/500/600/700/800, JetBrains 400/500/700). 8 @font-face pointent sur les 2 mêmes fichiers — le navigateur les charge une seule fois (cache HTTP). Subset latin uniquement (unicode-range cible Google Fonts). Poids total : ~76 KB (Schibsted 46 KB + JetBrains 31 KB). font-display: swap aligné sur le default Google Fonts. ============================================================ */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/schibstedgrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/schibstedgrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/schibstedgrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/schibstedgrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/schibstedgrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ FIX 4 (T2 série) — Bascule du token d'action legacy orange → navy. Constat navigateur : l'orange legacy --color-primary (#d96e3c) reste perceptible sur les corps des 9 pages contenu (liens, boutons, focus, états actifs) — il jure avec le chrome teal neuf. La couleur ACTION du système n'est PAS le teal (réservé au chrome/marque, illisible sur du texte de lien long) — c'est le NAVY #2563eb qui équipe les boutons des pages-outils EN et les CTA secondaires de la home. Override des 2 tokens de la famille primary, scopé strict body.lms-content (zéro impact home FR/EN/pages-outils EN). Tous les usages legacy `var(--color-primary)` et `var(--color-primary-dark)` basculent par cascade : ACTIONS (basculent en navy par construction) : - L48-49 /assets/lms/css/style.css : a { color } + a:hover - L192-193 .btn--primary background + hover - L264 .calc__field input/select:focus { outline } - L279 .calc__advanced-toggle { color } - L313 .calc__status[data-active="true"] { border-color } - L342 .calc__details-toggle { color } - L565-567 .blog-filters__chip[aria-pressed="true"] bg + border ORPHELINS (markup retiré au chantier T1/T2, règles inertes) : - .site-header__logo (remplacé par .site-header__brand) - .site-header__toggle (retiré, nav CSS-only) - .site-header__nav (remplacé par .home-nav) - .site-footer__nav (remplacé par .site-footer-global__col) - .newsletter-form__submit (remplacé par .formkit-submit) EXCEPTION DÉCORATIVE déjà gérée en T1 : - .tool-card--internal { border-left: 3px solid var(--color-primary); } legacy ligne 476. Surchargée plus bas par `body.lms-content .tool-card--internal { border-left-color: var(--color-brand); }` (teal sur fond blanc — cohérent chrome). Le bg orange-rosé hardcoded #fff8f3 + hover #fff3eb sont aussi surchargés (blanc + teal-teinté très léger). TOKENS NON TOUCHÉS : - --color-affiliate (#f5e9d8 bg) + --color-affiliate-text (#8a5a1a) : callouts d'affiliation, beige/marron neutres décoratifs sur fond clair. Cohérence visuelle préservée. - --color-accent (#2a7a5a vert) : non utilisé en sélecteur critique sur les pages contenu. ============================================================ */ body.lms-content { --color-primary: #2563eb; /* navy système EN — action: liens, btns, focus, états actifs */ --color-primary-dark: #1d4ed8; /* navy foncé hover/text — Tailwind blue-700 */ } /* ============================================================ Header — chrome content pages (scopé body.lms-content) Duplique les valeurs de body.home-page .site-header dans home.css pour parité visuelle exacte entre home FR et pages contenu. Tokens --home-cream / --home-line hardcodés (home.css non chargé). ============================================================ */ body.lms-content .site-header { background: color-mix(in srgb, #f4efe5 86%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid #e6ddcb; } body.lms-content .site-header__inner { max-width: 1180px; padding: 0 2rem; height: 72px; } /* ============================================================ Brand wordmark — Schibsted bold + inner span teal sur content. /css/style.css fournit ces propriétés sur home/tools EN, mais on ne le charge PAS sur les pages contenu FR (collision --color-primary). On duplique donc ici, scopé body.lms-content pour ne pas leaker. listingprep.css fournit .site-header__brand .brand-wordmark { color: var(--color-text); } un-scopé — utilisé tel quel. ============================================================ */ body.lms-content .site-header__brand { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; white-space: nowrap; } body.lms-content .site-header__brand .brand-wordmark > span { color: var(--color-brand); } /* ============================================================ Home nav — main-nav inter-outils + ancre #how + pill « Gratuit ». Duplication assumée depuis /css/home.css pour les règles de base (.home-nav, .home-nav__link, .home-nav__pill) — dette consignée backlog (à résorber au refactor CSS global). Aucune scope body : .home-nav* n'existent pas dans le legacy LMS, donc pas de collision possible. Valeurs hardcodées pour les tokens --home-ink-soft / --home-brand-tint(-2) (home.css non chargé sur content pages). ORDRE DE REPLI = pattern FR acté au chantier home FR (PAS l'ordre EN de home.css). Les outils survivent le plus longtemps : • pill cachée ≤ 1024 px • « Comment ça marche » caché ≤ 760 px • liens outils cachés ≤ 620 px • brand toujours visible /css/home.css pose des seuils EN (tool↓760, how↓540). Sur la home FR, /css/home-fr.css les corrige via re-affichage explicite + re-pose des seuils FR — et lms-chrome.css (chargé APRÈS home-fr.css sur la home) re-pose les MÊMES seuils FR, redondance bénigne qui garantit la victoire de l'ordre FR par double construction. Sur les pages contenu (home.css non chargé), lms-chrome.css est SEUL responsable des seuils — le pattern doit y être complet. Le re-affichage explicite des --tool/--how est ici une sécurité défensive : si une page contenu chargeait /css/home.css par inadvertance, ses display:none EN seraient neutralisés. Aucun coût visuel (inline-flex est le rendu attendu dans le flex parent). ============================================================ */ .home-nav { display: flex; align-items: center; gap: 1.85rem; } .home-nav__link { color: #4a4539; font-weight: 500; font-size: .95rem; text-decoration: none; transition: color .15s; } .home-nav__link:hover { color: var(--color-brand); } .home-nav__pill { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); background: #e4ede7; border: 1px solid #d6e4dc; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; } /* Ré-affichage forcé tool/how : neutralise les display:none EN (home.css) au cas où il serait chargé par cascade. Toujours actif au desktop ; les médias FR ci-dessous repassent à display:none aux seuils FR (760 pour how, 620 pour tool). */ .home-nav__link--tool, .home-nav__link--how { display: inline-flex; } /* Seuils FR (1024 pill, 760 how, 620 tool) — strictement jumeaux de ceux posés dans /css/home-fr.css pour la home FR. */ @media (max-width: 1024px) { .home-nav__pill { display: none; } } @media (max-width: 760px) { .home-nav__link--how { display: none; } } @media (max-width: 620px) { .home-nav__link--tool { display: none; } } /* ============================================================ COMPOSANT notify — variante CLAIRE pour les pages contenu FR. Jumeau structurel du composant notify de la home FR (cf. .notify__card dans /css/home.css) : eyebrow mono teal + titre Schibsted + sous-texte + form Kit en colonne droite, layout 2 cols desktop / 1 col empilé mobile. Diff : palette CLAIRE (surface blanche + texte legacy + bordure --color-border) au lieu du dark home (--home-ink fond + --home-cream texte). L'effet glow radial ::after de la home est volontairement absent sur la variante claire (il ne traduit pas en clair). C'est LE composant de capture email réutilisé en T2 sur les pages contenu FR (fin d'articles, /blog/, /a-propos/, /calculateur/, /mentions-legales/). Markup à reproduire :

Newsletter

… promesse propre à la page …

… déclinaison du sous-texte …

…hooks data-element errors/fields/submit intouchables…
Le scope strict body.lms-content garantit que le notify dark de la home FR reste intact (home.css owns .notify__card hors scope lms). ============================================================ */ body.lms-content .notify__card { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 20px; padding: 2.5rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } body.lms-content .notify__roadmap { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand); margin: 0 0 .75rem; font-weight: 500; } body.lms-content .notify__card h2 { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; color: var(--color-text); margin: 0; } body.lms-content .notify__sub { margin: .65rem 0 0; color: var(--color-text-muted); max-width: 38ch; } @media (max-width: 760px) { body.lms-content .notify__card { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; gap: 1.5rem; } } /* ============================================================ FIX 1 (pilote /outils/) — Form Kit clair sur fond carte blanche. Constat navigateur : sans /css/home.css chargé (exclu par l'Option C à cause du .hero un-scoped), les rules .formkit-* ne sont nulle part sur les pages contenu — le form rendait HTML brut (input system + bouton system) dans le wrapper .newsletter-block. Ports depuis /css/home.css les règles STRUCTURELLES (layout + hooks Kit) + une VARIANTE CLAIRE (input blanc / bouton teal) qui colle au fond .newsletter-block legacy (--color-surface blanc + border --color-border). Scope strict body.lms-content pour ne pas leaker côté home FR (home.css y garde sa variante dark). STRUCTURE — DO NOT FLATTEN. Hooks ck.5.js inchangés. Les CSS classes formkit-* sont les sélecteurs que la lib lit pour styler/animer. ============================================================ */ /* Conteneur form + colonne interne data-style="clean" */ body.lms-content .kit-form { position: relative; z-index: 1; } body.lms-content .kit-form > div[data-style="clean"] { display: flex; flex-direction: column; gap: .75rem; } /* Bandeau d'erreur — ck.5.js reset son innerHTML en boucle ; reste vide et invisible par défaut, prend forme quand le script remplit le