/* PLANETCOVERING.FR — intro fausse pub */
html.pb-lock,html.pb-lock body{overflow:hidden}
#pub{position:fixed;inset:0;z-index:999;background:#0E0B10;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Archivo Black",Archivo,Arial Black,sans-serif;text-transform:uppercase;text-align:center;overflow:hidden;transition:opacity .45s,transform .45s}
#pub.out{opacity:0;transform:scale(1.04)}
#pub *{box-sizing:border-box}
.pb-top{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;display:flex;gap:8px;align-items:center;z-index:5;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:12px;letter-spacing:1px}
.pb-tag{background:#FFCC00;color:#0E0B10;padding:3px 7px;border-radius:4px}
.pb-t{color:rgba(255,255,255,.8)}

.pb-stage{position:relative;width:min(100%,720px);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,28px);padding:0 16px}
.pb-head{position:relative;width:100%;height:clamp(118px,19vh,170px)}
.pb-van{position:relative;width:min(92vw,600px);aspect-ratio:1424/594;transform:translateX(-120vw);transition:transform 1.4s cubic-bezier(.2,.8,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pb-van svg{position:absolute;inset:0;width:100%;height:100%}
.pb-col{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.6,0,.3,1)}
.pb-squeegee{position:absolute;top:-4%;bottom:-4%;left:0;width:10px;border-radius:6px;background:#FF1E8E;box-shadow:0 0 22px #FF1E8E,0 0 44px rgba(255,30,142,.6);opacity:0;transition:left 1.6s cubic-bezier(.6,0,.3,1),opacity .3s;z-index:2}
.pb-jadou{position:absolute;left:-30%;top:-62%;width:44%;opacity:0;z-index:3;transition:left 1.6s cubic-bezier(.6,0,.3,1),opacity .3s;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));pointer-events:none}
.pb-tap{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:3px solid #FF1E8E;opacity:0;pointer-events:none;z-index:4}

.pb-big,.pb-zero{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(-40%);transition:.5s;pointer-events:none}
.pb-big b,.pb-zero b{display:block;line-height:1;white-space:nowrap}
.pb-big b{font-size:clamp(44px,14vw,88px);color:#A9E2E8;text-shadow:0 0 26px rgba(108,195,206,.6)}
.pb-zero b{font-size:clamp(60px,19vw,120px);color:#FF1E8E;text-shadow:0 0 30px rgba(255,30,142,.7)}
.pb-big span,.pb-zero span{display:block;margin-top:8px;font-size:clamp(11px,3.3vw,15px);letter-spacing:2px;color:#fff;white-space:nowrap}

.pb-call{position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:12px;width:min(92vw,420px);padding:12px 16px;border-radius:18px;
  background:rgba(255,255,255,.96);color:#180F1C;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 3px #6CC3CE;opacity:0;transform:translate(-50%,-90%);transition:transform .6s cubic-bezier(.2,1.3,.4,1),opacity .3s}
.pb-call svg{flex:none;width:40px;height:40px;padding:9px;border-radius:50%;background:#1DB954;color:#fff;animation:pbRing .5s infinite alternate}
.pb-call small{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:10px;letter-spacing:2px;color:#2F97A6}
.pb-call strong{display:block;font-size:clamp(12px,3.6vw,16px);line-height:1.2}
@keyframes pbRing{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}

.pb-linebox{min-height:clamp(70px,11vh,96px);display:flex;align-items:flex-start;justify-content:center;width:100%}
.pb-line{max-width:94vw;padding:12px 22px;border-radius:14px;background:linear-gradient(135deg,#FF1E8E,#FF6FB5);color:#fff;
  font-size:clamp(16px,5vw,28px);line-height:1.12;letter-spacing:.3px;opacity:0;transform:translateY(12px);transition:.35s;box-shadow:0 12px 30px rgba(255,30,142,.35)}
.pb-line.on{opacity:1;transform:none}

.pb-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:24px 16px;
  background:radial-gradient(120% 90% at 50% 20%,#FF6FB5 0%,#FF1E8E 45%,#C8006B 100%);opacity:0;pointer-events:none;transition:opacity .6s}
.pb-logo{font-size:clamp(24px,7.6vw,48px);white-space:nowrap;color:#fff;letter-spacing:-.5px}
.pb-logo span{color:#0E5E66}
.pb-slogan{margin-top:14px;font-size:clamp(18px,5.6vw,34px);line-height:1.08;color:#fff}
.pb-price{margin-top:18px;font-size:clamp(64px,20vw,120px);line-height:1;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.45);white-space:nowrap}
.pb-ht{margin-top:6px;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:clamp(10px,2.9vw,13px);letter-spacing:2.5px;color:#fff;opacity:.92}
.pb-bonus{margin-top:18px;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:clamp(11px,3.2vw,14px);letter-spacing:1.5px;line-height:1.45;color:#0E5E66;
  max-height:0;opacity:0;overflow:hidden;transition:.6s}
.pb-enter{margin-top:22px;font:inherit;font-size:clamp(13px,3.8vw,16px);letter-spacing:1.5px;padding:15px 28px;border-radius:99px;border:0;cursor:pointer;
  background:#fff;color:#FF1E8E;box-shadow:0 0 0 4px rgba(108,195,206,.7),0 14px 30px rgba(0,0,0,.25)}

.pb-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2);z-index:6}
.pb-bar i{display:block;height:100%;width:0;background:#FFCC00}
.pb-skip{position:absolute;right:0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:7;display:flex;align-items:center;gap:8px;
  font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:13px;letter-spacing:.5px;color:#fff;background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.35);border-right:0;padding:11px 14px 11px 16px;cursor:pointer;opacity:0;transition:opacity .3s}
.pb-skip[disabled]{cursor:default;color:rgba(255,255,255,.75)}
.pb-skip svg{width:16px;height:16px}

/* timeline */
#pub.s1 .pb-van{transform:translateX(0)}
#pub.s1 .pb-skip{opacity:1}
#pub.s2 .pb-big{opacity:1;transform:translateY(-50%)}
#pub.s3 .pb-big{opacity:0}
#pub.s3 .pb-zero{opacity:1;transform:translateY(-50%)}
#pub.s4 .pb-zero{opacity:0}
#pub.s4 .pb-col{clip-path:inset(0 0 0 0)}
#pub.s4 .pb-squeegee{left:100%;opacity:1}
#pub.s4 .pb-jadou{left:92%;opacity:1}
#pub.s5 .pb-jadou{opacity:0}
#pub.s3b .pb-tap{animation:pbTap 1.1s ease-out infinite}
#pub.s4 .pb-tap{animation:none;opacity:0}
@keyframes pbTap{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}
#pub.s5 .pb-squeegee{opacity:0}
#pub.s5 .pb-call{opacity:1;transform:translate(-50%,-50%)}
#pub.s5 .pb-van{animation:pbShake .35s 2}
#pub.s6 .pb-end{opacity:1;pointer-events:auto}
#pub.s6 .pb-line{opacity:0}
#pub.fini .pb-bonus{max-height:90px;opacity:1}
@keyframes pbShake{50%{transform:translateX(4px)}}
/* au-dessus de la pub quand l'écran est bas (paysage) */
@media (max-height:560px){.pb-van{width:min(52vw,420px)}.pb-head{height:110px}}

/* JADOU — la mascotte traverse l'écran */
.jadou{position:fixed;top:44vh;left:0;z-index:998;pointer-events:none;animation:jdFly 7.4s cubic-bezier(.45,.05,.55,.95) forwards}
.jd-bob{position:relative;display:flex;align-items:center;animation:jdBob .9s ease-in-out infinite alternate}
.jd-bird{position:relative;width:clamp(170px,46vw,260px);aspect-ratio:420/235;flex:none}
.jd-bird img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(24,15,28,.25))}
.jd-b{animation:jdFlap .26s steps(1) infinite}
.jd-rope{width:clamp(24px,7vw,48px);height:2px;background:#180F1C;opacity:.55;flex:none;margin-top:22%}
.jd-banner{flex:none;margin-top:22%;padding:8px 14px;border-radius:6px 16px 16px 6px;white-space:nowrap;
  font-family:"Archivo Black",Archivo,sans-serif;font-size:clamp(12px,3.6vw,16px);letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,#FF1E8E,#FF6FB5);box-shadow:0 0 0 3px #6CC3CE,0 10px 22px rgba(255,30,142,.35);animation:jdWave .45s ease-in-out infinite alternate;transform-origin:right center}
.jd-banner small{font-size:.62em;letter-spacing:1px}
.jd-bulle{position:absolute;right:-6px;top:-34px;white-space:nowrap;padding:7px 12px;border-radius:14px 14px 14px 4px;background:#fff;color:#180F1C;
  font-family:"Archivo Black",Archivo,sans-serif;font-size:clamp(11px,3.2vw,14px);box-shadow:0 0 0 2px #6CC3CE,0 8px 18px rgba(0,0,0,.15);
  opacity:0;animation:jdBulle 7.4s forwards}
@keyframes jdFly{0%{transform:translateX(-110%)}38%{transform:translateX(calc(50vw - 50%))}62%{transform:translateX(calc(50vw - 50%)) translateY(-8px)}100%{transform:translateX(110vw)}}
@keyframes jdBob{from{transform:translateY(-6px) rotate(-2deg)}to{transform:translateY(8px) rotate(2deg)}}
@keyframes jdFlap{0%{opacity:0}50%{opacity:1}}
@keyframes jdWave{from{transform:skewY(-3deg)}to{transform:skewY(3deg)}}
@keyframes jdBulle{0%,30%{opacity:0;transform:scale(.6)}36%,64%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(.8)}}
.jd-a{animation:jdFlap .26s steps(1) infinite;animation-delay:-.13s}
