/* ================================================================== LORENTS — VARIANTE 2 : LE HÉROS PASSE AU JOUR, LA PAGE PREND UN RYTHME ------------------------------------------------------------------ Portée : body.lrs-b2, posée en plus de .lrs-blanc. Cette feuille est servie APRÈS la feuille blanche et ne fait que la contredire là où la variante diverge. ?lrs-blanc=1 ne la charge pas. Ce qu'on a appris des captures de pixloc.fr (20/09) : leur page n'est pas blanche, elle ALTERNE — crème, blanc, gris, une bande sombre, blanc, pied noir. Sept respirations. C'est ce rythme qui fait « pro », pas la clarté. ================================================================== */ /* ---- A. LE HÉROS AU JOUR --------------------------------------- La variante 1 gardait la nuit sur le héros (voir la section 4-5 de cadre-clair.css). Ici on la défait : quatre classes contre trois, la variante l'emporte sans !important partout. La photo ne disparaît pas — elle passe à DROITE, le texte s'assoit sur la crème à gauche. C'est la composition de pixloc : un aplat clair qui porte le discours, l'image qui respire à côté. ---------------------------------------------------------------- */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero{ --lrs-ink:#FFFFFF; --lrs-ink-2:#FAF7F2; --lrs-ink-t:255,255,255; --lrs-tint:38,26,19; --lrs-paper:#241A14; --lrs-accent:#BA4C18; --lrs-accent-lit:#BA4C18; --pp:#241A14; color:#241A14; background:#FAF7F2; } body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero::before{ background: linear-gradient(100deg,#FAF7F2 0%,#FAF7F2 44%,rgba(250,247,242,.92) 56%, rgba(250,247,242,.45) 76%,rgba(250,247,242,.18) 100%), linear-gradient(180deg,rgba(250,247,242,0) 58%,rgba(250,247,242,.55) 84%,#FFFFFF 100%), url('https://lorents.fr/wp-content/uploads/2026/05/wellpharma-2025-premontres-161-1536x1024.jpg') center 42%/cover no-repeat !important; opacity:1 !important; } /* la variante 1 posait un fondu blanc sur les 120 derniers pixels du héros pour rejoindre le catalogue : le dégradé ci-dessus le fait déjà. */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero::after{content:none !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero h1.lrs-lc-h1.lrs-lc-h1{color:#241A14 !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero__lead{color:rgba(38,26,19,.82) !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-hero__lead b{color:#241A14 !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-top{color:#BA4C18 !important} /* la barre de recherche n'est plus du verre fumé sur une photo : elle devient la carte blanche posée sur la crème. */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-srch{ background:#FFFFFF !important; border:1px solid rgba(38,26,19,.14) !important; box-shadow:0 12px 34px rgba(38,26,19,.10) !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 .lrs-lc-srch.lrs-lc-srch.lrs-lc-srch.lrs-lc-srch.lrs-lc-srch.lrs-lc-srch :is(input,select){color:#241A14 !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-srch label{color:rgba(38,26,19,.7) !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-srch__f{border-color:rgba(38,26,19,.14) !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-srch__note{color:rgba(38,26,19,.62) !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-srch ::placeholder{color:rgba(38,26,19,.45) !important} /* les étiquettes de famille sous la recherche. PIÈGE, mesuré dans le miroir : elles sont tenues par lorents-rail-autres avec le blindage html:not(#lrs-rm), donc par un sélecteur à identifiant. Ma première règle, à quatre classes, perdait et les étiquettes sortaient crème sur crème — contraste 1,05:1, invisibles. Il faut reprendre le blindage. */ html:not(#lrs-rm) body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-chips.lrs-lc-chips a{ background:#FFFFFF !important;border-color:rgba(38,26,19,.16) !important; color:#241A14 !important} html:not(#lrs-rm) body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-lc-chips.lrs-lc-chips a:hover{ background:rgba(224,122,74,.10) !important;border-color:rgba(224,122,74,.6) !important; color:#BA4C18 !important} /* ---- B. L'EN-TÊTE RESTE LA NUIT (corrigé le 20/09/2026) --------- CE QUI ÉTAIT ÉCRIT ICI ÉTAIT FAUX, et se voyait : la variante retournait l'encre de la barre (--pp sombre, logo noirci par filter:brightness(0) invert(11%)) en pariant sur un fond blanc piloté par --fd. Or --fd vaut 0 au repos : la barre est alors TRANSPARENTE, et ce qu'on voit derrière est le gabarit d'en-tête 359236, qui reste à #0D0D0D. Résultat mesuré le 20/09 : encre rgb(36,26,20) sur fond rgb(13,13,13) — contraste 1,05:1, le logo et tous les liens noirs sur noir. Le client l'a signalé. Deux sorties possibles : repeindre aussi le gabarit en blanc, ou renoncer à l'inversion. On renonce — c'est déjà le contrat écrit au §4-5 de la feuille blanche : « l'en-tête reste la nuit ». Son logo est un aplat blanc détouré, sa barre posée est un aplat sombre, et un bandeau sombre au-dessus d'un catalogue blanc est la bonne convention. Les six règles de la variante sont donc retirées : la barre, son encre, le logo, le méga-panneau, le panneau plein écran et le bouton burger reviennent à la feuille blanche, c'est-à-dire à l'en-tête de tout le site. ---------------------------------------------------------------- */ /* ---- C. LE RYTHME DES FONDS ------------------------------------ Les treize sections du module sont déjà pleine largeur : il suffit de les peindre, aucun artifice de débordement n'est nécessaire. Le découpage suit le sens, pas l'alternance mécanique : ce qui EXPLIQUE (les étapes, les packs, les questions) s'assoit sur la crème ; ce qui MONTRE (le catalogue, les produits, la livraison) reste sur le blanc. ---------------------------------------------------------------- */ body.lrs-blanc.lrs-blanc.lrs-b2 :is(#comment,#packs,#faq,#devis){background:#FAF7F2 !important} body.lrs-blanc.lrs-blanc.lrs-b2 :is(#catalogue,#populaires,#livraison,#conditions, .lrs-lc-flush,.lrs-lc-tight,.lrs-lc-end){background:#FFFFFF !important} /* sur la crème, une carte crème ne se voit plus : elle repasse en blanc plein */ body.lrs-blanc.lrs-blanc.lrs-b2 :is(#comment,#packs,#faq,#devis) :is(.lrs-c,.lrs-lc-faq details,.lrs-lc-dv__f){ background:#FFFFFF !important} /* la section devis portait déjà son propre fond dans la variante 1 */ body.lrs-blanc.lrs-blanc.lrs-b2 #devis-formulaire.e-con{background:transparent !important} /* ---- D. UNE BANDE SOMBRE AVANT LE PIED ------------------------- C'est le geste le plus visible des captures : pixloc coupe sa page d'une bande sombre en dégradé pour son offre d'occasions, juste avant le pied. Chez LORENTS le bloc qui occupe cette place est la passerelle « Louer, c'est bien. Ne rien avoir à faire, c'est mieux » — un argument d'agence, pas de catalogue. Il gagne à sortir du blanc. La nuit y est rétablie par les jetons, puis les quelques règles que la feuille blanche avait retournées sont remises à l'endroit. ---------------------------------------------------------------- */ body.lrs-blanc.lrs-blanc.lrs-b2 #prestations{ --lrs-ink:#12100E; --lrs-ink-2:#1B1613; --lrs-ink-t:18,16,14; --lrs-tint:246,241,236; --lrs-paper:#F6F1EC; --lrs-accent:#E07A4A; --lrs-accent-lit:#E07A4A; --lb-ink:#F6F1EC; --lb-surface:rgba(246,241,236,.05); --lb-line:rgba(246,241,236,.36); background:linear-gradient(165deg,#12100E 0%,#1B1613 55%,#12100E 100%) !important; color:#F6F1EC; } body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations .lrs-lc-pass{background:transparent !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations :is(h2,h3,p,li,b,strong){color:#F6F1EC !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations .lrs-kw{color:#E07A4A !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations .lrs-lc-pass__l a{ background:rgba(246,241,236,.05) !important; border:1px solid rgba(246,241,236,.16) !important; color:#F6F1EC !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations .lrs-lc-pass__l a:hover{ background:rgba(224,122,74,.14) !important;border-color:rgba(224,122,74,.6) !important} body.lrs-blanc.lrs-blanc.lrs-b2.lrs-b2 #prestations .lrs-b--g.lrs-b--g{ color:#F6F1EC !important;border-color:rgba(246,241,236,.36) !important;background:transparent !important} /* ---- E. LES BANDES CREME RESPIRENT ----------------------------- Signale par le client : « les sections a fond creme n ont aucune marge interne, le contenu est colle ». Vrai, et c est moi qui ai pose ces bandes : le fond demarre pile sur le contenu. Sa regle, qui donne toute la geometrie : la marge HAUTE de la bande doit egaler la marge BASSE de la section precedente, en gardant le rythme du site. Donc, pour un ecart total de 176 px d encre a encre : 88 px de blanc + 88 px de creme = 176 (marge de la bande) (son rembourrage interne) et de l autre cote, 88 de creme puis 88 de blanc avant la suivante. En mobile le rythme vaut 120, donc 60 + 60. La section qui SUIT une bande doit donc elle aussi passer a 88 : sans quoi elle repartirait a 176 apres les 88 de creme, soit 264. ---------------------------------------------------------------- */ @media(min-width:821px){ html body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-loc > section:is(#comment,#packs,#faq,#devis){ padding-block:88px !important;margin-top:88px !important} html body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-loc > section:is(#populaires,#livraison,#devis,#prestations){ margin-top:88px !important} } @media(max-width:820px){ html body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-loc > section:is(#comment,#packs,#faq,#devis){ padding-block:60px !important;margin-top:60px !important} html body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-loc > section:is(#populaires,#livraison,#devis,#prestations){ margin-top:60px !important} } /* la carte du formulaire portait deja son propre fond creme dans la variante 1 : sur une bande creme elle doit redevenir blanche, sinon la bande et la carte se confondent. */ body.lrs-blanc.lrs-blanc.lrs-b2 #devis .lrs-lc-dv__f{background:#FFFFFF !important}