/* TEST MANETTE — banc de test : un écran de mesure, deux oscilloscopes ronds pour les joysticks, gâchettes en jauges,
   boutons en grille qui s'allument. Mobile d'abord : gâchettes en ligne au-dessus des deux joysticks. */
.pad-intro { padding: 18px 0 8px; }
.pad-intro h1 { margin-top: 4px; font-size: clamp(2.1rem, 8.6vw, 4.2rem); font-stretch: 86%; line-height: .98; letter-spacing: -.03em; max-width: 14ch; }
.pad-intro .sv-lead { max-width: 38rem; }

.pad { position: relative; max-width: 76rem; margin: 22px var(--gut) 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(90, 169, 255, .08), transparent 70%), var(--panel); }
@media (min-width: 1300px) { .pad { margin-left: auto; margin-right: auto; } }
.pad-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); }
.pad-state { display: flex; align-items: center; gap: 10px; font: 500 .8125rem/1.3 var(--mono); letter-spacing: .04em; color: var(--dim); }
.pad-state .led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--standby); box-shadow: 0 0 10px rgba(255, 69, 58, .7); }
.pad-state.on { color: var(--ink); }
.pad-state.on .led { background: #3ee1a2; box-shadow: 0 0 10px rgba(62, 225, 162, .8); }
.pad-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pad-pick button { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--dim); font: 500 .8125rem/1 var(--sans); cursor: pointer; }
.pad-pick button[aria-pressed="true"] { color: var(--ink); border-color: var(--signal-2); }

/* La scène : une DualSense dessinée en ossature technique (vue de face, traits fins, organes internes visibles).
   En attente elle reste en veilleuse et ses touches s'allument tour à tour ; à la connexion, flash d'allumage ;
   en direct, chaque commande s'éclaire dans sa couleur, les sticks bougent dans leur puits, L2/R2 se remplissent. */
.pad-stage { position: relative; width: min(100%, 660px); margin: 18px auto 0; }
.pad-draw { display: block; width: 100%; height: auto; overflow: visible; --ln: 154, 216, 255; }
.pad-draw * { vector-effect: non-scaling-stroke; }
.pad-draw .cons path { fill: none; stroke: rgba(var(--ln), .14); stroke-width: 1; stroke-dasharray: 3 5; }
.pad-draw .halo { fill: none; stroke: rgba(90, 169, 255, .55); stroke-width: 6; }
.pad-draw .shell { fill: rgba(90, 169, 255, .045); stroke: rgb(var(--ln)); stroke-width: 1.6; }
.pad-draw .seam { fill: none; stroke: rgba(var(--ln), .4); stroke-width: 1.1; }
.pad-draw .bar { fill: none; stroke: #5aa9ff; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.pad-draw .int rect, .pad-draw .int circle { fill: none; stroke: rgba(var(--ln), .32); stroke-width: 1; stroke-dasharray: 2 3; }
.pad-draw .int circle[r="2.6"] { fill: rgba(var(--ln), .25); stroke: none; }
.pad-draw .screw { fill: none; stroke: rgba(var(--ln), .35); stroke-width: 1; }
.pad-draw .grill circle { fill: rgba(var(--ln), .45); }
.pad-draw .well { fill: rgba(3, 6, 14, .5); stroke: rgba(var(--ln), .55); stroke-width: 1.2; }
.pad-draw .stk .cap { fill: rgba(10, 15, 28, .9); stroke: rgb(var(--ln)); stroke-width: 1.6; }
.pad-draw .stk .cap2 { fill: none; stroke: rgba(var(--ln), .45); stroke-width: 1; }
.pad-draw .stk .dot { fill: rgb(var(--ln)); }
.pad-draw .stk.l3 .cap { fill: rgba(223, 244, 255, .9); }
.pad-draw .trg { fill: rgba(154, 216, 255, calc(.05 + var(--v, 0) * .85)); stroke: rgba(var(--ln), calc(.6 + var(--v, 0) * .4)); stroke-width: 1.2; }   /* se remplit selon la pression */
.pad-draw [data-b] .bg, .pad-draw .mic .bg { fill: rgba(var(--c, 223, 244, 255), 0); stroke: rgb(var(--ln)); stroke-width: 1.4; transition: fill .14s ease-out; }
.pad-draw [data-b] .gl { fill: none; stroke: rgb(var(--c, 223, 244, 255)); stroke-width: 1.6; stroke-linejoin: round; transition: stroke .14s; }
.pad-draw .gl.t { fill: rgb(var(--ln)); stroke: none; font: 600 9px/1 var(--mono); text-anchor: middle; }
.pad-draw [data-b].on .bg { fill: rgba(var(--c, 223, 244, 255), .92); stroke: rgb(var(--c, 223, 244, 255)); transition-duration: .02s; }
.pad-draw [data-b].on .gl { stroke: #04070f; }
.pad-draw [data-b].on .gl.t { fill: #04070f; }
.pad-draw [data-b="17"].on .bg { fill: rgba(var(--c, 223, 244, 255), .28); }
/* Couleurs d'origine des touches (PlayStation par défaut, Xbox si une manette Xbox est branchée) */
.pad-draw [data-b="0"] { --c: 126, 177, 232; } .pad-draw [data-b="1"] { --c: 254, 101, 103; }
.pad-draw [data-b="2"] { --c: 255, 103, 248; } .pad-draw [data-b="3"] { --c: 62, 225, 162; }
.pad[data-kind="xb"] .pad-draw [data-b="0"] { --c: 62, 225, 120; } .pad[data-kind="xb"] .pad-draw [data-b="1"] { --c: 254, 80, 80; }
.pad[data-kind="xb"] .pad-draw [data-b="2"] { --c: 80, 150, 255; } .pad[data-kind="xb"] .pad-draw [data-b="3"] { --c: 255, 205, 60; }
.pad[data-kind="xb"] .pad-draw .gl:not(.t) { display: none; }   /* pas de △○✕□ sur une manette Xbox */

.pad-draw { transition: opacity .5s; }
.pad:not(.is-live) .pad-draw { opacity: .6; }
.is-live .pad-draw { animation: pad-on .9s ease-out; }
@keyframes pad-on { 0% { filter: brightness(2.2); } 12% { filter: brightness(.5); } 30% { filter: brightness(1.5); } 100% { filter: none; } }
/* Vibration : le moteur testé s'agite et passe en doré ; haut-parleur : la grille s'allume ; micro : il s'éclaire selon le niveau */
.pad-draw .motor { transform-box: fill-box; transform-origin: center; }
.pad.rum-l .pad-draw .m-l circle, .pad.rum-r .pad-draw .m-r circle, .pad.rum-lr .pad-draw .motor circle { stroke: #ffd76a; stroke-dasharray: none; }
.pad.rum-t .pad-draw .trg { stroke: #ffd76a; }
.pad.speak .pad-draw .grill circle { fill: #ffd76a; }
.pad-draw .mic .bg { fill: rgba(62, 225, 162, calc(var(--lvl, 0) * .95)); }
@media (prefers-reduced-motion: no-preference) {
  .pad.rum-l .pad-draw .m-l, .pad.rum-r .pad-draw .m-r, .pad.rum-lr .pad-draw .motor, .pad.rum-t .pad-draw .trg { animation: pad-rumble .06s linear infinite; }
  .pad.speak .pad-draw .grill { animation: pad-rumble .09s linear infinite; }
  .pad-draw .trg { transform-box: fill-box; transform-origin: center; }
  .pad-draw .grill { transform-box: fill-box; transform-origin: center; }
  .pad:not(.is-live) .pad-draw { animation: pad-breathe 3.6s ease-in-out infinite; }
  .pad:not(.is-live) .pad-draw [data-b="3"] .bg, .pad:not(.is-live) .pad-draw [data-b="1"] .bg,
  .pad:not(.is-live) .pad-draw [data-b="0"] .bg, .pad:not(.is-live) .pad-draw [data-b="2"] .bg { animation: pad-k 3.2s steps(1) infinite; }
  .pad:not(.is-live) .pad-draw [data-b="1"] .bg { animation-delay: .8s; } .pad:not(.is-live) .pad-draw [data-b="0"] .bg { animation-delay: 1.6s; }
  .pad:not(.is-live) .pad-draw [data-b="2"] .bg { animation-delay: 2.4s; }
}
@media (prefers-reduced-motion: reduce) { .is-live .pad-draw { animation: none; } }
@keyframes pad-breathe { 50% { opacity: .85; } }
@keyframes pad-k { 0%, 18% { fill: rgba(var(--c), .85); } 19%, 100% { fill: rgba(var(--c), 0); } }
@keyframes pad-rumble { 25% { transform: translate(1.5px, -1px); } 75% { transform: translate(-1.5px, 1px); } }

.pad-wait { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 26px; text-align: center; }
.pad-call { max-width: 30rem; font-size: 1.0625rem; color: #c6d0e2; }
.pad-call b { color: var(--ink); font-weight: 600; }
.pad-wait .fine { max-width: 30rem; }

/* En direct */
.pad-live { padding-top: 16px; }
.pad-board { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "l2 r2" "s1 s2"; gap: 14px 12px; }
.pad-board .trig:first-child { grid-area: l2; }
.pad-board .trig:last-child { grid-area: r2; }
.scope { margin: 0; min-width: 0; }
.scope canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 169, 255, .07), rgba(3, 6, 14, .6)); box-shadow: inset 0 0 0 1px var(--line); }
.scope figcaption { display: grid; gap: 3px; margin-top: 10px; text-align: center; }
.scope figcaption b { font-size: .9375rem; font-weight: 600; }
.scope .v { font: 500 clamp(.625rem, 3.1vw, .8125rem)/1.2 var(--mono); color: var(--signal-2); white-space: pre; font-variant-numeric: tabular-nums; }
.scope .c { font-size: .75rem; line-height: 1.3; color: var(--dim); }

.trig { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.trig b { font: 600 .8125rem/1 var(--mono); }
.trig output { min-width: 4ch; text-align: right; font: 500 .75rem/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.trig-bar { position: relative; height: 10px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.trig-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #5aa9ff, #9ad8ff); transform-origin: left; transform: scaleX(var(--v, 0)); }

.pad-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
.pad-btns li { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 4px; border-radius: 9px; border: 1px solid var(--line); background: rgba(3, 6, 14, .5);
  font: 600 .8125rem/1 var(--mono); color: var(--dim); transition: background-color .08s, color .08s, border-color .2s; }
.pad-btns li.ps-0 { --k: 126, 177, 232; } .pad-btns li.ps-1 { --k: 254, 101, 103; } .pad-btns li.ps-2 { --k: 255, 103, 248; } .pad-btns li.ps-3 { --k: 62, 225, 162; }
.pad-btns li[class*="ps-"] { font-size: 1.0625rem; color: rgb(var(--k)); }
.pad-btns li.seen { border-color: rgba(62, 225, 162, .45); }
.pad-btns li.seen::after { content: ""; position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #3ee1a2; }
.pad-btns li.on { background: var(--signal-2); border-color: var(--signal-2); color: #04070f; box-shadow: 0 0 18px rgba(90, 169, 255, .55); }
.pad-count { min-height: 1.4em; margin-top: 10px; font: 500 .8125rem/1.4 var(--mono); color: var(--dim); }

.pad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.pad-actions .btn { flex: 1 1 220px; }
.pad-reset { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--dim); font: 500 .875rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pad-reset:hover { color: var(--ink); }
.btn:disabled { opacity: .5; cursor: progress; }

.pad-diag { margin-top: 16px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 215, 106, .45); background: rgba(255, 196, 61, .06); }
.pad-diag-t { color: var(--ink); }
.pad-diag-t b:first-child { margin-right: 6px; font: 600 .75rem/1 var(--mono); color: #ffd76a; }
.pad-diag-bar { display: block; height: 4px; margin-top: 12px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pad-diag-bar i { display: block; height: 100%; width: 0; background: #ffd76a; }

.pad-result { --r: 62, 225, 162; margin-top: 16px; padding: 18px 16px; border-radius: 14px; border: 1px solid rgba(var(--r), .5); background: rgba(var(--r), .06); }
.pad-result.mid { --r: 255, 215, 106; }
.pad-result.bad { --r: 255, 69, 58; }
.pad-result h3 { font-size: 1.5rem; letter-spacing: -.01em; color: rgb(var(--r)); outline: none; }
.pad-result ul { margin-top: 12px; border-top: 1px solid var(--line); }
.pad-result li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pad-result li span { text-align: right; font-weight: 600; }
.pad-result li.ok span { color: #3ee1a2; } .pad-result li.mid span { color: #ffd76a; } .pad-result li.bad span { color: #ff6b61; }
.pad-result li small { grid-column: 1 / -1; font: 400 .75rem/1.4 var(--mono); color: var(--dim); }
.pad-result p { margin-top: 12px; color: #c6d0e2; }
.pad-result p b { color: var(--ink); }
.pad-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pad-cta .btn { flex: 1 1 240px; }
.pad-again { margin-top: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--signal-2); font: 500 .9375rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pad button:focus-visible, .pad-pick button:focus-visible { outline: 2px solid var(--signal-2); outline-offset: 2px; }

/* Tablette et plus : gâchettes verticales de part et d'autre des deux joysticks */
@media (min-width: 720px) {
  .pad { padding: 18px 22px 22px; }
  .pad-board { grid-template-columns: 54px minmax(0, 300px) minmax(0, 300px) 54px; grid-template-areas: "l2 s1 s2 r2"; justify-content: center; gap: 28px; }
  .trig { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; max-height: 300px; }
  .trig output { text-align: center; }
  .trig-bar { width: 14px; height: 100%; min-height: 160px; }
  .trig-bar i { background: linear-gradient(0deg, #5aa9ff, #9ad8ff); transform-origin: bottom; transform: scaleY(var(--v, 0)); }
  .pad-btns { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 46rem; margin-inline: auto; }
  .pad-count { text-align: center; }
  .pad-actions { justify-content: center; }
  .pad-actions .btn { flex: 0 1 auto; }
}

/* Vibration, son et micro */
.pad-extra { display: grid; gap: 12px; margin-top: 22px; }
.pad-x { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(3, 6, 14, .45); }
.pad-x h3 { font-size: 1.0625rem; font-weight: 600; }
.pad-x-msg { margin-top: 6px; font-size: .875rem; color: var(--dim); }
.pad-x-msg b { color: var(--ink); font-weight: 600; }
.pad-x-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 12px; }
.pad-x-row button, .pad-x-btn { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(154, 216, 255, .35); background: rgba(90, 169, 255, .08);
  color: var(--ink); font: 600 .875rem/1 var(--sans); cursor: pointer; transition: background-color .15s, border-color .15s; }
.pad-x-row button:hover, .pad-x-btn:hover { background: rgba(90, 169, 255, .16); border-color: var(--signal-2); }
.pad-x-row button:disabled { opacity: .4; cursor: not-allowed; }
.pad-x-btn[aria-pressed="true"] { border-color: #3ee1a2; background: rgba(62, 225, 162, .12); }
.pad-au-go { width: 100%; margin-top: 12px; }
.pad-au { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 12px; }
.pad-x-sel { display: grid; gap: 4px; min-width: 0; font-size: .75rem; color: var(--dim); }
.pad-x-sel select { width: 100%; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #070b16; color: var(--ink); font: 400 .875rem/1 var(--sans); }
.pad-meter { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pad-meter i { display: block; height: 100%; background: linear-gradient(90deg, #3ee1a2, #ffd76a 70%, #ff6b61); transform-origin: left; transform: scaleX(0); transition: transform .06s linear; }
@media (min-width: 720px) { .pad-extra { grid-template-columns: 1fr 1.4fr; max-width: 52rem; margin-inline: auto; } }

/* Test de gel : frise de 60 secondes, une case par seconde */
.pad-frz-card { grid-column: 1 / -1; }
.pad-frz-card > .btn { width: 100%; margin-top: 12px; }
.frz-line { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin-top: 14px; }
.frz-line li { height: 18px; border-radius: 2px; background: rgba(154, 216, 255, .08); }
.frz-line li.s-idle { background: rgba(154, 216, 255, .22); }
.frz-line li.s-ok { background: #3ee1a2; }
.frz-line li.s-jump { background: #ffd76a; }
.frz-line li.s-gel { background: #ff453a; box-shadow: 0 0 8px rgba(255, 69, 58, .7); }
.frz-line li.s-off { background: repeating-linear-gradient(135deg, #ff453a 0 3px, #5a0f0b 3px 6px); }
.frz-line li.cur { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.frz-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.frz-k div { padding: 8px 6px; border-radius: 8px; background: rgba(154, 216, 255, .05); text-align: center; }
.frz-k dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .625rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.frz-k dd { margin: 4px 0 0; font: 600 clamp(.875rem, 4vw, 1.125rem)/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 399px) { .frz-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frz-now { min-height: 1.4em; margin-top: 8px; font-size: .875rem; color: #c6d0e2; }
.frz-res { --r: 62, 225, 162; margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(var(--r), .5); background: rgba(var(--r), .06); }
.frz-res.mid { --r: 255, 215, 106; } .frz-res.bad { --r: 255, 69, 58; }
.frz-res h4 { font-size: 1.25rem; color: rgb(var(--r)); }
.frz-res p { margin-top: 8px; color: #c6d0e2; }
@media (min-width: 720px) { .frz-line { grid-template-columns: repeat(60, 1fr); } .frz-line li { height: 28px; } }