/* ============================================================
   DIRECTED BY WOLF — V4 « ALIVE » (2026-08-08)
   Couche posée PAR-DESSUS theme/home-noir/feed/v3.
   Le brief de Wolf : « la page est trop vide, le fond est mort.
   Charbon métallique, cinématique, granuleux. Le site, c'est moi. »

   1. LE MUR VIVANT — le fond n'est plus un aplat : lumière de
      salle, reflets métal, grain film VISIBLE (le grain v3 était
      en soft-light sur du noir pur → invisible).
   2. LA SCÈNE — le brandhero devient un plan d'ouverture plein
      écran : halo respirant, disque métal brossé, poussière
      argent, HUD dossier technique (LOI 4), balayage lumineux.
   3. LE MUR PINTEREST — le feed home passe du marquee au mur
      masonry : on scrolle, les images s'enchaînent, on ne se
      perd pas. L'ordre curé de Wolf reste le layout.
   Tout est réversible : retirer v4-alive.css + alive.js = retour v3.
   ============================================================ */

/* ============ 1 · LE MUR VIVANT ============ */
/* la rampe charbon s'éclaire : un projecteur au-dessus de la salle,
   deux reflets métal sur les flancs — jamais un aplat noir */
body.noir{
  background:
    radial-gradient(58% 44vh at 50% -6vh,rgba(201,207,204,.085) 0%,rgba(201,207,204,.025) 55%,transparent 78%),
    radial-gradient(34% 60vh at -8% 34vh,rgba(177,183,180,.045) 0%,transparent 70%),
    radial-gradient(34% 60vh at 108% 52vh,rgba(177,183,180,.04) 0%,transparent 70%),
    linear-gradient(180deg,#0B0C0E 0%,#08090A 42vh,#060606 110vh,#050505 100%)
    #050505;
}
/* grain film — DEUX émulsions : l'argentique clair (screen, fait
   scintiller les zones éclairées) + le soft-light v3 conservé.
   C'est le grain qu'on VOIT — celui des réfs Pinterest de Wolf. */
body.noir::before{
  opacity:.09;
  mix-blend-mode:screen;
}
/* l'air de la salle : le plafond respire un peu plus, la vignette
   reste noire pure — le cadre cinémascope */
body.noir::after{
  background:
    linear-gradient(180deg,rgba(233,240,238,.028) 0%,transparent 26%),
    radial-gradient(130% 100% at 50% 38%,transparent 56%,rgba(0,0,0,.38) 100%);
}

/* ============ 2 · LA SCÈNE — BRAND HERO PLEIN ÉCRAN ============ */
.brandhero{
  position:relative;
  min-height:calc(100dvh - 74px); /* la nav sticky garde sa ligne */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px;overflow:hidden;
}
/* -- la scène : tout ce qui vit DERRIÈRE le lockup -- */
.bh-scene{position:absolute;inset:0;pointer-events:none}
.bh-scene i{position:absolute;display:block}
/* faisceau : la lumière tombe du plafond sur le loup */
.bh-beam{
  inset:-12% -20% auto;height:120%;
  background:
    radial-gradient(46% 38% at 50% -4%,rgba(201,207,204,.13) 0%,rgba(201,207,204,.035) 55%,transparent 76%),
    radial-gradient(20% 46% at 50% 4%,rgba(233,240,238,.07) 0%,transparent 70%);
}
/* disque métal brossé : un conic très flou qui tourne lentement —
   le charbon devient métal sans jamais devenir gris */
.bh-ring{
  width:min(860px,120vw);aspect-ratio:1;left:50%;top:50%;
  transform:translate(-50%,-54%);border-radius:50%;
  background:conic-gradient(from 214deg,
    transparent 0deg,rgba(201,207,204,.075) 42deg,transparent 96deg,
    rgba(177,183,180,.04) 150deg,transparent 208deg,
    rgba(233,240,238,.09) 296deg,transparent 348deg);
  filter:blur(34px);
}
/* halo : le cœur lumineux derrière la tête du loup — il respire */
.bh-halo{
  width:min(560px,90vw);aspect-ratio:1;left:50%;top:50%;
  transform:translate(-50%,-58%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,207,204,.14) 0%,rgba(201,207,204,.045) 48%,transparent 72%);
  filter:blur(6px);
}
/* poussière argent : le canvas est posé par alive.js */
.bh-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* grain local screen : l'émulsion vit surtout dans le faisceau */
.bh-grain{
  inset:0;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000 30%,transparent 78%);
          mask-image:radial-gradient(70% 80% at 50% 30%,#000 30%,transparent 78%);
}
@media (prefers-reduced-motion:no-preference){
  html:not(.qc) .bh-halo{animation:bhBreathe 8.5s ease-in-out infinite}
  html:not(.qc) .bh-ring{animation:bhTurn 140s linear infinite}
  @keyframes bhBreathe{
    0%,100%{opacity:.85;transform:translate(-50%,-58%) scale(1)}
    50%{opacity:1;transform:translate(-50%,-58%) scale(1.06)}
  }
  @keyframes bhTurn{to{transform:translate(-50%,-54%) rotate(360deg)}}
}

/* -- le lockup : loup + plaque + balayage lumineux -- */
.bh-lockup{position:relative;display:flex;flex-direction:column;align-items:center}
.brandhero .bh-wolf{width:min(300px,56vw);height:auto;display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(201,207,204,.13))}
.brandhero .bh-plate{width:min(980px,92vw);height:auto;display:block;margin-top:6px}
/* le balayage : une lame de lumière traverse — overlay ne mord QUE
   sur le métal (sur le noir, il ne se passe rien : la lumière
   n'existe que si elle touche une structure, LOI 1) */
.bh-sheen{
  position:absolute;inset:-6% -30%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.9;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  background-size:280% 100%;background-position:120% 0;background-repeat:no-repeat;
}
@media (prefers-reduced-motion:no-preference){
  html:not(.qc) .bh-sheen{animation:bhSweep 8s cubic-bezier(.5,.05,.35,1) 3.4s infinite}
  @keyframes bhSweep{
    0%{background-position:120% 0}
    16%{background-position:-45% 0}
    100%{background-position:-45% 0}
  }
}

/* -- HUD : le dossier technique parle aux quatre coins (LOI 4) -- */
.bh-hud{position:absolute;inset:0;pointer-events:none}
.bh-hud .hc{
  position:absolute;font-family:var(--mono);font-size:9px;
  letter-spacing:var(--ls-2);color:rgba(239,241,240,.34);
  white-space:nowrap;
}
.bh-hud .hc::before{
  content:"";position:absolute;width:11px;height:11px;
  border:1px solid rgba(201,207,204,.30);
}
.bh-hud .tl{top:30px;left:32px;padding-top:18px}
.bh-hud .tl::before{top:0;left:0;border-right:0;border-bottom:0}
.bh-hud .tr{top:30px;right:32px;padding-top:18px;text-align:right}
.bh-hud .tr::before{top:0;right:0;border-left:0;border-bottom:0}
.bh-hud .bl{bottom:30px;left:32px;padding-bottom:18px}
.bh-hud .bl::before{bottom:0;left:0;border-right:0;border-top:0}
.bh-hud .br{bottom:30px;right:32px;padding-bottom:18px;text-align:right}
.bh-hud .br::before{bottom:0;right:0;border-left:0;border-top:0}
.bh-hud .status-dot{width:5px;height:5px;margin-right:6px}

/* -- scroll cue : une ligne, une bille LED qui descend -- */
.bh-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:auto;text-decoration:none;
}
.bh-cue span{font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-3);
  color:rgba(239,241,240,.38);transition:color .3s var(--ease)}
.bh-cue i{position:relative;width:1px;height:34px;overflow:hidden;
  background:rgba(201,207,204,.16)}
.bh-cue i::after{content:"";position:absolute;left:-1px;top:-8px;width:3px;height:8px;
  border-radius:2px;background:var(--led-hot);
  box-shadow:0 0 8px rgba(201,207,204,.9)}
.bh-cue:hover span{color:var(--led-hot)}
@media (prefers-reduced-motion:no-preference){
  html:not(.qc) .bh-cue i::after{animation:bhDrop 2.2s cubic-bezier(.6,.05,.35,1) infinite}
  @keyframes bhDrop{0%{top:-8px}62%,100%{top:36px}}
}

/* entrée pilotée par alive.js quand data-motion est posé */
html[data-motion="on"] .bh-hud .hc,
html[data-motion="on"] .bh-cue{opacity:0}

/* ============ 3 · LE MUR PINTEREST ============ */
/* le feed home : des colonnes, des images qui s'enchaînent —
   la sensation Pinterest de Wolf. Les cartes restent mates
   (LOI 3 : jamais de verre en nappe sur le feed). */
.pinwall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;margin-top:26px}
.pincol{display:flex;flex-direction:column;gap:14px;min-width:0}
.pinwall .fcard{flex:none;width:100%}
/* le projecteur se pose sur la carte survolée, le reste s'assombrit.
   Le voile vit sur un pseudo du média : l'opacité de la carte reste
   la propriété de GSAP (reveal), jamais deux pilotes sur un volant. */
@media (hover:hover) and (pointer:fine){
  .pinwall .fcard .m::before{content:"";position:absolute;inset:0;z-index:3;
    background:#050505;opacity:0;pointer-events:none;
    transition:opacity .38s var(--ease)}
  .pinwall:has(.fcard:hover) .fcard:not(:hover) .m::before{opacity:.45}
  /* l'arête LED : la lumière accroche le cadre au survol (LOI 1) */
  .pinwall .fcard:hover .m{
    border-color:rgba(201,207,204,.45);
    box-shadow:var(--shadow-lift),0 0 44px -14px rgba(201,207,204,.30)}
}
/* reveals : cachés seulement si GSAP pilote (alive.js) */
html[data-motion="on"] .pinwall .fcard{opacity:0}
html[data-motion="on"] .pinwall .fcard.in{opacity:1}

/* ============ 4 · DÉTAILS D'INTERFACE ============ */
/* les rangées de services : un reflet suit le curseur (alive.js pose --mx) */
@media (hover:hover) and (pointer:fine){
  .svcrows .srow{position:relative;overflow:hidden}
  .svcrows .srow::after{
    content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
    background:radial-gradient(260px 70px at var(--mx,50%) 50%,rgba(201,207,204,.06),transparent 70%);
    transition:opacity .35s var(--ease)}
  .svcrows .srow:hover::after{opacity:1}
}
/* le CTA du feed : verre certifié (LOI 3 — c'est une interface) */
.feedcta .btn-fire{
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter:blur(var(--glass-blur)) saturate(1.3)}

/* ============ 5 · RESPONSIVE ============ */
@media (max-width:1100px){
  .pinwall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .brandhero{min-height:calc(100dvh - 66px)}
  .brandhero .bh-wolf{width:min(210px,54vw)}
  .bh-hud .tr,.bh-hud .bl{display:none}
  .bh-hud .tl{top:22px;left:20px}
  .bh-hud .br{bottom:22px;right:20px}
  .bh-cue{bottom:18px}
  .bh-ring{width:150vw}
  .pinwall{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
  .pincol{gap:10px}
}
/* reduced-motion / qc : la scène est posée, rien ne bouge, rien de caché */
@media (prefers-reduced-motion:reduce){
  html[data-motion="on"] .bh-hud .hc,
  html[data-motion="on"] .bh-cue,
  html[data-motion="on"] .pinwall .fcard{opacity:1}
}
html.qc .bh-hud .hc,html.qc .bh-cue,html.qc .pinwall .fcard{opacity:1!important}