/* ═══════════════════════════════════════════════════════════════════════
   LANDING — TEST DA BLAISE, VERSION PAPIER (clair)
   Couche d'override chargée EN DERNIER (slot css-l5) par-dessus forje*.css.
   Le cosmos indigo devient atelier de jour : papier chaud, encre charbon,
   accents braise — la même DA que l'app. ROLLBACK : retirer le <link> css-l5.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg-deep: #FAFAF8;
  --bg-mid:  #F5F2EB;
  --bg-top:  #FAF8F2;
  --card:        rgba(255, 255, 255, 0.72);
  --card-strong: rgba(255, 255, 255, 0.92);
  --border:        rgba(27, 26, 21, 0.09);
  --border-strong: rgba(27, 26, 21, 0.18);
  --fg:      #1B1A15;
  --fg-dim:  rgba(27, 26, 21, 0.78);
  --muted:   rgba(27, 26, 21, 0.52);
  --muted-2: rgba(27, 26, 21, 0.34);
  --chromatic: conic-gradient(from 140deg,
     #C2410C 0deg, #E8752C 80deg, #F2B93D 160deg,
     #E8752C 240deg, #C2410C 360deg);
  --chromatic-line: linear-gradient(90deg,
     #F2B93D 0%, #E8752C 48%, #C2410C 100%);
}

/* ─── Ciel d'atelier : papier chaud, lueurs braise discrètes ────────────── */
.page-bg {
  background:
    radial-gradient(900px 600px at 72% 10%, rgba(232, 117, 44, 0.07), transparent 60%),
    radial-gradient(800px 500px at 20% 40%, rgba(194, 65, 12, 0.05), transparent 65%),
    radial-gradient(1200px 800px at 50% 95%, rgba(232, 117, 44, 0.08), transparent 60%),
    linear-gradient(180deg, #FFFEFB 0%, #FAFAF8 30%, #F6F2E9 70%, #FAF8F2 100%);
}
.page-bg::before {
  background: radial-gradient(closest-side,
    rgba(242, 185, 61, 0.12), rgba(232, 117, 44, 0.04) 40%, transparent 72%);
}

/* Étoiles blanches invisibles sur papier — on les éteint proprement */
.stars, .stars-2, .stars-sparkle { display: none; }

/* Vignette respirante (forje-lux) : voile sombre inutile sur papier */
.page-bg::after { display: none; }

/* ─── Marque ────────────────────────────────────────────────────────────── */
.brand-suffix { color: rgba(27, 26, 21, 0.45); }

/* ─── Étoiles filantes : quasi invisibles sur papier, floutées + animées —
   supprimées (perf) ─────────────────────────────────────────────────────── */
.streak { display: none; }

/* ─── Couches d'ambiance héritées du dark, adaptées au papier ───────────── */
/* Grain plein écran en blend-mode : quasi invisible sur papier → off (perf) */
body::after { display: none; }
/* Piliers arc-en-ciel et halo curseur : supprimés (couches fixes inutiles) */
.pillars { display: none; }
.cursor-halo { display: none; }
/* Horizon : bandes chromatiques floutées héritées du cosmos → supprimées */
.horizon { display: none; }

/* ─── CTA : le langage de l'app — bouton encre, ghost hairline ──────────── */
.btn-primary {
  background: #1B1A15;
  color: #FAFAF8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(27, 26, 21, 0.18),
    0 8px 24px -8px rgba(27, 26, 21, 0.35);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: #26241D;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 4px rgba(27, 26, 21, 0.16),
    0 12px 30px -8px rgba(194, 65, 12, 0.35);
}
.btn-ghost {
  color: var(--fg-dim);
  border-color: rgba(27, 26, 21, 0.22);
  background: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  background: rgba(194, 65, 12, 0.06);
  border-color: rgba(194, 65, 12, 0.4);
  color: var(--fg);
}

/* ─── Eyebrow / badge hero : chip papier ────────────────────────────────── */
.eyebrow {
  background: rgba(27, 26, 21, 0.045);
  border: 1px solid rgba(27, 26, 21, 0.10);
  color: var(--fg-dim);
}
.eyebrow .sep { color: rgba(194, 65, 12, 0.4); }

/* ═══ Sections basses — inversion des surfaces sombres restantes ═════════ */

/* Fenêtres produit (hero mockup + board live) : cadres SOMBRES assumés —
   sur papier, l'écran charbon ressort. Charbon Blaise, plus l'indigo. */
.hero-mockup {
  background: #16130E;
  border-color: rgba(232, 174, 61, 0.18);
  box-shadow:
    0 60px 120px rgba(27, 26, 21, 0.35),
    0 24px 48px rgba(27, 26, 21, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.hero-mockup-chrome {
  background: linear-gradient(180deg, #221D14, #17130D);
  border-bottom-color: rgba(232, 174, 61, 0.14);
}
.hero-mockup-chrome span { background: rgba(232, 174, 61, 0.25); }
.hero-mockup-url {
  color: rgba(228, 200, 160, 0.6);
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(232, 174, 61, 0.12);
}
.hero-mockup-floor {
  background: radial-gradient(closest-side, rgba(194, 65, 12, 0.25), transparent 70%);
}
.fs-window {
  background: linear-gradient(180deg, rgba(26, 22, 15, 0.97), rgba(19, 16, 11, 0.98));
  border-color: rgba(232, 174, 61, 0.16);
  box-shadow:
    0 40px 90px rgba(27, 26, 21, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.fs-titlebar {
  background: rgba(255, 255, 255, 0.025);
  border-bottom-color: rgba(232, 174, 61, 0.10);
}
.fs-dots i {
  background: rgba(232, 174, 61, 0.20);
  border-color: rgba(232, 174, 61, 0.12);
}
.fs-url {
  color: rgba(228, 200, 160, 0.55);
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(232, 174, 61, 0.10);
}

/* ─── CLEF DU CONTRASTE : dans les fenêtres sombres, on redéclare les
   tokens SOMBRES. Tout l'intérieur (titres d'actus, labels, cards) qui
   consomme var(--fg/--muted/--card/--border) redevient lisible d'un coup. */
.fs-window, .hero-mockup {
  --fg:      #F7F2E7;
  --fg-dim:  rgba(245, 236, 218, 0.82);
  --muted:   rgba(228, 200, 160, 0.55);
  --muted-2: rgba(228, 200, 160, 0.35);
  --card:        rgba(255, 255, 255, 0.045);
  --card-strong: rgba(255, 255, 255, 0.08);
  --border:        rgba(232, 174, 61, 0.14);
  --border-strong: rgba(232, 174, 61, 0.28);
  color: var(--fg-dim);
}
.fs-window .fs-tabs { background: rgba(0, 0, 0, 0.35); }

/* ─── Section deep dive (ddshow) : textes et tabs pensés dark → encre ───── */
.ddshow-sub { color: rgba(27, 26, 21, 0.62); }
.ddshow-tab {
  border-color: rgba(27, 26, 21, 0.16);
  background: rgba(27, 26, 21, 0.04);
  color: rgba(27, 26, 21, 0.62);
}
.ddshow-tab:hover {
  border-color: rgba(194, 65, 12, 0.45);
  color: #1B1A15;
  background: rgba(194, 65, 12, 0.05);
}
.ddshow-tab.active {
  border-color: #1B1A15;
  background: #1B1A15;
  color: #FAFAF8;
}

/* ─── Pricing : card papier premium (réf composant 21st) — fond blanc,
   bordure cuivre, hiérarchie franche, halo braise discret ─────────────── */
.price-card {
  background: #FFFFFF;
  border: 1px solid rgba(27, 26, 21, 0.12);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(27, 26, 21, 0.05), 0 12px 32px -16px rgba(27, 26, 21, 0.12);
}
.price-card.featured {
  background: #FFFFFF;
  border: 2px solid rgba(194, 65, 12, 0.60);
  box-shadow:
    0 1px 2px rgba(27, 26, 21, 0.05),
    0 24px 56px -20px rgba(194, 65, 12, 0.28);
}
.price-card.featured::after {
  background: radial-gradient(50% 50% at 50% 0%, rgba(232, 117, 44, 0.14), transparent 70%);
}
.price-kind { color: #C2410C; }
.price-amount .num { color: #1B1A15; }
.price-amount .per, .price-sub, .price-mix, .price-list li, .price-compare { color: rgba(27, 26, 21, 0.65); }

/* Titres de section : l'accent bleu délavé (#93BAFF) devient cuivre */
.section h2 .accent {
  background: none;
  -webkit-background-clip: unset; background-clip: unset;
  color: #C2410C;
}

/* Pilule de label de section : chip papier, plus de lavis bleu */
.section-label {
  background: rgba(27, 26, 21, 0.05);
  border-color: rgba(27, 26, 21, 0.10);
  color: rgba(27, 26, 21, 0.55);
}

/* Chips & accents bleus des sections how / formats / faq / pricing */
.how-idx {
  color: #C2410C;
  background: rgba(194, 65, 12, 0.10);
}
.format-visual { background: rgba(27, 26, 21, 0.04); }
.format-cost { background: rgba(194, 65, 12, 0.08); }
.faq-item.open { border-color: rgba(194, 65, 12, 0.35); }
.price-card::before {
  background: linear-gradient(90deg, transparent, rgba(194, 65, 12, 0.45), transparent);
}
.price-card.featured::before { box-shadow: 0 0 16px rgba(232, 117, 44, 0.35); }
.price-list .tick {
  background: rgba(194, 65, 12, 0.10);
  border-color: rgba(194, 65, 12, 0.25);
  color: #C2410C;
}
.price-card.featured .tick { color: #FFF8EE; }
.closing::before {
  background: radial-gradient(closest-side, rgba(232, 117, 44, 0.14), transparent 70%);
  animation: none;
}
/* Les radials indigo/cyan blur(40px) animés de forje-lux — LES reflets — off */
.closing::after { display: none; }

/* ─── Aurora : blobs indigo/cyan → lueurs braise posées sur papier ──────── */
/* 5 blobs blur(90px) animés en continu pour un voile à ~10% — supprimés,
   les radials statiques de .page-bg donnent déjà la chaleur (perf) */
.aurora { display: none; }