/* D.F.L CONSTRUCTION — 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 14/10/2026 sur le moule V3 (commun.css), repassé en CLAIR aux couleurs de la V1 DFL.
   0) Palette claire DFL   1) Accent lisible sur bande 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)   8) Visionneuse */

/* ---------- 0. Palette claire DFL (<html data-mode="clair">, couleurs de la V1) ----------
   Contrastes WCAG calculés le 14/10/2026 (seuil 4,5:1 pour le texte, 3:1 pour les gros titres et éléments d'interface) :
     texte       #1c1c1c sur fond #ffffff        = 17,04:1     sur fond doux #faf8f5 = 16,08:1
     texte doux  #666666 sur fond #ffffff        =  5,74:1     sur fond doux #faf8f5 =  5,42:1   (le #787878 de la V1 n'avait que 4,2:1 : foncé)
     accent bleu #1f3c88 sur fond #ffffff        = 10,19:1     sur fond doux #faf8f5 =  9,62:1   (liens, titres d'accent)
     bleu foncé  #1a3373 sur fond #ffffff        = 11,90:1     (survols de liens)
     bouton      #ffffff sur accent #1f3c88      = 10,19:1     #ffffff sur bleu foncé #1a3373 (survol) = 11,90:1
   Bandes sombres (bandeau du haut, pied de page, « pourquoi nous choisir », en-têtes de page sans photo) : ardoise bleu nuit #131c33
     blanc 82 % (#d5d6da) = 11,65:1 ; blanc 72 % (#bdbfc6) = 9,21:1 ; blanc 60 % (#a1a4ad) = 6,79:1
     bleu éclairci #8fb4ff (accent posé sur la bande) = 8,17:1 ; #a9c3ff = 9,61:1
   Seule la bordure #ebe6df (1,24:1 sur blanc) est sous 3:1 : filet décoratif, jamais un texte. Le bleu #1f3c88 posé SUR la bande
   (bouton du pied, bulle d'appel) ne fait que 1,66:1 contre #131c33 : la forme est donc cerclée de blanc (§ 4 et § 6), son texte blanc reste à 10,19:1. */
/* html[data-mode="clair"] : le thème pose ses variables claires sur ce sélecteur (plus spécifique que :root), il faut donc le même ici */
:root,html[data-mode="clair"]{
  --accent:#1f3c88;
  --accent-fonce:#1a3373;
  --sur-accent:#ffffff;
  --accent-texte:#1f3c88;
  --accent-texte-fonce:#1a3373;
  --accent-sur-sombre:#8fb4ff;

  --fond:#ffffff;
  --fond-2:#faf8f5;
  --carte:#ffffff;
  --bord:#ebe6df;
  --titre:#1c1c1c;
  --texte:#1c1c1c;
  --texte-doux:#666666;
  --overlay-rgb:19,28,51;
  --bandeau:#131c33;
  --bandeau-texte:rgba(255,255,255,.82);
  --bandeau-texte-doux:rgba(255,255,255,.72);
}

/* ---------- 1. Accent posé sur bande sombre ----------
   Les gabarits posent 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). Le bleu #1f3c88 y serait illisible (1,66:1) : bleu éclairci #8fb4ff.
   Sont exclus les éléments qui portent leur propre fond (boutons : ils gardent leurs couleurs d'origine). */
: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 (bleu sombre, illisible sur la bande) ; sur sombre on reste sur le bleu éclairci (8,17: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>
   Clair : fond = 10 % de bleu sur blanc ; eyebrow #1f3c88 sur ce fond = 8,62:1 ; bouton blanc sur #1f3c88 = 10,19:1. */
.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 « BCE » (colonne Coordonnées) : même structure que les lignes voisines (pastille d'icône 30 px + texte).
   Libellé discret (blanc 72 % sur #131c33 = 9,21:1), le numéro dans le blanc des autres coordonnées (11,65:1). */
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}
/* LOGO : le logo DFL est NOIR sur fond blanc OPAQUE (400 × 400, aucune transparence).
   - en-tête : le fond de l'image (#fff) ne se voit que si l'en-tête n'est pas exactement blanc. Le thème rend l'en-tête translucide au défilement
     (94 % de --fond) : le carré blanc du logo apparaîtrait alors sur le grisé de ce qui passe dessous. L'en-tête reste donc OPAQUE (#fff) ;
     un mix-blend-mode ne marche pas ici (backdrop-filter isole l'en-tête).
   - pied (bande sombre) : le thème passe le logo en blanc (brightness(0) invert(1)), ce qui ferait un carré blanc plein : on annule ce filtre
     et le logo reste noir dans sa pastille BLANCHE (fond posé dans le gabarit). */
#site-header,#site-header.scrolled{background:var(--fond)!important}
html[data-mode="clair"] footer .footer-logo{filter:none}
/* bouton d'appel à l'action du pied (bleu #1f3c88 sur bande #131c33 ≈ 1,66:1) : cerclé de blanc pour que la forme se lise ; texte blanc 10,19:1 */
footer a[style*="background:var(--accent)"]{box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
footer a[style*="background:var(--accent)"]:hover{box-shadow:0 0 0 1.5px #fff,0 12px 28px rgba(0,0,0,.35)}

/* ---------- 5. En-tête ----------
   Filet sous l'en-tête ; lien actif (posé par propage-entete-pied.py : aria-current="page" sur la page, is-actif sur le menu
   déroulant Réalisations) ; sous-menu Réalisations (Toutes les réalisations + services) ; sous-menu dépliable du menu mobile.
   Texte actif = blanc sur #1f3c88 (10,19: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:290px}
.nav-drop-menu a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 12%,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 : le texte reste blanc sur la pastille bleue du lien (blanc sur #1f3c88 = 10,19:1), pas le bleu 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"). Cerclée de blanc (anneau de 3 px) pour rester
   visible quand elle passe sur la bande sombre du pied (bleu contre #131c33 ≈ 1,66:1). Mobile : tant que le bandeau cookies
   (138 px de haut + 22 px de marge) est ouvert, elle passe au-dessus de lui. */
a[aria-label="Appeler"][style*="position:fixed"]{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 3px #fff!important}
@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 (blanc sur #1f3c88 = 10,19: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 unique pour que la photo se lise (À propos, Contact, Réalisations…) ----------
   Photo à 100 % et un seul voile dégradé (ardoise #131c33), 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).
   Valeurs reprises du moule V3 (titre blanc mesuré ≥ 5,28:1 sur ses photos) : À RE-MESURER sur les photos DFL par les agents de pages. */
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}