/* ===== Frise au scroll (page Développement) ===== */
.tl{position:relative;display:grid;gap:clamp(48px,8vw,110px);padding-block:20px}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0)*100%);background:linear-gradient(180deg,var(--lilac),var(--pink));box-shadow:0 0 12px var(--pink)}
.tl-spark{position:absolute;left:50%;top:calc(var(--p,0)*100%);width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 10px 3px var(--pink),0 0 30px 8px rgba(139,92,246,.6)}
.tl-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:center}
.tl-card{grid-column:1;grid-row:1;padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));display:grid;gap:12px;position:relative;overflow:hidden;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1),border-color .7s,box-shadow .7s}
.tl-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 100%,rgba(244,114,182,.18),transparent 55%),radial-gradient(circle at 100% 0%,rgba(139,92,246,.16),transparent 50%);opacity:0;transition:opacity .8s;pointer-events:none}
.tl-card>*{position:relative}
.tl-card .tag{font:11px var(--mono);letter-spacing:.08em;color:var(--lilac);text-transform:uppercase}
.tl-card h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em}
.tl-card p{color:var(--fg-60);font-size:15px}
.tl-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:500 15px var(--display);color:var(--fg-60);background:var(--bg-2);border:1px solid var(--line);transition:all .6s}
.tl-visual{grid-column:3;grid-row:1;display:grid;place-items:center;position:relative;min-height:260px;transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.tl-visual::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 65%);filter:blur(30px);z-index:-1}
.tl-item:nth-child(odd) .tl-card{grid-column:3}
.tl-item:nth-child(odd) .tl-visual{grid-column:1}
/* État « éteint » uniquement quand le JS tourne ; sans JS tout reste visible */
.js .tl-item:not(.on) .tl-card{opacity:.4;transform:translateY(16px)}
.js .tl-item:not(.on) .tl-visual{opacity:.3;transform:translateY(40px) scale(.96)}
.tl-item.on .tl-card{border-color:rgba(196,165,255,.28);box-shadow:0 30px 70px -40px rgba(139,92,246,.7)}
.tl-item.on .tl-card::before{opacity:1}
.tl-item.on .tl-node{color:var(--fg);border-color:var(--pink);box-shadow:0 0 0 6px rgba(244,114,182,.12),0 0 30px rgba(244,114,182,.5)}

/* Éléments communs des maquettes */
.scr span,.scr b,.scr i{display:block;border-radius:4px}
.scr span{height:6px;background:rgba(255,255,255,.18)}
.scr .grad{background:var(--grad)}
.scr .dim{background:rgba(255,255,255,.08)}
.w40{width:40%}.w60{width:60%}.w70{width:70%}.w80{width:80%}

/* PC portable : site web */
.laptop{width:min(100%,440px)}
.laptop .scr{aspect-ratio:16/10;border:8px solid #1d1726;border-bottom-width:12px;border-radius:14px 14px 0 0;background:#0e0b14;padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.laptop .base{height:14px;margin:0 -7%;background:linear-gradient(180deg,#2a2236,#16111d);border-radius:0 0 14px 14px;position:relative}
.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:18%;height:5px;transform:translateX(-50%);background:#0e0b14;border-radius:0 0 6px 6px}
.m-nav{display:flex;align-items:center;gap:8px}
.m-nav i{width:34px;height:8px;background:var(--fg)}
.m-nav span{width:24px;height:4px}
.m-nav span:first-of-type{margin-left:auto}
.m-nav b{width:38px;height:12px;border-radius:99px;background:var(--fg)}
.m-hero{display:grid;gap:8px;align-content:center;justify-items:center}
.m-hero span{height:12px}
.m-hero span.dim{height:6px}
.m-hero b{width:64px;height:14px;border-radius:99px;background:var(--fg);margin-top:4px}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-grid i{height:36px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;transform:translateY(10px);opacity:.4;transition:transform .8s .3s,opacity .8s .3s}
.tl-item.on .m-grid i{transform:none;opacity:1}

/* Téléphones : application mobile */
.phone{position:relative;z-index:1;width:170px;aspect-ratio:9/19;border-radius:32px;padding:7px;background:#1d1726;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.8);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.phone .scr{height:100%;border-radius:26px;background:#0e0b14;padding:28px 12px 12px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.phone .scr::before{content:"";position:absolute;top:8px;left:50%;width:56px;height:14px;transform:translateX(-50%);background:#000;border-radius:99px}
.phone.back{position:absolute;z-index:0;opacity:.55;transform:translate(60px,26px) rotate(6deg) scale(.88)}
.tl-item.on .phone:not(.back){transform:translateX(-36px) rotate(-4deg)}
.tl-item.on .phone.back{transform:translate(70px,18px) rotate(12deg) scale(.88)}
.p-top{display:flex;justify-content:space-between;align-items:center}
.p-top span{width:50%;height:8px}
.p-top i{width:20px;height:20px;border-radius:50%;background:var(--grad)}
.p-card{border-radius:14px;padding:14px 10px;display:grid;gap:7px;min-height:70px;align-content:end;background:rgba(255,255,255,.06)}
.p-card.grad{background:var(--grad)}
.p-card.grad span{background:rgba(9,7,13,.45)}
.p-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.p-row i{flex:none;width:22px;height:22px;border-radius:8px;background:rgba(196,165,255,.3)}
.p-tab{margin-top:auto;display:flex;justify-content:space-around;padding:8px;border-radius:14px;background:rgba(255,255,255,.05)}
.p-tab i{width:14px;height:14px;border-radius:5px;background:rgba(255,255,255,.2)}
.p-tab i.on{background:var(--pink)}

/* Navigateur : plateforme SaaS */
.browser{width:min(100%,460px);border-radius:14px;background:#0e0b14;border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.b-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1d1726}
.b-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.b-bar i:first-child{background:var(--pink)}
.b-bar span{margin-left:12px;flex:1;min-width:0;font:11px var(--mono);color:var(--fg-45);background:rgba(255,255,255,.05);border-radius:6px;padding:4px 10px;white-space:nowrap;overflow:hidden}
.b-body{display:grid;grid-template-columns:44px 1fr;min-height:220px}
.b-side{border-right:1px solid var(--line);padding:12px 10px;display:grid;gap:10px;align-content:start}
.b-side i{height:22px;border-radius:7px;background:rgba(255,255,255,.07)}
.b-side i.on{background:var(--grad)}
.b-main{padding:14px;display:grid;gap:14px;grid-template-rows:auto 1fr;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpis div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:5px;min-width:0}
.kpis small{width:50%;height:5px;border-radius:3px;background:rgba(255,255,255,.15)}
.kpis b{font:400 17px var(--display);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.chart{display:flex;align-items:flex-end;gap:7px;padding-top:8px;border-bottom:1px solid var(--line);min-height:110px}
.chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--pink),rgba(139,92,246,.4));height:calc(var(--h)*1%);transition:height 1.2s cubic-bezier(.2,.8,.2,1)}
.js .tl-item:not(.on) .chart i{height:calc(var(--h)*.25%)}
.chart i:nth-child(2){transition-delay:.05s}.chart i:nth-child(3){transition-delay:.1s}.chart i:nth-child(4){transition-delay:.15s}.chart i:nth-child(5){transition-delay:.2s}.chart i:nth-child(6){transition-delay:.25s}.chart i:nth-child(7){transition-delay:.3s}.chart i:nth-child(8){transition-delay:.35s}

/* Écran de bureau : ERP */
.monitor{width:min(100%,440px);display:grid;justify-items:center}
.monitor .scr{width:100%;aspect-ratio:16/10;border:9px solid #1d1726;border-radius:14px;background:#0e0b14;padding:12px;display:grid;grid-template-rows:auto 1fr;gap:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.monitor .stand{width:16%;height:34px;background:linear-gradient(180deg,#2a2236,#16111d)}
.monitor .foot{width:36%;height:8px;border-radius:8px 8px 3px 3px;background:#2a2236}
.e-tabs{display:flex;gap:6px;flex-wrap:wrap}
.scr .e-tabs span{height:auto;background:rgba(255,255,255,.05);font:10px var(--mono);color:var(--fg-45);padding:5px 9px;border-radius:7px}
.scr .e-tabs span.on{background:var(--grad);color:var(--bg)}
.e-table{display:grid;gap:4px;align-content:start}
.e-table>div{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:10px;align-items:center;padding:7px 8px;border-radius:7px;background:rgba(255,255,255,.03);transition:opacity .6s,transform .6s}
.e-table>div.th{background:none}
.e-table>div.th span{height:4px;background:rgba(255,255,255,.1)}
.js .tl-item:not(.on) .e-table>div{opacity:.3;transform:translateX(16px)}
.e-table>div:nth-child(2){transition-delay:.1s}.e-table>div:nth-child(3){transition-delay:.2s}.e-table>div:nth-child(4){transition-delay:.3s}.e-table>div:nth-child(5){transition-delay:.4s}
.e-table em{font:normal 9.5px var(--mono);justify-self:start;padding:3px 7px;border-radius:99px;white-space:nowrap}
.e-table em.ok{color:var(--ok);background:rgba(94,230,168,.1)}
.e-table em.warn{color:var(--warn);background:rgba(255,209,102,.1)}
.e-table em.crit{color:var(--crit);background:rgba(255,107,139,.12)}

/* Mobile : ligne à gauche, carte puis maquette dessous */
@media (max-width:860px){
  .tl-line{left:27px}
  .tl-item,.tl-item:nth-child(odd){grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:28px;align-items:start}
  .tl-item .tl-node,.tl-item:nth-child(odd) .tl-node{grid-column:1;grid-row:1}
  .tl-item .tl-card,.tl-item:nth-child(odd) .tl-card{grid-column:2;grid-row:1}
  .tl-item .tl-visual,.tl-item:nth-child(odd) .tl-visual{grid-column:2;grid-row:2;min-height:0}
  .tl-card{padding:22px}
  .phone{width:130px}
  .phone.back{transform:translate(40px,20px) rotate(6deg) scale(.85)}
  .tl-item.on .phone:not(.back){transform:translateX(-24px) rotate(-4deg)}
  .tl-item.on .phone.back{transform:translate(48px,14px) rotate(11deg) scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .js .tl-item:not(.on) .tl-card,.js .tl-item:not(.on) .tl-visual,.js .tl-item:not(.on) .e-table>div{opacity:1;transform:none}
  .js .tl-item:not(.on) .chart i{height:calc(var(--h)*1%)}
}