/* Vide Maison Carolo V3 — accueil sous le hero (préfixe va-). Chargé APRÈS site.css, accueil seulement.
   Mécanismes repris de Com'in Clean / Nemelec : relief3d (cartes inclinables), apparitions variées,
   frise qui se remplit au défilement, bande « Pourquoi nous choisir » (trame, halos, cartes verre),
   zone en radar. Les états « cachés » (.va-h, .va-pre, .va-zh…) ne sont posés que par accueil.js : sans JS
   tout reste visible. Transform / opacity / filter uniquement. Aucun reflet qui balaie une photo.
   Le hero et les lignes d'intro (vi-) ne sont PAS ici. */

:root{
  --va-ease:cubic-bezier(.2,.8,.2,1);
  --va-spring:cubic-bezier(.34,1.56,.64,1);
  --va-clair:#ff8a80;          /* accent éclairci pour fond sombre : 7,1:1 sur #202020 */
  --va-nuit:#171717;
}

/* ================= 1. Apparitions variées ================= */
.va-h{opacity:0}
.va-h-haut{transform:translateY(40px)}
.va-h-gauche{transform:translateX(-60px)}
.va-h-droite{transform:translateX(60px)}
.va-h-zoom{transform:scale(.88)}
.va-h-pivot{transform:perspective(1000px) rotateY(-24deg) rotateX(8deg) translateY(46px) scale(.94)}
.va-h-flou{transform:translateY(22px);filter:blur(8px)}
.va-in{opacity:1;transform:none;filter:none;
  transition:opacity .8s ease var(--va-d,0ms),transform 1s var(--va-ease) var(--va-d,0ms),filter .8s ease var(--va-d,0ms)}

/* titres de section : trait rouge qui se trace */
.va-tete{max-width:52rem;margin-bottom:44px}
.va-tete > p:not(.sur-titre):not(.va-eyebrow){margin-top:16px;color:var(--gris);font-size:1.1rem}
.va-barre{display:block;width:72px;height:4px;margin-top:18px;background:var(--rouge);transform-origin:left}
.va-tete.va-in .va-barre,.va-faq-cote.va-in .va-barre{animation:vaTrait .9s var(--va-ease) .4s both}
@keyframes vaTrait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.va-tete-centre{margin-left:auto;margin-right:auto;text-align:center}
.va-tete-centre .va-barre{margin-left:auto;margin-right:auto;transform-origin:center}
.va-eyebrow{display:block;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;margin-bottom:14px;color:var(--va-clair)}
.va-eyebrow::before{content:"";display:inline-block;width:.7em;height:.7em;background:var(--rouge);margin-right:.6em;vertical-align:-.02em}
.va-tete-clair .va-barre{background:var(--va-clair)}

/* ================= 2. Situations ================= */
.va-situations{position:relative;overflow:hidden}
.va-sits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;perspective:1100px}
.va-sit-w{display:flex}
.va-sit{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;padding:28px 24px 26px;background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);text-decoration:none;color:inherit;transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--va-ease),box-shadow .4s,border-color .3s}
.va-sit::before{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:4px;background:var(--rouge);border-radius:0 0 var(--rayon) var(--rayon);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--va-ease)}
.va-sit:hover,.va-sit:focus-visible{border-color:var(--noir);box-shadow:0 26px 46px -28px rgba(0,0,0,.45)}
.va-sit:hover::before,.va-sit:focus-visible::before{transform:scaleX(1)}
.va-sit.va-on{transition:transform .08s linear,box-shadow .3s,border-color .3s}
.va-sit h3{color:var(--noir);transform:translateZ(0);transition:transform .5s var(--va-ease)}
.va-sit p{color:var(--gris);font-size:1rem;line-height:1.5}
.va-sit-ic{position:relative;width:68px;height:68px;border-radius:50%;background:var(--creme);color:var(--noir);display:grid;place-items:center;transition:background .35s,color .35s,transform .5s var(--va-spring);transform:translateZ(0)}
.va-sit-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--rouge);opacity:0;transform:scale(.8)}
.va-sit:hover .va-sit-ic,.va-sit:focus-visible .va-sit-ic{background:var(--rouge);color:#fff;transform:translateZ(36px) scale(1.06)}
.va-sit:hover .va-sit-ic::after{animation:vaOnde 1.4s ease-out infinite}
@keyframes vaOnde{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.va-ic{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.va-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-weight:700;font-size:.95rem;color:var(--rouge);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .45s var(--va-ease)}
.va-fl{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.va-sit:hover .va-go,.va-sit:focus-visible .va-go{opacity:1;transform:none}
.va-sit:focus-visible{outline:3px solid var(--noir);outline-offset:3px}

/* icônes : le trait se dessine à l'apparition, puis un petit mouvement permanent */
.va-pre .va-ic *,.va-pre .va-ring circle,.va-h .va-ic *{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.va-in .va-ic *,.va-go-ok .va-ic *{stroke-dasharray:1;stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset 1.1s ease calc(.35s + var(--i,0)*.12s),opacity 0s calc(.35s + var(--i,0)*.12s)}
.va-flamme{transform-box:fill-box;transform-origin:50% 90%}
.va-in .va-flamme{animation:vaFlamme 2.6s ease-in-out 1.6s infinite}
@keyframes vaFlamme{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.94,1.07) skewX(-4deg)}65%{transform:scale(1.04,.96) skewX(3deg)}}
.va-in .va-mg{animation:vaGauche 3.4s ease-in-out 1.6s infinite}
.va-in .va-md{animation:vaDroite 3.4s ease-in-out 1.6s infinite}
@keyframes vaGauche{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.6px)}}
@keyframes vaDroite{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
.va-etiq{transform-box:fill-box;transform-origin:20% 15%}
.va-in .va-etiq{animation:vaBalance 3.2s ease-in-out 1.6s infinite}
@keyframes vaBalance{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}65%{transform:rotate(5deg)}}
.va-in .va-ic-doc svg{animation:vaFlotte 3.6s ease-in-out 1.6s infinite}
@keyframes vaFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* bandeau d'appel */
.va-appel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 28px;align-items:center;margin-top:28px;padding:26px 30px;background:var(--noir);color:#fff;border-radius:var(--rayon);overflow:hidden}
.va-appel::before{content:"";position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(196,39,39,.5),transparent 68%);pointer-events:none;animation:vaDerive 14s ease-in-out infinite alternate}
.va-appel > *{position:relative}
.va-appel p{color:var(--gris-clair);margin-top:4px}
.va-appel .h-m{color:#fff}
.va-appel .q{color:var(--va-clair)}
.va-appel-ic{position:relative;width:56px;height:56px;border-radius:50%;background:var(--rouge);display:grid;place-items:center;font-size:26px}
.va-appel-ic::before,.va-appel-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--va-clair);animation:vaOnde 2.6s ease-out infinite}
.va-appel-ic::after{animation-delay:1.3s}
.va-appel-ic .ico{animation:vaSonne 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes vaSonne{0%,60%,100%{transform:rotate(0)}6%{transform:rotate(-14deg)}12%{transform:rotate(12deg)}18%{transform:rotate(-10deg)}24%{transform:rotate(8deg)}30%{transform:rotate(0)}}
@keyframes vaDerive{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,40px,0)}}

/* ================= 3. Services ================= */
.va-w{display:flex;flex-direction:column}
.va-w > article{flex:1}
.va-svc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;transition:box-shadow .45s,border-color .3s,transform .5s var(--va-ease)}
.va-svc:hover,.va-svc:focus-within{border-color:var(--noir);box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
.va-ph{position:relative;overflow:hidden;background:var(--noir)}
.va-r43{aspect-ratio:4/3}
.va-r169{aspect-ratio:16/9}
.va-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.1s var(--va-ease)}
.va-svc:hover .va-ph img,.va-svc:focus-within .va-ph img,.va-cons:hover .va-ph img,.va-cons:focus-within .va-ph img{transform:scale(1.07)}
.va-svc-corps{display:flex;flex-direction:column;gap:14px;padding:26px 28px 30px;flex:1}
.va-svc-corps > p{color:var(--gris)}
.va-svc .va-ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.va-num{position:absolute;left:16px;bottom:16px;z-index:1;padding:4px 11px 3px;background:var(--rouge);color:#fff;font-family:var(--titre);font-size:1.35rem;line-height:1.2;letter-spacing:.04em;transition:transform .5s var(--va-spring),background .3s}
.va-svc:hover .va-num{transform:translateY(-6px);background:var(--noir)}
.va-etire{text-decoration:none;color:inherit}
.va-etire::after{content:"";position:absolute;inset:0;z-index:2}
.va-etire:focus-visible{outline:none}
.va-svc:has(.va-etire:focus-visible),.va-cons:has(.va-etire:focus-visible){outline:3px solid var(--noir);outline-offset:3px}
.va-chips{display:flex;flex-wrap:wrap;gap:8px}
.va-chip{padding:6px 13px;border:1.5px solid var(--ligne);border-radius:99px;background:var(--creme);font-size:.86rem;font-weight:600;line-height:1.3;color:var(--noir);transition:transform .4s var(--va-spring),background .3s,border-color .3s,color .3s;transition-delay:calc(var(--i,0)*45ms)}
.va-svc:hover .va-chip{transform:translateY(-4px);border-color:var(--noir)}
.va-in .va-chip{animation:vaPop .55s var(--va-spring) calc(.55s + var(--i,0)*80ms) backwards}
@keyframes vaPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.va-go-lbl{margin-top:auto;opacity:.0}
.va-svc:hover .va-go-lbl,.va-svc:focus-within .va-go-lbl,.va-cons:hover .va-go-lbl,.va-cons:focus-within .va-go-lbl{opacity:1;transform:none}
.va-svc-grand{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.va-svc-grand .va-ph{min-height:100%}
.va-svc-grand .va-ph::before{content:"";display:block;padding-top:68%}
.va-svc-grand .va-svc-corps{padding:40px 44px 40px;justify-content:center}
.va-svc-grand .va-num{font-size:1.7rem;left:22px;bottom:22px}
.va-svc-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.va-svc-trio .va-svc{height:100%}

/* ================= 4. Bande des lieux : défilement continu ================= */
.va-lieux{position:relative;background:var(--noir);color:#fff;padding:30px 0;overflow:hidden;display:grid;gap:6px}
.va-lieux::before,.va-lieux::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.va-lieux::before{left:0;background:linear-gradient(90deg,var(--noir),transparent)}
.va-lieux::after{right:0;background:linear-gradient(270deg,var(--noir),transparent)}
.va-ruban{display:flex;width:max-content;animation:vaDefile 46s linear infinite}
.va-ruban ul{display:flex;flex:none}
.va-ruban li{display:flex;align-items:center;font-family:var(--titre);text-transform:uppercase;letter-spacing:.03em;line-height:1.15;font-size:clamp(1.7rem,3.6vw,3rem);white-space:nowrap}
.va-ruban li::after{content:"";width:.26em;height:.26em;background:var(--rouge);margin:0 clamp(18px,2.6vw,38px);flex:none;animation:vaTourne 6s linear infinite}
.va-ruban-2{animation-duration:62s;animation-direction:reverse}
.va-ruban-2 li{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.42);font-size:clamp(1.2rem,2.4vw,2rem)}
.va-lieux:hover .va-ruban{animation-play-state:paused}
@keyframes vaDefile{to{transform:translateX(-50%)}}
@keyframes vaTourne{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}

/* ================= 5. Objets : Racheté → Trié → Donné ================= */
.va-objets{background:#fff}
.va-trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:960px;margin:0 auto}
.va-trio::before,.va-trio::after{content:"";position:absolute;top:55px;left:16.67%;right:16.67%;height:4px;border-radius:4px}
.va-trio::before{background:var(--ligne)}
.va-trio::after{background:linear-gradient(90deg,var(--rouge),var(--rouge-fonce));transform-origin:left}
.va-ob{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.va-ob h3{color:var(--noir)}
.va-ob p{color:var(--gris);font-size:1rem;line-height:1.45;max-width:20ch}
.va-rond{position:relative;width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--noir);margin-bottom:6px}
.va-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--rouge);stroke-width:3;transform:rotate(-90deg)}
.va-ring circle{stroke-dasharray:1;stroke-dashoffset:0}
.va-ic-ob{width:48px;height:48px;stroke-width:1.6}
/* séquence : la ligne avance, chaque rond se dessine à son tour (déclenché par .va-go-ok) */
.va-trio.va-pre::after{transform:scaleX(0)}
.va-trio.va-go-ok::after{transform:scaleX(1);transition:transform 2.6s linear .3s}
.va-trio.va-pre .va-ob h3,.va-trio.va-pre .va-ob p{opacity:0;transform:translateY(14px)}
.va-trio.va-go-ok .va-ob h3,.va-trio.va-go-ok .va-ob p{opacity:1;transform:none;transition:opacity .6s ease calc(.5s + var(--i)*1.2s),transform .7s var(--va-ease) calc(.5s + var(--i)*1.2s)}
.va-trio.va-pre .va-rond{transform:scale(.6);opacity:0}
.va-trio.va-go-ok .va-rond{transform:none;opacity:1;transition:opacity .4s ease calc(.15s + var(--i)*1.2s),transform .8s var(--va-spring) calc(.15s + var(--i)*1.2s)}
.va-trio.va-go-ok .va-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease calc(.2s + var(--i)*1.2s);opacity:1}
.va-trio.va-go-ok .va-ic *{transition-delay:calc(.5s + var(--i)*1.2s)}
.va-trio.va-go-ok .va-coeur{transform-box:fill-box;transform-origin:50% 60%;animation:vaBat 1.6s ease-in-out 3.8s infinite}
@keyframes vaBat{0%,100%{transform:scale(1)}14%{transform:scale(1.12)}28%{transform:scale(1)}42%{transform:scale(1.08)}56%{transform:scale(1)}}

/* ================= 6. Frise « Comment ça se passe » ================= */
.va-deroule{overflow:hidden}
.va-frise{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.va-frise-piste{position:absolute;top:23px;left:10%;right:10%;height:4px;pointer-events:none}
.va-frise-fond,.va-frise-plein{position:absolute;inset:0;border-radius:4px}
.va-frise-fond{background:#dcd7cb}
.va-frise-plein{background:linear-gradient(90deg,var(--rouge-fonce),var(--rouge));transform-origin:left;transform:scaleX(1)}
.va-frise.va-live .va-frise-plein{transform:scaleX(var(--p,0))}
.va-et{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.va-et-n{position:relative;z-index:1;flex:none;width:50px;height:50px;border-radius:50%;background:var(--rouge);border:3px solid var(--rouge);display:grid;place-items:center;font-family:var(--titre);font-size:1.4rem;color:#fff;transition:background .4s,border-color .4s,color .4s,transform .6s var(--va-spring)}
.va-et-n b{font-weight:400;line-height:1}
.va-et-t h3{color:var(--noir)}
.va-et-t p{color:var(--gris);font-size:.98rem;line-height:1.5;margin-top:6px;max-width:19ch;margin-inline:auto}
.va-live .va-et .va-et-n{background:#fff;border-color:#cfc9bb;color:var(--gris)}
.va-live .va-et .va-et-t{opacity:.55;transform:translateY(8px);transition:opacity .5s ease,transform .6s var(--va-ease)}
.va-live .va-et.va-on .va-et-t{opacity:1;transform:none}
.va-live .va-et.va-on .va-et-n{background:var(--rouge);border-color:var(--rouge);color:#fff;transform:scale(1.12)}
.va-live .va-et.va-on .va-et-n::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--rouge);animation:vaOnde 1.6s ease-out 1 both}

/* ================= 7. Pourquoi nous choisir : bande sombre ================= */
.va-pourquoi{position:relative;overflow:hidden;isolation:isolate;background:var(--va-nuit);color:#f3f1ec;padding-bottom:84px}
.va-pourquoi::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 82% at 50% 42%,#000 12%,transparent 78%);mask-image:radial-gradient(ellipse 72% 82% at 50% 42%,#000 12%,transparent 78%)}
.va-pourquoi::after{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at 12% 20%,rgba(196,39,39,.5),transparent 70%),radial-gradient(620px circle at 88% 82%,rgba(224,18,20,.28),transparent 70%);
  animation:vaDrift 20s ease-in-out infinite alternate}
@keyframes vaDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
.va-pourquoi h2{color:#fff}
.va-carres{position:absolute;inset:0;z-index:-1;pointer-events:none}
.va-carres i{position:absolute;width:12px;height:12px;background:var(--rouge);opacity:.55;animation:vaMonte 16s linear infinite}
.va-carres i:nth-child(1){left:6%;bottom:-20px;animation-duration:19s}
.va-carres i:nth-child(2){left:24%;bottom:-20px;width:8px;height:8px;animation-duration:14s;animation-delay:-6s}
.va-carres i:nth-child(3){left:47%;bottom:-20px;animation-duration:22s;animation-delay:-11s}
.va-carres i:nth-child(4){left:69%;bottom:-20px;width:9px;height:9px;animation-duration:17s;animation-delay:-3s}
.va-carres i:nth-child(5){left:85%;bottom:-20px;animation-duration:21s;animation-delay:-14s}
.va-carres i:nth-child(6){left:96%;bottom:-20px;width:7px;height:7px;animation-duration:15s;animation-delay:-8s}
@keyframes vaMonte{from{transform:translateY(0) rotate(0)}to{transform:translateY(-110vh) rotate(180deg)}}
.va-pq-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1100px}
.va-pq-w{display:flex}
.va-pq{position:relative;overflow:hidden;width:100%;display:flex;flex-direction:column;gap:12px;padding:28px 26px 28px;border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border:1px solid rgba(255,138,128,.26);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .5s var(--va-ease),background .3s,border-color .3s,box-shadow .3s}
.va-pq.va-on{transition:transform .08s linear,background .3s,border-color .3s,box-shadow .3s;box-shadow:0 30px 56px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.va-pq:hover{background:linear-gradient(160deg,rgba(255,138,128,.2),rgba(255,255,255,.05));border-color:rgba(255,138,128,.65)}
.va-fil{position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--rouge),var(--va-clair),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--va-ease) .5s}
.va-pq-w.va-in .va-fil{transform:scaleX(1)}
.va-pq-ic{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--rouge),#8f1b1b);box-shadow:0 0 0 6px rgba(255,138,128,.14),0 10px 24px -8px rgba(196,39,39,.8);transition:transform .5s var(--va-spring)}
.va-pq-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--va-clair);pointer-events:none;animation:vaOnde 2.8s ease-out infinite;animation-delay:calc(var(--i,0)*.5s)}
.va-pq-ic .va-ic{width:28px;height:28px;stroke-width:1.9}
.va-pq-w.va-in .va-pq-ic{animation:vaPop .8s var(--va-spring) .45s backwards}
.va-pq:hover .va-pq-ic{transform:scale(1.12) rotate(-8deg)}
.va-pq h3{font-family:var(--corps);font-weight:700;font-size:1.2rem;line-height:1.25;color:#fff}
.va-pq p{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.5}
.va-pq-w.va-in .va-pq-ic .va-ic *{stroke-dasharray:1;stroke-dashoffset:0}
.va-pausee::before,.va-pausee::after,.va-pausee .va-carres i,.va-pausee .va-pq-ic::after{animation-play-state:paused}

/* notaires : bandeau verre sous les cartes */
.va-pros{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 30px;align-items:center;margin-top:36px;padding:18px 26px 18px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}
.va-pros-ph{position:relative;overflow:hidden;width:190px;aspect-ratio:3/2;border-radius:var(--rayon);background:var(--noir)}
.va-pros-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--va-ease)}
.va-pros:hover .va-pros-ph img{transform:scale(1.07)}
.va-pros-t h3{color:#fff}
.va-pros-t p{margin-top:6px;color:rgba(255,255,255,.86)}

/* ================= 8. Confiance : Dylan ================= */
.va-confiance{background:#fff;overflow:hidden}
.va-conf-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.va-conf-t h2{margin-bottom:6px}
.va-ecrit .va-l{display:inline-block;opacity:0;transform:translateY(.35em);animation:vaLettre .45s var(--va-ease) calc(var(--k,0)*38ms + .2s) forwards}
.va-ecrit .va-m{display:inline-block;white-space:nowrap}
@keyframes vaLettre{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.va-ecrit.va-pre .va-l{animation:none}
.va-ecrit.va-att.sq::after{opacity:0}
.va-ecrit.sq::after{transition:opacity .2s}
.va-ecrit.va-fini.sq::after{animation:vaCarre .5s var(--va-spring) both}
@keyframes vaCarre{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.va-conf-photo{position:relative;max-width:380px;width:calc(100% - 14px);justify-self:center}
.va-conf-cadre{position:relative;z-index:1;overflow:hidden;border:1px solid var(--ligne);border-radius:var(--rayon);background:#fff;box-shadow:14px 14px 0 var(--rouge);transition:box-shadow 1s var(--va-ease) 1s}
.va-conf-cadre img{width:100%;height:auto;transform:scale(1);transition:transform 1.6s var(--va-ease)}
.va-conf-cadre::after{content:"";position:absolute;inset:0;background:var(--noir);transform:scaleX(0);transform-origin:right;pointer-events:none}
.va-conf-photo figcaption{position:relative;z-index:1;margin-top:34px;border-top:4px solid var(--rouge);padding-top:12px;font-weight:600;color:var(--noir);font-size:.98rem;transform-origin:left}
.va-conf-photo figcaption span{display:block;font-weight:400;color:var(--gris);font-size:.9rem}
/* mise en scène : un volet noir se retire, la photo se pose */
.va-conf-photo.va-pre .va-conf-cadre{box-shadow:0 0 0 var(--rouge)}
.va-conf-photo.va-pre .va-conf-cadre::after{transform:scaleX(1)}
.va-conf-photo.va-pre .va-conf-cadre img{transform:scale(1.28)}
.va-conf-photo.va-pre figcaption{opacity:0;transform:translateY(12px)}
.va-conf-photo.va-go-ok .va-conf-cadre::after{transform:scaleX(0);transition:transform 1.15s var(--va-ease) .1s}
.va-conf-photo.va-go-ok .va-conf-cadre img{transform:scale(1);transition:transform 1.8s var(--va-ease) .1s}
.va-conf-photo.va-go-ok figcaption{opacity:1;transform:none;transition:opacity .7s ease 1.1s,transform .8s var(--va-ease) 1.1s}

/* ================= 9. Zones en radar ================= */
.va-zone{position:relative;overflow:hidden;isolation:isolate;background:var(--va-nuit);color:#fff}
.va-zone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at 18% 60%,rgba(196,39,39,.38),transparent 70%),radial-gradient(520px circle at 92% 8%,rgba(224,18,20,.16),transparent 70%)}
.va-zone h2{color:#fff}
.va-zone-grille{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:center}
.va-radar{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto}
.va-radar > svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.va-cer{fill:none;stroke:var(--va-clair);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--va-ease)}
.va-c1{transition-delay:.2s}
.va-c2{transition-delay:.5s;opacity:.75}
.va-c3{transition-delay:.8s;opacity:.55}
.va-zh .va-cer{stroke-dashoffset:1}
.va-bal{fill:none;stroke:var(--va-clair);stroke-width:1.1;transform-box:fill-box;transform-origin:center;opacity:0;animation:vaRadar 4.8s ease-out 1.8s infinite}
@keyframes vaRadar{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.74);opacity:0}}
.va-balai{position:absolute;inset:3%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,138,128,0) 0deg,rgba(255,138,128,0) 300deg,rgba(255,138,128,.2) 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0,#000 12%);mask-image:radial-gradient(circle,transparent 0,#000 12%);
  animation:vaTourneRadar 7s linear infinite}
@keyframes vaTourneRadar{to{transform:rotate(360deg)}}
.va-zh .va-balai{opacity:0}
.va-balai{transition:opacity 1s ease 1.4s}
.va-dot{transition:opacity .5s ease}
.va-dot-pt{fill:var(--va-clair);stroke:#171717;stroke-width:1.5}
.va-dot-ping{fill:none;stroke:var(--va-clair);stroke-width:1;opacity:0}
.va-dot-nom{font-family:var(--corps);font-weight:700;font-size:8.5px;fill:#fff;paint-order:stroke;stroke:#171717;stroke-width:3px;opacity:0;transition:opacity .25s;pointer-events:none}
.va-dot.va-vive .va-dot-pt{fill:#fff}
.va-dot.va-vive .va-dot-nom{opacity:1}
.va-dot.va-vive .va-dot-ping{animation:vaPing 1.1s ease-out infinite}
@keyframes vaPing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(2.6)}}
.va-dot-ping,.va-dot-pt{transform-box:fill-box;transform-origin:center}
.va-dot-pt{animation:vaBip 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.23s)}
@keyframes vaBip{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.va-zh .va-dot{opacity:0}
.va-zone.va-zgo .va-dot{transition:opacity .5s ease calc(var(--i,0)*80ms + 1.2s)}
.va-ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:.95rem;color:#fff;text-align:center;transition:opacity .6s ease 1.1s,transform .8s var(--va-spring) 1.1s}
.va-zh .va-ctr{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.va-ctr b{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--rouge);color:#fff;box-shadow:0 0 0 8px rgba(196,39,39,.3)}
.va-ctr svg,.va-ville svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.va-ctr svg{width:24px;height:24px}
.va-km{white-space:nowrap;position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);max-width:96%;text-align:center;font-size:.8rem;font-weight:700;line-height:1.3;color:#fff;background:#242424;border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:5px 12px;transition:opacity .6s ease 1.5s}
.va-zh .va-km{opacity:0}
.va-zone-liste h3{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:.88rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--va-clair)}
.va-zone-liste h3::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.va-villes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.va-ville{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:40px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:.95rem;font-weight:600;line-height:1.2;text-decoration:none;
  transition:background .3s,color .3s,transform .45s var(--va-spring),border-color .3s,opacity .5s ease}
.va-ville svg{width:15px;height:15px;flex:none;stroke:var(--va-clair);transition:stroke .3s}
.va-villes-loin .va-ville{border-style:dashed}
.va-ville:hover,.va-ville:focus-visible{background:var(--va-clair);border-color:var(--va-clair);color:#171717;transform:translateY(-4px) scale(1.06)}
.va-ville:hover svg,.va-ville:focus-visible svg{stroke:#171717}
.va-ville:focus-visible{outline:3px solid #fff;outline-offset:3px}
.va-zh .va-ville{opacity:0;transform:translateY(14px) scale(.9)}
.va-zone.va-zgo .va-ville{transition-delay:0s,0s,calc(var(--i,0)*70ms + 1.2s),0s,calc(var(--i,0)*70ms + 1.2s)}

/* ================= 10. FAQ animée ================= */
.va-faq-cote{position:sticky;top:calc(var(--entete) + 24px)}
.va-faq-cote .btn{margin-top:26px}
.va-q{border-bottom:1px solid #d6d1c6;position:relative}
.va-q:first-child{border-top:1px solid #d6d1c6}
.va-q::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--rouge);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--va-ease)}
.va-q[open]::before{transform:scaleY(1)}
.va-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 0 22px 14px;font-weight:700;font-size:1.1rem;line-height:1.35;color:var(--noir);transition:padding .4s var(--va-ease),color .3s}
.va-q summary::-webkit-details-marker{display:none}
.va-q summary::after{content:none}
.va-q summary:hover{color:var(--rouge)}
.va-q[open] summary{padding-left:22px}
.va-q-n{flex:none;min-width:2ch;font-family:var(--titre);font-weight:400;font-size:1.3rem;color:var(--gris-clair);-webkit-text-stroke:0;color:#9b968b;transition:color .3s}
.va-q[open] .va-q-n{color:var(--rouge)}
.va-q-t{flex:1}
.va-q-p{position:relative;flex:none;width:16px;height:16px;transition:transform .45s var(--va-spring)}
.va-q-p::before,.va-q-p::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--noir);transition:background .3s}
.va-q-p::after{transform:rotate(90deg)}
.va-q[open] .va-q-p{transform:rotate(135deg)}
.va-q[open] .va-q-p::before,.va-q[open] .va-q-p::after{background:var(--rouge)}
.va-rep{overflow:hidden;padding:0 40px 24px 22px}
.va-q summary:focus-visible{outline:3px solid var(--noir);outline-offset:-3px}

/* ================= 11. Conseils ================= */
.va-cons-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.va-cons{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;transition:box-shadow .45s,border-color .3s}
.va-cons:hover,.va-cons:focus-within{border-color:var(--noir);box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
.va-cons-corps{display:flex;flex-direction:column;gap:12px;padding:24px 28px 28px;flex:1}
.va-cons-corps p{color:var(--gris)}

/* ================= Touch : pas de survol ================= */
@media (hover:none){
  .va-go{opacity:1;transform:none}
}

/* ================= Tablette ================= */
@media (max-width:1100px){
  .va-sits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .va-svc-trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .va-svc-trio .va-svc:last-child{grid-column:1 / -1}
  .va-pq-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .va-svc-grand{grid-template-columns:minmax(0,1fr)}
  .va-svc-grand .va-ph{min-height:0;aspect-ratio:16/9}
  .va-svc-grand .va-ph::before{display:none}
  .va-svc-grand .va-svc-corps{padding:28px 26px 30px}
  .va-conf-grille,.va-zone-grille,.va-faq-grille{grid-template-columns:minmax(0,1fr);gap:40px}
  .va-faq-cote{position:static}
  .va-conf-photo{justify-self:start;max-width:360px}
  .va-radar{max-width:340px}
  .va-pros{grid-template-columns:minmax(0,1fr);justify-items:start}
  .va-pros-ph{width:100%;max-width:340px}
  /* frise verticale */
  .va-frise{grid-template-columns:minmax(0,1fr);gap:0}
  .va-frise-piste{top:25px;bottom:25px;left:23px;right:auto;width:4px;height:auto}
  .va-frise-plein{transform-origin:top;transform:scaleY(1)}
  .va-frise.va-live .va-frise-plein{transform:scaleY(var(--p,0))}
  .va-et{flex-direction:row;align-items:flex-start;text-align:left;gap:20px;padding:0 0 30px}
  .va-et:last-child{padding-bottom:0}
  .va-et-t{padding-top:10px}
  .va-et-t p{max-width:none;margin-inline:0}
}

/* ================= Téléphone ================= */
@media (max-width:680px){
  .va-tete{margin-bottom:32px}
  .va-sits,.va-svc-trio,.va-cons-grille,.va-pq-grille{grid-template-columns:minmax(0,1fr)}
  .va-svc-trio .va-svc:last-child{grid-column:auto}
  .va-sit{padding:22px 20px;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:6px}
  .va-sit-ic{width:56px;height:56px;flex:none}
  .va-sit h3{flex:1;min-width:0}
  .va-sit p{flex-basis:100%}
  .va-sit .va-go{display:none}
  .va-appel{grid-template-columns:auto minmax(0,1fr);padding:22px 20px}
  .va-appel .btn{grid-column:1 / -1;width:100%}
  .va-svc-corps,.va-svc-grand .va-svc-corps{padding:22px 20px 26px}
  .va-lieux{padding:22px 0}
  /* trio vertical */
  .va-trio{grid-template-columns:minmax(0,1fr);gap:30px;max-width:340px}
  .va-trio::before,.va-trio::after{top:56px;bottom:56px;left:55px;right:auto;width:4px;height:auto}
  .va-trio::after{transform-origin:top}
  .va-trio.va-pre::after{transform:scaleY(0)}
  .va-trio.va-go-ok::after{transform:scaleY(1)}
  .va-ob{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:20px;align-items:center;text-align:left;gap:2px 20px}
  .va-rond{grid-row:1 / span 2;margin-bottom:0}
  .va-ob p{max-width:none;align-self:start}
  .va-ob h3{align-self:end}
  .va-pq{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:20px 18px;align-items:center}
  .va-pq-ic{grid-row:1 / span 2}
  .va-pq h3{font-size:1.08rem;align-self:end}
  .va-pq p{font-size:.95rem;align-self:start}
  .va-pros{padding:16px}
  .va-pros-ph{max-width:240px}
  .va-conf-photo{max-width:300px}
  .va-radar{max-width:280px}
  .va-ctr{font-size:.82rem}
  .va-ctr b{width:38px;height:38px;box-shadow:0 0 0 6px rgba(196,39,39,.3)}
  .va-ctr svg{width:20px;height:20px}
  .va-km{font-size:.7rem;bottom:-9%;white-space:normal;width:92%}
  .va-zone-liste{margin-top:14px}
  .va-ville{padding:9px 14px;font-size:.9rem}
  .va-q summary{font-size:1.02rem;padding:18px 0 18px 12px;gap:12px}
  .va-q[open] summary{padding-left:18px}
  .va-rep{padding:0 6px 22px 18px}
  .va-cons-corps{padding:20px 20px 24px}
}

/* ================= Mouvement réduit ================= */
@media (prefers-reduced-motion:reduce){
  .va-h,.va-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .va-barre{animation:none!important}
  .va-ruban,.va-ruban li::after,.va-pourquoi::after,.va-carres i,.va-pq-ic::after,.va-appel::before,.va-appel-ic::before,.va-appel-ic::after,.va-appel-ic .ico,.va-balai,.va-bal,.va-dot-pt,.va-flamme,.va-mg,.va-md,.va-etiq,.va-ic-doc svg,.va-coeur,.va-chip{animation:none!important}
  .va-ruban{width:auto;flex-wrap:wrap;justify-content:center}
  .va-ruban ul[aria-hidden="true"],.va-ruban-2{display:none}
  .va-lieux::before,.va-lieux::after{display:none}
  .va-ruban ul:first-child{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .va-ruban ul:first-child li:nth-child(n+7){display:none}
  .va-pre .va-ic *,.va-pre .va-ring circle,.va-h .va-ic *{stroke-dashoffset:0!important;opacity:1!important}
  .va-trio.va-pre::after{transform:none!important}
  .va-trio::after{transform:none!important;transition:none!important}
  .va-frise-plein{transform:none!important}
  .va-ecrit .va-l{animation:none!important;opacity:1!important;transform:none!important}
  .va-ecrit.sq::after{opacity:1!important;animation:none!important}
  .va-conf-photo.va-pre .va-conf-cadre::after{transform:none!important}
  .va-conf-photo.va-pre figcaption{opacity:1!important;transform:none!important}
  .va-conf-photo.va-pre .va-conf-cadre{box-shadow:14px 14px 0 var(--rouge)!important}
  .va-conf-photo.va-pre .va-conf-cadre img{transform:none!important}
  .va-cer{stroke-dashoffset:0!important;transition:none!important}
  .va-zh .va-dot,.va-zh .va-ctr,.va-zh .va-km,.va-zh .va-ville{opacity:1!important;transform:none!important}
  .va-ctr{transform:translate(-50%,-50%)!important}
  .va-balai{display:none}
  .va-fil{transform:scaleX(1)!important;transition:none!important}
  .va-sit,.va-pq,.va-svc,.va-ph img,.va-pros-ph img,.va-chip,.va-ville{transition:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}