/*!
 * Fox Blocks — Front-end styles bundle
 * Version 1.1.0
 *
 * Architecture:
 *  - Tokens centralized in :root (default = minimal theme)
 *  - Alt themes via [data-fxb-theme="nature"], .fxb-theme-nature etc.
 *  - Auto dark mode via prefers-color-scheme inside each theme
 *  - All component styles use tokens — never hard-coded values
 *  - Zero JS dependencies; uses native <details>/<summary> for FAQ
 */

/* ===========================================================================
   THEME: minimal (default)
   Brutally restrained. Black/white/gray only. No shadows. Sharp 4px radius.
   Bordures réduites au strict minimum, remplacées par des fonds subtils.
   =========================================================================== */
:root {
  /* — Accent — */
  --fxb-accent:           #111827;
  --fxb-accent-hover:     #000000;
  --fxb-accent-soft:      rgba(17, 24, 39, 0.06);
  --fxb-accent-rgb:       17, 24, 39;
  --fxb-on-accent:        #ffffff;

  /* — Surfaces — */
  --fxb-surface:          #ffffff;
  --fxb-surface-sunken:   #f7f7f8;
  --fxb-surface-raised:   #ffffff;

  /* — Text — */
  --fxb-text:             #0a0a0a;
  --fxb-text-secondary:   #4b5563;
  --fxb-text-tertiary:    #9ca3af;
  --fxb-text-on-sunken:   #1f2937;

  /* — Borders (utiliser avec parcimonie) — */
  --fxb-border:           rgba(0, 0, 0, 0.08);
  --fxb-border-strong:    rgba(0, 0, 0, 0.14);
  --fxb-border-focus:     #0a0a0a;

  /* — Semantic — */
  --fxb-success:          #16a34a;
  --fxb-success-soft:     rgba(22, 163, 74, 0.08);
  --fxb-warning:          #ca8a04;
  --fxb-warning-soft:     rgba(202, 138, 4, 0.10);
  --fxb-error:            #dc2626;
  --fxb-error-soft:       rgba(220, 38, 38, 0.08);
  --fxb-info:             #2563eb;
  --fxb-info-soft:        rgba(37, 99, 235, 0.08);

  /* — Winner highlight — */
  --fxb-winner-bg:        rgba(22, 163, 74, 0.08);
  --fxb-winner-text:      #15803d;
  --fxb-winner-border:    #16a34a;

  /* — Typography — */
  --fxb-font-display:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fxb-font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fxb-text-xs:          0.75rem;     /* 12 */
  --fxb-text-sm:          0.875rem;    /* 14 */
  --fxb-text-base:        1rem;        /* 16 */
  --fxb-text-md:          1.0625rem;   /* 17 */
  --fxb-text-lg:          1.25rem;     /* 20 */
  --fxb-text-xl:          1.5rem;      /* 24 */
  --fxb-text-2xl:         1.875rem;    /* 30 */
  --fxb-text-3xl:         2.5rem;      /* 40 */

  --fxb-weight-normal:    400;
  --fxb-weight-medium:    500;
  --fxb-weight-semibold:  600;
  --fxb-weight-bold:      700;

  --fxb-leading-tight:    1.2;
  --fxb-leading-snug:     1.4;
  --fxb-leading-normal:   1.6;

  --fxb-tracking-tight:   -0.01em;
  --fxb-tracking-normal:  0;
  --fxb-tracking-wide:    0.04em;

  /* — Spacing (8pt grid) — */
  --fxb-space-1:          0.25rem;     /* 4  */
  --fxb-space-2:          0.5rem;      /* 8  */
  --fxb-space-3:          0.75rem;     /* 12 */
  --fxb-space-4:          1rem;        /* 16 */
  --fxb-space-5:          1.5rem;      /* 24 */
  --fxb-space-6:          2rem;        /* 32 */
  --fxb-space-7:          2.5rem;      /* 40 */
  --fxb-space-8:          3rem;        /* 48 */
  --fxb-space-10:         4rem;        /* 64 */

  /* — Radius (minimal = sharp) — */
  --fxb-radius-sm:        2px;
  --fxb-radius-md:        4px;
  --fxb-radius-lg:        6px;
  --fxb-radius-pill:      9999px;

  /* — Shadows (minimal = none) — */
  --fxb-shadow-xs:        none;
  --fxb-shadow-sm:        none;
  --fxb-shadow-md:        none;
  --fxb-shadow-lg:        none;
  --fxb-shadow-focus:     0 0 0 3px rgba(var(--fxb-accent-rgb), 0.16);

  /* — Motion — */
  --fxb-duration-fast:    120ms;
  --fxb-duration-base:    180ms;
  --fxb-ease:             cubic-bezier(0.4, 0, 0.2, 1);

  /* — Block rhythm — */
  --fxb-block-gap:        var(--fxb-space-6);
}

/* Minimal — dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --fxb-accent:         #f4f4f5;
    --fxb-accent-hover:   #ffffff;
    --fxb-accent-soft:    rgba(244, 244, 245, 0.10);
    --fxb-accent-rgb:     244, 244, 245;
    --fxb-on-accent:      #0a0a0a;

    --fxb-surface:        #0a0a0a;
    --fxb-surface-sunken: #18181b;
    --fxb-surface-raised: #18181b;

    --fxb-text:           #fafafa;
    --fxb-text-secondary: #a1a1aa;
    --fxb-text-tertiary:  #71717a;
    --fxb-text-on-sunken: #e4e4e7;

    --fxb-border:         rgba(255, 255, 255, 0.10);
    --fxb-border-strong:  rgba(255, 255, 255, 0.18);
    --fxb-border-focus:   #fafafa;

    --fxb-success-soft:   rgba(34, 197, 94, 0.16);
    --fxb-warning-soft:   rgba(234, 179, 8, 0.18);
    --fxb-error-soft:     rgba(248, 113, 113, 0.18);
    --fxb-info-soft:      rgba(96, 165, 250, 0.18);
    --fxb-winner-bg:      rgba(34, 197, 94, 0.18);
    --fxb-winner-text:    #4ade80;
  }
}

/* ===========================================================================
   THEME: nature
   Palette terre/forêt. Vert sauge profond, beige chaud, cream.
   Radius généreux, shadows douces et chaudes.
   =========================================================================== */
[data-fxb-theme="nature"], .fxb-theme-nature {
  --fxb-accent:           #4a7c59;       /* sage green */
  --fxb-accent-hover:     #3d6649;
  --fxb-accent-soft:      rgba(74, 124, 89, 0.10);
  --fxb-accent-rgb:       74, 124, 89;
  --fxb-on-accent:        #fdfcf6;

  --fxb-surface:          #fdfcf6;       /* cream */
  --fxb-surface-sunken:   #f5f1e8;       /* warm sand */
  --fxb-surface-raised:   #ffffff;

  --fxb-text:             #1f2a24;       /* deep forest */
  --fxb-text-secondary:   #5c6b62;
  --fxb-text-tertiary:    #8a9890;
  --fxb-text-on-sunken:   #2d3a32;

  --fxb-border:           rgba(74, 124, 89, 0.15);
  --fxb-border-strong:    rgba(74, 124, 89, 0.28);
  --fxb-border-focus:     #4a7c59;

  --fxb-success:          #4a7c59;
  --fxb-success-soft:     rgba(74, 124, 89, 0.12);
  --fxb-warning:          #b8860b;
  --fxb-warning-soft:     rgba(184, 134, 11, 0.12);
  --fxb-error:            #b34234;
  --fxb-error-soft:       rgba(179, 66, 52, 0.10);
  --fxb-info:             #5a7f9a;
  --fxb-info-soft:        rgba(90, 127, 154, 0.12);

  --fxb-winner-bg:        rgba(74, 124, 89, 0.14);
  --fxb-winner-text:      #2e5238;
  --fxb-winner-border:    #4a7c59;

  --fxb-font-display:     Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fxb-radius-sm:        4px;
  --fxb-radius-md:        10px;
  --fxb-radius-lg:        14px;

  --fxb-shadow-xs:        0 1px 2px rgba(74, 124, 89, 0.06);
  --fxb-shadow-sm:        0 2px 6px rgba(74, 124, 89, 0.08), 0 1px 2px rgba(74, 124, 89, 0.04);
  --fxb-shadow-md:        0 8px 20px rgba(74, 124, 89, 0.10), 0 2px 6px rgba(74, 124, 89, 0.06);
  --fxb-shadow-lg:        0 16px 40px rgba(74, 124, 89, 0.12), 0 4px 12px rgba(74, 124, 89, 0.08);
  --fxb-shadow-focus:     0 0 0 4px rgba(74, 124, 89, 0.20);
}

/* Nature — dark mode */
@media (prefers-color-scheme: dark) {
  [data-fxb-theme="nature"], .fxb-theme-nature {
    --fxb-accent:         #7fb088;
    --fxb-accent-hover:   #95c39d;
    --fxb-accent-soft:    rgba(127, 176, 136, 0.14);
    --fxb-accent-rgb:     127, 176, 136;
    --fxb-on-accent:      #0f1614;

    --fxb-surface:        #131814;       /* deep forest dark */
    --fxb-surface-sunken: #0c100e;
    --fxb-surface-raised: #1a2118;

    --fxb-text:           #f0ede3;
    --fxb-text-secondary: #a8b1a5;
    --fxb-text-tertiary:  #6f7c72;
    --fxb-text-on-sunken: #d4d6c9;

    --fxb-border:         rgba(127, 176, 136, 0.18);
    --fxb-border-strong:  rgba(127, 176, 136, 0.32);

    --fxb-success-soft:   rgba(127, 176, 136, 0.18);
    --fxb-winner-bg:      rgba(127, 176, 136, 0.20);
    --fxb-winner-text:    #b0d4b6;

    --fxb-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.20);
    --fxb-shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.30);
    --fxb-shadow-md:      0 8px 20px rgba(0, 0, 0, 0.40);
    --fxb-shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.50);
  }
}

/* ===========================================================================
   THEME: vibrant
   Affiliation tech moderne. Bleu énergique, radius très arrondis,
   shadows marquées teintées de bleu, gradients subtils.
   =========================================================================== */
[data-fxb-theme="vibrant"], .fxb-theme-vibrant {
  --fxb-accent:           #2563eb;
  --fxb-accent-hover:     #1d4ed8;
  --fxb-accent-soft:      rgba(37, 99, 235, 0.10);
  --fxb-accent-rgb:       37, 99, 235;
  --fxb-on-accent:        #ffffff;

  --fxb-surface:          #ffffff;
  --fxb-surface-sunken:   #f1f5fb;
  --fxb-surface-raised:   #ffffff;

  --fxb-text:             #0f172a;
  --fxb-text-secondary:   #475569;
  --fxb-text-tertiary:    #94a3b8;
  --fxb-text-on-sunken:   #1e293b;

  --fxb-border:           rgba(37, 99, 235, 0.10);
  --fxb-border-strong:    rgba(37, 99, 235, 0.22);
  --fxb-border-focus:     #2563eb;

  --fxb-success:          #10b981;
  --fxb-success-soft:     rgba(16, 185, 129, 0.10);
  --fxb-warning:          #f59e0b;
  --fxb-warning-soft:     rgba(245, 158, 11, 0.10);
  --fxb-error:            #ef4444;
  --fxb-error-soft:       rgba(239, 68, 68, 0.10);
  --fxb-info:             #2563eb;
  --fxb-info-soft:        rgba(37, 99, 235, 0.10);

  --fxb-winner-bg:        rgba(16, 185, 129, 0.12);
  --fxb-winner-text:      #047857;
  --fxb-winner-border:    #10b981;

  --fxb-font-display:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fxb-radius-sm:        6px;
  --fxb-radius-md:        12px;
  --fxb-radius-lg:        18px;

  --fxb-shadow-xs:        0 1px 2px rgba(37, 99, 235, 0.06);
  --fxb-shadow-sm:        0 4px 8px rgba(37, 99, 235, 0.10), 0 1px 2px rgba(37, 99, 235, 0.06);
  --fxb-shadow-md:        0 12px 24px rgba(37, 99, 235, 0.14), 0 4px 8px rgba(37, 99, 235, 0.08);
  --fxb-shadow-lg:        0 24px 48px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(37, 99, 235, 0.10);
  --fxb-shadow-focus:     0 0 0 4px rgba(37, 99, 235, 0.22);
}

@media (prefers-color-scheme: dark) {
  [data-fxb-theme="vibrant"], .fxb-theme-vibrant {
    --fxb-accent:         #60a5fa;
    --fxb-accent-hover:   #93c5fd;
    --fxb-accent-soft:    rgba(96, 165, 250, 0.15);
    --fxb-accent-rgb:     96, 165, 250;
    --fxb-on-accent:      #0f172a;

    --fxb-surface:        #0f172a;
    --fxb-surface-sunken: #0a0f1d;
    --fxb-surface-raised: #1e293b;

    --fxb-text:           #f1f5f9;
    --fxb-text-secondary: #94a3b8;
    --fxb-text-tertiary:  #64748b;
    --fxb-text-on-sunken: #cbd5e1;

    --fxb-border:         rgba(96, 165, 250, 0.16);
    --fxb-border-strong:  rgba(96, 165, 250, 0.30);

    --fxb-success-soft:   rgba(52, 211, 153, 0.18);
    --fxb-warning-soft:   rgba(251, 191, 36, 0.18);
    --fxb-error-soft:     rgba(248, 113, 113, 0.18);
    --fxb-info-soft:      rgba(96, 165, 250, 0.18);
    --fxb-winner-bg:      rgba(52, 211, 153, 0.20);
    --fxb-winner-text:    #6ee7b7;

    --fxb-shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.40);
    --fxb-shadow-md:      0 16px 32px rgba(0, 0, 0, 0.50);
    --fxb-shadow-lg:      0 24px 56px rgba(0, 0, 0, 0.60);
  }
}

/* ===========================================================================
   THEME: editorial
   Magazine premium. Serif élégant, palette nuit (bleu marine profond),
   radius très réduits, contraste élevé, espacements généreux.
   =========================================================================== */
[data-fxb-theme="editorial"], .fxb-theme-editorial {
  --fxb-accent:           #1e293b;            /* deep navy */
  --fxb-accent-hover:     #0f172a;
  --fxb-accent-soft:      rgba(30, 41, 59, 0.06);
  --fxb-accent-rgb:       30, 41, 59;
  --fxb-on-accent:        #fafaf7;

  --fxb-surface:          #fafaf7;            /* warm cream */
  --fxb-surface-sunken:   #f0ede3;            /* aged paper */
  --fxb-surface-raised:   #ffffff;

  --fxb-text:             #1a1a1a;            /* near black */
  --fxb-text-secondary:   #525252;
  --fxb-text-tertiary:    #8a8a8a;
  --fxb-text-on-sunken:   #2a2a2a;

  --fxb-border:           rgba(0, 0, 0, 0.10);
  --fxb-border-strong:    rgba(0, 0, 0, 0.20);
  --fxb-border-focus:     #1e293b;

  --fxb-success:          #166534;
  --fxb-success-soft:     rgba(22, 101, 52, 0.07);
  --fxb-warning:          #854d0e;
  --fxb-warning-soft:     rgba(133, 77, 14, 0.07);
  --fxb-error:            #991b1b;
  --fxb-error-soft:       rgba(153, 27, 27, 0.07);
  --fxb-info:             #1e3a8a;
  --fxb-info-soft:        rgba(30, 58, 138, 0.07);

  --fxb-winner-bg:        rgba(22, 101, 52, 0.10);
  --fxb-winner-text:      #14532d;
  --fxb-winner-border:    #166534;

  --fxb-font-display:     "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fxb-font-body:        Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;

  --fxb-text-md:          1.0625rem;
  --fxb-text-lg:          1.375rem;
  --fxb-text-xl:          1.75rem;
  --fxb-text-2xl:         2.125rem;
  --fxb-text-3xl:         2.875rem;
  --fxb-tracking-tight:   -0.02em;
  --fxb-leading-snug:     1.5;
  --fxb-leading-normal:   1.7;

  --fxb-radius-sm:        0;
  --fxb-radius-md:        2px;
  --fxb-radius-lg:        2px;

  --fxb-shadow-xs:        none;
  --fxb-shadow-sm:        0 1px 0 rgba(0, 0, 0, 0.06);
  --fxb-shadow-md:        0 2px 0 rgba(0, 0, 0, 0.08);
  --fxb-shadow-lg:        0 3px 0 rgba(0, 0, 0, 0.10);
  --fxb-shadow-focus:     0 0 0 2px var(--fxb-accent);

  --fxb-block-gap:        var(--fxb-space-7);
}

@media (prefers-color-scheme: dark) {
  [data-fxb-theme="editorial"], .fxb-theme-editorial {
    --fxb-accent:         #e5e5e5;
    --fxb-accent-hover:   #ffffff;
    --fxb-accent-soft:    rgba(229, 229, 229, 0.08);
    --fxb-accent-rgb:     229, 229, 229;
    --fxb-on-accent:      #0a0a0a;

    --fxb-surface:        #0f0f0f;            /* near black */
    --fxb-surface-sunken: #050505;
    --fxb-surface-raised: #1a1a1a;

    --fxb-text:           #f5f5f0;            /* warm off-white */
    --fxb-text-secondary: #b0b0a8;
    --fxb-text-tertiary:  #707068;
    --fxb-text-on-sunken: #d8d8d2;

    --fxb-border:         rgba(255, 255, 255, 0.12);
    --fxb-border-strong:  rgba(255, 255, 255, 0.22);

    --fxb-winner-bg:      rgba(22, 163, 74, 0.18);
    --fxb-winner-text:    #86efac;
  }
}

/* ===========================================================================
   THEME: sunset
   Chaleureux, food/lifestyle. Terracotta, ocre brûlé, crème,
   gradients chauds, ambiance latine/méditerranéenne.
   =========================================================================== */
[data-fxb-theme="sunset"], .fxb-theme-sunset {
  --fxb-accent:           #c2410c;            /* burnt orange */
  --fxb-accent-hover:     #9a3412;
  --fxb-accent-soft:      rgba(194, 65, 12, 0.10);
  --fxb-accent-rgb:       194, 65, 12;
  --fxb-on-accent:        #fef7ed;

  --fxb-surface:          #fffaf3;            /* warm cream */
  --fxb-surface-sunken:   #fdf2e0;            /* peach mist */
  --fxb-surface-raised:   #ffffff;

  --fxb-text:             #292524;            /* warm dark brown */
  --fxb-text-secondary:   #78716c;
  --fxb-text-tertiary:    #a8a29e;
  --fxb-text-on-sunken:   #44403c;

  --fxb-border:           rgba(194, 65, 12, 0.14);
  --fxb-border-strong:    rgba(194, 65, 12, 0.28);
  --fxb-border-focus:     #c2410c;

  --fxb-success:          #ca8a04;            /* golden olive */
  --fxb-success-soft:     rgba(202, 138, 4, 0.12);
  --fxb-warning:          #ea580c;
  --fxb-warning-soft:     rgba(234, 88, 12, 0.12);
  --fxb-error:            #b91c1c;
  --fxb-error-soft:       rgba(185, 28, 28, 0.10);
  --fxb-info:             #b45309;
  --fxb-info-soft:        rgba(180, 83, 9, 0.10);

  --fxb-winner-bg:        rgba(202, 138, 4, 0.16);
  --fxb-winner-text:      #713f12;
  --fxb-winner-border:    #ca8a04;

  --fxb-font-display:     "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fxb-radius-sm:        4px;
  --fxb-radius-md:        8px;
  --fxb-radius-lg:        16px;

  --fxb-shadow-xs:        0 1px 2px rgba(194, 65, 12, 0.06);
  --fxb-shadow-sm:        0 2px 8px rgba(194, 65, 12, 0.10), 0 1px 2px rgba(194, 65, 12, 0.06);
  --fxb-shadow-md:        0 12px 24px rgba(194, 65, 12, 0.12), 0 4px 8px rgba(194, 65, 12, 0.08);
  --fxb-shadow-lg:        0 20px 48px rgba(194, 65, 12, 0.14), 0 8px 16px rgba(194, 65, 12, 0.10);
  --fxb-shadow-focus:     0 0 0 4px rgba(194, 65, 12, 0.20);
}

@media (prefers-color-scheme: dark) {
  [data-fxb-theme="sunset"], .fxb-theme-sunset {
    --fxb-accent:         #fb923c;
    --fxb-accent-hover:   #fdba74;
    --fxb-accent-soft:    rgba(251, 146, 60, 0.14);
    --fxb-accent-rgb:     251, 146, 60;
    --fxb-on-accent:      #1c1310;

    --fxb-surface:        #1c1310;            /* deep warm brown */
    --fxb-surface-sunken: #130d0a;
    --fxb-surface-raised: #2a1c16;

    --fxb-text:           #fef3e2;
    --fxb-text-secondary: #c7b8a6;
    --fxb-text-tertiary:  #8a7f72;
    --fxb-text-on-sunken: #e7d8c4;

    --fxb-border:         rgba(251, 146, 60, 0.18);
    --fxb-border-strong:  rgba(251, 146, 60, 0.32);

    --fxb-winner-bg:      rgba(250, 204, 21, 0.18);
    --fxb-winner-text:    #fde68a;

    --fxb-shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.40);
    --fxb-shadow-md:      0 16px 32px rgba(0, 0, 0, 0.50);
    --fxb-shadow-lg:      0 24px 56px rgba(0, 0, 0, 0.60);
  }
}

/* ===========================================================================
   THEME: tech
   Brutaliste tech. Mono-space, accents néon (cyan), sombre par défaut,
   grid pattern subtil, contraste maximal.
   =========================================================================== */
[data-fxb-theme="tech"], .fxb-theme-tech {
  --fxb-accent:           #06b6d4;            /* electric cyan */
  --fxb-accent-hover:     #22d3ee;
  --fxb-accent-soft:      rgba(6, 182, 212, 0.14);
  --fxb-accent-rgb:       6, 182, 212;
  --fxb-on-accent:        #042f36;

  /* Tech is dark-first; light mode is the dark scheme inverted */
  --fxb-surface:          #0a0a0a;
  --fxb-surface-sunken:   #050505;
  --fxb-surface-raised:   #151515;

  --fxb-text:             #fafafa;
  --fxb-text-secondary:   #a3a3a3;
  --fxb-text-tertiary:    #525252;
  --fxb-text-on-sunken:   #d4d4d4;

  --fxb-border:           rgba(6, 182, 212, 0.18);
  --fxb-border-strong:    rgba(6, 182, 212, 0.35);
  --fxb-border-focus:     #06b6d4;

  --fxb-success:          #4ade80;
  --fxb-success-soft:     rgba(74, 222, 128, 0.14);
  --fxb-warning:          #facc15;
  --fxb-warning-soft:     rgba(250, 204, 21, 0.14);
  --fxb-error:            #f87171;
  --fxb-error-soft:       rgba(248, 113, 113, 0.14);
  --fxb-info:             #06b6d4;
  --fxb-info-soft:        rgba(6, 182, 212, 0.14);

  --fxb-winner-bg:        rgba(74, 222, 128, 0.18);
  --fxb-winner-text:      #86efac;
  --fxb-winner-border:    #4ade80;

  --fxb-font-display:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fxb-tracking-tight:   0;
  --fxb-tracking-wide:    0.08em;

  --fxb-radius-sm:        2px;
  --fxb-radius-md:        4px;
  --fxb-radius-lg:        6px;

  /* Glowy shadows */
  --fxb-shadow-xs:        none;
  --fxb-shadow-sm:        0 0 0 1px rgba(6, 182, 212, 0.10);
  --fxb-shadow-md:        0 0 20px rgba(6, 182, 212, 0.12), 0 0 0 1px rgba(6, 182, 212, 0.18);
  --fxb-shadow-lg:        0 0 40px rgba(6, 182, 212, 0.18), 0 0 0 1px rgba(6, 182, 212, 0.25);
  --fxb-shadow-focus:     0 0 0 2px var(--fxb-accent), 0 0 16px rgba(6, 182, 212, 0.35);
}

/* Tech — light mode (inverse: ce thème est dark par défaut) */
@media (prefers-color-scheme: light) {
  [data-fxb-theme="tech"], .fxb-theme-tech {
    --fxb-accent:         #0e7490;
    --fxb-accent-hover:   #155e75;
    --fxb-accent-soft:    rgba(14, 116, 144, 0.10);
    --fxb-accent-rgb:     14, 116, 144;
    --fxb-on-accent:      #ffffff;

    --fxb-surface:        #fafafa;
    --fxb-surface-sunken: #f0f0f0;
    --fxb-surface-raised: #ffffff;

    --fxb-text:           #0a0a0a;
    --fxb-text-secondary: #525252;
    --fxb-text-tertiary:  #a3a3a3;
    --fxb-text-on-sunken: #1f1f1f;

    --fxb-border:         rgba(14, 116, 144, 0.15);
    --fxb-border-strong:  rgba(14, 116, 144, 0.30);

    --fxb-shadow-sm:      0 0 0 1px rgba(14, 116, 144, 0.12);
    --fxb-shadow-md:      0 4px 12px rgba(14, 116, 144, 0.10), 0 0 0 1px rgba(14, 116, 144, 0.15);
    --fxb-shadow-lg:      0 12px 32px rgba(14, 116, 144, 0.12), 0 0 0 1px rgba(14, 116, 144, 0.20);
  }
}

/* ===========================================================================
   Reset / base
   =========================================================================== */
[class*="fxb-"] {
  box-sizing: border-box;
}
[class*="fxb-"]::before,
[class*="fxb-"]::after {
  box-sizing: border-box;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  [class*="fxb-"],
  [class*="fxb-"]::before,
  [class*="fxb-"]::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   Shared primitives
   =========================================================================== */

/* Icons */
.fxb-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.fxb-icon svg { width: 100%; height: 100%; display: block; }
.fxb-icon--success { color: var(--fxb-success); }
.fxb-icon--error   { color: var(--fxb-error); }

/* CTA button — minimaliste, focus sur la frappe nette */
.fxb-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fxb-space-2);
  padding: var(--fxb-space-3) var(--fxb-space-5);
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
  text-decoration: none;
  font-family: var(--fxb-font-body);
  font-weight: var(--fxb-weight-semibold);
  font-size: var(--fxb-text-sm);
  letter-spacing: var(--fxb-tracking-normal);
  border: 0;
  border-radius: var(--fxb-radius-md);
  cursor: pointer;
  min-height: 44px;
  transition:
    background var(--fxb-duration-fast) var(--fxb-ease),
    transform var(--fxb-duration-fast) var(--fxb-ease),
    box-shadow var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-cta-button:hover,
.fxb-cta-button:focus-visible {
  background: var(--fxb-accent-hover);
  color: var(--fxb-on-accent);
  text-decoration: none;
}
.fxb-cta-button:focus-visible {
  outline: none;
  box-shadow: var(--fxb-shadow-focus);
}
@media (prefers-reduced-motion: no-preference) {
  .fxb-cta-button:hover { transform: translateY(-1px); }
}
.fxb-cta-button:active { transform: translateY(0); }

.fxb-cta-button--small {
  padding: var(--fxb-space-2) var(--fxb-space-4);
  font-size: var(--fxb-text-xs);
  min-height: 36px;
}
.fxb-cta-button--large {
  padding: var(--fxb-space-4) var(--fxb-space-6);
  font-size: var(--fxb-text-base);
  min-height: 52px;
}
.fxb-cta-button__price {
  display: block;
  margin-top: 2px;
  font-weight: var(--fxb-weight-normal);
  font-size: var(--fxb-text-xs);
  opacity: 0.82;
}

/* Badge — sharp, micro-uppercase */
.fxb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--fxb-space-2);
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
  border-radius: var(--fxb-radius-sm);
  font-size: 11px;
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}
.fxb-badge--floating {
  position: absolute;
  top: calc(-1 * var(--fxb-space-2));
  right: var(--fxb-space-5);
}

/* Empty / error placeholders */
.fxb-block-empty,
.fxb-block-error {
  padding: var(--fxb-space-5);
  background: var(--fxb-surface-sunken);
  border-radius: var(--fxb-radius-md);
  color: var(--fxb-text-tertiary);
  text-align: center;
  font-size: var(--fxb-text-sm);
  font-family: var(--fxb-font-body);
}
.fxb-block-error {
  color: var(--fxb-error);
  background: var(--fxb-error-soft);
}

/* ===========================================================================
   product-card
   =========================================================================== */
.fxb-product-card {
  position: relative;
  padding: var(--fxb-space-6);
  background: var(--fxb-surface-raised);
  border-radius: var(--fxb-radius-lg);
  border: 1px solid var(--fxb-border);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
  color: var(--fxb-text);
  box-shadow: var(--fxb-shadow-xs);
  transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
              transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .fxb-product-card:hover {
    box-shadow: var(--fxb-shadow-md);
    transform: translateY(-2px);
  }
}

.fxb-product-card--highlight {
  border-color: var(--fxb-accent);
  background:
    linear-gradient(var(--fxb-surface-raised), var(--fxb-surface-raised)) padding-box,
    var(--fxb-accent) border-box;
  border-width: 2px;
}

.fxb-product-card--compact {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--fxb-space-4);
  padding: var(--fxb-space-4) var(--fxb-space-5);
}

.fxb-product-card__header {
  display: flex;
  align-items: center;
  gap: var(--fxb-space-4);
  margin-bottom: var(--fxb-space-5);
}
.fxb-product-card__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--fxb-radius-sm);
}
.fxb-product-card--compact .fxb-product-card__logo {
  width: 40px;
  height: 40px;
}

.fxb-product-card__title { flex: 1; min-width: 0; }
.fxb-product-card__name {
  margin: 0;
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-xl);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  line-height: var(--fxb-leading-tight);
  color: var(--fxb-text);
}
.fxb-product-card--compact .fxb-product-card__name { font-size: var(--fxb-text-md); }

.fxb-product-card__tagline {
  margin: 4px 0 0;
  font-size: var(--fxb-text-sm);
  color: var(--fxb-text-secondary);
  line-height: var(--fxb-leading-snug);
}

.fxb-product-card__score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: var(--fxb-space-1) var(--fxb-space-3);
  background: var(--fxb-accent-soft);
  color: var(--fxb-accent);
  border-radius: var(--fxb-radius-md);
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-bold);
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.fxb-product-card__score--large {
  padding: var(--fxb-space-2) var(--fxb-space-4);
  font-size: var(--fxb-text-lg);
}
.fxb-product-card__score--xlarge {
  padding: var(--fxb-space-3) var(--fxb-space-5);
  font-size: var(--fxb-text-3xl);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-product-card__score--small {
  padding: 2px var(--fxb-space-2);
  font-size: var(--fxb-text-sm);
}
.fxb-score-max {
  font-size: 0.65em;
  opacity: 0.6;
  font-weight: var(--fxb-weight-medium);
}

.fxb-product-card__pros {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--fxb-space-5);
}
.fxb-product-card__pros li {
  display: flex;
  align-items: flex-start;
  gap: var(--fxb-space-3);
  padding: var(--fxb-space-2) 0;
  color: var(--fxb-text);
  line-height: var(--fxb-leading-snug);
}
.fxb-product-card__pros li + li {
  border-top: 1px solid var(--fxb-border);
}

.fxb-product-card__note {
  font-style: italic;
  color: var(--fxb-text-secondary);
  margin: 0 0 var(--fxb-space-4);
  font-size: var(--fxb-text-sm);
}

.fxb-product-card__hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fxb-space-7);
  align-items: center;
}
.fxb-product-card__screenshot {
  max-width: 100%;
  height: auto;
  border-radius: var(--fxb-radius-md);
  box-shadow: var(--fxb-shadow-md);
}

@media (max-width: 640px) {
  .fxb-product-card { padding: var(--fxb-space-5); }
  .fxb-product-card__hero-content { grid-template-columns: 1fr; }
  .fxb-product-card__header { flex-direction: column; text-align: center; }
  .fxb-product-card--compact {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ===========================================================================
   product-hero
   =========================================================================== */
.fxb-product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fxb-space-7);
  align-items: center;
  padding: var(--fxb-space-7);
  background: var(--fxb-surface-sunken);
  border-radius: var(--fxb-radius-lg);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
  color: var(--fxb-text);
}
.fxb-product-hero--centered {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.fxb-product-hero__logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: var(--fxb-space-4);
}
.fxb-product-hero__name {
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-3xl);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  line-height: var(--fxb-leading-tight);
  margin: 0 0 var(--fxb-space-3);
  color: var(--fxb-text);
}
.fxb-product-hero__tagline {
  font-size: var(--fxb-text-md);
  color: var(--fxb-text-secondary);
  margin: 0 0 var(--fxb-space-5);
  line-height: var(--fxb-leading-normal);
  max-width: 48ch;
}
.fxb-product-hero__score {
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-2xl);
  font-weight: var(--fxb-weight-bold);
  margin-bottom: var(--fxb-space-5);
  color: var(--fxb-accent);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-product-hero__media img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fxb-radius-md);
  box-shadow: var(--fxb-shadow-lg);
}
@media (max-width: 768px) {
  .fxb-product-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: var(--fxb-space-5);
  }
}

/* ===========================================================================
   product-mini
   =========================================================================== */
.fxb-product-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--fxb-space-2);
  padding: 2px var(--fxb-space-2);
  text-decoration: none;
  color: var(--fxb-accent);
  background: var(--fxb-accent-soft);
  border-radius: var(--fxb-radius-sm);
  font-family: var(--fxb-font-body);
  font-weight: var(--fxb-weight-medium);
  font-size: var(--fxb-text-sm);
  transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-product-mini:hover {
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
  text-decoration: none;
}
.fxb-product-mini__logo {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}
.fxb-product-mini__price {
  color: inherit;
  opacity: 0.75;
  font-weight: var(--fxb-weight-normal);
  font-size: 0.92em;
}

/* ===========================================================================
   comparison-table
   =========================================================================== */
.fxb-comparison-table {
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
  color: var(--fxb-text);
}
.fxb-comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fxb-surface-raised);
  border-radius: var(--fxb-radius-md);
  overflow: hidden;
  border: 1px solid var(--fxb-border);
}
.fxb-comparison-table .fxb-cell {
  padding: var(--fxb-space-4) var(--fxb-space-4);
  border-bottom: 1px solid var(--fxb-border);
  text-align: center;
  vertical-align: middle;
  font-size: var(--fxb-text-sm);
}
.fxb-comparison-table tr:last-child .fxb-cell { border-bottom: 0; }

.fxb-comparison-table .fxb-cell--header {
  background: var(--fxb-surface-sunken);
  color: var(--fxb-text-on-sunken);
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-semibold);
  text-align: center;
  font-size: var(--fxb-text-md);
  letter-spacing: var(--fxb-tracking-tight);
  padding-block: var(--fxb-space-5);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fxb-comparison-table .fxb-cell--label {
  background: var(--fxb-surface-sunken);
  color: var(--fxb-text-secondary);
  font-weight: var(--fxb-weight-medium);
  text-align: left;
  font-size: var(--fxb-text-sm);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-comparison-table .fxb-cell--winner {
  background: var(--fxb-winner-bg);
  color: var(--fxb-winner-text);
  font-weight: var(--fxb-weight-semibold);
  position: relative;
}
.fxb-comparison-table .fxb-cell--winner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid var(--fxb-winner-border);
  pointer-events: none;
}

/* Zebra stripes on rows */
.fxb-comparison-table tbody tr:nth-child(even) .fxb-cell:not(.fxb-cell--label):not(.fxb-cell--winner) {
  background: rgba(0, 0, 0, 0.012);
}
@media (prefers-color-scheme: dark) {
  .fxb-comparison-table tbody tr:nth-child(even) .fxb-cell:not(.fxb-cell--label):not(.fxb-cell--winner) {
    background: rgba(255, 255, 255, 0.025);
  }
}

.fxb-comparison-table__logo {
  display: block;
  margin: 0 auto var(--fxb-space-3);
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.fxb-comparison-table__name {
  display: block;
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-bold);
  color: var(--fxb-text);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-cell__unit {
  display: block;
  font-size: var(--fxb-text-xs);
  font-weight: var(--fxb-weight-normal);
  color: var(--fxb-text-tertiary);
  margin-top: 2px;
}

.fxb-comparison-table--layout-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--fxb-radius-md);
}
.fxb-comparison-table--layout-scroll .fxb-comparison-table__table { min-width: 600px; }

@media (max-width: 640px) {
  .fxb-comparison-table--layout-cards .fxb-comparison-table__table {
    display: block;
    border: 0;
    background: transparent;
  }
  .fxb-comparison-table--layout-cards thead { display: none; }
  .fxb-comparison-table--layout-cards tbody { display: block; }
  .fxb-comparison-table--layout-cards tr {
    display: block;
    margin-bottom: var(--fxb-space-4);
    background: var(--fxb-surface-raised);
    border: 1px solid var(--fxb-border);
    border-radius: var(--fxb-radius-md);
    overflow: hidden;
  }
  .fxb-comparison-table--layout-cards td,
  .fxb-comparison-table--layout-cards th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--fxb-space-4);
    text-align: right;
  }
  .fxb-comparison-table--layout-cards .fxb-cell--label {
    text-align: left;
    flex: 0 0 auto;
  }
}

/* ===========================================================================
   comparison-cards
   =========================================================================== */
.fxb-comparison-cards {
  display: grid;
  gap: var(--fxb-space-5);
  grid-template-columns: repeat(var(--fxb-cards-cols, 3), 1fr);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
}
.fxb-comparison-cards--2 { --fxb-cards-cols: 2; }
.fxb-comparison-cards--3 { --fxb-cards-cols: 3; }
.fxb-comparison-cards--4 { --fxb-cards-cols: 4; }

.fxb-comparison-cards__item {
  display: flex;
  flex-direction: column;
  gap: var(--fxb-space-4);
  padding: var(--fxb-space-5);
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
  border-radius: var(--fxb-radius-lg);
  box-shadow: var(--fxb-shadow-xs);
  transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
              transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .fxb-comparison-cards__item:hover {
    box-shadow: var(--fxb-shadow-md);
    transform: translateY(-2px);
  }
}
.fxb-comparison-cards__header { text-align: center; }
.fxb-comparison-cards__logo {
  display: block;
  margin: 0 auto var(--fxb-space-3);
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.fxb-comparison-cards__name {
  margin: 0 0 var(--fxb-space-2);
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-lg);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-comparison-cards__score {
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-xl);
  color: var(--fxb-accent);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-comparison-cards__criteria { margin: 0; }
.fxb-comparison-cards__criterion {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fxb-space-3);
  padding: var(--fxb-space-3) 0;
  border-bottom: 1px solid var(--fxb-border);
  font-size: var(--fxb-text-sm);
}
.fxb-comparison-cards__criterion:last-child { border-bottom: 0; }
.fxb-comparison-cards__criterion dt {
  color: var(--fxb-text-secondary);
  font-weight: var(--fxb-weight-medium);
}
.fxb-comparison-cards__criterion dd {
  margin: 0;
  color: var(--fxb-text);
  font-weight: var(--fxb-weight-semibold);
  font-feature-settings: "tnum";
}

@media (max-width: 768px) {
  .fxb-comparison-cards { grid-template-columns: 1fr; }
}

/* ===========================================================================
   pros-cons
   =========================================================================== */
.fxb-pros-cons {
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
}
.fxb-pros-cons--two-columns,
.fxb-pros-cons--inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fxb-space-5);
}
.fxb-pros-cons--stacked { display: flex; flex-direction: column; gap: var(--fxb-space-4); }

.fxb-pros-cons__column {
  padding: var(--fxb-space-5);
  border-radius: var(--fxb-radius-md);
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
  position: relative;
  overflow: hidden;
}
.fxb-pros-cons__column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.fxb-pros-cons__column--pros { background: var(--fxb-success-soft); }
.fxb-pros-cons__column--pros::before { background: var(--fxb-success); }
.fxb-pros-cons__column--cons { background: var(--fxb-error-soft); }
.fxb-pros-cons__column--cons::before { background: var(--fxb-error); }

.fxb-pros-cons__heading {
  margin: 0 0 var(--fxb-space-3);
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-md);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-pros-cons__column--pros .fxb-pros-cons__heading { color: var(--fxb-success); }
.fxb-pros-cons__column--cons .fxb-pros-cons__heading { color: var(--fxb-error); }

.fxb-pros-cons__list { list-style: none; padding: 0; margin: 0; }
.fxb-pros-cons__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--fxb-space-3);
  padding: var(--fxb-space-2) 0;
  color: var(--fxb-text);
  line-height: var(--fxb-leading-snug);
  font-size: var(--fxb-text-sm);
}

@media (max-width: 640px) {
  .fxb-pros-cons--two-columns,
  .fxb-pros-cons--inline { grid-template-columns: 1fr; }
}

/* ===========================================================================
   key-points
   =========================================================================== */
.fxb-key-points {
  display: grid;
  gap: var(--fxb-space-5);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
}
.fxb-key-points--cols-1 { grid-template-columns: 1fr; }
.fxb-key-points--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fxb-key-points--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fxb-key-points--cols-4 { grid-template-columns: repeat(4, 1fr); }

.fxb-key-points__item {
  display: flex;
  gap: var(--fxb-space-4);
}
.fxb-key-points--cards .fxb-key-points__item {
  padding: var(--fxb-space-5);
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
  border-radius: var(--fxb-radius-lg);
  box-shadow: var(--fxb-shadow-xs);
  flex-direction: column;
  transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
              transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .fxb-key-points--cards .fxb-key-points__item:hover {
    box-shadow: var(--fxb-shadow-md);
    transform: translateY(-2px);
  }
}

.fxb-key-points__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
  border-radius: var(--fxb-radius-pill);
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-bold);
  font-size: var(--fxb-text-base);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-key-points__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--fxb-accent-soft);
  color: var(--fxb-accent);
  border-radius: var(--fxb-radius-pill);
  font-size: var(--fxb-text-md);
}
.fxb-key-points__title {
  margin: 0 0 var(--fxb-space-2);
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-md);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-key-points__content {
  color: var(--fxb-text-secondary);
  font-size: var(--fxb-text-sm);
  line-height: var(--fxb-leading-normal);
}
.fxb-key-points__content > *:first-child { margin-top: 0; }
.fxb-key-points__content > *:last-child  { margin-bottom: 0; }

@media (max-width: 768px) {
  .fxb-key-points--cols-3,
  .fxb-key-points--cols-4 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   verdict-box
   =========================================================================== */
.fxb-verdict-box {
  padding: var(--fxb-space-7);
  border-radius: var(--fxb-radius-lg);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
}
.fxb-verdict-box--highlighted {
  background: var(--fxb-surface-raised);
  border: 2px solid var(--fxb-accent);
  position: relative;
}
.fxb-verdict-box--subtle {
  background: var(--fxb-surface-sunken);
}
.fxb-verdict-box--gradient {
  background:
    linear-gradient(135deg, var(--fxb-accent) 0%, var(--fxb-accent-hover) 100%);
  color: var(--fxb-on-accent);
  border: 0;
}
.fxb-verdict-box--gradient .fxb-verdict-box__title,
.fxb-verdict-box--gradient .fxb-verdict-box__score,
.fxb-verdict-box--gradient .fxb-verdict-box__hint {
  color: var(--fxb-on-accent);
}
.fxb-verdict-box--gradient .fxb-verdict-box__hint { opacity: 0.85; }

.fxb-verdict-box__header {
  display: flex;
  gap: var(--fxb-space-4);
  align-items: center;
  margin-bottom: var(--fxb-space-4);
  flex-wrap: wrap;
}
.fxb-verdict-box__title {
  margin: 0;
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-xl);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-verdict-box__body {
  display: flex;
  gap: var(--fxb-space-5);
  align-items: flex-start;
}
.fxb-verdict-box__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--fxb-radius-sm);
}
.fxb-verdict-box__content { flex: 1; }
.fxb-verdict-box__score {
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-2xl);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  margin-bottom: var(--fxb-space-3);
  color: var(--fxb-accent);
}
.fxb-verdict-box__text {
  margin: 0 0 var(--fxb-space-4);
  line-height: var(--fxb-leading-normal);
}
.fxb-verdict-box__hint {
  margin: 0 0 var(--fxb-space-4);
  color: var(--fxb-text-secondary);
  font-size: var(--fxb-text-sm);
}
@media (max-width: 640px) {
  .fxb-verdict-box { padding: var(--fxb-space-5); }
  .fxb-verdict-box__body { flex-direction: column; align-items: center; text-align: center; }
}

/* ===========================================================================
   affiliate-cta
   =========================================================================== */
.fxb-affiliate-cta {
  margin-block: var(--fxb-space-5);
  font-family: var(--fxb-font-body);
}
.fxb-affiliate-cta--align-center { text-align: center; }
.fxb-affiliate-cta--align-right  { text-align: right; }
.fxb-affiliate-cta__guarantee {
  font-size: var(--fxb-text-xs);
  color: var(--fxb-text-tertiary);
  margin: var(--fxb-space-2) 0 0;
}

.fxb-affiliate-cta--banner {
  display: flex;
  gap: var(--fxb-space-4);
  align-items: center;
  padding: var(--fxb-space-4) var(--fxb-space-5);
  background: var(--fxb-surface-sunken);
  border-radius: var(--fxb-radius-md);
  border: 1px solid var(--fxb-border);
}
.fxb-affiliate-cta--banner .fxb-affiliate-cta__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fxb-affiliate-cta__name {
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-md);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-affiliate-cta__tagline {
  font-size: var(--fxb-text-sm);
  color: var(--fxb-text-secondary);
}
.fxb-affiliate-cta__price {
  font-weight: var(--fxb-weight-bold);
  color: var(--fxb-accent);
  font-feature-settings: "tnum";
}

.fxb-affiliate-cta--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--fxb-space-1);
  padding: 2px var(--fxb-space-2);
  background: var(--fxb-accent-soft);
  color: var(--fxb-accent);
  border-radius: var(--fxb-radius-sm);
  text-decoration: none;
  font-weight: var(--fxb-weight-semibold);
  font-size: var(--fxb-text-sm);
  transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-affiliate-cta--inline:hover {
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
}

.fxb-affiliate-cta--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fxb-space-3);
  padding: var(--fxb-space-5);
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
  border-radius: var(--fxb-radius-lg);
  max-width: 280px;
  box-shadow: var(--fxb-shadow-xs);
}

@media (max-width: 640px) {
  .fxb-affiliate-cta--banner {
    flex-direction: column;
    text-align: center;
  }
}

/* ===========================================================================
   faq
   =========================================================================== */
.fxb-faq {
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
}
.fxb-faq__item {
  border-bottom: 1px solid var(--fxb-border);
  background: transparent;
  transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__item:first-child { border-top: 1px solid var(--fxb-border); }
.fxb-faq__item[open] {
  background: var(--fxb-surface-sunken);
}

.fxb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fxb-space-4);
  padding: var(--fxb-space-5);
  cursor: pointer;
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-semibold);
  font-size: var(--fxb-text-md);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
  margin: 0;
  list-style: none;
  user-select: none;
  transition: color var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__question::-webkit-details-marker,
.fxb-faq__question::marker { display: none; content: ""; }
.fxb-faq__question:hover { color: var(--fxb-accent); }
.fxb-faq__question:focus-visible {
  outline: none;
  box-shadow: var(--fxb-shadow-focus);
  border-radius: var(--fxb-radius-sm);
}

/* La question peut être rendue comme un titre (h2–h5) pour la structure SEO.
   On neutralise les styles de titre par défaut du thème afin de conserver
   l'apparence du bloc, quelle que soit la balise choisie. */
.fxb-faq__question-text {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
h2.fxb-faq__question,
h3.fxb-faq__question,
h4.fxb-faq__question,
h5.fxb-faq__question {
  margin: 0;
  font-family: var(--fxb-font-display);
  font-weight: var(--fxb-weight-semibold);
  font-size: var(--fxb-text-md);
}

.fxb-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--fxb-text-secondary);
  transition: transform var(--fxb-duration-base) var(--fxb-ease),
              color var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__item[open] .fxb-faq__icon {
  transform: rotate(180deg);
  color: var(--fxb-accent);
}

.fxb-faq__answer {
  padding: 0 var(--fxb-space-5) var(--fxb-space-5);
  color: var(--fxb-text-secondary);
  line-height: var(--fxb-leading-normal);
}
.fxb-faq__answer > *:last-child { margin-bottom: 0; }

.fxb-faq--flat .fxb-faq__question { cursor: default; }
.fxb-faq--flat .fxb-faq__question:hover { color: var(--fxb-text); }
.fxb-faq--flat .fxb-faq__icon { display: none; }

.fxb-faq__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--fxb-space-2);
  background: var(--fxb-accent-soft);
  color: var(--fxb-accent);
  border-radius: var(--fxb-radius-sm);
  font-size: var(--fxb-text-xs);
  font-weight: var(--fxb-weight-bold);
  margin-right: var(--fxb-space-3);
  font-feature-settings: "tnum";
}

/* ===========================================================================
   expert-tip
   =========================================================================== */
.fxb-expert-tip {
  display: flex;
  gap: var(--fxb-space-4);
  padding: var(--fxb-space-5);
  background: var(--fxb-info-soft);
  color: var(--fxb-text);
  border-radius: var(--fxb-radius-md);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body);
  position: relative;
  overflow: hidden;
}
.fxb-expert-tip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fxb-info);
}
.fxb-expert-tip--tip {
  background: var(--fxb-success-soft);
}
.fxb-expert-tip--tip::before { background: var(--fxb-success); }
.fxb-expert-tip--warning {
  background: var(--fxb-warning-soft);
}
.fxb-expert-tip--warning::before { background: var(--fxb-warning); }
.fxb-expert-tip--critical {
  background: var(--fxb-error-soft);
}
.fxb-expert-tip--critical::before { background: var(--fxb-error); }

.fxb-expert-tip__icon {
  font-size: var(--fxb-text-xl);
  flex-shrink: 0;
  color: var(--fxb-info);
  line-height: 1;
}
.fxb-expert-tip--tip      .fxb-expert-tip__icon { color: var(--fxb-success); }
.fxb-expert-tip--warning  .fxb-expert-tip__icon { color: var(--fxb-warning); }
.fxb-expert-tip--critical .fxb-expert-tip__icon { color: var(--fxb-error); }

.fxb-expert-tip__body { flex: 1; min-width: 0; }
.fxb-expert-tip__title {
  display: block;
  margin-bottom: var(--fxb-space-2);
  font-family: var(--fxb-font-display);
  font-size: var(--fxb-text-md);
  font-weight: var(--fxb-weight-bold);
  letter-spacing: var(--fxb-tracking-tight);
  color: var(--fxb-text);
}
.fxb-expert-tip__content {
  color: inherit;
  line-height: var(--fxb-leading-normal);
  font-size: var(--fxb-text-sm);
}
.fxb-expert-tip__content > *:first-child { margin-top: 0; }
.fxb-expert-tip__content > *:last-child  { margin-bottom: 0; }

/* ===========================================================================
   Print
   =========================================================================== */
@media print {
  .fxb-cta-button,
  .fxb-affiliate-cta {
    display: none !important;
  }
  .fxb-product-card,
  .fxb-comparison-cards__item,
  .fxb-product-hero,
  .fxb-verdict-box {
    box-shadow: none !important;
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
  .fxb-comparison-table .fxb-cell--winner {
    background: transparent !important;
    border: 2px solid #000 !important;
  }
  .fxb-faq__item[open] { background: transparent !important; }
}