/* Vide Maison Carolo — pages de service (préfixe vs-) :
   vide-maison-grenier, entretien-int-ext, demenagement, rachat.
   À charger APRÈS site.css. Mécanismes repris de Com'in Clean (services-anim, relief3d) et Nemelec (services) :
   titre mot par mot + trait tracé, pastilles qui s'animent, 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é.
   Les états « cachés » (vs-pre, vs-frise-on, vs-faq-on) ne sont posés que par services.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. */

.vs-page{--vs-ease:cubic-bezier(.2,.8,.2,1);--vs-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- Mots-clés d'animation ---------- */
@keyframes vs-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vs-mot{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vs-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vs-pop{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
@keyframes vs-respire{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes vs-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 vs-tuile-in{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes vs-trace-ico{0%{stroke-dasharray:1;stroke-dashoffset:1}99%{stroke-dasharray:1;stroke-dashoffset:0}100%{stroke-dasharray:none;stroke-dashoffset:0}}
@keyframes vs-rebond{0%{transform:scale(.4)}55%{transform:scale(1.18)}78%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes vs-anneau{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
@keyframes vs-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
   ====================================================================== */
.vs-page .hero-contenu > *{animation:none}
.vs-page .hero-contenu > .fil{animation:vs-monte .7s var(--vs-ease) both}
.vs-page .hero-contenu > .hero-sous{animation:vs-monte .8s var(--vs-ease) 1.05s both}
.vs-page .hero-contenu > .hero-actions{animation:vs-monte .8s var(--vs-ease) 1.2s both}
.vs-page .hero h1{margin-bottom:18px}
.vs-w{display:inline-block}
.vs-w > i{display:inline-block;font-style:normal;animation:vs-mot .85s var(--vs-ease) both;animation-delay:calc(var(--i,0) * 85ms + .25s)}
/* point final du titre collé au dernier mot (jamais seul à la ligne) */
.vs-page .hero h1.sq::after{content:none}
.vs-page .hero h1 .vs-w:last-child > i::after{content:".";color:var(--rouge-clair,#ff6b66)}
.vs-fil{display:block;width:92px;height:5px;margin:0 0 26px;background:var(--rouge-logo);transform-origin:left center;animation:vs-trace 1s var(--vs-ease) .95s both}
.vs-page .hero-photo img{animation:vs-respire 10s var(--vs-ease) both;transform-origin:70% 50%}
.vs-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) */
.vs-page .vs-pastilles{display:flex;flex-wrap:wrap;gap:10px;border:0;background:none;padding:0 0 40px}
.vs-page .vs-pastilles li,.vs-page .vs-pastilles 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:vs-pop .7s var(--vs-spring) backwards;animation-delay:calc(1.45s + var(--i,0) * 130ms);transition:background-color .25s,border-color .25s,transform .35s var(--vs-spring)}
.vs-page .vs-pastilles li:hover{background:rgba(0,0,0,.72);border-color:#fff;transform:translateY(-3px)}
.vs-page .vs-pastilles .ico{width:24px;height:24px;padding:4px;margin:0;border-radius:50%;background:var(--rouge);color:#fff;stroke-width:3}

/* ======================================================================
   2. CARTES « CE QUI EST INCLUS » EN RELIEF
   ====================================================================== */
.vs-lead{margin-top:16px;font-size:1.12rem;color:var(--gris);max-width:40ch}
.vs-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;perspective:1100px}
.vs-cartes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-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(--vs-ease),box-shadow .35s,border-color .3s}
.vs-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)}
.vs-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(--vs-spring)}
.vs-ic .ico{width:26px;height:26px;stroke-width:1.9}
.vs-carte:hover .vs-ic,.vs-tuile:hover .vs-ic,.vs-lc:hover .vs-ic{background:var(--rouge)}
.vs-carte:hover .vs-ic .ico,.vs-tuile:hover .vs-ic .ico{animation:vs-secoue .6s ease-out 1}
.vs-tilting{transition:transform .08s linear,box-shadow .3s,border-color .3s!important}

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

.vs-carte-non{border-style:dashed;border-bottom-color:var(--gris);background:transparent;box-shadow:none;color:var(--gris)}
.vs-carte-non .vs-ic{background:var(--gris)}
.vs-carte-non:hover{box-shadow:none}

/* ======================================================================
   3. ENCADRÉ « SUR DEMANDE »
   ====================================================================== */
.vs-demande{position:relative;margin-top:44px;padding:40px 32px 32px;background:#fff;border:2px dashed var(--rouge);border-radius:var(--rayon)}
.vs-demande-etiq{position:absolute;top:-17px;left:26px;display:inline-block;padding:7px 16px;background:var(--rouge);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;border-radius:2px}
.vs-demande-etiq::after{content:"";position:absolute;inset:-2px;border:2px solid var(--rouge);border-radius:4px;pointer-events:none;animation:vs-anneau 2.8s ease-out 1.2s infinite}
.vs-demande .vs-mini-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vs-mini{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px;background:var(--creme);border-radius:var(--rayon);font-weight:600;line-height:1.35;color:var(--noir);transition:transform .45s var(--vs-ease),box-shadow .3s}
.vs-mini .vs-ic{width:46px;height:46px;background:var(--rouge)}
.vs-mini:hover{box-shadow:0 18px 30px -22px rgba(0,0,0,.5)}
.vs-demande-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--ligne)}
.vs-demande-pied p{font-weight:600;color:var(--noir)}
.vs-demande-compact{margin-top:28px;padding:34px 24px 22px}
.vs-demande-compact p{color:var(--texte);font-weight:600;line-height:1.5}

/* petites pastilles (nettoyage, protections, lift…) */
.vs-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.vs-chips li{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border:1.5px solid var(--noir);border-radius:999px;font-weight:600;font-size:.97rem;color:var(--noir);background:#fff;transition:transform .35s var(--vs-spring),background-color .25s,color .25s,border-color .25s}
.vs-chips li:hover{transform:translateY(-3px);background:var(--noir);color:#fff}
.vs-chips .ico{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--rouge);color:#fff;stroke-width:2.6}
.vs-chips .vs-non .ico{background:var(--noir)}
.vs-chips .vs-non{border-style:dashed;border-color:var(--gris)}
.sombre .vs-chips li{background:transparent;color:#fff;border-color:#fff}

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

/* ======================================================================
   5. TUILES D'ICÔNES (rachat) — toute la liste en mots courts
   ====================================================================== */
.vs-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vs-tuile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px 20px;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);
  transition:transform .45s var(--vs-ease),box-shadow .35s,border-color .3s}
.vs-tuile:hover{box-shadow:0 26px 40px -24px rgba(0,0,0,.6)}
.vs-tuile .vs-ic{width:58px;height:58px}
.vs-tuile .vs-ic .ico{width:30px;height:30px}
.vs-tuile b{display:block;font-size:1.08rem;line-height:1.2;color:var(--noir)}
.vs-tuile small{display:block;margin-top:4px;font-size:.92rem;line-height:1.35;color:var(--gris)}
.vs-tuile-cta{justify-content:center;background:var(--rouge);border-color:var(--rouge);border-bottom-color:var(--noir);color:#fff}
.vs-tuile-cta .vs-ic{background:#fff;color:var(--rouge)}
.vs-tuile-cta:hover .vs-ic{background:#fff}
.vs-tuile-cta b,.vs-tuile-cta small{color:#fff}
.vs-tuile-cta a::after{content:"";position:absolute;inset:0}
.vs-tuile{position:relative}
.vs-tuile-cta:focus-within{outline:3px solid var(--noir);outline-offset:3px}

/* ======================================================================
   6. CARTES : situations, objets, bandeau des lieux (relief au survol)
   ====================================================================== */
.vs-page .situation,.vs-page .trio-item{transform-style:preserve-3d;box-shadow:0 18px 30px -24px rgba(0,0,0,.5)}
.vs-page .situation > .ico,.vs-page .trio-item > .ico{transition:transform .4s var(--vs-spring)}
.vs-page .situation:hover > .ico,.vs-page .trio-item:hover > .ico{transform:scale(1.12) rotate(-6deg)}
.vs-page .situations{perspective:1100px}
.vs-page .trio{perspective:1100px}
.vs-page .situation h3{margin:0}
.vs-page .sombre .trio-item{box-shadow:0 18px 30px -22px rgba(0,0,0,.8)}
.vs-page .trio-item .ico{width:1em;height:1em}
/* accent lisible sur fond sombre (≥ 4,5:1) */
.vs-page .sombre .trio-item > .ico{color:var(--rouge-clair,#ff6b66)}
.vs-page .sombre .sq::after,.vs-page .bandeau-appel .q{color:var(--rouge-clair,#ff6b66)}

/* ======================================================================
   7. LIENS CROISÉS ENTRE SERVICES (cartes)
   ====================================================================== */
.vs-liens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1100px}
.vs-lc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 26px 24px;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(--vs-ease),box-shadow .35s,border-color .3s}
.vs-lc:hover,.vs-lc:focus-visible{border-bottom-color:var(--rouge);box-shadow:0 26px 40px -24px rgba(0,0,0,.6)}
.vs-lc .vs-ic{margin-bottom:6px}
.vs-lc-t{font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--noir)}
.vs-lc-p{color:var(--gris);font-size:.98rem;line-height:1.5}
.vs-lc-f{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-top:10px;border-radius:50%;background:var(--noir);color:#fff;transition:background-color .25s,transform .4s var(--vs-spring)}
.vs-lc-f .ico{width:20px;height:20px;stroke-width:2.2}
.vs-lc:hover .vs-lc-f,.vs-lc:focus-visible .vs-lc-f{background:var(--rouge);transform:translateX(8px)}

/* ======================================================================
   8. ZONES (pastilles de communes) et bandeau des lieux
   ====================================================================== */
.vs-page .zones a{transition:border-color .2s,color .2s,transform .35s var(--vs-spring),background-color .2s}
.vs-page .zones a:hover{background:var(--creme);transform:translateY(-3px)}
.vs-page .zones-groupe h3{margin-bottom:12px}

/* ======================================================================
   9. FAQ : accordéon animé + cascade
   ====================================================================== */
.vs-faq-on details .faq-rep{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows .45s var(--vs-ease)}
.vs-faq-on details.vs-ouvert .faq-rep{grid-template-rows:1fr}
.vs-faq-in{min-height:0;overflow:hidden}
.vs-faq-in p{padding:0 40px 24px 0}
.vs-faq-on details:not(.vs-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}
.vs-faq-on details.vs-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}
.vs-faq-on details.vs-ouvert summary{color:var(--rouge)}
.vs-faq-liste details.vs-pre{transform:translateY(24px)}
.vs-faq-liste details.vs-go{animation:vs-monte .6s var(--vs-ease) backwards;animation-delay:var(--d,0ms)}

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

/* ================= Tablette ================= */
@media (max-width:1100px){
  .vs-cartes-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vs-demande .vs-mini-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-liens{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 3 colonnes d'étapes sur deux rangées : pas de trait continu */
  .vs-frise-on::after{content:none}
}
@media (max-width:900px){
  .vs-liens{grid-template-columns:minmax(0,1fr)}
  .vs-lc-f{margin-top:6px}
}

/* ================= Téléphone ================= */
@media (max-width:680px){
  .vs-page .vs-pastilles{padding-bottom:30px;gap:8px}
  .vs-page .vs-pastilles li,.vs-page .vs-pastilles li + li{font-size:.92rem;padding:7px 14px 7px 8px}
  .vs-fil{width:72px;margin-bottom:20px}
  .vs-cartes,.vs-cartes-3{grid-template-columns:minmax(0,1fr)}
  .vs-tuiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vs-tuile{padding:16px 14px 14px;gap:10px}
  .vs-tuile .vs-ic{width:48px;height:48px}
  .vs-tuile .vs-ic .ico{width:26px;height:26px}
  .vs-tuile b{font-size:1rem}
  .vs-tuile small{font-size:.86rem}
  .vs-demande{padding:34px 18px 22px}
  .vs-demande .vs-mini-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vs-mini{padding:14px 12px;font-size:.94rem}
  .vs-demande-pied .btn{width:100%}
  .vs-chips li{font-size:.92rem}
  .vs-frise-on::after{content:"";left:23px;right:auto;top:0;bottom:60px;width:2px;height:auto;transform-origin:center top;transform:scaleY(var(--vs-p,0))}
  .vs-faq-in p{padding-right:0}
}
@media (max-width:360px){
  .vs-tuiles{grid-template-columns:minmax(0,1fr)}
}

/* ================= Mouvement réduit : tout est coupé ================= */
@media (prefers-reduced-motion:reduce){
  .vs-w > i,.vs-fil,.vs-page .hero-photo img,.vs-page .hero-contenu > *,.vs-page .vs-pastilles li,.vs-go,.vs-go .vs-ic,.vs-go .vs-ic .ico,
  .vs-faq-liste details.vs-go,.vs-demande-etiq::after,.vs-frise .etape.vs-lit .etape-num,.vs-frise-on .etape.vs-lit .etape-num::after{animation:none!important}
  .vs-pre{opacity:1!important}
  .vs-dust{display:none!important}
  .vs-carte,.vs-tuile,.vs-lc,.vs-mini,.vs-chips li,.vs-lc-f,.vs-ic{transition:none!important}
  .vs-frise-on::after{transition:none}
  .vs-faq-on details .faq-rep{transition:none}
}