/**
 * FILAIRPHONE · White Luxury Theme
 * Couche globale — ne modifie aucune logique, uniquement l'UI.
 */

@import url("/css/fp-seal-pattern.css");
@import url("/css/fp-red-pattern-banner.css");
@import url("/css/fp-white-luxury-mobile.css");

/* ── Base ── */
html {
  background: var(--color-background);
  color: var(--color-text-primary);
  scroll-behavior: smooth;
}

body {
  background: var(--color-background);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
}

a { color: inherit; }

/* ── Logo sur fond clair ── */
.fc-logo {
  filter: none;
}

/* ── Navigation ── */
.nav,
.fo-nav,
.founder-nav {
  background: rgba(247, 247, 245, 0.88);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

.nav-links a,
.fo-links a,
.founder-nav-links a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

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

.nav-cta,
.fo-btn-primary {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-cta:hover,
.fo-btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

/* ── Boutons globaux ── */
.btn,
button.btn,
.fo-btn,
.founder-offers-btn,
.fc-preorder-btn,
.edition-preorder {
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.btn.dark,
.btn-primary,
.btn.edition-preorder,
.founder-offers-callout .founder-offers-btn,
.fo-pay-btn {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-text-primary);
}

.btn.dark:hover,
.btn-primary:hover,
.btn.edition-preorder:hover,
.founder-offers-callout .founder-offers-btn:hover,
.fo-pay-btn:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn.ghost,
.btn-secondary,
.fo-btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
}

.btn.ghost:hover,
.btn-secondary:hover,
.fo-btn-secondary:hover {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}

.btn-accent,
.fo-btn-accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-accent);
}

.btn-accent:hover,
.fo-btn-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── Eyebrows & numérotation éditoriale ── */
.eyebrow,
.head .eyebrow,
.fo-eyebrow,
.gate-eyebrow,
.page-hero-collection-label {
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.22em;
}

.mode .ph .no,
.card .pt .tag {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
}

/* ── Cartes & sections ── */
.mode,
.card,
.feature,
.founder-meter,
.founder-choice,
.fap-card,
.fc-preorder-modal .modal-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.mode:hover,
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

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

.mode .ph,
.card .pt,
.feature .fimg {
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

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

.mode .ph img,
.card .pt img,
.feature .fimg img {
  filter: none;
  transform: none;
}

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

.mode p,
.card .ct .sub,
.feature .ftxt p,
.lead {
  color: var(--color-text-secondary);
}

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

/* ── Sections ── */
.sec,
.sec.stone,
.vision-sec,
.news,
.page-wrap,
.founder-shell,
.fo-shell {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.sec.dark,
footer,
.ticker {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}

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

/* ── DROP 01 CASANEGRA — édition limitée ── */
.edition,
.page-hero-collection-title {
  color: #fff;
}

.edition .nums,
.fp-destiny-digit {
  color: var(--color-accent);
}

.edition::before {
  opacity: 0.08;
}

.edition p {
  color: var(--color-text-secondary);
}

/* ── Formulaires ── */
input,
select,
textarea,
.news input,
.news .form-fields input,
.news .form-fields select,
.connexion-field input {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ── Compte Google ── */
.fp-account-btn {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.fp-account-btn:hover,
.fp-account-root.open .fp-account-btn {
  background: var(--color-background-alt);
  border-color: var(--color-text-primary);
}

.fp-account-avatar.initials {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* ── FAP grid cards ── */
.fap-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.fc-visual {
  background: var(--color-background-alt);
}

.fc-num {
  color: var(--color-accent);
}

.fc-preorder-btn {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}

.fc-preorder-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.fc-waitlist-count {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
  text-shadow: none;
}

/* ── Destiny picker ── */
.fp-destiny-start {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

.fp-destiny-start:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.fp-destiny-digit {
  background: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent);
  box-shadow: var(--shadow-xs);
}

/* ── Modals ── */
.wli-overlay {
  background: rgba(17, 17, 17, 0.32);
}

.wli-modal,
.fc-preorder-modal .modal-box {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.wli-close {
  border-color: var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.wli-close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Pagination ── */
.pag-btn,
.pag-arrow {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.pag-btn.active,
.pag-btn:hover,
.pag-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Founder offers badge ── */
.founder-offers-nav .new-badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: none;
}

/* ── Footer sombre ── */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .fp-ip-notice,
footer .fp-fidlock-notice {
  color: rgba(255, 255, 255, 0.62);
}

.fp-page-legal .fp-ip-notice {
  color: var(--color-text-muted);
}

/* ── Page hero (listes numéros) ── */
.page-hero {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.page-back {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.page-back:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
}

.page-title,
.page-subtitle,
.page-note {
  color: #fff;
}

.page-subtitle,
.page-note {
  color: rgba(255, 255, 255, 0.82);
}

.page-info,
.page-info strong {
  color: rgba(255, 255, 255, 0.72);
}

.page-info strong {
  color: #fff;
}

.page-hero-collection-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* ── Legal ── */
.fp-page-legal {
  border-top-color: var(--color-border);
}

.fp-page-legal .fp-ip-notice {
  color: var(--color-text-muted);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}