/* ══ Pose de film animée, réutilisable (hero des pages solution) ═══════
   Balisage, à placer DANS le fond du hero (.ph-bg) :
     <div class="pf" aria-hidden="true">
       <div class="pf-after" style="background-image:url(après)"></div>
       <div class="pf-run"><div class="pf-edge"><span class="pf-drops"><i …></i></span>
         <span class="pf-tag">Film anti-chaleur</span><span class="pf-squeegee"></span></div></div>
     </div>
   La pose démarre quand le hero reçoit la classe .loaded (déjà posée par
   la page au premier rendu). Une seule fois : l'état « après » reste.   */
.pf{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.pf-after{ position:absolute; inset:0; background-size:cover; background-position:center; clip-path:inset(0 100% 0 0); }
.pf-run{ position:absolute; inset:0; transform:translateX(-100%); opacity:0; }
.pf-edge{ position:absolute; top:0; bottom:0; right:0; width:3px; background:#fff;
  box-shadow:0 0 22px 6px rgba(255,255,255,.7), 0 0 90px 18px rgba(201,168,76,.45); }
.pf-edge::before{ content:""; position:absolute; top:0; bottom:0; right:3px; width:110px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16)); }
.pf-squeegee{ position:absolute; right:-6px; top:42%; width:46px; height:190px; margin-top:-95px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 190'%3E%3Crect x='0' y='70' width='26' height='50' rx='9' fill='%230C1B2E'/%3E%3Crect x='4' y='80' width='18' height='30' rx='6' fill='%231d3352'/%3E%3Crect x='22' y='4' width='18' height='182' rx='7' fill='%23C9A84C'/%3E%3Crect x='36' y='8' width='8' height='174' rx='4' fill='%230C1B2E'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.pf-tag{ position:absolute; right:22px; top:18%; white-space:nowrap; padding:.45rem .85rem; border-radius:999px;
  font:800 .72rem/1 var(--font-body, Inter, sans-serif); letter-spacing:.12em; text-transform:uppercase; color:#0C1B2E;
  background:#C9A84C; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.pf-drops i{ position:absolute; right:0; top:var(--t); width:7px; height:7px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 70%); }

.loaded .pf-after{ animation:pfWipe 3.2s cubic-bezier(.55,.06,.32,1) .7s both; }
.loaded .pf-run{ animation:pfRun 3.2s cubic-bezier(.55,.06,.32,1) .7s both; }
.loaded .pf-squeegee{ animation:pfBob .8s ease-in-out .7s 4 alternate; }
.loaded .pf-drops i{ animation:pfDrop 1.1s ease-out calc(.7s + var(--d)) 3; }
@keyframes pfWipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes pfRun{ 0%{ transform:translateX(-100%); opacity:1; } 92%{ opacity:1; } 100%{ transform:translateX(0); opacity:0; } }
@keyframes pfBob{ from{ transform:translateY(-20vh); } to{ transform:translateY(18vh); } }
@keyframes pfDrop{ 0%{ opacity:0; transform:translate(0,0) scale(1); } 20%{ opacity:.9; } 100%{ opacity:0; transform:translate(-46px, 22px) scale(.5); } }

/* Badge « Pose en cours → Film posé » */
.pf-badge{ position:absolute; right:clamp(1rem,4vw,3.5rem); bottom:clamp(1.2rem,6vh,3.5rem); z-index:2; display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.15rem .85rem .9rem; border-radius:18px; color:#fff; pointer-events:none;
  background:rgba(12,27,46,.4); border:1px solid rgba(255,255,255,.22); box-shadow:0 18px 40px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); }
.pf-badge-ico{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.25rem; color:#0C1B2E; background:#C9A84C; flex:none; }
.pf-badge-txt{ display:flex; flex-direction:column; line-height:1.15; }
.pf-badge-k{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#C9A84C; margin-bottom:.15rem; }
.pf-badge strong{ font-family:var(--font-head); font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.pf-badge small{ font-size:.76rem; color:rgba(255,255,255,.8); margin-top:.15rem; max-width:22ch; }

@media (max-width:900px){ .pf-badge{ display:none; } }
@media (max-width:700px){
  .pf-tag{ display:none; }
  .pf-squeegee{ width:34px; height:130px; top:30%; margin-top:-65px; }
  .loaded .pf-squeegee{ animation-name:pfBobM; }
  @keyframes pfBobM{ from{ transform:translateY(-12vh); } to{ transform:translateY(12vh); } }
}
@media (prefers-reduced-motion: reduce){
  .pf-after, .loaded .pf-after{ animation:none; clip-path:none; }
  .pf-run{ display:none; }
}