/* ============================================================
   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;
}

/* ---------- 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 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}
}