/**
 * FILAIRPHONE · Index — overrides White Luxury
 * Rythme : IVOIRE → BLANC → NOIR (DROP) → NOIR (édition) → IVOIRE
 * Chargé en dernier sur index.html
 */

/* Gate legacy masqué — connexion déléguée à connexion.html */
#site-gate {
  display: none !important;
}

/* ── Base ── */
body {
  background: var(--color-background) !important;
  color: var(--color-text-primary) !important;
}

/* ── Navigation claire ── */
.nav {
  background: rgba(247, 246, 242, 0.92) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.nav .links a {
  color: var(--color-text-secondary) !important;
}

.nav .links a:hover,
.nav .links a.active {
  color: var(--color-accent) !important;
}

.nav .cta {
  background: var(--color-text-primary) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-text-primary) !important;
}

.nav .cta:hover,
.nav.scrolled .cta:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
}

.nav.scrolled {
  background: rgba(247, 246, 242, 0.96) !important;
  border-bottom-color: var(--color-border) !important;
}

.nav.scrolled .links a {
  color: var(--color-text-secondary) !important;
}

.nav.scrolled .logo img.w {
  opacity: 0 !important;
  position: absolute !important;
}

.nav.scrolled .logo img.b {
  display: block !important;
  opacity: 1 !important;
  position: static !important;
}

.nav .logo img.b {
  display: block;
}

.nav .logo img.w {
  display: none;
}

.founder-offers-nav {
  border-color: var(--color-accent-border) !important;
  background: var(--color-accent-soft) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}

.founder-offers-nav:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.founder-offers-nav .new-badge {
  background: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

/* ── Hero image sombre (Casablanca smart city) ── */
.hero {
  background: #09090a !important;
}

.hero img.bg {
  object-position: center 45% !important;
}

.hero .grad {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.18) 32%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.68) 100%
  ) !important;
}

.hero .htop .ed {
  color: rgba(255, 255, 255, 0.88) !important;
}

.hero .tag {
  color: #fff !important;
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.55) !important;
}

.hero .tag .dot {
  color: var(--color-accent) !important;
}

.hero .scroll {
  color: rgba(255, 255, 255, 0.72) !important;
}

.hero .scroll .ln {
  background: linear-gradient(rgba(255, 255, 255, 0.8), transparent) !important;
}

.hero .fp-founders-count-meta,
.hero .fp-founders-count-meta strong {
  color: rgba(255, 255, 255, 0.78) !important;
}

.hero .fp-founders-count-meta strong {
  color: #fff !important;
}

.btn.dark,
.btn.ghost,
.hero .acts .btn {
  background: #fff !important;
  color: #0b0b0c !important;
  border-color: #fff !important;
}

.btn.dark:hover,
.btn.ghost:hover,
.hero .acts .btn:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}

.support-project-btn {
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
}

.support-project-btn:hover {
  background: var(--color-text-primary) !important;
  border-color: var(--color-text-primary) !important;
  color: var(--color-text-inverse) !important;
}

/* ── Bande ticker — rouge motif (voir fp-red-pattern-banner.css) ── */

/* ── Sections claires ── */
.sec,
.sec.stone,
.vision-sec {
  background: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  padding-top: var(--section-padding-y) !important;
  padding-bottom: var(--section-padding-y) !important;
}

.sec.stone {
  background: var(--color-background-alt) !important;
}

.head .eyebrow,
.eyebrow {
  color: var(--color-accent) !important;
}

.head .lead,
.manifesto p,
.mode p,
.feature .ftxt p {
  color: var(--color-text-secondary) !important;
}

.manifesto h2,
.head h2,
.feature .ftxt h2,
.vision-sec .q {
  color: var(--color-text-primary) !important;
  font-weight: 300 !important;
}

.manifesto .sig {
  filter: brightness(0) !important;
}

.manifesto-video-frame {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

.mode,
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.mode::before,
.card::before {
  display: none !important;
}

.mode .ph,
.card .pt {
  background: var(--color-background-alt) !important;
  border: 1px solid var(--color-border) !important;
}

.mode .ph::after,
.card .pt::after {
  display: none !important;
}

.mode .ph .no,
.card .pt .tag {
  background: var(--color-accent-soft) !important;
  border: 1px solid var(--color-accent-border) !important;
  color: var(--color-accent) !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
}

.mode .mh,
.card .ct,
.mode .mh h3,
.card .ct h3 {
  color: var(--color-text-primary) !important;
}

.card .ct .sub {
  color: var(--color-text-secondary) !important;
}

.card .ct .go {
  color: var(--color-accent) !important;
}

.feature {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.feature .fimg {
  background: var(--color-background-alt) !important;
  border: 1px solid var(--color-border) !important;
}

.feature .fimg img {
  filter: none !important;
}

.specs {
  border-top-color: var(--color-border) !important;
}

.specs li {
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.specs li span:first-child {
  color: var(--color-text-muted) !important;
}

/* ── DROP 01 CASANEGRA — section sombre immersive ── */
#collection {
  background: var(--color-dark) !important;
  color: var(--color-text-inverse) !important;
}

#collection .head h2 {
  color: var(--color-text-inverse) !important;
}

#collection .head .lead {
  color: var(--muted-on-dark) !important;
}

#collection .eyebrow {
  color: var(--color-accent) !important;
}

#collection .card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28) !important;
}

#collection .card::before {
  display: block !important;
  background: radial-gradient(circle at 80% 0, rgba(168, 16, 36, 0.14), transparent 34%) !important;
}

#collection .card .pt {
  background: #111 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#collection .card .pt::after {
  display: block !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.28)) !important;
}

#collection .card .pt .tag {
  background: rgba(0, 0, 0, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-text-inverse) !important;
}

#collection .card .ct,
#collection .card .ct h3 {
  color: var(--color-text-inverse) !important;
}

#collection .card .ct .sub {
  color: var(--muted-on-dark) !important;
}

#collection .card .ct .go {
  color: var(--color-accent) !important;
}

/* ── Édition limitée — noir premium ── */
.sec.dark.edition,
.edition {
  background: var(--color-dark) !important;
  color: var(--color-text-inverse) !important;
  overflow: hidden !important;
}

.edition::before {
  opacity: 1 !important;
}

.edition .eyebrow {
  color: var(--color-accent) !important;
}

.edition .big,
.edition .nums {
  color: var(--color-text-inverse) !important;
}

.edition .nums {
  color: var(--color-accent) !important;
}

.edition p {
  color: var(--muted-on-dark) !important;
}

.edition .fp-founders-count-meta,
.edition .fp-founders-count-meta strong {
  color: var(--muted-on-dark) !important;
}

.edition .fp-founders-count-meta strong {
  color: var(--color-text-inverse) !important;
}

.edition .page-hero-collection-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--color-text-inverse) !important;
}

.edition-destiny-browse {
  color: var(--color-accent) !important;
}

@keyframes fp-waitlist-blink {
  0%, 100% {
    background-color: var(--color-text-primary) !important;
    border-color: var(--color-text-primary) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: none !important;
  }
  50% {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: 0 0 22px var(--color-accent-glow) !important;
  }
}

.btn.edition-preorder:hover,
a.edition-preorder[data-waitlist-intro]:hover {
  animation: none !important;
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: var(--color-accent-glow) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn.edition-preorder,
  a.edition-preorder[data-waitlist-intro] {
    animation: none !important;
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
  }
}

/* ── Vision ── */
.vision-sec .sig {
  filter: brightness(0) !important;
}

/* ── Newsletter / liste ── */
.news {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: var(--color-background-alt) !important;
  color: var(--color-text-primary) !important;
}

.news h3 {
  color: var(--color-text-primary) !important;
}

.news input,
.news .form-fields input,
.news .form-fields select {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.news .nl-meta,
.news .nl-meta strong,
.news .ok,
.news .nl-logged,
.news .nl-feedback {
  color: var(--color-text-primary) !important;
}

.founder-offers-callout {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.founder-offers-callout h4 {
  color: var(--color-text-primary) !important;
}

.founder-offers-callout p {
  color: var(--color-text-secondary) !important;
}

.founder-offers-callout .founder-offers-spec {
  color: var(--color-text-muted) !important;
}

.founder-offers-callout .founder-offers-note {
  color: var(--color-text-muted) !important;
}

.founder-offers-callout .founder-offers-btn {
  background: var(--color-text-primary) !important;
  border-color: var(--color-text-primary) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: var(--shadow-sm) !important;
}

.founder-offers-callout .founder-offers-btn:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
}

@keyframes fp-founder-pulse {
  50% {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--color-accent-glow) !important;
  }
}

/* ── Footer noir ── */
footer,
.sec.dark:not(.edition) {
  background: var(--color-dark) !important;
  color: var(--color-text-inverse) !important;
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.foot-brand p,
.fcol h4,
.fcol a,
.foot-bot .lg {
  color: var(--muted-on-dark) !important;
}

.fcol a:hover {
  color: var(--color-text-inverse) !important;
}

/* ── Gate connexion ── */
#site-gate::after {
  background: linear-gradient(
    180deg,
    rgba(247, 246, 242, 0.45) 0%,
    rgba(247, 246, 242, 0.72) 62%,
    rgba(247, 246, 242, 0.92) 100%
  ) !important;
}

#site-gate .gate-eyebrow,
#site-gate .gate-access-kicker {
  color: var(--color-accent) !important;
}

#site-gate .gate-signature,
#site-gate .gate-product,
#site-gate h1 {
  color: var(--color-text-primary) !important;
}

#site-gate .gate-lead,
#site-gate .gate-assurance,
#site-gate .gate-journey {
  color: var(--color-text-secondary) !important;
}

#site-gate .gate-access-panel {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
}