/* Phillias 32 V4 — couche « scène » du 30/08/2026.
   DA 27/08 « Pupitre lumière / atlas technique » conservée et amplifiée sur ordre de Paul :
   noirs teintés rouge (jamais #000), faisceaux en dérive lente (jamais de clignotement),
   grille technique 64 px masquée, numéros de section fantômes, filets LED, halos hors-champ.
   Se charge APRÈS tokens-v3/style/refonte-v3 et ne redéfinit que le décor + les surcouches. */

/* ── 1. Les noirs se réchauffent : une trace de rouge dans chaque fond ── */
:root{
  --v3-graphite:#140A0E;
  --v3-graphite-deep:#0A0507;
  --v3-surface:#1B1216;
  --v3-surface-up:#241820;
  --v4-halo-rouge:rgba(180,20,50,.09);
  --v4-halo-magenta:rgba(196,59,214,.055);
  --v4-halo-ambre:rgba(232,163,61,.06);
  --v4-filet:linear-gradient(90deg,transparent,rgba(224,74,97,.55),rgba(196,59,214,.4),transparent);
}

/* ── 2. La scène : faisceaux en dérive + poussière + grille technique ──
   Réutilise les couches fixes .faisceaux / .poussiere / .pulse déjà dans le DOM. */
.faisceaux{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.faisceaux i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;will-change:transform}
.faisceaux .f1{width:38vw;height:38vw;left:-12vw;top:-10vw;background:radial-gradient(circle,var(--v4-halo-rouge),transparent 70%);animation:v4derive1 34s ease-in-out infinite alternate}
.faisceaux .f2{width:30vw;height:30vw;right:-10vw;top:12vh;background:radial-gradient(circle,var(--v4-halo-magenta),transparent 70%);animation:v4derive2 28s ease-in-out infinite alternate}
.faisceaux .f3{width:26vw;height:26vw;left:32vw;bottom:-14vw;background:radial-gradient(circle,var(--v4-halo-ambre),transparent 70%);animation:v4derive3 40s ease-in-out infinite alternate}
.faisceaux .f4{width:22vw;height:60vh;left:14vw;top:-20vh;background:linear-gradient(178deg,rgba(224,74,97,.05),transparent 75%);border-radius:0;transform:skewX(-9deg);animation:v4balaye 46s ease-in-out infinite alternate}
.faisceaux .f5{width:18vw;height:64vh;right:20vw;top:-24vh;background:linear-gradient(184deg,rgba(196,59,214,.045),transparent 75%);border-radius:0;transform:skewX(7deg);animation:v4balaye 38s ease-in-out infinite alternate-reverse}
.faisceaux .f6{width:30vw;height:30vw;right:24vw;bottom:-16vw;background:radial-gradient(circle,rgba(247,243,236,.03),transparent 70%);animation:v4derive2 44s ease-in-out infinite alternate-reverse}
@keyframes v4derive1{from{transform:translate(0,0) scale(1)}to{transform:translate(7vw,4vh) scale(1.12)}}
@keyframes v4derive2{from{transform:translate(0,0) scale(1.06)}to{transform:translate(-5vw,6vh) scale(1)}}
@keyframes v4derive3{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-5vh) scale(1.16)}}
@keyframes v4balaye{from{transform:skewX(-9deg) translateX(0)}to{transform:skewX(-9deg) translateX(9vw)}}

.poussiere{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(247,243,236,.055) 1px,transparent 1px);
  background-size:52px 52px;animation:v4poussiere 90s linear infinite}
@keyframes v4poussiere{from{background-position:0 0}to{background-position:520px 1040px}}

/* La grille technique : patch DMX / plan de scène, fondue sur les bords. */
.pulse{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;animation:none;
  background-image:linear-gradient(rgba(247,243,236,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(247,243,236,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 34%,#000,transparent 78%);
  mask-image:radial-gradient(1200px 700px at 50% 34%,#000,transparent 78%)}

/* ── 3. Sections : halos de projecteurs hors-cadre + numéros fantômes + filets LED ── */
.sec{position:relative;overflow:hidden}
.sec:not(.sec--clair){background-image:
  radial-gradient(1100px 520px at 88% -8%,var(--v4-halo-rouge),transparent 62%),
  radial-gradient(900px 480px at -6% 108%,var(--v4-halo-magenta),transparent 58%)}
.sec[data-num]::before{content:attr(data-num);position:absolute;top:.02em;right:-.04em;z-index:0;
  font-family:var(--display);font-size:clamp(5rem,15vw,13rem);line-height:1;
  color:rgba(247,243,236,.032);pointer-events:none;user-select:none}
.sec--clair[data-num]::before{color:rgba(24,20,23,.05)}
.sec>.wrap{position:relative;z-index:1}

/* Filet LED sous la tête de section : la barre qui pulse, jamais ne clignote. */
.sec__tete{position:relative;padding-bottom:18px}
.sec__tete::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:min(280px,42%);
  background:var(--v4-filet);transform-origin:left;animation:v4filet 5.6s ease-in-out infinite}
.sec--clair .sec__tete::after{opacity:.75}
@keyframes v4filet{0%,100%{transform:scaleX(.55);opacity:.4}50%{transform:scaleX(1);opacity:.95}}

/* ── 4. Hero : la salle avant le noir ── */
.hero{isolation:isolate}
.hero__fond img{filter:saturate(1.06) contrast(1.04)}
.hero__voile{background:
  linear-gradient(180deg,rgba(10,5,7,.42) 0%,rgba(10,5,7,.14) 30%,rgba(10,5,7,.52) 66%,rgba(10,5,7,.94) 100%),
  radial-gradient(1000px 460px at 78% 6%,rgba(180,20,50,.16),transparent 64%)}
.hero__anim{box-shadow:0 34px 90px rgba(6,5,7,.62),0 0 0 1px rgba(224,74,97,.16),0 0 90px rgba(196,59,214,.12);
  border-radius:var(--v3-radius)}

/* ── 5. Écran LED & réalisations : le glow de dalle + le montage plein cadre ── */
#ecran-led .wrap img,#ecran-led video,#realisations video{
  box-shadow:0 24px 70px rgba(6,5,7,.6),0 0 0 1px rgba(224,74,97,.14),0 0 70px rgba(196,59,214,.1)}
.montage{margin:0 0 26px}
.montage video{display:block;width:100%;height:auto;border-radius:var(--v3-radius)}
.montage figcaption{margin-top:10px;font:500 .95rem/1.4 var(--texte-f);color:var(--v3-muted)}

/* ── 6. Appel direct : la pastille fixe, pouce droit, mobile d'abord ── */
.appel-flottant{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:999px;background:var(--v3-red);color:var(--v3-ink);
  font:600 1rem/1 var(--texte-f);text-decoration:none;
  box-shadow:0 12px 34px rgba(6,5,7,.55),0 0 0 1px rgba(247,243,236,.1),0 0 44px rgba(180,20,50,.35);
  transition:transform var(--t),box-shadow var(--t)}
.appel-flottant:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(6,5,7,.6),0 0 0 1px rgba(247,243,236,.16),0 0 60px rgba(180,20,50,.5)}
.appel-flottant svg{width:20px;height:20px;flex:none}
.appel-flottant b{font-weight:600}
@media (min-width:900px){.appel-flottant span.appel-txt{display:inline}.appel-flottant{padding:14px 22px}}
@media (max-width:899px){.appel-flottant .appel-txt{display:none}.appel-flottant{padding:16px}}

/* ── 6a. Étapes du configurateur : gradient assombri, AA mesuré sur pixels ── */
.conf__etapes li{font-weight:600}
.conf__etapes li[data-actif]{background:rgba(180,20,50,.2);color:var(--v3-ink)}
.conf__etapes li[data-actif]::before{background:linear-gradient(135deg,#7E0E26,#A31230)}

/* ── 6bis. Badges d'honnêteté : illustration ≠ parc réel ── */
.art__preuve--illu{background:rgba(24,20,23,.78);color:var(--v3-amber);letter-spacing:.08em}
.pack__illu{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:6px;
  font:600 .72rem/1 var(--texte-f);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(24,20,23,.78);color:var(--v3-amber)}

/* ── 7. Accessibilité : tout le décor s'éteint proprement ── */
@media (prefers-reduced-motion:reduce){
  .faisceaux i,.poussiere,.sec__tete::after{animation:none}
}
@media (max-width:600px){
  .faisceaux .f4,.faisceaux .f5{display:none}
  .sec[data-num]::before{font-size:clamp(4rem,22vw,7rem)}
}