/* LE FILS — 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 16/10/2026 (socle V3), mode CLAIR aux couleurs de la V1 : blanc, rouge #BE0F10, noir.
   0) Palette claire   1) Accent lisible sur bande sombre   2) Le « Q » du titre   3) Pied de page et logo   4) En-tête : barre du haut, lien actif, sous-menu Services
   5) Bulle d'appel, lien d'évitement   6) En-têtes de page (voile)   7) Visionneuse   8) Placeholders   9) Sélecteur de langue FR / NL / EN */

/* ---------- 0. Palette claire (<html data-mode="clair">, couleurs de la V1) ----------
   Contrastes WCAG calculés le 16/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,42:1 : foncé)
     rouge        #BE0F10 sur fond #ffffff       =  6,43:1     sur fond doux #faf8f5 =  6,07:1   (liens, titres d'accent)
     rouge foncé  #a10d0c sur fond #ffffff       =  8,14:1     sur fond doux         =  7,68:1   (survols de liens)
     bouton       #ffffff sur accent #BE0F10     =  6,43:1     #ffffff sur rouge foncé #a10d0c (survol) = 8,14:1
     accent #BE0F10 sur sa teinte à 10 % (#f8e7e7) = 5,38:1 ; sur sa teinte à 12 % (#f7e2e2, sous-menu actif) = 5,19:1
   Bandes sombres (bandeau du haut, pied de page, « pourquoi nous choisir », en-têtes de page sans photo) : noir #000000 (celui de la V1)
     blanc 100 % = 21:1 ; blanc 82 % (#d1d1d1) = 13,75:1 ; blanc 72 % (#b8b8b8) = 10,59:1 ; blanc 60 % (#999999) = 7,37:1
     rouge éclairci #ff5a5a (accent posé sur la bande) = 6,86:1 ; sur la pastille d'icône du pied (blanc 7 % sur noir, #121212) ≈ 6,2:1
   Le rouge #BE0F10 posé SUR le noir ne fait que 3,27:1 : correct pour une forme (bouton du pied, bulle d'appel : seuil 3:1 des composants d'interface,
   son texte blanc reste à 6,43:1) mais pas pour du texte : tout texte rouge sur bande sombre passe par --accent-sur-sombre (§ 1).
   Logo du pied (logo-clair.webp) : lettres rouges éclaircies (le plus sombre des deux aplats, #da4648 ≈ 4,8:1 sur noir) et ligne « TOITURES - DAKWERKEN » en blanc.
   Seule la bordure #ebe6df (1,24:1 sur blanc) est sous 3:1 : filet décoratif, jamais un texte. */
/* 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:#BE0F10;
  --accent-fonce:#a10d0c;
  --sur-accent:#ffffff;
  --accent-texte:#BE0F10;
  --accent-texte-fonce:#a10d0c;
  --accent-sur-sombre:#ff5a5a;

  --fond:#ffffff;
  --fond-2:#faf8f5;
  --carte:#ffffff;
  --bord:#ebe6df;
  --titre:#1c1c1c;
  --texte:#1c1c1c;
  --texte-doux:#666666;
  --overlay-rgb:0,0,0;
  --bandeau:#000000;
  --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 rouge #BE0F10 y ferait 3,27:1 en texte : rouge éclairci #ff5a5a (6,86:1).
   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 (rouge, 3,27:1 sur noir) ; sur sombre on reste sur le rouge éclairci (6,86:1) */
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}
/* barre du haut en rouge (Wakny, 23/10/2026) : blanc sur #BE0F10 = 6,4:1 ; survol = soulignement (le rouge éclairci disparaîtrait sur le rouge) */
.topbar{background:var(--accent)!important;color:var(--sur-accent)!important}
.topbar a,.topbar a svg{color:var(--sur-accent)!important}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px}
/* sélection de texte */
::selection{background:var(--accent);color:var(--sur-accent)}

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

/* ---------- 3. Pied de page et logo ----------
   Ligne « BCE » (colonne Coordonnées) : même structure que les lignes voisines (pastille d'icône 30 px + texte).
   Libellé discret (blanc 72 % sur noir = 10,59:1), le numéro dans le blanc des autres coordonnées (13,75: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}
/* LOGO : logo.webp (V1, « LE FILS / TOITURES - DAKWERKEN » rouge et bleu marine) = fond BLANC OPAQUE (400 × 268, RGB, aucune transparence), très large marge blanche.
   - en-tête : logo-entete.webp = le même logo rogné (380 × 182, fond blanc opaque, aucune retouche de pixels). Le fond de l'image (#fff) ne se voit pas tant que
     l'en-tête est exactement blanc. Le thème rend l'en-tête translucide au défilement (94 % de --fond) : le rectangle 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 noire) : logo-clair.webp = version claire détourée (alpha tiré de la distance au blanc ; rouge éclairci, ligne du bas en blanc ; vérifiée à 3× sur noir : pas de halo).
     Le thème passe aussi .footer-logo en blanc (brightness(0) invert(1)) : on annule ce filtre pour garder les deux couleurs. */
#site-header,#site-header.scrolled{background:var(--fond)!important}
html[data-mode="clair"] footer .footer-logo{filter:none}
/* « Retour en haut » : la bulle d'appel ronde s'efface avant d'arriver sur le pied (§ 5), aucun décalage nécessaire */

/* ---------- 4. En-tête ----------
   Barre du haut : 2e téléphone (le fixe, comme la V1) masqué sous 980 px pour éviter le débordement (règle de la V1) ; l'e-mail l'est sous 600 px (thème).
   Filet sous l'en-tête ; lien actif (posé par propage-entete-pied.py : aria-current="page" sur la page elle-même ; is-actif sur le
   menu déroulant Services quand la page est /services ou l'une de ses 3 pages, avec aria-current sur le lien du sous-menu) ;
   sous-menu Services (Tous nos services + 3 pages) ; sous-menu dépliable du menu mobile. Aucun script : chaque lien est une vraie page.
   Texte actif = blanc sur #BE0F10 (6,43:1). */
@media (max-width:980px){.topbar a.topbar-tel2{display:none!important}}
#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) 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 (barre de l'en-tête = logo 64 px + 2 × 10 px de marge + filet) */
#menu-mobile{max-height:calc(100vh - 86px);max-height:calc(100dvh - 86px);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}
/* menu mobile : pas de pastille, la page courante (ou le menu Services quand on est dans l'une de ses pages) se marque par le rouge accent (6,43:1 sur blanc) */

/* ---------- 5. 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", numéro du GSM). Cerclée de blanc (anneau de 3 px) pour rester
   visible sur une photo sombre ou quand elle passe sur le pied noir (rouge contre #000 = 3,27:1). Passe commune du 16/10/2026 :
   - tant que le bandeau cookies est ouvert, elle monte au-dessus de lui sous 520 px (le bandeau fait 340 px de large en bas à gauche : il la recouvre alors) ;
     commun.js mesure le bandeau et pose --lf-cookie-h sur <html> (classe lf-cookie) ; :has() sert de second déclencheur ;
   - elle s'efface (classe lf-bulle-off posée par commun.js) dès que le contenu du pied (premier lien = bouton d'appel, à 48 px sous le haut du pied) arrive à sa hauteur : le pied porte déjà le bouton
     d'appel, le bouton « Demandez votre devis → » et « Retour en haut », la bulle ne les recouvre donc jamais. Le sélecteur de langue (§ 9) suit la même règle. */
a[aria-label="Appeler"][style*="position:fixed"]{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 3px #fff!important;transition:bottom .35s,opacity .25s,visibility .25s}
@media (max-width:520px){
  /* passe commune : sous 520 px le bandeau (340 px de large) couvre tout le bas de l'écran ; monter la bulle (et la pastille de langue, § 9) AU-DESSUS de lui les posait
     sur le contenu (boutons du hero, pastilles de l'accueil) tant qu'il est ouvert. Elles restent donc masquées tant que le visiteur n'a pas choisi
     (Accepter / Refuser : un seul geste), puis reviennent en fondu. Au-delà de 520 px le bandeau ne touche pas la bulle (à droite) : la pastille de langue y monte au-dessus de lui (§ 9). */
  body:has(#cookie-banner.visible) a[aria-label="Appeler"][style*="position:fixed"],
  html.lf-cookie a[aria-label="Appeler"][style*="position:fixed"]{opacity:0;visibility:hidden;pointer-events:none}
}
a[aria-label="Appeler"][style*="position:fixed"].lf-bulle-off{opacity:0;visibility:hidden;pointer-events:none}
@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 #BE0F10 = 6,43: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}

/* ---------- 6. 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é (noir), 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 de Le Fils 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, plus léger en haut.
   Passe commune (16/10/2026) : le haut du voile passe de .15 à .5 et le milieu de .7 à .76 — le sur-titre rose (#ff5a5a) de /contact, posé près du haut de
   l'en-tête, mesurait 4,03:1 au pire pixel de la photo ; il est maintenant ≥ 4,5:1 (mesure sur capture, 5 % de pixels les plus clairs). */
@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),.76) 45%,rgba(var(--overlay-rgb),.5) 100%)!important}
}

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

/* ---------- 8. Texte d'exemple des champs (placeholder) ----------
   Le gris par défaut du navigateur (#757575, ~4,3:1 sur le fond doux des champs) frôle le seuil : on pose le gris doux du site, #666 = 5,74:1 sur blanc, 5,42:1 sur #faf8f5. */
input::placeholder,textarea::placeholder{color:var(--texte-doux);opacity:1}

/* ---------- 9. Sélecteur de langue FR / NL / EN (composant /be-web-lang de la V1 : assets/js/lang-flags.js, chargé par le gabarit sur chaque page) ----------
   Le script fabrique lui-même la pastille .gtff-floating (3 drapeaux, fond noir translucide) en bas à gauche et ne contacte Google qu'après un clic sur NL ou EN
   (ou si le visiteur a déjà choisi une langue). Ici, seulement la mise en place :
   - z-index 70 (le script met 9999) : au-dessus de la bulle d'appel (60) mais sous le bandeau cookies (200), la visionneuse (3000) ;
   - même marge que le bandeau cookies et la bulle (22 px) ; tant que le bandeau cookies est ouvert, la pastille monte AU-DESSUS de lui (au-dessus de 520 px :
     le bandeau couvre sinon son coin bas gauche) — --lf-cookie-h est posée par commun.js ; sous 520 px elle s'efface avec la bulle jusqu'au choix du visiteur (passe commune) ;
   - elle s'efface avec la bulle (classe lf-bulle-off) quand le pied arrive : elle ne recouvre jamais le texte du pied ;
   - cachée quand le menu mobile est ouvert ou la visionneuse ouverte ;
   - boutons : bordure blanche sur noir (aucun texte : des drapeaux emoji, aria-label et title portent les noms de langue). */
.gtff-floating{z-index:70!important;left:22px!important;bottom:22px!important;transition:bottom .35s,opacity .25s,visibility .25s}
html.lf-cookie .gtff-floating{bottom:var(--lf-cookie-h,172px)!important}
body:has(#cookie-banner.visible) .gtff-floating{bottom:var(--lf-cookie-h,172px)!important}
@media (max-width:520px){html.lf-cookie .gtff-floating,body:has(#cookie-banner.visible) .gtff-floating{opacity:0;visibility:hidden;pointer-events:none}}
.gtff-floating.lf-bulle-off{opacity:0;visibility:hidden;pointer-events:none}
body:has(#menu-toggle[aria-expanded="true"]) .gtff-floating,body.lb-open .gtff-floating{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:768px){.gtff-floating{left:16px!important}}
@media (prefers-reduced-motion:reduce){.gtff-floating{transition:none}}