/* CSS extrait de apercu-sable.html — anciennement inline */
/* === HERO DEFINITION === */
header .hero-definition{font-size:.93rem;font-weight:300;color:var(--text-muted);max-width:760px;width:100%;margin:1.4rem auto 1.6rem;line-height:1.8;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.22);padding:1.4rem 2rem;text-align:left;box-sizing:border-box}
header .hero-definition p{margin-bottom:.8rem;font-size:.93rem;color:var(--text-muted);line-height:1.8;text-align:left}
header .hero-definition strong{color:var(--text)}
header .hero-def-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:1rem;border-top:1px solid rgba(201,168,76,.15)}
header .hero-def-faq div{padding:.85rem 1rem .85rem 0;border-right:1px solid rgba(201,168,76,.12);text-align:left}
header .hero-def-faq div:last-child{border-right:none;padding-right:0}
header .hero-def-faq dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem;font-weight:500}
header .hero-def-faq dd{font-size:.82rem;color:var(--text-muted);line-height:1.55;margin:0}
@media(max-width:768px){header .hero-def-faq{grid-template-columns:1fr}header .hero-def-faq div{border-right:none;border-bottom:1px solid rgba(201,168,76,.12);padding:.75rem 0}header .hero-def-faq div:last-child{border-bottom:none}header .hero-definition{padding:1rem 1.2rem}}
/* === CONTACT — réduire whitespace === */
#contact{padding:4rem 2rem}
.contact-grid{gap:2rem}
/* === faq-devis-block === */
.faq-devis-block{background:var(--dark3);border:1px solid rgba(201,168,76,.2);border-top:none;padding:2rem 2.5rem;margin-top:0}
.faq-devis-block h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;color:#fff;margin-bottom:.7rem}
.faq-devis-block p{font-size:.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:.5rem}
.faq-devis-block ul{margin:.4rem 0 .7rem 1.1rem}
.faq-devis-block ul li{font-size:.88rem;color:var(--text-muted);line-height:1.55;margin-bottom:.2rem}
/* === CORRECTIONS V20 : BANDES BLANCHES & SECTIONS ===*/
/* Bandes blanches entre sections : images galerie fond sombre */
.ba-item img { background: var(--dark); }
.ba-item { background: var(--dark); }
.gallery-panel { background: var(--dark2); }
/* Padding sections réduit (phi.css impose 144px via --space-7) */
section { padding: 4rem 2rem !important; }
.gallery-section { padding: 4rem 2rem !important; }
.zones-section { padding: 4rem 2rem !important; }
#blog { padding: 4rem 2rem !important; }
.section-temoignages { padding: 3rem 2rem !important; }
.faq-cta-band { padding: 2.5rem 2rem !important; }
.bona-band { padding: 2.5rem 2rem !important; }
/* ba-item ratio contraint à None pour pas créer de blanc */
.ba-item img { aspect-ratio: unset !important; object-fit: unset !important; }
.chantier-item img { aspect-ratio: unset !important; object-fit: unset !important; }
/* Services grid gap réduit (phi.css ajoute gap:var(--space-4)=34px) */
.services-grid { gap: 1px !important; }
.blog-grid { gap: 1px !important; }
/* Section services — card 4 (devis) fond correct */
.service-card:nth-child(4) { background: var(--dark3) !important; }
/* Wave separator hauteur fixe */
.wave-separator { height: 30px !important; overflow: hidden; }
/* Supprimer les min-width parasites sur blog-card/service-card de phi.css */
.blog-card { min-width: unset !important; }
.service-card { min-width: unset !important; }
/* Sections : pas de background blanc résiduel */
main > section, main > div { --section-bg: transparent; }
/* === CORRECTIONS V22 ===*/
/* Services grid — corriger la 4e card coupée */
.services-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 1px !important;
background: var(--border) !important;
}
@media(max-width: 900px) {
.services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width: 480px) {
.services-grid { grid-template-columns: 1fr !important; }
}
/* FAQ — items hors .faq-list : même style que dedans */
section > .faq-item {
border-left: 1px solid var(--border) !important;
border-right: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
}
/* Contact — réduire le gap mort */
#contact .gold-line { margin: 1rem 0 1.5rem !important; }
/* Zones IDF — rendre les liens cliquables visibles */
.zone-grid .zone a,
.zone-grid-idf .zone a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 48px;
padding: .4rem .9rem;
border: 1px solid rgba(201,168,76,.2);
color: var(--gold);
font-size: .82rem;
text-decoration: none;
transition: background .15s, border-color .15s;
border-radius: 2px;
}
.zone-grid .zone a:hover,
.zone-grid-idf .zone a:hover {
background: rgba(201,168,76,.07);
border-color: var(--gold);
}
/* Témoignages — hauteur raisonnable */
.section-temoignages { padding: 3rem 2rem !important; }
.temoignages-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 1rem !important;
margin-top: 1.5rem !important;
}
/* Blog section padding */
#blog { padding: 3.5rem 2rem !important; }
/* Zones section — h2 position */
.zones-section .zones-inner h2 {
margin-bottom: .5rem !important;
}
/* Supprimer le gap orphelin entre bona-band et devis */
.bona-band { margin-bottom: 0 !important; }
/* === TÉMOIGNAGES V22 ===*/
.section-intro-small{font-size:.85rem;color:var(--text-muted);max-width:560px;margin:.3rem 0 0;line-height:1.7}
.temoignages-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.temoignage-score{display:flex;align-items:center;gap:.75rem}
.temoignage-score-num{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:500;color:var(--gold);line-height:1}
.temoignage-score-stars{color:var(--gold);font-size:1rem;letter-spacing:.05em}
.temoignage-score-label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.temoignages-ctas{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.temoignage-lieu{font-size:.72rem;color:var(--gold-dim,#a89060);letter-spacing:.06em;text-transform:uppercase}
/* Meilleur affichage grille 9 cartes */
.temoignages-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:1rem !important;margin-top:1.5rem !important}
@media(max-width:900px){.temoignages-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px){.temoignages-grid{grid-template-columns:1fr !important}}
.temoignage-card{padding:1.25rem 1.5rem !important}
.temoignage-texte{font-size:.85rem !important;line-height:1.65 !important;margin-bottom:.75rem !important}
/* === BLOG V22 ===*/
.blog-cat-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim,#a89060);margin-bottom:.6rem;display:block;margin-top:.5rem}
/* === CORRECTIONS V23 ===*/
/* Zone-link : bordure visible avec !important pour surpasser utilities.css */
.zone-link {
border: 1px solid rgba(201,168,76,.25) !important;
color: var(--gold) !important;
font-size: .82rem !important;
padding: .3rem .8rem !important;
border-radius: 2px !important;
transition: background .15s, border-color .15s !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
}
.zone-link:hover {
background: rgba(201,168,76,.08) !important;
border-color: var(--gold) !important;
}
.zone-grid.zone-grid-idf {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-top: 1.2rem !important;
}
/* Sections devis et FAQ : max-width centré */
section:not(.section-temoignages):not(#blog) {
max-width: 860px;
}
/* Section dévis box : pas de padding qui se cumule */
.devis-box { margin: 0 auto; }
/* Zones section : limiter hauteur max sur desktop avec un scroll */
.zones-section { overflow: visible; }
.zones-inner { max-width: 1000px; margin: 0 auto; }
/* Tabs galerie : pas d'overflow caché qui coupe */
.gallery-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* FAQ items hors faq-list - forcer la même bordure */
section > .faq-item,
div > .faq-item:not(.faq-list .faq-item) {
border: 1px solid rgba(201,168,76,.2) !important;
border-top: none !important;
}
section .faq-item + .faq-item {
border-top: none !important;
}
/* Réduire padding zone-grid vertical */
.zones-section { padding: 3rem 2rem !important; }
/* Stats bar : pas de débordement */
.stats-bar { overflow: hidden; }
/* Blog section : max-width correct */
#blog { max-width: 100% !important; padding: 3rem 2rem !important; }
#blog .blog-grid { max-width: 1000px; margin: 0 auto; }
#blog > .section-label,
#blog > h2,
#blog > p,
#blog > .gold-line,
#blog > .blog-cat-label { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* === SIMULATEUR PRIX DEVIS ===*/
.devis-prix-rapide{background:var(--dark);border:1px solid rgba(201,168,76,.2);padding:1.5rem 2rem;margin-bottom:2rem}
.devis-prix-titre{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.devis-prix-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.15);margin-bottom:1rem}
.devis-prix-item{background:var(--dark2);padding:1rem;text-align:center;display:flex;flex-direction:column;gap:.3rem}
.devis-prix-item--highlight{background:var(--dark3)}
.devis-prix-surface{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.devis-prix-total{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;color:var(--gold);line-height:1}
.devis-prix-duree{font-size:.72rem;color:var(--text-muted)}
.devis-prix-note{font-size:.78rem;color:var(--text-muted);line-height:1.6}
@media(max-width:560px){.devis-prix-grid{grid-template-columns:repeat(2,1fr)}}
/* === CORRECTIONS V24 ===*/
/* Fix grille devis : 4 colonnes forcées sur desktop */
.devis-list {
grid-template-columns: repeat(4, 1fr) !important;
}
@media(max-width: 900px) {
.devis-list { grid-template-columns: repeat(2, 1fr) !important; }
.devis-item { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
.devis-item:nth-child(2n) { border-right: none !important; }
.devis-item:last-child { border-bottom: none !important; }
}
@media(max-width: 480px) {
.devis-list { grid-template-columns: 1fr !important; }
.devis-item { border-right: none !important; }
}
/* Annuler le max-width 860px sur les sections qui doivent être full-width dans leur conteneur */
/* La section devis a son propre max-width via .devis-box */
#services, #blog.zones-section.gallery-section.section-temoignages.faq-cta-band.bona-band {
max-width: 100% !important;
}
/* Services : padding plus généreux pour respiration */
.service-card { padding: 2rem 1.5rem !important; }
.service-card h3 { font-size: 1.2rem !important; }
.service-card p { font-size: .85rem !important; }
/* Section devis : conserver max-width 1000px mais pas 860 */
section:not(#services):not(#blog):not(.section-temoignages) {
max-width: 1000px !important;
}
/* === CORRECTIONS V25 ===*/
/* FOOTER : forcer layout grid correct */
footer {
display: block !important;
padding: 3rem 2rem !important;
max-width: 100% !important;
}
footer > span.footer-brand {
display: block;
margin-bottom: .5rem;
}
footer > p { margin-bottom: .5rem; }
/* Grid interne footer : 5 colonnes sur desktop */
footer > div[style*="grid"] {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 2rem !important;
}
@media(max-width: 1024px) {
footer > div[style*="grid"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media(max-width: 640px) {
footer > div[style*="grid"] { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Footer links : plus compacts */
.nav-sub-list { gap: 4px !important; }
.footer-link { font-size: .82rem !important; min-height: 32px !important; }
.lbl-footer-col { font-size: .72rem !important; letter-spacing: .15em !important; margin-bottom: 8px !important; }
/* Footer bottom bar */
footer > .footer-sameAs, footer > p:last-of-type {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
font-size: .75rem;
}
/* BLOG : les .blog-card-extra restent cachées jusqu'au clic */
.blog-card-extra { display: none !important; }
.blog-card-extra.visible { display: flex !important; }
/* === CORRECTIONS V26 ===*/
/* Section contact : réduire padding bas */
#contact { padding-bottom: 2rem !important; }
/* Gap mort entre contact et FAQ : supprimer margin-top de la section FAQ */
#contact + section { margin-top: 0 !important; }
/* Section services : h2 max-width pour mieux aligner avec la grille */
#services > .section-label,
#services > h2,
#services > .gold-line {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Gallery section : lien Commons bien visible */
.gallery-section p a.link-gold-underline { opacity: .8; }
.gallery-section p a.link-gold-underline:hover { opacity: 1; }
/* Stats bar : survol sur le lien 700+ */
.stat-item a:hover .stat-number { color: #fff !important; }
.stat-item a:hover .stat-label { color: rgba(255,255,255,.7) !important; }
.c-or, a.c-or { color: var(--gold, #c9a84c) !important; }
/* === PERFORMANCES V28 ===*/
/* Fix animations non composées — utiliser transform/opacity uniquement */
.service-card.temoignage-card.blog-card.stat-item.faq-item.zone-link {
will-change: auto;
transform: translateZ(0);
}
.service-card:hover.temoignage-card:hover.blog-card:hover {
transform: translateY(-2px);
transition: transform .2s ease, box-shadow .2s ease;
}
/* CTA sticky : will-change pour animation slide */
#cta-sticky {
will-change: transform;
transform: translateZ(0);
}
/* Supprimer transition:all si présente dans les overrides */
.zone-link.footer-link, a {
transition: color .15s, opacity .15s, border-color .15s;
}
/* Fix contraste Bona Mega Evo — toutes les occurrences */
a.c-or,
.c-or,
p a[href*="bona.com"],
h3 a[href*="bona.com"],
.text-body a[href*="bona.com"] {
color: #c9a84c !important;
text-decoration: underline !important;
text-decoration-color: rgba(201,168,76,.4) !important;
text-underline-offset: 2px !important;
}
/* Google Tag Manager — différer le plus possible (async déjà, rien à faire HTML) */
/* Mais on peut réduire le DOM : section blog limiter les cartes initiales à 9 */
@media(max-width:600px){
.footer-nav-grid{display:none!important;}
.zone-grid.zone-grid-idf{grid-template-columns:1fr!important;gap:16px!important;}
.zone-link{width:100%!important;min-height:52px!important;padding:.75rem 1rem!important;}
footer{padding-top:3rem!important;}
}
/* Base : legerement agrandie, sans casser les elements compacts (badge, stats) */
html{font-size:17px !important}
:root{
--noir:#EDE4CE !important; --dark:#EDE4CE !important;
--noir2:#E4D8B8 !important; --dark2:#E4D8B8 !important;
--noir3:#DDCFA8 !important; --dark3:#DDCFA8 !important;
--texte:#1A1208 !important; --text:#1A1208 !important;
--muted:#1A1208 !important; --text-muted:#1A1208 !important;
--or:#1A1208 !important; --gold:#1A1208 !important;
--or-sombre:#1A1208 !important; --gold-dim:#1A1208 !important;
--or-clair:#6E5514 !important; --gold-light:#6E5514 !important;
--bord:rgba(26,18,8,.22) !important; --border:rgba(26,18,8,.22) !important;
}
body{background:#EDE4CE !important;color:#1A1208 !important;line-height:1.65 !important}
/* Fix : 22 regles de texte blanc ecrit en dur (invisibles sur fond clair) */
header h1,
section h2,
.service-card h3,
.bona-text h3,
.devis-item p,
.faq-cta-inner h3,
.blog-card:hover h3,
.faq-devis-block h3,
h1,
h2,
.spec-item h3,
.philo-texte,
.cta-inner h2,
.c-white,
.nav-label,
.h2-section,
.footer-col-title,
.footer-col-title-mt,
.lbl-footer-col,
.h2-blanc-lg,
.h2-cg-blanc,
.avis-title {
color:#1A1208 !important;
}
/* Fix : badge circulaire et barre de stats - tailles fixes en px, independantes
de l'agrandissement general, pour eviter tout debordement/chevauchement */
.badge-pi .badge-number{font-size:26px !important}
.badge-pi .badge-label{font-size:10px !important;white-space:nowrap !important}
.stat-number{font-size:38px !important}
.stat-label{font-size:12px !important}
/* Boutons pleins : texte clair conserve pour rester lisible sur fond dore fonce */
.btn-or, .btn-primary, a[href^="sms:"][style*="background"]{background:#6E5514 !important;color:#F5EFDD !important;border-color:#6E5514 !important}
/* Fix : la legende passe SOUS la photo au lieu de la recouvrir (bande sombre) */
.hero-photo{overflow:visible !important}
.hero-photo-caption{
position:static !important;
inset:auto !important;
background:transparent !important;
padding:.7rem .5rem 0 !important;
color:#5C5340 !important;
font-size:13px !important;
letter-spacing:.06em !important;
text-align:center !important;
}