/* PC portables — pédagogie visuelle, audit pondéré et animations */
.pc-hero-stage{position:relative;min-height:280px;display:grid;place-items:center}
.pc-laptop{width:min(420px,88%);aspect-ratio:16/10;position:relative;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.pc-laptop-lid{position:absolute;inset:0 6% 18% 6%;border:1px solid color-mix(in srgb,var(--tone,#3f8aa3) 55%,transparent);border-radius:14px;background:rgba(255,255,255,.04);overflow:hidden}
.pc-laptop-screen{position:absolute;inset:8%;border-radius:8px;background:linear-gradient(180deg,rgba(63,138,163,.16),rgba(63,138,163,.03));overflow:hidden}
.pc-laptop-base{position:absolute;left:-2%;right:-2%;bottom:0;height:16%;border-radius:8px 8px 14px 14px;border:1px solid color-mix(in srgb,var(--tone,#3f8aa3) 45%,transparent);background:rgba(255,255,255,.05)}
.pc-laptop-base::after{content:"";position:absolute;left:38%;right:38%;top:28%;height:3px;border-radius:99px;background:color-mix(in srgb,var(--tone,#3f8aa3) 55%,transparent)}
.pc-window{position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.07);animation:pc-float 7s ease-in-out infinite}
.pc-window:nth-child(1){left:7%;top:12%;width:34%;height:34%}
.pc-window:nth-child(2){right:8%;top:20%;width:28%;height:28%;animation-delay:-2.4s}
.pc-window:nth-child(3){left:24%;bottom:10%;width:44%;height:26%;animation-delay:-4.2s}
@keyframes pc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pc-chip{position:absolute;right:12%;bottom:22%;width:52px;height:52px;border-radius:10px;border:1px solid color-mix(in srgb,var(--tone,#3f8aa3) 70%,transparent);display:grid;place-items:center;background:rgba(0,0,0,.35);animation:pc-pulse 3.2s ease-in-out infinite}
.pc-chip::before{content:"CPU";font:700 10px/1 DM Sans,sans-serif;color:var(--tone,#3f8aa3)}
@keyframes pc-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tone,#3f8aa3) 35%,transparent)}50%{box-shadow:0 0 0 12px transparent}}

.pc-diagram{display:grid;gap:1rem;margin-top:1.2rem}
.pc-visual-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.1rem;background:rgba(255,255,255,.03)}
.pc-visual-card h3{margin:.2rem 0 .5rem}
.pc-visual-card p{color:rgba(255,255,255,.72);font-size:.95rem}
.pc-ram{display:grid;gap:.45rem}
.pc-ram-track{height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.pc-ram-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--tone,#3f8aa3),#7ee8d3);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pc-ram-apps{display:flex;flex-wrap:wrap;gap:.35rem}
.pc-ram-apps span{font-size:.72rem;padding:.25rem .5rem;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.pc-ram-apps span.off{opacity:.35;transform:scale(.94)}
.pc-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.8rem 0}
.pc-tabs button{border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;border-radius:99px;padding:.4rem .75rem;cursor:pointer}
.pc-tabs button.is-active{background:color-mix(in srgb,var(--tone,#3f8aa3) 22%,transparent);border-color:var(--tone,#3f8aa3)}
.pc-panel{display:none}
.pc-panel.is-active{display:block;animation:pc-fade .45s ease both}
@keyframes pc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pc-screen-demo{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.pc-oled .pc-black-zone{background:#000}
.pc-lcd .pc-black-zone{background:#111;border-top:2px solid rgba(255,255,255,.12)}
.pc-black-zone{position:absolute;inset:auto 12% 12% 12%;height:34%;border-radius:6px}
.pc-pixels{position:absolute;inset:8%;display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.pc-pixels i{background:color-mix(in srgb,var(--tone,#3f8aa3) 40%,transparent);border-radius:2px;animation:pc-blink 2.6s ease-in-out infinite}
.pc-pixels i:nth-child(3n){animation-delay:-.8s}.pc-pixels i:nth-child(4n){animation-delay:-1.5s}
@keyframes pc-blink{0%,100%{opacity:.25}50%{opacity:.9}}
.pc-gpu{display:flex;align-items:flex-end;gap:.5rem;height:120px}
.pc-gpu i{flex:1;border-radius:6px 6px 0 0;background:color-mix(in srgb,var(--tone,#3f8aa3) 25%,transparent);animation:pc-rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.pc-gpu i:nth-child(2){height:45%;animation-delay:.1s}.pc-gpu i:nth-child(3){height:70%;animation-delay:.2s}.pc-gpu i:nth-child(4){height:100%;animation-delay:.3s}
@keyframes pc-rise{from{height:0;opacity:0}to{opacity:1}}
.pc-weight{display:flex;align-items:center;gap:1rem}
.pc-weight-meter{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.1);position:relative}
.pc-weight-dot{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background:var(--tone,#3f8aa3);transform:translate(-50%,-50%);transition:left .8s cubic-bezier(.2,.8,.2,1)}

.pc-audit{display:grid;gap:.8rem}
.pc-audit-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.03);overflow:hidden}
.pc-audit-head{display:flex;align-items:center;gap:.8rem;width:100%;padding:1rem;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.pc-audit-no{font:700 .8rem/1 DM Sans,sans-serif;color:var(--tone,#3f8aa3);min-width:2rem}
.pc-audit-title{display:grid;gap:.15rem;flex:1}
.pc-audit-title strong{font-size:1.02rem}
.pc-audit-title small{color:rgba(255,255,255,.62)}
.pc-audit-state{font-size:.75rem;color:rgba(255,255,255,.6);white-space:nowrap}
.pc-audit-card.is-done .pc-audit-state{color:var(--tone,#3f8aa3)}
.pc-audit-body{display:none;padding:0 1rem 1rem}
.pc-audit-card.is-open .pc-audit-body{display:block;animation:pc-fade .35s ease both}
.pc-options{display:flex;flex-wrap:wrap;gap:.45rem}
.pc-options button{border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;border-radius:99px;padding:.45rem .8rem;cursor:pointer;font-size:.88rem}
.pc-options button.is-active{background:color-mix(in srgb,var(--tone,#3f8aa3) 22%,transparent);border-color:var(--tone,#3f8aa3)}
.pc-audit-help{margin:.6rem 0 0;color:rgba(255,255,255,.65);font-size:.88rem}
.pc-audit-result{margin-top:1rem;border:1px solid color-mix(in srgb,var(--tone,#3f8aa3) 40%,transparent);border-radius:18px;padding:1.1rem;background:rgba(63,138,163,.06)}
.pc-audit-result h3{margin:.1rem 0 .4rem}
.pc-profile-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0}
.pc-profile-pills span{border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:.3rem .6rem;font-size:.8rem}
.pc-profile-pills span.is-active{background:color-mix(in srgb,var(--tone,#3f8aa3) 22%,transparent);border-color:var(--tone,#3f8aa3)}
.pc-priorities{margin-top:.7rem}
.pc-priorities strong{display:block;margin-bottom:.35rem}
.pc-priorities ul{margin:0;padding-left:1.1rem;color:rgba(255,255,255,.78)}
.pc-priorities li{margin:.2rem 0}
.pc-audit-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

.pc-catalogue{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pc-product{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1rem;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:.55rem}
.pc-product h3{font-size:1.05rem;margin:0}
.pc-product .meta{color:rgba(255,255,255,.65);font-size:.85rem}
.pc-score{display:flex;gap:.35rem;flex-wrap:wrap}
.pc-score span{font-size:.72rem;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:.2rem .5rem}
.pc-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.pc-bar i{display:block;height:100%;width:0;background:var(--tone,#3f8aa3);transition:width .7s ease}
.pc-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.pc-filters button{border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;border-radius:99px;padding:.4rem .75rem;cursor:pointer}
.pc-filters button.is-active{background:color-mix(in srgb,var(--tone,#3f8aa3) 22%,transparent);border-color:var(--tone,#3f8aa3)}
.pc-lexique{display:grid;gap:.6rem}
.pc-lexique details{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.8rem 1rem;background:rgba(255,255,255,.03)}
.pc-lexique summary{cursor:pointer;font-weight:650}
.pc-lexique p{color:rgba(255,255,255,.72);margin:.5rem 0 0}