/* Pages produit : complète site.css */
.p-hero { position: relative; background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.p-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; touch-action: pan-y; }
.p-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,12,44,.92) 0%, rgba(9,12,44,.55) 45%, rgba(9,12,44,0) 75%), linear-gradient(180deg, transparent 60%, var(--navy) 100%); }
.p-hero .wrap { min-height: clamp(540px, 74vh, 780px); display: grid; align-content: center; gap: var(--s-4); padding-block: var(--s-7); }
.crumb { font-size: var(--t-small); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.crumb a { text-decoration: none; } .crumb a:hover { color: var(--accent); }
.p-hero .code { font: 900 clamp(1.1rem, 2vw, 1.5rem)/1 var(--f-dot); color: var(--accent); letter-spacing: .06em; text-shadow: 0 0 18px rgba(70,224,250,.55); }
.p-hero h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); font-weight: 700; letter-spacing: -0.02em; max-width: 15ch; }
.p-hero .tagline { font-size: 1.2rem; font-weight: 300; color: #D9DEEE; }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.p-chips li { font: 700 .82rem/1 var(--f-dot); letter-spacing: .05em; padding: 10px 14px; border-radius: var(--r-1); background: rgba(70,224,250,.12); color: var(--accent-light); border: 1px solid rgba(70,224,250,.3); }
.p-hero .hint { margin-top: var(--s-2); }

.p-intro .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.p-intro .media { aspect-ratio: 4/3; border-radius: var(--r-big); }
.p-intro .copy { display: grid; gap: var(--s-3); color: var(--muted); font-size: 1.06rem; }
.p-intro .copy p:first-child { color: var(--text); font-size: 1.25rem; font-weight: 500; line-height: 1.45; }
@media (max-width: 900px) { .p-intro .wrap { grid-template-columns: 1fr; } }

/* Gammes et caractéristiques */
.range-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-6); position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 5; padding-block: 10px; background: linear-gradient(var(--navy) 70%, transparent); }
.range-nav a { font: 700 .9rem/1 var(--f-dot); letter-spacing: .04em; text-decoration: none; padding: 11px 16px; border-radius: var(--r-max); border: 1px solid var(--line); color: var(--muted); transition: all .2s; }
.range-nav a:hover, .range-nav a.on { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.range:first-of-type { border-top: 0; }
.range .media { aspect-ratio: 1/1; border-radius: var(--r-big); position: sticky; top: 150px; }
.range .media img { object-fit: contain; background: var(--navy-up); }
.range-head { display: grid; gap: 10px; margin-bottom: var(--s-4); }
.range-head h2 { font-size: var(--t-h2); }
.range-head .lead { font-size: 1.15rem; font-weight: 600; color: var(--accent-light); }
.range-head p:not(.lead) { color: var(--muted); }
.feats { display: grid; border-top: 1px solid var(--line); }
.feats details { border-bottom: 1px solid var(--line); }
.feats summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 4px; font-weight: 600; font-size: 1.05rem; transition: color .2s; }
.feats summary::-webkit-details-marker { display: none; }
.feats summary:hover { color: var(--accent); }
.feats summary .px { width: 8px; height: 8px; background: var(--line); transition: background .2s, box-shadow .2s; }
.feats details[open] summary .px { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.feats summary::after { content: "+"; font: 900 1.1rem/1 var(--f-dot); color: var(--accent); transition: transform .25s var(--ease); }
.feats details[open] summary::after { transform: rotate(45deg); }
.feats details p { padding: 0 4px 20px 26px; color: var(--muted); max-width: 60ch; }
@media (max-width: 900px) { .range { grid-template-columns: 1fr; } .range .media { position: static; aspect-ratio: 4/3; } }

/* Bénéfices : plaque claire */
.benefits { color-scheme: light; background: var(--paper); color: var(--ink); border-radius: var(--r-big); padding: clamp(28px, 5vw, 72px); }
.benefits h2 { font-size: var(--t-h2); margin-bottom: var(--s-6); }
.benefits h2 .led { color: var(--accent-deep); text-shadow: none; }
.ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.ben-grid div { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.ben-grid b { font: 900 .85rem/1 var(--f-dot); color: var(--accent-deep); letter-spacing: .06em; }
.ben-grid h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.ben-grid p { color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 960px) { .ben-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ben-grid { grid-template-columns: 1fr; } }

/* Gammes de pitch */
.pixels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.pix { background: var(--navy-up); border-radius: var(--r-3); padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.pix canvas { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-2); background: #04061a; }
.pix h3 { font-size: 1.15rem; font-weight: 600; }
.pix h3 span { display: block; font: 900 1.6rem/1.1 var(--f-dot); color: var(--accent); margin-top: 6px; }
.pix p { color: var(--muted); font-size: .92rem; }
@media (max-width: 800px) { .pixels { grid-template-columns: 1fr; } }

/* Spécifications */
.specs { color-scheme: light; background: var(--paper); color: var(--ink); border-radius: var(--r-big); padding: clamp(24px, 4vw, 56px); }
.specs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3); margin-bottom: var(--s-4); }
.specs-head h2 { font-size: var(--t-h2); }
.specs-head p { color: var(--ink-muted); font-size: var(--t-small); }
.table-wrap { overflow-x: auto; border: 1px solid var(--paper-line); border-radius: var(--r-3); background: #FFFFFF; }
.specs table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .92rem; font-variant-numeric: tabular-nums; }
.specs th, .specs td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.specs thead th { background: var(--ink); color: #FFFFFF; font-weight: 600; position: sticky; top: 0; }
.specs thead th small { display: block; font: 900 1.1rem/1.2 var(--f-dot); color: var(--accent); margin-bottom: 2px; }
.specs tbody th { font-weight: 600; color: var(--ink); background: #FFFFFF; position: sticky; left: 0; min-width: 170px; box-shadow: 1px 0 0 var(--paper-line); }
.specs thead th:first-child { left: 0; z-index: 2; }
.specs td { color: var(--ink-muted); }
.specs tr.group th { background: var(--paper); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.specs td.hl, .specs th.hl { background: #E9F5F6; color: var(--ink); }
.specs .same { color: var(--ink-muted); font-style: italic; }
.specs-foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
.specs-foot .btn { --bg: var(--ink); --fg: #FFFFFF; }

/* Architecture vidéo */
.archi .wrap { display: grid; gap: var(--s-5); }
.archi-copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); }
.archi-copy p { color: var(--muted); }
@media (max-width: 800px) { .archi-copy { grid-template-columns: 1fr; } }

/* ---------- Chaîne de pilotage : scène collante, appareils qui se déploient au scroll ---------- */
.arch-track { height: 420vh; margin-top: var(--s-5); }
.arch-track.static { height: auto; }
.arch-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(120% 70% at 50% 72%, #11174d 0%, #080b2b 55%, #04061a 100%); }
.arch-track.static .arch-stage { position: relative; height: 70vh; min-height: 520px; }
.arch-scene { position: absolute; left: 0; top: 0; height: 100%; transition: transform .6s var(--ease); will-change: transform; }
.arch-scene::before { content: ""; position: absolute; left: 0; right: 0; top: var(--base); height: 1px; background: linear-gradient(90deg, transparent, rgba(155,238,255,.35) 15%, rgba(155,238,255,.35) 85%, transparent); }
.arch-scene::after { content: ""; position: absolute; left: 0; right: 0; top: var(--base); height: 38vh; background: linear-gradient(180deg, rgba(39,137,247,.14), transparent 70%); pointer-events: none; }
.arch-beam { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 0 6px rgba(70,224,250,.6)); }
.arch-dev { --k: 0; position: absolute; margin: 0; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); top: var(--base); transform: translateY(calc(-100% + (1 - var(--k)) * 48px)) scale(calc(.86 + .14 * var(--k))); transform-origin: 50% 100%; opacity: var(--k); transition: filter .4s; }
.arch-dev > img:first-child { width: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.arch-dev .refl { position: absolute; left: 0; top: 100%; width: 100%; transform: scaleY(-1); opacity: .22; -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%); mask-image: linear-gradient(180deg, transparent 20%, #000 100%); pointer-events: none; }
.arch-dev figcaption { position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); white-space: nowrap; font: 700 .72rem/1 var(--f-dot); letter-spacing: .06em; color: var(--muted); opacity: calc(var(--k) * .9); }
.arch-dev.on figcaption { color: var(--accent-light); }
.arch-dev.on > img:first-child { filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(70,224,250,.35)); }
.arch-dev::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 160%; height: 70px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 100%, rgba(70,224,250,.45), rgba(123,37,240,.15) 55%, transparent 75%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.arch-dev.on::before { opacity: 1; }
.arch-card { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); top: 12vh; width: min(380px, calc(100% - 32px)); padding: 22px 24px; border-radius: var(--r-3); background: rgba(9,12,44,.78); border: 1px solid var(--line); backdrop-filter: blur(12px); opacity: 0; transform: translateY(10px); }
.arch-card.in { animation: archin .5s var(--ease) forwards; }
@keyframes archin { to { opacity: 1; transform: none; } }
.arch-card h3 { font-size: 1.5rem; margin: 6px 0 8px; }
.arch-card p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0 0 14px; }
.arch-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.arch-card dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arch-card dd { margin: 2px 0 0; font: 700 1.05rem/1.2 var(--f-dot); color: var(--accent-light); }
.arch-scale { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); right: max(16px, calc((100% - 1180px) / 2 + 24px)); bottom: 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; font: 700 .72rem/1 var(--f-dot); letter-spacing: .06em; color: var(--muted); }
.arch-scale i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.arch-scale b { display: block; height: 100%; width: 0; background: var(--grad); transition: width .25s linear; }
@media (max-width: 760px) {
  .arch-track { height: 520vh; }
  .arch-card { top: auto; bottom: 64px; left: 16px; width: calc(100% - 32px); padding: 16px 18px; }
  .arch-card h3 { font-size: 1.2rem; } .arch-card p { font-size: .86rem; }
  .arch-scene { --base: 46vh !important; }
  .arch-dev figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arch-scene { transition: none; } .arch-card { opacity: 1; transform: none; } .arch-card.in { animation: none; } }

/* Réalisations et autres solutions */
.p-proj { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.p-proj a { text-decoration: none; background: var(--navy-up); border-radius: var(--r-3); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.p-proj .media { aspect-ratio: 16/10; }
.p-proj a:hover .media img { transform: scale(1.04); }
.p-proj .body { padding: var(--s-4); display: grid; gap: 8px; align-content: start; }
.p-proj h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.p-proj p { font-size: .9rem; color: var(--muted); }
.p-proj small { font-size: .75rem; color: var(--accent-light); }
.others { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.others a { position: relative; text-decoration: none; border-radius: var(--r-3); overflow: hidden; display: block; }
.others .media { aspect-ratio: 16/10; }
.others span.t { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4); font-size: 1.25rem; font-weight: 700; background: linear-gradient(transparent, rgba(9,12,44,.9)); display: flex; justify-content: space-between; align-items: end; gap: 8px; z-index: 2; }
.others span.t svg { width: 20px; height: 20px; color: var(--accent); transition: transform .25s var(--ease); flex: none; }
.others a:hover span.t svg { transform: translateX(4px); }
.others a:hover .media img { transform: scale(1.04); }
@media (max-width: 800px) { .others { grid-template-columns: 1fr; } }

.p-cta .quote-plate { grid-template-columns: 1.2fr 1fr; }
.p-cta .quote-side { background: transparent; color: var(--ink); }
.p-cta .quote-side::before { display: none; }
.p-cta .quote-side p { color: var(--ink-muted) !important; }
.p-cta .quote-side .label { color: var(--accent-deep); }
.p-cta .quote-side .led { color: var(--accent-deep); text-shadow: none; }
.p-cta .why-box { background: var(--navy-up); color: var(--text); padding: clamp(28px, 4vw, 56px); display: grid; gap: var(--s-4); align-content: center; }
.p-cta .why-box .btn { justify-self: start; }
@media (max-width: 900px) { .p-cta .quote-plate { grid-template-columns: 1fr; } }

/* ---------- Hero en image (rendu 3D fourni) ---------- */
.p-hero.has-img { background: transparent; isolation: auto; }
.p-hero .hero-bg { position: absolute; inset: 0; z-index: -3; background: var(--navy-deep); pointer-events: none; }
.p-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; opacity: .95; }
@media (max-width: 760px) { .p-hero .hero-bg img { object-position: 60% 70%; opacity: .7; } }

/* ---------- Anatomie du produit : visuel 3D + faits ---------- */
.anatomy-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.anatomy-fig { margin: 0; position: relative; border-radius: var(--r-big); overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #17205f 0%, var(--navy-deep) 70%); aspect-ratio: 16/10; }
.anatomy-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.anatomy-fig:hover img { transform: scale(1.0); }
.anatomy-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9,12,44,.55) 100%); pointer-events: none; }
.anatomy-copy { display: grid; gap: var(--s-4); }
.anatomy-copy .sec-head { margin-bottom: 0; }
.anatomy-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anatomy-facts > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-2); background: rgba(255,255,255,.03); }
.anatomy-facts dt { font: 900 1.25rem/1.1 var(--f-dot); letter-spacing: .02em; margin-bottom: 6px; }
.anatomy-facts dd { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 900px) { .anatomy-grid { grid-template-columns: 1fr; } .anatomy-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .anatomy-facts { grid-template-columns: 1fr; } }

/* ---------- Déclaration avec visuel de LED en chute ---------- */
.statement.has-img { position: relative; overflow: hidden; }
.statement-img { position: absolute; right: -4%; top: 50%; width: min(52vw, 760px); transform: translateY(-50%); opacity: .55; pointer-events: none; z-index: -1; }
@media (max-width: 900px) { .statement-img { width: 90vw; right: -20%; opacity: .3; } }

/* ---------- Pluie de LED liée au scroll (rain.js) ---------- */
#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

/* ---------- Intro en vidéo (bouton sur le visuel) ---------- */
.intro-video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-big); text-align: left; }
.intro-video .media { margin: 0; }
.intro-video .play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(9,12,44,.72); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; transition: transform .3s var(--ease), background .3s; }
.intro-video .play svg { width: 26px; height: 26px; margin-left: 4px; }
.intro-video:hover .play, .intro-video:focus-visible .play { transform: scale(1.08); background: var(--accent); color: var(--navy); }
.intro-video:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.intro-video-label { position: absolute; left: 16px; bottom: 14px; font: 700 .72rem/1 var(--f-dot); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-light); background: rgba(9,12,44,.7); padding: 8px 10px; border-radius: var(--r-1); }
/* Rolling Floor : visuels photo (pas de rendu détouré) → plein cadre */
body[data-page="floor"] .range .media img { object-fit: cover; }

/* ---------- LED Poster 3D (displays-led) : même emplacement que le canvas 2D ---------- */
#viz { transition: opacity .5s; } .v3d-wait #viz { opacity: 0; }
#viz3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; touch-action: pan-y; opacity: 0; transition: opacity .8s; cursor: grab; }
#viz3d.on { opacity: 1; } #viz3d:active { cursor: grabbing; }
/* ---------- Showcase LED 3D dans la gamme 03 ---------- */
.range .media.has-3d img { opacity: 0; }
.viz-sc { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .8s; }
.has-3d .viz-sc { opacity: 1; } .viz-sc:active { cursor: grabbing; }
.range .media.has-3d { background: radial-gradient(80% 60% at 50% 70%, #171d58 0%, var(--navy-up) 70%); }

/* ---------- Flexible LED : construction du mur ondulé au scroll ---------- */

/* ---------- Comptoir LED : présentation 3D pilotée au scroll (GSAP ScrollTrigger) ---------- */
.ctr { height: 520vh; position: relative; background: #0F1441; }
.ctr.static, .ctr.nogl { height: auto; }
.ctr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0F1441; }
.ctr.static .ctr-stage, .ctr.nogl .ctr-stage { position: relative; height: 72vh; min-height: 520px; }
.ctr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; }
.ctr.on .ctr-stage canvas { opacity: 1; }
.ctr-head { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); top: 10vh; width: min(520px, calc(100% - 32px)); pointer-events: none; }
.ctr-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin-top: 8px; }
.ctr-caps { position: absolute; right: max(16px, calc((100% - 1180px) / 2 + 24px)); bottom: 84px; width: min(400px, calc(100% - 32px)); pointer-events: none; }
.ctr-cap { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-3); background: rgba(9,12,44,.72); border: 1px solid var(--line); backdrop-filter: blur(12px); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ctr-cap.on { opacity: 1; transform: none; }
.ctr-spec { grid-column: 2; list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; }
.ctr-spec li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; opacity: 0; transform: translateX(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ctr-cap.on .ctr-spec li { opacity: 1; transform: none; }
.ctr-cap.on .ctr-spec li:nth-child(1) { transition-delay: .25s; } .ctr-cap.on .ctr-spec li:nth-child(2) { transition-delay: .4s; } .ctr-cap.on .ctr-spec li:nth-child(3) { transition-delay: .55s; } .ctr-cap.on .ctr-spec li:nth-child(4) { transition-delay: .7s; }
.ctr-spec svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ctr-spec li > span { display: flex; flex-direction: column; gap: 1px; font-size: .82rem; line-height: 1.3; }
.ctr-spec small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ctr-spec strong { font-weight: 600; color: #fff; }
.ctr-cap b { font: 900 1.4rem/1 var(--f-dot); color: var(--accent); letter-spacing: .04em; } .ctr-cap > span { color: var(--text); font-size: .95rem; line-height: 1.45; }
.ctr-bar { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); right: max(16px, calc((100% - 1180px) / 2 + 24px)); bottom: 36px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.ctr-bar b { display: block; height: 100%; width: 0; background: var(--grad); }
.ctr-fallback { display: none; position: absolute; inset: 0; } .ctr-fallback img { width: 100%; height: 100%; object-fit: contain; }
.ctr.nogl canvas, .ctr.nogl .ctr-bar { display: none; } .ctr.nogl .ctr-fallback { display: block; } .ctr.nogl .ctr-cap:not(:first-child) { display: none; }
@media (max-width: 760px) { .ctr { height: 600vh; } .ctr-head { top: 84px; } .ctr-head h2 { font-size: 1.35rem; } .ctr-caps { left: 16px; right: 16px; width: auto; bottom: 64px; } .ctr-cap { padding: 14px 16px; } .ctr-cap > span { font-size: .86rem; } .ctr-spec { margin-top: 8px; padding-top: 8px; gap: 5px; grid-template-columns: 1fr 1fr; } .ctr-spec li { grid-template-columns: 18px 1fr; gap: 6px; } .ctr-spec svg { width: 18px; height: 18px; } .ctr-spec li > span { font-size: .72rem; } .ctr-spec small { font-size: .58rem; } }

/* Comptoir LED : sélecteur d'animation et rotation manuelle */
.ctr-pick { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); bottom: 84px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctr-pick span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.ctr-pick button { font: 500 .8rem/1 var(--f-brand); color: var(--accent-light); background: rgba(9,12,44,.7); border: 1px solid var(--accent-deep); border-radius: var(--r-max); padding: 9px 13px; cursor: pointer; backdrop-filter: blur(8px); transition: all .2s; }
.ctr-pick button:hover { border-color: var(--accent); } .ctr-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.ctr-hint { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); margin: 0; font-size: .78rem; color: var(--muted); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ctr.free .ctr-hint { opacity: 1; } .ctr.free .ctr-stage { cursor: grab; } .ctr.free .ctr-stage:active { cursor: grabbing; }
.ctr.nogl .ctr-pick, .ctr.nogl .ctr-hint { display: none; }
@media (max-width: 760px) { .ctr-pick { left: 16px; right: 16px; bottom: auto; top: 176px; } .ctr-pick span { display: none; } .ctr-pick button { padding: 7px 10px; font-size: .72rem; } .ctr-hint { bottom: 46px; font-size: .7rem; white-space: nowrap; } }

/* ---------- Rolling Floor LED : déroulé 3D au scroll (réutilise les styles .ctr-* du comptoir) ---------- */
.rf { height: 640vh; }
.rf .ctr-caps { width: min(420px, calc(100% - 32px)); }
.rf-dim { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform; display: none; }
.rf-dim.on { display: block; }
.rf-dim i { display: block; width: 2px; height: var(--h, 20px); background: var(--accent); margin-left: -1px; position: relative; box-shadow: 0 0 10px rgba(70,224,250,.6); }
.rf-dim i::before, .rf-dim i::after { content: ""; position: absolute; left: -7px; width: 16px; height: 2px; background: var(--accent); }
.rf-dim i::before { top: 0; } .rf-dim i::after { bottom: 0; }
.rf-dim b { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 900 1.05rem/1 var(--f-dot); color: #fff; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.rf-dim b::after { content: "d’épaisseur, lame comprise"; display: block; margin-top: 6px; font: 500 .7rem/1 var(--f-brand); color: var(--muted); letter-spacing: 0; }
.rf.free .ctr-stage { cursor: grab; } .rf.free .ctr-stage:active { cursor: grabbing; }
@media (max-width: 760px) { .rf { height: 720vh; } .rf-dim b { font-size: .9rem; } }

/* ---------- Sphère LED : de l'ossature à l'astre (réutilise les styles .ctr-*) ---------- */
.sph { height: 640vh; }
.sph .ctr-caps { width: min(420px, calc(100% - 32px)); }
.sph .ctr-pick { opacity: 0; pointer-events: none; transition: opacity .4s; } .sph.free .ctr-pick, .sph.static .ctr-pick { opacity: 1; pointer-events: auto; }
.sph .ctr-stage { cursor: grab; } .sph .ctr-stage:active { cursor: grabbing; }
.sph-dia { position: absolute; left: max(16px, calc((100% - 1180px) / 2 + 24px)); top: calc(10vh + 150px); font: 900 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--f-dot); color: var(--accent-light); letter-spacing: .04em; opacity: 0; transition: opacity .5s; pointer-events: none; text-shadow: 0 0 24px rgba(70,224,250,.35); }
.sph-dia::after { content: "diamètre réel, à côté de Spoony (1,80 m)"; display: block; margin-top: 8px; font: 500 .72rem/1.3 var(--f-brand); color: var(--muted); letter-spacing: 0; }
@media (max-width: 760px) { .sph { height: 720vh; } .sph-dia { top: 150px; font-size: 1.2rem; } .sph-dia::after { font-size: .62rem; } .sph .ctr-pick { top: 214px; } }
.p-intro.noimg .wrap { grid-template-columns: 1fr; max-width: 860px; } .p-intro.noimg .copy p:first-child { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; color: var(--text); }

/* ---------- Logo HOKA : du châssis au film (réutilise .ctr-*) ---------- */
.hk { height: 560vh; }
.hk .ctr-caps { width: min(400px, calc(100% - 32px)); top: calc(10vh + 4px); bottom: auto; }
.hk .ctr-cap { top: 0; bottom: auto; }
.hk .ctr-stage { background: #0F1441; }
.hk-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; pointer-events: none; }
.hk .ctr-stage canvas { z-index: 1; } .hk .ctr-stage > *:not(.hk-bg):not(canvas) { z-index: 2; }
.hk.scene-bg .ctr-head h2, .hk.scene-bg .ctr-head .label { text-shadow: 0 2px 18px rgba(0,0,0,.6); }


.hk-play { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); font: 600 .82rem/1 var(--f-brand); color: var(--navy); background: var(--accent); border: 0; border-radius: var(--r-max); padding: 11px 18px; cursor: pointer; box-shadow: 0 8px 30px rgba(70,224,250,.35); }
@media (max-width: 760px) { .hk { height: 640vh; } .hk .ctr-caps { top: auto; bottom: 64px; } .hk .ctr-cap { top: auto; bottom: 0; } .hk-play { bottom: 220px; } }
.hk .ctr-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: linear-gradient(180deg, rgba(6,8,32,.55) 0%, rgba(6,8,32,0) 32%), linear-gradient(90deg, rgba(6,8,32,.4) 0%, rgba(6,8,32,0) 40%); }
.hk.scene-bg .ctr-stage::after { opacity: 1; }
/* HOKA : surcouche « plan » (cotes et numéros de module) */
.hk-ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hk-dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.hk-dims line { stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(70,224,250,.6)); }
.hk-dims line.t { stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.hk-dl { position: absolute; left: 0; top: 0; font: 900 .95rem/1 var(--f-dot); letter-spacing: .04em; color: #fff; white-space: nowrap; opacity: 0; text-shadow: 0 0 12px rgba(70,224,250,.6), 0 2px 10px rgba(4,6,26,.8); }
.hk-dl.s { font-size: .8rem; color: var(--accent-light); }
.hk-num { position: absolute; left: 0; top: 0; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 13px; font: 900 .82rem/1 var(--f-dot); color: var(--navy); background: rgba(115,251,252,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 14px rgba(70,224,250,.6); opacity: 0; will-change: transform, opacity; }
@media (max-width: 760px) { .hk-dl { font-size: .72rem; } .hk-num { min-width: 18px; height: 18px; font-size: .6rem; padding: 0 4px; } }
body[data-page="flex"] #r0 .media img { object-fit: cover; }   /* photo studio des modules, prolongée en carré */

/* ---------- LZ600COB3 : du module au mur (réutilise .ctr-*) ---------- */
.cob { height: 900vh; }
.cob .ctr-caps { width: min(400px, calc(100% - 32px)); top: calc(10vh + 4px); bottom: auto; } .cob .ctr-cap { top: 0; bottom: auto; }
.cob-ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cob-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cob-svg .fr { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.cob-svg .dim { stroke: var(--accent); stroke-width: 1.5; opacity: 0; filter: drop-shadow(0 0 4px rgba(70,224,250,.6)); } .cob-svg .dim.t { stroke-width: 1; stroke-dasharray: 3 3; }
.cob-tag { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.cob-tag.layer, .cob-tag.back { font: 600 .78rem/1 var(--f-brand); color: #fff; padding: 6px 10px 6px 34px; margin-top: -14px; background: linear-gradient(90deg, transparent 0 26px, rgba(9,12,44,.82) 26px); border-radius: 0 8px 8px 0; }
.cob-tag.layer::before, .cob-tag.back::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 1px; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.cob-tag.layer::after, .cob-tag.back::after { content: ""; position: absolute; left: -3px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cob-tag.dimtxt { font: 900 1rem/1 var(--f-dot); color: #fff; transform-origin: 0 0; margin-left: -1.6em; text-shadow: 0 0 12px rgba(70,224,250,.7), 0 2px 8px rgba(4,6,26,.9); }
.cob-tag.frtag { font: 500 .78rem/1 var(--f-brand); color: #fff; padding: 6px 9px; margin: 6px 0 0 -6px; translate: -100% 0; background: rgba(9,12,44,.75); border-radius: 6px; }
.cob-tag.frtag b { font: 900 .9rem/1 var(--f-dot); color: var(--accent); margin-right: 6px; }
.cob-tag.sptag { font: 700 .74rem/1 var(--f-dot); color: var(--accent-light); translate: -50% -100%; text-shadow: 0 2px 8px rgba(4,6,26,.9); }
@media (max-width: 760px) { .cob { height: 1000vh; } .cob .ctr-caps { top: auto; bottom: 64px; } .cob .ctr-cap { top: auto; bottom: 0; } .cob-tag.layer, .cob-tag.back { font-size: .66rem; } .cob-tag.frtag { font-size: .62rem; } .cob-tag.frtag b { font-size: .7rem; } }
/* Indoor Pro LED : visuels studio fournisseur (fond gris, format 4:3) → carte au même format, image pleine */
body[data-page="indoor"] .range .media { aspect-ratio: 4/3; }
body[data-page="indoor"] .range .media img { object-fit: cover; }
/* Flexible LED : dispositifs (colonne, mur incurvé, anneau, vague) + maintenance frontale */
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.shape { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.shape-img { border-radius: var(--r-big); overflow: hidden; aspect-ratio: 4/3; background: var(--navy-up); }
.shape-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.shape:hover .shape-img img { transform: scale(1.04); }
.shape figcaption { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.shape figcaption b { font: 900 .85rem/1 var(--f-dot); color: var(--accent); letter-spacing: .06em; }
.shape figcaption h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.shape figcaption p { color: var(--muted, rgba(255,255,255,.7)); font-size: .95rem; }
.shape-service { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: var(--s-6); }
.shape-service h3 { font-size: var(--t-h3, 1.6rem); margin: 10px 0 12px; line-height: 1.2; }
.shape-service p { color: var(--muted, rgba(255,255,255,.7)); }
@media (max-width: 1100px) { .shape-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .shape-grid { grid-template-columns: 1fr; } .shape-service { grid-template-columns: 1fr; } }
body[data-page="flex"] .range .media { aspect-ratio: 4/3; }
body[data-page="flex"] .range .media img { object-fit: cover; }
/* Flexible LED · Flexible / Mall V4 : un seul mur 3D ; sous le canvas transparent, le décor (image générée sans écran) puis le fond studio aux tons du site qui s'efface après 94 % */
.fmall { height: 1100vh; background: #161c58; } .fmall .ctr-stage { background: #161c58; }
.fm-bg, .fm-studio { position: absolute; inset: 0; pointer-events: none; }
.fm-bg { background: #26323b; } .fm-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-studio { background: radial-gradient(120% 95% at 42% 38%, #4f5cc0 0%, #3440a0 30%, #232c80 58%, #161c58 100%); }
.fmall .ctr-caps { width: min(400px, calc(100% - 32px)); top: calc(10vh + 4px); bottom: auto; } .fmall .ctr-cap { top: 0; bottom: auto; }
.fmall.at-dest .ctr-cap { background: rgba(7,12,40,.86); border-left: 2px solid #64C3CA; } .fmall.at-dest .ctr-cap.on .ctr-spec { display: none; }   /* légende compacte au-dessus du mur : le décor et le mur restent dégagés */
.fmall.at-dest .ctr-head { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.fmall.nogl .ctr-fallback img { object-fit: cover; }
@media (max-width: 760px) { .fmall { height: 1200vh; } .fmall .ctr-caps { top: auto; bottom: 64px; } .fmall .ctr-cap { top: auto; bottom: 0; } }

/* Mesh LED · « De la LED à la vitrine » : fond transparent au départ (la pluie de LED passe derrière), puis bleu du site */
.msh { height: 1600vh; background: transparent; } .msh .ctr-stage { background: transparent; }
.msh-bg { position: absolute; inset: 0; background: #0F1441; opacity: 0; pointer-events: none; }
.msh-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 52%, #ffffff 0%, #c9feff 10%, #73FBFC 24%, #2789F7 46%, #7B25F0 68%, #2a1a7a 84%, #0F1441 100%); opacity: 0; pointer-events: none; z-index: 1; }
.msh canvas { z-index: 0; } .msh .ctr-head, .msh .ctr-caps, .msh .ctr-bar { z-index: 2; }
.msh .ctr-caps { width: min(400px, calc(100% - 32px)); top: calc(10vh + 4px); bottom: auto; } .msh .ctr-cap { top: 0; bottom: auto; }
.msh.nogl .ctr-fallback img { object-fit: cover; }
@media (max-width: 760px) { .msh { height: 1700vh; } .msh .ctr-caps { top: auto; bottom: 64px; } .msh .ctr-cap { top: auto; bottom: 0; } }

.msh .ctr-head{transition:opacity .4s}
.msh.lite .ctr-head{opacity:0}
/* vitrine Garmin : la baie (à droite) reste dégagée, la légende passe en bas à gauche, devant la porte */
@media (min-width: 761px) { .msh.lite .ctr-caps { left: 16px; right: auto; top: auto; bottom: 64px; width: min(300px, 30vw); } .msh.lite .ctr-cap { top: auto; bottom: 0; } }   /* largeur de la porte : le contenu de la baie n'est jamais masqué */

/* curseur de luminosité de la vitrine Mesh LED */
.msh-lum { position: absolute; right: 16px; bottom: 64px; z-index: 3; width: 240px; padding: 12px 14px; border-radius: 14px; background: rgba(15,20,65,.78); border: 1px solid rgba(115,251,252,.25); backdrop-filter: blur(8px); color: #fff; font-size: .8rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s, transform .35s; }
.msh.vid .msh-lum { opacity: 1; transform: none; pointer-events: auto; }
.msh-lum label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; gap: 8px; }
.msh-lum output { font-family: var(--mono, monospace); color: #73FBFC; font-size: 1rem; }
.msh-lum input { width: 100%; margin: 10px 0 6px; accent-color: #73FBFC; cursor: pointer; }
.msh-lum-row { display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font-size: .7rem; }
@media (min-width: 761px) { .msh-lum { right: 16px; top: calc(10vh + 8px); bottom: auto; } }   /* en haut à droite : ni sur la baie basse, ni sous la bulle d’aide */
@media (max-width: 760px) { .msh-lum { top: 128px; bottom: auto; right: 12px; width: 200px; padding: 10px 12px; } }
.msh-lum output { white-space: nowrap; }
@media (max-width: 760px) { .msh-lum { width: 210px; font-size: .72rem; } .msh-lum output { font-size: .85rem; } }
/* v81 : lisibilité mobile des petites mentions */
@media (max-width: 760px) { .ctr-spec small, .ctr-spec li > span, .p-chips li, .msh-lum-row { font-size: max(.7rem, 11px); } }
html:lang(en) .rf-dim b::after { content: "thick, slat included"; }
html:lang(en) .sph-dia::after { content: "actual diameter, next to Spoony (1.80 m)"; }