/* Orovas Pilotage : surcouche propre à la page (préfixe pl-) */

/* ---------- Fonds ---------- */
.sec.pl-mist{background:var(--mist)}
.sec.pl-sand{background:var(--bg-alt)}
.sec.pl-band{background:var(--pet);border-top:0}
.pl-band h2,.pl-band .h-xl{color:var(--pet-fg)}
.pl-band .mute,.pl-band .label{color:var(--pet-mute)}
.pl-band .eyebrow i{background:#FFB020}
.pl-band .sec-h.center{margin-bottom:8px}
.pl-band .adv li.hot{background:#F6EDE1}
.pl-band .adv li:not(.hot) .a-ic{background:#FF6B2C;color:#1A0A04}
.pl-band .adv b{color:var(--pet-fg)}
.pl-band .adv p{color:var(--pet-mute)}
.pl-band .adv li.hot b{color:#2A1308}
.pl-band .adv li.hot p{color:#6A4A38}

/* ---------- Flux : vos outils -> votre écran -> Telegram ---------- */
.pl-flow{position:relative;display:grid;gap:34px;margin-top:56px;align-items:center}
@media (min-width:1000px){.pl-flow{grid-template-columns:1.05fr 1fr .9fr;gap:56px}}
.pl-src{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pl-src li{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--mist-line);box-shadow:0 10px 24px -18px rgba(15,49,56,.45)}
.pl-src b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
.pl-src small{display:block;font-size:13.5px;color:var(--t2);line-height:1.35}
.pl-lg{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#F4EEE6}
.pl-lg img{width:24px;height:24px;object-fit:contain}
.pl-eur{font-family:var(--f-d);font-weight:700;font-size:20px;color:var(--pet-txt);background:rgba(23,65,74,.10)}
/* fils animés (desktop : horizontaux vers le centre) */
.pl-wire{position:absolute;display:block;pointer-events:none}
@media (min-width:1000px){
  .pl-src .pl-wire{left:100%;top:50%;width:58px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(23,65,74,.35) 0 6px,transparent 6px 12px)}
  .pl-hub .pl-out{left:100%;top:50%;width:58px;height:2px;background:repeating-linear-gradient(90deg,rgba(200,97,59,.5) 0 6px,transparent 6px 12px)}
  .pl-wire::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#FF6B2C;box-shadow:0 0 0 4px rgba(255,107,44,.18);opacity:0}
  .pl-flow.on .pl-wire::after{animation:plPacket 2.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,4) * .35s + .8s)}
}
@keyframes plPacket{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
/* mobile : flèche verticale entre les blocs */
@media (max-width:999px){
  .pl-src .pl-wire{display:none}
  .pl-hub::before,.pl-tg::before{content:"";position:absolute;left:50%;top:-30px;width:2px;height:24px;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(23,65,74,.4) 0 5px,transparent 5px 10px)}
  .pl-hub .pl-out{display:none}
}
.pl-hub{position:relative;border-radius:24px;padding:22px 22px 18px;background:var(--pet-2);color:var(--pet-fg);box-shadow:0 40px 80px -36px rgba(15,49,56,.7)}
.pl-hub-h{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.pl-hub-h .demo-tag{margin-left:auto;color:var(--pet-mute);border-color:rgba(255,255,255,.3)}
.pl-live{width:9px;height:9px;border-radius:50%;background:#FFB020;box-shadow:0 0 0 0 rgba(255,176,32,.6)}
.pl-flow.on .pl-live{animation:plPulse 1.8s ease-out infinite}
@keyframes plPulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)}100%{box-shadow:0 0 0 12px rgba(255,176,32,0)}}
.pl-hub-k{display:grid;gap:10px;margin-top:18px}
.pl-hub-k > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07)}
.pl-hub-k small{font-size:14px;color:var(--pet-mute)}
.pl-hub-k b{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em;color:var(--pet-fg);white-space:nowrap}
.pl-hub-k .pl-warn b{color:#FFB020}
.pl-hub-f{margin-top:12px;font-size:13.5px;color:var(--pet-mute)}
.pl-tg{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:24px;background:var(--chats);border:1px solid var(--mist-line)}
.pl-tg-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--t1);margin-bottom:4px}
.pl-tg-h svg{color:#2369AE}
.pl-tg .bub{font-size:14px}
/* entrées */
.pl-flow .pl-src li,.pl-flow .pl-hub,.pl-flow .pl-tg .bub{opacity:0;transform:translateY(18px)}
.pl-flow .pl-src li{transform:translateX(-24px)}
.pl-flow.on .pl-src li{animation:plIn .7s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i) * .12s)}
.pl-flow.on .pl-hub{animation:plIn .9s cubic-bezier(.22,1,.36,1) forwards .45s}
.pl-flow.on .pl-tg .bub.out{animation:plPop .55s cubic-bezier(.34,1.56,.64,1) forwards 1.5s}
.pl-flow.on .pl-tg .bub.in{animation:plPop .55s cubic-bezier(.34,1.56,.64,1) forwards 2.3s}
@keyframes plIn{to{opacity:1;transform:none}}
@keyframes plPop{0%{opacity:0;transform:translateY(12px) scale(.9)}100%{opacity:1;transform:none}}
.pl-integ{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 28px;margin-top:64px;text-align:left}
.pl-integ .big-n{color:var(--pet-txt);font-size:clamp(64px,8vw,110px)}
.pl-integ p{max-width:420px;font-size:17px;color:var(--t2)}
.pl-integ p b{display:block;font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.05;color:var(--t1);margin-bottom:6px}
@media (max-width:700px){.pl-integ{text-align:center}}

/* ---------- Moments : photos + bulles ---------- */
.pl-moments{display:grid;gap:18px;margin-top:48px}
@media (min-width:760px){.pl-moments{grid-template-columns:repeat(3,1fr)}}
.pl-mo{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:#D8C6AE;box-shadow:0 30px 60px -34px rgba(60,30,10,.55)}
@media (max-width:759px){.pl-mo{aspect-ratio:1/1}}
.pl-mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.pl-mo.on img{transform:scale(1)}
.pl-mo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:70px 16px 16px;background:linear-gradient(180deg,transparent,rgba(24,10,3,.82) 52%)}
.pl-when{align-self:flex-start;font-family:var(--f-m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#1A0A04;background:#FFB020;padding:4px 10px;border-radius:999px;margin-bottom:2px}
.pl-mo .bub{font-size:14.5px;max-width:92%;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.pl-mo .bub.out{background:#FF6B2C;color:#1A0A04}
.pl-mo .bub,.pl-mo .pl-when{opacity:0;transform:translateY(14px) scale(.9)}
.pl-mo.on .pl-when{animation:plPop .5s cubic-bezier(.34,1.56,.64,1) forwards .2s}
.pl-mo.on .bub.out{animation:plPop .55s cubic-bezier(.34,1.56,.64,1) forwards .6s}
.pl-mo.on .bub.in{animation:plPop .55s cubic-bezier(.34,1.56,.64,1) forwards 1.4s}

/* ---------- Prix ---------- */
.pl-plans{display:grid;gap:16px;max-width:820px;margin:44px auto 0}
@media (min-width:700px){.pl-plans{grid-template-columns:1fr 1fr}}
@media (max-width:699px){.pl-plans .p4.star{order:-1}}

.pl-setup{margin-top:22px;text-align:center;font-size:15.5px;color:var(--t2)}
.pl-setup b{color:var(--t1)}
.pl-faq{margin-left:auto;margin-right:auto}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .pl-flow .pl-src li,.pl-flow .pl-hub,.pl-flow .pl-tg .bub,.pl-mo .bub,.pl-mo .pl-when{opacity:1;transform:none;animation:none!important}
  .pl-mo img{transform:none;transition:none}
  .pl-wire::after,.pl-live{animation:none!important}
}
.p4.star{order:0}
