/* ===== PC portable réaliste en 3D (hero Cybersécurité) ===== */
.lap3d{position:relative;perspective:1600px;width:100%;max-width:600px;justify-self:center;padding-block:10px 40px}
.lap{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-14deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:lapFloat 7s ease-in-out infinite}
@keyframes lapFloat{50%{translate:0 -10px}}

/* Écran */
.lid{position:relative;padding:1.6%;border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#4a4553,#24212a 40%,#17151b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.9)}
.bezel{position:relative;aspect-ratio:16/10;border-radius:12px 12px 3px 3px;background:#050407;padding:3.4% 2.4% 2.4%;overflow:hidden;container-type:inline-size}
.cam{position:absolute;left:50%;top:1.3%;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#3a3f55,#08080b 70%);box-shadow:0 0 0 2px #0d0c10}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(calc(115deg + var(--gx,0deg)),rgba(255,255,255,.10),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.04));mix-blend-mode:screen}

/* Charnière et base */
.hinge{height:10px;margin:0 9%;background:linear-gradient(180deg,#0e0d11,#2d2a33 60%,#18161c);border-radius:0 0 4px 4px}
.base{position:relative;height:18px;margin:-2px -8% 0;border-radius:3px 3px 22px 22px / 3px 3px 14px 14px;background:linear-gradient(180deg,#6a6573 0%,#3b3842 30%,#1d1b22 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 26px 40px -16px rgba(0,0,0,.9)}
.base i{position:absolute;left:50%;top:0;width:15%;height:7px;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#24212a,#3b3842)}
.lap-shadow{position:absolute;left:8%;right:8%;bottom:6px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,92,246,.45),transparent 70%);filter:blur(14px);animation:shadowPulse 7s ease-in-out infinite}
@keyframes shadowPulse{50%{transform:scaleX(.92);opacity:.7}}

/* Tableau de bord de supervision (tailles relatives à la largeur de l'écran) */
.soc{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:2.2cqw;font-family:var(--body);font-size:1.9cqw;color:var(--fg-80);background:radial-gradient(circle at 20% 0%,rgba(139,92,246,.22),transparent 55%),radial-gradient(circle at 100% 100%,rgba(244,114,182,.14),transparent 50%),#0b0812;border-radius:4px;padding:2.2cqw}
.soc-top{display:flex;align-items:center;gap:2cqw}
.soc-top b{font:700 2.1cqw var(--display);letter-spacing:-.02em}
.soc-top b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.soc-top em{font-style:normal;display:inline-flex;align-items:center;gap:.8cqw;color:var(--ok);font-size:1.7cqw;padding:.5cqw 1.4cqw;border-radius:99px;background:rgba(94,230,168,.1)}
.soc-top em i{width:1cqw;height:1cqw;border-radius:50%;background:var(--ok);box-shadow:0 0 1.2cqw var(--ok);animation:blink 1.6s infinite}
.soc-top time{margin-left:auto;font:1.8cqw var(--code);color:var(--fg-45);font-variant-numeric:tabular-nums}
.soc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.2cqw;min-height:0}
.soc-radar,.soc-kpis>div{border:1px solid rgba(255,255,255,.08);border-radius:1.6cqw;background:rgba(255,255,255,.03)}
.soc-radar{display:grid;place-items:center;align-content:center;gap:1.2cqw;padding:1.6cqw}
.soc-radar small,.soc-kpis small{font-size:1.5cqw;color:var(--fg-45);letter-spacing:.06em;text-transform:uppercase}
.radar{position:relative;width:17cqw;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:repeating-radial-gradient(circle,transparent 0 2.6cqw,rgba(196,165,255,.22) 2.6cqw calc(2.6cqw + 1px)),linear-gradient(transparent calc(50% - .5px),rgba(196,165,255,.22) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),rgba(196,165,255,.22) 50%,transparent calc(50% + .5px)),rgba(139,92,246,.06);
  box-shadow:inset 0 0 0 1px rgba(196,165,255,.35),0 0 3cqw rgba(139,92,246,.35)}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(244,114,182,.55),rgba(244,114,182,0) 25%);animation:sweep 3.2s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar b{position:absolute;left:var(--x);top:var(--y);width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--lilac);box-shadow:0 0 1.4cqw var(--lilac);animation:ping 3.2s var(--d,0s) infinite}
.radar b.r{background:var(--crit);box-shadow:0 0 1.6cqw var(--crit)}
@keyframes ping{0%,100%{opacity:.25;transform:scale(.7)}12%{opacity:1;transform:scale(1.3)}40%{opacity:.6;transform:scale(1)}}
.soc-kpis{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:1.6cqw;min-height:0}
.soc-kpis>div{padding:1.4cqw 1.8cqw;display:grid;gap:.6cqw;align-content:center}
.soc-kpis strong{font:700 3.6cqw var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
.soc-kpis .score{position:relative;place-items:center;padding:1cqw}
.score svg{width:10cqw;height:10cqw;transform:rotate(-90deg)}
.score circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3.2}
.score circle.v{stroke:var(--pink);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:calc(97.4 - 97.4*.94);animation:ring 2.2s cubic-bezier(.2,.8,.2,1) both .6s}
@keyframes ring{from{stroke-dashoffset:97.4}}
.score span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:0}
.score span strong{font-size:2.8cqw;line-height:1}
.score span small{font-size:1.2cqw}
.soc-bars{grid-column:1/-1}
.soc-bars p{margin:0;display:flex;align-items:flex-end;gap:.9cqw;height:7cqw}
.soc-bars i{flex:1;border-radius:.6cqw .6cqw 0 0;background:linear-gradient(180deg,var(--pink),rgba(139,92,246,.35));animation:eq 1.6s ease-in-out infinite;transform-origin:bottom}
.soc-bars i:nth-child(3n){animation-delay:-.4s}.soc-bars i:nth-child(3n+1){animation-delay:-.9s}.soc-bars i:nth-child(4n){animation-delay:-1.2s;animation-duration:2.1s}
@keyframes eq{0%,100%{height:30%}50%{height:95%}}
.soc-log{list-style:none;margin:0;padding:1.4cqw 1.8cqw;border-radius:1.6cqw;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);display:grid;gap:.7cqw;font:1.7cqw var(--code);height:12.5cqw;overflow:hidden;align-content:end}
.soc-log li{display:flex;gap:1.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fade .5s both}
.soc-log span{flex:none;width:6cqw;font-weight:700}
.soc-log .ok{color:var(--ok)}.soc-log .warn{color:var(--warn)}.soc-log .crit{color:var(--crit)}

@media (max-width:960px){.lap3d{max-width:520px}}
@media (prefers-reduced-motion:reduce){.lap{animation:none}.radar .sweep,.radar b,.soc-bars i{animation:none}}

/* ===== Site web qui défile dans le PC (page Développement) ===== */
.web{height:100%;display:grid;grid-template-rows:auto 1fr;border-radius:4px;overflow:hidden;background:#faf7f2}
.w-bar{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.6cqw;background:#e9e5df;border-bottom:1px solid #d6d1ca}
.w-bar i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#ff5f57}
.w-bar i:nth-child(2){background:#febc2e}.w-bar i:nth-child(3){background:#28c840}
.w-bar span{margin-left:2cqw;flex:1;max-width:46%;padding:.5cqw 1.4cqw;border-radius:.8cqw;background:#fff;font:1.6cqw var(--body);color:#57534e;white-space:nowrap;overflow:hidden}
.w-view{position:relative;overflow:hidden;container-type:size}
.w-page{font-family:"Inter",var(--body);color:#1c1917;font-size:1.7cqw;line-height:1.45;animation:wScroll 16s cubic-bezier(.45,0,.25,1) infinite}
@keyframes wScroll{0%,10%{transform:translateY(0)}30%{transform:translateY(calc((-100% + 100cqh)*.38))}42%{transform:translateY(calc((-100% + 100cqh)*.38))}62%,72%{transform:translateY(calc(-100% + 100cqh))}92%,100%{transform:translateY(0)}}
.w-page h4,.w-page h5{margin:0;font-family:var(--ita);font-weight:400;color:#1c1917;letter-spacing:-.01em}
.w-page p{margin:0;color:#78716c}
.w-page small{display:block;font-size:1.3cqw;letter-spacing:.18em;text-transform:uppercase;color:#a16207}
.w-btn{display:inline-block;padding:1cqw 2.4cqw;border-radius:99px;background:#1c1917;color:#faf7f2;font-size:1.5cqw;font-weight:600}
.w-btn.ghost{background:transparent;color:#1c1917;box-shadow:inset 0 0 0 1px #1c1917}
.w-nav{display:flex;align-items:center;gap:3cqw;padding:2.4cqw 4cqw;border-bottom:1px solid #ece7e0}
.w-nav b{font:700 2.4cqw var(--display);letter-spacing:.3em;margin-right:auto}
.w-nav span{font-size:1.5cqw;color:#57534e}
.w-nav em{font-style:normal;font-size:1.4cqw;padding:.7cqw 1.6cqw;border-radius:99px;background:#1c1917;color:#faf7f2}
.w-hero{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-items:center;padding:5cqw 4cqw 4cqw}
.w-copy{display:grid;gap:1.6cqw;justify-items:start}
.w-copy h4{font-size:6.2cqw;line-height:1}
.w-visual{position:relative;aspect-ratio:1/1.05;border-radius:2cqw;overflow:hidden;background:linear-gradient(160deg,#ede9fe,#fce7f3 70%,#fdf2f8)}
.w-sun{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;left:40%;top:12%;background:radial-gradient(circle,#fbcfe8,#f9a8d4 60%,transparent 70%)}
.w-vase{position:absolute;left:28%;bottom:16%;width:34%;height:56%;border-radius:45% 45% 22% 22% / 38% 38% 18% 18%;background:linear-gradient(100deg,#8b5cf6,#c4b5fd 45%,#7c3aed);box-shadow:inset -1.2cqw -1cqw 2cqw rgba(0,0,0,.18)}
.w-vase::before{content:"";position:absolute;left:32%;top:-12%;width:36%;height:16%;border-radius:20%;background:#7c3aed}
.w-shadow{position:absolute;left:20%;bottom:12%;width:55%;height:6%;border-radius:50%;background:rgba(76,29,149,.25);filter:blur(.8cqw)}
.w-logos{display:flex;justify-content:space-around;padding:2.4cqw 4cqw;border-block:1px solid #ece7e0;font:600 1.8cqw var(--display);letter-spacing:.25em;color:#a8a29e}
.w-title{padding:5cqw 4cqw 2.4cqw;display:grid;gap:.8cqw}
.w-title h5,.w-split h5,.w-news h5{font-size:4cqw;line-height:1.05}
.w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:0 4cqw}
.w-prod{display:grid;gap:.8cqw;padding-bottom:1cqw;border-radius:1.6cqw;transition:transform .3s}
.w-prod i{display:block;aspect-ratio:4/5;border-radius:1.6cqw;background:radial-gradient(circle at 50% 45%,var(--b) 0 22%,transparent 23%),linear-gradient(160deg,var(--a),#fff 90%)}
.w-prod b{font-size:1.7cqw}.w-prod span{font-size:1.5cqw;color:#78716c}
.w-prod.hov{animation:wHover 16s infinite}
@keyframes wHover{0%,33%,43%,100%{transform:none}35%,41%{transform:translateY(-1cqw)}}
.w-split{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center;margin:6cqw 4cqw 0;padding:4cqw;border-radius:2cqw;background:#1c1917}
.w-split i{display:block;aspect-ratio:1;border-radius:1.6cqw;background:radial-gradient(circle at 40% 40%,#f472b6,#7c3aed 60%,#1e1b4b)}
.w-split div{display:grid;gap:1.6cqw;justify-items:start}
.w-split h5{color:#faf7f2}.w-split p{color:#a8a29e}.w-split small{color:#f9a8d4}
.w-split .w-btn.ghost{color:#faf7f2;box-shadow:inset 0 0 0 1px #faf7f2}
.w-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:6cqw 4cqw 0}
.w-reviews div{display:grid;gap:.8cqw;padding:2.4cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.05)}
.w-reviews em{font-style:normal;color:#f59e0b;font-size:1.5cqw;letter-spacing:.1em}
.w-reviews p{color:#44403c;font-size:1.6cqw}
.w-news{margin:6cqw 4cqw 0;padding:4cqw;border-radius:2cqw;background:linear-gradient(120deg,#ede9fe,#fce7f3);display:grid;gap:2cqw;justify-items:center;text-align:center}
.w-news p{display:flex;gap:1cqw}
.w-news p span{padding:1cqw 2.4cqw;border-radius:99px;background:#fff;color:#a8a29e;font-size:1.5cqw;min-width:22cqw;text-align:left}
.w-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6cqw;padding:3cqw 4cqw;border-top:1px solid #ece7e0}
.w-foot b{font:700 2cqw var(--display);letter-spacing:.3em}
.w-foot span{font-size:1.3cqw;color:#a8a29e}
.w-cursor{position:absolute;width:3.2cqw;height:3.2cqw;left:0;top:0;filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.35));animation:wCursor 16s cubic-bezier(.45,0,.25,1) infinite;pointer-events:none}
@keyframes wCursor{
  0%{transform:translate(70cqw,70cqh)}
  6%{transform:translate(9cqw,58cqh)}
  7.5%{transform:translate(9cqw,58cqh) scale(.82)}
  9%{transform:translate(9cqw,58cqh)}
  33%{transform:translate(48cqw,48cqh)}
  42%{transform:translate(50cqw,46cqh)}
  62%{transform:translate(60cqw,60cqh)}
  70%{transform:translate(58cqw,62cqh) scale(.82)}
  72%{transform:translate(58cqw,62cqh)}
  100%{transform:translate(70cqw,70cqh)}
}
@media (prefers-reduced-motion:reduce){.w-page,.w-cursor,.w-prod.hov{animation:none}}