/* Animations du site : ciel du bandeau, avion de défilement, facture tamponnée, cartes interactives */
.hero .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-in{z-index:1}
.sky .cl{position:absolute;left:0;color:#d9f6fb;opacity:.07;animation:sk-drift linear infinite}.sky .cl svg{width:100%;display:block}
@keyframes sk-drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.sky .pl{position:absolute;left:0;display:flex;align-items:center;animation:sk-fly linear infinite;opacity:.85}
.sky .pl b{background:#fff;color:#065d6d;font-size:12px;padding:5px 13px 5px 15px;border-radius:6px 2px 2px 6px;white-space:nowrap;position:relative;font-weight:800}
.sky .pl b:after{content:"";position:absolute;right:-9px;top:0;border:solid transparent;border-width:13px 0 13px 10px;border-left-color:#fff}
.sky .pl svg{width:50px;margin-left:13px}
@keyframes sk-fly{from{transform:translateX(-50vw)}to{transform:translateX(115vw)}}
.sky .dc{position:absolute;top:-70px;width:28px;height:36px;background:#fff;border-radius:4px;padding:6px 5px;opacity:0;animation:sk-fall linear infinite}
.sky .dc i{display:block;height:3px;border-radius:2px;background:#cfe5e9;margin-bottom:4px}.sky .dc i:first-child{background:#1b9cb2;width:55%}
@keyframes sk-fall{0%{transform:translate(0,0) rotate(-12deg);opacity:0}8%{opacity:.45}50%{transform:translate(24px,50%) rotate(14deg)}100%{transform:translate(-12px,110%) rotate(-10deg);opacity:.45}}
/* barre de défilement avec avion */
#sk-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;pointer-events:none}
#sk-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1b9cb2,#5ed5ea)}
#sk-prog svg{position:absolute;top:-9px;width:30px;transform:translateX(-26px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

/* cartes : reflet qui suit le curseur, légère inclinaison */
.bento .bc{position:relative;transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d}
.bento .bc:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(27,156,178,.16),transparent 60%)}
.bento .bc:hover:after{opacity:1}
.bento .bc.tilt{transition:transform .08s linear,box-shadow .25s}
/* boutons : reflet qui traverse */
.btn.p{position:relative;overflow:hidden}
.btn.p:before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:btn-shine 4.5s ease-in-out infinite}
@keyframes btn-shine{0%,60%{left:-60%}100%{left:140%}}
/* avion qui traverse la section Peppol une fois */
.pep{position:relative;overflow:hidden}
.pep .flyby{position:absolute;top:26px;left:0;display:flex;align-items:center;z-index:2;pointer-events:none;opacity:0}
.pep .flyby b{background:#fff;color:#065d6d;font-size:12.5px;font-weight:800;padding:6px 14px 6px 16px;border-radius:6px 2px 2px 6px;position:relative;white-space:nowrap}
.pep .flyby b:after{content:"";position:absolute;right:-9px;top:0;border:solid transparent;border-width:14px 0 14px 10px;border-left-color:#fff}
.pep .flyby svg{width:54px;margin-left:14px}
.pep.fly .flyby{animation:pep-fly 6s ease-in-out forwards}
@keyframes pep-fly{0%{transform:translateX(-30vw);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(110vw);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .sky,.flyby{display:none}}
@media (max-width:700px){.sky .pl{display:none}}