/* fo-dark.css : mode sombre des pages statiques (fr / en / es : FAQ, tarifs, blog, démos, outils, légal…).
 *
 * Piloté par la classe .dark sur <html>, posée avant le premier rendu par /theme-init.js
 * à partir de la dernière préférence connue du compte (localStorage « fluidops_theme_pref »,
 * écrite par l'application - la source de vérité reste Supabase : profiles.theme_preference),
 * ou du mode du système si aucune préférence n'est connue. Mêmes options que l'app :
 * clair / sombre / système.
 *
 * Palette identique à .dark dans src/index.css (gris ardoise neutre, aucun fond teinté
 * violet ; l'indigo reste réservé aux boutons, liens et focus).
 * Préfixe « html.dark » partout : spécificité supérieure aux :root des feuilles de page,
 * quel que soit l'ordre de chargement.
 */

/* ── Variables (feuilles style.css et s-*.css) ─────────────────────────────── */
html.dark {
  --fo-bg: #0c0c10;
  --fo-surface: #131317;
  --fo-surface-2: #19191f;
  --fo-surface-3: #232329;
  --fo-border: #27272e;
  --fo-border-2: #34343c;

  --primary: #7565f7;
  --primary-dark: #5e4fe6;
  --primary-hover: #5e4fe6;
  --indigo: #7565f7;
  --indigo-hover: #5e4fe6;
  --primary-soft: color-mix(in srgb, #6366f1 14%, #131317);
  --primary-border: color-mix(in srgb, #6366f1 30%, #131317);

  --bg-white: #131317;
  --bg-grey: #19191f;
  --bg-soft: #0c0c10;
  --text-black: #f4f4f5;
  --text-dark: #cfcfd5;
  --text-light: #a3a3ad;
  --text-muted: #90909c;
  --border: #27272e;

  --ink: #f4f4f5;
  --slate-50: #19191f;
  --slate-100: #232329;
  --slate-200: #2e2e36;
  --slate-400: #90909c;
  --slate-500: #a3a3ad;
  --slate-700: #cfcfd5;
  --emerald-dark: #34d399;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .45), 0 2px 4px -1px rgba(0, 0, 0, .3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .55), 0 10px 10px -5px rgba(0, 0, 0, .3);
}

html.dark body { background: #0c0c10; color: #cfcfd5; }
html.dark ::selection { background: color-mix(in srgb, #6366f1 30%, transparent); color: #f4f4f5; }
html.dark figure.illus img,
html.dark .blog-card img { filter: brightness(.88) contrast(1.04); }

/* ── Boutons & blocs communs (style.css) ───────────────────────────────────── */
html.dark .page-hero { background: linear-gradient(135deg, #0c0c10 0%, #16161d 100%); }
html.dark .btn-secondary,
html.dark .btn-ghost,
html.dark .demo-connector .btn-ghost { background: #19191f; border-color: #34343c; color: #b4bcf8; }
html.dark .btn-secondary:hover,
html.dark .btn-ghost:hover { background: #232329; border-color: #4a4a55; }
html.dark .demo-connector .btn-primary { background: #4f46e5; color: #fff; }
html.dark .connector { background: linear-gradient(180deg, #0c0c10 0%, #101014 100%); }
html.dark .connector-inner,
html.dark .app-bridge-box,
html.dark .demo-connector-inner { background: linear-gradient(135deg, #131317 0%, #17171d 100%); border-color: #2e2e36; }
html.dark .demo-connector .step-label { background: color-mix(in srgb, #6366f1 14%, #131317); border-color: color-mix(in srgb, #6366f1 30%, #131317); color: #b4bcf8; }
html.dark .demo-connector h2 { color: #f4f4f5; }
html.dark .demo-connector p,
html.dark .demo-connector .link-soft { color: #a3a3ad; }

html.dark .card,
html.dark .related-box,
html.dark .blog-card,
html.dark .article-nav a,
html.dark .pricing-card,
html.dark .faq-item,
html.dark .dyad-card { background: #131317; border-color: #27272e; }
html.dark .dyad-card.in-group { background: var(--primary-soft); border-color: var(--primary-border); }
html.dark .card:hover,
html.dark .article-nav a:hover { border-color: #4a43a8; }
html.dark .pricing-btn { background: #19191f; border-color: #34343c; color: #cfcfd5; }
html.dark .pricing-btn:hover { background: #232329; border-color: var(--primary); color: #b4bcf8; }
html.dark .pricing-btn.primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
html.dark .pricing-btn.primary:hover { background: #4338ca; color: #fff; }
html.dark .pricing-card.featured { box-shadow: 0 15px 35px rgba(99, 102, 241, .18); }
html.dark .content a { color: #9d92ff; }

html.dark .billing-switch { background: #3a3a44; }
html.dark body.billing-annual .billing-switch { background: #5e4fe6; }
html.dark .save-badge { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
html.dark .language-selector select { border-color: #3a3a44; background-color: #19191f; color: #cfcfd5; }
html.dark .language-selector select:hover { border-color: #5a5a66; }

/* Pied de page (style.css : fond var(--text-black), devenu clair en sombre ; démos : fond blanc) */
html.dark .footer,
html.dark .site-footer { background: #08080b; border-top: 1px solid #1c1c22; }
html.dark .footer-bottom { border-top-color: #27272e; }
html.dark .footer-brand p,
html.dark .footer-links a,
html.dark .footer-bottom,
html.dark .footer-bottom a { color: #94a3b8; }
html.dark .footer-links a:hover,
html.dark .footer-bottom a:hover { color: #fff; }
html.dark .footer-brand .logo,
html.dark .footer-links h3 { color: #f4f4f5; }

/* ── En-tête commun (fo-header.css) ─────────────────────────────────────────── */
html.dark .fo-header { background: rgba(19, 19, 23, .85); border-bottom-color: rgba(52, 52, 60, .8); }
html.dark .fo-logo { color: #f4f4f5; }
html.dark .fo-logo-badge { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .5); }
html.dark .fo-nav a { color: #b4b4bd; }
html.dark .fo-nav a:hover { color: #f4f4f5; }
html.dark .fo-nav a[aria-current="page"] { color: #b4bcf8; }
html.dark .fo-lang svg { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
html.dark .fo-lang-menu { background: #19191f; border-color: #34343c; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
html.dark .fo-lang-menu button { color: #cfcfd5; }
html.dark .fo-lang-menu button:hover { background: #232329; }
html.dark .fo-lang-menu button.on { background: color-mix(in srgb, #6366f1 16%, #19191f); color: #b4bcf8; }
html.dark .fo-signin { color: #e4e4e7; background: #232329; }
html.dark .fo-signin:hover { background: #2e2e36; color: #f4f4f5; }
html.dark .fo-burger { color: #cfcfd5; }
html.dark .fo-burger:hover { background: #232329; }
html.dark .fo-sub > a { background: #19191f; color: #cfcfd5; }
html.dark .fo-sub:before { background: #19191f; border-color: #34343c; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .4); }
html.dark .fo-sub > a:hover { background: #232329; color: #b4bcf8; }
html.dark .fo-sub > a.sep { border-top-color: #27272e; }
@media (max-width: 1023px) {
  html.dark .fo-nav { background: #131317; border-bottom-color: #27272e; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .5); }
  html.dark .fo-nav a { color: #cfcfd5; }
  html.dark .fo-nav a:hover { background: #19191f; }
  html.dark .fo-sub { border-left-color: #34343c; }
  html.dark .fo-sub > a { background: transparent; color: #a3a3ad; }
  html.dark .fo-tg { color: #a3a3ad; }
}

/* ── Tarifs / « pourquoi FluidOps » / accordéons / calculateur (fo-header.css) ── */
html.dark .fo-why { background: #0f0f13; }
html.dark .fo-why.alt { background: #0f0f13; }
html.dark .fo-why.w { background: #0c0c10; }
html.dark .fo-why h2,
html.dark .fo-choose h2,
html.dark .fo-why-solo,
html.dark .fo-ic h3,
html.dark .fo-gap h3,
html.dark .fo-q summary { color: #f4f4f5; }
html.dark .fo-why-lead,
html.dark .fo-why-note,
html.dark .fo-calc-note,
html.dark .fo-more p { color: #a3a3ad; }
html.dark .fo-why-card,
html.dark .fo-why-tw,
html.dark .fo-gap,
html.dark .fo-q,
html.dark .fo-calc-box { background: #131317; border-color: #27272e; }
html.dark .fo-gap { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html.dark .fo-calc-box { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
html.dark .fo-why-card h3 { color: #a5b4fc; }
html.dark .fo-why-card p,
html.dark .fo-q p { color: #b4b4bd; }
html.dark .fo-why-t th { background: #19191f; color: #cfcfd5; }
html.dark .fo-why-t td { border-top-color: #27272e; color: #b4b4bd; }
html.dark .fo-why-t tr.fo-me td { background: color-mix(in srgb, #6366f1 16%, #131317); color: #c7d2fe; }
html.dark .fo-why-tag { background: #232329; color: #a3a3ad; }
html.dark .fo-why-here { color: #6ee7b7 !important; background: rgba(16, 185, 129, .12); }
html.dark .fo-choose li { background: #131317; border-color: #27272e; color: #e4e4e7; }
html.dark .fo-q:hover { border-color: #4a43a8; }
html.dark .fo-q summary:after { border-color: #90909c; }
html.dark .fo-ic .fo-ico { background: color-mix(in srgb, #6366f1 16%, #131317); color: #a5b4fc; }
html.dark .fo-mono { background: #232329; color: #b4b4bd; }
html.dark .fo-gap-n { color: #90909c; }
html.dark .fo-more summary,
html.dark .card-icon svg,
html.dark .fo-fn-ref a,
html.dark .fo-fn a { color: #a5b4fc; }
html.dark .fo-fiche .card-icon { background: rgba(234, 88, 12, .16); }
html.dark .fo-fiche .card-icon svg { color: #fb923c; }
html.dark .fo-fiche[open] { border-color: #4a43a8; }
html.dark .fo-callout { background: #131317; border-color: #27272e; border-left-color: #6366f1; }
html.dark .fo-callout .fo-callout-title { color: #f4f4f5; }
html.dark .fo-callout p { color: #cfcfd5; }
html.dark .fo-fn { background: #131317; border-color: #27272e; }
html.dark .fo-fn summary { color: #cfcfd5; }
html.dark .fo-fn summary:after { border-color: #90909c; }
html.dark .fo-fn li { background: #19191f; border-color: #27272e; color: #b4b4bd; }
html.dark .fo-fn li:before { background: color-mix(in srgb, #6366f1 22%, #19191f); color: #c7d2fe; }
html.dark .fo-chips a { background: #131317; border-color: #34343c; color: #b4b4bd; }
html.dark .fo-chips a:hover { border-color: #6366f1; color: #c7d2fe; }
html.dark .fo-chips a.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }

html.dark .fo-calc-row label { color: #cfcfd5; }
html.dark .fo-calc-row output { color: #a5b4fc; }
html.dark #fo-range { background: linear-gradient(90deg, #6366f1 var(--p, 9%), #34343c var(--p, 9%)); }
html.dark .fo-tier { background: #19191f; border-color: #27272e; color: #a3a3ad; }
html.dark .fo-tier b { color: #cfcfd5; }
html.dark .fo-tier.on { background: color-mix(in srgb, #6366f1 16%, #19191f); border-color: #6366f1; }
html.dark .fo-tier.on b { color: #c7d2fe; }
html.dark .fo-tier.on span { color: #a5b4fc; }
html.dark .fo-calc-tog { background: #19191f; }
html.dark .fo-calc-tog button { color: #a3a3ad; }
html.dark .fo-calc-tog button.on { background: #34343c; color: #f4f4f5; box-shadow: none; }
html.dark .fo-calc-res > div { background: #19191f; border-color: #27272e; }
html.dark .fo-calc-res small { color: #a3a3ad; }
html.dark .fo-calc-res b { color: #f4f4f5; }
html.dark .fo-calc-res em { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
html.dark .fo-calc-hint { background: color-mix(in srgb, #6366f1 14%, #131317); color: #c7d2fe; }

/* ── Page d'accueil statique (fo-home.css) ─────────────────────────────────── */
html.dark .fh { color: #e4e4e7; }
html.dark .fh-hero { background: radial-gradient(900px 500px at 85% 0%, #1e1b4b 0%, transparent 60%), radial-gradient(700px 400px at 0% 20%, #1c1325 0%, transparent 55%), #0c0c10; }
html.dark .fh-badge { background: color-mix(in srgb, #6366f1 16%, #131317); border-color: color-mix(in srgb, #6366f1 30%, #131317); color: #c7d2fe; }
html.dark .fh-sub,
html.dark .fh-feat p,
html.dark .fh-who p { color: #b4b4bd; }
html.dark .fh-note,
html.dark .fh-plan p,
html.dark .fh-sec > .fh-wrap > p.lead { color: #a3a3ad; }
html.dark .fh-btn.sec { background: #19191f; border-color: #34343c; color: #c7d2fe; }
html.dark .fh-mock,
html.dark .fh-card,
html.dark .fh-feat,
html.dark .fh-who,
html.dark .fh-plan,
html.dark .fh-blog { background: #131317; border-color: #27272e; }
html.dark .fh-mock-bar { background: #19191f; border-color: #27272e; }
html.dark .fh-mock-bar i { background: #3a3a44; }
html.dark .fh-board { background: #0f0f13; }
html.dark .fh-col h4 { color: #b4b4bd; }
html.dark .fh-card em { background: color-mix(in srgb, #6366f1 18%, #131317); color: #c7d2fe; }
html.dark .fh-card em.h { background: rgba(234, 88, 12, .18); color: #fdba74; }
html.dark .fh-card em.l { background: #232329; color: #a3a3ad; }
html.dark .fh-ico { background: color-mix(in srgb, #6366f1 16%, #131317); }
html.dark .fh-feat b,
html.dark .fh-blog a { color: #a5b4fc; }
html.dark .fh-blog { color: #b4b4bd; }
html.dark .fh-grey { background: #0f0f13; }
html.dark .fh-plan.mid { border-color: #6366f1; }

/* ── Démos : Kanban (s-006…) ───────────────────────────────────────────────── */
html.dark .head .tag { background: var(--primary-soft); border-color: var(--primary-border); color: #b4bcf8; }
html.dark .panel,
html.dark .filters-bar,
html.dark .kpi-card,
html.dark .rail-card,
html.dark .project-card,
html.dark .empty-feed,
html.dark .task-card,
html.dark .gantt-svg-wrap,
html.dark .wl-count { background: #131317; border-color: #27272e; }
html.dark .panel,
html.dark .kpi-card,
html.dark .project-card,
html.dark .rail-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html.dark .col { background: #19191f; border-color: #27272e; }
html.dark .col.drag-over { background: color-mix(in srgb, #6366f1 12%, #19191f); border-color: #4a43a8; box-shadow: inset 0 0 0 2px #4a43a8; }
html.dark .col-head .lbl,
html.dark .card-pts,
html.dark .empty-feed .t1,
html.dark .follow-btn,
html.dark .author .name,
html.dark .account-name { color: #cfcfd5; }
html.dark .col-count { background: #2e2e36; color: #a3a3ad; }
html.dark .col-empty { border-color: #34343c; }
html.dark .card-pts { background: #232329; }
html.dark .card:hover,
html.dark .task-card:hover,
html.dark .project-card:hover { border-color: #4a43a8; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
html.dark .badge-low { background: #232329; color: #a3a3ad; }
html.dark .badge-medium { background: rgba(59, 130, 246, .16); color: #93c5fd; }
html.dark .badge-high { background: rgba(234, 88, 12, .16); color: #fdba74; }
html.dark .badge-urgent,
html.dark .badge-blocked { background: rgba(244, 63, 94, .16); color: #fda4af; }
html.dark .db-panel { background: #0a0a0d; }
html.dark .db-panel-bar { border-bottom-color: #27272e; }
html.dark .db-panel .caption { border-top-color: #27272e; }

/* ── Démos : Scrum (s-22d…) ────────────────────────────────────────────────── */
html.dark .sprint-badge,
html.dark .interest-pill,
html.dark .for-you-hint { background: var(--primary-soft); }
html.dark .sprint-badge { color: #b4bcf8; }
html.dark .velocity-trend { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
html.dark .done-btn { background: #19191f; border-color: #34343c; color: #90909c; }
html.dark .done-btn:hover { background: rgba(16, 185, 129, .16); color: #6ee7b7; border-color: #059669; }
html.dark .status-todo { background: #232329; color: #a3a3ad; }
html.dark .status-in_progress { background: rgba(59, 130, 246, .16); color: #93c5fd; }
html.dark .status-done { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
html.dark .status-blocked { background: rgba(234, 88, 12, .16); color: #fdba74; }

/* ── Démos : Gantt (s-2b6…) ────────────────────────────────────────────────── */
html.dark .preset-btn { background: #19191f; border-color: #34343c; color: #b4b4bd; }
html.dark .preset-btn:hover { background: #232329; border-color: #4a43a8; }
html.dark .preset-btn.active { background: var(--primary-soft); border-color: #4a43a8; color: #c7d2fe; }
html.dark .gantt-svg-wrap svg [stroke="#F0F0F3"] { stroke: #27272e; }
html.dark .gantt-svg-wrap svg [stroke="#E5E5EA"] { stroke: #2e2e36; }
html.dark .gantt-svg-wrap svg [fill="#1F1F26"] { fill: #e4e4e7; }
html.dark .gantt-svg-wrap svg [fill="#A0A0AA"],
html.dark .gantt-svg-wrap svg [fill="#9A9AA6"] { fill: #90909c; }

/* ── Démos : Analytics (s-556…) ────────────────────────────────────────────── */
html.dark .gran-group { background: #19191f; }
html.dark .gran-btn { color: #a3a3ad; }
html.dark .gran-btn.active { background: #34343c; color: #f4f4f5; box-shadow: none; }
html.dark .period-nav button { background: #19191f; border-color: #34343c; color: #a3a3ad; }
html.dark .period-nav button:hover { background: #232329; color: #b4bcf8; }
html.dark .kpi-card:hover { border-color: #3a3a44; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
html.dark .kpi-icon.indigo { background: var(--primary-soft); color: #b4bcf8; }
html.dark .kpi-icon.emerald { background: rgba(16, 185, 129, .16); }
html.dark .kpi-icon.amber { background: rgba(245, 158, 11, .16); color: #fbbf24; }
html.dark .kpi-icon.rose { background: rgba(244, 63, 94, .16); color: #fda4af; }
html.dark .wl-row { background: #19191f; border-color: #27272e; }
html.dark .wl-track { background: #34343c; }
html.dark .mindmap-svg-wrap { background: linear-gradient(135deg, #131317, #0f0f13); border-color: #27272e; }
html.dark .mm-legend-item { color: #a3a3ad; }
html.dark .mindmap-svg-wrap svg [stroke="#D0D0D8"] { stroke: #3a3a44; }
html.dark .mindmap-svg-wrap svg circle[fill="#ffffff"] { fill: #232329; }
html.dark .mindmap-svg-wrap svg circle[stroke="#9A9AA5"] { stroke: #5a5a66; }
html.dark .mindmap-svg-wrap svg text[fill="#45454F"] { fill: #e4e4e7; }

/* ── Démos : Communauté (s-f84…) ───────────────────────────────────────────── */
html.dark .tabs { background: #19191f; }
html.dark .tab-btn { color: #a3a3ad; }
html.dark .tab-btn.active { background: #34343c; color: #f4f4f5; box-shadow: none; }
html.dark .for-you-hint { border-color: var(--primary-border); }
html.dark .for-you-hint .t1,
html.dark .interest-pill,
html.dark .follow-btn.following { color: #c7d2fe; }
html.dark .for-you-hint .t2 { color: #a5b4fc; }
html.dark .follow-btn,
html.dark .bell-btn,
html.dark .icon-follow-btn { background: #19191f; border-color: #34343c; }
html.dark .follow-btn.following,
html.dark .bell-btn.active,
html.dark .icon-follow-btn.following { background: var(--primary-soft); border-color: #4a43a8; }
html.dark .tag-pill { background: #232329; color: #b4b4bd; }
html.dark .u-16a4c9a2.u-16a4c9a2.u-16a4c9a2 { background: #19191f; border-color: #27272e; }
html.dark .u-9e679f8b.u-9e679f8b.u-9e679f8b { background: #131317; }

/* Boutons à halo pastel (rgba(199,210,254)) : en sombre, ombre neutre au lieu du liseré clair */
html.dark .fo-start { box-shadow: 0 1px 2px rgba(0, 0, 0, .55); }