/* ============================================================ BATIMM RENOV — Couche design "DA Charte" Fond navy + profondeur (halos or) + cartes en relief. Chargee EN DERNIER dans le : s'applique sans !important. Couleurs : navy #1A2640 · or #BD9361 (deja appliquees a la source). ============================================================ */ /* Fond global : degrade navy + halos or chauds (recette des cartes d'avis) */ body{ background: radial-gradient(circle at 20% 10%, rgba(189,148,97,.18), transparent 46%), radial-gradient(circle at 88% 88%, rgba(189,148,97,.12), transparent 48%), linear-gradient(155deg,#1d2b49 0%,#1A2640 50%,#121a2e 100%); background-attachment:fixed; } /* Sections transparentes : laissent vivre le fond, chacune son halo */ .lou-expertise,.lou-services,.lou-reals,.lou-testi,.lou-faq,.lou-zones,.sp-form-section,.lou-steps{ background:transparent;position:relative; } .lou-expertise::after,.lou-services::after,.lou-reals::after,.lou-testi::after,.lou-faq::after,.sp-form-section::after,.lou-steps::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; } .lou-expertise::after{background:radial-gradient(680px 480px at 90% 8%, rgba(189,148,97,.10), transparent 60%);} .lou-steps::after{background:radial-gradient(640px 480px at 8% 92%, rgba(189,148,97,.09), transparent 60%);} .lou-services::after{background:radial-gradient(700px 500px at 92% 90%, rgba(189,148,97,.09), transparent 62%);} .lou-reals::after{background:radial-gradient(720px 520px at 50% 2%, rgba(189,148,97,.08), transparent 60%);} .lou-testi::after{background:radial-gradient(660px 500px at 6% 50%, rgba(189,148,97,.09), transparent 60%);} .lou-faq::after{background:radial-gradient(620px 480px at 95% 45%, rgba(189,148,97,.09), transparent 60%);} .sp-form-section::after{background:radial-gradient(680px 500px at 12% 100%, rgba(189,148,97,.10), transparent 60%);} .lou-expertise>*,.lou-services>*,.lou-reals>*,.lou-testi>*,.lou-faq>*,.lou-zones>*,.sp-form-section>*,.lou-steps>*{position:relative;z-index:1;} /* Cartes facon "carte d'avis" : panneau navy chaud + bord or + filet or en haut */ .lou-svc-card,.lou-step-card,.lou-real-card,.lou-testi-card{ position:relative; background:linear-gradient(160deg, rgba(33,48,80,.62), rgba(18,27,46,.72)); border:1px solid rgba(189,148,97,.22); box-shadow:0 20px 48px rgba(0,0,0,.34); } .lou-svc-card::before,.lou-step-card::before,.lou-testi-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#BD9361 40%,#d4aa7a 60%,transparent);z-index:2; } /* Carte d avis : texte centre verticalement, signature ancree en bas. La grille etire les cartes a la hauteur de la plus longue. Sans rien, un avis court restait colle en haut avec un grand vide sous lui, et sa signature flottait au milieu. Le defaut etait invisible tant que les trois avis affiches faisaient a peu pres la meme longueur ; il apparait des qu on varie les avis d une page a l autre (4 aout 2026). Deux marges automatiques se partagent le vide a parts egales : une avant le texte, une avant la signature. Le texte se retrouve donc centre dans l espace qui reste au-dessus de la signature, et les signatures des trois cartes s alignent sur la meme ligne. Les cartes n ont pas toutes le meme balisage : Chalon commence par le

, Louhans et Lons par le guillemet decoratif. La marge va au premier des deux qui existe — d ou la remise a zero quand le guillemet precede le texte. */ .lou-testi-card{display:flex;flex-direction:column;} .lou-testi-card > .lou-testi-quote, .lou-testi-card > .lou-testi-body{margin-top:auto;} .lou-testi-card > .lou-testi-quote + .lou-testi-body{margin-top:0;} .lou-testi-card > .lou-testi-stars{margin-top:auto;} .lou-svc-card:hover,.lou-step-card:hover,.lou-real-card:hover{ border-color:rgba(189,148,97,.5);box-shadow:0 28px 64px rgba(0,0,0,.45); } /* Encadres laterales / formulaire */ .lou-aside,.sp-form-right{ background:linear-gradient(160deg, rgba(33,48,80,.66), rgba(18,27,46,.74)); border-top:3px solid #BD9361; } .sp-fr-inp,.sp-fr-ta{background:rgba(15,22,40,.7);border:1px solid rgba(189,148,97,.2);} /* Voile du hero en navy (au lieu du noir). L'opacite de depart etait a .95 : combinee au brightness(.22) de .lou-hero-bg, la photo etait invisible et le hero se lisait comme un aplat bleu. Le degrade est desormais oriente a 100deg : dense a gauche sous le texte, il s'efface a droite pour laisser la photo exister. */ .lou-hero-overlay{ background:linear-gradient(100deg,rgba(18,26,46,.88) 0%,rgba(18,26,46,.76) 34%,rgba(22,32,54,.44) 68%,rgba(26,38,64,.22) 100%); } /* Bande stats : aplat or degrade (rythme fort) */ .lou-stats{background:linear-gradient(90deg,#BD9361,#d4aa7a);} /* Footer : navy profond + halo */ .svc-ft{background:linear-gradient(180deg,#15203a,#101729);position:relative;overflow:hidden;} .svc-ft::before{content:'';position:absolute;inset:0;background:radial-gradient(800px 420px at 12% 0%, rgba(189,148,97,.08), transparent 60%);pointer-events:none;} .svc-ft-inner{position:relative;z-index:1;} /* ===== Service : PLATRERIE (plat-*) — profondeur + cartes or ===== */ .plat-skills,.plat-zone-section,.plat-testi,.plat-bottom{background:transparent;position:relative;} .plat-skills::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(700px 500px at 90% 8%,rgba(189,148,97,.10),transparent 60%);} .plat-zone-section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(680px 500px at 8% 90%,rgba(189,148,97,.09),transparent 60%);} .plat-skills>*,.plat-zone-section>*,.plat-testi>*,.plat-bottom>*{position:relative;z-index:1;} .plat-skill-card,.plat-zone-card,.plat-split-card{position:relative;background:linear-gradient(160deg,rgba(33,48,80,.62),rgba(18,27,46,.72));border:1px solid rgba(189,148,97,.22);box-shadow:0 20px 48px rgba(0,0,0,.34);} .plat-skill-card::before,.plat-zone-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#BD9361 40%,#d4aa7a 60%,transparent);z-index:2;} .plat-skill-card:hover,.plat-zone-card:hover{border-color:rgba(189,148,97,.5);box-shadow:0 28px 64px rgba(0,0,0,.45);} /* ===== Service : PEINTURE INTERIEURE (pei-*) ===== */ .pei-skills,.pei-split,.pei-bottom,.pei-faq-wrap,.pei-testi{background:transparent;position:relative;} .pei-skills::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(700px 500px at 90% 8%,rgba(189,148,97,.10),transparent 60%);} .pei-bottom::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(680px 500px at 8% 90%,rgba(189,148,97,.09),transparent 60%);} .pei-skills>*,.pei-split>*,.pei-bottom>*,.pei-faq-wrap>*,.pei-testi>*{position:relative;z-index:1;} /* texte clair dans les zones autrefois claires */ .pei-testi-text,.pei-testi-name,.pei-faq-q,.pei-mood-title{color:#F2EDE3;} .pei-testi-loc,.pei-faq-a{color:rgba(242,237,227,.62);} .pei-faq-item{border-color:rgba(189,148,97,.16) !important;} .pei-testi-quote{color:rgba(189,148,97,.18);} /* cartes en relief */ .pei-skill-card,.pei-split-card,.pei-mood-card{position:relative;background:linear-gradient(160deg,rgba(33,48,80,.62),rgba(18,27,46,.72));border:1px solid rgba(189,148,97,.22);box-shadow:0 20px 48px rgba(0,0,0,.34);} .pei-skill-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#BD9361 40%,#d4aa7a 60%,transparent);z-index:2;} .pei-skill-card:hover,.pei-split-card:hover{border-color:rgba(189,148,97,.5);box-shadow:0 28px 64px rgba(0,0,0,.45);} /* peinture-interieure : section formulaire */ .pei-form-section{background:transparent !important;position:relative;color:#F2EDE3;} .pei-form-section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(680px 500px at 12% 100%,rgba(189,148,97,.10),transparent 60%);} .pei-form-section>*{position:relative;z-index:1;} .pei-form-section h2,.pei-form-left h2,.pei-form-tag,.pei-form-tel,.pei-form-left p{color:#F2EDE3 !important;} .pei-form-right{background:linear-gradient(160deg,rgba(33,48,80,.7),rgba(18,27,46,.82)) !important;border-top:3px solid #BD9361;} /* peinture-interieure : section "autres services" */ .pei-other-services{background:transparent !important;position:relative;} .pei-other-services h2,.pei-other-services p,.pei-other-services .pei-tag{color:#F2EDE3 !important;} .pei-other-link{background:linear-gradient(160deg,rgba(33,48,80,.62),rgba(18,27,46,.72)) !important;border:1px solid rgba(189,148,97,.22) !important;color:#F2EDE3 !important;} .pei-other-link:hover{border-color:rgba(189,148,97,.5) !important;} /* ===== Bloc PARTAGE services : section methode (mth-*) — present sur les 10 pages ===== */ .mth-section{background:transparent !important;position:relative;} .mth-section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(700px 520px at 88% 12%,rgba(189,148,97,.10),transparent 60%);} .mth-inner,.mth-content{position:relative;z-index:1;} .mth-title,.mth-text,.mth-badge-name{color:#F2EDE3 !important;} .mth-text strong{color:#fff !important;} .mth-badge-job,.mth-label-txt{color:rgba(242,237,227,.72) !important;} .mth-label{border-color:rgba(189,148,97,.2) !important;} /* peinture-interieure : hero + mood */ .pei-hero{background:#1A2640 !important;} .pei-mood{background:transparent !important;} /* ===== Cartes services (mob/iso/rev/hum) : relief + filet or ===== */ .mob-svc-card,.iso-svc-card,.rev-svc-card,.hum-svc-card{position:relative;background:linear-gradient(160deg,rgba(33,48,80,.62),rgba(18,27,46,.72)) !important;border:1px solid rgba(189,148,97,.22) !important;box-shadow:0 20px 48px rgba(0,0,0,.34);} .mob-svc-card::before,.iso-svc-card::before,.rev-svc-card::before,.hum-svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#BD9361 40%,#d4aa7a 60%,transparent);z-index:2;} .mob-svc-card:hover,.iso-svc-card:hover,.rev-svc-card:hover,.hum-svc-card:hover{border-color:rgba(189,148,97,.5) !important;box-shadow:0 28px 64px rgba(0,0,0,.45) !important;} /* ratissage : hero navy (clone platrerie) */ .plat-hero{background:#1A2640;} /* FIX texte sombre invisible dans le bloc garanties partage (mth-labels) */ .mth-label-txt strong,.mth-labels strong,.mth-label strong{color:#ffffff !important;} .mth-label-txt,.mth-label-txt span,.mth-labels span{color:rgba(242,237,227,.72) !important;} /* FIX peinture-interieure (page d'origine claire) : texte principal -> clair */ .pei-h1-line,.pei-h2,.pei-hero-label,.pei-skill-title,.pei-mood-label,.pei-mood-title{color:#F2EDE3 !important;} .pei-sub,.pei-p,.pei-skill-desc,.pei-split-text,.pei-split-text p{color:rgba(242,237,227,.78) !important;} .pei-p strong,.pei-split-text strong,.pei-h2 strong{color:#ffffff !important;} /* peinture-interieure : derniers details */ .pei-mood-head,.pei-mood-head *{color:rgba(242,237,227,.82) !important;} .pei-mood-head .pei-or,.pei-mood-head strong{color:#BD9361 !important;} .pei-btn-ghost{color:#F2EDE3 !important;border-color:#d4aa7a !important;} /* peinture-interieure : checklist + tags + badge lisibles */ .pei-check{color:rgba(242,237,227,.88) !important;} .pei-badge,.pei-tag,.pei-tag-dark{color:#F2EDE3 !important;} /* cartes "autres services" (nm/dc) lisibles sur navy */ .pei-other-link .nm,.pei-other-services .nm,.sp-other-services .nm,.nm{color:#F2EDE3 !important;} .pei-other-link .dc,.pei-other-services .dc,.sp-other-services .dc,.dc{color:rgba(242,237,227,.7) !important;} /* FIX bouton CTA non style (btn-noir) sur bandeau dore - platrerie/ratissage */ .plat-cta-btns .btn-noir,a.btn-noir{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 40px;background:#1A2640;color:#F2EDE3 !important;text-decoration:none !important;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;border-radius:6px;transition:transform .2s,box-shadow .2s,background .2s;} .plat-cta-btns .btn-noir:hover,a.btn-noir:hover{background:#0f1628;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.3);} .plat-cta-tel{color:#1A2640 !important;text-decoration:none !important;font-weight:800;letter-spacing:1px;} /* peinture-interieure : badge 150+ non coupe + accents dores (DA) */ .pei-split-card{top:0 !important;} .pei-tag,.pei-tag-dark,.pei-hero-label,.pei-mood-label,.pei-badge{color:#BD9361 !important;} .pei-p strong,.pei-split-text strong,.pei-h2 strong,.pei-mood-title strong,.pei-or{color:#BD9361 !important;} /* peinture-interieure : accent dore sur la derniere ligne du H1 (pas monotone) */ h1 .pei-h1-line:last-child{color:#BD9361 !important;} /* Boutons sur une seule ligne (Montserrat plus large) */ .btn-p,.btn-s,.btn-noir{white-space:nowrap;} /* ══ CORRECTIFS MOBILE ══════════════════════════════════════════════════════ Cette feuille est partagee par 25 pages et ne comportait aucune media query : les deux defauts ci-dessous existaient donc partout. ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:620px){ /* 1. Boutons qui sortaient de l'ecran. Le nowrap ci-dessus, combine a un padding lateral de 40 a 50px, rendait certains boutons plus larges que le telephone : sur la page Chalon, le CTA "Demander un devis gratuit" mesurait 405px dans un conteneur de 319px et se retrouvait coupe hors cadre — le visiteur ne voyait pas la fin du bouton principal de la page. max-width le contraint, white-space:normal l'autorise a passer sur deux lignes plutot qu'a deborder. */ /* a.btn-noir et pas .btn-noir : la regle de base ci-dessus est ecrite a.btn-noir, plus specifique — sans le selecteur de type, le padding lateral de 40px restait applique et rognait la place du libelle. */ .btn-p,.btn-s,a.btn-noir,.btn-noir{ white-space:normal; max-width:100%; padding-left:20px; padding-right:20px; text-align:center; } /* 2. Zoom automatique d'iOS a la saisie. Safari iOS zoome sur le formulaire des qu'un champ fait moins de 16px : la page saute, l'utilisateur doit dezoomer a la main, et beaucoup abandonnent en cours de remplissage. Les champs etaient a 15 / 15,5px. */ input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:16px !important; } } /* 3. Taille des cibles tactiles du menu mobile. Les entrees faisaient 34px de haut et les sous-entrees 30px, pour un minimum recommande de 44. C'est la navigation principale au doigt. Note : les liens en ligne dans un paragraphe ne sont pas vises — WCAG 2.5.8 les exempte explicitement, et les elargir casserait la justification du texte sans rien apporter. */ @media (max-width:900px){ #nav-links > li > a, #nav-links .nav-dropdown-trigger{ min-height:48px !important; display:flex !important; align-items:center !important; } /* Selecteur volontairement long : le bloc inline nav-premium-unifie pose #nav-links #nav-svc-panel .nav-drop-item{min-height:0} avec deux id, donc plus specifique que le notre, et il est charge apres cette feuille. html body ... permet de repasser devant. */ #nav-links .nav-drop-item, html body #nav-links #nav-svc-panel .nav-drop-item{ min-height:44px !important; display:flex !important; align-items:center !important; } #nav-links .nav-mob-footer .nmf-tel, #nav-links .nav-mob-footer .nmf-mail{ min-height:44px !important; display:flex !important; align-items:center !important; } } /* ══ APPARITION AU SCROLL ═══════════════════════════════════════════════════ ATTENTION AUX NOMS DE CLASSES. Le site possede DEJA un systeme d'apparition (.rv / .rv-l / .rv-r -> .on) declare dans style.min.css et pilote par initReveal() dans script.js, ainsi que par animations.js. Ce systeme declenche des 10% de visibilite, donc quasiment a l'entree dans l'ecran. Une premiere version de ce bloc reutilisait .rv et .on : les elements etaient captes par l'ancien systeme, reveles trop tot, et le seuil ecrit ici n'avait aucun effet. D'ou le prefixe bx- , qui n'appartient qu'a nous. Amelioration progressive en deux verrous : la classe .bx-rv et le marqueur html.js-bxrv sont poses par le script. S'il ne tourne pas, aucune de ces regles ne s'applique et la page reste entierement visible. Le hero est exclu : animer le plus grand element affiche retarderait la mesure de performance de la page. ═════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:no-preference){ html.js-bxrv .bx-rv{ opacity:0; transform:translateY(20px); /* defaut : montee discrete */ will-change:opacity,transform; /* 1,05 s : a .78 s le glissement etait percu comme sec. Une entree lente et franchement decelerante distingue une animation soignee d'un effet de gabarit. */ transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1); } html.js-bxrv .bx-rv.bx-on{opacity:1;transform:none;} /* Glissement lateral : la photo de gauche entre par la gauche, le texte de droite entre par la droite, et les deux se posent a leur place. */ html.js-bxrv .bx-from-l{transform:translate3d(-56px,0,0);} html.js-bxrv .bx-from-r{transform:translate3d( 56px,0,0);} /* La photo arrive, le texte suit : le regard part de l'image. */ html.js-bxrv .cs-real-body.bx-rv{transition-delay:.2s;} /* En colonne unique les deux blocs sont empiles : un glissement lateral n'a plus de sens et sortirait du cadre. On revient a la montee. */ @media (max-width:900px){ html.js-bxrv .bx-from-l, html.js-bxrv .bx-from-r{transform:translateY(20px);} } } /* Le glissement part hors du cadre : sans cela, un scroll rapide peut faire apparaitre une barre horizontale. overflow-x:clip — et non hidden — n'ouvre pas de conteneur de defilement et laisse les ombres deborder verticalement. */ html.js-bxrv .cs-real{overflow-x:clip;} /* ══ ZOOM SUR LES PHOTOS DE CHANTIER ════════════════════════════════════════ Volontairement autonome, et non branche sur la lightbox de script.js : celle-ci depend d un tableau LB_PHOTOS avec vignettes, titres et annees, concu pour la galerie de l accueil. Ici il n y a que trois photos independantes, chacune dans sa section — pas de galerie a parcourir, donc pas besoin de cette machinerie. Amelioration progressive : c est le script qui pose .bx-zoomable et construit l overlay. Sans JS, aucune affordance n apparait et rien ne casse. ══════════════════════════════════════════════════════════════════════════ */ .bx-zoomable{ cursor:zoom-in; position:relative; } .bx-zoomable:focus-visible{ outline:2px solid #d4aa7a; outline-offset:4px; } /* Pastille "agrandir", discrete, revelee au survol */ .bx-zoomable::after{ content:'⤢'; position:absolute; right:14px; bottom:14px; z-index:2; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; color:#0d1525; background:linear-gradient(135deg,#BD9361,#d4aa7a); box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; } .bx-zoomable:hover::after, .bx-zoomable:focus-visible::after{ opacity:1; transform:none; } .bx-lb{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); background:rgba(9,14,26,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .32s ease, visibility .32s ease; } .bx-lb.is-open{ opacity:1; visibility:visible; } .bx-lb img{ max-width:100%; max-height:100%; border-radius:14px; display:block; box-shadow:0 40px 90px rgba(0,0,0,.7); transform:scale(.97); transition:transform .32s cubic-bezier(.16,1,.3,1); } .bx-lb.is-open img{ transform:none; } .bx-lb-close{ position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:#EAE2D7; background:rgba(255,255,255,.06); border:1px solid rgba(212,170,122,.45); cursor:pointer; transition:background .25s, border-color .25s, color .25s; } .bx-lb-close:hover{ background:rgba(212,170,122,.16); border-color:#d4aa7a; color:#d4aa7a; } .bx-lb-legende{ position:absolute; left:0; right:0; bottom:clamp(10px,3vw,22px); text-align:center; padding:0 20px; font-family:'Montserrat',sans-serif; font-size:13px; line-height:1.6; color:rgba(234,226,215,.72); } @media (prefers-reduced-motion:reduce){ .bx-lb, .bx-lb img, .bx-zoomable::after{ transition:none !important; } .bx-lb img{ transform:none !important; } }