/* Thème Eco — port du pilote Design Debrabandere (sombre) et d'eco-chaud.be (clair). Markup et
styles inline des gabarits reproduisent le pilote à l'identique ; ce fichier ne contient que ce
qu'un style="" ne peut pas faire (:hover, affichage large/étroit, diaporamas, FAQ, apparition au
scroll, visionneuse) — même méthode que le pilote et eco-chaud — plus les variables de palette
(calculées ici pour les deux modes, --accent/--accent-fonce/--sur-accent injectés par
construire.py depuis config.json). */

:root{
  /* sombre = valeurs exactes du pilote Design Debrabandere */
  --fond:#0d0d0d;
  --fond-2:#141414;
  --carte:#1a1a1a;
  --bord:#2a2a2a;
  --titre:#fff;
  --texte:rgba(255,255,255,.82);
  --texte-doux:rgba(255,255,255,.64);
  --overlay-rgb:5,5,5;
  --bandeau:#000;
  --bandeau-texte:rgba(255,255,255,.82);
  --bandeau-texte-doux:rgba(255,255,255,.6);
  --surface-douce:color-mix(in srgb, var(--titre) 4%, transparent);
  --texte-carte:var(--titre);
  --texte-carte-doux:var(--texte-doux);
}
html[data-mode="clair"]{
  /* clair = valeurs exactes d'eco-chaud.be */
  --fond:#fbfcfd;
  --fond-2:#eef4f9;
  --carte:#fff;
  --bord:#dde7ef;
  --titre:#14212e;
  --texte:#14212e;
  --texte-doux:#4a5767;
  --overlay-rgb:7,24,38;
  --bandeau:#0a2b42;
  --bandeau-texte:#fff;
  --bandeau-texte-doux:rgba(255,255,255,.72);
}

html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;color:var(--texte);background:var(--fond);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--accent-texte);text-decoration:none}
a:hover{color:var(--accent-texte-fonce)}
p{margin:0}
img{max-width:100%}
h1,h2,h3{text-wrap:balance;font-family:'Bricolage Grotesque',sans-serif;color:var(--titre);margin:0}
@keyframes ecoPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}

/* ---- affichage large (>=980px) / étroit ---- */
.w-only{display:none}
.n-only{display:flex}
@media (min-width:980px){
  .w-only{display:flex}
  .n-only{display:none}
  #menu-mobile{display:none!important}
}

/* ---- menu mobile ---- */
#menu-mobile[hidden]{display:none!important}

/* ---- en-tête : ombre au scroll ---- */
#site-header.scrolled{background:color-mix(in srgb, var(--fond) 94%, transparent)!important;box-shadow:0 6px 30px rgba(0,0,0,.25)!important}

/* ---- dropdown Services (desktop) ---- */
.nav-drop{position:relative}
.nav-drop-caret{font-size:10px;transition:transform .2s}
.nav-drop-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop:hover .nav-drop-caret{transform:rotate(180deg)}
.nav-drop-menu a{display:block;padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:500;transition:background .2s;color:var(--texte)}
.nav-drop-menu a:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent-texte)!important}

/* ---- diaporamas (hero) / carrousel projets ---- */
[data-hero-slide]{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease,transform 7s linear}
[data-hero-slide].active{opacity:1;transform:scale(1.08)}
[data-hero-dot]{width:12px;background:rgba(255,255,255,.3)}
html[data-mode="clair"] [data-hero-dot]{background:rgba(255,255,255,.35)}
[data-hero-dot].active{width:34px;background:var(--accent)}

/* ---- avis clients (piste défilante, comme le carrousel projets : 3 par page en grand écran,
   2 en tablette, 1 en mobile — JS ecrit ces mêmes seuils dans testiPer()) ---- */
.testi-dot{width:8px;height:8px;border-radius:50%;background:var(--bord);border:0;padding:0;cursor:pointer;transition:width .3s,border-radius .3s,background .3s}
.testi-dot.active{width:26px;border-radius:5px;background:var(--accent)}

/* ---- FAQ ---- */
[data-faq-item] [data-faq-a-wrap]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
[data-faq-item] [data-faq-icon]{transform:rotate(0deg);transition:transform .35s,background .3s,color .3s;background:var(--fond-2);color:var(--accent-texte)}
[data-faq-item].open{border-color:var(--accent)!important;box-shadow:0 14px 34px rgba(0,0,0,.1)}
[data-faq-item].open [data-faq-a-wrap]{grid-template-rows:1fr}
[data-faq-item].open [data-faq-icon]{background:var(--accent);color:var(--sur-accent);transform:rotate(45deg)}

/* ---- apparition au scroll ---- */
[data-reveal]{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-hidden{opacity:0}
[data-reveal].is-hidden[data-reveal="left"]{transform:translateX(-60px)}
[data-reveal].is-hidden[data-reveal="right"]{transform:translateX(60px)}
[data-reveal].is-hidden[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].is-hidden[data-reveal="1"]{transform:translateY(40px)}

[hidden]{display:none!important}

/* ---- bandeau cookies ---- */
#cookie-banner.visible{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important}

/* ---- mini-galeries / carrousels (chantiers, projets, terrasses…) : dots générés en JS, posés
   sur une pastille sombre translucide — sans ça, des points de couleur claire (ou l'accent, s'il
   est clair) deviennent illisibles sur une photo claire, et 15 points débordent de la vignette. */
[data-dots]{background:rgba(0,0,0,.45);border-radius:20px;padding:6px 10px;line-height:1}
[data-dots]:empty{display:none}
[data-dots][data-compteur]{padding:5px 12px;color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mini-gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s,width .2s}
.mini-gallery-dot.active{background:var(--accent);width:16px;border-radius:3px;transform:none}
.mini-gallery:hover [data-prev],.mini-gallery:hover [data-next]{opacity:1}
.mini-gallery [data-prev],.mini-gallery [data-next]{transition:background .2s,opacity .2s}
.mini-gallery [data-prev]:hover,.mini-gallery [data-next]:hover{background:var(--accent);color:var(--sur-accent)}

/* ---- formulaire de contact ---- */
.hf-input:focus{border-color:var(--accent)!important;background:var(--fond)!important}
[data-sent-wrap][hidden]{display:none!important}

/* ---- :hover — une classe par bouton/lien (numérotation reprise du pilote + compléments eco-chaud
   manquants dans le pilote, mêmes rôles) ---- */
.hv01:hover{background:var(--accent-fonce)}
.hv02:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.hv03:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-1px)}
.hv04:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px)}
.hv05:hover{background:var(--accent-fonce);transform:translateY(-2px)}
.hv06:hover{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.hv07:hover{background:var(--accent);color:var(--sur-accent)!important}
.hv08:hover{background:rgba(255,255,255,.1);color:#fff}
.hv09:hover{background:rgba(128,128,128,.08);transform:translateY(-4px)}
.hv10:hover{background:rgba(255,255,255,.12);color:#fff}
.hv11:hover{background:rgba(255,255,255,.16);color:#fff}
.hv12:hover{border-color:var(--accent);color:var(--accent-texte)!important}
.hv13:hover{color:var(--accent);transform:translateY(-2px)}
.hv14:hover{color:var(--accent)!important}
.hv14:hover svg{color:var(--accent)}
.hv15:hover{color:var(--titre)!important}
.hv16:hover{color:var(--titre)!important;transform:translateX(3px)}
.hv17:hover{transform:scale(1.05)}
.hv18:hover{transform:scale(1.06)}
.hv19:hover{transform:scale(1.07)}
.hv20:hover{background:var(--accent-fonce);transform:translateY(-2px)}
.hv21:hover{transform:translateY(-2px);color:var(--accent)}
.hv21b:hover{background:var(--accent-fonce);transform:translateY(-2px)}
.hv22:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.14);color:var(--titre)}
.hv23:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.35);color:var(--titre)}
.hv24:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.3)}

/* Bandeau du haut : survol accent, icônes comprises (règle Wakny, priorité sur le style inline) */
.topbar a:hover,.topbar a:hover svg{color:var(--accent)!important}
/* Bandeau du haut : email masqué sur petit mobile (place limitée à côté du tél + Facebook) */
@media (max-width:600px){.topbar-email{display:none!important}}

/* Logo du pied de page : le pied reste toujours sombre (--bandeau) même en mode clair, où le
   logo du client est souvent en tons foncés (illisible sur fond bleu nuit) — passé en blanc. */
html[data-mode="clair"] .footer-logo{filter:brightness(0) invert(1)}

/* Section "fond:dark" (--bandeau, toujours sombre même en mode clair) : les titres des cartes
   qu'elle contient (why/stats/prix…) n'ont pas de couleur inline et prendraient sinon --titre
   (sombre en mode clair, illisible sur ce fond) — priorité sur la règle globale h1,h2,h3. */
.fond-sombre h1,.fond-sombre h2,.fond-sombre h3{color:#fff}
.fond-sombre{--surface-douce:rgba(255,255,255,.06);--texte-carte:#fff;--texte-carte-doux:rgba(255,255,255,.65)}

/* ---- .prose : corps de texte (légal, pages villes seo/, articles de blog) ---- */
.prose h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;margin:44px 0 16px;color:var(--titre)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:700;margin:26px 0 10px;color:var(--titre)}
.prose p{margin:14px 0;line-height:1.75;color:var(--texte-doux);font-size:15.5px}
.prose ul,.prose ol{line-height:1.85;color:var(--texte-doux);padding-left:22px;font-size:15.5px;margin:14px 0}
.prose li{margin:6px 0}
.prose strong{color:var(--titre)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose hr{border:none;border-top:1px solid var(--bord);margin:36px 0}
.prose blockquote{margin:26px 0;padding:20px 24px;border-left:3px solid var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:0 16px 16px 0;font-size:16px;line-height:1.6;font-style:italic;color:var(--texte)}

/* ---- grilles de cartes génériques : nombre de colonnes calculé côté Python (filtre Jinja
   "cols", outils/construire.py) selon le nombre réel de cartes, posé en data-cols — jamais de
   carte seule sur sa ligne, jamais de carte trop étroite (règle Wakny). Une orpheline unique en
   fin de grille est centrée ; une paire orpheline (cas 3 colonnes, le plus courant) aussi. ---- */
.grille-cartes{display:grid;gap:18px;margin:22px 0}
.grille-cartes[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille-cartes[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille-cartes[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.grille-cartes[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.grille-cartes[data-cols="3"]>*:last-child:nth-child(3n+1){grid-column:2}
.grille-cartes[data-cols="4"]>*:last-child:nth-child(4n+1){grid-column:2 / span 2}
.grille-cartes[data-cols="5"]>*:last-child:nth-child(5n+1){grid-column:2 / span 3}
.grille-cartes[data-cols="3"]>*:nth-last-child(2):nth-child(3n+1){grid-column-start:2}
@media (max-width:999px){
  .grille-cartes[data-cols="4"],.grille-cartes[data-cols="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-cartes[data-cols="4"]>*:last-child:nth-child(4n+1),.grille-cartes[data-cols="5"]>*:last-child:nth-child(5n+1){grid-column:1 / span 2;max-width:calc(50% - 9px);margin:0 auto}
}
@media (max-width:480px){
  .grille-cartes{grid-template-columns:1fr!important}
  .grille-cartes>*{grid-column:auto!important;max-width:none!important;margin:0!important}
}

/* ---- galeries/carrousels des pages service : toujours 3 par ligne en grand écran, quel que
   soit leur nombre (règle Wakny, remplace la règle "sans orpheline" pour les galeries — celle-ci
   reste pour les cartes services/stats/why/prix), 2 en tablette, 1 en mobile, mêmes cases
   carrées qu'avant. ---- */
.grille-galeries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:8px}
@media (max-width:999px){.grille-galeries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.grille-galeries{grid-template-columns:1fr}}

/* ---- rail mobile pour les grilles services (accueil + /services), sous 768px ---- */
@media (max-width:767px){
  .grille-services-accueil{display:flex!important;overflow-x:auto;overflow-y:visible;gap:14px!important;padding:6px 24px 18px!important;margin:0 -24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .grille-services-accueil::-webkit-scrollbar{display:none}
  .grille-services-accueil>div{flex:0 0 80%;scroll-snap-align:start}
}

/* ---- logos partenaires : bandeau défilant (V1 duplique la liste pour la boucle infinie) ---- */
.partenaires-piste{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partenaires-track{display:flex;gap:14px;flex-shrink:0;animation:partenairesDefile 32s linear infinite}
.partenaires-piste:hover .partenaires-track{animation-play-state:paused}
.partenaires-track>div{background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:14px 22px;display:flex;align-items:center;justify-content:center;min-height:72px;flex:none}
.partenaires-track img{max-height:44px;width:auto}
@keyframes partenairesDefile{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.partenaires-track{animation:none}}

/* blog-schedule.js remet display='' sur une carte publiée — la carte garde sa mise en colonne */
a.blog-card{display:flex}

/* ---- Visionneuse photo des galeries (reprise de lightbox.js du pilote) ---- */
.lightbox{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.lightbox.open{opacity:1;visibility:visible}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.93);cursor:zoom-out}
.lb-stage{position:relative;z-index:1;max-width:min(92vw,1300px);max-height:90vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:6px;display:block;user-select:none}
.lb-close{position:absolute;top:1rem;right:1rem;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;border:1.5px solid rgba(255,255,255,.2)}
.lb-close:hover{background:rgba(255,255,255,.25)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s;border:1.5px solid rgba(255,255,255,.2)}
.lb-prev{left:1rem}
.lb-next{right:1rem}
.lb-prev:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) translateX(-2px)}
.lb-next:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) translateX(2px)}
.lb-counter{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:.85rem;font-family:'Plus Jakarta Sans',sans-serif;z-index:2;letter-spacing:.05em}
body.lb-open{overflow:hidden}
.mini-gallery-track img,.lightbox-trigger{cursor:zoom-in}
@media (max-width:640px){
  .lb-prev{left:.4rem}
  .lb-next{right:.4rem}
  .lb-prev,.lb-next{width:40px;height:40px}
}

/* ---- piste défilante générique (3 par page / 2 / 1, mêmes seuils que testiPer()/per() en JS) :
   carrousel "projets" de l'accueil ET avis clients — la largeur JS (flexBasis) écrase ces
   valeurs par défaut, gardées comme repli avant l'exécution du script. ---- */
.eco-piste-track{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.eco-piste-slide{flex:0 0 33.333%;padding:0 10px}
@media (max-width:979px){.eco-piste-slide{flex-basis:50%}}
@media (max-width:639px){.eco-piste-slide{flex-basis:100%}}

/* ---- repli (bloc de type inconnu, comptabilisé par le contrôleur) ---- */
.eco-repli{border:1px dashed var(--bord);border-radius:12px;padding:16px;margin:16px 0;color:var(--texte-doux);font-size:14px}