/* ============================================================
   SUPRADRAMA — GLOBAL.CSS (v2 — corrigé)
   Fix: body::after sorti de :root (imbrication invalide)
   ============================================================ */

/* -------------------------------
   RESET & TYPO
--------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--header-h);
  background:
    radial-gradient(1200px 800px at 20% 15%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, color-mix(in srgb, var(--g2) 26%, transparent), transparent 65%),
    radial-gradient(700px 600px at 50% 80%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(160deg, var(--g3) 10%, color-mix(in srgb, var(--g2) 22%, black) 40%, #0b0b10 100%);
  background-attachment: fixed;
}

/* -------------------------------
   THEME TOKENS — Crimson Rose (défaut)
--------------------------------- */
:root {
  --header-h: calc(72px + env(safe-area-inset-top));

  /* Couleurs */
  --g1: #ff7a9e;
  --g2: #ff4d6d;
  --g3: #1a0b0f;
  --text: #fff6f8;

  /* UI */
  --accent-color: #ff4d6d;
  --accent-hover: #ff7a9e;
  --menu-bg-color: rgba(15, 10, 15, 0.95);
  --menu-text-color: #fff6f8;
  --burger-color: #fff;

  /* Layout tokens partagés (premium) */
  --container: min(1120px, 92vw);
  --pad: clamp(14px, 2.4vw, 24px);

  --glass: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.14);
  --border-2: rgba(255, 255, 255, 0.22);
  --blur: 12px;

  --shadow-1: 0 14px 40px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 30px 110px rgba(0, 0, 0, 0.55);

  --radius-xl: 34px;
  --radius-md: 22px;
  --radius-sm: 16px;

  --focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 5px color-mix(in srgb, var(--g2) 35%, transparent);
}

/* ── FIXED: body::after était dans :root (invalide) ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(900px 560px at 55% 45%, color-mix(in srgb, var(--g1) 22%, transparent), transparent 78%),
    radial-gradient(700px 480px at 20% 70%, color-mix(in srgb, var(--g2) 16%, transparent), transparent 80%);
}

/* ── Pages avec sections-container plein écran (fiction) ──
   sections-container gère son propre scroll/safe-top,
   le padding-top global créerait un double décalage.          */
body:has(.sections-container) {
  padding-top: 0;
}

/* ────────────────────────────────────────────────────────── */
.theme--midnight {
  --g1: #4ef2ff;
  --g2: #7a7aff;
  --g3: #0b1426;
  --text: #e7faff;
  --accent-color: #4ef2ff;
  --accent-hover: #a9b6ff;
}
.theme--amber {
  --g1: #ffcf91;
  --g2: #ff9d57;
  --g3: #2a1510;
  --text: #fff9f0;
  --accent-color: #ff9d57;
  --accent-hover: #ffd0a4;
}

/* -------------------------------
   CONTAINER
--------------------------------- */
.container {
  width: min(92%, 1200px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.container--narrow { width: min(92%, 900px); }

/* -------------------------------
   LIENS & BOUTONS
--------------------------------- */
a { color: var(--accent-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover); }

.btn, .cta, .cta-ghost {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn:hover, .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 77, 109, 0.45);
  filter: brightness(1.04);
}
.cta-ghost:hover {
  transform: translateY(-2px);
}

.btn--ghost, .cta--ghost, .cta-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: none;
}
.btn--ghost:hover, .cta--ghost:hover, .cta-ghost:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* -------------------------------
   FOOTER
--------------------------------- */
footer {
  width: 100%;
  background: #000;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  font-size: 0.75rem;
  padding: 20px;
  position: relative;
  z-index: 1;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
}
footer .follow-us { margin-top: 10px; }
footer .follow-us a { color: #fff; font-weight: 700; margin-left: 10px; }
footer .follow-us a:hover { color: var(--accent-hover); }

/* -------------------------------
   UTILITAIRES
--------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.p-1 { padding: 1rem; } .p-2 { padding: 2rem; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------
   FOCUS & INTERACTIONS
--------------------------------- */
:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.6); outline-offset: 3px; }

:where(a, button, [role="button"], input, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  :where(a, button, .cta, .btn) {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  }
}

/* -------------------------------
   RESPONSIVE
--------------------------------- */
@media (max-width: 768px) {
  .btn, .cta { font-size: 0.9rem; padding: 0.7rem 1.3rem; }
  body { background-attachment: scroll; }
}

/* -------------------------------
   MOTION
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* PHASE3_TRANSITIONS */

/* ============================================================
   PAGE TRANSITIONS — Phase 3
   Injecté par deploy_phase3_page_transitions.py
   ============================================================ */

/* ── Fade-in au chargement ───────────────────────────────── */
/* body part invisible, la classe .page-ready le révèle.
   nav.js ajoute .page-ready au DOMContentLoaded.           */
body {
  opacity: 0;
  transition: opacity 0.32s ease;
}
body.page-ready {
  opacity: 1;
}

/* ── Respect prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body,
  body.page-ready {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* PHASE6_CURSOR */

/* ============================================================
   CUSTOM CURSOR — Phase 6
   Injecté par deploy_phase6_cursor.py
   ============================================================ */

/* Masquer le curseur natif sur desktop (appliqué par JS) */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}

/* ── Le curseur custom ───────────────────────────────────── */
#sd-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    width    0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    height   0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity  0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
  will-change: transform;

  /* Caché par défaut, affiché par JS si mouse device */
  opacity: 0;
}

/* État hover sur lien/bouton : s'agrandit + teinte accent */
#sd-cursor.is-hovering {
  width: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--accent-color, #ff4d6d) 22%, rgba(255,255,255,0.08));
  border-color: color-mix(in srgb, var(--accent-color, #ff4d6d) 55%, rgba(255,255,255,0.35));
}

/* État clic : compression rapide */
#sd-cursor.is-clicking {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.32);
  transition:
    width    0.08s ease,
    height   0.08s ease,
    background 0.08s ease;
}

/* Masqué quand la souris quitte la fenêtre */
#sd-cursor.is-hidden {
  opacity: 0 !important;
}

/* ── Ne jamais afficher sur tactile ─────────────────────── */
@media (hover: none), (pointer: coarse) {
  #sd-cursor { display: none !important; }
}