/* Styles de src/partials/hero_wall.php — sortis de la page (i102b). */

/* ── LE HÉROS, QUAND IL A UN MUR ─────────────────────────────────────────
   Il prend l'écran : c'est la première chose que voit quelqu'un qui arrive
   d'Instagram, et c'est là qu'il décide de rester ou non. */
.l2hero.has-wall{position:relative;overflow:hidden;isolation:isolate;
  min-height:min(100svh,940px);display:flex;align-items:center;
  padding-bottom:clamp(40px,7vh,80px)}
.l2hero.has-wall > .wrap{position:relative;z-index:2;width:100%}
.l2hero.has-wall .l2hero-grid{display:block}
.l2hero.has-wall .l2hero-grid > div{max-width:620px}
.l2hero.has-wall h1,.l2hero.has-wall .sub,.l2hero.has-wall .eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.7)}
.l2hero.has-wall .sub{color:rgba(255,255,255,.86)}

/* ── LE MUR ─────────────────────────────────────────────────────────────
   Incliné et plus large que l'écran : les bords coupés disent « il y en a
   bien plus que ça », ce qu'un quadrillage droit et complet ne dit pas. */
.hw{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#07060a}
.hw-grid{position:absolute;left:50%;top:50%;width:122%;display:flex;
  gap:clamp(8px,1vw,14px);transform:translate(-50%,-50%) rotate(-7deg)}
.hw-col{flex:1 1 0;display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
.hw-cell{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  background:#15121c;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:box-shadow .6s ease}
.hw-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Deux calques par case. Celui qui ARRIVE passe devant et se fond ; celui qui
   part reste visible dessous jusqu'à la fin du fondu. Sans ce décalage, les
   deux images sont à moitié transparentes au même instant, et la case
   s'assombrit une seconde à chaque changement. */
.hw-cell .hw-b{opacity:0}
.hw.js .hw-cell img{opacity:0;z-index:1;transform:scale(1.08);
  transition:opacity 0s linear 1.2s,transform 0s linear 1.2s}
.hw.js .hw-cell:not(.b) .hw-a,.hw.js .hw-cell.b .hw-b{opacity:1;z-index:2;transform:scale(1);
  transition:opacity 1.2s ease,transform 2.4s cubic-bezier(.2,.8,.3,1)}

/* La case qui vient de changer s'allume, avec sa pastille. On voit ce qui
   est nouveau — et on apprend au passage qu'il y a deux sortes de photos. */
.hw-tag{position:absolute;left:8px;bottom:8px;z-index:3;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;font-weight:600;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.hw-tag--ai{background:rgba(217,184,119,.95);color:#17110a}
.hw-tag--real{background:rgba(255,255,255,.93);color:#141217}
.hw-cell.fresh{box-shadow:0 0 0 2px rgba(242,201,76,.85),0 10px 34px rgba(0,0,0,.5)}
.hw-cell.fresh .hw-tag{opacity:1;transform:none}

/* Les colonnes dérivent doucement, une sur deux en sens inverse : le mur
   respire, sans jamais attirer l'œil loin du titre. */
.hw.js .hw-col{animation:hwDrift 42s ease-in-out infinite alternate}
.hw.js .hw-col:nth-child(even){animation-direction:alternate-reverse}
@keyframes hwDrift{from{transform:translateY(-5%)}to{transform:translateY(5%)}}

/* Le voile : sombre sous le texte, ouvert ailleurs. Le mur se voit, le
   titre se lit. */
.hw::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(7,6,10,.95) 0%,rgba(7,6,10,.82) 30%,rgba(7,6,10,.3) 64%,rgba(7,6,10,.42) 100%),
    linear-gradient(180deg,rgba(7,6,10,.6) 0%,transparent 22%,transparent 72%,rgba(7,6,10,.96) 100%)}

@media(max-width:900px){
  /* Sur téléphone : le mur en haut, le texte en bas. Le premier écran est
     rempli de visages, et le bouton reste sous le pouce. */
  .l2hero.has-wall{align-items:flex-end;min-height:92svh}
  .hw-grid{width:165%;top:40%}
  .hw-col:nth-child(n+5){display:none}
  .hw::after{background:linear-gradient(180deg,rgba(7,6,10,.4) 0%,rgba(7,6,10,.12) 22%,
             rgba(7,6,10,.5) 46%,rgba(7,6,10,.94) 64%,#07060a 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hw.js .hw-col{animation:none}
}