/*!
 * Fox Blocks — Front-end styles: CORE bundle
 * Toujours chargé (v1.46.0). Contient les jetons du thème "minimal"
 * (valeurs par défaut de :root, utilisées par tous les composants via
 * var(--fxb-...)) et l'intégralité du CSS structurel des blocs.
 * Les 9 thèmes alternatifs (nature, vibrant, editorial, sunset, tech,
 * midnight, carbon, obsidian, aurora) vivent chacun dans leur propre
 * fichier assets/css/themes/fxb-theme-<nom>.css, chargé en plus de
 * celui-ci UNIQUEMENT quand ce thème est actif (voir Block_Asset_Loader).
 */

/*!
 * 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;
  /* A11Y (FOX-WOR-1.53.1-2): #9ca3af was 2.54:1 on white; #6b7280 = 4.83:1. */
  --fxb-text-tertiary:    #6b7280;
  --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 — */
  /* A11Y: #16a34a was 3.30:1 on white as text (pros heading); #15803d = 5.02:1. */
  --fxb-success:          #15803d;
  --fxb-success-soft:     rgba(22, 163, 74, 0.08);
  /* A11Y: #ca8a04 was 2.94:1 on white as text; #a16207 = 4.92:1. */
  --fxb-warning:          #a16207;
  --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) {
  body.fxb-auto-dark {
    --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;
    /* A11Y: #71717a was 4.10:1 on #0a0a0a; #8b8b94 passes on both dark surfaces. */
    --fxb-text-tertiary:  #8b8b94;
    --fxb-success:        #16a34a;
    --fxb-warning:        #ca8a04;
    /* A11Y: #dc2626 was 4.10:1 on #0a0a0a. */
    --fxb-error:          #f87171;
    --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;
  }
}


/* ===========================================================================
   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, inherit);
  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: 12px;
  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, inherit);
}
.fxb-block-error {
  color: var(--fxb-error);
  background: var(--fxb-error-soft);
}

/* Notice « données mal formatées » — administration uniquement.
   Alignée à gauche (elle se lit, contrairement aux placeholders centrés) et
   bordée de rouge pour être repérable au premier coup d'œil dans l'éditeur. */
.fxb-block-error--malformed {
  display: block;
  text-align: left;
  border: 1px solid var(--fxb-error);
  border-left-width: 4px;
  color: var(--fxb-text);
  background: var(--fxb-error-soft);
  line-height: 1.5;
}
.fxb-block-error__title {
  display: block;
  color: var(--fxb-error);
  font-weight: var(--fxb-weight-bold);
  margin-bottom: 4px;
}
.fxb-block-error__reason { display: block; }
.fxb-block-error__hints {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 0.95em;
}
.fxb-block-error__hints li { margin: 2px 0; }
.fxb-block-error__note {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ===========================================================================
   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, inherit);
  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, inherit);
  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, inherit);
  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: max(12px, 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, inherit);
  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, inherit);
  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, inherit);
  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, inherit);
  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, inherit);
  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, inherit);
  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) {
  body.fxb-auto-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, inherit);
  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; }

/* Colonne des libellés figée pendant le scroll horizontal : les intitulés de
   ligne (et le coin d'en-tête) restent visibles quand on fait défiler les
   colonnes produits sur mobile. Le fond opaque des cellules --label / --header
   masque le contenu qui passe dessous ; l'ombre de droite signale le défilement. */
.fxb-comparison-table--layout-scroll .fxb-comparison-table__table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--fxb-border);
}
/* Le coin haut-gauche cumule sticky vertical (en-tête) et horizontal (libellés)
   et doit passer au-dessus des deux. */
.fxb-comparison-table--layout-scroll .fxb-comparison-table__table thead th:first-child {
  z-index: 3;
}

@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, inherit);
}
.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, inherit);
  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, inherit);
  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, inherit);
}
.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, inherit);
  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, inherit);
}
/* Bloc key-points avec titre : le wrapper porte la marge, la grille repart à 0. */
.fxb-key-points-block { margin-block: var(--fxb-block-gap); }
.fxb-key-points-block .fxb-key-points { margin-block: 0; }
.fxb-key-points__heading {
  font-family: var(--fxb-font-display, inherit);
  font-weight: var(--fxb-weight-bold);
  /* Taille explicite : la balise peut être un div (niveau « Aucun ») ou un hN. */
  font-size: var(--fxb-text-xl, 1.35rem);
  line-height: 1.25;
  color: var(--fxb-text);
  letter-spacing: var(--fxb-tracking-tight);
  margin: 0 0 var(--fxb-space-5);
}
.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, inherit);
  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, inherit);
  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, inherit);
}
.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, inherit);
  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);
}
/* Emplacement d'image manquante — ADMINISTRATION UNIQUEMENT.
   Occupe exactement la place du logo pour que l'aperçu reflète la mise en
   page réelle, et se signale par un cadre pointillé rouge. N'est jamais
   émis sur le site public (garde côté PHP). */
.fxb-media-missing {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px dashed var(--fxb-error);
  background: var(--fxb-error-soft);
  color: var(--fxb-error);
  text-align: center;
  line-height: 1.15;
}
.fxb-media-missing__icon { font-size: 20px; line-height: 1; }
.fxb-media-missing__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Variante compacte : petites vignettes (20-32 px), icône seule. */
.fxb-media-missing--compact { padding: 2px; }
.fxb-media-missing--compact .fxb-media-missing__icon { font-size: 13px; }

/* Image dont l'URL est renseignée mais introuvable (404). Détectée côté
   navigateur, dans l'éditeur uniquement. Nuance d'orange plutôt que de rouge :
   ce n'est pas un champ oublié, c'est un lien à corriger. */
.fxb-media-missing--broken {
  border-color: var(--fxb-warning);
  background: var(--fxb-warning-soft);
  color: var(--fxb-warning);
}

/* Une image cassée (404) sur le SITE : on limite les dégâts en masquant le
   texte alternatif, qui s'afficherait sinon au milieu de la mise en page.
   L'espace reste réservé, et le texte alternatif demeure dans le HTML pour
   les lecteurs d'écran. */
img.fxb-product-card__logo,
img.fxb-product-hero__logo,
img.fxb-product-mini__logo,
img.fxb-verdict-box__logo,
img.fxb-comparison-cards__logo,
img.fxb-comparison-table__logo,
img.fxb-affiliate-cta__logo,
img.fxb-lcard__img,
img.fxb-author__img,
img.fxb-ahead__avatar {
  /* Ciblé sur `img` : le repère « image manquante » reprend ces mêmes classes
     sur un <span> et doit, lui, rester lisible. */
  color: transparent;
  overflow: hidden;
}

/* Le placeholder hérite de la classe du média qu'il remplace, donc de ses
   dimensions. Quelques cibles n'ont pas de taille propre (l'image y est
   dimensionnée par son conteneur) : on la leur donne ici pour que l'aperçu
   reflète la place réelle. */
.fxb-lcard__img.fxb-media-missing {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.fxb-author__img.fxb-media-missing,
.fxb-ahead__avatar.fxb-media-missing { border-radius: 50%; }

.fxb-verdict-box__content { flex: 1; }
.fxb-verdict-box__score {
  font-family: var(--fxb-font-display, inherit);
  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, inherit);
}
.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, inherit);
  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, inherit);
}
.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, inherit);
  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, inherit);
  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, inherit);
  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, inherit);
  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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Bloc Étapes (fox-blocks/steps)
   ───────────────────────────────────────────────────────────────────────── */
.fxb-steps {
  display: grid;
  gap: var(--fxb-space-5);
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body, inherit);
}
.fxb-steps--cols-1 { grid-template-columns: 1fr; }
.fxb-steps--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fxb-steps--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fxb-steps--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 781px) {
  .fxb-steps--cols-2,
  .fxb-steps--cols-3,
  .fxb-steps--cols-4 { grid-template-columns: 1fr; }
}

.fxb-steps__item {
  display: flex;
  gap: var(--fxb-space-4);
  align-items: flex-start;
}
.fxb-steps__num {
  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, inherit);
  font-weight: var(--fxb-weight-bold);
  font-size: var(--fxb-text-base);
  letter-spacing: var(--fxb-tracking-tight);
}
.fxb-steps__body { flex: 1 1 auto; min-width: 0; }
.fxb-steps__title {
  margin: 0 0 var(--fxb-space-2);
  font-family: var(--fxb-font-display, inherit);
  font-weight: var(--fxb-weight-semibold);
  font-size: var(--fxb-text-md);
  line-height: var(--fxb-leading-tight);
  color: inherit;
}
.fxb-steps__content { line-height: var(--fxb-leading-base); }
.fxb-steps__content > :first-child { margin-top: 0; }
.fxb-steps__content > :last-child { margin-bottom: 0; }

/* Variante timeline : trait vertical reliant les étapes (colonne unique). */
.fxb-steps--timeline.fxb-steps--cols-1 .fxb-steps__item {
  position: relative;
  padding-bottom: var(--fxb-space-5);
}
.fxb-steps--timeline.fxb-steps--cols-1 .fxb-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--fxb-border);
}

/* Titre « chapeau » des blocs FAQ et Étapes */
.fxb-faq__heading,
.fxb-steps__heading {
  margin: 0 0 var(--fxb-space-5);
  font-family: var(--fxb-font-display, inherit);
  font-weight: var(--fxb-weight-bold);
  line-height: var(--fxb-leading-tight);
  color: inherit;
}

/* ============================================================
 * criteria-scores — per-criterion bars + global score
 * ============================================================ */
.fxb-scores__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fxb-text);
  margin: 0 0 1rem;
}
.fxb-scores__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Nombre de cartes par ligne forcé (sinon auto-fit ci-dessus). */
.fxb-scores__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fxb-scores__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fxb-scores__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .fxb-scores__grid--cols-3,
  .fxb-scores__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fxb-scores__grid--cols-2,
  .fxb-scores__grid--cols-3,
  .fxb-scores__grid--cols-4 { grid-template-columns: 1fr; }
}
.fxb-scores__product {
  border: 1px solid var(--fxb-border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--fxb-surface);
  /* Le conteneur pose son fond : il doit aussi poser sa couleur de texte,
     sinon le texte hérite de celle du thème WordPress (texte sombre sur
     carte sombre avec un thème Fox sombre). */
  color: var(--fxb-text);
}
.fxb-scores__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.fxb-scores__name {
  font-weight: 700;
  color: var(--fxb-text);
}
.fxb-scores__global {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--fxb-accent);
  color: var(--fxb-on-accent);
  font-size: 1rem;
  line-height: 1;
}
.fxb-scores__global-max { font-size: 0.75rem; opacity: 0.8; }
.fxb-scores__list { list-style: none; margin: 0; padding: 0; }
.fxb-scores__row {
  display: grid;
  grid-template-columns: minmax(90px, 38%) 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.28rem 0;
}
.fxb-scores__label {
  font-size: 0.85rem;
  color: var(--fxb-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.fxb-scores__weight {
  font-size: 0.75rem;
  color: var(--fxb-text-tertiary);
  border: 1px solid var(--fxb-border);
  border-radius: 4px;
  padding: 0 0.25rem;
}
.fxb-scores__bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--fxb-surface-sunken);
  overflow: hidden;
}
.fxb-scores__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fxb-accent);
}
.fxb-scores__note {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fxb-text);
  min-width: 1.6rem;
  text-align: right;
}
.fxb-scores--empty {
  border: 1px dashed var(--fxb-border-strong);
  border-radius: 12px;
  padding: 1rem;
  color: var(--fxb-text-tertiary);
  font-size: 0.9rem;
}

/* criteria scores embedded inside a product widget (card/hero/mini) */
.fxb-product-card__scores {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fxb-border);
}
.fxb-product-card__scores .fxb-scores__row {
  grid-template-columns: minmax(80px, 40%) 1fr auto;
  padding: 0.22rem 0;
}
.fxb-product-mini .fxb-product-card__scores {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* ============================================================
 * comparison-table — INLINE mode (typed rows + global bar)
 * ============================================================ */
.fxb-ctable__title { font-size: 1.15rem; font-weight: 700; color: var(--fxb-text); margin: 0 0 1rem; }
.fxb-ctable__scroll { overflow-x: auto; }
/* Libellés de ligne figés pendant le scroll horizontal (variante inline du
   tableau). Fond opaque obligatoire pour que les colonnes défilent dessous. */
.fxb-ctable__scroll .fxb-ctable__table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fxb-surface-raised);
  box-shadow: 1px 0 0 var(--fxb-border);
}
.fxb-ctable__scroll .fxb-ctable__table thead th.fxb-ctable__corner {
  z-index: 3;
}
.fxb-ctable__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fxb-ctable__table th, .fxb-ctable__table td {
  padding: 0.6rem 0.7rem; text-align: center; border-bottom: 1px solid var(--fxb-border); vertical-align: middle;
}
.fxb-ctable__table tbody th[scope="row"] {
  text-align: left; font-weight: 600; color: var(--fxb-text-secondary); white-space: nowrap;
}
.fxb-ctable__corner { background: transparent; border-bottom: none; }
.fxb-ctable__col { font-weight: 700; color: var(--fxb-text); }
.fxb-ctable__col.is-highlight { background: var(--fxb-accent-soft); color: var(--fxb-text); border-radius: 8px 8px 0 0; }
.fxb-ctable__pname { color: var(--fxb-text); text-decoration: none; }
a.fxb-ctable__pname:hover { text-decoration: underline; }
.fxb-ctable__row--global td { font-weight: 600; }
.fxb-ctable__bar {
  display: inline-block; vertical-align: middle; width: 64px; height: 7px; border-radius: 999px;
  background: var(--fxb-surface-sunken); overflow: hidden;
}
.fxb-ctable__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--fxb-accent); }
.fxb-ctable__num { font-weight: 600; color: var(--fxb-text); margin-left: 0.35rem; }
.fxb-ctable__yes { color: var(--fxb-success); font-weight: 700; }
.fxb-ctable__no { color: var(--fxb-text-tertiary); }
.fxb-ctable__table td.is-winner { background: var(--fxb-accent-soft); color: var(--fxb-text); font-weight: 700; }

/* comparison-cards — inline extras (highlight, tagline, pros) */
.fxb-comparison-cards__item.is-highlight {
  border-color: var(--fxb-accent);
  box-shadow: 0 0 0 2px var(--fxb-accent-soft);
}
.fxb-comparison-cards__tagline {
  font-size: 0.88rem; color: var(--fxb-text-secondary); margin: 0.25rem 0 0.75rem;
}
.fxb-comparison-cards__pros {
  list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem;
}
.fxb-comparison-cards__pros li {
  display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.86rem; color: var(--fxb-text);
}

/* Accessibilité : texte réservé aux lecteurs d'écran (visually hidden). */
.fxb-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Liens d'affiliation obfusqués : se comportent visuellement comme des liens. */
.fxb-obf-link { cursor: pointer; }
.fxb-obf-link:focus-visible { outline: 2px solid var(--fxb-accent, #1e73be); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────────────────
   Liens internes (link-cards) — maillage interne
   ─────────────────────────────────────────────────────────────────────────── */
.fxb-link-cards { margin: 1.5rem 0; }
.fxb-link-cards__heading {
    font-family: var(--fxb-font-display, inherit);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--fxb-text, #1a1a1a);
    display: inline-flex;
    align-items: center;
    gap: .4em;
}
a.fxb-link-cards__heading { text-decoration: none; }
a.fxb-link-cards__heading:hover .fxb-link-cards__heading-text { text-decoration: underline; }
.fxb-link-cards__heading--button {
    background: var(--fxb-accent, #1e73be);
    color: var(--fxb-on-accent, #fff);
    padding: .5em 1em;
    border-radius: var(--fxb-radius, 8px);
}
.fxb-link-cards__heading-arrow { transition: transform .15s ease; }
a.fxb-link-cards__heading:hover .fxb-link-cards__heading-arrow { transform: translateX(3px); }

.fxb-link-cards__list { list-style: none; margin: 0; padding: 0; }

/* Grid */
.fxb-link-cards--grid .fxb-link-cards__list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--fxb-lc-cols, 3), 1fr);
}
.fxb-link-cards--cols-1 { --fxb-lc-cols: 1; }
.fxb-link-cards--cols-2 { --fxb-lc-cols: 2; }
.fxb-link-cards--cols-3 { --fxb-lc-cols: 3; }
.fxb-link-cards--cols-4 { --fxb-lc-cols: 4; }
/* Tablette : 2 colonnes au maximum — mais jamais PLUS que le nombre de
   colonnes demandé (une seule carte reste sur une seule colonne, sinon on
   recréerait la cellule vide qu'on cherche à éviter). */
@media (max-width: 781px) {
    .fxb-link-cards--grid .fxb-link-cards__list {
        grid-template-columns: repeat(min(2, var(--fxb-lc-cols, 3)), 1fr);
    }
}
@media (max-width: 480px) { .fxb-link-cards--grid .fxb-link-cards__list { grid-template-columns: 1fr; } }

.fxb-lcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fxb-surface, #fff);
    color: var(--fxb-text, #1a1a1a);
    border: 1px solid var(--fxb-border, #e5e5e5);
    border-radius: var(--fxb-radius, 8px);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.fxb-lcard:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
    border-color: var(--fxb-accent, #1e73be);
}
.fxb-lcard__media-link { display: block; text-decoration: none; }
.fxb-lcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fxb-surface-sunken, #f3f4f6); }
.fxb-lcard__media .fxb-lcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fxb-lcard__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem 1rem; }
.fxb-lcard__cat {
    align-self: flex-start;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--fxb-accent, #1e73be);
    background: color-mix(in srgb, var(--fxb-accent, #1e73be) 12%, transparent);
    padding: .15em .5em; border-radius: 999px;
}
.fxb-lcard__title-link { text-decoration: none; }
.fxb-lcard__title-link:hover .fxb-lcard__title { color: var(--fxb-accent, #1e73be); }
.fxb-lcard__title { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--fxb-text, #1a1a1a); display: block; }
.fxb-lcard__excerpt { font-size: .875rem; color: var(--fxb-text-secondary, #555); line-height: 1.5; }
.fxb-lcard__excerpt a { color: var(--fxb-accent, #1e73be); }
.fxb-lcard__meta { display: flex; gap: .75rem; font-size: .75rem; color: var(--fxb-text-secondary, #777); margin-top: .15rem; }

/* List (horizontal rows) — image beside text */
.fxb-link-cards--list .fxb-link-cards__list { display: flex; flex-direction: column; gap: .75rem; }
.fxb-lcard--row { flex-direction: row; align-items: stretch; }
.fxb-lcard--row .fxb-lcard__media-link,
.fxb-lcard--row .fxb-lcard__media { flex: 0 0 200px; }
.fxb-lcard--row .fxb-lcard__media { aspect-ratio: 4 / 3; height: 100%; }
.fxb-lcard--row .fxb-lcard__body { flex: 1; justify-content: center; }
@media (max-width: 480px) {
    .fxb-lcard--row { flex-direction: column; }
    .fxb-lcard--row .fxb-lcard__media-link,
    .fxb-lcard--row .fxb-lcard__media { flex-basis: auto; aspect-ratio: 16 / 9; }
}

/* Simple (text links) */
.fxb-link-simple__list { display: flex; flex-direction: column; gap: .4rem; }
.fxb-link-simple {
    display: inline-flex; align-items: center; gap: .4em;
    text-decoration: none; color: var(--fxb-accent, #1e73be); font-weight: 600;
}
.fxb-link-simple:hover .fxb-link-simple__text { text-decoration: underline; }
.fxb-link-simple--button {
    background: var(--fxb-accent, #1e73be); color: var(--fxb-on-accent, #fff);
    padding: .4em .9em; border-radius: var(--fxb-radius, 8px);
}
.fxb-link-simple__arrow { transition: transform .15s ease; }
.fxb-link-simple:hover .fxb-link-simple__arrow { transform: translateX(3px); }

/* link-cards : ratio d'image */
.fxb-link-cards--ratio-16-9 .fxb-lcard__media { aspect-ratio: 16 / 9; }
.fxb-link-cards--ratio-4-3  .fxb-lcard__media { aspect-ratio: 4 / 3; }
.fxb-link-cards--ratio-3-2  .fxb-lcard__media { aspect-ratio: 3 / 2; }
.fxb-link-cards--ratio-1-1  .fxb-lcard__media { aspect-ratio: 1 / 1; }
.fxb-link-cards--ratio-auto .fxb-lcard__media { aspect-ratio: auto; }

/* link-cards : position image (liste) */
/* link-cards : position image (liste) — image à gauche (défaut) ou à droite */
.fxb-link-cards--list.fxb-link-cards--img-right .fxb-lcard--row { flex-direction: row-reverse; }
@media (max-width: 480px) {
    .fxb-link-cards--list.fxb-link-cards--img-right .fxb-lcard--row { flex-direction: column; }
}

/* link-cards : CTA par carte (vrai lien) */
.fxb-lcard__cta {
    display: inline-flex; align-items: center; gap: .35em;
    margin-top: .5rem; font-weight: 600; font-size: .9rem;
    color: var(--fxb-accent, #1e73be); text-decoration: none;
}
.fxb-lcard__cta--button {
    align-self: flex-start;
    background: var(--fxb-accent, #1e73be); color: var(--fxb-on-accent, #fff);
    padding: .4em .9em; border-radius: var(--fxb-radius, 8px);
}
.fxb-lcard__cta--link:hover .fxb-lcard__cta-text,
.fxb-lcard__cta--arrow:hover .fxb-lcard__cta-text { text-decoration: underline; }
.fxb-lcard__cta-arrow { transition: transform .15s ease; }
.fxb-lcard__cta:hover .fxb-lcard__cta-arrow { transform: translateX(3px); }

/* ───────────────────────────────────────────────────────────────────────────
   Notes par critère — vue radar (SVG inline)
   ─────────────────────────────────────────────────────────────────────────── */
.fxb-radar { width: 100%; max-width: 320px; margin: .5rem auto 0; }
.fxb-radar__svg { width: 100%; height: auto; display: block; overflow: visible; }
.fxb-radar__ring {
    fill: none;
    stroke: var(--fxb-border, #e5e5e5);
    stroke-width: 1;
}
.fxb-radar__spoke {
    stroke: var(--fxb-border, #e5e5e5);
    stroke-width: 1;
}
.fxb-radar__area {
    fill: color-mix(in srgb, var(--fxb-accent, #1e73be) 22%, transparent);
    stroke: var(--fxb-accent, #1e73be);
    stroke-width: 2;
    stroke-linejoin: round;
}
.fxb-radar__dot {
    fill: var(--fxb-accent, #1e73be);
    stroke: var(--fxb-surface, #fff);
    stroke-width: 1.5;
}
.fxb-radar__label {
    fill: var(--fxb-text-secondary, #555);
    font-size: 12px;
    font-family: var(--fxb-font-body, inherit);
}
/* En grille multi-produits, on resserre un peu les radars. */
.fxb-scores--radar .fxb-scores__grid { gap: 1.25rem; }
.fxb-scores--radar .fxb-scores__product { text-align: center; }

/* ───────────────────────────────────────────────────────────────────────────
   Lien conditionnel (smart-link)
   ─────────────────────────────────────────────────────────────────────────── */
/* A published conditional link is an ordinary link of the theme: no colour
   and no decoration of its own (author's rule, 20/10/2026). Only the button
   style keeps the accent; only a missing target, for an editor, turns red. */
.fxb-smartlink {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-weight: 600;
}
.fxb-smartlink--button {
    background: var(--fxb-accent, #1e73be);
    color: var(--fxb-on-accent, #fff);
    padding: .45em 1em;
    border-radius: var(--fxb-radius, 8px);
}
.fxb-smartlink__arrow { transition: transform .15s ease; }
.fxb-smartlink--arrow:hover .fxb-smartlink__arrow,
.fxb-smartlink--button:hover .fxb-smartlink__arrow { transform: translateX(3px); }

/* État « en attente » : texte simple, non cliquable, légèrement atténué. */
.fxb-smartlink--pending {
    color: var(--fxb-text-secondary, #6b7280);
    font-weight: 600;
    cursor: default;
    text-decoration: none;
}
.fxb-smartlink--pending.fxb-smartlink--button {
    background: var(--fxb-surface-sunken, #f1f1f1);
    color: var(--fxb-text-secondary, #6b7280);
}
.fxb-smartlink--pending .fxb-smartlink__arrow { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   Lien conditionnel inline (format) + couleur Orange Fox
   ─────────────────────────────────────────────────────────────────────────── */
/* Conditional link (FOX-WOR-1.53.1-2, author's rule of 20/10/2026): a
   published conditional link takes the theme's link colour and decoration —
   no Fox colour at all. The only other colour is the red of a missing target,
   shown to editors only (`.fxb-smartlink--missing`, editor preview and
   logged-in front). #b32d2e = 6.30:1 on white. */
:root { --fxb-missing-red: #b32d2e; }

/* En attente (front public) : texte simple neutre, non cliquable. */
.fxb-smartlink--inline.fxb-smartlink--pending,
span.fxb-smartlink--pending { color: inherit; text-decoration: none; cursor: default; }

/* En attente DANS l'aperçu éditeur OU pour un éditeur connecté sur le front :
   rouge + soulignement tireté, pour repérer la cible manquante d'un coup d'œil. */
.fxb-smartlink--missing {
    color: var(--fxb-missing-red, #b32d2e) !important;
    text-decoration: underline dashed var(--fxb-missing-red, #b32d2e);
    text-underline-offset: 2px;
    cursor: help;
}

/* Carte de lien conditionnel en attente. */
.fxb-lcard--pending { opacity: .85; }
.fxb-lcard--pending .fxb-lcard__title { color: inherit; }
.fxb-lcard--missing { outline: 1px dashed var(--fxb-missing-red); outline-offset: 2px; }
.fxb-lcard--missing .fxb-lcard__title { color: var(--fxb-missing-red, #b32d2e); }
/* Carte qui ne sera PAS rendue sur le site (option « masquer si la page
   n'existe pas »). Visible uniquement dans l'aperçu de l'éditeur. */
.fxb-lcard--will-hide { position: relative; opacity: .6; }
.fxb-lcard__hidden-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fxb-missing-red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
}
.fxb-lcard:not(.fxb-lcard--will-hide) .fxb-lcard__hidden-badge { display: none; }
/* Raison d'une carte inactive / masquée (FOX-WOR-1.50.0-1) — éditeurs
   seulement : le visiteur ne reçoit ni la carte ni ce texte. */
.fxb-lcard--will-hide .fxb-lcard__title { text-decoration: line-through; text-decoration-color: var(--fxb-missing-red); }
.fxb-lcard__reason {
  margin: .35rem 0 0;
  padding: .35rem .5rem;
  border-left: 3px solid var(--fxb-missing-red);
  background: rgba(179, 45, 46, .06);
  color: var(--fxb-missing-red);
  font-size: 12px;
  line-height: 1.4;
}
.fxb-lcard__reason code { font-size: 12px; word-break: break-all; }
.fxb-lcard__reason-fix { display: block; margin-top: .2rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Bandeau auteur (author-box)
   ─────────────────────────────────────────────────────────────────────────── */
.fxb-author { margin: 1.5rem 0; }
.fxb-author__heading { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fxb-text-secondary, #666); margin: 0 0 .5rem; }
.fxb-author__inner { display: flex; gap: 1rem; align-items: flex-start; }
.fxb-author__img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fxb-author__body { min-width: 0; }
.fxb-author__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fxb-author__name { font-weight: 700; font-size: 1.05rem; color: var(--fxb-text, #1a1a1a); text-decoration: none; }
a.fxb-author__name:hover { color: var(--fxb-accent, #1e73be); }
.fxb-author__role { font-size: .8rem; color: var(--fxb-accent, #1e73be); font-weight: 600; }
.fxb-author__desc { margin-top: .35rem; color: var(--fxb-text-secondary, #555); line-height: 1.55; font-size: .925rem; }
.fxb-author__links { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin: .5rem 0 0; padding: 0; }
.fxb-author__links a { font-size: .825rem; color: var(--fxb-accent, #1e73be); }

/* card — encadré */
.fxb-author--card .fxb-author__inner {
    background: var(--fxb-surface, #fff);
    border: 1px solid var(--fxb-border, #e5e5e5);
    border-radius: var(--fxb-radius, 8px);
    padding: 1rem 1.15rem;
}

/* banner — bandeau pleine largeur teinté */
.fxb-author--banner .fxb-author__inner {
    background: color-mix(in srgb, var(--fxb-accent, #1e73be) 8%, transparent);
    border-left: 4px solid var(--fxb-accent, #1e73be);
    border-radius: var(--fxb-radius, 8px);
    padding: 1.1rem 1.35rem;
    align-items: center;
}
.fxb-author--banner .fxb-author__img { width: 84px; height: 84px; }

/* compact — petit, inline */
.fxb-author--compact .fxb-author__img { width: 44px; height: 44px; }
.fxb-author--compact .fxb-author__inner { align-items: center; gap: .65rem; }
.fxb-author--compact .fxb-author__desc { display: none; }
.fxb-author--compact .fxb-author__links { margin-top: .2rem; }

/* centered — empilé, centré */
.fxb-author--centered .fxb-author__inner { flex-direction: column; align-items: center; text-align: center; }
.fxb-author--centered .fxb-author__head { justify-content: center; }
.fxb-author--centered .fxb-author__links { justify-content: center; }
.fxb-author--centered .fxb-author__img { width: 88px; height: 88px; }

@media (max-width: 480px) {
    .fxb-author--card .fxb-author__inner,
    .fxb-author--banner .fxb-author__inner { flex-direction: column; }
}

/* ───────────────────────────────────────────────────────────────────────────
   En-tête d'article (article-header)
   ─────────────────────────────────────────────────────────────────────────── */
.fxb-ahead {
    border: 1px solid var(--fxb-border, #e5e5e5);
    border-radius: var(--fxb-radius, 8px);
    background: var(--fxb-surface, #fff);
    padding: .9rem 1.1rem;
    margin: 0 0 1.5rem;
}
.fxb-ahead__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    font-size: .875rem;
    color: var(--fxb-text-secondary, #555);
}
.fxb-ahead__chip { display: inline-flex; align-items: center; gap: .4rem; }
.fxb-ahead__chip a { color: var(--fxb-accent, #1e73be); text-decoration: none; }
.fxb-ahead__ic { width: 16px; height: 16px; color: var(--fxb-accent, #1e73be); flex: 0 0 auto; }
.fxb-ahead__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.fxb-ahead__chip time { font-weight: 600; color: var(--fxb-text, #1a1a1a); }

.fxb-ahead__toc { margin-top: .85rem; border-top: 1px solid var(--fxb-border, #ececec); padding-top: .75rem; }
.fxb-ahead__toc summary {
    cursor: pointer;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fxb-text-secondary, #666);
}
.fxb-ahead__toc-list { list-style: none; margin: .6rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
.fxb-ahead__toc-list li { margin: 0 0 .3rem; break-inside: avoid; }
.fxb-ahead__toc-list a { color: var(--fxb-accent, #1e73be); text-decoration: none; font-size: .9rem; }
.fxb-ahead__toc-list a:hover { text-decoration: underline; }
.fxb-ahead__toc-l3 { padding-left: 1rem; }
.fxb-ahead__toc-l3 a { font-size: .85rem; color: var(--fxb-text-secondary, #666); }
.fxb-ahead__toc-l4 { padding-left: 2rem; }

@media (max-width: 600px) {
    .fxb-ahead__toc-list { columns: 1; }
}

/* ============================================================================
   LEGAL-INFO — mentions légales
   Styles volontairement minimalistes : ce bloc doit se fondre dans une page
   de mentions légales, pas s'en distinguer. La typographie vient du thème.
   ========================================================================= */

.fxb-legal {
  margin-block: var(--fxb-block-gap);
  font-family: var(--fxb-font-body, inherit);
  color: var(--fxb-text);
}

.fxb-legal__title {
  font-family: var(--fxb-font-display, inherit);
  font-weight: var(--fxb-weight-bold);
  font-size: var(--fxb-text-lg, 1.25rem);
  line-height: 1.3;
  color: var(--fxb-text);
  margin: 0 0 var(--fxb-space-4);
}

.fxb-legal dl { margin: 0; }

/* Disposition « liste » : intitulé au-dessus, valeur en dessous. */
.fxb-legal--list dt {
  font-weight: var(--fxb-weight-semibold, 600);
  color: var(--fxb-text-secondary);
  font-size: 0.92em;
}
.fxb-legal--list dd {
  margin: 0 0 var(--fxb-space-3);
  color: var(--fxb-text);
}

/* Disposition « en ligne » : intitulé et valeur sur la même ligne. */
.fxb-legal--inline dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}
.fxb-legal--inline dt {
  font-weight: var(--fxb-weight-semibold, 600);
  color: var(--fxb-text-secondary);
}
.fxb-legal--inline dd { margin: 0; }
@media (max-width: 480px) {
  .fxb-legal--inline dl { grid-template-columns: 1fr; }
  .fxb-legal--inline dd { margin-bottom: var(--fxb-space-3); }
}

/* Sans intitulés : la liste devient un simple empilement. */
.fxb-legal--nolabels dd { margin-left: 0; }

/* Disposition « tableau ». */
.fxb-legal__table {
  width: 100%;
  border-collapse: collapse;
}
.fxb-legal__table th,
.fxb-legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--fxb-space-2) 0;
  border-bottom: 1px solid var(--fxb-border);
}
.fxb-legal__table th {
  font-weight: var(--fxb-weight-semibold, 600);
  color: var(--fxb-text-secondary);
  padding-right: var(--fxb-space-4);
  white-space: nowrap;
}
.fxb-legal__table tr:last-child th,
.fxb-legal__table tr:last-child td { border-bottom: 0; }

.fxb-legal__note {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  color: var(--fxb-text-secondary);
}

/* Valeur protégée : aucun style particulier avant décodage, pour ne pas
   signaler la protection au visiteur. */
.fxb-legal-obf { word-break: break-word; }

/* Mode « reveal » : bouton accessible au clavier. */
.fxb-legal-reveal__btn {
  appearance: none;
  border: 1px solid var(--fxb-border);
  background: var(--fxb-surface-sunken);
  color: var(--fxb-text);
  border-radius: var(--fxb-radius-sm, 6px);
  padding: 2px 10px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.fxb-legal-reveal__btn:hover { border-color: var(--fxb-accent); }
.fxb-legal-reveal__btn:focus-visible {
  outline: 2px solid var(--fxb-accent);
  outline-offset: 2px;
}

/* ============================================================================
   SLOT — emplacement réservé (ADMINISTRATION UNIQUEMENT)
   Ce bloc ne sort jamais sur le site : ces styles ne servent qu'à l'aperçu
   dans l'éditeur.
   ========================================================================= */

.fxb-slot {
  display: block;
  margin-block: var(--fxb-block-gap);
  padding: var(--fxb-space-4);
  border: 2px dashed var(--fxb-border);
  border-radius: var(--fxb-radius-md);
  background: var(--fxb-surface-sunken);
  color: var(--fxb-text-secondary);
  font-family: var(--fxb-font-body, inherit);
  font-size: var(--fxb-text-sm);
}
.fxb-slot--haute { border-color: var(--fxb-warning); }

.fxb-slot__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  color: var(--fxb-text);
}
.fxb-slot__icon { font-size: 1.1em; }
.fxb-slot__kind,
.fxb-slot__prio {
  font-size: 0.8em;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
}
.fxb-slot__prio { color: var(--fxb-warning); border-color: var(--fxb-warning); }

.fxb-slot__note { display: block; color: var(--fxb-text); }
.fxb-slot__foot {
  display: block;
  margin-top: 8px;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Code en attente d'un emplacement réservé (aperçu d'administration). */
.fxb-slot__draftlabel {
  display: block;
  margin-top: 8px;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}
.fxb-slot__draft {
  display: block;
  margin-top: 3px;
  padding: 8px 10px;
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
  border-radius: var(--fxb-radius-sm, 6px);
  font-size: 0.85em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================================
   IMAGE-PROMPT — prompt d'image (ADMINISTRATION UNIQUEMENT)
   Comme l'emplacement réservé, ce bloc ne sort jamais sur le site : ces styles
   ne servent qu'à l'aperçu dans l'éditeur. Bordure tiretée violette — le
   tireté dit « rien ne sera publié tel quel », la teinte distingue « il
   manque une image » de « il manque du contenu ».
   ========================================================================= */

.fxb-imgprompt {
  display: block;
  margin-block: var(--fxb-block-gap);
  padding: var(--fxb-space-4);
  border: 2px dashed #7e57c2;
  border-radius: var(--fxb-radius-md);
  background: var(--fxb-surface-sunken);
  color: var(--fxb-text-secondary);
  font-family: var(--fxb-font-body, inherit);
  font-size: var(--fxb-text-sm);
}
.fxb-imgprompt--haute { border-color: var(--fxb-warning); }

.fxb-imgprompt__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  color: var(--fxb-text);
}
.fxb-imgprompt__icon { font-size: 1.1em; }
.fxb-imgprompt__tag,
.fxb-imgprompt__prio {
  font-size: 0.8em;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fxb-surface-raised);
  border: 1px solid var(--fxb-border);
}
.fxb-imgprompt__prio { color: var(--fxb-warning); border-color: var(--fxb-warning); }

.fxb-imgprompt__prompt { display: block; color: var(--fxb-text); }

.fxb-imgprompt__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 0.85em;
}
.fxb-imgprompt__meta strong { font-weight: 600; }

.fxb-imgprompt__foot {
  display: block;
  margin-top: 8px;
  font-size: 0.8em;
  opacity: 0.7;
}

/* ===========================================================================
   RFX2 (b) — criteria-scores: mention of an editorial criterion
   (FOX-WOR-1.54.0-9). Discreet: tertiary text, small, no box.
   =========================================================================== */
.fxb-scores__editorial {
  font-size: var(--fxb-text-xs);
  font-style: italic;
  color: var(--fxb-text-tertiary);
}
.fxb-scores__editorial-note {
  margin: var(--fxb-space-2) 0 0;
  font-size: var(--fxb-text-xs);
  font-style: italic;
  color: var(--fxb-text-tertiary);
  text-align: center;
}

/* ===========================================================================
   RFX2 (b) — ul.fxb-sheet-data, the values of a catalogue sheet
   (FOX-WOR-1.55.0-1). Printed right after a product-card (and inside the
   static fallback, which stays readable without this CSS). No bullet, one
   line per value, bold label, value in text colour; socle tokens only, so
   every theme and the dark mode follow.
   After a card, the negative top margin pulls the list up under it: card
   margin (block gap) + this margin = --fxb-space-3, whether the two
   margins collapse (normal flow) or not (flex / grid parent). `~`, not `+`:
   the card's Product JSON-LD <script> may sit between the two.
   The class is doubled on purpose (0,2,0): themes style `.entry-content ul`
   (0,1,1) after this file, and their left indent and bottom margin won over
   a plain `ul.fxb-sheet-data` (seen on the static capture, GeneratePress
   rule `margin: 0 0 1.5em 3em`). The markup is fixed by the contract
   (golden fallback), so the weight goes in the selector.
   =========================================================================== */
.fxb-sheet-data.fxb-sheet-data {
  list-style: none;
  margin: 0 0 var(--fxb-block-gap);
  padding: 0;
  font-family: var(--fxb-font-body, inherit);
  font-size: var(--fxb-text-sm);
  line-height: var(--fxb-leading-snug);
  color: var(--fxb-text);
}
.fxb-product-card ~ .fxb-sheet-data.fxb-sheet-data {
  margin-top: calc(var(--fxb-space-3) - var(--fxb-block-gap));
}
.fxb-sheet-data .fxb-sheet-data__item {
  display: block;
  margin: 0;
  padding: var(--fxb-space-2) 0;
  border-bottom: 1px solid var(--fxb-border);
  list-style: none;
}
/* Themes that draw their own bullet with li::before. */
.fxb-sheet-data .fxb-sheet-data__item::before {
  content: none;
}
.fxb-sheet-data .fxb-sheet-data__item:last-child {
  border-bottom: 0;
}
.fxb-sheet-data .fxb-sheet-data__label {
  font-weight: var(--fxb-weight-semibold);
  color: var(--fxb-text);
}
.fxb-sheet-data .fxb-sheet-data__value {
  color: var(--fxb-text);
}

/* ============================================================================
   RFX2 — SHEET-GAUGES (fxb-gauges), lot 1.56.0, FOX-WOR-1.54.0-6
   Levels of a catalogue sheet as notched gauges. Structure only, through the
   --fxb-* tokens; a theme recolours one gauge by its key
   (.fxb-gauge--arrosage { --fxb-gauge-on: … }) or one level (.fxb-gauge-4).
   ========================================================================= */

.fxb-gauges {
  --fxb-gauge-on: var(--fxb-accent);
  --fxb-gauge-off: var(--fxb-surface-sunken);
  --fxb-gauge-edge: var(--fxb-border-strong);
  list-style: none;
  margin: var(--fxb-block-gap) 0;
  padding: 0;
  display: grid;
  gap: var(--fxb-space-2);
  font-family: var(--fxb-font-body, inherit);
  font-size: var(--fxb-text-sm);
  color: var(--fxb-text-secondary);
}
.fxb-gauge {
  display: grid;
  grid-template-columns: minmax(5.5em, max-content) minmax(0, 1fr) minmax(2em, max-content);
  align-items: center;
  gap: var(--fxb-space-2);
  margin: 0;
}
.fxb-gauge__label { grid-column: 1; }
.fxb-gauge__scale {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(var(--fxb-gauge-steps, 5), minmax(0, 1fr));
  gap: 4px;
  max-width: calc(var(--fxb-gauge-steps, 5) * 1.6em);
}
.fxb-gauge__step {
  display: block;
  aspect-ratio: 1;
  max-width: 0.9em;
  border-radius: 50%;
  background: var(--fxb-gauge-off);
  box-shadow: inset 0 0 0 1px var(--fxb-gauge-edge);
}
.fxb-gauge__step--on {
  background: var(--fxb-gauge-on);
  box-shadow: none;
}
.fxb-gauges--bars .fxb-gauge__scale { gap: 2px; max-width: none; }
.fxb-gauges--bars .fxb-gauge__step {
  aspect-ratio: auto;
  max-width: none;
  height: 6px;
  border-radius: var(--fxb-radius-sm);
}
.fxb-gauge__value {
  grid-column: 3;
  color: var(--fxb-text);
  font-weight: 600;
  text-align: right;
}

/* ============================================================================
   RFX2 — SHEET-MONTHS (fxb-months), lot 1.56.0, FOX-WOR-1.54.0-7
   Twelve months of a catalogue sheet. The current month is set in the
   browser (assets/js/fx-sheet-months.js): .fxb-months--m<n> on the root,
   __row--current / __cell--current on the month, __banner for the banner.
   A theme dresses a month by .fxb-months--m11, a cell by __cell--on.
   ========================================================================= */

.fxb-months {
  --fxb-months-on: var(--fxb-accent);
  --fxb-months-off: var(--fxb-surface-sunken);
  --fxb-months-current: var(--fxb-accent-soft);
  margin: var(--fxb-block-gap) 0;
  font-family: var(--fxb-font-body, inherit);
  font-size: var(--fxb-text-sm);
  color: var(--fxb-text);
}
.fxb-months__table {
  width: 100%;
  border-collapse: collapse;
}
.fxb-months__table[hidden] { display: none; }
.fxb-months__caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--fxb-space-2);
}
.fxb-months__name,
.fxb-months__text {
  padding: 6px var(--fxb-space-2);
  border-top: 1px solid var(--fxb-border);
  text-align: left;
  vertical-align: top;
}
.fxb-months__name {
  width: 1%;
  white-space: nowrap;
  font-weight: 600;
  color: var(--fxb-text-secondary);
}
.fxb-months__row--current > * { background: var(--fxb-months-current); }
.fxb-months__row--current .fxb-months__name { color: var(--fxb-text); }

.fxb-months__banner { margin: 0; }
.fxb-months__banner-label { font-weight: 600; }

.fxb-months__summary { margin: 0 0 var(--fxb-space-2); color: var(--fxb-text-secondary); }
.fxb-months__label { color: var(--fxb-text); font-weight: 600; }
.fxb-months__cells {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
}
.fxb-months__cell {
  margin: 0;
  padding: 4px 0;
  text-align: center;
  font-size: 0.75em;
  line-height: 1.2;
  border-radius: var(--fxb-radius-sm);
  background: var(--fxb-months-off);
  color: var(--fxb-text-secondary);
  overflow: hidden;
}
.fxb-months__cell--on {
  background: var(--fxb-months-on);
  color: var(--fxb-on-accent);
}
.fxb-months__cell--current { box-shadow: inset 0 0 0 2px var(--fxb-border-focus); }