/* ===== Section TECHBYWE Portail : démo animée du portail client + bot WhatsApp ===== */
.pt-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:1000px){.pt-grid{grid-template-columns:1fr}}

/* Liste des fonctionnalités */
.pt-feats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pt-feats li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:14px 12px;border-radius:16px;transition:background .3s}
.pt-feats li:hover{background:rgba(139,92,246,.07)}
.pt-feats i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--fg);border:1px solid rgba(255,255,255,.18);background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.2),rgba(255,255,255,.04) 60%),linear-gradient(135deg,rgba(139,92,246,.3),rgba(244,114,182,.25));box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.pt-feats i svg{width:20px;height:20px}
.pt-feats h3{font-size:18px;letter-spacing:-.02em;margin-bottom:3px}
.pt-feats p{color:var(--fg-60);font-size:14.5px}
.pt-feats .pt-cta{display:block;padding-top:16px}

/* Démo */
.pt-demo{position:relative;padding-bottom:40px;padding-right:clamp(0px,6vw,90px)}
.pt-demo::before{content:"";position:absolute;inset:10% 5% 0 10%;background:radial-gradient(circle at 30% 40%,rgba(139,92,246,.35),transparent 60%),radial-gradient(circle at 80% 80%,rgba(244,114,182,.25),transparent 55%);filter:blur(40px);z-index:-1}
.pt-browser{border-radius:16px;overflow:hidden;border:1px solid rgba(196,165,255,.25);background:#0a0710;box-shadow:0 50px 100px -40px rgba(139,92,246,.7);container-type:inline-size}
.pt-browser .b-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1d1726}
.pt-browser .b-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.pt-browser .b-bar i:first-child{background:var(--pink)}
.pt-browser .b-bar span{margin-left:12px;flex:1;min-width:0;font-size:11px;color:var(--fg-45);background:rgba(255,255,255,.05);border-radius:6px;padding:4px 10px;white-space:nowrap;overflow:hidden}

.pt-app{display:grid;grid-template-columns:17cqw 1fr;font-size:1.55cqw;color:var(--fg-80);min-height:0}
.pt-side{border-right:1px solid var(--line);padding:2.4cqw 1.6cqw;display:grid;gap:.8cqw;align-content:start;background:rgba(255,255,255,.015)}
.pt-logo{font:700 2.4cqw var(--display);letter-spacing:-.05em;text-align:center;margin-bottom:2cqw;color:var(--fg)}
.pt-side small{font-size:1.1cqw;letter-spacing:.16em;color:var(--fg-45);padding-left:.8cqw}
.pt-side span{padding:1cqw 1.2cqw;border-radius:.9cqw;font-size:1.35cqw;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-side span.on{background:var(--grad);color:var(--bg)}
.pt-main{padding:2.2cqw;display:grid;gap:1.6cqw;min-width:0}
.pt-head{display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.pt-head small,.pt-card>small{display:block;font-size:1.1cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-45)}
.pt-head b{font:700 2.6cqw var(--display);letter-spacing:-.03em;color:var(--fg)}
.pt-tools{display:flex;gap:1cqw;align-items:center}
.pt-bell{position:relative;width:3.6cqw;height:3.6cqw;border-radius:1cqw;border:1px solid var(--line);display:grid;place-items:center;color:var(--fg-80)}
.pt-bell svg{width:1.9cqw;height:1.9cqw}
.pt-bell em{position:absolute;top:-.7cqw;right:-.7cqw;min-width:2cqw;height:2cqw;border-radius:99px;background:var(--pink);color:var(--bg);font:700 1.1cqw/2cqw var(--body);font-style:normal;text-align:center;padding:0 .4cqw;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pt-bell em.on{transform:scale(1)}
.pt-av{width:3.6cqw;height:3.6cqw;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--fg);background:var(--grad)}
.pt-row{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6cqw}
.pt-card{border:1px solid rgba(196,165,255,.16);border-radius:1.4cqw;padding:1.8cqw;background:rgba(255,255,255,.025);min-width:0;display:grid;gap:1cqw;align-content:start}
.pt-proj{grid-template-columns:15cqw 1fr;align-items:center;gap:1.8cqw}
.pt-thumb{position:relative;aspect-ratio:4/3;border-radius:1cqw;overflow:hidden;background:linear-gradient(160deg,#2a1f4a,#130e1b);display:grid;gap:.6cqw;align-content:center;padding:1.4cqw}
.pt-thumb i{display:block;height:1cqw;border-radius:.4cqw;background:rgba(255,255,255,.15)}
.pt-thumb i:nth-child(1){width:70%;background:var(--grad)}
.pt-thumb i:nth-child(2){width:90%}.pt-thumb i:nth-child(3){width:50%}
.pt-thumb small{font-size:1cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac);margin-top:.6cqw}
.pt-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:250% 100%;animation:ptShine 3s linear infinite}
@keyframes ptShine{from{background-position:150% 0}to{background-position:-100% 0}}
.pt-info{display:grid;gap:.8cqw;justify-items:start;min-width:0}
.pt-chip{font-size:1.1cqw;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.4cqw 1cqw;border-radius:.6cqw;background:rgba(99,102,241,.2);color:#a5b4fc}
.pt-info b{font:700 2.2cqw var(--display);letter-spacing:-.03em;color:var(--fg)}
.pt-info small{font-size:1.2cqw;color:var(--fg-45)}
.pt-prog strong{font:700 5.6cqw/1 var(--display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.pt-bar{height:.8cqw;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.pt-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);box-shadow:0 0 1.4cqw var(--pink);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.pt-ok{display:inline-flex;align-items:center;gap:.8cqw;font-size:1.3cqw;color:var(--fg-80)}
.pt-ok::before{content:"";width:1cqw;height:1cqw;border-radius:50%;background:var(--ok);box-shadow:0 0 1cqw var(--ok)}

/* Feuille de route */
.pt-road ol{list-style:none;margin:.6cqw 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.pt-road ol::before{content:"";position:absolute;left:7%;right:7%;top:2.2cqw;height:2px;background:rgba(255,255,255,.08)}
.pt-road ol::after{content:"";position:absolute;left:7%;top:2.2cqw;height:2px;width:calc(var(--rp,0)*86%);background:var(--grad);box-shadow:0 0 1cqw var(--pink);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.pt-road li{position:relative;z-index:1;display:grid;justify-items:center;gap:.8cqw;text-align:center}
.pt-road li i{width:4.4cqw;height:4.4cqw;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:1.5cqw;color:var(--fg-60);background:#120d1a;border:1px solid rgba(196,165,255,.25);transition:all .5s}
.pt-road li span{font-size:1.05cqw;line-height:1.25;text-transform:uppercase;letter-spacing:.03em;color:var(--fg-45);transition:color .5s;padding:0 .3cqw}
.pt-road li.now i{color:var(--fg);border-color:var(--pink);box-shadow:0 0 0 .6cqw rgba(244,114,182,.15),0 0 2cqw rgba(244,114,182,.6);animation:ptPulse 1.4s ease-in-out infinite}
.pt-road li.done i{color:var(--bg);background:var(--grad);border-color:transparent}
.pt-road li.done span,.pt-road li.now span{color:var(--fg)}
@keyframes ptPulse{50%{box-shadow:0 0 0 1.1cqw rgba(244,114,182,.05),0 0 2.6cqw rgba(244,114,182,.7)}}

/* Journal et livrables */
.pt-log,.pt-files{list-style:none;margin:0;padding:0;display:grid;gap:.8cqw}
.pt-log li{display:flex;gap:1cqw;align-items:baseline;font-size:1.3cqw;color:var(--fg-80);animation:ptIn .5s both}
.pt-log li::before{content:"";flex:none;width:.9cqw;height:.9cqw;border-radius:50%;background:var(--pink);transform:translateY(-.1cqw)}
.pt-log li.pt-empty{color:var(--fg-45)}
.pt-log li.pt-empty::before{display:none}
.pt-log time{margin-left:auto;font-size:1.1cqw;color:var(--fg-45);white-space:nowrap}
.pt-files li{display:flex;gap:1cqw;align-items:center;font-size:1.3cqw;color:var(--fg-80);padding:.7cqw .9cqw;border-radius:.8cqw;background:rgba(255,255,255,.03);opacity:.25;filter:grayscale(1);transition:opacity .5s,filter .5s,background .5s}
.pt-files li i{font-style:normal;font-size:1cqw;font-weight:700;padding:.3cqw .6cqw;border-radius:.4cqw;background:rgba(255,255,255,.1)}
.pt-files li.on{opacity:1;filter:none;background:rgba(139,92,246,.12)}
.pt-files li.on i{background:var(--grad);color:var(--bg)}
@keyframes ptIn{from{opacity:0;transform:translateY(-6px)}}

/* Téléphone WhatsApp */
.pt-phone{position:absolute;right:0;bottom:0;width:clamp(180px,27%,250px);aspect-ratio:9/17.5;border-radius:30px;padding:7px;background:#1d1726;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -20px rgba(0,0,0,.9),0 0 50px -10px rgba(139,92,246,.5);display:grid;grid-template-rows:auto 1fr;overflow:hidden;animation:lapFloat 6s ease-in-out infinite}
.wa-top{display:flex;align-items:center;gap:9px;padding:20px 12px 10px;border-radius:24px 24px 0 0;background:#1f2c34}
.wa-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--display);letter-spacing:-.04em;color:var(--fg);background:var(--grad)}
.wa-top b{display:block;font-size:12.5px;color:#e9edef}
.wa-top small{font-size:10.5px;color:#25d366}
.wa-chat{border-radius:0 0 24px 24px;padding:10px 9px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;background:#0b141a radial-gradient(circle at 20% 20%,rgba(255,255,255,.03) 1px,transparent 1.5px) 0 0/14px 14px}
.wa-msg{align-self:flex-start;max-width:92%;padding:7px 9px 5px;border-radius:2px 10px 10px 10px;background:#202c33;color:#e9edef;font-size:11px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.3);animation:waPop .4s cubic-bezier(.3,1.4,.5,1) both;transform-origin:top left}
.wa-msg b{color:#25d366;font-weight:600}
.wa-msg u{color:#53bdeb;text-decoration:none;word-break:break-all}
.wa-msg time{display:block;text-align:right;font-size:9px;color:#8696a0;margin-top:2px}
.wa-typing{align-self:flex-start;display:none;gap:3px;padding:9px 11px;border-radius:2px 10px 10px 10px;background:#202c33}
.wa-typing.on{display:flex}
.wa-typing i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:waDot 1s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes waPop{from{opacity:0;transform:scale(.85)}}
@keyframes waDot{50%{transform:translateY(-3px);opacity:.5}}

@media (max-width:640px){
  .pt-demo{padding:0}
  .pt-phone{position:relative;margin:-60px auto 0;width:230px}
  .pt-app{grid-template-columns:1fr}
  .pt-side{display:none}
  .pt-main{padding:3.4cqw;gap:2.6cqw}
  .pt-head small,.pt-card>small,.pt-thumb small,.pt-chip{font-size:2.2cqw}
  .pt-head b{font-size:4.6cqw}
  .pt-row{grid-template-columns:1fr;gap:2.6cqw}
  .pt-card{padding:3cqw;border-radius:2.4cqw;gap:1.6cqw}
  .pt-proj{grid-template-columns:24cqw 1fr}
  .pt-info b{font-size:3.8cqw}
  .pt-info small,.pt-ok{font-size:2.6cqw}
  .pt-prog strong{font-size:9cqw}
  .pt-bar{height:1.4cqw}
  .pt-road li span{display:none}
  .pt-road li i{width:7.4cqw;height:7.4cqw;font-size:2.8cqw}
  .pt-road ol::before,.pt-road ol::after{top:3.7cqw}
  .pt-log li,.pt-files li{font-size:2.9cqw}
  .pt-log time,.pt-files li i{font-size:2.2cqw}
  .pt-bell,.pt-av{width:6.4cqw;height:6.4cqw}
  .pt-bell svg{width:3.4cqw;height:3.4cqw}
  .pt-bell em{min-width:3.4cqw;height:3.4cqw;font-size:2cqw;line-height:3.4cqw}
}
@media (prefers-reduced-motion:reduce){.pt-phone,.pt-thumb::after,.pt-road li.now i{animation:none}}

/* ===== Vidéo de présentation dans une bulle de verre (accueil) ===== */
.intro-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:900px){.intro-split{grid-template-columns:1fr}}
.vbub{position:relative;margin:0;padding:8px;border-radius:30px;border:1px solid rgba(255,255,255,.2);
  background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.18),rgba(255,255,255,.04) 55%),linear-gradient(135deg,rgba(139,92,246,.25),rgba(244,114,182,.18));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 40px 90px -30px rgba(139,92,246,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.vbub::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 65%);filter:blur(30px)}
.vbub video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:23px;background:#050308;cursor:pointer}
.vbub:fullscreen{padding:0;border-radius:0;background:#000;display:grid;place-items:center;animation:none}
.vbub:fullscreen video{border-radius:0;height:100%;aspect-ratio:auto;object-fit:contain}
.vb-big{position:absolute;left:50%;top:50%;width:78px;height:78px;border-radius:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;color:#fff;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.35),rgba(255,255,255,.08) 60%),linear-gradient(135deg,rgba(139,92,246,.6),rgba(244,114,182,.5));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 20px 40px -10px rgba(0,0,0,.6);transition:opacity .3s,transform .3s}
.vb-big svg{width:30px;height:30px;margin-left:4px}
.vbub.paused .vb-big{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.vb-big:hover{transform:translate(-50%,-50%) scale(1.08)!important}
.vb-bar{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;gap:8px;padding:6px;border-radius:99px;
  border:1px solid rgba(255,255,255,.2);background:rgba(15,10,22,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
/* Barre visible tant que la souris bouge sur la vidéo ou survole la barre (géré en JS), et toujours en pause */
.vbub.ui .vb-bar,.vb-bar:hover,.vbub:focus-within .vb-bar,.vbub.paused .vb-bar{opacity:1;transform:none}
.vbub.ui video{cursor:pointer}
.vbub:not(.ui):not(.paused) video{cursor:none}
@media (hover:none){.vb-bar{opacity:1;transform:none}}
.vb-bar button{flex:none;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;color:#fff;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .2s}
.vb-bar button:hover{background:rgba(255,255,255,.2)}
.vb-bar svg{width:18px;height:18px;grid-area:1/1}
.vbub .i-play,.vbub.paused .i-pause,.vbub .i-on,.vbub.sound .i-off{display:none}
.vbub.paused .i-play,.vbub.sound .i-on{display:block}
.vb-vol{flex:none;width:76px;height:20px;accent-color:var(--pink);cursor:pointer;background:transparent}
@media (max-width:520px){.vb-vol{display:none}}
.vb-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.18);cursor:pointer;position:relative;overflow:hidden}
.vb-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--grad)}
.vb-track:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
[dir="rtl"] .vb-bar{direction:ltr}