/* Vide Maison Carolo V3 — les 14 pages communes (préfixe vz-) :
   vide-maison-gosselies, -marcinelle, -chatelet, -fleurus, -courcelles, -pont-a-celles, -montigny-le-tilleul,
   -fontaine-l-eveque, -bruxelles, -namur, -gembloux, -sambreville, -nivelles, -waterloo.
   À charger APRÈS site.css. Mécanismes copiés de services.css (vs-) puis renommés : titre mot par mot + trait tracé,
   pastilles, cartes en relief (entrée 3D + inclinaison au survol), icônes dont le trait se dessine, frise d'étapes qui
   se remplit, accordéon animé. Nouveau : mini-radar des communes voisines (inspiré du radar de l'accueil).
   Les états « cachés » (vz-pre, vz-frise-on, vz-faq-on, vz-zh) ne sont posés que par communes.js : sans JS, tout
   reste visible. Mouvement réduit : tout est coupé en bas de fichier. Pas de reflet qui balaie les photos.
   Transform / opacity uniquement (le faisceau du radar anime un angle de dégradé). */

.vz-page{--vz-ease:cubic-bezier(.2,.8,.2,1);--vz-spring:cubic-bezier(.34,1.56,.64,1);--vz-clair:#ff8a80;--vz-nuit:#171717}

/* ---------- Mots-clés d'animation ---------- */
@keyframes vz-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vz-mot{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vz-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vz-pop{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
@keyframes vz-respire{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes vz-carte-in{from{opacity:0;transform:perspective(900px) translateY(42px) rotateX(-22deg) scale(.95)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1)}}
@keyframes vz-trace-ico{0%{stroke-dasharray:1;stroke-dashoffset:1}99%{stroke-dasharray:1;stroke-dashoffset:0}100%{stroke-dasharray:none;stroke-dashoffset:0}}
@keyframes vz-rebond{0%{transform:scale(.4)}55%{transform:scale(1.18)}78%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes vz-anneau{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
@keyframes vz-secoue{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg) scale(1.08)}65%{transform:rotate(7deg) scale(1.08)}}

/* ======================================================================
   1. EN-TÊTE DE PAGE : titre mot par mot, trait rouge tracé, pastilles
   ====================================================================== */
.vz-page .hero-contenu > *{animation:none}
.vz-page .hero-contenu > .fil{animation:vz-monte .7s var(--vz-ease) both}
.vz-page .hero-contenu > .sur-titre{animation:vz-monte .7s var(--vz-ease) .1s both}
.vz-page .hero-contenu > .hero-sous{animation:vz-monte .8s var(--vz-ease) 1.05s both}
.vz-page .hero-contenu > .hero-actions{animation:vz-monte .8s var(--vz-ease) 1.2s both}
.vz-page .hero h1{margin-bottom:18px}
.vz-w{display:inline-block}
.vz-w > i{display:inline-block;font-style:normal;animation:vz-mot .85s var(--vz-ease) both;animation-delay:calc(var(--i,0) * 85ms + .25s)}
/* point final du titre collé au dernier mot (jamais seul à la ligne) */
.vz-page .hero h1.sq::after{content:none}
.vz-page .hero h1 .vz-w:last-child > i::after{content:".";color:var(--rouge-clair,#ff6b66)}
.vz-fil{display:block;width:92px;height:5px;margin:0 0 26px;background:var(--rouge-logo);transform-origin:left center}
.vz-page .hero-contenu > .vz-fil{animation:vz-trace 1s var(--vz-ease) .95s both}
.vz-page .hero-photo img{animation:vz-respire 10s var(--vz-ease) both;transform-origin:70% 50%}
.vz-dust{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1}

/* pastilles d'engagements (remplacent la barre à trois colonnes) */
.vz-page .vz-pastilles-hero{display:flex;flex-wrap:wrap;gap:10px;border:0;background:none;padding:0 0 40px}
.vz-page .vz-pastilles-hero li,.vz-page .vz-pastilles-hero li + li{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 9px;border:1px solid rgba(255,255,255,.42);border-left:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(0,0,0,.5);font-size:.95rem;font-weight:600;line-height:1.3;
  animation:vz-pop .7s var(--vz-spring) backwards;animation-delay:calc(1.45s + var(--i,0) * 130ms);transition:background-color .25s,border-color .25s,transform .35s var(--vz-spring)}
.vz-page .vz-pastilles-hero li:hover{background:rgba(0,0,0,.72);border-color:#fff;transform:translateY(-3px)}
.vz-page .vz-pastilles-hero .ico{width:24px;height:24px;padding:4px;margin:0;border-radius:50%;background:var(--rouge);color:#fff;stroke-width:3}

/* ======================================================================
   2. CARTES « CE QUE NOUS FAISONS » EN RELIEF
   ====================================================================== */
.vz-lead{margin-top:14px;font-size:1.08rem;color:var(--gris);max-width:40ch}
.vz-page #prestation .sec-reponse{margin-top:16px;max-width:44rem;color:var(--texte);font-size:1.1rem}
.vz-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;perspective:1100px}
.vz-cartes > li:last-child:nth-child(odd){grid-column:1 / -1}
.vz-carte{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--ligne);border-bottom:3px solid var(--rouge);border-radius:var(--rayon);
  box-shadow:0 18px 30px -24px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.05);font-weight:600;line-height:1.35;color:var(--noir);
  transition:transform .45s var(--vz-ease),box-shadow .35s,border-color .3s}
.vz-carte:hover{box-shadow:0 26px 40px -24px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.06);border-color:#cfc9bc;border-bottom-color:var(--rouge)}
.vz-ic{flex:none;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:var(--rayon);background:var(--noir);color:#fff;font-size:26px;transition:background-color .3s,transform .4s var(--vz-spring)}
.vz-ic .ico{width:26px;height:26px;stroke-width:1.9}
.vz-carte:hover .vz-ic,.vz-lc:hover .vz-ic,.vz-lc:focus-visible .vz-ic{background:var(--rouge)}
.vz-carte:hover .vz-ic .ico{animation:vz-secoue .6s ease-out 1}
.vz-tilting{transition:transform .08s linear,box-shadow .3s,border-color .3s!important}

/* états d'entrée posés par communes.js (sans JS : rien n'est caché) */
.vz-pre{opacity:0!important;transition:none!important}
.vz-go{animation:vz-carte-in .85s var(--vz-ease) backwards;animation-delay:var(--d,0ms)}
.vz-go .vz-ic .ico,.vz-go.vz-ic .ico{animation:vz-trace-ico .9s ease-out backwards;animation-delay:calc(var(--d,0ms) + .3s)}
.vz-go .vz-ic{animation:vz-rebond .75s var(--vz-spring) backwards;animation-delay:calc(var(--d,0ms) + .25s)}
.vz-carte.vz-go,.situation.vz-go,.vz-lc.vz-go{animation-delay:var(--d,0ms)}
.vz-pre .vz-ic{transform:scale(.4)}

/* ======================================================================
   3. SITUATIONS (relief au survol)
   ====================================================================== */
.vz-page .situation{transform-style:preserve-3d;box-shadow:0 18px 30px -24px rgba(0,0,0,.5)}
.vz-page .situation > .ico{transition:transform .4s var(--vz-spring)}
.vz-page .situation:hover > .ico{transform:scale(1.12) rotate(-6deg)}
.vz-page .situations{perspective:1100px}
.vz-page .situation h3{margin:0}
.vz-page .sec-tete > p.sec-reponse{max-width:46rem}

/* ======================================================================
   4. SERVICES : cartes-liens
   ====================================================================== */
.vz-liens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;perspective:1100px}
.vz-lc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 22px 22px;background:#fff;border:1px solid var(--ligne);border-bottom:4px solid var(--noir);border-radius:var(--rayon);color:var(--texte);
  box-shadow:0 18px 30px -24px rgba(0,0,0,.5);transition:transform .45s var(--vz-ease),box-shadow .35s,border-color .3s}
.vz-lc:hover,.vz-lc:focus-visible{border-bottom-color:var(--rouge);box-shadow:0 26px 40px -24px rgba(0,0,0,.6)}
.vz-lc .vz-ic{margin-bottom:6px}
.vz-lc-t{font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--noir)}
.vz-lc-p{color:var(--gris);font-size:.96rem;line-height:1.5;margin-bottom:10px}
.vz-lc-f{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-top:auto;border-radius:50%;background:var(--noir);color:#fff;transition:background-color .25s,transform .4s var(--vz-spring)}
.vz-lc-f .ico{width:20px;height:20px;stroke-width:2.2}
.vz-lc:hover .vz-lc-f,.vz-lc:focus-visible .vz-lc-f{background:var(--rouge);transform:translateX(8px)}

/* ======================================================================
   5. FRISE D'ÉTAPES QUI SE REMPLIT
   ====================================================================== */
.vz-frise::after{content:none}
.vz-frise-on::after{content:"";position:absolute;left:0;right:0;top:23px;height:2px;background:var(--rouge);transform-origin:left center;transform:scaleX(var(--vz-p,0));transition:transform .5s linear;z-index:0}
.vz-frise .etape{z-index:1}
@media (min-width:1101px){.vz-frise::before,.vz-frise-on::after{right:auto;width:calc(80% + 43px)}}
.vz-frise-on .etape-num{background:#fff;color:var(--noir);box-shadow:inset 0 0 0 2px var(--ligne);transition:background-color .4s,color .4s,box-shadow .4s}
.vz-frise-on .etape h3,.vz-frise-on .etape p{opacity:.4;transition:opacity .5s}
.vz-frise-on .etape.vz-lit .etape-num{background:var(--rouge);color:#fff;box-shadow:none}
.vz-frise-on .etape.vz-lit h3,.vz-frise-on .etape.vz-lit p{opacity:1}
.vz-frise-on .etape.vz-lit .etape-num::after{content:"";position:absolute;inset:-4px;border:2px solid var(--rouge);border-radius:6px;pointer-events:none;animation:vz-anneau 1.1s ease-out 1 both}
.vz-frise .etape.vz-lit .etape-num{animation:vz-rebond .7s var(--vz-spring) 1}
.vz-frise .etape h3{margin-bottom:0}

/* ======================================================================
   6. MINI-RADAR DES COMMUNES VOISINES
   Centre = la commune ; pastilles-liens posées sur des anneaux (positions en % calculées par le générateur).
   Ordinateur : scène large (ellipses). Tablette / téléphone : disque compact, pastilles en liste dessous.
   ====================================================================== */
.vz-zone{position:relative;overflow:hidden;isolation:isolate;background:var(--vz-nuit);color:#fff}
.vz-zone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at 14% 78%,rgba(196,39,39,.34),transparent 70%),radial-gradient(520px circle at 92% 6%,rgba(224,18,20,.14),transparent 70%)}
.vz-zone h2{color:#fff}
.vz-zone .sec-tete{margin-bottom:20px}
.vz-radar{position:relative;height:clamp(400px,38vw,460px)}
.vz-scene{position:absolute;inset:0}
.vz-cer{position:absolute;left:50%;top:50%;width:calc(var(--rx) * 2);height:calc(var(--ry) * 2);transform:translate(-50%,-50%);border:1.2px solid rgba(255,138,128,.5);border-radius:50%;transition:transform 1.5s var(--vz-ease),opacity 1s ease}
.vz-c1{--rx:23%;--ry:23%;opacity:.8}
.vz-c2{--rx:33%;--ry:32%;opacity:.5}
.vz-c3{--rx:43%;--ry:38%;opacity:.8}
.vz-c4{--rx:49.5%;--ry:47%;opacity:.35}
.vz-zh .vz-cer{transform:translate(-50%,-50%) scale(.15);opacity:0}
.vz-zgo .vz-c1{transition-delay:.15s}.vz-zgo .vz-c2{transition-delay:.35s}.vz-zgo .vz-c3{transition-delay:.55s}.vz-zgo .vz-c4{transition-delay:.75s}

@property --vz-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes vz-tourne{to{--vz-ang:360deg}}
.vz-balai{position:absolute;inset:2%;pointer-events:none;
  background:conic-gradient(from var(--vz-ang) at 50% 50%,rgba(255,138,128,0) 0deg,rgba(255,138,128,0) 300deg,rgba(255,138,128,.2) 360deg);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,transparent 0,#000 12%,#000 96%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,transparent 0,#000 12%,#000 96%,transparent 100%);
  animation:vz-tourne 7s linear infinite;transition:opacity 1s ease 1.2s}
.vz-zh .vz-balai{opacity:0}
.vz-pausee .vz-balai,.vz-pausee .vz-centre b::before,.vz-pausee .vz-centre b::after{animation-play-state:paused}

.vz-rayons{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
.vz-rayons line{stroke:rgba(255,138,128,.26);stroke-width:1;stroke-dasharray:3 5;transition:stroke .25s,stroke-width .25s,opacity .6s ease}
.vz-rayons line.vz-vive{stroke:var(--vz-clair);stroke-width:1.6;stroke-dasharray:none}
.vz-zh .vz-rayons line{opacity:0}
.vz-zgo .vz-rayons line{transition-delay:0s,0s,1.3s}

.vz-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:1rem;line-height:1.2;color:#fff;text-align:center;white-space:nowrap;
  transition:opacity .6s ease .9s,transform .8s var(--vz-spring) .9s}
.vz-zh .vz-centre{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.vz-centre b{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--rouge);color:#fff;box-shadow:0 0 0 8px rgba(196,39,39,.3)}
.vz-centre b::before,.vz-centre b::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--vz-clair);opacity:0;animation:vz-anneau 3.2s ease-out infinite}
.vz-centre b::after{animation-delay:1.6s}
.vz-centre svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.vz-pastilles{position:absolute;inset:0;pointer-events:none}
.vz-pastilles li{position:absolute;transform:translate(-50%,-50%);z-index:2}
.vz-ville{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:40px;background:rgba(23,23,23,.86);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:.95rem;font-weight:600;line-height:1.2;white-space:nowrap;
  transition:background-color .3s,color .3s,transform .45s var(--vz-spring),border-color .3s,opacity .5s ease}
.vz-ville::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--vz-clair);transition:background-color .3s}
.vz-ville:hover,.vz-ville:focus-visible{background:var(--vz-clair);border-color:var(--vz-clair);color:#171717;transform:translateY(-3px) scale(1.07)}
.vz-ville:hover::before,.vz-ville:focus-visible::before{background:#171717}
.vz-ville:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vz-zh .vz-ville{opacity:0;transform:translateY(14px) scale(.85)}
.vz-zgo .vz-ville{transition-delay:0s,0s,calc(var(--i,0) * 80ms + 1.1s),0s,calc(var(--i,0) * 80ms + 1.1s)}
.vz-zone .actions{margin-top:24px;display:flex;justify-content:center}

/* ======================================================================
   7. FAQ : accordéon animé + cascade
   ====================================================================== */
.vz-faq-on details .faq-rep{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows .45s var(--vz-ease)}
.vz-faq-on details.vz-ouvert .faq-rep{grid-template-rows:1fr}
.vz-faq-in{min-height:0;overflow:hidden}
.vz-faq-in p{padding:0 40px 24px 0}
.vz-faq-on details:not(.vz-ouvert) summary::after{transform:none;background:linear-gradient(var(--noir),var(--noir)) center/100% 2px no-repeat,linear-gradient(var(--noir),var(--noir)) center/2px 100% no-repeat}
.vz-faq-on details.vz-ouvert summary::after{transform:rotate(45deg);background:linear-gradient(var(--rouge),var(--rouge)) center/100% 2px no-repeat,linear-gradient(var(--rouge),var(--rouge)) center/2px 100% no-repeat}
.vz-faq-on details.vz-ouvert summary{color:var(--rouge)}
.vz-faq-liste details.vz-pre{transform:translateY(24px)}
.vz-faq-liste details.vz-go{animation:vz-monte .6s var(--vz-ease) backwards;animation-delay:var(--d,0ms)}
.vz-page .faq-cote p{margin:14px 0 22px}

/* ======================================================================
   8. Appel final : lien mail sobre
   ====================================================================== */
.vz-page .cta-mail a{font-weight:600}

/* ================= Tablette ================= */
@media (max-width:1100px){
  .vz-liens{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 3 colonnes d'étapes sur deux rangées : pas de trait continu */
  .vz-frise-on::after{content:none}
}

/* Radar : sous 900 px, disque compact + pastilles en liste */
@media (max-width:900px){
  .vz-radar{height:auto;display:flex;flex-direction:column;align-items:center;gap:26px}
  .vz-scene{position:relative;inset:auto;width:min(100%,300px);aspect-ratio:1}
  .vz-c1{--rx:20%;--ry:20%}.vz-c2{--rx:32%;--ry:32%}.vz-c3{--rx:43%;--ry:43%}.vz-c4{--rx:50%;--ry:50%}
  .vz-balai{inset:0}
  .vz-rayons{display:none}
  .vz-centre{font-size:.95rem}
  .vz-pastilles{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;pointer-events:auto}
  .vz-pastilles li{position:static;transform:none}
  .vz-ville{padding:10px 16px}
}

/* ================= Téléphone ================= */
@media (max-width:680px){
  .vz-page .vz-pastilles-hero{padding-bottom:30px;gap:8px}
  .vz-page .vz-pastilles-hero li,.vz-page .vz-pastilles-hero li + li{font-size:.92rem;padding:7px 14px 7px 8px}
  .vz-fil{width:72px;margin-bottom:20px}
  .vz-cartes{grid-template-columns:minmax(0,1fr)}
  .vz-liens{grid-template-columns:minmax(0,1fr);gap:14px}
  .vz-lc{padding:22px 20px 20px}
  .vz-frise-on::after{content:"";left:23px;right:auto;top:0;bottom:60px;width:2px;height:auto;transform-origin:center top;transform:scaleY(var(--vz-p,0))}
  .vz-faq-in p{padding-right:0}
  .vz-scene{width:min(100%,260px)}
}

/* ================= Mouvement réduit : tout est coupé ================= */
@media (prefers-reduced-motion:reduce){
  .vz-w > i,.vz-page .hero-photo img,.vz-page .hero-contenu > *,.vz-page .vz-pastilles-hero li,.vz-go,.vz-go .vz-ic,.vz-go .vz-ic .ico,
  .vz-faq-liste details.vz-go,.vz-frise .etape.vz-lit .etape-num,.vz-frise-on .etape.vz-lit .etape-num::after,
  .vz-balai,.vz-centre b::before,.vz-centre b::after{animation:none!important}
  .vz-pre{opacity:1!important}
  .vz-dust{display:none!important}
  .vz-carte,.vz-lc,.vz-lc-f,.vz-ic,.vz-ville,.vz-cer,.vz-centre,.vz-rayons line{transition:none!important}
  .vz-frise-on::after{transition:none}
  .vz-faq-on details .faq-rep{transition:none}
}