/* Street Shakers — Accueil : vidéo, logo, boutons, icône « scroll », bandeau jaune défilant */
/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--noir); color:var(--ecru); overflow:hidden; min-height:calc(100vh - 72px - 42px); min-height:calc(100svh - 72px - 42px); display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg, rgba(19,19,18,0.74) 0%, rgba(19,19,18,0.58) 45%, rgba(19,19,18,0.48) 100%);
}
.hero .wrap{ position:relative; z-index:1; text-align:left; max-width:none; margin:0; padding:36px 7vw; }
.hero-content{ max-width:560px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.76rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--jaune); margin-bottom:14px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--rouge); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.7); } }
.hero-logo{ display:block; }
.hero-logo img{ display:block; width:min(clamp(240px, 34vw, 460px), 60vh); max-width:84vw; height:auto; } /* logo v3 négatif (plus large que l'ancien) */
.hero p.sub{ max-width:46ch; margin:16px 0 0; font-size:1rem; color:rgba(238,234,227,0.86); }
.hero-ctas{ margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
.btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:0.86rem; letter-spacing:0.03em; padding:12px 26px; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease; cursor:pointer; border:none; font-family:'Outfit',sans-serif; text-transform:uppercase; letter-spacing:0.08em; }
.btn-primary{ background:var(--rouge); color:var(--ecru); box-shadow:0 4px 0 #8f140f; }
.btn-primary:hover{ transform:translateY(2px); box-shadow:0 2px 0 #8f140f; }
.btn-ghost{ border:1.5px solid rgba(238,234,227,0.5); color:var(--ecru); background:transparent; padding:11.5px 24px; }
.btn-ghost:hover{ border-color:var(--jaune); color:var(--jaune); }
.play-btn{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--ecru); background:rgba(238,234,227,0.06);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
}
.play-btn svg{ width:16px; height:16px; fill:var(--ecru); margin-left:3px; transition:transform .2s ease; }
.play-btn::before{
  content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(238,234,227,0.35);
  animation:ringpulse 2.4s ease-out infinite;
}
@keyframes ringpulse{ 0%{ transform:scale(0.9); opacity:0.9; } 100%{ transform:scale(1.35); opacity:0; } }
.play-btn:hover svg{ transform:scale(1.15); }

/* ---------- INCITATION AU SCROLL (hero) ---------- */
.scroll-cue{
  position:fixed; left:50%; bottom:calc(58px + env(safe-area-inset-bottom,0px)); z-index:50; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  transition:opacity .4s ease, transform .4s ease;
}
.scroll-cue.gone{ opacity:0; visibility:hidden; }
.scroll-cue .mouse{
  width:26px; height:40px; border:2.5px solid var(--ecru); border-radius:14px; position:relative; margin-bottom:6px;
  box-shadow:0 0 0 3px rgba(19,19,18,0.25);
}
.scroll-cue .wheel{
  position:absolute; left:50%; top:7px; width:5px; height:9px; margin-left:-2.5px; border-radius:3px; background:var(--jaune);
  animation:wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(12px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }
.scroll-cue .chev{
  width:12px; height:12px; border-right:2.5px solid var(--jaune); border-bottom:2.5px solid var(--jaune);
  transform:rotate(45deg); margin-top:-4px; animation:chev 1.6s ease-in-out infinite; opacity:0;
}
.scroll-cue .chev + .chev{ animation-delay:.2s; }
@keyframes chev{ 0%{ opacity:0; transform:translateY(-4px) rotate(45deg); } 50%{ opacity:1; } 100%{ opacity:0; transform:translateY(6px) rotate(45deg); } }
.scroll-cue:hover .mouse{ border-color:var(--jaune); }
@media (max-width: 700px), (hover: none){
  .scroll-cue{ bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
  .scroll-cue .mouse{ display:none; }
  .scroll-cue .chev{ width:14px; height:14px; border-width:3px; }
}

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--jaune); color:var(--noir); overflow:hidden; white-space:nowrap; border-top:2px solid var(--noir); border-bottom:2px solid var(--noir); }
.marquee-track{
  display:flex; width:max-content; padding:8px 0; font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.14em;
  animation:scrollx 13.5s linear infinite; will-change:transform;
}
.mq-group{ display:flex; flex-shrink:0; align-items:center; }
.mq-group span{ margin:0 20px; }
/* 6 copies identiques couvrent même un écran 4K ; on décale d'exactement une copie : boucle sans coupure */
@keyframes scrollx{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% / 6)); } }