/* ──────────────────────────────────────────────────────────────────────────
   RSQN — VIP · style.css
   Tokens (palette cyan RSQN), resets, @keyframes, et coquilles de layout
   (mobile = colonne téléphone ; desktop = 2 colonnes). Le détail pixel est
   porté par les styles inline dans index.html.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #070b11;
  --panel: rgba(255, 255, 255, 0.05);
  --panel2: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.09);
  --text: #e6f1f6;
  --dim: rgba(230, 241, 246, 0.55);
  --dim2: rgba(230, 241, 246, 0.36);
  --field: rgba(255, 255, 255, 0.04);
  --field-border: rgba(255, 255, 255, 0.12);
  --violet: oklch(0.82 0.14 200); /* primaire cyan RSQN */
  --blue: oklch(0.72 0.15 240);
  --star: #ffc24b;
  --cta: linear-gradient(135deg, oklch(0.78 0.16 200), oklch(0.62 0.17 248));
  --cta-shadow: 0 12px 36px oklch(0.6 0.16 218 / 0.5);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; touch-action: pan-x pan-y; }
body { background: #000; font-family: Manrope, sans-serif; color: var(--text); }
button { font-family: inherit; cursor: pointer; }
img, video { display: block; }

/* La scène sombre derrière le contenu. */
.stage {
  width: 100%;
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% 0%, #0a1620, #03060a);
  display: flex; justify-content: center; align-items: flex-start;
}

/* ── Mobile : colonne « téléphone » ──────────────────────────────────────────── */
.frame {
  position: relative;
  width: 100%; max-width: 480px;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}
.frame .scroll { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)); } /* réserve > barre CTA fixe (sinon le footer passe dessous) */

/* Rangées horizontales (stories, cartes) avec snap. */
.hrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; }
.hrow > * { scroll-snap-align: start; }
.hrow::-webkit-scrollbar, .scroll::-webkit-scrollbar { display: none; }
.hrow, .scroll { scrollbar-width: none; }

/* Marquee avis. */
.mtrack { display: flex; gap: 12px; width: max-content; will-change: transform; }

/* Barre CTA fixée en bas, centrée sur la largeur du cadre. */
.sticky-cta {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 480px; z-index: 30;
  padding: 14px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, var(--bg) 72%, transparent);
}

/* ── Desktop : 2 colonnes ────────────────────────────────────────────────────── */
.dwrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 28px 64px; }
.layout { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
/* min-width:0 → empêche le blowout : la colonne 1fr peut rétrécir au lieu de s'étirer à la largeur du contenu (marquee/grilles) */
.layout > * { min-width: 0; }
.side { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* 3 colonnes + align-items:start → cartes raisonnables qui respectent leur aspect-ratio (pas d'étirement) */
.grid-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1120px) {
  .layout { grid-template-columns: 320px 1fr; }
}

/* ── Bascule mobile / desktop par largeur ───────────────────────────────────── */
@media (max-width: 979px) { .only-desktop { display: none !important; } }
@media (min-width: 980px) { .only-mobile { display: none !important; } .stage { align-items: flex-start; } }

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes fill { from { width: 0 } to { width: 100% } }
@keyframes vIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetUp { from { transform: translateX(-50%) translateY(100%) } to { transform: translateX(-50%) translateY(0) } }
@keyframes mLeft { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes mRight { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes promoShine { 0% { transform: translateX(-160%) } 55% { transform: translateX(420%) } 100% { transform: translateX(420%) } }
@keyframes tring {
  0%   { box-shadow: 0 0 0 0 oklch(0.74 0.14 205 / .5) }
  100% { box-shadow: 0 0 0 7px oklch(0.74 0.14 205 / 0) }
}
@keyframes tblink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .25 } }
@keyframes cdpulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@media (prefers-reduced-motion: reduce) {
  .mtrack, [style*="promoShine"], [style*="cdpulse"] { animation: none !important; }
}

/* Transition douce du surlignage des onglets photos/vidéos. */
[data-tab] { transition: background .2s ease, color .2s ease; }

/* Aperçus floutés sous les bulles de stories (teaser). */
[data-action="open-story"] [data-slot^="stories."] { filter: blur(4px); transform: scale(1.3); }

/* Desktop : la feuille d'inscription devient une modale centrée (au lieu d'un bottom-sheet pleine largeur). */
@media (min-width: 980px) {
  .signup-panel {
    top: 50% !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 24px !important;
    max-width: 440px; max-height: 90vh;
    animation: vIn .25s ease !important;
  }
}