/* ================================================================== 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 SUIT ------------------------------------------ PIÈGE. La barre est transparente au repos et devient presque noire une fois posée : son fond est rgba(13,13,13, --fd × .95), --fd allant de 0 à 1 sur 120 px de défilement. Sur un héros clair, une encre sombre serait illisible une fois la barre posée, et une encre claire illisible au repos. On ne peint donc pas le texte : on retourne LE FOND de la barre. Blanc au lieu de noir, même pilotage par --fd, l'encre reste sombre dans les deux états. ---------------------------------------------------------------- */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd.lrs-hd{ --lrs-ink:#FFFFFF; --lrs-paper:#241A14; --lrs-tint:38,26,19; --pp:#241A14; --nk:#FFFFFF; --rl:rgba(38,26,19,.14); background:rgba(255,255,255,calc(var(--fd,0)*0.96)) !important; color:#241A14; } body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd.lrs-hd :is(a,button,.menu-item a){color:#241A14} /* le logo est un aplat blanc détouré : le filtre le noircit sans nouveau fichier, en gardant l'anticrénelage et la transparence. */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd__logo img{filter:brightness(0) invert(11%)} /* le méga-panneau et le panneau plein écran suivent la même palette */ body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd__pan.lrs-hd__pan{ --lrs-ink:#FFFFFF; --lrs-paper:#241A14; --pp:#241A14; --rl:rgba(38,26,19,.14); background:#FFFFFF !important; color:#241A14} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd__mg{background:#FFFFFF !important} body.lrs-blanc.lrs-blanc.lrs-b2 .lrs-hd__bg{background:rgba(38,26,19,.04) !important} /* ---- 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}