/* HODY CONSTRUCT — règles communes à toutes les pages (surcharge du thème commun assets/eco/ sans le modifier).
   À charger APRÈS /assets/eco/css/site.css et après le CSS propre à la page (dernière feuille).
   Aucun texte n'est écrit ici. Écrit le 13/10/2026 sur le moule de la V3 (commun.css + barre-mobile.css fusionnés).
   0) Palette sombre Hody   1) Accent lisible sur fond sombre   2) Bloc « Nos chantiers » des pages villes
   3) Q du titre   4) Pied de page   5) En-tête : lien actif, sous-menu, logo   6) Bulle d'appel, lien d'évitement   7) En-têtes de page (voile allégé)   8) Visionneuse */

/* ---------- 0. Palette Hody (mode sombre = mode par défaut du thème, <html data-mode="sombre">) ----------
   Contrastes WCAG calculés le 13/10/2026 (seuil 4,5:1 pour le texte, 3:1 pour les gros titres / éléments d'interface) :
     texte   #F0F0F0 sur fond #0D0D0D   = 17,05:1     sur surface #161616 = 15,88:1
     doux    #A0A0A0 sur fond #0D0D0D   =  7,43:1     sur surface #161616 =  6,92:1     (sur #1c1c1c = 6,52:1)
     or      #EBC24F sur fond #0D0D0D   = 11,44:1     sur surface #161616 = 10,65:1     sur noir pur #000 = 12,36:1
     or foncé #D4A832 sur fond #0D0D0D  =  8,74:1     sur surface #161616 =  8,14:1     (survols de liens)
     bouton  #0D0D0D sur or #EBC24F     = 11,44:1     #0D0D0D sur or foncé #D4A832 (survol) = 8,74:1
     bandeau du haut / pied (fond #000) : blanc 60 % = 7,37:1 ; blanc 72 % = 10,59:1 ; blanc 82 % = 13,75:1
   Seule la bordure #2a2a2a (1,35:1 sur le fond) est sous le seuil : elle n'est qu'un filet décoratif, jamais un texte. */
:root{
  --accent:#EBC24F;
  --accent-fonce:#D4A832;
  --sur-accent:#0D0D0D;
  --accent-texte:#EBC24F;
  --accent-texte-fonce:#D4A832;
  --accent-sur-sombre:#EBC24F;

  --fond:#0D0D0D;
  --fond-2:#161616;
  --carte:#161616;
  --bord:#2a2a2a;
  --titre:#F0F0F0;
  --texte:#F0F0F0;
  --texte-doux:#A0A0A0;
  --overlay-rgb:13,13,13;
  --bandeau:#000;
  --bandeau-texte:rgba(255,255,255,.82);
  --bandeau-texte-doux:rgba(255,255,255,.72);
}

/* ---------- 1. Accent posé sur fond sombre ----------
   Sur Hody tout le site est sombre et l'accent (or #EBC24F, 10,65:1 à 12,36:1) est déjà lisible partout : on garde
   la mécanique du moule (--accent-sur-sombre) pour les styles inline `color:var(--accent…)` posés dans les zones
   sombres, afin que les feuilles de page n'aient rien à réécrire. Sont exclus les éléments qui portent leur propre fond. */
: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;
}
footer span[style*="rgba(255,255,255,.07)"][style*="color:var(--accent"]{color:var(--accent-sur-sombre)!important}
/* survols : le thème passe par --accent-texte-fonce ; sur sombre on reste sur l'or (lisible, 11,44:1) */
.topbar a:hover,.topbar a:hover svg,
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}
/* sélection de texte */
::selection{background:var(--accent);color:var(--sur-accent)}

/* ---------- 2. Bloc « Nos chantiers / Découvrez nos réalisations » (pages villes seo/) ----------
   Mêmes règles que blog.css (.prose .article-realisations), sans le préfixe .prose : les pages seo/ n'ont pas ce conteneur.
   Structure :
     <div class="article-realisations" data-reveal="1">
       <span class="reno-eyebrow">Nos chantiers</span>
       <h3>Découvrez nos réalisations</h3>
       <p class="reno-sub">…</p>
       <div class="reno-buttons"><a href="…" class="reno-btn">Libellé <span aria-hidden="true">→</span></a>…</div>
     </div> */
.article-realisations{margin:40px 0;padding:36px 28px;text-align:center;background:color-mix(in srgb,var(--accent) 10%,var(--fond));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:24px}
section>div>.article-realisations{max-width:820px}
.article-realisations .reno-eyebrow{display:block;margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-texte)}
.article-realisations h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.15;color:var(--titre)}
.article-realisations .reno-sub{margin:0 auto 20px;max-width:480px;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.article-realisations .reno-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.article-realisations a.reno-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--accent);color:var(--sur-accent);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;border:0;border-radius:40px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .2s,transform .2s,box-shadow .2s}
.article-realisations a.reno-btn span{transition:transform .18s ease}
.article-realisations a.reno-btn:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.article-realisations a.reno-btn:hover span{transform:translateX(4px)}
.article-realisations a.reno-btn:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}
@media (max-width:520px){
  .article-realisations{margin:32px 0;padding:28px 18px;border-radius:20px}
  .article-realisations a.reno-btn{padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  .article-realisations a.reno-btn,.article-realisations a.reno-btn span{transition:none}
  .article-realisations a.reno-btn:hover,.article-realisations a.reno-btn:hover span{transform:none}
}

/* ---------- 3. Le « Q » de Bricolage Grotesque ----------
   Cette police dessine son Q majuscule avec une longue queue horizontale sous la ligne de base : en tête d'un titre
   (« Quels travaux… », « Quand… ») elle se lit comme un soulignement parasite sous la seule première lettre.
   On remplace uniquement U+0051 par le Q de Plus Jakarta Sans (police du texte, déjà chargée) : même famille déclarée,
   la déclaration la plus tardive gagne pour ce caractère — aucun sélecteur, aucun balisage touché. */
@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-variations'),url(../eco/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0051;
}
/* titre d'étape du formulaire, focalisé par script : pas de contour (le focus reste actif pour les lecteurs d'écran) */
.de-title[tabindex="-1"]:focus,.de-title[tabindex="-1"]:focus-visible{outline:none}

/* ---------- 4. Pied de page ----------
   Ligne « TVA » (colonne Contact) : même structure que les lignes voisines (pastille d'icône 30 px + texte).
   « TVA : » en libellé discret (blanc 72 % sur #000 = 10,59:1), le numéro dans le blanc des autres coordonnées. */
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}
/* communes desservies : liste de liens discrets sur plusieurs colonnes */
footer .pied-communes{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
footer .pied-communes a{white-space:nowrap}
footer .pied-heures{color:var(--bandeau-texte-doux);font-size:13px}
/* le logo Hody est sur fond noir pur (#000) : sur le fond #0D0D0D / la pastille du pied, « lighten » le fond du logo
   se fond dans la page (le noir pur devient le fond, l'or et le blanc restent) */
.logo-lien img,.footer-logo{mix-blend-mode:lighten}

/* ---------- 5. En-tête ----------
   Filet sous l'en-tête (l'ombre du thème est invisible sur noir) ; lien actif (posé par propage-entete-pied.py :
   aria-current="page" sur la page, data-actif sur la rubrique mère, is-actif sur le menu déroulant Réalisations) ;
   sous-menu Réalisations (Toutes les réalisations + 9 services) ; sous-menu dépliable du menu mobile. Le texte actif = #0D0D0D sur or (11,44:1). */
#site-header{border-bottom:1px solid var(--bord)}
#site-header:focus{outline:none} /* focus programmatique après « Retour en haut » : pas d'anneau sur le bandeau */
#site-header nav a[aria-current="page"]:not([data-sub]){background:var(--accent)!important;color:var(--sur-accent)!important}
#site-header nav a[data-actif]{color:var(--accent-texte)!important}
#site-header .nav-drop.is-actif>a{color:var(--accent-texte)!important}
.nav-drop-menu{min-width:270px}
.nav-drop-menu a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-texte)!important}
.nav-drop>a:focus-visible,.nav-drop-menu a:focus-visible,#menu-toggle:focus-visible,.nm-m-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* menu mobile : défile si le sous-menu déplié dépasse l'écran */
#menu-mobile{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain}
#menu-mobile .nm-m-row{display:flex;align-items:stretch;border-bottom:1px solid var(--bord)}
#menu-mobile .nm-m-row>a:first-child{flex:1 1 auto;border-bottom:0!important}
#menu-mobile .nm-m-toggle{flex:none;width:48px;background:none;border:0;color:var(--accent-texte);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
#menu-mobile .nm-m-toggle[aria-expanded="true"]{transform:rotate(180deg)}
#menu-mobile .nm-m-sous{display:flex;flex-direction:column}
#menu-mobile .nm-m-sous[hidden]{display:none}
#menu-mobile a[aria-current="page"]{color:var(--accent-texte)!important}
#menu-mobile a[data-actif],#menu-mobile .nm-m-row.is-actif>a:first-child{color:var(--accent-texte)!important}
/* page courante = Réalisations (pastille or du lien) : le texte reste le noir sur or (#0D0D0D sur #EBC24F = 11,44:1), pas l'or du lien « mère » */
#menu-mobile .nm-m-row.is-actif>a[aria-current="page"]:first-child{color:var(--sur-accent)!important}

/* ---------- 6. Bulle d'appel ronde (seule aide fixe : JAMAIS de barre fixe en bas d'écran) + lien d'évitement ----------
   Bulle : en bas à droite, mobile et desktop, posée dans chaque page (aria-label="Appeler"). Mobile : tant que le bandeau
   cookies (138 px de haut + 22 px de marge) est ouvert, elle passe au-dessus de lui. */
@media (max-width:768px){
  a[aria-label="Appeler"][style*="position:fixed"]{transition:bottom .35s}
  body:has(#cookie-banner.visible) a[aria-label="Appeler"][style*="position:fixed"]{bottom:172px!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a[aria-label="Appeler"][style*="position:fixed"]{transition:none}
  #menu-mobile .nm-m-toggle{transition:none}
}
/* lien d'évitement : invisible tant qu'il n'a pas le focus clavier (#0D0D0D sur or = 11,44:1) */
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--accent);color:var(--sur-accent);padding:12px 18px;border-radius:0 0 12px 12px;font-weight:700;font-size:14px;transition:top .15s}
.skip-link:focus{top:0;color:var(--sur-accent)}
#contenu:focus{outline:none}

/* ---------- 7. En-têtes de page : voile allégé pour que la photo se lise (À propos, Contact, Services, Réalisations, 10 pages service) ----------
   Avant : la photo était posée à 50-60 % d'opacité PUIS recouverte d'un dégradé noir à 92/70/35 % : on ne la devinait plus.
   Maintenant : photo à 100 % et un seul voile dégradé, fort sous le texte (à gauche), léger à droite. Les pages gardent leur
   balisage (styles en ligne) : on surcharge ici avec !important, une seule règle pour toutes.
   Un seul réglage : --voile-g (bord gauche, sous le titre), --voile-m (milieu), --voile-d (bord droit).
   Contraste du titre blanc (#fff) mesuré sur les vraies photos APRÈS voile (script du 13/10/2026, 95e centile de luminance
   de la zone du texte, 14 pages) : pire cas 5,28:1 au bureau (aménagement intérieur), 7,19:1 au mobile ; 95e centile ≥ 6,07:1. */
main#contenu>section:first-of-type{--voile-g:.80;--voile-m:.58;--voile-d:.10}
main#contenu>section:first-of-type>div[style*="background-image"][style*="opacity:.5"],
main#contenu>section:first-of-type>div[style*="background-image"][style*="opacity:.6"]{opacity:1!important}
main#contenu>section:first-of-type>div[style*="linear-gradient(90deg,rgba(var(--overlay-rgb),.92) 0%"]{
  background:linear-gradient(90deg,rgba(var(--overlay-rgb),var(--voile-g)) 0%,rgba(var(--overlay-rgb),var(--voile-m)) 48%,rgba(var(--overlay-rgb),var(--voile-d)) 100%)!important}
/* mobile : le texte occupe toute la largeur, en bas de l'en-tête → le voile est plus fort en bas, léger en haut */
@media (max-width:768px){
  main#contenu>section:first-of-type>div[style*="linear-gradient(90deg,rgba(var(--overlay-rgb),.92) 0%"]{
    background:linear-gradient(0deg,rgba(var(--overlay-rgb),.88) 0%,rgba(var(--overlay-rgb),.7) 45%,rgba(var(--overlay-rgb),.15) 100%)!important}
}

/* ---------- 8. Visionneuse (lightbox du thème) : aucun compteur « 3 / 15 », sur toutes les pages (règle de Wakny : photos seules) ----------
   Flèches, Échap et glissement au doigt restent. */
.lb-counter{display:none!important}