/* ═══════════════════════════════════════════════════════════════
   ATELIER ANGLE NOIR · lot 2 « vivant » (28/09/2026)
   Complète anim.css sans le remplacer. Rien ne bouge sans JS
   (classe html.vv posée par js/vivant.js), rien ne bouge si le
   visiteur a demandé moins d'animations.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Photos : un rideau qui se lève, l'image qui se pose */
html.vv .vv-img{clip-path:inset(14% 0 0 0 round 14px);transition:clip-path 1.25s cubic-bezier(.16,1,.3,1)}
html.vv .vv-img img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
html.vv .vv-img.vu{clip-path:inset(0 0 0 0 round 14px)}
html.vv .vv-img.vu img{transform:scale(1)}
/* au survol, la photo avance à peine */
html.vv .vv-img.vu:hover img,html.vv a:hover .vv-img.vu img{transform:scale(1.04);transition-duration:.9s}

/* 2. Cartes : elles se soulèvent et prennent un filet or */
.svc,.preuve-o,.rge-step,.sb-tarifs,.pj-ligne,.blog-card{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s,box-shadow .45s}
.svc:hover,.rge-step:hover,.sb-tarifs:hover{transform:translateY(-4px);border-color:rgba(200,169,110,.45)!important;box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}

/* 3. Le filet des surtitres se trace à l'arrivée */
html.vv .section-label.vv-l::before{width:0;transition:width 1s cubic-bezier(.16,1,.3,1) .15s}
html.vv .section-label.vv-l.vu::before{width:20px}

/* 4. Boutons pleins : un reflet passe au survol */
.btn-primary,.btn-cal,.btn-send{position:relative;overflow:hidden}
.btn-primary::after,.btn-cal::after,.btn-send::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn-primary:hover::after,.btn-cal:hover::after,.btn-send:hover::after{left:130%}

/* 5. Flèches : elles avancent au survol du lien */
a:hover .pj-fleche,a:hover .svc-link,a:hover .preuve-go,a:hover .pj-lien{letter-spacing:.22em;transition:letter-spacing .4s}

/* 6. Barres DPE de la page services : elles se remplissent */
html.vv .dpe-fill.vv-bar{transition:width 1.1s cubic-bezier(.16,1,.3,1) var(--bd,0s)!important}

@media (prefers-reduced-motion: reduce){
  html.vv .vv-img,html.vv .vv-img img{clip-path:none!important;transform:none!important;transition:none!important}
  .svc:hover,.rge-step:hover,.sb-tarifs:hover{transform:none}
}