/* ════════════════════════════════════════════════════════════
   YBN FRANCE — GRITTY LA v5
   Direction artistique : "Dark Street, Gritty Hood & Gold"
   Nuit de Los Angeles — béton, affiches arrachées, or métallique
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonds — noirs et charbons texturés ── */
  --g-black:    #000000;
  --g-coal:     #111111;
  --g-coal-2:   #151412;
  --g-concrete: #1b1916;
  --g-card:     #14120f;
  --g-card-2:   #1a1713;

  /* ── Tons intermédiaires — sépia désaturé, béton chaud ── */
  --g-sepia:    #2a241c;
  --g-sepia-2:  #3b3226;
  --g-paper:    #e8dfd0;   /* papier d'affiche vieilli (accents) */

  /* ── Accent — l'éclat "gold chain" ── */
  --g-gold:      #FFD700;
  --g-gold-2:    #DAA520;
  --g-gold-deep: #8a6914;
  --g-gold-soft: rgba(218,165,32,.13);
  --g-gold-glow: rgba(255,215,0,.32);

  /* ── Textes ── */
  --g-text:   #FFFFFF;
  --g-text-2: #B0B0B0;
  --g-text-3: #7d7a74;
  --g-text-4: #55524c;

  /* ── Lignes / états ── */
  --g-line:   rgba(255,255,255,.08);
  --g-line-2: rgba(255,255,255,.16);
  --g-good:   #3fae66;
  --g-warn:   #f59e0b;
  --g-bad:    #ef4444;
  --g-red:    #e02020;
  --g-blue:   #3b82f6;

  /* ── Polices ── */
  --f-tag:    'Sedgwick Ave Display', cursive;  /* graffiti / tag */
  --f-marker: 'Permanent Marker', cursive;      /* marqueur main */
  --f-head:   'Teko', sans-serif;               /* condensé brut */
  --f-type:   'Special Elite', monospace;       /* machine à écrire (dossier) */
  --f-body:   'Inter', sans-serif;

  /* ── Ombres dures (pas de glassmorphism) ── */
  --sh-harsh: 10px 12px 0 rgba(0,0,0,.55);
  --sh-poster: 6px 8px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
}

/* ════════ BASE ════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  background:var(--g-black);
  color:var(--g-text-2);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--g-gold-2); color:#000; }
img { max-width:100%; }
a { color:inherit; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--g-black); }
::-webkit-scrollbar-thumb { background:var(--g-sepia-2); border:2px solid var(--g-black); }
::-webkit-scrollbar-thumb:hover { background:var(--g-gold-deep); }

/* ── Grain de film sur tout le body ── */
/* Grain SANS mix-blend-mode : la fusion d'un calque plein écran obligeait le
   navigateur à recomposer toute la page en continu (grosse source de lag). */
body::after {
  content:'';
  position:fixed; inset:-50%;
  width:200%; height:200%;
  pointer-events:none;
  z-index:2000;
  opacity:.04;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite;
}
/* Mode léger — activé automatiquement par gritty.js si la machine rame */
html.g-low-fx body::after { animation:none; }
html.g-low-fx .g-hero-fog { animation:none; }
html.g-low-fx .g-flick { animation:none; }
@keyframes grainShift {
  0%{transform:translate(0,0)} 25%{transform:translate(-1.5%,1%)}
  50%{transform:translate(1%,-1.5%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(0,0)}
}

/* ── Texture béton discrète pour sections ── */
.g-concrete-bg {
  background-color:var(--g-coal);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,50,38,.25), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(42,36,28,.3), transparent 60%);
}

/* ════════ TYPO ════════ */
.g-kicker {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-type);
  font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--g-gold-2);
}
.g-kicker::before { content:''; width:26px; height:2px; background:var(--g-gold-2); }

.g-h2 {
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(34px, 5vw, 56px);
  line-height:.92;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--g-text);
  margin:.9rem 0 0;
}
.g-h2 .gold { color:var(--g-gold); text-shadow:0 0 22px var(--g-gold-glow); }
.g-h2 .fade { color:var(--g-text-3); }

.g-sub {
  font-size:14.5px; color:var(--g-text-2);
  max-width:56ch; margin-top:1rem;
}
.g-marker-note {
  font-family:var(--f-marker);
  color:var(--g-gold);
  font-size:15px;
  transform:rotate(-2deg);
  display:inline-block;
}

/* ════════ DÉCHIRURES DE PAPIER (séparateurs) ════════ */
.g-tear { display:block; width:100%; height:30px; margin-top:-1px; position:relative; z-index:3; }
.g-tear svg { display:block; width:100%; height:100%; }
.g-tear.flip svg { transform:scaleY(-1); }

/* ════════ BOUTONS ════════ */
.g-btn {
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-size:19px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--g-text);
  background:transparent;
  border:2px solid var(--g-text);
  padding:10px 26px 8px;
  text-decoration:none; cursor:pointer;
  clip-path:polygon(0 8%, 2% 0, 98% 2%, 100% 12%, 99% 90%, 97% 100%, 3% 98%, 0 92%);
  transition:color .25s, border-color .25s, transform .15s;
  overflow:hidden;
  isolation:isolate;
}
.g-btn::before { /* voile de spray or au survol */
  content:'';
  position:absolute; inset:-20%;
  z-index:-1;
  background:
    radial-gradient(circle at 30% 40%, var(--g-gold) 0 30%, transparent 62%),
    radial-gradient(circle at 70% 60%, var(--g-gold-2) 0 34%, transparent 66%);
  filter:url(#g-spray) blur(0.5px);
  opacity:0; transform:scale(.4);
  transition:opacity .3s, transform .35s cubic-bezier(.3,1.4,.4,1);
}
.g-btn:hover { color:#000; border-color:var(--g-gold); transform:translateY(-2px); }
.g-btn:hover::before { opacity:1; transform:scale(1); }
.g-btn:active { transform:translateY(0) scale(.98); }
.g-btn i { font-size:.85em; }

.g-btn.gold {
  border-color:var(--g-gold-2);
  color:var(--g-gold);
  box-shadow:0 0 26px rgba(218,165,32,.15), inset 0 0 18px rgba(218,165,32,.06);
}
.g-btn.gold:hover { color:#000; }
.g-btn.ghost { border-color:var(--g-line-2); color:var(--g-text-2); }
.g-btn.ghost:hover { color:#000; }

/* Compat shared.js — bouton connexion Discord injecté */
.v4-btn-connect {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-size:16px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:#000; background:var(--g-gold);
  border:none; padding:9px 20px 7px;
  cursor:pointer;
  clip-path:polygon(0 10%, 3% 0, 100% 4%, 98% 88%, 95% 100%, 2% 96%);
  box-shadow:0 0 22px rgba(255,215,0,.22);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.v4-btn-connect:hover { background:#fff; transform:translateY(-1px); box-shadow:0 0 30px rgba(255,215,0,.4); }

/* ════════ NAV — bande de scotch noir arrachée ════════ */
.g-nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:28px;
  padding:14px 30px;
  background:rgba(8,7,6,.92);
  backdrop-filter:blur(14px);
  transition:transform .35s ease;
}
/* Déchirure en pseudo-élément SOUS la barre : la nav n'est pas découpée,
   donc le menu profil (dropdown shared.js) peut déborder normalement. */
.g-nav::after {
  content:'';
  position:absolute; top:100%; left:0; right:0; height:9px;
  background:rgba(8,7,6,.94);
  clip-path:polygon(0 0,100% 0,100% 30%,97.5% 100%,94% 25%,90% 90%,86% 35%,81% 100%,76% 30%,71% 85%,66% 20%,61% 95%,56% 35%,50% 100%,45% 30%,40% 90%,35% 25%,30% 100%,25% 35%,20% 85%,15% 25%,10% 95%,6% 30%,3% 90%,0 35%);
  pointer-events:none;
}
.g-nav.hidden { transform:translateY(-110%); }

.g-nav-brand { display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.g-nav-brand img { height:38px; width:38px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(255,215,0,.25)); }
.g-nav-brand .tag {
  font-family:var(--f-tag); font-size:24px; color:var(--g-text);
  text-shadow:2px 2px 0 rgba(0,0,0,.8);
  line-height:1;
}
.g-nav-brand svg.palm { height:24px; width:auto; opacity:.7; }

.g-nav-links {
  display:flex; align-items:center; gap:26px;
  list-style:none; margin:0 auto;
}
.g-nav-links a {
  font-family:var(--f-head); font-size:17px; font-weight:500;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--g-text-2); text-decoration:none;
  cursor:pointer;
  transition:color .2s, text-shadow .2s;
}
.g-nav-links a:hover, .g-nav-links a.active { color:var(--g-gold); text-shadow:0 0 14px var(--g-gold-glow); }

.g-nav-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }

/* ── Widget statut — lampadaire qui grésille ── */
.g-lamp {
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-type); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--g-text-3);
  border:1px solid var(--g-line); padding:6px 12px;
  background:rgba(0,0,0,.4);
}
.g-lamp svg { width:14px; height:20px; }
.g-lamp .bulb { fill:var(--g-text-4); transition:fill .3s; }
.g-lamp .halo { fill:none; opacity:0; transition:opacity .3s; }
.g-lamp.on .bulb  { fill:var(--g-good); }
.g-lamp.on .halo  { fill:rgba(63,174,102,.35); opacity:1; }
.g-lamp.on        { color:var(--g-good); border-color:rgba(63,174,102,.3); }
.g-lamp.warn .bulb{ fill:var(--g-warn); }
.g-lamp.warn .halo{ fill:rgba(245,158,11,.3); opacity:1; }
.g-lamp.warn      { color:var(--g-warn); border-color:rgba(245,158,11,.3); }
.g-lamp.off .bulb { fill:var(--g-bad); }
.g-lamp.off .halo { fill:rgba(239,68,68,.25); opacity:1; }
.g-lamp.off       { color:var(--g-bad); border-color:rgba(239,68,68,.3); }
.g-lamp.loading svg { animation:lampFlick 1.1s steps(2) infinite; }
@keyframes lampFlick { 0%,100%{opacity:1} 50%{opacity:.25} }

.g-burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.g-burger span { display:block; width:22px; height:2px; background:var(--g-text); transition:all .3s; }

/* ════════ SPLASH — le tag sprayé ════════ */
#splash {
  position:fixed; inset:0; z-index:9000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
#splash::before { /* halo sodium des lampadaires */
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 45% 34% at 50% 46%, rgba(218,165,32,.09), transparent 70%),
    radial-gradient(ellipse 100% 40% at 50% 108%, rgba(59,50,38,.35), transparent 70%);
}
.sp-label {
  position:absolute;
  font-family:var(--f-type); font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--g-text-4);
}
.sp-content { position:relative; z-index:2; text-align:center; padding:2rem; max-width:640px; }

/* ⚠ OBSOLÈTE depuis le build 5.1 — le tag est désormais l'image `.sp-tag-img`.
   Conservé au cas où une page non migrée utiliserait encore le lettrage texte. */
.sp-tag {
  font-family:var(--f-tag);
  font-size:min(clamp(90px, 20vw, 190px), 30svh);
  line-height:.9;
  color:var(--g-text);
  filter:url(#g-spray);
  text-shadow:0 0 38px rgba(255,215,0,.18), 4px 5px 0 rgba(0,0,0,.9);
  clip-path:inset(0 100% 0 0);
  animation:sprayReveal 1.15s .35s steps(18) forwards, flick 8s 3.2s linear infinite;
  position:relative;
  display:inline-block;
}
@keyframes sprayReveal { to { clip-path:inset(0 -8% 0 0); } }
.sp-tag::after { /* lueur or qui s'allume après le spray */
  content:attr(data-tag);
  position:absolute; inset:0;
  color:transparent;
  text-shadow:0 0 46px var(--g-gold-glow);
  opacity:0;
  animation:goldWake 1.4s 1.5s ease forwards;
}
@keyframes goldWake { 0%{opacity:0} 55%{opacity:1} 70%{opacity:.35} 100%{opacity:.9} }

.sp-drips { display:flex; justify-content:center; gap:56px; height:46px; margin-top:-8px; }
.sp-drips span {
  width:3px; background:linear-gradient(var(--g-text), transparent);
  height:0; opacity:.5;
  animation:drip 1.3s 1.35s ease-out forwards;
}
.sp-drips span:nth-child(2){ animation-delay:1.5s; }
.sp-drips span:nth-child(3){ animation-delay:1.42s; }
@keyframes drip { to { height:100%; } }

.sp-city {
  font-family:var(--f-marker); font-size:clamp(16px,3vw,24px);
  color:var(--g-gold-2); transform:rotate(-2deg);
  margin-top:.25rem;
  opacity:0; animation:fadeUp .7s 1.9s ease forwards;
}
.sp-sub {
  font-size:14px; color:var(--g-text-3); max-width:46ch;
  margin:1.4rem auto 2.2rem;
  opacity:0; animation:fadeUp .7s 2.1s ease forwards;
}
.sp-actions {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fadeUp .7s 2.3s ease forwards;
}
.sp-skip {
  margin-top:1.6rem;
  font-family:var(--f-type); font-size:11px; letter-spacing:2px;
  color:var(--g-text-4); background:none; border:none; cursor:pointer;
  text-transform:uppercase;
  opacity:0; animation:fadeUp .7s 2.6s ease forwards;
  transition:color .2s;
}
.sp-skip:hover { color:var(--g-gold); }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ════════ HERO ════════ */
.g-hero {
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, #000 0%, #0c0a07 34%, #191410 62%, #0a0806 100%);
}
.g-hero-sky { /* skyline sépia */
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:46%;
  opacity:.9;
  pointer-events:none;
}
.g-hero-sky svg { width:100%; height:100%; display:block; }
.g-hero-fog {
  position:absolute; left:-10%; right:-10%; bottom:-6%;
  height:52%;
  background:radial-gradient(ellipse 60% 90% at 50% 100%, rgba(59,50,38,.5), transparent 70%);
  filter:blur(30px);
  animation:fogDrift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
.g-hero-fog.two {
  height:38%;
  background:radial-gradient(ellipse 50% 80% at 30% 100%, rgba(42,36,28,.55), transparent 70%);
  animation-duration:34s; animation-delay:-12s;
}
@keyframes fogDrift { from{transform:translateX(-4%)} to{transform:translateX(5%)} }

#fx-embers { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }

.g-chains { /* chaînes en or qui pendent */
  position:absolute; top:0; right:4%;
  height:52%; width:auto; z-index:3;
  opacity:.85;
  transform-origin:top center;
  animation:chainSway 9s ease-in-out infinite alternate;
  pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(255,215,0,.25));
}
@keyframes chainSway { from{transform:rotate(-1.6deg)} to{transform:rotate(1.8deg)} }

.g-hero-content { position:relative; z-index:5; text-align:center; padding:7rem 1.5rem 5rem; max-width:920px; }
.g-hero-title {
  font-family:var(--f-tag);
  font-size:min(clamp(96px, 19vw, 230px), 36svh);
  line-height:.85;
  color:var(--g-text);
  filter:url(#g-spray);
  text-shadow:5px 6px 0 rgba(0,0,0,.85), 0 0 44px rgba(255,215,0,.14);
  margin:0;
}
.g-hero-sub-tag {
  font-family:var(--f-marker);
  font-size:clamp(18px, 3.4vw, 30px);
  color:var(--g-gold);
  transform:rotate(-2.5deg);
  display:inline-block;
  margin-top:.4rem;
  text-shadow:2px 3px 0 rgba(0,0,0,.8);
}
.g-hero-desc { font-size:15px; color:var(--g-text-2); max-width:52ch; margin:1.6rem auto 0; }
.g-hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

.g-hero-meta {
  display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top:2.2rem;
  font-family:var(--f-type); font-size:11.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--g-text-4);
}
.g-hero-meta .sep { color:var(--g-text-4); }
.g-hero-meta .dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--g-text-4); margin-right:6px; vertical-align:1px;
  transition:background .3s, box-shadow .3s;
}
.g-hero-meta .st-on .dot  { background:var(--g-good); box-shadow:0 0 9px rgba(63,174,102,.7); }
.g-hero-meta .st-warn .dot{ background:var(--g-warn); box-shadow:0 0 9px rgba(245,158,11,.6); }
.g-hero-meta .st-off .dot { background:var(--g-bad); box-shadow:0 0 9px rgba(239,68,68,.6); }
.g-hero-meta .st-on   { color:var(--g-good); }
.g-hero-meta .st-warn { color:var(--g-warn); }
.g-hero-meta .st-off  { color:var(--g-bad); }

.g-corner-label {
  position:absolute; z-index:6;
  font-family:var(--f-type); font-size:10.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--g-text-4);
}

/* ════════ MARQUEE — ruban d'annonces ════════ */
.g-marquee {
  position:relative; z-index:5;
  background:var(--g-coal);
  border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line);
  overflow:hidden;
  transform:rotate(-.6deg) scale(1.02);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  padding:12px 0;
}
.g-marquee-track {
  display:flex; gap:44px; width:max-content;
  animation:marq 36s linear infinite;
}
.g-marquee:hover .g-marquee-track { animation-play-state:paused; }
@keyframes marq { to { transform:translateX(-50%); } }
.g-marquee-item {
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-size:16px; letter-spacing:2px;
  text-transform:uppercase; color:var(--g-text-3);
  white-space:nowrap;
}
.g-marquee-item .tg {
  font-family:var(--f-type); font-size:10px; letter-spacing:2px;
  color:#000; background:var(--g-gold-2);
  padding:2.5px 8px 1.5px;
}
.g-marquee-item .dt { width:5px; height:5px; background:var(--g-gold-2); transform:rotate(45deg); }

/* ════════ SECTIONS ════════ */
.g-section { position:relative; padding:6.5rem 1.5rem; }
.g-section.tight { padding:4.5rem 1.5rem; }
.g-wrap { max-width:1180px; margin:0 auto; position:relative; }
.g-wrap.narrow { max-width:860px; }

/* ════════ POSTERS (cartes affiches placardées) ════════ */
.g-posters { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; margin-top:3rem; }
.g-poster {
  position:relative;
  background:linear-gradient(165deg, var(--g-card-2), var(--g-card) 60%);
  border:1px solid var(--g-line);
  padding:1.9rem 1.6rem 1.7rem;
  box-shadow:var(--sh-poster);
  transition:transform .3s cubic-bezier(.3,1.3,.4,1), box-shadow .3s, border-color .3s;
}
.g-poster:nth-child(odd)  { transform:rotate(-1.1deg); }
.g-poster:nth-child(even) { transform:rotate(.9deg); }
.g-poster:hover {
  transform:rotate(0) translateY(-6px) scale(1.02);
  border-color:rgba(218,165,32,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.8), 0 0 30px rgba(218,165,32,.09);
  z-index:2;
}
.g-poster::before { /* scotch en haut */
  content:'';
  position:absolute; top:-11px; left:50%;
  width:74px; height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(232,223,208,.14);
  border-left:1px dashed rgba(232,223,208,.12);
  border-right:1px dashed rgba(232,223,208,.12);
}
.g-poster-ico {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--g-gold-deep);
  color:var(--g-gold);
  font-size:18px;
  margin-bottom:1.1rem;
  clip-path:polygon(6% 0,100% 4%,96% 96%,0 100%);
  background:rgba(218,165,32,.06);
  transition:box-shadow .3s, color .3s;
}
.g-poster:hover .g-poster-ico { color:var(--g-gold); box-shadow:0 0 20px rgba(255,215,0,.25); }
.g-poster-num {
  font-family:var(--f-tag); font-size:26px; color:var(--g-gold-2);
  display:block; margin-bottom:.7rem;
}
.g-poster-title {
  font-family:var(--f-head); font-size:24px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--g-text);
  line-height:1;
  margin-bottom:.55rem;
  transition:color .3s;
}
.g-poster:hover .g-poster-title { color:var(--g-gold); }
.g-poster-text { font-size:13.5px; color:var(--g-text-2); line-height:1.6; }

/* ── Posters "voies" (filières) ── */
.g-voies { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:28px; margin-top:3rem; }
.g-voie {
  --pv:var(--g-gold-2);
  position:relative;
  background:linear-gradient(170deg, var(--g-card-2), #0d0c0a 70%);
  border:1px solid var(--g-line);
  border-top:3px solid var(--pv);
  padding:2.1rem 1.7rem 1.8rem;
  box-shadow:var(--sh-poster);
  transition:transform .3s cubic-bezier(.3,1.3,.4,1), box-shadow .3s;
  overflow:hidden;
}
/* Photo RP en tête de poster (mêmes fichiers que la whitelist ; si la photo
   manque, le panneau disparaît et la carte retombe sur son rendu texte) */
.g-voie-art {
  position:relative;
  height:185px;
  margin:-2.1rem -1.7rem 1.35rem;
  background-size:100% 100%, cover;
  background-position:center, center 20%;
  background-repeat:no-repeat;
  filter:saturate(.94);
  transition:filter .3s, transform .5s ease;
}
.g-voie:hover .g-voie-art { filter:saturate(1.1) contrast(1.03); transform:scale(1.05); }
.g-voie-art::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 38%, #15120e 100%);
}
.g-voie.v-leg .g-voie-art { background-image:linear-gradient(180deg, rgba(59,130,246,.16), rgba(0,0,0,0) 55%), url('voie-legale.jpg'); background-position:center, center 24%; }
.g-voie.v-ill .g-voie-art { background-image:linear-gradient(180deg, rgba(224,32,32,.15), rgba(0,0,0,0) 55%), url('voie-illegale.jpg'); background-position:center, center 18%; }
.g-voie.v-civ .g-voie-art { background-image:linear-gradient(180deg, rgba(245,158,11,.14), rgba(0,0,0,0) 55%), url('voie-civile.jpg'); background-position:center, center 20%; }
.g-voie:nth-child(1){ transform:rotate(-.8deg); }
.g-voie:nth-child(2){ transform:rotate(.6deg); }
.g-voie:nth-child(3){ transform:rotate(-.5deg); }
.g-voie:hover { transform:rotate(0) translateY(-7px); box-shadow:0 20px 44px rgba(0,0,0,.85); }
.g-voie .stamp {
  font-family:var(--f-type); font-size:10px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--pv);
  border:1.5px solid var(--pv); padding:4px 10px 3px;
  display:inline-block; transform:rotate(-2deg);
  margin-bottom:1.1rem;
  opacity:.9;
}
.g-voie h3 {
  font-family:var(--f-head); font-size:30px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--g-text); line-height:.95;
}
.g-voie .sub { font-family:var(--f-marker); font-size:13.5px; color:var(--pv); display:block; margin:.4rem 0 .9rem; }
.g-voie p { font-size:13.5px; line-height:1.6; }
.g-voie .go {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:1.3rem;
  font-family:var(--f-head); font-size:16px; letter-spacing:2px; text-transform:uppercase;
  color:var(--g-text-2); text-decoration:none;
  border-bottom:2px solid var(--pv);
  padding-bottom:2px;
  transition:color .2s, gap .2s;
}
.g-voie .go:hover { color:var(--pv); gap:13px; }

/* ════════ Q&A — affiches punaisées ════════ */
.g-split { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.g-qa { display:flex; flex-direction:column; gap:18px; }
.g-qa-card {
  position:relative;
  background:var(--g-card);
  border:1px solid var(--g-line);
  border-left:3px solid var(--g-gold-deep);
  padding:1.4rem 1.5rem;
  box-shadow:var(--sh-poster);
  transition:transform .25s, border-color .25s;
}
.g-qa-card:nth-child(odd){ transform:rotate(-.4deg); }
.g-qa-card:nth-child(even){ transform:rotate(.4deg); }
.g-qa-card:hover { transform:rotate(0); border-left-color:var(--g-gold); }
.g-qa-card::after { /* punaise */
  content:'';
  position:absolute; top:10px; right:12px;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, var(--g-gold-2) 65%);
  box-shadow:1px 2px 3px rgba(0,0,0,.8);
}
.g-qa-q {
  font-family:var(--f-head); font-size:20px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--g-text);
  margin-bottom:.5rem;
}
.g-qa-a { font-size:13.5px; color:var(--g-text-2); line-height:1.65; }
.g-qa-a strong { color:var(--g-text); }
.g-qa-a em { color:var(--g-gold-2); font-style:normal; }
.g-qa-a ul { margin:.6rem 0 0 1.1rem; }

/* ════════ STATS — stencils ════════ */
.g-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.g-stat-num {
  font-family:var(--f-tag);
  font-size:clamp(44px, 6vw, 76px);
  color:var(--g-gold);
  filter:url(#g-spray);
  text-shadow:3px 4px 0 rgba(0,0,0,.8), 0 0 30px rgba(255,215,0,.18);
  line-height:1;
}
.g-stat-label {
  font-family:var(--f-type); font-size:11.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--g-text-3);
  margin-top:.8rem;
}

/* ════════ QUARTIERS — dalles de béton ════════ */
.g-hoods { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; margin-top:3rem; background:var(--g-line); border:1px solid var(--g-line); }
.g-hood {
  background:linear-gradient(180deg, var(--g-coal-2), #0d0c0a);
  padding:2.1rem 1.7rem;
  position:relative;
  transition:background .3s;
}
.g-hood:hover { background:linear-gradient(180deg, var(--g-sepia), #12100c); }
.g-hood-code {
  font-family:var(--f-type); font-size:10px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--g-gold-2);
}
.g-hood-name {
  font-family:var(--f-head); font-size:27px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--g-text);
  margin:.5rem 0 .6rem; line-height:.95;
}
.g-hood-desc { font-size:13px; color:var(--g-text-2); line-height:1.6; }
.g-hood::after {
  content:''; position:absolute; top:14px; right:16px;
  width:22px; height:22px;
  border-top:2px solid var(--g-gold-deep); border-right:2px solid var(--g-gold-deep);
  opacity:.5; transition:opacity .3s;
}
.g-hood:hover::after { opacity:1; }
.g-tags { display:flex; gap:9px; flex-wrap:wrap; }
.g-tag-pill {
  font-family:var(--f-type); font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--g-text-3);
  border:1px solid var(--g-line-2); padding:6px 12px 5px;
  transform:rotate(-1deg);
}
.g-tag-pill:nth-child(even){ transform:rotate(1deg); }

/* ════════ CITATION — sprayée sur le mur ════════ */
.g-quote {
  position:relative;
  padding:3rem 2.5rem;
  text-align:center;
}
.g-quote-text {
  font-family:var(--f-marker);
  font-size:clamp(20px, 3.4vw, 32px);
  color:var(--g-text);
  line-height:1.45;
  transform:rotate(-1deg);
  text-shadow:2px 3px 0 rgba(0,0,0,.85);
}
.g-quote-cite {
  font-family:var(--f-type); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--g-gold-2);
  margin-top:1.4rem;
}

/* ════════ TIMELINE WHITELIST — chaîne en or ════════ */
.g-steps { position:relative; max-width:720px; margin:3.5rem auto 0; }
.g-steps::before { /* la chaîne / ligne de spray */
  content:'';
  position:absolute; top:8px; bottom:8px; left:29px;
  width:4px;
  background:repeating-linear-gradient(180deg, var(--g-gold-2) 0 12px, rgba(218,165,32,.25) 12px 20px);
  box-shadow:0 0 16px rgba(255,215,0,.25);
}
.g-step {
  position:relative;
  display:flex; gap:26px;
  padding:0 0 2.6rem 0;
}
.g-step:last-child { padding-bottom:0; }
.g-step-badge {
  flex-shrink:0;
  width:62px; height:62px;
  display:flex; align-items:center; justify-content:center;
  background:#0d0c0a;
  border:2px solid var(--g-gold-2);
  font-family:var(--f-tag); font-size:24px; color:var(--g-gold);
  clip-path:polygon(8% 0,100% 6%,94% 94%,0 100%);
  box-shadow:0 0 22px rgba(0,0,0,.9);
  z-index:2;
}
.g-step-body {
  flex:1;
  background:var(--g-card);
  border:1px solid var(--g-line);
  padding:1.4rem 1.6rem;
  box-shadow:var(--sh-poster);
}
.g-step-title {
  font-family:var(--f-head); font-size:23px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--g-text);
  display:flex; align-items:center; gap:12px;
}
.g-step-title .mk { font-family:var(--f-type); font-size:10px; letter-spacing:2px; color:var(--g-gold-2); border:1px solid var(--g-gold-deep); padding:3px 8px 2px; }
.g-step-text { font-size:13.5px; color:var(--g-text-2); margin-top:.45rem; line-height:1.6; }

/* Tampon "stomp" au reveal */
.g-stamp-in { opacity:0; transform:scale(1.5) rotate(3deg); }
.g-stamp-in.in {
  animation:stampIn .38s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes stampIn {
  0%   { opacity:0; transform:scale(1.5) rotate(3deg); }
  62%  { opacity:1; transform:scale(.96) rotate(-.6deg); }
  80%  { transform:scale(1.02) rotate(.2deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

/* ════════ COMMENT JOUER + RÉSEAUX ════════ */
.g-2col { display:grid; grid-template-columns:1.25fr 1fr; gap:3.5rem; align-items:start; }
.g-playrow {
  display:flex; align-items:center; gap:16px;
  background:var(--g-card);
  border:1px solid var(--g-line);
  padding:1.05rem 1.2rem;
  margin-bottom:12px;
  box-shadow:4px 5px 0 rgba(0,0,0,.4);
  transition:transform .2s, border-color .2s;
}
.g-playrow:hover { transform:translateX(4px); border-color:rgba(218,165,32,.3); }
.g-playrow .ic {
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(218,165,32,.07);
  border:1px solid var(--g-gold-deep);
  color:var(--g-gold); font-size:17px;
  clip-path:polygon(6% 0,100% 4%,96% 96%,0 100%);
}
.g-playrow .tt { font-family:var(--f-head); font-size:18px; letter-spacing:1.5px; text-transform:uppercase; color:var(--g-text); line-height:1; }
.g-playrow .dd { font-size:12.5px; color:var(--g-text-3); line-height:1.5; margin-top:3px; }
.g-playrow .bd { flex:1; min-width:0; }
.g-playrow a.act {
  flex-shrink:0;
  font-family:var(--f-type); font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--g-gold-2); text-decoration:none;
  border:1px solid var(--g-gold-deep); padding:8px 15px 7px;
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.g-playrow a.act:hover { background:var(--g-gold-2); color:#000; }

.g-socials { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.g-social {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--g-card);
  border:1px solid var(--g-line);
  padding:1.5rem 1rem;
  text-decoration:none;
  font-family:var(--f-head); font-size:19px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--g-text-2);
  box-shadow:4px 5px 0 rgba(0,0,0,.4);
  transition:transform .2s, color .2s, border-color .2s;
}
.g-social:nth-child(1){ transform:rotate(-.6deg); }
.g-social:nth-child(2){ transform:rotate(.6deg); }
.g-social:nth-child(3){ transform:rotate(.5deg); }
.g-social:nth-child(4){ transform:rotate(-.5deg); }
.g-social:hover { transform:rotate(0) translateY(-3px); color:var(--g-gold); border-color:rgba(218,165,32,.35); }
.g-social i { font-size:20px; }

/* ════════ BOUTIQUE ════════ */
.g-shopcard {
  background:var(--g-card);
  border:1px solid var(--g-line);
  padding:2.6rem 2rem;
  text-align:center;
  box-shadow:var(--sh-poster);
  transform:rotate(-.4deg);
  position:relative;
}
.g-shopcard::before {
  content:''; position:absolute; top:-11px; left:14%;
  width:70px; height:22px; transform:rotate(-4deg);
  background:rgba(232,223,208,.13);
}
.g-shopcard::after {
  content:''; position:absolute; top:-11px; right:14%;
  width:70px; height:22px; transform:rotate(3deg);
  background:rgba(232,223,208,.13);
}
.g-shopcard i.big { color:#5865F2; font-size:38px; display:block; margin-bottom:1.2rem; }
.g-shopcard p { font-size:14.5px; line-height:1.7; color:var(--g-text-2); max-width:480px; margin:0 auto 1.8rem; }
.g-shopcard strong { color:var(--g-text); }

/* ════════ FAQ — dossier confidentiel ════════ */
.g-faq { margin-top:3rem; border:1px solid var(--g-line); background:var(--g-card); box-shadow:var(--sh-poster); }
.g-faq-item + .g-faq-item { border-top:1px dashed var(--g-line-2); }
.g-faq-q {
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer;
  padding:1.25rem 1.5rem;
  text-align:left;
  font-family:var(--f-type); font-size:14px; letter-spacing:1px;
  text-transform:uppercase; color:var(--g-text);
  transition:color .2s, background .2s;
}
.g-faq-q:hover { color:var(--g-gold); background:rgba(218,165,32,.04); }
.g-faq-q .no { color:var(--g-gold-2); margin-right:10px; }
.g-faq-q .chev { transition:transform .3s; color:var(--g-text-4); flex-shrink:0; }
.g-faq-item.open .g-faq-q .chev { transform:rotate(180deg); color:var(--g-gold); }
.g-faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .3s;
  padding:0 1.5rem;
  font-size:13.5px; color:var(--g-text-2); line-height:1.7;
}
.g-faq-item.open .g-faq-a { max-height:300px; padding:0 1.5rem 1.4rem; }
.g-faq-a strong { color:var(--g-text); }

/* ════════ FOOTER — asphalte ════════ */
.g-footer {
  position:relative;
  background:
    radial-gradient(ellipse 70% 100% at 50% 120%, rgba(42,36,28,.5), transparent 70%),
    #070605;
  border-top:1px solid var(--g-line);
  padding:4.5rem 1.5rem 0;
  overflow:hidden;
}
.g-footer-tag { /* graffiti fantôme en fond */
  position:absolute; right:-2%; bottom:-6%;
  font-family:var(--f-tag);
  font-size:clamp(120px, 22vw, 300px);
  color:rgba(255,255,255,.022);
  pointer-events:none; user-select:none;
  line-height:1;
  transform:rotate(-4deg);
}
.g-footer-wrap {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  position:relative; z-index:2;
}
.g-footer h5 {
  font-family:var(--f-head); font-size:17px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--g-gold-2);
  margin-bottom:1.1rem;
}
.g-footer a { display:block; color:var(--g-text-3); text-decoration:none; font-size:13px; padding:4px 0; transition:color .2s, padding-left .2s; }
.g-footer a:hover { color:var(--g-gold); padding-left:5px; }
.g-footer-brand p { font-size:13px; color:var(--g-text-3); line-height:1.65; max-width:34ch; }
.g-footer-socials { display:flex; gap:10px; margin-top:1.4rem; }
.g-footer-socials a {
  width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--g-line-2); color:var(--g-text-3);
  font-size:15px;
  transition:all .2s;
  clip-path:polygon(8% 0,100% 6%,94% 94%,0 100%);
}
.g-footer-socials a:hover { border-color:var(--g-gold-2); color:var(--g-gold); background:rgba(218,165,32,.08); padding-left:0; }
.g-footer-bottom {
  max-width:1180px; margin:3.5rem auto 0;
  border-top:1px solid var(--g-line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.4rem 0 1.6rem;
  font-family:var(--f-type); font-size:10.5px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--g-text-4);
  position:relative; z-index:2;
}

/* ════════ REVEALS AU SCROLL (entrée sèche + shake) ════════
   Important : pas de fill "forwards" — une animation terminée qui garde la
   main sur `transform` écraserait tous les effets :hover (tilt, lift, zoom).
   L'état final est porté par les propriétés normales de .gr.in.            */
.gr { opacity:0; transform:translateY(34px); }
.gr[data-gr="left"]  { transform:translateX(-44px); }
.gr[data-gr="right"] { transform:translateX(44px); }
.gr.in { opacity:1; transform:none; animation:grIn .55s cubic-bezier(.2,1.2,.35,1); }
.gr[data-gr="left"].in  { animation-name:grInL; }
.gr[data-gr="right"].in { animation-name:grInR; }
@keyframes grIn {
  0%   { opacity:0; transform:translateY(34px); }
  60%  { opacity:1; transform:translate(0,0) rotate(.35deg); }
  78%  { transform:translate(0,0) rotate(-.25deg); }
  100% { opacity:1; transform:none; }
}
@keyframes grInL {
  0%   { opacity:0; transform:translateX(-44px); }
  60%  { opacity:1; transform:translate(0,0) rotate(.35deg); }
  78%  { transform:translate(0,0) rotate(-.25deg); }
  100% { opacity:1; transform:none; }
}
@keyframes grInR {
  0%   { opacity:0; transform:translateX(44px); }
  60%  { opacity:1; transform:translate(0,0) rotate(-.35deg); }
  78%  { transform:translate(0,0) rotate(.25deg); }
  100% { opacity:1; transform:none; }
}

/* ════════ FLICKER — néon fatigué ════════ */
.g-flick { animation:flick 7s linear infinite; }
@keyframes flick {
  0%,100% { opacity:1; }
  91.5% { opacity:1; } 92% { opacity:.35; } 92.5% { opacity:1; }
  93.5% { opacity:.6; } 94% { opacity:1; }
  97% { opacity:1; } 97.4% { opacity:.5; } 97.8% { opacity:1; }
}

/* ════════ CURSEUR PERSONNALISÉ ════════
   Styles déplacés dans ybn-boost.css (§ 14) au build 5.2, avec le JS.
   Ils y sont préfixés `yb-cur-*` et disponibles sur TOUTES les pages,
   alors que cette feuille n'est chargée que par l'accueil.             */

/* ════════ NOTIFS (compat shared.js) ════════ */
#notif-wrap {
  position:fixed; top:86px; right:20px; z-index:100000;
  display:flex; flex-direction:column; gap:10px;
}
.notif {
  display:flex; align-items:center; gap:11px;
  background:#0d0c0a;
  border:1px solid var(--g-line-2);
  border-left:3px solid var(--g-gold-2);
  box-shadow:6px 7px 0 rgba(0,0,0,.5);
  padding:.85rem 1.15rem;
  font-family:var(--f-body); font-size:13.5px; font-weight:600;
  color:var(--g-text);
  animation:notifIn .3s cubic-bezier(.2,1.4,.4,1);
  max-width:340px;
}
.notif.ok   { border-left-color:var(--g-good); } .notif.ok i { color:var(--g-good); }
.notif.err  { border-left-color:var(--g-bad); }  .notif.err i { color:var(--g-bad); }
.notif.warn { border-left-color:var(--g-warn); } .notif.warn i { color:var(--g-warn); }
.notif.inf i { color:var(--g-gold-2); }
@keyframes notifIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* Ripple + dropdown (compat shared.js) */
.rip {
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:rgba(255,215,0,.35);
  transform:translate(-50%,-50%);
  animation:ripGo .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripGo { to { opacity:0; transform:translate(-50%,-50%) scale(16); } }
@keyframes dropIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ════════ RESPONSIVE ════════ */
@media (max-width:1024px) {
  .g-burger { display:flex; }
  .g-nav { gap:16px; }
  .g-nav-links {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(8,7,6,.98);
    border-bottom:1px solid var(--g-line);
    flex-direction:column; align-items:flex-start;
    padding:1.4rem 2rem; gap:1.1rem;
  }
  .g-nav-links.open { display:flex; }
  .g-split, .g-2col { grid-template-columns:1fr; gap:2.6rem; }
  .g-chains { right:-4%; opacity:.5; height:42%; }
}
@media (max-width:680px) {
  .g-section { padding:4.5rem 1.15rem; }
  .g-chains { height:24%; opacity:.45; right:1%; }
  .g-stats { grid-template-columns:1fr; gap:2.4rem; text-align:center; }
  .g-steps::before { left:23px; }
  .g-step { gap:16px; }
  .g-step-badge { width:48px; height:48px; font-size:19px; }
  .g-playrow { flex-wrap:wrap; }
  .g-playrow a.act { width:100%; text-align:center; }
  .g-lamp .lbl { display:none; }
  .g-footer-wrap { grid-template-columns:1fr 1fr; }
  .g-footer-brand { grid-column:1/-1; }
  .g-hero-content { padding-top:6rem; }
  .g-corner-label { display:none; }
  #g-cursor, #g-cursor-halo { display:none !important; }
}

/* ════════ ACCESSIBILITÉ — mouvement réduit ════════ */
@media (prefers-reduced-motion: reduce) {
  body::after { animation:none; }
  .sp-tag, .sp-tag-img { clip-path:none; animation:none; }
  .sp-tag::after, .sp-drips span, .sp-city, .sp-sub, .sp-actions, .sp-skip {
    animation:none !important; opacity:1 !important; height:auto;
  }
  .g-marquee-track, .g-chains, .g-hero-fog, .g-flick, .g-lamp.loading svg { animation:none !important; }
  .gr, .g-stamp-in { opacity:1 !important; transform:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ════════════════════════════════════════════════════════════════════
   LOGO À LA PLACE DU LETTRAGE
   ────────────────────────────────────────────────────────────────────
   Le tag « YBN » était jusqu'ici du TEXTE rendu en Sedgwick Ave Display.
   Il est désormais remplacé par le vrai logo (logo.png) : identité
   strictement identique quel que soit le navigateur, plus aucune
   dépendance à une police Google pour l'élément central de la marque.

   Le filtre SVG #g-spray n'est PAS réappliqué : le logo possède déjà
   ses bords brossés, le repasser dessus le rendrait bouillie.
   ════════════════════════════════════════════════════════════════════ */

/* ── Splash : le tag sprayé sur l'écran noir ── */
.sp-tag-img {
  display: block;
  height: min(clamp(96px, 21vw, 200px), 32svh);
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.9)) drop-shadow(0 0 38px rgba(255,215,0,.20));
  clip-path: inset(0 100% 0 0);
  animation: sprayReveal 1.15s .35s steps(18) forwards,
             logoGoldWake 1.6s 1.5s ease forwards,
             flick 8s 3.2s linear infinite;
}
/* La lueur dorée monte après le passage du spray */
@keyframes logoGoldWake {
  0%   { filter: drop-shadow(4px 5px 0 rgba(0,0,0,.9)) drop-shadow(0 0 0 rgba(255,215,0,0)); }
  55%  { filter: drop-shadow(4px 5px 0 rgba(0,0,0,.9)) drop-shadow(0 0 52px rgba(255,215,0,.55)); }
  100% { filter: drop-shadow(4px 5px 0 rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(255,215,0,.30)); }
}

/* ── Héro : le logo remplace le <h1> textuel ── */
.g-hero-title { line-height: 0; }        /* plus de texte : on annule l'interlignage */
.g-hero-title .g-hero-logo {
  display: block;
  height: min(clamp(104px, 20vw, 248px), 38svh);
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(5px 6px 0 rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(255,215,0,.16));
}

/* ── Pied de page : le graffiti fantôme en filigrane ── */
.g-footer-tag {
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.g-footer-tag img {
  height: clamp(150px, 24vw, 340px);
  width: auto;
  opacity: .028;
  filter: grayscale(1) brightness(3);
}

/* ── Signature de pied de page : « [logo] Los Angeles » ── */
.g-footer-sig { display: flex; align-items: center; gap: 9px; }
.g-footer-sig img {
  height: 30px; width: auto;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.22));
}
.g-footer-sig .city {
  font-family: var(--f-head);
  font-size: 24px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--g-gold-2);
  line-height: 1;
}

/* Mode léger / mouvement réduit : le logo reste, les effets s'arrêtent */
html.g-low-fx .sp-tag-img { animation: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .sp-tag-img { animation: none; clip-path: none; }
}