/* =========================================================================
   ATLAS-RECORDS.® — V2 IMMERSIVE
   Direction : "film noir / studio son futuriste"
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #050506;
  --bg-soft:       #0b0b0d;
  --bg-panel:      #111114;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);
  --ivory:         #f3f1ec;
  --muted:         #8d8d94;
  --muted-dim:     #58585e;
  --red:           #e30613;
  --red-soft:      rgba(227,6,19,.16);
  --red-glow:      rgba(227,6,19,.55);

  --f-display:     'Space Grotesk', 'Inter', sans-serif;
  --f-body:        'Inter', sans-serif;
  --f-mono:        'JetBrains Mono', monospace;

  --ease:          cubic-bezier(.16,1,.3,1);
  --ease-soft:     cubic-bezier(.22,1,.36,1);

  --header-h: 84px;
}

@media (max-width: 720px){ :root{ --header-h: 64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:auto; }
html.has-lenis{ height:auto; }
body{
  margin:0; background:var(--bg); color:var(--ivory);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--red); color:#fff; }

.container{ width:min(1240px, 92vw); margin-inline:auto; }

/* reduced motion : coupe le superflu, garde l'accessible */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================================
   FILM GRAIN / VIGNETTE / SCANLINE — ambiance globale
   ========================================================================= */
.grain-overlay{
  position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px;
}
.vignette-overlay{
  position:fixed; inset:0; z-index:9989; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.scanline-overlay{
  position:fixed; inset:0; z-index:9991; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
}

/* fixed HUD : timecode + REC, présent partout, ambiance "montage" */
.hud{
  position:fixed; top:calc(var(--header-h) + 14px); right:18px; z-index:60;
  display:flex; align-items:center; gap:10px; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.06em; color:var(--muted); pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
}
.hud.is-visible{ opacity:1; }
.hud .rec-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red-glow); animation:recPulse 1.6s ease-in-out infinite; }
@keyframes recPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@media (max-width: 720px){ .hud{ display:none; } }

/* =========================================================================
   CURSEUR PERSONNALISÉ (desktop only)
   ========================================================================= */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; will-change:transform; }
.cursor-dot{ width:6px; height:6px; background:var(--red); transform:translate(-50%,-50%); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.35); transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.cursor-ring.is-hover{ width:64px; height:64px; border-color:var(--red); background:rgba(227,6,19,.08); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* =========================================================================
   PRÉCHARGEUR
   ========================================================================= */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory); }
.preloader-bar{ width:min(280px, 60vw); height:1px; background:var(--line); position:relative; overflow:hidden; }
.preloader-bar span{ position:absolute; inset:0; width:0%; background:var(--red); box-shadow:0 0 12px var(--red-glow); transition:width .2s linear; }
.preloader-pct{ font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.08em; }

/* =========================================================================
   HEADER (header.php) — restylé
   ========================================================================= */
.ar-header{
  position:fixed; top:0; left:0; right:0; z-index:99999 !important; height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(5,5,6,.85), rgba(5,5,6,0));
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), transform .5s var(--ease);
}
.ar-header.is-scrolled{ background:rgba(7,7,8,.72); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); }
.ar-header.is-hidden{ transform:translateY(-100%); }
.ar-header-inner{ width:min(1320px, 94vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.ar-brand{ display:flex; align-items:center; gap:12px; }
.ar-brand-logo{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(227,6,19,.35)); }
.ar-brand-copy{ display:flex; flex-direction:column; line-height:1.1; }
.ar-brand-copy strong{ font-family:var(--f-display); font-size:15px; font-weight:700; letter-spacing:.01em; }
.ar-brand-copy small{ font-family:var(--f-mono); font-size:10px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }

.ar-nav{ display:flex; align-items:center; gap:28px; }
.ar-nav-link{ position:relative; font-family:var(--f-body); font-size:13px; font-weight:500; color:var(--muted); padding:6px 0; transition:color .3s var(--ease); }
.ar-nav-link::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--red); transition:width .35s var(--ease); }
.ar-nav-link:hover, .ar-nav-link.active{ color:var(--ivory); }
.ar-nav-link:hover::after, .ar-nav-link.active::after{ width:100%; }
@media (max-width: 980px){ .ar-nav{ display:none; } }

.ar-burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(255,255,255,.03); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.ar-burger span{ width:16px; height:1px; background:var(--ivory); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.ar-burger.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.ar-burger.active span:nth-child(2){ opacity:0; }
.ar-burger.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width: 980px){ .ar-burger{ display:flex; } }

.ar-mobile-panel{
  position:fixed; inset:0; z-index:999999 !important; background:rgba(5,5,6,.97); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.ar-mobile-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.ar-mobile-nav{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.ar-mobile-link{ font-family:var(--f-display); font-size:26px; font-weight:600; color:var(--muted); }
.ar-mobile-link.active, .ar-mobile-link:hover{ color:var(--ivory); }
body.menu-open{ overflow:hidden; }

/* =========================================================================
   BANNIÈRE TICKER (menu.php)
   ========================================================================= */
.ar-banner{ position:fixed; top:var(--header-h); left:0; right:0; z-index:150; height:32px; overflow:hidden; background:var(--red); }
.ar-banner-track{ display:flex; gap:60px; white-space:nowrap; height:100%; align-items:center; animation:tickerScroll 22s linear infinite; }
.ar-banner-track span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding-inline:30px; }
@keyframes tickerScroll{ from{ transform:translateX(0) } to{ transform:translateX(-33.333%) } }

/* =========================================================================
   DOCK (menu.php) — flottant bas, glassmorphique
   ========================================================================= */
.ar-dock{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:180; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.ar-dock.is-hidden{ transform:translateX(-50%) translateY(140%); opacity:0; }
.ar-dock-inner{
  display:flex; align-items:center; gap:4px; padding:8px; border-radius:999px;
  background:rgba(17,17,20,.72); backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--line-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.ar-dock-item{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px; border-radius:999px; transition:background .3s var(--ease); }
.ar-dock-item:hover, .ar-dock-item.active{ background:rgba(255,255,255,.06); }
.ar-dock-icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; opacity:.65; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.ar-dock-icon img{ width:100%; height:100%; object-fit:contain; filter:grayscale(1) brightness(1.6); }
.ar-dock-item:hover .ar-dock-icon, .ar-dock-item.active .ar-dock-icon{ opacity:1; transform:translateY(-2px); }
.ar-dock-item.active .ar-dock-icon img{ filter:none; }
.ar-dock-label{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ar-dock-item.active .ar-dock-label{ color:var(--red); }
@media (max-width: 720px){ .ar-dock-label{ display:none; } .ar-dock-item{ padding:9px; } }

/* =========================================================================
   HERO — scène 3D + typographie cinétique
   ========================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-canvas-wrap{ position:absolute; inset:0; z-index:1; }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-gradient{ position:absolute; inset:0; z-index:2; background:linear-gradient(to top, var(--bg) 0%, rgba(5,5,6,.35) 45%, rgba(5,5,6,.15) 70%, rgba(5,5,6,.55) 100%); pointer-events:none; }

.hero-content{ position:relative; z-index:5; width:100%; padding:0 0 min(9vh, 90px); }
.hero-eyebrow{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.hero-eyebrow .dash{ width:26px; height:1px; background:var(--red); }

.hero-title{ font-family:var(--f-display); font-weight:700; line-height:.92; font-size:clamp(48px, 10vw, 148px); letter-spacing:-.01em; overflow:hidden; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:inline-block; transform:translateY(110%); }
.hero-title .accent{ color:var(--red); }

.hero-sub{ max-width:520px; margin-top:26px; font-size:16px; color:var(--muted); line-height:1.7; }

.hero-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:52px; flex-wrap:wrap; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-size:13px; font-weight:600; letter-spacing:.02em; border-radius:999px; border:1px solid transparent; transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); }
.btn:active{ transform:scale(.96); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 30px rgba(227,6,19,.28); }
.btn-red:hover{ background:#ff0f1e; transform:translateY(-2px); }
.btn-white{ background:var(--ivory); color:#0a0a0a; }
.btn-white:hover{ transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ivory); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--ivory); }

.hero-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-mono); font-size:10px; color:var(--muted); letter-spacing:.1em; }
.hero-scroll-track{ width:1px; height:46px; background:var(--line-strong); position:relative; overflow:hidden; }
.hero-scroll-track span{ position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--red); animation:scrollTrack 1.8s var(--ease) infinite; }
@keyframes scrollTrack{ 0%{ top:-100% } 60%{ top:100% } 100%{ top:100% } }
@media (max-width:720px){ .hero-foot{ align-items:flex-start; flex-direction:column; } }

/* =========================================================================
   LECTEUR AUDIO — "console"
   ========================================================================= */
.player-section{ padding:70px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); }
.player-deck{ display:flex; align-items:center; gap:28px; padding:22px 26px; border:1px solid var(--line-strong); border-radius:20px; background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.vinyl{ position:relative; width:74px; height:74px; border-radius:50%; flex:none; background:radial-gradient(circle at center, #1a1a1c 0 18%, #0a0a0b 19% 40%, #1a1a1c 41% 42%, #0a0a0b 43% 100%); border:1px solid var(--line-strong); animation:vinylSpin 6s linear infinite; animation-play-state:paused; }
.vinyl.is-playing{ animation-play-state:running; }
.vinyl::after{ content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; background:var(--red); }
@keyframes vinylSpin{ to{ transform:rotate(360deg); } }

.play-btn{ width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; flex:none; transition:background .3s var(--ease), border-color .3s var(--ease); }
.play-btn:hover{ border-color:var(--red); background:var(--red-soft); }
.play-btn svg{ width:20px; height:20px; fill:var(--ivory); }

.player-body{ flex:1; min-width:0; }
.audio-title{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.waveform{ display:flex; align-items:center; gap:3px; height:26px; }
.waveform i{ width:3px; border-radius:2px; background:var(--line-strong); transition:background .3s; }
.waveform.is-playing i{ background:var(--red); animation:bar 1s ease-in-out infinite; }
.waveform i:nth-child(odd){ animation-delay:-.4s; }
@keyframes bar{ 0%,100%{ transform:scaleY(.3) } 50%{ transform:scaleY(1) } }
.progress-container{ margin-top:12px; height:3px; background:var(--line); border-radius:3px; cursor:pointer; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:var(--red); box-shadow:0 0 10px var(--red-glow); }
.time-display{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--f-mono); font-size:10px; color:var(--muted); }
.player-badge{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px; flex:none; }
@media (max-width:720px){ .player-deck{ flex-wrap:wrap; } .player-body{ width:100%; order:3; } }

/* =========================================================================
   STRUCTURE GÉNÉRALE DES SECTIONS
   ========================================================================= */
.section{ position:relative; padding:120px 0; }
.section.alt{ background:var(--bg-soft); }
.section-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
.section-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.section-kicker::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red-glow); }
.section-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(30px, 4vw, 48px); letter-spacing:-.01em; }
.section-note{ max-width:460px; color:var(--muted); margin-top:12px; font-size:14.5px; line-height:1.7; }
.reveal{ opacity:0; transform:translateY(36px); }

@media (max-width:720px){ .section{ padding:76px 0; } }

/* =========================================================================
   UNIVERS — scènes pinnées (desktop) / cartes empilées (mobile)
   ========================================================================= */
.scenes-pin{ position:relative; }
.scenes-viewport{ height:100svh; overflow:hidden; display:flex; align-items:center; }
.scenes-track{ display:flex; will-change:transform; }
.scene-panel{
  position:relative; width:100vw; height:100svh; flex:none; display:flex; align-items:flex-end; padding:0 0 90px;
  border-right:1px solid var(--line);
}
.scene-panel::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,5,6,.15), rgba(5,5,6,.85)); }
.scene-panel::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(227,6,19,.14), transparent 60%); }
.scene-inner{ position:relative; z-index:2; width:min(1240px,92vw); margin-inline:auto; }
.scene-code{ font-family:var(--f-mono); font-size:12px; color:var(--red); letter-spacing:.14em; margin-bottom:16px; }
.scene-panel h3{ font-family:var(--f-display); font-size:clamp(34px,6vw,72px); font-weight:700; }
.scene-panel p{ max-width:480px; color:var(--muted); margin-top:16px; font-size:15px; line-height:1.7; }
.scene-progress{ position:absolute; bottom:32px; right:5%; z-index:3; display:flex; gap:8px; }
.scene-progress span{ width:26px; height:2px; background:var(--line-strong); }
.scene-progress span.active{ background:var(--red); }

@media (max-width: 900px){
  .scenes-viewport{ height:auto; }
  .scenes-track{ flex-direction:column; }
  .scene-panel{ width:100%; height:auto; min-height:64vh; padding:70px 0; border-right:none; border-bottom:1px solid var(--line); }
}

/* =========================================================================
   ACTUALITÉS
   ========================================================================= */
.news-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
.news-stack{ display:flex; flex-direction:column; gap:20px; }
.news-card{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); min-height:260px; display:flex; align-items:flex-end; cursor:pointer; background:var(--bg-panel); }
.news-card.large{ min-height:100%; }
.news-card .card-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:brightness(.65) saturate(1.05); }
.news-card:hover .card-bg{ transform:scale(1.06); }
.news-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); }
.card-content{ position:relative; z-index:2; padding:24px; }
.tag-pill{ display:inline-block; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--red); padding:5px 12px; border-radius:999px; margin-bottom:12px; }
.news-card h3{ font-family:var(--f-display); font-size:20px; font-weight:600; }
.read-more{ display:inline-block; margin-top:10px; font-size:12px; color:var(--muted); position:relative; }
.news-card:hover .read-more{ color:var(--ivory); }
@media (max-width: 900px){ .news-layout{ grid-template-columns:1fr; } }

/* =========================================================================
   SORTIES — "reel" horizontal, tilt 3D CSS
   ========================================================================= */
.releases-scroll{ display:flex; gap:22px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.releases-scroll::-webkit-scrollbar{ height:4px; }
.releases-scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.release-card{ flex:none; width:210px; scroll-snap-align:start; perspective:800px; }
.release-cover{ width:210px; height:210px; object-fit:cover; border-radius:14px; border:1px solid var(--line); transition:transform .5s var(--ease), box-shadow .5s var(--ease); transform-style:preserve-3d; }
.release-card:hover .release-cover{ box-shadow:0 24px 50px rgba(0,0,0,.5); }
.release-meta{ padding-top:14px; }
.release-artist{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.release-title{ font-family:var(--f-display); font-size:16px; font-weight:600; margin-top:6px; }
.text-link{ display:inline-block; margin-top:8px; font-size:12px; color:var(--muted); border-bottom:1px solid transparent; }
.text-link:hover{ color:var(--ivory); border-color:var(--ivory); }

/* =========================================================================
   ARTISTES — "cast"
   ========================================================================= */
.grid{ display:grid; gap:20px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.artist-card{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; border:1px solid var(--line); }
.artist-card .card-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.75); transition:filter .5s var(--ease), transform .6s var(--ease); }
.artist-card:hover .card-bg{ filter:grayscale(0) brightness(.85); transform:scale(1.05); }
.artist-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8), transparent 55%); }
.artist-card h3{ position:relative; z-index:2; font-family:var(--f-display); font-size:16px; font-weight:600; }
.artist-card .card-content{ position:absolute; bottom:0; left:0; right:0; padding:18px; z-index:2; }

@media (max-width: 1080px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){
  .grid-4.hscroll-mobile{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .grid-4.hscroll-mobile > *{ flex:none; width:72vw; scroll-snap-align:start; }
}

/* =========================================================================
   PRODUCTIONS — "rushes"
   ========================================================================= */
.made-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bg-panel); }
.media-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.media-frame iframe, .media-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.made-info{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.made-info h3{ font-family:var(--f-display); font-size:15px; font-weight:600; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* =========================================================================
   LOCALISATION
   ========================================================================= */
.map-card{ border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--bg-panel); }
.atlas-map{ width:100%; height:420px; filter:grayscale(.15) contrast(1.05); }
.map-below{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; flex-wrap:wrap; border-top:1px solid var(--line); }
.muted{ color:var(--muted); font-size:13px; }
.map-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================================
   POPUPS / MODALES — PRIORITÉ ET DÉFILEMENT RENFORCÉS
   ========================================================================= */
.popup-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important; /* Passe au-dessus du menu, des bandeaux et du dock */
    align-items: center;
    justify-content: center;
    background: rgba(3, 3, 4, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 20px;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.popup-box {
    position: relative !important;
    width: min(620px, 94vw) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: var(--bg-panel, #111114) !important;
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 20px !important;
    border-top: 2px solid var(--red, #e30613) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
    margin: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    font-family: var(--f-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #8d8d94);
    position: sticky;
    top: 0;
    background: var(--bg-panel, #111114);
    z-index: 10;
}

.popup-close {
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
    transition: background 0.3s, border-color 0.3s;
}

.popup-close:hover {
    background: rgba(227, 6, 19, 0.2);
    border-color: var(--red, #e30613);
    color: #fff;
}

.popup-content {
    padding: 24px 22px 28px;
}

.popup-content img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 18px;
    max-height: 300px;
    object-fit: cover;
}

.popup-content h2 {
    font-family: var(--f-display, sans-serif);
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}

.popup-content p {
    color: var(--muted, #8d8d94);
    font-size: 14.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .popup-overlay {
        padding: 12px !important;
    }
    .popup-box {
        max-height: 90vh !important;
    }
    .popup-content {
        padding: 18px 16px 22px;
    }
}

/* =========================================================================
   FOOTER — "générique de fin"
   ========================================================================= */
.footer{ position:relative; padding:90px 0 130px; text-align:center; border-top:1px solid var(--line); }
.footer-logo{ width:44px; margin:0 auto 18px; opacity:.85; }
.footer-brand{ font-family:var(--f-display); font-size:22px; font-weight:700; }
.footer-text{ color:var(--muted); font-size:13px; margin-top:8px; }
.footer-links{ display:flex; justify-content:center; gap:26px; margin-top:26px; flex-wrap:wrap; }
.footer-links a{ font-size:12px; color:var(--muted); }
.footer-links a:hover{ color:var(--ivory); }

/* =========================================================================
   UTILITAIRES
   ========================================================================= */
.eyebrow{ display:none; }
@media (max-width:640px){
  .hero-title{ font-size:clamp(40px,13vw,72px); }
  .section-top{ align-items:flex-start; }
}


/* =========================================================================
   V3 — IMMERSION SPATIALE, PROFONDEUR ET FINITIONS CINÉMATIQUES
   ========================================================================= */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(227,6,19,.14), transparent 32%),
    radial-gradient(circle at 80% 12%, rgba(97,25,255,.10), transparent 28%),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,.045), transparent 32%),
    #050506;
}
.aurora-overlay{position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.45;filter:blur(80px);background:conic-gradient(from 180deg at 50% 50%,transparent,rgba(227,6,19,.12),transparent,rgba(120,35,255,.08),transparent);animation:auroraDrift 22s linear infinite;}
@keyframes auroraDrift{to{transform:rotate(360deg) scale(1.08)}}
.depth-grid{position:fixed;inset:50% -20% -30%;z-index:-2;pointer-events:none;opacity:.13;transform:perspective(650px) rotateX(68deg);transform-origin:center top;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 20%,transparent 90%);animation:gridTravel 7s linear infinite;}
@keyframes gridTravel{to{background-position:0 72px,72px 0}}
.sound-orb{position:fixed;right:22px;bottom:24px;z-index:260;display:flex;align-items:center;gap:10px;padding:9px 13px 9px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:var(--ivory);background:rgba(8,8,10,.62);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 18px 55px rgba(0,0,0,.45);}
.sound-orb-core{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff 0 7%,var(--red) 9% 30%,rgba(227,6,19,.15) 32% 100%);box-shadow:0 0 24px rgba(227,6,19,.5);}
.sound-orb[aria-pressed="true"] .sound-orb-core{animation:soundPulse 1.3s ease-in-out infinite;}
.sound-orb-label{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@keyframes soundPulse{50%{transform:scale(1.16);box-shadow:0 0 38px rgba(227,6,19,.85)}}
.hero{isolation:isolate;min-height:100svh;}
.hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 0 18%,rgba(5,5,6,.12) 44%,rgba(5,5,6,.82) 100%)}
.hero-content{padding-bottom:clamp(72px,10vh,120px)}
.hero-title{font-size:clamp(58px,11.4vw,176px);max-width:100%;text-wrap:balance;text-shadow:0 0 46px rgba(227,6,19,.11)}
.hero-title .accent{display:inline-block;filter:drop-shadow(0 0 24px rgba(227,6,19,.25))}
.hero-sub{font-size:clamp(15px,1.3vw,19px);max-width:650px}
.hero-actions .btn{position:relative;overflow:hidden}
.hero-actions .btn::before{content:"";position:absolute;inset:-2px;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:transform .75s var(--ease)}
.hero-actions .btn:hover::before{transform:translateX(120%) skewX(-20deg)}
.scene-panel{overflow:hidden;background:linear-gradient(135deg,#08080a,#0e0e13)}
.scene-panel:nth-child(2)::after{background:radial-gradient(circle at 70% 35%,rgba(128,40,255,.15),transparent 55%)}
.scene-panel:nth-child(3)::after{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.10),transparent 55%)}
.scene-panel:nth-child(4)::after{background:radial-gradient(circle at 70% 65%,rgba(227,6,19,.18),transparent 55%)}
.scene-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:end;gap:50px}
.scene-code{grid-column:1/-1;text-transform:uppercase}
.scene-panel h3{font-size:clamp(40px,7vw,104px);line-height:.94;white-space:nowrap;letter-spacing:-.045em}
.scene-panel p{justify-self:end;font-size:clamp(15px,1.35vw,19px)}
.news-card,.artist-card,.made-card,.release-cover,.map-card{transform:translateZ(0);box-shadow:0 28px 80px rgba(0,0,0,.25)}
.news-card::before,.artist-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:1px solid transparent;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 35%,rgba(227,6,19,.24)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.35}
.section-title{font-size:clamp(38px,5.2vw,76px);line-height:.97;letter-spacing:-.045em}
.footer{position:relative;overflow:hidden}
.footer::before{content:"ATLAS";position:absolute;left:50%;bottom:-.28em;transform:translateX(-50%);font:700 clamp(120px,28vw,460px)/1 var(--f-display);color:rgba(255,255,255,.018);pointer-events:none}
@media(max-width:900px){.scene-inner{display:block}.scene-panel h3{white-space:normal;font-size:clamp(38px,12vw,72px);overflow-wrap:anywhere}.scene-panel p{margin-top:28px}.sound-orb{right:12px;bottom:78px}.sound-orb-label{display:none}.depth-grid{opacity:.07}}
@media(max-width:540px){.hero-title{font-size:clamp(48px,16vw,78px);line-height:.88}.hero-actions{width:100%}.hero-actions .btn{width:100%;justify-content:center}.scene-panel{min-height:74vh}.ar-dock-inner{max-width:94vw;overflow-x:auto}.ar-dock-item{flex:none}.section-title{font-size:38px}}

/* === ATLAS V4 — IMMERSION CINEMATIQUE === */
:root{--red:#ef0b24;--red2:#70000f;--ink:#030305;--glass:rgba(13,13,18,.58)}
body{background:#030305}.cursor-dot,.cursor-ring{display:none!important}body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:auto!important}
.cinematic-hero{min-height:100svh;isolation:isolate;align-items:center;padding-top:var(--header-h)}
.hero-media,.hero-video,#heroCanvas,.hero-beams{position:absolute;inset:0;width:100%;height:100%}.hero-media{overflow:hidden;z-index:0}.hero-video{object-fit:cover;opacity:.38;filter:contrast(1.25) saturate(.8) hue-rotate(-8deg);mix-blend-mode:screen}.hero-media:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(239,11,36,.22),transparent 30%),linear-gradient(90deg,rgba(3,3,5,.98) 0%,rgba(3,3,5,.55) 45%,rgba(3,3,5,.15) 70%,rgba(3,3,5,.85) 100%),linear-gradient(0deg,#030305 0%,transparent 35%)}
.hero-beams{background:repeating-linear-gradient(115deg,transparent 0 10%,rgba(255,255,255,.025) 10.2%,transparent 10.6%);animation:beamDrift 15s linear infinite;transform:scale(1.4)}@keyframes beamDrift{to{transform:scale(1.4) translate3d(-5%,3%,0)}}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 90px rgba(239,11,36,.11),inset 0 0 70px rgba(239,11,36,.05)}.hero-orbit-a{width:min(70vw,900px);aspect-ratio:1;right:-18vw;top:-20%;animation:orbitSpin 36s linear infinite}.hero-orbit-b{width:min(38vw,480px);aspect-ratio:1;right:8%;top:18%;animation:orbitSpin 24s linear infinite reverse}@keyframes orbitSpin{to{transform:rotate(360deg)}}
.hero-shards i{position:absolute;width:1px;height:18vh;background:linear-gradient(transparent,rgba(255,255,255,.7),transparent);opacity:.22;transform:rotate(24deg);animation:shard 8s linear infinite}.hero-shards i:nth-child(1){left:62%;top:15%}.hero-shards i:nth-child(2){left:72%;top:45%;animation-delay:-2s}.hero-shards i:nth-child(3){left:88%;top:24%;animation-delay:-4s}.hero-shards i:nth-child(4){left:55%;top:68%;animation-delay:-6s}.hero-shards i:nth-child(5){left:95%;top:60%;animation-delay:-1s}.hero-shards i:nth-child(6){left:80%;top:80%;animation-delay:-5s}@keyframes shard{50%{transform:translate3d(-80px,60px,0) rotate(24deg);opacity:.06}}
.hero-interface{position:absolute;z-index:4;left:3vw;right:3vw;top:calc(var(--header-h) + 22px);display:flex;justify-content:space-between;font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.hero-content{z-index:5;padding:9vh 0 8vh;display:flex;flex-direction:column;align-items:flex-start}.hero-kicker{display:flex;align-items:center;gap:12px;font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#b8b8c1}.hero-kicker span{width:42px;height:1px;background:var(--red);box-shadow:0 0 18px var(--red)}
.hero-title{margin:22px 0 0;display:flex;flex-direction:column;font-size:clamp(72px,13vw,185px);line-height:.73;letter-spacing:-.075em;text-transform:uppercase;overflow:visible}.hero-title-main{color:#fff;text-shadow:0 0 40px rgba(255,255,255,.08)}.hero-title-accent{color:transparent;-webkit-text-stroke:1.5px var(--red);text-shadow:0 0 35px rgba(239,11,36,.35);margin-left:clamp(18px,8vw,130px)}
.hero-sub{max-width:620px;margin:42px 0 0;font-size:clamp(15px,1.3vw,18px);line-height:1.8;color:#b4b4bd}.hero-actions{margin-top:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.btn-glass{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.2);backdrop-filter:blur(14px)}.hero-link{margin-left:12px;font-size:13px;color:#d3d3d8}.hero-link span{display:inline-block;margin-left:10px;color:var(--red);animation:down 1.5s ease-in-out infinite}@keyframes down{50%{transform:translateY(7px)}}
.hero-signals{display:flex;gap:50px;margin-top:56px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}.hero-signals div{display:grid;gap:2px}.hero-signals b{font:700 20px/1 var(--f-display);color:#fff}.hero-signals span{font:500 10px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#72727c}.hero-bottomline{position:absolute;bottom:18px;left:3vw;right:3vw;z-index:5;display:flex;align-items:center;gap:14px;color:#666;font:500 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}.hero-bottomline span{height:1px;background:rgba(255,255,255,.1);flex:1}
.section-cinematic{position:relative}.manifesto{min-height:125vh;padding:18vh 5vw;overflow:hidden;background:radial-gradient(circle at 30% 30%,rgba(239,11,36,.10),transparent 35%),#050507}.manifesto-sticky{position:sticky;top:25vh;z-index:2;max-width:1200px;margin:auto}.manifesto-label{font:600 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.2em;color:var(--red)}.manifesto h2{font:700 clamp(42px,7vw,105px)/.98 var(--f-display);letter-spacing:-.05em;color:#f4f4f6}.manifesto h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4)}.manifesto-stream{position:absolute;left:-4%;right:-4%;bottom:8%;display:flex;gap:4vw;white-space:nowrap;transform:rotate(-4deg);opacity:.12}.manifesto-stream span{font:800 8vw/1 var(--f-display);text-transform:uppercase;-webkit-text-stroke:1px white;color:transparent}

/* ÉCOSYSTÈME CORRIGÉ POUR 5 STRUCTURES */
.ecosystem{padding:140px 0;background:linear-gradient(180deg,#030305,#08080b 45%,#030305)}.ecosystem-head{margin-bottom:70px}.ecosystem-stage{width:min(1380px,94vw);margin:auto;min-height:680px;display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto 1fr;gap:20px;position:relative}.ecosystem-visual{grid-row:1/3;position:relative;min-height:680px;border:1px solid rgba(255,255,255,.09);overflow:hidden;background:radial-gradient(circle at center,rgba(239,11,36,.16),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.025),transparent)}.ecosystem-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle,#000,transparent 72%)}#ecosystemCanvas{position:absolute;inset:0;width:100%;height:100%}.core-ring{position:absolute;inset:50% auto auto 50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(239,11,36,.35);border-radius:50%;animation:orbitSpin 28s linear infinite}.core-ring span{position:absolute;inset:10%;border:1px dashed rgba(255,255,255,.12);border-radius:50%}.core-ring span:nth-child(2){inset:23%;animation:orbitSpin 18s linear infinite reverse}.core-ring span:nth-child(3){inset:-18%;border-style:solid;opacity:.25}.core-logo{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font:800 clamp(100px,16vw,220px)/1 var(--f-display);color:#fff;text-shadow:0 0 90px rgba(239,11,36,.55)}

/* Navigation des onglets corrigée */
.ecosystem-nav{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}.ecosystem-tab{text-align:left;min-height:118px;padding:20px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);color:#8b8b94;transition:.45s var(--ease);display:grid;grid-template-columns:auto 1fr;column-gap:15px}.ecosystem-tab span{grid-row:1/3;font:500 10px/1 var(--f-mono);color:var(--red)}.ecosystem-tab strong{font:600 clamp(13px,1.1vw,18px)/1.15 var(--f-display);word-break:break-word}.ecosystem-tab small{font-size:11px;margin-top:8px}.ecosystem-tab.active,.ecosystem-tab:hover{background:rgba(239,11,36,.10);border-color:rgba(239,11,36,.45);color:#fff;transform:translateY(-3px)}

/* Ajustement pour que le 5ème onglet ne soit pas déformé s'il est seul sur la dernière ligne */
.ecosystem-tab:nth-child(5):last-child {
  grid-column: 1 / -1;
  max-width: 50%;
}

/* Encadré de description et Titre (Suppression du white-space:nowrap qui coupait le texte) */
.ecosystem-copy{position:relative;min-height:330px;border:1px solid rgba(255,255,255,.09);background:rgba(7,7,10,.75);backdrop-filter:blur(20px);overflow:hidden}.ecosystem-panel{position:absolute;inset:0;padding:clamp(28px,4vw,58px);opacity:0;transform:translateY(30px);pointer-events:none;transition:.6s var(--ease)}.ecosystem-panel.active{opacity:1;transform:none;pointer-events:auto}.ecosystem-panel>span{font:600 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--red)}.ecosystem-panel h3{margin:18px 0;font:700 clamp(24px,3vw,48px)/1.1 var(--f-display);white-space:normal;word-break:break-word;overflow-wrap:break-word}.ecosystem-panel p{max-width:600px;color:#9c9ca5;line-height:1.75}.ecosystem-panel a{display:inline-block;margin-top:25px;color:#fff;border-bottom:1px solid var(--red);padding-bottom:5px}

.portal-band{overflow:hidden;border-block:1px solid rgba(255,255,255,.08);padding:28px 0;background:#070709}.portal-copy{display:flex;width:max-content;gap:65px;animation:tickerScroll 26s linear infinite}.portal-copy span{font:700 clamp(24px,3vw,48px)/1 var(--f-display);white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25)}
.news-card,.artist-card,.made-card,.release-card{transform:translateZ(0);transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease)}.news-card:hover,.artist-card:hover,.made-card:hover{transform:translateY(-8px);border-color:rgba(239,11,36,.4);box-shadow:0 30px 70px rgba(0,0,0,.42)}
@media(max-width:900px){.hero-video{opacity:.24}.hero-interface{display:none}.hero-title{font-size:clamp(56px,18vw,105px);line-height:.78}.hero-title-accent{margin-left:0}.hero-signals{gap:18px;width:100%;justify-content:space-between}.hero-signals span{font-size:8px}.manifesto{min-height:90vh;padding:14vh 6vw}.manifesto-sticky{top:20vh}.ecosystem{padding:90px 0}.ecosystem-stage{display:flex;flex-direction:column;min-height:0}.ecosystem-visual{min-height:430px;order:1}.ecosystem-nav{order:2;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.ecosystem-tab{min-width:78vw;scroll-snap-align:center}.ecosystem-tab:nth-child(5):last-child{max-width:none}.ecosystem-copy{order:3;min-height:390px}.ecosystem-panel h3{white-space:normal}.core-logo{font-size:150px}}
@media(max-width:600px){.cinematic-hero{min-height:930px}.hero-content{padding-top:12vh}.hero-title{font-size:17.5vw}.hero-sub{margin-top:30px;line-height:1.65}.hero-actions{width:100%}.hero-actions .btn{width:100%;justify-content:center}.hero-link{margin:10px auto 0}.hero-signals{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-signals div{text-align:center}.hero-bottomline{display:none}.manifesto h2{font-size:12vw}.manifesto-stream span{font-size:18vw}.ecosystem-visual{min-height:360px}.ecosystem-tab{min-width:86vw}.ecosystem-copy{min-height:430px}.ecosystem-panel{padding:30px 24px}.ecosystem-panel h3{font-size:34px}.sound-orb{bottom:82px;right:14px}.ar-dock{bottom:10px}.ar-dock-inner{max-width:94vw;overflow-x:auto}.section{padding:82px 0}.grid-4,.grid-2{grid-template-columns:1fr}.hscroll-mobile{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.hscroll-mobile>*{min-width:82vw;scroll-snap-align:center}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-orbit,.hero-shards i,.portal-copy,.manifesto-stream{animation:none!important}}

/* =========================================================================
   V4.1 — CORRECTIONS DE POSITIONNEMENT, AUDIO ET OPTIMISATION MOBILE
   ========================================================================= */

/* Le bloc d'ouverture respire davantage sur les grands écrans. */
@media (min-width: 1101px){
  .cinematic-hero .hero-content{
    width:min(1180px, calc(100vw - clamp(180px, 24vw, 840px)));
    margin-left:clamp(110px, 12vw, 420px);
    margin-right:auto;
  }
}

/* État réellement perceptible du bouton d'ambiance. */
.sound-orb{
  min-width:124px;
  justify-content:flex-start;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sound-orb:hover{ transform:translateY(-2px); border-color:rgba(227,6,19,.65); }
.sound-orb.active,
.sound-orb[aria-pressed="true"]{
  background:rgba(82,4,10,.82);
  border-color:rgba(227,6,19,.78);
  box-shadow:0 18px 55px rgba(0,0,0,.45), 0 0 30px rgba(227,6,19,.22);
}
.sound-orb.active .sound-orb-label,
.sound-orb[aria-pressed="true"] .sound-orb-label{ color:#fff; }

/* Le navigateur peut ignorer les blocs hors écran au lieu de tout peindre en permanence. */
@supports (content-visibility:auto){
  .manifesto,
  .player-section,
  .ecosystem,
  .portal-band,
  main > .section,
  .footer{
    content-visibility:auto;
    contain-intrinsic-size:900px;
  }
}

@media (max-width: 900px){
  /* Sur mobile, on garde l'identité visuelle mais on retire les couches les plus coûteuses. */
  #heroCanvas,
  #ecosystemCanvas,
  .aurora-overlay,
  .depth-grid,
  .scanline-overlay,
  .hero-shards,
  .hero-orbit-b{
    display:none !important;
  }
  .grain-overlay{ opacity:.025; }
  .vignette-overlay{ background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.4) 100%); }
  .hero-video{ opacity:.22; filter:saturate(.85) contrast(1.05); }
  .hero-beams{ animation-duration:28s; opacity:.5; }
  .hero-orbit-a{ animation:none; opacity:.45; }
  .portal-copy{ animation-duration:42s; }
  .news-card:hover,.artist-card:hover,.made-card:hover{ transform:none; box-shadow:none; }
  .ar-header.is-scrolled{ backdrop-filter:blur(8px); }
  .ecosystem-copy{ backdrop-filter:none; }
}

@media (max-width: 720px){
  /* Bloc d'ouverture correctement centré et contenu dans l'écran mobile. */
  .cinematic-hero .hero-content{
    width:calc(100% - 36px);
    margin-inline:auto;
    padding-top:clamp(92px, 13vh, 130px);
  }

  /* Dock mobile pleine largeur, plus haut et plus lisible. */
  .ar-dock{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    transform:none;
  }
  .ar-dock.is-hidden{
    transform:translateY(140%);
  }
  .ar-dock-inner{
    width:100%;
    max-width:none;
    min-height:72px;
    padding:8px 7px;
    overflow:visible;
    justify-content:space-between;
    gap:2px;
    border-radius:24px;
  }
  .ar-dock-item{
    flex:1 1 0;
    min-width:0;
    min-height:54px;
    padding:7px 3px;
    justify-content:center;
    border-radius:17px;
  }
  .ar-dock-icon{ width:24px; height:24px; }
  .ar-dock-label{ display:none; }

  .sound-orb{
    right:12px;
    bottom:92px;
    min-width:46px;
    width:46px;
    height:46px;
    padding:9px;
    justify-content:center;
  }
  .sound-orb-label{ display:none; }
}

@media (max-width: 420px){
  .ar-dock{ left:5px; right:5px; bottom:5px; }
  .ar-dock-inner{ min-height:68px; padding-inline:4px; }
  .ar-dock-item{ min-height:50px; padding-inline:2px; }
  .ar-dock-icon{ width:22px; height:22px; }
  .sound-orb{ bottom:84px; }
}


/* =========================================================================
   V4.2 — MOBILE FIABLE, FOOTER CONTACT ET ALLÈGEMENT GLOBAL
   ========================================================================= */

/* Le bouton d'ambiance générative est volontairement retiré : le lecteur audio
   principal reste l'unique commande sonore, claire et compréhensible. */
.sound-orb{ display:none !important; }

.footer{
  padding:92px 0 150px;
  text-align:left;
  background:
    radial-gradient(circle at 50% 0%, rgba(239,11,36,.11), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 28%),
    #050507;
}
.footer-inner{ position:relative; z-index:2; }
.footer-brand-zone{
  display:flex; align-items:center; justify-content:center; gap:18px;
  text-align:left; margin-bottom:34px;
}
.footer-brand-zone .footer-logo{ width:54px; margin:0; }
.footer-brand{ margin:0; font-size:clamp(25px,3vw,38px); letter-spacing:-.035em; }
.footer-text{ margin:6px 0 0; }
.footer-contact-actions{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  width:min(980px,100%); margin:0 auto 30px;
}
.footer-action{
  min-height:96px; padding:18px 20px; border:1px solid rgba(255,255,255,.11);
  border-radius:22px; display:flex; align-items:center; gap:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 22px 55px rgba(0,0,0,.22); overflow:hidden; position:relative;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.footer-action::after{
  content:""; position:absolute; inset:auto -30% -70% 30%; height:130%;
  background:radial-gradient(circle,rgba(239,11,36,.2),transparent 68%); pointer-events:none;
}
.footer-action:hover{ transform:translateY(-4px); border-color:rgba(239,11,36,.55); background:rgba(239,11,36,.075); }
.footer-action-icon{
  width:48px; height:48px; flex:none; border-radius:15px; display:grid; place-items:center;
  color:#fff; font-size:20px; background:rgba(239,11,36,.12); border:1px solid rgba(239,11,36,.32);
  box-shadow:inset 0 0 20px rgba(239,11,36,.08),0 0 28px rgba(239,11,36,.12);
}
.footer-action span:last-child{ display:flex; flex-direction:column; min-width:0; }
.footer-action small{ color:var(--muted); font:500 10px/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }
.footer-action strong{ margin-top:7px; color:var(--ivory); font-size:15px; line-height:1.25; }
.footer-action-review{ border-color:rgba(255,255,255,.18); }
.footer-links{ margin-top:22px; }
.footer-signature{ margin:24px 0 0; text-align:center; color:rgba(255,255,255,.3); font:500 10px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; }

@media (max-width:900px){
  /* Évite les hauteurs de document estimées par le navigateur et les contenus
     révélés trop tard sur Safari/Chrome mobile. */
  .manifesto,.player-section,.ecosystem,.portal-band,main > .section,.footer{
    content-visibility:visible !important;
    contain-intrinsic-size:auto !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
    visibility:visible !important;
  }
  .hero-media{ transform:none !important; }
  .manifesto-stream{ transform:none !important; }
  .manifesto h2{ opacity:1 !important; }
  .footer{ padding:72px 0 118px; }
  .footer-contact-actions{ grid-template-columns:1fr; max-width:560px; }
  .footer-action{ min-height:82px; }
}

@media (max-width:600px){
  html,body{ overscroll-behavior-y:none; }
  body{ padding-bottom:env(safe-area-inset-bottom); }
  .cinematic-hero{ min-height:max(100svh,780px); }
  .cinematic-hero .hero-content{ padding-bottom:104px; }
  .section{ padding:68px 0; }
  .manifesto{ min-height:76vh; padding-top:90px; padding-bottom:90px; }
  .manifesto-sticky{ position:relative; top:auto; }
  .ecosystem{ padding-top:72px; padding-bottom:72px; }
  .ecosystem-copy{ min-height:0; }
  .ecosystem-panel{ position:relative; inset:auto; opacity:1; transform:none; display:none; }
  .ecosystem-panel.active{ display:block; }
  .atlas-map{ height:340px; }
  .map-below{ padding:18px; }
  .map-actions{ width:100%; }
  .map-actions .btn{ width:100%; justify-content:center; }
  .footer-brand-zone{ justify-content:flex-start; align-items:center; margin-bottom:26px; }
  .footer-brand-zone .footer-logo{ width:46px; }
  .footer-contact-actions{ gap:10px; }
  .footer-action{ border-radius:18px; padding:15px; }
  .footer-action-icon{ width:44px; height:44px; border-radius:13px; }
  .footer-links{ gap:16px; }
  .footer-links a{ font-size:11px; }
  .footer-signature{ padding-inline:20px; }
  /* Le dock ne disparaît plus pendant le défilement mobile : navigation stable. */
  .ar-dock.is-hidden{ transform:none !important; opacity:1 !important; }
}

/* =========================================================================
   V4.3 — HEADER MOBILE IMMERSIF ET RÉVÉLATION ANTICIPÉE
   ========================================================================= */
@media (max-width:980px){
  .ar-header{ z-index:500; }
  .ar-header.menu-active{
    transform:none !important;
    background:transparent;
    border-bottom-color:transparent;
    backdrop-filter:none;
  }
  .ar-header.menu-active .ar-header-inner{
    pointer-events:none;
  }
  .ar-header.menu-active .ar-brand{
    opacity:0;
    transform:translateY(-10px);
  }
  .ar-header.menu-active .ar-burger{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .ar-brand{ transition:opacity .3s var(--ease),transform .3s var(--ease); }

  .ar-mobile-panel{
    z-index:510;
    inset:0;
    display:block;
    overflow:hidden auto;
    overscroll-behavior:contain;
    background:
      radial-gradient(circle at 82% 16%,rgba(227,6,19,.2),transparent 34%),
      radial-gradient(circle at 12% 86%,rgba(93,38,180,.13),transparent 38%),
      linear-gradient(145deg,#050506 0%,#09090c 52%,#050506 100%);
    opacity:0;
    visibility:hidden;
    transform:translateY(-18px) scale(1.015);
    transform-origin:top center;
    transition:opacity .42s var(--ease),transform .55s var(--ease),visibility .55s;
  }
  .ar-mobile-panel::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 38%,#000,transparent 76%);
  }
  .ar-mobile-panel::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(227,6,19,.055) 49%,transparent 68%);
    transform:translateX(-100%);
  }
  .ar-mobile-panel.open{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .ar-mobile-panel.open::after{ animation:mobileMenuSweep 1.1s .18s var(--ease) both; }
  @keyframes mobileMenuSweep{ to{ transform:translateX(100%); } }

  .ar-mobile-atmosphere{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
  .ar-mobile-atmosphere span{
    position:absolute;
    border:1px solid rgba(227,6,19,.13);
    border-radius:50%;
    box-shadow:inset 0 0 60px rgba(227,6,19,.025);
  }
  .ar-mobile-atmosphere span:nth-child(1){ width:70vw;height:70vw;right:-34vw;top:11vh;animation:mobileOrbit 18s linear infinite; }
  .ar-mobile-atmosphere span:nth-child(2){ width:42vw;height:42vw;left:-22vw;bottom:12vh;animation:mobileOrbit 13s linear infinite reverse; }
  .ar-mobile-atmosphere span:nth-child(3){ width:8px;height:8px;right:18vw;top:32vh;background:var(--red);border:0;box-shadow:0 0 24px var(--red-glow);animation:mobilePulse 2.4s ease-in-out infinite; }
  @keyframes mobileOrbit{ to{ transform:rotate(360deg); } }
  @keyframes mobilePulse{ 50%{ opacity:.22;transform:scale(.65); } }

  .ar-mobile-shell{
    position:relative;
    z-index:2;
    width:min(100%,720px);
    min-height:100svh;
    margin-inline:auto;
    padding:18px clamp(18px,5vw,34px) calc(28px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
  }
  .ar-mobile-topbar{
    position:sticky;
    top:0;
    z-index:4;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:8px 0 14px;
    background:linear-gradient(to bottom,rgba(5,5,6,.98) 55%,transparent);
  }
  .ar-mobile-brand{ display:flex;align-items:center;gap:12px;min-width:0; }
  .ar-mobile-brand img{ width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(227,6,19,.4)); }
  .ar-mobile-brand span{ display:flex;flex-direction:column;min-width:0; }
  .ar-mobile-brand strong{ font:700 15px/1.15 var(--f-display);white-space:nowrap; }
  .ar-mobile-brand small{ margin-top:4px;color:var(--muted);font:500 8px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; }

  .ar-mobile-close{
    position:relative;
    z-index:20;
    width:52px;
    height:52px;
    flex:none;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 0 22px rgba(255,255,255,.025),0 12px 32px rgba(0,0,0,.28);
    display:grid;
    place-items:center;
    transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  }
  .ar-mobile-close:active{ transform:scale(.92) rotate(4deg);background:rgba(227,6,19,.12);border-color:rgba(227,6,19,.55); }
  .ar-mobile-close span{ position:absolute;width:20px;height:1.5px;background:#fff;border-radius:2px; }
  .ar-mobile-close span:first-child{ transform:rotate(45deg); }
  .ar-mobile-close span:last-child{ transform:rotate(-45deg); }

  .ar-mobile-heading{ padding:clamp(26px,6vh,62px) 0 22px; }
  .ar-mobile-heading>span{ color:var(--red);font:600 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase; }
  .ar-mobile-heading p{ margin:12px 0 0;font:600 clamp(27px,7.5vw,46px)/1.02 var(--f-display);letter-spacing:-.045em; }

  .ar-mobile-nav{ width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.1); }
  .ar-mobile-link{
    --delay:calc(var(--menu-index) * 45ms);
    position:relative;
    width:100%;
    min-height:78px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 34px;
    align-items:center;
    gap:12px;
    padding:13px 4px;
    color:var(--ivory);
    border-bottom:1px solid rgba(255,255,255,.085);
    opacity:0;
    transform:translateY(16px);
    transition:background .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease);
  }
  .ar-mobile-panel.open .ar-mobile-link{ animation:mobileLinkIn .58s calc(.17s + var(--delay)) var(--ease) forwards; }
  @keyframes mobileLinkIn{ to{ opacity:1;transform:none; } }
  .ar-mobile-link::before{
    content:"";
    position:absolute;
    inset:6px 0;
    z-index:-1;
    border-radius:16px;
    background:linear-gradient(90deg,rgba(227,6,19,.14),rgba(227,6,19,.025));
    opacity:0;
    transform:scaleX(.94);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
  .ar-mobile-link.active::before,.ar-mobile-link:active::before{ opacity:1;transform:scaleX(1); }
  .ar-mobile-link.active{ padding-inline:12px;border-color:rgba(227,6,19,.22); }
  .ar-mobile-index{ color:rgba(255,255,255,.3);font:500 10px/1 var(--f-mono);letter-spacing:.08em; }
  .ar-mobile-link.active .ar-mobile-index{ color:var(--red); }
  .ar-mobile-link-copy{ min-width:0;display:flex;flex-direction:column; }
  .ar-mobile-link-copy strong{ font:600 clamp(18px,5vw,25px)/1.12 var(--f-display);letter-spacing:-.025em;overflow-wrap:anywhere; }
  .ar-mobile-link-copy small{ margin-top:6px;color:var(--muted);font:500 9px/1.25 var(--f-mono);letter-spacing:.045em; }
  .ar-mobile-arrow{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px solid rgba(255,255,255,.1);transition:transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); }
  .ar-mobile-link:active .ar-mobile-arrow,.ar-mobile-link.active .ar-mobile-arrow{ transform:rotate(45deg);color:#fff;border-color:rgba(227,6,19,.48); }
  .ar-mobile-meta{ margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.32);font:500 8px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase; }

  body.menu-open{ overflow:hidden;touch-action:none; }
}

@media (max-width:900px){
  /* Animation mobile légère, déclenchée avant l’arrivée réelle dans l’écran. */
  .reveal{
    opacity:0 !important;
    transform:translate3d(0,18px,0) !important;
    visibility:visible !important;
    transition:opacity .55s var(--ease),transform .65s var(--ease) !important;
    will-change:opacity,transform;
  }
  .reveal.is-revealed{
    opacity:1 !important;
    transform:none !important;
    will-change:auto;
  }
}

@media (max-width:420px){
  .ar-mobile-shell{ padding-inline:14px; }
  .ar-mobile-brand small{ max-width:190px;overflow:hidden;text-overflow:ellipsis; }
  .ar-mobile-link{ min-height:74px;grid-template-columns:30px minmax(0,1fr) 30px;gap:9px; }
  .ar-mobile-link-copy strong{ font-size:clamp(17px,5vw,21px); }
}


/* =========================================================================
   V4.6 — ACTUALITÉS MOBILES, HEADER MOBILE ET RETOUR EN HAUT
   ========================================================================= */

/* =========================================================================
   BOUTON RETOUR EN HAUT (REPOSITIONNÉ ET PRIORITAIRE)
   ========================================================================= */

.atlas-back-top {
  position: fixed !important;
  right: 22px !important;
  /* Hauteur dynamique calculée + marge de 30px pour dépasser le menu/bandeaux */
  bottom: calc(var(--ar-menu-safe-space, 100px) + 30px) !important;
  z-index: 2147483647 !important; /* Priorité maximale absolue sur tout le site */
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(24, 24, 28, .96), rgba(8, 8, 10, .92));
  color: var(--ivory);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition: bottom .25s ease, opacity .35s var(--ease), visibility .35s, transform .45s var(--ease), border-color .3s, box-shadow .3s;
}

.atlas-back-top::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1px solid rgba(227, 6, 19, .25);
  pointer-events: none;
}

.atlas-back-top:hover {
  border-color: rgba(227, 6, 19, .75);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .6), 0 0 30px rgba(227, 6, 19, .25);
}

.atlas-back-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.atlas-back-top-icon {
  position: relative;
  width: 18px;
  height: 12px;
}

.atlas-back-top-icon i {
  position: absolute;
  top: 4px;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(227, 6, 19, .8);
}

.atlas-back-top-icon i:first-child { left: 0; transform: rotate(-38deg); }
.atlas-back-top-icon i:last-child { right: 0; transform: rotate(38deg); }

.atlas-back-top-label {
  font-family: var(--f-mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Ajustements Mobiles (< 720px) --- */
@media (max-width: 720px) {
  body > .atlas-back-top,
  .atlas-back-top {
    right: 14px !important;
    /* On ajoute +60px au lieu de +40px pour passer LARGEMENT au-dessus des bandeaux */
    bottom: calc(var(--ar-menu-safe-space, 180px) + 60px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  .atlas-back-top-label {
    display: none !important;
  }
}

.ar-mobile-indicator{
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  transition: border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.ar-mobile-indicator i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transition: background .35s,transform .35s,box-shadow .35s;
}
.ar-mobile-link:hover .ar-mobile-indicator,
.ar-mobile-link.active .ar-mobile-indicator{
  border-color: rgba(227,6,19,.45);
  background: rgba(227,6,19,.08);
  transform: translateX(2px);
}
.ar-mobile-link:hover .ar-mobile-indicator i,
.ar-mobile-link.active .ar-mobile-indicator i{
  background: var(--red);
  box-shadow: 0 0 8px rgba(227,6,19,.65);
}
.ar-mobile-link:hover .ar-mobile-indicator i:nth-child(2),
.ar-mobile-link.active .ar-mobile-indicator i:nth-child(2){
  transform: scale(1.55);
}

@media(max-width:980px){
  .ar-mobile-panel{
    background:
      radial-gradient(circle at 85% 10%,rgba(227,6,19,.18),transparent 31%),
      radial-gradient(circle at 0 88%,rgba(100,28,200,.10),transparent 38%),
      rgba(5,5,6,.985);
  }
  .ar-mobile-shell{
    width: min(100% - 22px,760px);
    min-height: calc(100svh - 22px);
    margin: 11px auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    background: linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    box-shadow: 0 26px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
    overflow: hidden;
  }
  .ar-mobile-topbar{
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 17px 18px;
    background: rgba(8,8,10,.82);
    backdrop-filter: blur(22px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .ar-mobile-heading{padding:24px 22px 12px}
  .ar-mobile-nav{
    padding: 8px 14px 24px;
    gap: 8px;
  }
  .ar-mobile-link{
    min-height: 74px;
    padding: 12px 13px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: rgba(255,255,255,.018);
  }
  .ar-mobile-link:hover,
  .ar-mobile-link.active{
    border-color: rgba(227,6,19,.25);
    background: linear-gradient(100deg,rgba(227,6,19,.10),rgba(255,255,255,.025));
  }
  .ar-mobile-link-copy strong{font-size:clamp(15px,4.2vw,19px)}
  .ar-mobile-link-copy small{font-size:10px;margin-top:4px}
  .ar-mobile-index{
    width: 30px;
    color: rgba(255,255,255,.32);
    font-size: 9px;
  }
  .ar-mobile-link.active .ar-mobile-index{color:var(--red)}
  .ar-mobile-meta{
    margin: 0 14px 14px;
    padding: 14px 9px 4px;
  }
}

.news-swipe-hint{display:none}

@media(max-width:720px){
  .news-mobile-carousel{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc((100vw - 92vw) / -2);
    padding: 4px 4vw 18px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .news-mobile-carousel::-webkit-scrollbar{display:none}
  .news-mobile-carousel .news-card,
  .news-mobile-carousel .news-card.large{
    flex: 0 0 min(84vw,350px);
    width: min(84vw,350px);
    min-height: 390px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 22px;
  }
  .news-mobile-carousel .news-card .card-content{padding:22px}
  .news-mobile-carousel .news-card h3{
    font-size: clamp(20px,6vw,27px);
    line-height: 1.08;
  }
  .news-mobile-carousel .popup-overlay{position:fixed}
  .news-swipe-hint{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: var(--muted);
  }
  .news-swipe-hint span{
    position: relative;
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
  }
  .news-swipe-hint span::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--red);
    animation: newsSwipe 1.8s var(--ease) infinite;
  }
  .news-swipe-hint small{
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  @keyframes newsSwipe{
    0%{transform:translateX(-120%)}
    65%,100%{transform:translateX(230%)}
  }

}

@media(max-width:380px){
  .ar-mobile-shell{width:calc(100% - 12px);margin:6px auto;min-height:calc(100svh - 12px)}
  .ar-mobile-link{min-height:68px;padding:10px}
  .ar-mobile-nav{padding-inline:9px}
}