/* OK Menuiserie — surcharge commune, chargée après le thème Eco. */
/* ======================================================================================================
   COULEUR DU SITE : vert #38B44C exactement (Wakny, 13/10/2026). Chaque page pose ses propres --accent* dans un <style>
   du <head> (ancienne valeur #38b34c) ; ce fichier est chargé après et, à spécificité égale, l'emporte : on ne touche
   pas aux pages. Dérivés recalculés dans la même teinte (H 130°, S ≈ 52 %), contrastes WCAG mesurés
   (script docs/travail-couleur/contrastes.py) :
     --accent            #38b44c  fonds, boutons, pastilles, barre de progression
     --sur-accent        #071b0a  texte posé SUR --accent                       : 6,67:1  (blanc ne ferait que 2,69:1)
     --accent-fonce      #277f35  survol des boutons (texte blanc)              : blanc 5,03:1
     --accent-texte      #267d34  texte vert sur fond clair                     : 5,02:1 sur #fbfcfb, 4,67:1 sur #f2f4f2, 5,17:1 sur #fff
     --accent-texte-fonce #1f652a survol / liens de texte                        : 6,91:1 sur #fbfcfb
     --accent-sur-sombre #75db86  texte vert sur l'anthracite #1d211f           : 9,49:1
   ====================================================================================================== */
:root{--accent:#38b44c;--accent-fonce:#277f35;--accent-texte:#267d34;--accent-texte-fonce:#1f652a;--sur-accent:#071b0a;--accent-sur-sombre:#75db86}
/* survol d'un bouton vert plein : le thème garde le texte foncé sur le fond --accent-fonce (3,57:1) → texte blanc (5,03:1) */
.hv21b:hover{color:#fff!important}
html[data-mode="clair"]{
  --fond:#fbfcfb;
  --fond-2:#f2f4f2;
  --carte:#fff;
  --bord:#dfe3df;
  --titre:#202522;
  --texte:#202522;
  --texte-doux:#525a55;
  --overlay-rgb:29,33,31;
  --bandeau:#1d211f;
  --bandeau-texte:#fff;
  --bandeau-texte-doux:rgba(255,255,255,.72);
  /* Contrastes WCAG : voir le bloc « COULEUR DU SITE » en tête de fichier (#75db86 / #1d211f = 9,49:1 ; #071b0a / #38b44c = 6,67:1). */
  --accent-sur-sombre:#75db86;
  --sur-accent:#071b0a;
}
*{box-sizing:border-box}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:999;padding:.75rem 1rem;background:var(--fond);color:var(--titre);border:2px solid var(--accent)}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--accent-texte-fonce);outline-offset:3px}
:root{--okm-ease:cubic-bezier(.2,.8,.2,1);--okm-spring:cubic-bezier(.34,1.56,.64,1)}
main{min-height:30vh}.page-hero{min-height:240px;background:rgb(var(--overlay-rgb));display:flex;align-items:flex-end}.page-hero>div{width:100%;max-width:1240px;margin:auto;padding:80px 24px 40px}.page-hero span{color:var(--accent-sur-sombre);font-weight:700;text-transform:uppercase;letter-spacing:.12em}.page-hero h1{color:#fff;font-size:clamp(34px,5vw,56px);margin-top:12px}.prose{max-width:820px;margin:auto;padding:64px 24px 110px}.prose h2{margin:2rem 0 .8rem;font-size:clamp(23px,3vw,30px)}.prose p,.prose li{line-height:1.75}.prose a{color:var(--accent-texte-fonce);text-decoration:underline}.not-found{min-height:60vh;padding:100px 24px;text-align:center}.not-found>p:first-child{font-size:clamp(80px,16vw,180px);font-weight:800;line-height:.8;color:var(--accent)}.not-found h1{font-size:clamp(32px,5vw,56px);margin:30px 0 12px}.not-found a{display:inline-block;margin-top:20px;padding:14px 24px;border-radius:40px;background:var(--accent);color:var(--sur-accent);font-weight:700}
.call-bubble{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:60}.call-bubble span{position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ecoPulse 2s ease-out infinite}.call-bubble svg{position:relative;fill:var(--sur-accent)}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(../eco/fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0051}
@media(max-width:600px){.call-bubble{right:16px;bottom:16px}.page-hero>div{padding-top:60px}}

/* ======================================================================================================
   EN-TÊTE, PIED DE PAGE ET BANDEAU D'APPEL : copie du gabarit de l'agence (V3 de référence, commun.css §1 et §4).
   Le markup (en style inline, comme NEM) est posé par docs/travail-commun/poser-entete-pied.py ; le thème commun
   (assets/eco/css/site.css) fournit .topbar, .w-only/.n-only, .nav-drop, .hv*, .hvpied, #site-header.scrolled…
   ====================================================================================================== */

/* ---------- 1. Accent posé sur fond sombre ----------
   Le markup pose la couleur en style inline (color:var(--accent) / var(--accent-texte)) : il faut !important.
   Zones sombres visées : pied de page, bandes .fond-sombre, bandeau de haut de page (section au fond --overlay-rgb),
   bandeau d'appel avec photo ([data-reveal="zoom"] au fond accent). Sont exclus les éléments qui portent leur
   propre fond (boutons : ils gardent leurs couleurs d'origine). #76dc86 sur #1d211f = 9,6:1. */
:is(footer,.fond-sombre,section[style*="background:rgb(var(--overlay-rgb))"],[data-reveal="zoom"][style*="background:var(--accent)"],[data-reveal="zoom"][style*="background: var(--accent)"])
  :is([style*="color:var(--accent"],[style*="color: var(--accent"]):not([style*="background"]){
  color:var(--accent-sur-sombre)!important;
}
/* pastilles d'icônes des coordonnées du pied (fond blanc 7 %, icône en accent) */
footer span[style*="rgba(255,255,255,.07)"][style*="color:var(--accent"]{color:var(--accent-sur-sombre)!important}
/* survols : le thème passe en accent plein (trop sombre sur le fond anthracite) */
footer .hvpied:hover,footer .hv14:hover,footer .hv14:hover svg,footer .hv15:hover,
section[style*="background:rgb(var(--overlay-rgb))"] .hv15:hover{color:var(--accent-sur-sombre)!important}
footer .hvpied:hover span{color:var(--sur-accent)!important}

/* ---------- 1 bis. Bandeau tout en haut (tél, mail, Facebook) : VERT #38b44c ----------
   Le markup pose fond et couleurs en style inline (var(--bandeau), var(--bandeau-texte-doux)) : !important.
   Texte et icônes (currentColor) en #071b0a sur #38b44c = 6,67:1 (le blanc ne ferait que 2,69:1, refusé).
   Survol : noir #000 (7,80:1) + soulignement, plus net que la couleur seule. Focus : contour #071b0a (6,67:1 sur le vert).
   Barre de progression de lecture (position:fixed, 3 px, tout en haut) : l'ancien dégradé vert sur vert disparaîtrait ;
   elle passe en vert très foncé #0b3d17 → #071b0a (#0b3d17 sur #38b44c = 4,60:1 ; sur fond blanc 12,4:1, donc visible aussi une fois la page défilée). */
.topbar{background:var(--accent)!important;color:var(--sur-accent)!important}
.topbar a,.topbar a svg{color:var(--sur-accent)!important}
.topbar a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s,color .2s}
.topbar a:hover,.topbar a:hover svg{color:#000!important}
.topbar a:hover{text-decoration-color:currentColor}
.topbar a:focus-visible{outline:3px solid var(--sur-accent);outline-offset:2px;border-radius:3px}
[data-progress]{background:linear-gradient(90deg,#0b3d17,#071b0a)!important}

/* ---------- 2. Ligne « TVA » du pied (colonne Contact) ---------- */
footer .pied-tva{color:var(--bandeau-texte);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
footer .pied-tva-lib{color:var(--bandeau-texte-doux);font-size:12px;font-weight:700;letter-spacing:.1em}
/* logo clair du pied (assets/img/logo/logo-clair.webp : scie claire + vert, fond transparent) : pas de filtre */
footer .pied-logo{filter:none}
footer .pied-adresse{margin:4px 0 0}

/* ---------- 3. Bandeau d'appel (« RECEVEZ VOTRE DEVIS GRATUIT ! ») : copie de NEM/accueil.css §1, §5, §10 ----------
   Section .okm-appel posée sur l'accueil, À propos et les 7 pages services, chacune avec sa photo (fond de la carte). */
/* hors accueil, le bandeau ferme la page : de l'air avant le pied (sur l'accueil, la FAQ suit) */
body:not([data-page="accueil"]) .okm-appel{padding-bottom:56px!important}
.okm-appel [data-reveal]{transition:opacity .85s var(--okm-ease),transform .95s var(--okm-ease),filter .85s ease}
.okm-appel [data-reveal].is-hidden{filter:blur(8px)}
.okm-appel [data-reveal].is-hidden[data-reveal="zoom"]{transform:scale(.9)}
/* la photo respire (Ken Burns lent) */
.okm-appel [data-reveal="zoom"]>div:first-child{animation:okm-ken 22s ease-in-out infinite alternate;transform-origin:30% 50%}
@keyframes okm-ken{from{transform:scale(1)}to{transform:scale(1.09)}}
/* texte du bandeau : les éléments arrivent l'un après l'autre (commun.js) */
.okm-seq.okm-pre>*{opacity:0;transform:translateY(22px)}
.okm-seq.okm-pre.okm-vu>*{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i,0)*95ms),transform .85s var(--okm-ease) calc(var(--i,0)*95ms)}
/* bouton détouré : brillance (sur le bouton seulement) + ressort */
.okm-appel .hv20{position:relative;overflow:hidden;isolation:isolate}
.okm-appel .hv20::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--okm-ease)}
.okm-appel .hv20:hover::after{transform:translateX(260%) skewX(-20deg)}
html .okm-appel .hv20{transition:transform .5s var(--okm-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .okm-appel .hv20:hover{transform:translateY(-3px) scale(1.045)}
html .okm-appel .hv20:active{transform:scale(.97)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .call-bubble span{display:none}
  .okm-appel [data-reveal]{filter:none!important}
  .okm-seq.okm-pre>*{opacity:1!important;transform:none!important}
  .okm-appel .hv20::after{display:none!important}
  html .okm-appel .hv20:hover{transform:none}
}

/* ---------- Logo redessiné (GPT, variante 1 validée par Wakny le 13/10) : transparent, plus grand ----------
   Les <img> portent une hauteur inline (58 / 56 px) : surcharge ici sans toucher aux 15 pages. */
.logo-lien img{height:74px!important;width:auto!important}
footer .pied-logo{height:70px!important;width:auto!important;background:none!important;padding:0!important;border:0!important;box-shadow:none!important}
@media (max-width:767px){.logo-lien img{height:56px!important}}

/* ---------- Pied de page : communes de « Zones desservies » en liens (14/10/2026) ----------
   Style discret = celui du texte (couleur héritée), soulignement au survol et au focus clavier. */
footer .pied-zones a{color:inherit;text-decoration:none;transition:color .2s}
footer .pied-zones a:hover,footer .pied-zones a:focus-visible{color:var(--bandeau-texte);text-decoration:underline;text-underline-offset:3px}
footer .pied-zones a:focus-visible{outline:2px solid var(--accent-sur-sombre,#fff);outline-offset:3px;border-radius:3px}