/* VB Safety · page Innovation : trois chapitres, chacun avec son illustration animée */
.lab { padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 110px); }
.lab-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.lab-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(36px, 5vw, 72px) 0; border-bottom: 1px solid var(--ligne); }
.lab-n { font: 500 clamp(56px, 6vw, 88px)/.9 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(224, 108, 52, .75); letter-spacing: -.02em; }
.lab-st { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); margin-bottom: 18px; }
.lab-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(224, 108, 52, .55); animation: lab-ping 2.4s ease-out infinite; }
.lab-txt h2 { margin: 0; font: 600 clamp(32px, 3.6vw, 52px)/1.04 var(--serif); letter-spacing: -.04em; }
.lab-txt p { margin: 16px 0 0; max-width: 40ch; color: var(--doux); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; }
.lab-vis { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 70% 20%, rgba(224, 108, 52, .07), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)); }
.lab-vis::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%); }
.lab-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-vis .l { fill: none; stroke: rgba(190, 202, 213, .42); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lab-vis .l2 { fill: none; stroke: rgba(190, 202, 213, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lab-vis .a { fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lab-vis .dot { fill: var(--signal); }
.lab-vis .tag { font: 600 9px var(--mono); letter-spacing: .14em; fill: rgba(190, 202, 213, .55); }
/* 01 : ondes de mesure et signal qui retombe */
.v1 .ring { fill: none; stroke: var(--signal); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-origin: 96px 100px; transform-box: view-box; animation: lab-ring 3.6s ease-out infinite; opacity: 0; }
.v1 .r2 { animation-delay: 1.2s; } .v1 .r3 { animation-delay: 2.4s; }
.v1 .trace { stroke-dasharray: 420; stroke-dashoffset: 420; animation: lab-draw 4.8s ease-in-out infinite; }
/* 02 : ligne de crête, faisceau qui balaie, point chaud */
.v2 .beam { fill: url(#lab-beam); animation: lab-sweep 6s ease-in-out infinite alternate; transform-box: view-box; }
.v2 .smoke { fill: none; stroke: rgba(224, 108, 52, .45); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 6 8; animation: lab-smoke 2.4s linear infinite; }
@keyframes lab-smoke { to { stroke-dashoffset: -28; } }
.v2 .hot { transform-origin: 214px 140px; transform-box: view-box; animation: lab-ring 2.8s ease-out infinite; opacity: 0; fill: none; stroke: var(--signal); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* 03 : cellule de batterie, température qui monte */
.v3 .fill { fill: url(#lab-heat); transform-origin: 0 150px; transform-box: view-box; animation: lab-rise 5s cubic-bezier(.5, 0, .2, 1) infinite; }
.v3 .curve { stroke-dasharray: 260; stroke-dashoffset: 260; animation: lab-draw 5s cubic-bezier(.5, 0, .2, 1) infinite; }
.v3 .end { animation: lab-blink 5s steps(1) infinite; }
@keyframes lab-ping { 0% { box-shadow: 0 0 0 0 rgba(224, 108, 52, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(224, 108, 52, 0); } }
@keyframes lab-ring { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes lab-draw { 0% { stroke-dashoffset: 420; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lab-sweep { from { transform: translateX(-60px); } to { transform: translateX(150px); } }
@keyframes lab-rise { 0% { transform: scaleY(.08); } 70%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
@keyframes lab-blink { 0%, 69% { opacity: 0; } 70%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
.lab-fin { display: flex; margin-top: clamp(36px, 5vw, 56px); }
.lab-fin p { margin: 0; font: 400 clamp(20px, 2vw, 26px)/1.3 var(--serif); max-width: 32ch; }
.lab-fin .maj { display: block; width: 100%; margin: 0; }
@media (max-width: 900px) {
  .lab-item { grid-template-columns: 1fr; gap: 0; padding: 32px 0 40px; }
  .lab-n { font-size: 44px; margin-bottom: 14px; }
  .lab-vis { order: 3; margin-top: 24px; aspect-ratio: 16 / 9; }
  .lab-txt h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .lab-fin .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab *, .lab *::before { animation: none !important; }
  .v1 .ring { opacity: .5; } .v1 .trace, .v3 .curve { stroke-dashoffset: 0; } .v3 .fill { transform: none; } .v3 .end { opacity: 1; } .v2 .hot { opacity: .6; }
}
.lab > .wrap > .maj { display: block; margin-top: 18px; }