/* ============================================================
   SITE COMMERCIAL V1 — Surcouche non déployée (12/08/2026)
   Ne modifie PAS assets/css/site.css. Ce fichier est chargé en
   dernier sur chaque page (juste avant </head>) et prend le pas
   sur site.css + les <style> inline de chaque page.
   Objectif : thème clair, police Inter, contraste fort, gros CTA
   et tarifs, sans casser tracking / Formspree / Consent Mode.
   Les héros avec photo (page d'accueil, pages "hub" prestations)
   restent en overlay sombre + texte blanc : lisibilité maximale
   sur image, cohérent avec le reste du site qui passe en clair.
   ============================================================ */

/* ---------- 1. VARIABLES : thème clair ---------- */
:root{
  --n:#ffffff;      /* fond principal (était noir) */
  --n2:#f6f4ee;      /* fond section secondaire */
  --n3:#eeece3;      /* fond carte */
  --n4:#e4e0d3;
  --n5:#d7d2c1;
  --w:#12181f;       /* était blanc -> encre foncée pour titres */
  --tx:#12181f;
  --tp:#2b333c;
  --tm:#4d5760;
  --g5:#2f353c;--g6:#555d65;--g7:#707880;--g8:#a3a19a;
  --or:#8a5a1f;      /* accent doré assombri pour contraste texte sur blanc */
  --or2:#c9a05a;
  --or3:#6e4718;
  --or4:#563613;
  --bd:rgba(18,24,31,.14);
  --ft:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- 2. TYPOGRAPHIE DE BASE ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fs);background:var(--n);color:var(--tx);font-size:18px;line-height:1.65}
h1,h2,h3,h4{font-family:var(--ft);letter-spacing:-.01em;line-height:1.18}
h1{font-size:clamp(2.2rem,4vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800}
h3{font-size:clamp(1.3rem,1.8vw,1.9rem);font-weight:700}
h4{font-size:1.1rem;font-weight:700}
p{font-size:1.125rem;line-height:1.65;color:var(--tp);max-width:75ch}
/* Filet de sécurité lisibilité desktop large (1440/1920) : les paragraphes
   déjà contraints par un conteneur plus étroit ne sont pas affectés. */
.zones-intro{max-width:68ch}
.mono{font-weight:600}
strong,b{font-weight:700}

/* ---------- 3. HEADER / NAV / MENU MOBILE ---------- */
header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--bd);box-shadow:0 1px 0 rgba(18,24,31,.03);height:76px;padding:0 clamp(1.1rem,2.4vw,2rem)}
.logo{flex-shrink:0}
.logo-name{color:var(--tx);white-space:nowrap}
/* Menu V3 : chaque lien a sa propre zone (padding + coin arrondi),
   davantage d'espace entre eux, taille et graisse plus lisibles. */
nav.main{gap:.1rem;flex-shrink:1}
nav.main a{color:var(--tp);font-weight:600;font-size:.9rem;letter-spacing:0;padding:.6rem .65rem;border-radius:7px;transition:background .2s ease,color .2s ease;white-space:nowrap}
nav.main a:hover{background:rgba(138,90,31,.08);color:var(--or)}
nav.main a.on{color:var(--or);background:rgba(138,90,31,.1);font-weight:700}
.hcta{background:var(--or);color:#fff;border:1px solid var(--or);font-weight:700;font-size:.9rem;padding:.7rem 1.3rem;margin-left:.5rem;flex-shrink:0;white-space:nowrap}
.hcta:hover{background:var(--or3);color:#fff}
.bur span{background:var(--tx)}
/* Le burger ne prend le relais qu'en dessous de 1360px, pour ne jamais
   retomber sur le mode "compact" trop serré de site.css entre 1200-1365px. */
@media(min-width:1360px){nav.main{display:flex!important}.hcta{display:inline-flex!important;align-items:center}.bur{display:none!important}}
@media(max-width:1359px){nav.main,.hcta{display:none!important}.bur{display:flex!important}}
.mnav{background:rgba(255,255,255,.99)}
.mnav a{color:var(--tx)}
.mnav a:hover,.mnav a.on{color:var(--or)}
.mnav-section{color:var(--or)}
.mnav-foot{color:var(--tm)}
.mnav-cta{background:var(--or);color:#fff!important;border:1px solid var(--or)}
.mnav-cta:hover{background:var(--or3)}

/* ---------- 4. BOUTONS / CTA (gros, contrastés) ---------- */
.btn-or,.btn-wf,.btn-dark,.btn-wa,.f-submit{
  font-family:var(--fs);font-size:1.05rem;font-weight:700;letter-spacing:0;
  text-transform:none;padding:1.05rem 2rem;border-radius:6px;min-height:56px;
}
.btn-or{background:var(--or);color:#fff;border:1px solid var(--or)}
.btn-or:hover{background:var(--or3);border-color:var(--or3);color:#fff}
.btn-wf{background:transparent;border:2px solid var(--tx);color:var(--tx)}
.btn-wf:hover{background:var(--tx);color:#fff;border-color:var(--tx)}
.btn-dark{background:var(--n3);color:var(--tx);border:1px solid var(--bd)}
.btn-dark:hover{background:var(--n4);color:var(--tx)}
.btn-wa{background:#1faa54;color:#fff;border:1px solid #1faa54}
.btn-wa:hover{background:#178a43}
/* Bouton "voir tarifs" en style outline doré inline (hero-seo/pages services) */
a[style*="border:1px solid var(--or)"]{color:var(--or)!important;border-color:var(--or)!important;font-weight:700}
a[style*="border:1px solid var(--or)"]:hover{background:var(--or)!important;color:#fff!important}
/* Même bouton, mais sur un héros sombre : doré clair pour un contraste net sur fond noir */
.hero a[style*="border:1px solid var(--or)"],.hseo-in a[style*="border:1px solid var(--or)"],.hero-c a[style*="border:1px solid var(--or)"]{color:var(--or2)!important;border-color:var(--or2)!important}
.hero a[style*="border:1px solid var(--or)"]:hover,.hseo-in a[style*="border:1px solid var(--or)"]:hover{background:var(--or2)!important;color:#12181f!important}

/* ---------- 5. BREADCRUMB / LABELS (contexte clair par défaut) ---------- */
.breadcrumb{color:var(--tm);font-weight:600}
.breadcrumb a{color:var(--tp)}
.breadcrumb a:hover{color:var(--or)}
.breadcrumb .cur{color:var(--or)}
.lbl::before{background:var(--or)}

/* ---------- 6. FOOTER (clair) ---------- */
/* Spécificité : site.css a des règles "footer .ft-contact a" etc.
   (ancêtre + classe + élément) plus spécifiques qu'un simple ".ft-contact a".
   On reprend le même patron "footer ..." pour être sûr de gagner la cascade. */
footer{background:var(--n2);border-top:1px solid var(--bd)}
.ft-brand{color:var(--tx)}
footer .ft-tag{color:var(--tm)}
footer .ft-contact a{color:var(--tp);font-weight:600}
footer .ft-contact a:hover{color:var(--or)}
footer .ft-loc{color:var(--tm)}
.ft-col h5{color:var(--or)}
footer .ft-col a{color:var(--tp)}
footer .ft-col a:hover{color:var(--or)}
.ft-bot{border-top:1px solid var(--bd)}
footer .ft-copy,footer .ft-sig{color:var(--tm)}
.ft-social a{border:1px solid var(--bd)}
.ft-social a:hover{border-color:var(--or)}
.ft-social svg{fill:var(--tm)}
.ft-social a:hover svg{fill:var(--or)}

/* ---------- 7. BANDEAU COOKIES (clair, inchangé fonctionnellement) ---------- */
.pcc-banner{background:#fff;border-top:1px solid var(--bd);box-shadow:0 -4px 24px rgba(18,24,31,.12)}
.pcc-box p{color:var(--tp)}
.pcc-btn{color:var(--tx);border:1px solid var(--or)}
.pcc-btn:hover,.pcc-btn:focus-visible{background:rgba(138,90,31,.08)}
.pcc-reopen{background:#fff;color:var(--tp);border:1px solid var(--bd)}

/* ============================================================
   8. HÉROS PHOTO : restent sombres pour un contraste maximal
   (page d'accueil .hero + pages prestations .hero-seo/.hseo-in)
   ============================================================ */
.hero,.hero-seo{background:#12181f}
.hseo-grad{background:linear-gradient(to top,rgba(10,13,17,.97) 0%,rgba(10,13,17,.62) 45%,rgba(10,13,17,.12) 100%)}
.hero-img::after{background:linear-gradient(to top,rgba(10,13,17,.96) 0%,rgba(10,13,17,.6) 50%,rgba(10,13,17,.3) 100%)}
.hero-scrim{background:radial-gradient(ellipse 90% 80% at 60% 50%,rgba(10,13,17,.94) 0%,rgba(10,13,17,.74) 38%,rgba(10,13,17,.32) 72%,transparent 100%)}
.hero h1,.hero h1 em,.hseo-in h1,.hseo-in h1 em{color:#fff}
.hero-tag,.hero-sub,.hseo-in p,.hseo-in .lbl{color:rgba(255,255,255,.92)}
.hseo-in .breadcrumb{color:rgba(255,255,255,.75)}
.hseo-in .breadcrumb a{color:rgba(255,255,255,.85)}
.hseo-in .breadcrumb .cur{color:var(--or2)}
.ht-i{color:rgba(255,255,255,.85)}
.hs-n{color:var(--or2)}
.hs-l{color:rgba(255,255,255,.72)}
.hero-left-mark{color:rgba(255,255,255,.55)}
.hero-stats,.hero-trust{border-color:rgba(255,255,255,.16)}
/* Correction mise en page : 4 items de largeur variable en flex-wrap
   provoquaient un retour à la ligne partiel, chevauchant la marquee.
   Grille fixe = jamais de débordement, quelle que soit la longueur du texte. */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1rem;max-width:640px}
.hs{padding:0 .7rem 0 0;margin-right:0;border-right:1px solid rgba(255,255,255,.14)}
.hs:last-child{border-right:none;padding-right:0}
@media(max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr);max-width:100%}}
/* CTA "outline or" dans un hero sombre : garder le doré clair lisible */
.hero .btn-wf,.hseo-in .btn-wf{border-color:rgba(255,255,255,.7);color:#fff}
.hero .btn-wf:hover,.hseo-in .btn-wf:hover{background:#fff;color:var(--tx)}
/* V4.1 — hierarchie CTA heros DP/PC/Regularisation : devis (principal) >
   WhatsApp (secondaire) > tarifs (tertiaire, lien discret, pas un bouton
   de meme poids visuel que les deux premiers). */
.hseo-tertiary{
  display:inline-flex;align-items:center;
  color:rgba(255,255,255,.75);font-weight:600;font-size:.95rem;
  text-decoration:underline;margin-left:.4rem;
  min-height:0;padding:.7rem 0;
}
.hseo-tertiary:hover{color:#fff}
@media(max-width:600px){.hseo-tertiary{margin-left:0;display:flex;justify-content:center;width:100%}}

/* ============================================================
   8b. HERO ACCUEIL V3 — "100 % en ligne" ne se coupe plus,
   colonne de texte élargie, davantage d'air entre les niveaux.
   On ne réduit pas le H1 pour "faire rentrer" le texte : on élargit
   la colonne (hero-left devient une simple bordure décorative) et
   on ajuste la taille dans une fourchette raisonnable (46-52px).
   ============================================================ */
.hero-body{grid-template-columns:56px minmax(0,1fr);gap:clamp(1.2rem,3vw,2.6rem);max-height:none;padding-top:104px;padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero{max-height:none;min-height:0}
.hero-left{padding-bottom:.4rem}
.hero-right{max-width:900px;justify-self:stretch}
.hero h1{max-width:880px;font-size:clamp(2.3rem,3.5vw,3.2rem);line-height:1.1;font-weight:800;letter-spacing:-.01em}
.hero h1 em{font-weight:800}
.hero-sub{max-width:640px;margin-top:2.1rem;font-size:1.15rem;line-height:1.6}
.hero-ctas{margin-top:2.6rem;gap:1rem}
.hero-trust{max-width:760px;margin-top:2.3rem;padding:1.2rem 0;gap:1.6rem}
.hero-stats{margin-top:2.5rem;padding-top:2rem;max-width:700px}
/* "100 % en ligne" ne se coupe jamais au milieu, a toutes les tailles */
.hero-online,.hseo-nowrap{white-space:nowrap}
@media(max-width:1024px){.hero-body{grid-template-columns:1fr}.hero-left{display:none}.hero-right{max-width:100%}}

/* ============================================================
   8c. HERO ACCUEIL V4 — encore plus d'air ; "100 % en ligne"
   devient un message commercial fort (accent + gras) et, sur
   mobile, sort entierement du flux du H1 pour devenir un badge
   autonome, gros et immediatement identifiable (jamais ecrase
   dans le H1). Le H1 mobile se limite a la phrase de base et
   respire enfin.
   ============================================================ */
.hero-online{color:var(--or2);font-style:italic;font-weight:800}
.hero-body{padding-top:112px;padding-bottom:clamp(4rem,8vw,7rem)}
.hero h1{line-height:1.16}
/* V4.1 — les 3 prestations sur 3 lignes distinctes, immediatement
   identifiables, dans un seul H1 semantique (pas de retour a la
   ligne laisse au hasard du navigateur). */
.h1-line{display:block}
.h1-line + .h1-line{margin-top:.18em}
.hero-sub{margin-top:2.4rem}
.hero-ctas{margin-top:2.8rem}
.hero-trust{margin-top:2.6rem}
.hero-stats{margin-top:2.8rem;padding-top:2.2rem}

@media(max-width:1024px){
  .hero h1{font-size:clamp(1.9rem,6.5vw,2.5rem)!important;line-height:1.26!important;max-width:100%}
  .hero-dash{display:none}
  .hero-online{
    display:block!important;
    font-style:normal;
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:.02em;
    color:#1a1206;
    background:var(--or2);
    padding:.6rem 1.15rem;
    border-radius:999px;
    margin-top:1.1rem;
    box-shadow:0 4px 16px rgba(0,0,0,.28);
  }
  .hero-sub{margin-top:1.6rem!important}
  .hero-ctas{margin-top:2rem!important}
  /* V4.1 : sur mobile, "Voir les tarifs" devient un lien discret pour ne
     pas concurrencer visuellement le CTA principal (devis) et WhatsApp. */
  .hero-ctas .btn-wf{
    background:transparent!important;border:none!important;
    color:rgba(255,255,255,.75)!important;text-decoration:underline;
    min-height:0!important;padding:.4rem 0!important;font-weight:600!important;
    width:auto!important;text-align:center;
  }
  .hero-trust{margin-top:1.8rem!important;flex-wrap:wrap}
  .hero-stats{margin-top:2rem!important;padding-top:1.6rem!important}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(1.65rem,7vw,2.05rem)!important}
  .hero-online{font-size:.98rem;padding:.55rem 1rem}
  .hs-n{font-size:1.15rem!important}
}

/* ---------- 9. PAGE D'ACCUEIL — sections claires ---------- */
/* !important : plusieurs pages ont des <style> supplémentaires réinjectés
   en plein milieu du <body> (après notre <link> du <head>), donc gagnants
   à spécificité égale par simple ordre du document. On sécurise ici. */
.intro-sign{color:var(--tm)!important}
.pl-list li{color:var(--tp)!important}
.pl p{color:var(--tm)!important}
.ms h4{color:var(--tx)!important}
.ms p{color:var(--tm)!important}
.dp{background:rgba(18,24,31,.035);border:1px solid var(--bd)}
.dp:hover{border-color:rgba(138,90,31,.35)}
.dp-b h4{color:var(--tx)!important}
.dp-b p{color:var(--tm)!important}
.ctaf{background:var(--n2)}
.ctaf-txt{color:rgba(18,24,31,.035)}
.ctaf-in p{color:var(--tm)!important}
.ctaf-note{color:var(--tm)!important}
.ctaf-note a{color:var(--or)!important}
/* Cartes portfolio (image + dégradé sombre en bas) : reste blanc sur photo */
.pi-ttl{color:#fff}
.pi-ov .pi-tag{color:var(--or2)}

/* ---------- 9b. BANDEAU "DÉPÔT EN LIGNE / GNAU" — V3 ----------
   Repris en composant structuré : libellé, prix en gros, légende.
   Fond blanc cassé + texte très foncé, jamais de blanc sur beige. */
.gnau-note{max-width:640px;margin:2.2rem auto 0;padding:1.5rem 1.7rem;border-left:4px solid var(--or);background:#faf8f2;border-radius:8px;text-align:left}
.gnau-note-label{font-size:1.05rem;font-weight:700;color:#1a2026;margin:0 0 .5rem}
.gnau-note-price{font-size:1.9rem;font-weight:800;color:var(--or);margin:0 0 .5rem;line-height:1.1}
.gnau-note-caption{font-size:.95rem;color:var(--tm);margin:0;line-height:1.55}

/* ---------- 10. TARIFS TEASER (accueil, nouveau bloc) ---------- */
.price-teaser{background:#fff}
.pt-head{text-align:center;max-width:640px;margin:0 auto 2.6rem}
.pt-head h2{color:var(--tx)}
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1180px;margin:0 auto}
.pt-card{background:var(--n2);border:1px solid var(--bd);border-radius:14px;padding:2.4rem 2rem;text-align:center;transition:transform .25s ease,border-color .25s ease}
.pt-card:hover{transform:translateY(-4px);border-color:var(--or)}
.pt-featured{border-color:var(--or);background:linear-gradient(180deg,rgba(138,90,31,.07),var(--n2))}
.pt-tag{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--or);margin-bottom:.6rem}
.pt-price{font-size:clamp(2.4rem,4.5vw,3.1rem);font-weight:800;color:var(--tx);line-height:1;margin-bottom:.7rem}
.pt-price span{display:block;font-size:.9rem;font-weight:600;color:var(--tm);letter-spacing:.08em;text-transform:uppercase;margin-top:.35rem}
.pt-card p{font-size:1rem;color:var(--tm);margin-bottom:1.2rem}
.pt-link{font-weight:700;color:var(--or)}
.pt-foot{text-align:center;margin-top:2.2rem}
@media(max-width:900px){.pt-grid{grid-template-columns:1fr}}

/* ---------- 10b. PROJETS CONCRETS (accueil, nouveau bloc V2) ---------- */
.projects-teaser{background:var(--n2)}
.proj-head{text-align:center;max-width:640px;margin:0 auto 2.2rem}
.proj-head h2{color:var(--tx)}
.proj-head p{color:var(--tm)}
.proj-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;max-width:900px;margin:0 auto}
.proj-chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--bd);border-radius:999px;padding:.85rem 1.4rem;font-size:1.05rem;font-weight:700;color:var(--tx);transition:border-color .2s ease,transform .2s ease}
.proj-chip:hover{border-color:var(--or);color:var(--or);transform:translateY(-2px)}
.proj-foot{text-align:center;margin-top:2.2rem}
@media(max-width:600px){.proj-chip{font-size:1rem;padding:.8rem 1.2rem}}

/* ---------- 10c. PROJETS RÉALISÉS (accueil, vrais dossiers DP — V4) ---------- */
.dp-realisations{background:#fff}
.real-head{text-align:center;max-width:680px;margin:0 auto 2.6rem}
.real-head h2{color:var(--tx)}
.real-head p{color:var(--tm)}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1180px;margin:0 auto}
.real-card{background:var(--n2);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.real-card:hover{transform:translateY(-4px);border-color:var(--or)}
.real-card img{width:100%;height:200px;object-fit:cover;display:block;background:#fff}
.real-b{padding:1.5rem 1.5rem 1.7rem}
.real-tag{font-weight:700;font-size:.85rem;letter-spacing:.01em;color:var(--or);margin-bottom:.5rem}
.real-card h3{font-size:1.2rem;font-weight:800;color:var(--tx);margin-bottom:.5rem}
.real-card p{font-size:.98rem;color:var(--tm);margin-bottom:1rem}
.real-link{font-weight:700;color:var(--or)}
.real-foot{text-align:center;margin-top:2.4rem}
@media(max-width:900px){.real-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.real-grid{grid-template-columns:1fr}}

/* ---------- 10d. AVIS GOOGLE (accueil — V4) ----------
   Aucun avis affiche n'est invente : la grille reste masquee et un
   renvoi honnete vers la fiche Google s'affiche tant qu'aucune donnee
   reelle n'est fournie dans assets/data/avis-google.json. */
.avis-google{background:var(--n2)}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1180px;margin:0 auto 2rem}
.avis-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:.8rem}
.avis-stars{color:var(--or);font-size:1.1rem;letter-spacing:.15em}
/* Cartes sur fond blanc : texte fonce obligatoire (le theme sombre var(--tp)/var(--tx)/var(--tm)
   etait quasi invisible sur #fff — corrige ici, pas dans site.css, car .avis-card est le seul
   composant du site a fond clair). */
.avis-text{font-size:1rem;color:#2a2a2a;line-height:1.6;flex:1}
.avis-foot{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;gap:.6rem}
.avis-who{display:flex;align-items:center;gap:.55rem}
.avis-avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--n2);color:var(--or);font-family:var(--fm);font-size:.72rem;font-weight:600;flex:none}
.avis-auteur{font-weight:700;color:#111}
.avis-src{color:#6b6b6b}
.avis-more{align-self:flex-start;font-size:.8rem;color:var(--or3);text-decoration:underline;margin-top:-.3rem}
.avis-summary{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.6rem;text-align:center}
.avis-summary-rating{font-family:var(--ft);font-size:1.6rem;color:var(--w);font-weight:500}
.avis-summary-stars{color:var(--or);font-size:1.15rem;letter-spacing:.15em}
.avis-summary-count{color:#4d5760;font-size:.9rem}
.avis-fallback{text-align:center;max-width:640px;margin:0 auto}
.avis-fallback p{color:var(--tm);margin-bottom:1.4rem}
.avis-fallback-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){.avis-grid{grid-template-columns:1fr}}

/* ---------- 11. CONTACT ---------- */
.hero-c p{color:var(--tm)!important}
.qcta{border:1px solid var(--bd)}
.qcta-l{color:var(--tm)!important}
.qcta-v{color:var(--tx)!important}
.form-title{font-size:1.7rem;font-weight:800;margin-bottom:.3rem}
.form-sub{color:var(--or)!important;font-weight:700}
.form-lead{font-size:1.15rem;font-weight:600;color:var(--tp)!important;margin-bottom:.6rem}
.form-micro{font-size:.95rem;color:var(--tm)!important;margin-bottom:1.8rem}
.f-label{color:var(--tx)!important;font-weight:700}
.f-optional{color:var(--tm)!important;font-size:.85em;text-transform:none;letter-spacing:0;font-weight:500}
.f-input,.f-textarea,.f-select{background:#fff;border:1.5px solid var(--bd);color:var(--tx)!important;font-size:1.05rem}
.f-input:focus,.f-textarea:focus,.f-select:focus{background:#fff;border-color:var(--or)}
.f-input::placeholder,.f-textarea::placeholder{color:var(--g8)!important}
.f-consent{color:var(--tm)!important}
.f-consent a{color:var(--or)!important}
.f-note{color:var(--tm)!important}
/* V4.1 — champ upload : input natif conserve (accessible), mais le
   bouton et le nom de fichier deviennent lisibles sur mobile. */
.f-file .f-input[type="file"]{
  padding:.8rem;font-size:.95rem;cursor:pointer;
}
.f-file .f-input[type="file"]::file-selector-button{
  font-family:var(--fs);font-size:.95rem;font-weight:700;
  color:#fff;background:var(--or);border:none;border-radius:6px;
  padding:.7rem 1.1rem;margin-right:.9rem;cursor:pointer;
  transition:background .2s ease;
}
.f-file .f-input[type="file"]::file-selector-button:hover{background:var(--or3)}
@media(max-width:600px){
  .f-file .f-input[type="file"]{
    display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
    padding:.9rem;height:auto;
  }
  .f-file .f-input[type="file"]::file-selector-button{width:100%;text-align:center}
}
.f-feedback.ok{background:rgba(31,170,84,.08);border:1px solid rgba(31,170,84,.35);color:#1a7a3e!important}
.f-feedback.err{background:rgba(214,50,40,.06);border:1px solid rgba(214,50,40,.3);color:#b3261e!important}
.side-info>p{color:var(--tm)!important}
.side-block{border:1px solid var(--bd)}
.side-contact-line,.side-contact-line a{color:var(--tp)!important}
.side-contact-line a:hover{color:var(--or)!important}
.side-list li{color:var(--tm)!important}

/* ---------- 12. TARIFS (cartes commerciales) ---------- */
.tarifs-hero.hsub{color:var(--tm)!important}
.intro-in p{color:var(--tp)!important}
.t-card{border:1px solid var(--bd);border-radius:14px;padding:2.6rem 2.1rem!important}
.t-card:hover{border-color:var(--or)}
.gt-grid{gap:1.8rem!important}
.t-price,.price-line{font-family:var(--ft);font-weight:800;font-size:clamp(2.8rem,5.8vw,3.6rem)!important}
.t-vat{color:var(--or)!important}
.t-desc{color:var(--tm)!important}
.t-bullets{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.t-bullets li{font-size:1rem;color:var(--tp)!important;font-weight:600;padding-left:1.5rem;position:relative}
.t-bullets li::before{content:'✓';position:absolute;left:0;color:var(--or);font-weight:800}
/* CTA principal "Demander mon devis" + lien secondaire "Voir le détail" (V4) */
.t-cta-row{display:flex;flex-direction:column;gap:.7rem;margin-top:auto}
.t-cta-main{width:100%;justify-content:center;text-align:center;font-size:1rem!important;padding:.95rem 1.6rem!important;min-height:0!important}
.t-cta-row .t-link{margin-top:0;justify-content:center;text-align:center}
.note-block{border:1px solid var(--bd)}
.note-block p{color:var(--tp)!important}
.zone-in p{color:var(--tm)!important}
.zone-chips a{color:var(--tp)!important;border-color:var(--bd)}
.zone-chips a:hover{color:var(--or)!important;border-color:var(--or)}
.cta-final{background:var(--n2)}
.cta-final-in p{color:var(--tm)!important}

/* ---------- 12b. PAGE /AVIS-CLIENTS/ — contraste (V4) ----------
   Cette page utilise des classes propres (.ac-hero/.years/.cr-card/.rl-card/
   .mt-step) jamais couvertes par le passage clair V1-V3 : leurs paragraphes
   restaient en blanc/gris clair (rgba(255,255,255,x)) codé en dur, donc
   illisibles depuis que le fond de la page est clair. Corrigé ici. */
.ac-hero.hsub{color:var(--tm)!important}
.years-tag{color:var(--tm)!important}
.years-in p{color:var(--tp)!important}
.cr-card p{color:var(--tm)!important}
.rl-card p{color:var(--tm)!important}
.mt-step p{color:var(--tm)!important}
.cta-final-in p{color:var(--tm)!important}
.cta-zone{color:var(--tm)!important}

/* ---------- 12c. AUDIT CONTRASTE SITEWIDE (V4) ----------
   Les ~90 pages de services individuels (declaration-prealable/*, permis-de-
   construire/*, regularisation/*, villes/*, pages utilitaires) utilisent des
   classes abrégées (.af/.cl/.rl/.th/etc.) différentes des classes des pages
   hub (.answer-first/.legal-note/...) déjà corrigées. Un correctif desktop
   n'avait été appliqué que sur mobile (@media max-width:768px) pour .af/.cl/
   .rl : le texte restait blanc sur fond clair en desktop. Corrigé ici pour
   les ~90 fichiers concernés, plus les pages utilitaires (404/mentions
   légales/feedback) dont le bandeau d'en-tête est clair mais le texte
   était resté blanc. Détecté par audit programmatique (fond var(--n*) +
   texte rgba(255,255,255,x) sur le même sélecteur), pas seulement par
   échantillonnage visuel. */
.hero-404 p,.hero-l p,.hero-f p,
.af p,.cl p,.ln p,.th p,.rl p,.tp p,.tch p,.imp p,.rg p,.dpc p,.st p,
.cmp-box p,.sf-box p,.seuil p,.cd-area p,.wly p,.pcg p,.tg p,.sl p,.ec p,
.pr p,.zn p,.cf-in p,.delay-txt p,.solution-in p,.side p,.legal-block p,
.info-urb-in p,.feat-head p,.pcta-in p,.pd-c p,.wb-b p,.tl-c p,
.legal-note{
  color:var(--tp)!important;
}
/* deuxieme passe d'audit : memes symptomes sur des elements non-<p>
   (td/li/dd/span/h4/a) restes en blanc code en dur sur fond desormais clair */
.tbl-wrap td,.sp,.cmp-box li,.f-check,.pc,.li,.tc,.cmp.pc.cmp-tag,.cmp li,
.dpc h4,.cmp-box dd,.sf-box li,.side-google a,.legal-toc li,.li-row span,
.dtl,.pg li,.hero-portfolio p.lead,.cc-card.cc-note,.pli h4,.tl{
  color:var(--tp)!important;
}

/* V4.2 — correctif contraste pages régularisation : plusieurs sous-pages
   conservaient des titres/listes en blanc codé en dur alors que leurs sections
   sont désormais claires. */
.dl{color:var(--tp)!important}
.pd-c h3,.wb-b h4,.tl-c h3{color:var(--tx)!important}
.cost-in>p{color:var(--tp)!important}

/* ---------- 13. PAGES SERVICES (DP / PC / Régularisation) ---------- */
.answer-first p{color:var(--tp)!important}
.cmp-tbl th,.cmp-tbl td{color:var(--tp)!important;border-bottom:1px solid var(--bd)}
.svc{border:1px solid var(--bd);border-radius:10px}
.svc:hover{border-color:var(--or)}
.svc p{color:var(--tm)!important}
.svc-meta{color:var(--or)!important;font-weight:700}
.fq{border:1px solid var(--bd);border-radius:8px}
.fq:hover{border-color:var(--or)}
.fq summary{color:var(--tx)!important;font-weight:700}
.fq-body,.fq-b{color:var(--tp)!important}
.spoke .spoke-grid a{color:var(--tp)!important}
.spoke .spoke-grid a:hover{color:var(--or)!important}
/* Classes propres à des pages précises (regularisation, permis-de-construire) */
.cc p{color:var(--tm)!important}
.wl-b h4{color:var(--tx)!important}
.wl-b p{color:var(--tm)!important}
.proc-step h4{color:var(--tx)!important}
.rk p{color:var(--tm)!important}
.cx p{color:var(--tm)!important}
.pc-item{color:var(--tp)!important}
.vl h4{color:var(--tx)!important}
/* .urgent-banner vit à l'intérieur du héros sombre (regularisation) : on
   NE force PAS de texte foncé ici, le blanc d'origine reste juste. */
.urgent-banner a{color:var(--or2)}
.regul-triggers{font-weight:700;color:var(--or2)!important;font-size:1.1rem!important;margin-bottom:.6rem}

/* ---------- 13b. AÉRATION GÉNÉRALE V3 ----------
   Le rythme vertical entre grandes sections était correct (.sec de
   site.css) mais certains blocs internes (grilles, en-têtes, listes)
   étaient tassés. On desserre ces points précis sans tout redessiner. */
.sec{padding:clamp(5.5rem,10vw,10rem) 0}
.pillars-head,.method-head,.services-head,.faq-head,.gt-head,.cmp-head,.cases-head,.risks-head{margin-bottom:3.2rem!important}
.pillars-grid{gap:2px}
.pl{padding:3.2rem 2.2rem 2.8rem!important}
.method-row{gap:2rem}
.dp-list{gap:1rem!important}
.dp{padding:1.4rem 1.6rem!important}
.svc-grid,.cas-grid,.cases-grid,.risks-grid,.cross-grid{gap:1.7rem!important}
.svc{padding:2.1rem 1.9rem!important}
.faq-list,.fq-w{gap:1rem!important}
.proj-grid{gap:1rem!important}
.form-box{padding:clamp(2.4rem,4.5vw,3.6rem)!important}
.side-block{padding:1.6rem 1.6rem!important;margin-bottom:1.2rem!important}

/* ---------- 14. MOBILE — contrer les !important sombres de site.css ---------- */
@media(max-width:768px){
  body{font-size:18px}
  p,.hseo-in p,.af p,.body-wrap p,.bw p,.faq-list p,.rl p,.cl p,section p,.wrap p{
    color:var(--tp)!important;font-size:1.0625rem!important;line-height:1.65
  }
  .hseo-in p{color:rgba(255,255,255,.92)!important}
  .hero-sub{color:rgba(255,255,255,.92)!important}
  .hero-sub strong{color:var(--or2)!important}
  .fq-body,.fq-b{color:var(--tp)!important}
  footer p,footer a,.ft-tag,.ft-loc,.ft-contact a,.ft-col a{color:var(--tp)!important}
  .ft-col h5{color:var(--or)!important}
  .ft-bot span,.ft-copy,.ft-sig{color:var(--tm)!important}
  .legal-note p,.ln p{color:var(--tp)!important}
  .breadcrumb,.breadcrumb a{color:var(--tm)!important}
  .hseo-in .breadcrumb,.hseo-in .breadcrumb a{color:rgba(255,255,255,.85)!important}
  .btn-wf{color:var(--tx)!important;border-color:var(--tx)!important}
  .hero .btn-wf,.hseo-in .btn-wf{color:#fff!important;border-color:rgba(255,255,255,.7)!important}
  .hcta{color:#fff!important;background:var(--or)!important}
  h1{font-size:clamp(2rem,8vw,2.6rem)!important}
  h2{font-size:clamp(1.6rem,6vw,2.1rem)!important}
  h3{font-size:1.25rem!important}
  .btn-or,.btn-wf,.btn-dark,.btn-wa,.f-submit{font-size:1.05rem!important;padding:1rem 1.5rem!important;width:100%}
  .t-price,.price-line{font-size:clamp(2rem,10vw,2.6rem)!important}
  .pt-price{font-size:clamp(2rem,9vw,2.4rem)}
}

/* section 14 — WhatsApp flottant : ne jamais chevaucher le bandeau defilant (.mq) */
.wa-float{transition:opacity .25s ease,transform .25s ease}
.wa-float.wa-pending{opacity:0;pointer-events:none;transform:translateY(8px)}

/* ============================================================
   section 16 — FORMULAIRE EXPRESS CRO MOBILE (TASK cro-mobile-leads-2026-08-20-1445)
   Bloc de conversion compact partagé par les 3 landing pages
   commerciales (permis-de-construire, declaration-prealable,
   regularisation). Classes prefixees xpr- pour ne jamais entrer
   en collision avec les classes f-* du formulaire /contact.
   ============================================================ */
.xpr-sec{background:var(--n2);padding:clamp(2.2rem,6vw,3.4rem) 0;border-bottom:1px solid var(--bd)}
.xpr-box{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 2px 18px rgba(18,24,31,.05)}
.xpr-top{margin-bottom:1.4rem;text-align:center}
.xpr-top h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:var(--tx);margin-bottom:.5rem}
.xpr-lead{color:var(--tm);font-size:1rem;margin:0;max-width:none}
.xpr-form{display:flex;flex-direction:column;gap:1.1rem}
.xpr-field{display:flex;flex-direction:column}
.xpr-label{font-weight:700;color:var(--tx);font-size:.92rem;margin-bottom:.4rem}
.xpr-req{color:var(--or)}
.xpr-opt{color:var(--tm);font-weight:500;font-size:.85em}
.xpr-input,.xpr-select{width:100%;background:#fff;border:1.5px solid var(--bd);border-radius:8px;color:var(--tx);font-size:1rem;padding:.9rem 1rem;min-height:52px;font-family:var(--fs)}
.xpr-input:focus,.xpr-select:focus{outline:none;border-color:var(--or)}
.xpr-input::placeholder{color:var(--g8)}
.xpr-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%238a5a1f'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;cursor:pointer}
.xpr-submit{width:100%;background:var(--or);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:1.05rem;padding:1.05rem 1.4rem;min-height:56px;cursor:pointer;transition:background .2s ease}
.xpr-submit:hover{background:var(--or3)}
.xpr-submit:disabled{opacity:.65;cursor:not-allowed}
.xpr-reassurance{text-align:center;color:var(--tm);font-size:.88rem;margin:.2rem 0 0;max-width:none}
.xpr-feedback{display:none;margin-top:.4rem;padding:.9rem 1rem;border-radius:8px;font-size:.92rem;line-height:1.5}
.xpr-feedback.show{display:block}
.xpr-feedback.ok{background:rgba(31,170,84,.08);border:1px solid rgba(31,170,84,.35);color:#1a7a3e}
.xpr-feedback.err{background:rgba(214,50,40,.06);border:1px solid rgba(214,50,40,.3);color:#b3261e}
.xpr-feedback a{color:inherit;text-decoration:underline}
@media(max-width:600px){.xpr-box{border-radius:10px;padding:1.5rem 1.2rem}}

/* ============================================================
   section 15 — V4.1 : bloc "3 etapes, 100% en ligne" agrandi.
   Devient une vraie section de reassurance commerciale au lieu
   d'un bloc microscopique. Mobile : empilement lisible, jamais
   une ligne horizontale trop serree.
   ============================================================ */
.method-head{margin-bottom:3rem!important}
.method-row{gap:1.5rem}
.ms-dot{
  width:110px!important;height:110px!important;
  font-size:2.6rem!important;font-weight:800!important;
  border:2px solid var(--or)!important;
  background:rgba(138,90,31,.06)!important;
  color:var(--or)!important;
  margin-bottom:1.6rem!important;
}
.ms h4{font-size:1.3rem!important;font-weight:800!important;color:var(--tx)!important;margin-bottom:.6rem!important}
.ms p{font-size:1.05rem!important;color:var(--tm)!important;line-height:1.55}
@media(max-width:768px){
  .method-row{flex-direction:column;gap:2.6rem}
  .method-row::before{display:none}
  /* Le site d'origine a une regle .ms{display:flex;align-items:flex-start;
     gap:1.2rem;text-align:left} pour mobile (icone a gauche, texte a
     droite) : on la neutralise pour un empilement vertical complet,
     conforme a la demande (numero, puis titre, puis texte, tres lisible). */
  .ms{
    display:block!important;
    text-align:center!important;
    padding:0 1.2rem;max-width:420px;margin:0 auto;
  }
  .ms-dot{
    width:88px!important;height:88px!important;font-size:2.1rem!important;
    flex-shrink:0!important;margin:0 auto 1.3rem!important;
  }
  .ms h4,.ms p{text-align:center!important}
}

/* ============================================================
   CORRECTIF 2026-08-27 — LISTES DE LIENS SUR PAGES CLAIRES
   Les pages /villes/, /faq/ et /plan-du-site/ conservent dans leur CSS
   inline une ancienne couleur blanche pour .sm-list a. Le thème global
   étant désormais clair, les libellés devenaient invisibles alors que
   les chevrons restaient visibles. On force ici les couleurs du thème
   clair sans toucher au contenu ni aux URLs.
   ============================================================ */
.sm-list li{color:var(--tp)!important}
.sm-list a{color:var(--tp)!important;opacity:1!important;visibility:visible!important;text-decoration:none!important}
.sm-list a:hover,.sm-list a:focus-visible{color:var(--or)!important;text-decoration:underline!important}
.sm-block h2{color:var(--tx)!important}

/* ============================================================
   FIX 2026-08-27 (etendu 2026-08-30) — HEADER FIXE / HERO SERVICES
   Le header a ete porte a 76px dans cet override alors que le
   hero-seo conservait l'ancien offset de 68px defini dans site.css.
   Resultat : le fil d'Ariane etait partiellement masque sous le
   header fixe. Le correctif etait jusqu'ici limite au mobile ;
   il est desormais applique a toutes les tailles d'ecran (desktop,
   tablette, mobile) pour que le fil d'Ariane commence entierement
   sous le header sur tout l'ecran, sans modifier l'apparence
   generale du hero.
   ============================================================ */
.hero-seo{
  padding-top:76px !important;
}

@media (max-width:768px){
  .hero-seo .hseo-in{
    padding-top:1rem !important;
  }
  .hero-seo .breadcrumb{
    margin-top:0 !important;
  }
}


/* ============================================================
   FIX 2026-08-27 — PAGE AVIS + MENTIONS LEGALES
   Le theme clair a rendu plusieurs textes quasi invisibles :
   - formulaire /feedback : etoiles, consentements, liste lateral, note
   - /mentions-legales : listes RGPD et sous-titres
   Les fonds restent clairs et on force un contraste lisible.
   ============================================================ */
.fb-sec .fb-title{color:var(--tx)!important}
.fb-sec .f-label{color:var(--tx)!important}
.fb-sec .f-input,.fb-sec .f-textarea,.fb-sec .f-select{
  background:#fff!important;color:var(--tx)!important;border-color:var(--bd)!important;
}
.fb-sec .f-input::placeholder,.fb-sec .f-textarea::placeholder{color:#7a7f84!important;opacity:1!important}
.fb-sec .f-select option{background:#fff!important;color:var(--tx)!important}
.fb-sec .f-consent,.fb-sec .f-note{color:var(--tm)!important}
.fb-sec .f-consent a{color:var(--or)!important}
.fb-sec .stars label{color:#c7b99e!important}
.fb-sec .stars label:hover,.fb-sec .stars label:hover ~ label{color:#b8751a!important}
.fb-sec .stars input:checked ~ label{color:#c7b99e!important}
.fb-sec .stars input:checked + label,.fb-sec .stars input:checked + label ~ label{color:var(--or)!important}
.fb-sec .side h3{color:var(--tx)!important}
.fb-sec .side p,.fb-sec .side-bullets li{color:var(--tm)!important}
.fb-sec .side-bullets li::before{color:var(--or)!important}
.fb-sec .side-google{background:var(--n2)!important;border-color:var(--bd)!important}
.fb-sec .side-google p{color:var(--tm)!important}
.fb-sec .side-google a:not(.btn-or){color:var(--tx)!important}

.legal-block h2,.legal-block h3{color:var(--tx)!important}
.legal-block ul li{color:var(--tp)!important}
.legal-block b{color:var(--tx)!important}
.legal-info .li-row b{color:var(--tx)!important}
.legal-info .li-row span{color:var(--tp)!important}