/*
Theme Name: Kadence Child
Theme URI: https://jeunemotard.fr/
Description: Theme enfant de Kadence pour jeunemotard.fr. Porte les tokens design Bundle Round 2 (dark + light dual mode), les fonts variables self-hosted (Manrope + Inter + JetBrains Mono), la grille 1344px et les utility classes mono. Ne remplace pas Kadence Pro — l'override est ciblé (header builder + footer magazine + tokens globaux).
Author: jeunemotard.fr
Author URI: https://jeunemotard.fr/
Template: kadence
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-child
Tags: kadence, dark-mode, light-mode, accessibility-ready, custom-colors, custom-logo, threaded-comments

================================================================================
JEUNEMOTARD KADENCE CHILD — Bundle Round 2 (Sprint S9 J15)
================================================================================

Source : docs/design-system/CLAUDE_DESIGN_ROUND_2_2026-04-29/tokens.json
       + docs/design-system/CLAUDE_DESIGN_ROUND_2_2026-04-29/prototype.html
       + ADR-55 §2.3 (palette light WCAG AA strict 5.28)

Sections :
  1. @font-face fonts variables self-hosted (ÉTAPE 4)
  2. Tokens design dual mode :root[data-theme="dark|light"] (ÉTAPE 3)
  3. Grille .jm-wrap + .jm-wrap-narrow + utility classes (ÉTAPE 5)
  4. Reset léger + accessibilité (focus-visible, prefers-reduced-motion)
  5. Toggle dark/light transitions

Convention :
  - Aucune écrasement Kadence Pro hors tokens variables CSS.
  - Aucun composant atomique du proto inclus ici (réservé Sprint S9 J16+).
  - Aucun snippet WPCode désactivé automatiquement (action manuelle Ersin
    cohérent audit-snippets-wpcode-s9j15.md).
================================================================================
*/


/* ════════════════════════════════════════════════════════════════════════
   1. @FONT-FACE — Fonts variables self-hosted (ÉTAPE 4)
   ──────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Note : Inter-Italic et JetBrainsMono-Italic variants ne sont pas dans
   le bundle Round 2 livré (apr 2026). Pas chargés ici — le navigateur
   utilisera le faux italique synthétique si besoin. À ajouter Sprint
   S10+ si Ersin souhaite la vraie italique. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}


/* ════════════════════════════════════════════════════════════════════════
   2. TOKENS DESIGN — Dual mode (ÉTAPE 3)
   :root[data-theme="dark"] = mode par défaut (cohérent v1-nuit Round 1)
   :root[data-theme="light"] = mode clair WCAG AA strict (ADR-55 §2.3)
   ──────────────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  /* ── Backgrounds (hierarchy nuit) ── */
  --jm-bg:        #0d0d0d;
  --jm-bg-2:      #121214;
  --jm-bg-3:      #1A1A1D;

  /* ── Lines / dividers ── */
  --jm-line:      #26262A;
  --jm-line-2:    #1D1D20;

  /* ── Text ── */
  --jm-text:      #f0f0f0;
  --jm-text-2:    #A3A3A0;
  /* text-3 (fine-print/dim) relevé #6E6E6B → #8A8A87 : passe WCAG AA (3.66:1 → ~5.2:1
     sur fond dark) tout en restant sous text-2 (hiérarchie préservée). Audit contraste
     S9 J29 : 11 labels fine-print échouaient en dark (kickers, disclaimers, footer). */
  --jm-text-3:    #8A8A87;

  /* ── Accents ── */
  --jm-accent:        #00b4ff;
  --jm-accent-ink:    #0d0d0d;
  --jm-accent-warm:   #FF6B35;

  /* ── Semantic ── */
  --jm-success: oklch(0.78 0.14 155);
  --jm-danger:  oklch(0.68 0.20 25);

  /* ── Logo source (dual mode swap) ── */
  --jm-logo-src: url('assets/img/logo.svg');
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* ── Backgrounds light (inversion hiérarchie) ── */
  --jm-bg:        #fafafa;
  --jm-bg-2:      #ffffff;
  --jm-bg-3:      #f2f2f2;

  /* ── Lines / dividers ── */
  --jm-line:      #d8d8da;
  --jm-line-2:    #e6e6e8;

  /* ── Text ── */
  --jm-text:      #0d0d0d;
  --jm-text-2:    #3a3a3a;
  --jm-text-3:    #6e6e6b;

  /* ── Accents (WCAG AA strict 5.28 sur #fafafa) ── */
  --jm-accent:        #0070a8;
  --jm-accent-ink:    #ffffff;
  --jm-accent-warm:   #c44a1e;

  /* ── Semantic ajustées light mode ── */
  --jm-success: oklch(0.45 0.14 155);
  --jm-danger:  oklch(0.45 0.20 25);

  /* ── Logo source (dual mode swap) ── */
  --jm-logo-src: url('assets/img/logo-light.svg');
  color-scheme: light;
}

/* ── Tokens partagés dark + light (typo, espace, motion) ── */
:root {
  /* ── Type families ── */
  --jm-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --jm-body:    'Inter', system-ui, sans-serif;
  --jm-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ── Type scale ── */
  --jm-fs-hero:       152px;
  --jm-fs-h1:         128px;
  --jm-fs-h2:         64px;
  --jm-fs-h3:         44px;
  --jm-fs-h4:         32px;
  --jm-fs-stat:       88px;
  --jm-fs-display-md: 40px;
  --jm-fs-lede:       18px;
  --jm-fs-body:       16px;
  --jm-fs-small:      13px;
  --jm-fs-mono:       11px;
  --jm-fs-mono-xs:    10px;
  --jm-fs-mono-xxs:   9px;

  /* ── Letter-spacing & line-height ── */
  --jm-ls-display:   0.005em;
  --jm-ls-mono:      0.08em;
  --jm-ls-mono-wide: 0.10em;
  --jm-ls-tight:     -0.025em;
  --jm-lh-display:   0.92;
  --jm-lh-tight:     1.0;
  --jm-lh-body:      1.55;
  --jm-lh-lede:      1.45;

  /* ── Radii (sober, near-square) ── */
  --jm-r-sharp:  0;
  --jm-r-xs:     2px;
  --jm-r-sm:     4px;
  --jm-r-md:     8px;
  --jm-r-lg:     14px;
  --jm-r-pill:   999px;

  /* ── Spacing (4px base) ── */
  --jm-s-0:  0;
  --jm-s-1:  4px;
  --jm-s-2:  8px;
  --jm-s-3:  12px;
  --jm-s-4:  16px;
  --jm-s-5:  20px;
  --jm-s-6:  24px;
  --jm-s-8:  32px;
  --jm-s-10: 40px;
  --jm-s-12: 48px;
  --jm-s-14: 56px;
  --jm-s-16: 64px;
  --jm-s-20: 80px;
  --jm-s-24: 96px;
  --jm-s-32: 128px;

  /* ── Layout ── */
  --jm-wrap:        1344px;
  --jm-wrap-narrow: 880px;
  --jm-wrap-pad-d:  48px;
  --jm-wrap-pad-m:  20px;
  /* Nav height + logo sizing (Bug G J20 — logo encore agrandi « on ne distingue
     pas bien »). Le retrait du CTA Optim de la nav (Bug J Option B) libère ~190px
     → badge jusqu'à 100px (vs 80 J19), wordmark jusqu'à 64px, nav-h jusqu'à 108px.
     Fluide (clamp) : grand sur grand écran, réduit en douceur sur laptop. */
  --jm-nav-h:        clamp(84px, 6vw, 108px);
  --jm-nav-h-m:      64px;
  /* Bug M (J21) — logo « badge-forward ». Ersin J20 : « Jeune motard trop gros,
     ça mord sur le menu » (le wordmark 64px écrasait tout vers la nav) + « le
     logo peut être zoomé ». Réponse premium : badge dominant (remplit la nav,
     ~92px sur grand écran ; un badge de 150px déborderait une nav de 108px de
     haut) + wordmark refined secondaire → la nav respire (gap logo→menu 24→68px,
     menu→outils 0→44px @1920) + les libellés du menu ne wrappent plus.
     Validé live staging 1280/1536/1920/2560. */
  --jm-logo-mark-h:  clamp(56px, 4.8vw, 92px);
  --jm-logo-word-fs: clamp(22px, 1.55vw, 30px);

  /* ── Motion (cohérent tokens.json Bundle Round 2) ── */
  --jm-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --jm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --jm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jm-t-instant:   100ms;
  --jm-t-fast:      150ms;
  --jm-t-base:      200ms;
  --jm-t-slow:      300ms;
  --jm-t-hero:      3000ms;

  /* ── Blur ── */
  --jm-blur-nav:     12px;
  --jm-blur-overlay: 8px;
  --jm-blur-panel:   6px;

  /* ── Z-index ── */
  --jm-z-nav:     50;
  --jm-z-sticky:  40;
  --jm-z-overlay: 100;
  --jm-z-modal:   200;

  /* ── Shadows ── */
  --jm-shadow-card-hover: 0 1px 0 rgba(255,255,255,0.04) inset,
                          0 8px 24px -12px rgba(0,180,255,0.12);
  --jm-shadow-optim-glow: 0 0 0 1px rgba(0,180,255,0.4),
                          0 16px 32px -16px rgba(0,180,255,0.18);
}


/* ════════════════════════════════════════════════════════════════════════
   3. GRILLE + UTILITY CLASSES (ÉTAPE 5)
   ──────────────────────────────────────────────────────────────────────── */

/* Classes préfixées `jm-` OBLIGATOIRE : Kadence rend son conteneur principal
   en <main id="inner-wrap" class="wrap kt-clear">. Un sélecteur générique
   `.wrap` détournerait ce conteneur et casserait le full-width de la home
   (régression S9 J15, cf B-NEW-J15-REGRESSION-LARGEUR-HOMEPAGE). */
.jm-wrap {
  max-width: var(--jm-wrap);
  margin: 0 auto;
  padding: 0 var(--jm-wrap-pad-d);
}

.jm-wrap-narrow {
  max-width: var(--jm-wrap-narrow);
  margin: 0 auto;
  padding: 0 var(--jm-wrap-pad-d);
}

@media (max-width: 768px) {
  .jm-wrap,
  .jm-wrap-narrow {
    padding: 0 var(--jm-wrap-pad-m);
  }
}

/* ── Utility classes mono ── */
.mono {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono);
  letter-spacing: var(--jm-ls-mono);
  text-transform: uppercase;
  color: var(--jm-text-3);
}

.mono-accent {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono);
  letter-spacing: var(--jm-ls-mono);
  text-transform: uppercase;
  color: var(--jm-accent);
}

.section-num {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono);
  letter-spacing: var(--jm-ls-mono-wide);
  text-transform: uppercase;
  color: var(--jm-accent);
}

.accent { color: var(--jm-accent); }
.warm   { color: var(--jm-accent-warm); }
.muted  { color: var(--jm-text-2); }
.dim    { color: var(--jm-text-3); }


/* ════════════════════════════════════════════════════════════════════════
   4. RESET LÉGER + ACCESSIBILITÉ
   ──────────────────────────────────────────────────────────────────────── */

/* Transitions douces sur le swap dark/light (ne perturbe pas Kadence) */
html {
  transition: background-color var(--jm-t-slow) var(--jm-ease-out),
              color var(--jm-t-slow) var(--jm-ease-out);
}

/* Focus visible WCAG AA strict */
:focus-visible {
  outline: 2px solid var(--jm-accent);
  outline-offset: 3px;
}

/* Sélection texte cohérente accent */
::selection {
  background: var(--jm-accent);
  color: var(--jm-accent-ink);
}

/* ── POLITIQUE DE LIENS A1 (Session F5-2, cause racine régression) ──
   Le reset global `a{color:accent;text-decoration:none}` vivait dans le snippet
   claude-design-tokens.css, déclaré « mort » F5 sur la foi de ses CLASSES — mais
   ses sélecteurs d'ÉLÉMENTS stylaient tout le site. Retrait WPCode → soulignement
   navigateur généralisé (nav, footer, cards, breadcrumbs). Réimplémenté ICI dans
   le child (jamais en re-collant le snippet) :
   - défaut : aucun soulignement (nav/menus/cards/footer/boutons = composants) ;
   - PROSE (.jm-art-body / .jm-legal-content) : les règles dédiées plus loin
     ré-affirment underline accent (lisibilité) — spécificité supérieure, intactes ;
   - hover : accent theme-aware · focus : :focus-visible global ci-dessus.
   Amélioration vs original : var(--jm-accent) theme-aware (l'ancien #00b4ff fixe
   échouait AA en light). */
a {
  color: var(--jm-accent);
  text-decoration: none;
  transition: color var(--jm-t-fast) var(--jm-ease-out), opacity var(--jm-t-fast) var(--jm-ease-out);
}
a:hover { opacity: 0.85; }

/* ── GARDE-FOU ICÔNES KADENCE ICONLIST (Session F5-2, cause racine régression) ──
   `.single-post .kt-svg-icon-list-single svg{max-width:24px;max-height:24px}`
   vivait dans article-template.css (retiré F5) : sans lui, les SVG dynamiques
   Kadence (sans width/height) rendent à 100 % du conteneur = icône plein écran
   (cas MT-07 « Coût de possession »). Garde-fou global ici, lié au texte. */
.kt-svg-icon-list-single svg,
.kadence-dynamic-icon svg,
.kb-svg-icon-wrap svg { /* wrapper réel constaté live F5-2 : SVG 720×720 à 1152px de haut */
  max-width: 24px;
  max-height: 24px;
  width: 1.2em;
  height: 1.2em;
  vertical-align: text-bottom;
}


/* ════════════════════════════════════════════════════════════════════════
   5. PREFERS-REDUCED-MOTION — Strict
   ──────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   6. COMPOSANTS ATOMIQUES — NAV + LOGO DUAL + TOGGLE + STICKY (ÉTAPE 6, S9 J16)
   Porté du prototype Bundle Round 2 (nav L28-43, sticky L181-186).
   Tokens proto (--bg/--accent/--line…) remappés sur --jm-*. Dual mode géré
   par data-theme (PAS prefers-color-scheme) pour réagir au toggle.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tokens additifs nav (dual mode) ──
   Bug C (J19, B-NEW-J19-NAV-FOOTER-BG-HARMONIZE) : en light, le footer est
   solide #fafafa (--jm-bg) mais la nav était rgba(250,250,250,0.82) → posée
   sur le body sombre (#0d0d0d que Kadence peint en dur, non token-aware),
   elle rendait grisâtre, différente du footer. Fix : nav light = SOLIDE
   var(--jm-bg) = exactement le blanc du footer (préférence Ersin). Le dark
   garde un léger frost (0.82) sur la photo hero — Ersin l'a validé et le
   problème de blanc ne concernait que le light. Le body est forcé de suivre
   --jm-bg par data-theme (corrige le body sombre en light, découverte D2). */
:root[data-theme="dark"]  { --jm-nav-bg: rgba(13, 13, 13, 0.82); }
:root[data-theme="light"] { --jm-nav-bg: var(--jm-bg); }

/* Body suit le thème (Kadence le peint #0d0d0d en dur, ignorant data-theme). */
:root[data-theme] body { background-color: var(--jm-bg) !important; }

/* ── Masquage du header Kadence natif ──
   #masthead.site-header (header builder Kadence, position:fixed) est remplacé
   par .jm-nav, injectée via wp_body_open (cf functions.php). Masquage CSS =
   réversible, zéro dépendance PHP fragile au core Kadence. Désenregistrement
   « propre » via filtre Kadence : différé Sprint S10+. */
#masthead.site-header { display: none !important; }

/* ── NAV ── */
.jm-nav {
  position: sticky;
  top: 0;
  z-index: var(--jm-z-nav);
  background: var(--jm-nav-bg);
  -webkit-backdrop-filter: blur(var(--jm-blur-nav));
  backdrop-filter: blur(var(--jm-blur-nav));
  border-bottom: 1px solid var(--jm-line-2);
}
/* Décalage sous l'admin bar WP (aperçu connecté uniquement, sans effet en prod) */
.admin-bar .jm-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .jm-nav { top: 46px; } }

.jm-nav-inner {
  max-width: var(--jm-wrap);
  margin: 0 auto;
  padding: 0 var(--jm-wrap-pad-d);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--jm-nav-h);
}

/* ── Logo lockup : badge (mark transparent) + wordmark Manrope ──
   J17, décision Ersin Option A (évolution charte §7). Le badge transparent
   (logo-mark*.svg, fond <rect> retiré) se pose net sur la nav blur ; le
   wordmark « Jeune·motard » donne la présence horizontale du proto.
   Swap dark/light du badge piloté par data-theme (mark #00b4ff / #0070a8). */
.jm-logo { display: inline-flex; align-items: center; gap: 16px; flex: none; margin-right: var(--jm-s-6); }
.jm-logo-mark { display: inline-flex; flex: none; }
.jm-logo-mark img { display: block; width: auto; height: var(--jm-logo-mark-h); }
/* Défensif J44 (fix double-badge) : badge light masqué PAR DÉFAUT (thème par défaut = dark)
   → JAMAIS de double-badge même si data-theme absent sur <html> (FOUC / Delay JS WP Rocket
   qui retarde le bootstrap inline). Cible .jm-logo-mark = couvre header ET footer (.jm-foot-logo). */
.jm-logo-mark .jm-logo-light { display: none; }
.jm-logo-mark .jm-logo-dark  { display: block; }
:root[data-theme="light"] .jm-logo-mark .jm-logo-light { display: block; }
:root[data-theme="light"] .jm-logo-mark .jm-logo-dark  { display: none; }
.jm-logo-word {
  font-family: var(--jm-display);
  font-size: var(--jm-logo-word-fs);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--jm-text);
  white-space: nowrap;
}
.jm-logo-word em { font-style: normal; color: var(--jm-accent); }

/* Logo fluide (clamp) : grand sur grand écran, réduit en douceur sur laptop.
   Le retrait du CTA Optim (Bug J) libère de la place → la nav respire (Bug H).
   On resserre juste un peu gap + gouttières en mid-desktop. Burger ≤1300px. */
@media (max-width: 1440px) {
  .jm-nav-links { gap: 24px; }
  .jm-nav-inner { padding: 0 36px; }
  .jm-logo { margin-right: var(--jm-s-4); }
}

/* ── Liens silos numérotés ── */
.jm-nav-links { display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; }
.jm-nav-links a {
  font-family: var(--jm-body);
  font-size: var(--jm-fs-small);
  font-weight: 500;
  color: var(--jm-text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 6px 0;
  transition: color var(--jm-t-fast) var(--jm-ease-out);
}
/* Soulignement accent qui pousse de la gauche — rend le hover indiscutable
   (J17 : le hover « invisible » d'Ersin = effet gris→blanc trop subtil ;
   le media query n'était PAS la cause, cf cycle-0-audit). Gate relâché à
   (hover: hover) seul (sans pointer:fine) pour couvrir les hybrides tactiles. */
.jm-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--jm-accent);
  transition: width var(--jm-t-base) var(--jm-ease-out);
}
@media (hover: hover) {
  .jm-nav-links a:hover { color: var(--jm-text); }
  .jm-nav-links a:hover::after { width: 100%; }
}
.jm-nav-links a:focus-visible { color: var(--jm-text); }
.jm-nav-links a:focus-visible::after { width: 100%; }
.jm-nav-links a[aria-current="page"] { color: var(--jm-text); }
.jm-nav-links a[aria-current="page"]::after { width: 100%; }
.jm-nav-links a .num {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono-xxs);
  /* text-2 (pas text-3) : #6E6E6B sur #0d0d0d = 3.6:1 < AA 4.5 ; text-2
     (#A3A3A0) passe AA en dark ET light pour ce petit texte décoratif (J19). */
  color: var(--jm-text-2);
  letter-spacing: var(--jm-ls-mono);
}

/* ── CTA Optim'Assur ── */
.jm-nav-cta {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono);
  letter-spacing: var(--jm-ls-mono);
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--jm-accent);
  color: var(--jm-accent-ink);
  border-radius: var(--jm-r-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--jm-t-fast) var(--jm-ease-out),
              transform var(--jm-t-instant) var(--jm-ease-out);
}
@media (hover: hover) {
  .jm-nav-cta:hover { background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%); }
}
.jm-nav-cta:active { transform: scale(0.97); }

/* ── Burger (mobile) — touch target 44px ── */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-sm);
  background: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: transform var(--jm-t-instant) var(--jm-ease-out);
}
.burger:active { transform: scale(0.97); }
.burger span { display: block; width: 18px; height: 2px; background: var(--jm-text); border-radius: 2px; }

/* Burger à ≤1240px (J19) : avec le logo doublé + « Nos outils », la nav
   horizontale ne tient plus proprement sous ~1240px → drawer (mark/wordmark
   ramenés à une taille mobile lisible). */
@media (max-width: 1300px) {
  .jm-nav-links,
  .jm-nav-cta { display: none; }
  /* spécificité > `.jm-nav-item{display:inline-flex}` (§8, plus loin dans le
     fichier) : « Nos outils » desktop masqué en mobile → dispo dans le drawer */
  .jm-nav-right .jm-nav-tools { display: none; }
  .burger { display: inline-flex; }
  .jm-nav-inner { padding: 0 var(--jm-wrap-pad-m); height: var(--jm-nav-h-m); }
  .jm-logo { gap: 9px; margin-right: 0; }
  :root { --jm-logo-mark-h: 48px; --jm-logo-word-fs: 30px; }
}
/* Bug V (J24) — petits téléphones : le wordmark 30px + le cluster nav-right
   (toggle + burger) débordaient sous ~400px → scroll horizontal (mesuré 370px @320).
   Réduction progressive du logo (badge conservé, lisibilité OK). Vérifié : @320
   le logo passe de 251px à ~170px → la nav tient dans la largeur. */
@media (max-width: 420px) {
  :root { --jm-logo-mark-h: 42px; --jm-logo-word-fs: 23px; }
  /* Bug V (J25) : le logo FOOTER a son propre font-size (34px) non lié au var →
     245px de large débordait @320 (scrollWidth 330). On le réduit aussi. */
  .jm-foot-logo .jm-logo-word { font-size: 26px; }
}
@media (max-width: 360px) {
  :root { --jm-logo-mark-h: 38px; --jm-logo-word-fs: 19px; }
  .jm-foot-logo .jm-logo-mark img { height: 40px; }
  .jm-foot-logo .jm-logo-word { font-size: 21px; }
}

/* ── Menu mobile (drawer ouvert par le burger) ── */
.jm-mobile-menu { display: none; }
.jm-mobile-menu[hidden] { display: none; }
@media (max-width: 1300px) {
  .jm-mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--jm-s-4);
    position: fixed;
    top: var(--jm-nav-h-m);
    left: 0;
    right: 0;
    z-index: var(--jm-z-nav);
    margin: 0;
    padding: var(--jm-s-4) var(--jm-wrap-pad-m) var(--jm-s-6);
    background: var(--jm-bg-2);
    border-bottom: 1px solid var(--jm-line);
    /* C (2026-06-24) : tiroir SCROLLABLE — sinon le contenu (silos + sous-cats +
       « Mon Alerte de Prix » + « Budget Moto » + CTA) dépasse le viewport sur
       petits écrans et « Budget Moto » devient coupé/inaccessible. Hauteur bornée
       au viewport sous la nav (dvh = barres mobiles dynamiques, vh en fallback)
       + scroll interne + momentum iOS + pas de chaînage au body + safe-area notch. */
    max-height: calc(100vh - var(--jm-nav-h-m));
    max-height: calc(100dvh - var(--jm-nav-h-m));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(var(--jm-s-6), calc(env(safe-area-inset-bottom) + var(--jm-s-4)));
  }
  .admin-bar .jm-mobile-menu.is-open {
    top: calc(var(--jm-nav-h-m) + 46px);
    max-height: calc(100vh - var(--jm-nav-h-m) - 46px);
    max-height: calc(100dvh - var(--jm-nav-h-m) - 46px);
  }
  .jm-mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .jm-mobile-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    font-family: var(--jm-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--jm-text);
    border-bottom: 1px solid var(--jm-line-2);
  }
  .jm-mobile-menu a[aria-current="page"] { color: var(--jm-accent); }
  .jm-mobile-menu a .num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-2); letter-spacing: var(--jm-ls-mono); }
  .jm-mobile-menu .jm-nav-cta { display: inline-flex; width: max-content; }
}

/* ── Cluster d'actions à droite de la nav (CTA + toggle + burger) ──
   Groupe les actions à droite, séparé des liens silos. justify-content
   space-between sur .jm-nav-inner → logo (gauche) · liens (centre) · ce
   cluster (droite). Desktop : CTA + toggle. Mobile : toggle + burger. */
.jm-nav-right { display: inline-flex; align-items: center; gap: 12px; }

/* ── Toggle dark/light ──
   J17 (décision Ersin) : le toggle vit DANS la nav (cluster .jm-nav-right),
   groupé avec le CTA en desktop et le burger en mobile. Remplace le « fixed
   top-left » de ADR-55, qui chevauchait le logo lockup sur 981-1300px
   (gouttière trop étroite, cf cycle-0-audit). Le SVG porte des attributs
   width/height + flex:none : sans ça, le flex écrasait l'icône à 6,4px (J16). */
.jm-theme-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-pill);
  /* Fond transparent : le toggle se fond dans la surface de la nav (fix Bug B
     J18 — en light, var(--jm-bg-2)=#fff était plus blanc que la nav #fafafa ;
     en dark, légère sur-brillance). Transparent harmonise les deux modes. */
  background: transparent;
  color: var(--jm-text);
  cursor: pointer;
  transition: transform var(--jm-t-fast) var(--jm-ease-out),
              box-shadow var(--jm-t-fast) var(--jm-ease-out),
              border-color var(--jm-t-fast) var(--jm-ease-out),
              background var(--jm-t-fast) var(--jm-ease-out);
}
.jm-theme-toggle svg { flex: none; width: 26px; height: 26px; display: block; }
.jm-theme-toggle .icon-moon { display: none; }
.jm-theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .jm-theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .jm-theme-toggle .icon-moon { display: block; }
@media (hover: hover) {
  .jm-theme-toggle:hover {
    transform: scale(1.05);
    border-color: var(--jm-accent);
    box-shadow: 0 0 0 1px var(--jm-accent), 0 0 16px -2px var(--jm-accent);
  }
}
.jm-theme-toggle:active { transform: scale(0.97); }

/* ── Sticky mobile CTA ── */
.sticky-mob {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--jm-z-sticky);
  background: var(--jm-nav-bg);
  -webkit-backdrop-filter: blur(var(--jm-blur-nav));
  backdrop-filter: blur(var(--jm-blur-nav));
  border-top: 1px solid var(--jm-line);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 12px;
  transition: transform var(--jm-t-base) var(--jm-ease-out),
              opacity var(--jm-t-base) var(--jm-ease-out);
}
.sticky-mob.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.sticky-mob .label { font-family: var(--jm-display); font-size: 15px; font-weight: 700; line-height: 1.1; }
.sticky-mob .label small { display: block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; margin-top: 4px; font-weight: 500; }
.sticky-mob .go {
  margin-left: auto;
  padding: 12px 16px;
  background: var(--jm-accent);
  color: var(--jm-accent-ink);
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono);
  letter-spacing: var(--jm-ls-mono);
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--jm-r-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform var(--jm-t-instant) var(--jm-ease-out);
}
.sticky-mob .go:active { transform: scale(0.97); }
/* Bouton fermer (dismiss 7j) — placé après le CTA, à l'extrémité droite */
.sticky-mob-close {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--jm-text-3);
  cursor: pointer;
  border-radius: var(--jm-r-sm);
  transition: color var(--jm-t-fast) var(--jm-ease-out);
}
.sticky-mob-close:hover { color: var(--jm-text); }
.sticky-mob-close:active { transform: scale(0.92); }
.sticky-mob-close svg { display: block; }
@media (max-width: 768px) {
  .sticky-mob { display: flex; }
  body { padding-bottom: 76px; }
}

/* ════════════════════════════════════════════════════════════════════════
   7. FOOTER A1 MAGAZINE (S9 J18) — 5 colonnes desktop · accordéon mobile
   Porté du proto Bundle Round 2 (.foot* → .jm-foot*), enrichi (social,
   newsletter, états « bientôt », SIRET, transparence affiliation).
   Le footer Kadence #colophon est masqué (réversible) et remplacé par
   .jm-foot injecté via wp_footer (cf functions.php).
   ──────────────────────────────────────────────────────────────────────── */
#colophon.site-footer { display: none !important; }

.jm-foot {
  padding: 64px 0 40px;
  border-top: 1px solid var(--jm-line);
  background: var(--jm-bg);
  color: var(--jm-text);
}
.jm-foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: var(--jm-s-12);
  margin-bottom: var(--jm-s-12);
}

/* ── Colonne marque ── */
.jm-foot-logo { margin-bottom: var(--jm-s-4); }
.jm-foot-logo .jm-logo-mark img { height: 48px; }
.jm-foot-logo .jm-logo-word { font-size: 34px; }
.jm-foot-brand p {
  font-size: var(--jm-fs-small);
  color: var(--jm-text-2);
  max-width: 340px;
  line-height: var(--jm-lh-body);
  margin: 0 0 var(--jm-s-5);
}
.jm-foot-social { display: flex; gap: var(--jm-s-3); }
.jm-foot-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-pill);
  color: var(--jm-text-2);
  transition: color var(--jm-t-fast) var(--jm-ease-out),
              border-color var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) {
  .jm-foot-social a:hover { color: var(--jm-accent); border-color: var(--jm-accent); }
}
.jm-foot-social a.is-soon { opacity: 0.5; cursor: not-allowed; }
.jm-foot-social svg { display: block; }

/* ── Colonnes liens (details / accordéon) ── */
.jm-foot-acc { min-width: 0; }
.jm-foot-acc summary { list-style: none; cursor: pointer; }
.jm-foot-acc summary::-webkit-details-marker { display: none; }
.jm-foot-acc summary h4 {
  font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono-xs);
  letter-spacing: var(--jm-ls-mono-wide);
  text-transform: uppercase;
  color: var(--jm-text-3);
  margin: 0 0 var(--jm-s-4);
  font-weight: 500;
}
.jm-foot-acc-body { display: flex; flex-direction: column; gap: var(--jm-s-2); }
.jm-foot-acc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--jm-s-2); }
.jm-foot-acc a {
  font-size: var(--jm-fs-small);
  color: var(--jm-text-2);
  transition: color var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) { .jm-foot-acc a:hover { color: var(--jm-accent); } }
.jm-foot-acc a:focus-visible { color: var(--jm-accent); outline: 2px solid var(--jm-accent); outline-offset: 2px; }
.jm-foot-acc a .num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-2); margin-right: 3px; }
.jm-foot-soon { font-size: var(--jm-fs-small); color: var(--jm-text-3); display: inline-flex; align-items: center; gap: 7px; }
.jm-foot-soon em {
  font-style: normal; font-family: var(--jm-mono);
  font-size: var(--jm-fs-mono-xxs); text-transform: uppercase;
  letter-spacing: var(--jm-ls-mono); color: var(--jm-accent);
  border: 1px solid var(--jm-line); border-radius: var(--jm-r-xs); padding: 1px 5px;
}

/* ── Newsletter ── */
.jm-foot-news { margin-top: var(--jm-s-5); }
.jm-foot-news label { display: block; font-size: var(--jm-fs-small); color: var(--jm-text); font-weight: 600; margin-bottom: var(--jm-s-2); }
.jm-foot-news-row { display: flex; gap: var(--jm-s-2); }
.jm-foot-news input {
  flex: 1; min-width: 0;
  background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-sm);
  padding: 9px 12px; color: var(--jm-text);
  font-family: var(--jm-body); font-size: var(--jm-fs-small);
}
.jm-foot-news input:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 1px; border-color: var(--jm-accent); }
.jm-foot-news button {
  flex: none; background: var(--jm-accent); color: var(--jm-accent-ink); border: none;
  border-radius: var(--jm-r-sm); padding: 9px 14px;
  font-family: var(--jm-mono); font-size: var(--jm-fs-mono); text-transform: uppercase;
  letter-spacing: var(--jm-ls-mono); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) { .jm-foot-news button:hover { background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%); } }
.jm-foot-news small { display: block; margin-top: var(--jm-s-2); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); }

/* ── Bottom bar ── */
.jm-foot-bot {
  border-top: 1px solid var(--jm-line);
  padding-top: var(--jm-s-6);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--jm-s-4);
  font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); color: var(--jm-text-3);
  letter-spacing: var(--jm-ls-mono);
}
.jm-foot-bot a { color: var(--jm-text-2); text-decoration: underline; }
@media (hover: hover) { .jm-foot-bot a:hover { color: var(--jm-accent); } }
.jm-foot-siret { font-variant-numeric: tabular-nums; }

/* ── Desktop : colonnes toujours ouvertes, summary inerte ── */
@media (min-width: 981px) {
  .jm-foot-acc summary { pointer-events: none; }
  .jm-foot-acc summary h4 { cursor: default; }
}

/* ── Mobile : accordéon empilé pleine largeur + chevron +/− ── */
@media (max-width: 980px) {
  .jm-foot { padding: 48px 0 32px; }
  .jm-foot-top { grid-template-columns: 1fr; gap: 0; margin-bottom: var(--jm-s-8); }
  .jm-foot-brand { margin-bottom: var(--jm-s-8); }
  .jm-foot-acc { border-top: 1px solid var(--jm-line-2); }
  .jm-foot-acc summary { display: flex; align-items: center; justify-content: space-between; padding: var(--jm-s-4) 0; }
  .jm-foot-acc summary h4 { margin: 0; }
  .jm-foot-acc summary::after { content: "+"; font-family: var(--jm-mono); color: var(--jm-text-3); font-size: 16px; line-height: 1; }
  .jm-foot-acc[open] summary::after { content: "−"; }
  .jm-foot-acc-body { padding-bottom: var(--jm-s-4); }
  .jm-foot-bot { flex-direction: column; align-items: flex-start; gap: var(--jm-s-3); }
}


/* ════════════════════════════════════════════════════════════════════════
   8. MEGA-MENUS UNIFIÉS — silos (Bug E) + « Nos outils » (S9 J19)
   Un seul composant : panneau natif sobre (philosophie Vercel), ouverture
   hover (souris) + focus-within (clavier) + .is-open (JS click/Escape).
   Vanilla strict, zéro dépendance, zéro framework.
   ──────────────────────────────────────────────────────────────────────── */

.jm-nav-item { position: relative; display: inline-flex; align-items: center; }

/* Trigger « Nos outils » (Bug J Option B J20) = action proéminente de la nav
   (remplace le CTA Optim retiré). Bouton pill bordé, icône grille + chevron,
   accent au hover/ouvert. Optim reste mis en avant DANS le panneau + le hero. */
.jm-tools-trigger {
  background: var(--jm-bg-2);
  border: 1px solid var(--jm-line);
  cursor: pointer;
  font-family: var(--jm-body);
  font-size: var(--jm-fs-small);
  font-weight: 600;
  color: var(--jm-text);
  padding: 11px 18px;
  border-radius: var(--jm-r-pill);
  white-space: nowrap;
  transition: border-color var(--jm-t-fast) var(--jm-ease-out),
              color var(--jm-t-fast) var(--jm-ease-out),
              box-shadow var(--jm-t-fast) var(--jm-ease-out);
}
.jm-tools-ic { flex: none; color: var(--jm-accent); }
@media (hover: hover) {
  .jm-tools-trigger:hover { border-color: var(--jm-accent); box-shadow: 0 0 0 1px var(--jm-accent); }
}
.jm-nav-tools .jm-nav-link[aria-expanded="true"] { border-color: var(--jm-accent); box-shadow: 0 0 0 1px var(--jm-accent); }
.jm-nav-link { display: inline-flex; align-items: center; gap: 8px; }

/* Chevron des items à mega */
.jm-chev { flex: none; opacity: 0.7; transition: transform var(--jm-t-base) var(--jm-ease-out); }
.jm-nav-item.has-mega:hover > .jm-nav-link .jm-chev,
.jm-nav-item.has-mega:focus-within > .jm-nav-link .jm-chev,
.jm-nav-link[aria-expanded="true"] .jm-chev { transform: rotate(180deg); }

/* Panneau mega — état fermé par défaut (transitionnable, hors tab order) */
.jm-mega {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 300px;
  max-width: 360px;
  background: var(--jm-bg-2);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 48px -24px rgba(0,0,0,0.55);
  padding: var(--jm-s-3);
  z-index: var(--jm-z-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--jm-t-base) var(--jm-ease-out),
              transform var(--jm-t-slow) var(--jm-ease-out),
              visibility var(--jm-t-base) var(--jm-ease-out);
}
.jm-mega[hidden] { display: none; } /* fallback no-JS : reste caché, le lien silo marche */

/* Ouverture : hover (souris, desktop) · focus-within (clavier) · .is-open (JS) */
@media (hover: hover) and (min-width: 1081px) {
  .jm-nav-item.has-mega:hover > .jm-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
}
.jm-nav-item.has-mega:focus-within > .jm-mega,
.jm-mega.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* Le panneau « Nos outils » (dernier item) s'aligne à droite pour ne pas déborder */
.jm-nav-tools .jm-mega { left: auto; right: 0; min-width: 340px; max-width: 380px; }

/* ── Mega silo refondu S9 J36 (Bug AZ) — méga-menu GRILLE large de sous-catégories ──
   Survol pilier = header page mère (icône + lead) + grille de sous-catégories
   (taxonomie réelle get_terms) + pied dossier complet. Ancré au conteneur
   .jm-nav-links (pas à l'item) → alignement gauche constant quel que soit le pilier
   survolé, sans débordement à droite. Largeur pilotée par le nb de colonnes
   (--jm-mega-cols, posé inline par le rendu). Ref : Le Repaire des Motards (grille)
   + Stripe (densité) + Linear (entrée). Sans image (cohérent retrait J32 Bug AL). */
.jm-nav-links { position: relative; }
.jm-nav-links .jm-nav-item.has-mega { position: static; }
.jm-mega--silo {
  left: 0; right: auto;
  width: min(92vw, calc(var(--jm-mega-cols, 1) * 250px + var(--jm-s-12)));
  min-width: 300px; max-width: min(92vw, 1000px);
  padding: var(--jm-s-4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (max-width: 1080px) { .jm-mega--silo { width: min(92vw, 460px); } }
.jm-mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--jm-mega-cols, 1), minmax(0, 1fr));
  gap: var(--jm-s-2) var(--jm-s-5);
}
.jm-mega-gcol { display: flex; flex-direction: column; min-width: 0; }
.jm-mega-gtitle {
  font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs);
  letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase;
  color: var(--jm-text-3); padding: 0 10px; margin-bottom: 4px;
}
.jm-mega-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-mega-n {
  flex: none; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs);
  color: var(--jm-text-3); padding: 1px 7px; border-radius: 100px; background: var(--jm-bg-3);
}
.jm-mega-feat-go { flex: none; color: var(--jm-accent); font-size: 18px; opacity: .55; transition: transform var(--jm-t-fast) var(--jm-ease-out), opacity var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-mega-feat:hover .jm-mega-feat-go { opacity: 1; transform: translateX(3px); } }

.jm-mega-feat {
  display: flex; align-items: center; gap: var(--jm-s-3);
  margin-bottom: var(--jm-s-2); padding: var(--jm-s-3);
  border-radius: var(--jm-r-md);
  border: 1px solid var(--jm-line-2);
  background: linear-gradient(135deg, color-mix(in oklab, var(--jm-accent), transparent 88%), var(--jm-bg-3) 70%);
  transition: border-color var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) { .jm-mega-feat:hover { border-color: var(--jm-accent); } }
.jm-mega-feat:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 2px; }
.jm-mega-feat-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--jm-r-sm); background: color-mix(in oklab, var(--jm-accent), transparent 84%); color: var(--jm-accent); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 60%); }
.jm-mega-feat-body { flex: 1; min-width: 0; }
.jm-mega-kicker { display: block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); margin-bottom: 3px; }
.jm-mega-lead-t { display: block; font-family: var(--jm-display); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--jm-text); }
.jm-mega-stat { display: block; margin-top: 5px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); }
.jm-mega-stat b { color: var(--jm-accent); font-weight: 500; }

/* Liste d'articles du silo (flèche révélée au survol) */
.jm-mega-list { list-style: none; margin: 0; padding: var(--jm-s-1) 0 0; display: flex; flex-direction: column; }
.jm-mega-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: var(--jm-r-sm);
  font-family: var(--jm-body); font-size: var(--jm-fs-small); font-weight: 500;
  color: var(--jm-text-2);
  transition: background var(--jm-t-fast) var(--jm-ease-out), color var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) { .jm-mega-list a:hover { background: var(--jm-bg-3); color: var(--jm-text); } }
.jm-mega-list a:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: -2px; }
.jm-mega-list a.jm-mega-cta { color: var(--jm-accent); font-weight: 600; }
.jm-mega-arr { flex: none; color: var(--jm-accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-mega-list a:hover .jm-mega-arr { opacity: 1; transform: none; } }
.jm-mega-list a:focus-visible .jm-mega-arr { opacity: 1; transform: none; }

/* Pied du panneau : accès au dossier complet */
.jm-mega-hub {
  display: block; margin-top: var(--jm-s-1); padding: 8px 10px;
  font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono);
  text-transform: uppercase; color: var(--jm-text-3);
  border-top: 1px solid var(--jm-line-2);
  transition: color var(--jm-t-fast) var(--jm-ease-out);
}
.jm-mega-hub:hover { color: var(--jm-accent); }

/* ── Panneau « Nos outils » : icône + label + description + badges ── */
.jm-tools-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jm-tool {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px;
  border-radius: var(--jm-r-md);
  transition: background var(--jm-t-fast) var(--jm-ease-out);
}
.jm-tool:hover { background: var(--jm-bg-3); }
.jm-tool:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: -2px; }
.jm-tool-ic {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jm-line); border-radius: var(--jm-r-md); color: var(--jm-accent);
  background: var(--jm-bg);
}
.jm-tool-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jm-tool-l { font-family: var(--jm-body); font-size: var(--jm-fs-body); font-weight: 600; color: var(--jm-text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jm-tool-d { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.35; }
.jm-tool-star { background: linear-gradient(120deg, rgba(0,180,255,0.08), transparent 75%); }
.jm-tool-star .jm-tool-ic { color: var(--jm-accent-ink); background: var(--jm-accent); border-color: var(--jm-accent); }
.jm-tool-star-b {
  font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs);
  text-transform: uppercase; letter-spacing: var(--jm-ls-mono); color: var(--jm-accent);
  border: 1px solid var(--jm-accent); border-radius: var(--jm-r-pill); padding: 1px 7px;
}
.jm-tool-soon { opacity: 0.55; cursor: default; }
.jm-tool-soon .jm-tool-l em {
  font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs);
  text-transform: uppercase; letter-spacing: var(--jm-ls-mono); color: var(--jm-text-3);
  border: 1px solid var(--jm-line); border-radius: var(--jm-r-xs); padding: 1px 5px;
}

/* ── Drawer mobile : section Outils ── */
@media (max-width: 1300px) {
  .jm-mob-tools { margin-top: var(--jm-s-2); }
  .jm-mob-tools h4 {
    font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono-wide);
    text-transform: uppercase; color: var(--jm-text-3); margin: var(--jm-s-3) 0 var(--jm-s-1); font-weight: 500;
  }
  .jm-mob-tools ul { list-style: none; margin: 0; padding: 0; }
  .jm-mob-tool {
    display: flex; align-items: center; gap: 10px; padding: 13px 4px;
    font-family: var(--jm-body); font-size: 15px; font-weight: 500; color: var(--jm-text);
    border-bottom: 1px solid var(--jm-line-2);
  }
  .jm-mob-tool svg { flex: none; color: var(--jm-accent); }
  .jm-mob-tool em { font-style: normal; margin-left: auto; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); text-transform: uppercase; letter-spacing: var(--jm-ls-mono); color: var(--jm-text-3); }
  .jm-mob-tool-soon { color: var(--jm-text-3); }
  .jm-mob-tool-soon svg { color: var(--jm-text-3); }
}


/* ════════════════════════════════════════════════════════════════════════
   9. FOOTER J19 — refonte Ersin (sub-tagline, newsletter Brevo, honeypot)
   ──────────────────────────────────────────────────────────────────────── */

/* Colonne marque rééquilibrée (socials retirés D-Footer-3) : sous-tagline */
.jm-foot-tag { font-size: var(--jm-fs-small); color: var(--jm-text-2); max-width: 340px; line-height: var(--jm-lh-body); margin: 0 0 var(--jm-s-3); }
.jm-foot-sub { font-size: var(--jm-fs-small); color: var(--jm-text-3); max-width: 340px; line-height: var(--jm-lh-body); margin: 0; }

/* Logo footer un peu plus présent (cohérent logo doublé nav) */
.jm-foot-logo .jm-logo-mark img { height: 56px; }
.jm-foot-logo .jm-logo-word { font-size: 38px; }

/* Honeypot anti-spam : hors écran, jamais focusable */
.jm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Message d'état newsletter (ARIA live) */
.jm-foot-news-msg { margin: var(--jm-s-2) 0 0; font-size: var(--jm-fs-small); line-height: 1.4; min-height: 0; }
.jm-foot-news-msg:empty { display: none; }
.jm-foot-news-msg.is-ok  { color: var(--jm-success); }
.jm-foot-news-msg.is-err { color: var(--jm-danger); }
.jm-foot-news[aria-busy="true"] button { opacity: 0.6; pointer-events: none; }


/* ════════════════════════════════════════════════════════════════════════
   10. HERO ÉTAPE 13 — front-page.php (Bundle Round 2, theme-aware dual mode)
   Porté du proto (.hero/.optim-card → .jm-hero/.jm-optim*), contenu ADR-55
   (écosystème 3 outils). Tokens proto remappés --jm-*. CLS 0 (dimensions
   fixes), pas de GSAP (B-100 différé), reduced-motion respecté (ticker figé).
   ──────────────────────────────────────────────────────────────────────── */

.jm-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--jm-line); background: var(--jm-bg); }
/* Glow atmosphérique (rendu même sans photo de fond) */
.jm-hero::before { content: ""; position: absolute; z-index: 0; top: -20%; right: -10%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(0,180,255,0.10), transparent 70%); pointer-events: none; }
.jm-hero-bg { position: absolute; inset: 0; z-index: 0; }
.jm-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.jm-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--jm-bg) 0%, transparent 30%, transparent 60%, var(--jm-bg) 100%), linear-gradient(90deg, var(--jm-bg) 0%, transparent 55%); }
:root[data-theme="light"] .jm-hero-bg img { opacity: 0.16; }

.jm-hero-inner { position: relative; z-index: 1; max-width: var(--jm-wrap); margin: 0 auto; padding: 40px var(--jm-wrap-pad-d) 88px; }
.jm-hero-eyebrow { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--jm-s-3); }
.jm-hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jm-accent); }

/* Bug L (J21) — Optim card largeur GARANTIE 360-420px (minmax) : le grid 1.5fr/1fr
   laissait la colonne Optim s'écraser sur staging. Scope sous .jm-front pour la
   robustesse spécificité (cf h1 ci-dessous). Validé live 1280→2560 : Optim = 420px
   toujours entièrement visible. */
.jm-front .jm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 420px); gap: 56px; align-items: center; }

/* Bug L (J21) — CAUSE RACINE écart harness/staging : le snippet WPCode Round 1
   `claude-design-tokens.css` (toujours actif) impose en <style> inline
   `.jm-hero h1 { font-size: var(--jm-fs-hero) }` = clamp(120px,12vw,152px). Même
   spécificité (0,0,1,1) que la règle enfant → l'inline chargé après gagnait → H1
   à 152px sur staging (191% vh, Optim écrasée), invisible au harness local.
   Fix sans toucher au snippet : scope sous .jm-front (0,0,2,1 > 0,0,1,1) → on
   gagne quel que soit l'ordre de source. Validé live 1280/1536/1920/2560.
   Cf tmp-diagnostic/ecart-harness-vs-staging-j21.md + B-NEW-J21-SNIPPET-ROUND1-COLLISION. */
.jm-front .jm-hero h1 {
  font-family: var(--jm-display); font-weight: 800;
  font-size: clamp(1.875rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--jm-text); margin: 0;
}
.jm-hero h1 .jm-hero-l2 { color: var(--jm-accent); display: block; }
/* Ticker (rotation de mots) — hauteur fixe = CLS 0 */
.jm-hero-rot { display: inline-grid; }
.jm-hero-rot > span { grid-area: 1 / 1; opacity: 0; transform: translateY(0.25em); transition: opacity .5s var(--jm-ease-out), transform .5s var(--jm-ease-out); }
.jm-hero-rot > span.is-on { opacity: 1; transform: none; }

.jm-hero-sub { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); max-width: 540px; line-height: var(--jm-lh-lede); margin: var(--jm-s-8) 0 0; }

.jm-hero-cta { display: flex; gap: 14px; margin-top: var(--jm-s-8); flex-wrap: wrap; }
.jm-btn { font-family: var(--jm-body); font-weight: 600; font-size: 14px; padding: 15px 22px; border-radius: var(--jm-r-sm); display: inline-flex; align-items: center; gap: 10px; line-height: 1; transition: background var(--jm-t-base) var(--jm-ease-out), border-color var(--jm-t-base) var(--jm-ease-out), color var(--jm-t-base) var(--jm-ease-out), transform var(--jm-t-instant) var(--jm-ease-out); }
.jm-btn:active { transform: scale(0.98); }
.jm-btn-primary { background: var(--jm-accent); color: var(--jm-accent-ink); }
.jm-btn-primary .jm-arr { transition: transform var(--jm-t-base) var(--jm-ease-out); }
.jm-btn-primary:hover { background: color-mix(in oklab, var(--jm-accent), white 14%); }
.jm-btn-primary:hover .jm-arr { transform: translateX(4px); }
.jm-btn-ghost { color: var(--jm-text); border: 1px solid var(--jm-line); background: transparent; font-weight: 500; }
.jm-btn-ghost:hover { border-color: var(--jm-accent); color: var(--jm-accent); }

.jm-hero-meta { display: flex; gap: 32px; margin-top: var(--jm-s-10); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; flex-wrap: wrap; }
.jm-hero-meta b { display: block; font-family: var(--jm-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--jm-text); margin-bottom: 2px; }
.jm-hero-meta span { display: block; }
.jm-hero-meta cite { font-style: normal; text-transform: none; letter-spacing: 0; }
.jm-hero-source { margin: var(--jm-s-5) 0 0; font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-3); }
.jm-hero-source strong { color: var(--jm-text-2); font-weight: 600; }
.jm-hero-source cite { font-style: normal; }

/* ── Optim card (AssurScore — décision Ersin J19, honnête, pas de prix) ── */
.jm-optim { background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); overflow: hidden; box-shadow: var(--jm-shadow-optim-glow); }
.jm-optim-head { padding: 14px 18px; border-bottom: 1px solid var(--jm-line); display: flex; align-items: center; justify-content: space-between; }
.jm-optim-tag { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); display: inline-flex; align-items: center; gap: 7px; }
.jm-optim-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jm-accent); }
.jm-optim-label { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); font-weight: 600; }
.jm-optim-profile { padding: 12px 18px; border-bottom: 1px solid var(--jm-line); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.jm-optim-profile .f { display: flex; flex-direction: column; }
.jm-optim-profile .k { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; }
.jm-optim-profile .v { font-family: var(--jm-body); font-size: var(--jm-fs-small); font-weight: 600; color: var(--jm-text); }
.jm-optim-list { padding: 6px 0; }
.jm-optim-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--jm-line-2); }
.jm-optim-row:last-child { border-bottom: none; }
.jm-optim-row.is-you { background: linear-gradient(90deg, rgba(0,180,255,0.08), transparent 80%); }
.jm-optim-row .rank { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-text-3); }
.jm-optim-row.is-you .rank { color: var(--jm-accent); }
.jm-optim-row .model { font-family: var(--jm-body); font-weight: 600; font-size: 13px; color: var(--jm-text); }
.jm-optim-row .model em { font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); margin-left: 6px; }
.jm-optim-row .grade { font-family: var(--jm-display); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--jm-text); display: inline-flex; align-items: center; gap: 8px; }
.jm-optim-row .grade .dot { width: 9px; height: 9px; border-radius: 50%; }
.jm-grade-A .dot, .jm-grade-B .dot { background: var(--jm-success); }
.jm-grade-C .dot, .jm-grade-D .dot { background: var(--jm-accent); }
.jm-grade-E .dot, .jm-grade-F .dot, .jm-grade-G .dot { background: var(--jm-accent-warm); }
.jm-optim-foot { padding: 14px 18px; border-top: 1px solid var(--jm-line); }
.jm-optim-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; font-weight: 600; color: var(--jm-accent-ink); background: var(--jm-accent); padding: 11px 16px; border-radius: var(--jm-r-sm); width: 100%; justify-content: center; transition: background var(--jm-t-fast) var(--jm-ease-out); }
.jm-optim-cta:hover { background: color-mix(in oklab, var(--jm-accent), white 14%); }
.jm-optim-disclaimer { margin: 10px 0 0; font-family: var(--jm-body); font-size: var(--jm-fs-mono); color: var(--jm-text-3); line-height: 1.45; }

@media (max-width: 980px) {
  .jm-hero-inner { padding: 40px var(--jm-wrap-pad-m) 56px; }
  /* Bug V (J24) — RÉGRESSION du fix Bug L (J21) : la grille desktop a été scopée
     sous `.jm-front` (spécificité 0,2,0) mais cet override mobile était resté à
     `.jm-hero-grid` (0,1,0) → la grille 2-colonnes minmax(360px,420px) gagnait sur
     mobile, écrasait le texte (~30px) et faisait déborder l'Optim card (chevauchement
     vu par Ersin en 400×590). Fix : matcher la spécificité (0,2,0) pour que le stack
     1-colonne s'applique ≤980px. Touch targets hero garantis ≥48px ci-dessous. */
  .jm-front .jm-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .jm-hero-meta { gap: 24px; }
  /* CTA hero empilés et pleinement tappables sur petit écran (Ersin ≥48px) */
  .jm-hero-cta .jm-btn { min-height: 48px; }
}
@media (max-width: 520px) {
  /* Très petits écrans : CTA pleine largeur, alignés, lisibles (pas de wrap bancal) */
  .jm-front .jm-hero-cta { flex-direction: column; align-items: stretch; }
  .jm-front .jm-hero-cta .jm-btn { width: 100%; justify-content: center; }
}
/* H1 ligne 2 statique (accent) sous le ticker */
.jm-hero h1 .jm-hero-l2 { display: block; color: var(--jm-accent); }


/* ════════════════════════════════════════════════════════════════════════
   11. STATS STRIP (ÉTAPE 14, S9 J20) — chiffres clés honnêtes, theme-aware
   Porté du proto (.stats-strip → .jm-stats). 4 cellules, bordures sobres.
   ──────────────────────────────────────────────────────────────────────── */
/* Bug U (J23) — Ersin : la strip faisait « intrus ». Causes : double bordure
   (hero border-bottom + stats border-top) + dividers pleine hauteur = effet
   tableau de bord froid détaché. Fix intégration : pas de border-top, lift
   dégradé subtil, dividers courts centrés, nombres un peu moins dominants. */
/* Carrousel mécanique (S9 J34) — remplace la grille 4 cellules. Défilement linéaire
   infini (translateX -50% sur un track dupliqué), pause au survol/focus, statique en
   prefers-reduced-motion. GPU (transform only) → 0 layout thrashing. */
.jm-stats { border-bottom: 1px solid var(--jm-line); background: linear-gradient(180deg, color-mix(in oklab, var(--jm-bg-2), transparent 45%), transparent 72%); overflow: hidden; }
.jm-stats-marquee { position: relative; overflow: hidden; padding: 30px 0; }
/* Fondu sur les bords pour un défilement « entrant/sortant » propre. */
.jm-stats-marquee::before, .jm-stats-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none; }
.jm-stats-marquee::before { left: 0; background: linear-gradient(90deg, var(--jm-bg), transparent); }
.jm-stats-marquee::after { right: 0; background: linear-gradient(270deg, var(--jm-bg), transparent); }
.jm-stats-track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; width: max-content; animation: jm-stats-marquee 40s linear infinite; }
.jm-stats-marquee:hover .jm-stats-track, .jm-stats-track:focus-within { animation-play-state: paused; }
@keyframes jm-stats-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.jm-stat-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 52px; position: relative; }
.jm-stat-card + .jm-stat-card::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 46px; background: var(--jm-line); }
.jm-stat-n { font-family: var(--jm-display); font-size: clamp(34px, 2.8vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: var(--jm-text); line-height: 1; font-variant-numeric: tabular-nums; }
.jm-stat-l { margin-top: 12px; font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.4; max-width: 24ch; }
.jm-stat-l cite { display: block; font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); margin-top: 4px; }
@media (max-width: 768px) {
  .jm-stat-card { padding: 6px 34px; }
  .jm-stat-n { font-size: clamp(30px, 8.5vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .jm-stats-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
  .jm-stat-card[aria-hidden="true"] { display: none; }
  .jm-stats-marquee::before, .jm-stats-marquee::after { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   12. SECTION HEAD partagée + OUTILS ÉCOSYSTÈME (ÉTAPE 15, S9 J20)
   Évolution proto « Optim focus » → écosystème 3 outils LIVE + 2 « Bientôt »
   (cohérent ADR-55). Optim'Assur featured « Le plus utilisé ».
   ──────────────────────────────────────────────────────────────────────── */
.jm-sec-head { max-width: 620px; margin: 0 0 var(--jm-s-10); }
.jm-sec-num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); }
.jm-sec-head h2 { font-family: var(--jm-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: var(--jm-text); margin: var(--jm-s-3) 0 var(--jm-s-3); }
.jm-sec-sub { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); line-height: var(--jm-lh-lede); margin: 0; }

.jm-eco { padding: var(--jm-s-24) 0; background: var(--jm-bg); }
.jm-eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-4); }
.jm-eco-card {
  display: flex; flex-direction: column; gap: var(--jm-s-2);
  padding: var(--jm-s-6); background: var(--jm-bg-2);
  border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg);
  transition: border-color var(--jm-t-base) var(--jm-ease-out), transform var(--jm-t-base) var(--jm-ease-out), background var(--jm-t-base) var(--jm-ease-out);
}
a.jm-eco-card:hover { border-color: var(--jm-accent); transform: translateY(-3px); }
a.jm-eco-card:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
.jm-eco-card.is-featured { border-color: color-mix(in oklab, var(--jm-accent), transparent 55%); background: linear-gradient(160deg, rgba(0,180,255,0.08), var(--jm-bg-2) 60%); }
.jm-eco-card.is-soon { opacity: 0.6; }
.jm-eco-ic {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jm-line); border-radius: var(--jm-r-md); color: var(--jm-accent); background: var(--jm-bg);
  margin-bottom: var(--jm-s-2);
}
.jm-eco-ic svg { width: 24px; height: 24px; }
.is-featured .jm-eco-ic { color: var(--jm-accent-ink); background: var(--jm-accent); border-color: var(--jm-accent); }
.jm-eco-name { font-family: var(--jm-display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--jm-text); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jm-eco-desc { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: var(--jm-lh-body); margin: 0; flex: 1; }
.jm-eco-go { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); margin-top: var(--jm-s-2); }
.jm-eco-badge { font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); text-transform: uppercase; letter-spacing: var(--jm-ls-mono); color: var(--jm-accent); border: 1px solid var(--jm-accent); border-radius: var(--jm-r-pill); padding: 2px 8px; }
.jm-eco-soon-b { font-style: normal; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); text-transform: uppercase; letter-spacing: var(--jm-ls-mono); color: var(--jm-text-3); border: 1px solid var(--jm-line); border-radius: var(--jm-r-xs); padding: 1px 6px; }
@media (max-width: 980px) {
  .jm-eco { padding: var(--jm-s-16) 0; }
  .jm-eco-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════
   13. HOME SUITE — ÉTAPES 16 Silos · 17 Tests motos · 18 Manifesto (S9 J21)
   Porté du proto (.silos/.test-card/.manifesto → .jm-*), dual mode, scope
   .jm-front pour gagner en spécificité sur le snippet Round 1 (cf Bug L).
   ──────────────────────────────────────────────────────────────────────── */

/* Robustesse : le snippet Round 1 pose `.home h2/h3 { font-weight: medium }`
   (même spécificité que .jm-sec-head h2, chargé après → gagnait). Scope .jm-front
   (0,0,2,1) pour garder les titres de section en poids display 800. */
.jm-front .jm-sec-head h2 { font-weight: 800; letter-spacing: -0.02em; }

/* ── ÉTAPE 16 — Silos cards ── */
.jm-front .jm-silos-sec { padding: var(--jm-s-24) 0; background: var(--jm-bg); border-top: 1px solid var(--jm-line); }
.jm-silos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.jm-silo {
  position: relative; aspect-ratio: 3 / 4; min-height: 240px;
  background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-md);
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 18px;
  transition: border-color var(--jm-t-base) var(--jm-ease-out), background var(--jm-t-base) var(--jm-ease-out), transform var(--jm-t-base) var(--jm-ease-out);
}
@media (hover: hover) { .jm-silo:hover { border-color: var(--jm-accent); background: var(--jm-bg-3); transform: translateY(-3px); } }
.jm-silo:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
.jm-silo-top { display: flex; justify-content: space-between; align-items: flex-start; }
.jm-silo-head { display: inline-flex; align-items: center; gap: 10px; }
.jm-silo-ic { display: inline-flex; color: var(--jm-accent); transition: transform var(--jm-t-base) var(--jm-ease-out); }
.jm-silo-ic svg { width: 26px; height: 26px; display: block; }
@media (hover: hover) { .jm-silo:hover .jm-silo-ic { transform: scale(1.14) rotate(-3deg); } }
.jm-silo-num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); }
.jm-silo-arrow { flex: none; width: 30px; height: 30px; border: 1px solid var(--jm-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--jm-text-2); transition: border-color var(--jm-t-base) var(--jm-ease-out), color var(--jm-t-base) var(--jm-ease-out), transform var(--jm-t-base) var(--jm-ease-out); }
.jm-silo-arrow svg { display: block; }
@media (hover: hover) { .jm-silo:hover .jm-silo-arrow { border-color: var(--jm-accent); color: var(--jm-accent); transform: rotate(-45deg); } }
.jm-silo-label { font-family: var(--jm-display); font-size: clamp(20px, 1.5vw, 27px); line-height: 1; letter-spacing: -0.01em; font-weight: 700; color: var(--jm-text); }
.jm-silo-label small { display: block; font-family: var(--jm-body); font-size: var(--jm-fs-mono-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--jm-text-3); margin-top: 12px; font-weight: 500; line-height: 1.45; }
.jm-silo-count { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); }
.jm-silo-count b { color: var(--jm-accent); font-weight: 500; }
@media (max-width: 1080px) { .jm-silos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .jm-silos { grid-template-columns: 1fr 1fr; } .jm-silo { aspect-ratio: auto; min-height: 168px; padding: 16px; } }

/* ── ÉTAPE 17 — Tests motos en vedette ── */
.jm-front .jm-tests-sec { padding: var(--jm-s-24) 0; background: var(--jm-bg); border-top: 1px solid var(--jm-line); }
.jm-tests-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-6); }
.jm-test-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg);
  transition: transform var(--jm-t-slow) var(--jm-ease-out), border-color var(--jm-t-slow) var(--jm-ease-out), box-shadow var(--jm-t-slow) var(--jm-ease-out);
}
@media (hover: hover) { .jm-test-card:hover { transform: translateY(-3px); border-color: var(--jm-accent); box-shadow: var(--jm-shadow-card-hover); } }
.jm-test-card:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
.jm-test-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--jm-bg-3); }
.jm-test-img, .jm-test-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jm-t-slow) var(--jm-ease-out); }
@media (hover: hover) { .jm-test-card:hover .jm-test-img, .jm-test-card:hover .jm-test-thumb img { transform: scale(1.04); } }
.jm-test-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--jm-bg-3), var(--jm-bg-2)); }
.jm-test-badge { position: absolute; top: 12px; left: 12px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; padding: 4px 9px; background: var(--jm-accent-ink); color: var(--jm-accent); border: 1px solid var(--jm-accent); border-radius: var(--jm-r-xs); }
.jm-test-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.jm-test-meta { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; display: flex; gap: 12px; margin-bottom: 12px; }
.jm-test-title { font-family: var(--jm-display); font-size: 23px; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 10px; font-weight: 700; color: var(--jm-text); }
.jm-test-excerpt { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.55; margin: 0 0 18px; flex: 1; }
.jm-test-read { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); display: inline-flex; align-items: center; gap: 7px; }
.jm-tests-all { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--jm-s-10); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-sm); padding: 12px 18px; transition: border-color var(--jm-t-fast) var(--jm-ease-out), color var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-tests-all:hover { border-color: var(--jm-accent); color: var(--jm-accent); } }
.jm-tests-all:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
@media (max-width: 980px) { .jm-tests-grid { grid-template-columns: 1fr; } }

/* ── Bug R (J23) — Carrousel tests motos (scroll-snap, vanilla, tous les tests) ── */
.jm-carousel { position: relative; }
.jm-carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw);
  gap: var(--jm-s-6); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 16px;
  scrollbar-width: thin; scrollbar-color: var(--jm-line) transparent;
  -webkit-overflow-scrolling: touch;
}
.jm-carousel-track::-webkit-scrollbar { height: 6px; }
.jm-carousel-track::-webkit-scrollbar-thumb { background: var(--jm-line); border-radius: 3px; }
.jm-carousel-track::-webkit-scrollbar-track { background: transparent; }
.jm-carousel-track:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 4px; border-radius: var(--jm-r-md); }
.jm-carousel-item { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .jm-carousel-track { scroll-behavior: auto; } }
.jm-carousel-nav { display: flex; align-items: center; gap: 14px; margin-top: var(--jm-s-6); }
.jm-carousel-btn { flex: none; width: 44px; height: 44px; border: 1px solid var(--jm-line); border-radius: var(--jm-r-pill); background: var(--jm-bg-2); color: var(--jm-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--jm-t-fast) var(--jm-ease-out), color var(--jm-t-fast) var(--jm-ease-out), opacity var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-carousel-btn:hover:not([disabled]) { border-color: var(--jm-accent); color: var(--jm-accent); } }
.jm-carousel-btn:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 2px; }
.jm-carousel-btn[disabled] { opacity: 0.35; cursor: default; }
.jm-carousel-btn svg { display: block; }
.jm-carousel-status { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); color: var(--jm-text-3); font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }
.jm-tests-sec .jm-tests-all { margin-top: var(--jm-s-5); }

/* ── ÉTAPE 18 — Manifesto ── */
.jm-front .jm-manifesto-sec { padding: var(--jm-s-24) 0; background: var(--jm-bg); border-top: 1px solid var(--jm-line); }
.jm-manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jm-s-20); align-items: center; }
.jm-mf-tag { display: block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-accent); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; margin-bottom: var(--jm-s-6); }
/* Bug S (J23) — guillemets « » retirés (demande Ersin). Pour garder l'impact de
   « citation forte » sans les guillemets, barre d'accent verticale à gauche. */
.jm-mf-quote { font-family: var(--jm-display); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--jm-text); font-weight: 700; margin: 0; border-left: 3px solid var(--jm-accent); padding-left: 26px; }
.jm-mf-quote em { color: var(--jm-accent); font-style: normal; }
.jm-mf-body { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); line-height: 1.6; max-width: 500px; margin: var(--jm-s-6) 0 0; }
.jm-mf-body em { color: var(--jm-text); font-style: normal; font-weight: 600; }
.jm-mf-author { margin-top: var(--jm-s-8); display: inline-flex; align-items: center; gap: 12px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; }
.jm-mf-dot { flex: none; width: 7px; height: 7px; background: var(--jm-accent); border-radius: 50%; }
.jm-mf-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--jm-r-lg); overflow: hidden; border: 1px solid var(--jm-line); background: radial-gradient(120% 80% at 70% 20%, rgba(0,180,255,0.18), transparent 60%), linear-gradient(160deg, var(--jm-bg-3), var(--jm-bg-2)); }
.jm-mf-media::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.02) 22px 23px); }
:root[data-theme="light"] .jm-mf-media::after { background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.025) 22px 23px); }
.jm-mf-corner { position: absolute; top: 16px; right: 16px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; background: var(--jm-accent); color: var(--jm-accent-ink); padding: 5px 10px; border-radius: var(--jm-r-xs); }
/* Bug Q (J22) — panneau « pacte » qui remplace l'ancien bloc média vide. */
.jm-mf-media.jm-pact { aspect-ratio: auto; background: var(--jm-bg-2); border: 1px solid var(--jm-line); display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.jm-mf-media.jm-pact::after { display: none; }
.jm-pact-h { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); margin: 0 0 var(--jm-s-6); }
.jm-pact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.jm-pact li { font-family: var(--jm-body); font-size: 1.0625rem; color: var(--jm-text-2); line-height: 1.5; padding-left: 22px; position: relative; }
.jm-pact li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--jm-accent); border-radius: 50%; }
.jm-pact li b { color: var(--jm-text); font-weight: 700; }
@media (max-width: 980px) { .jm-manifesto { grid-template-columns: 1fr; gap: var(--jm-s-8); } .jm-mf-media { aspect-ratio: 16 / 10; } .jm-mf-media.jm-pact { padding: 28px; } }


/* ════════════════════════════════════════════════════════════════════════
   14. TEMPLATES ARTICLE (single.php) + ARCHIVE HUB (category.php) — A1, S9 J21
   Porté du proto (.page-head/.article-body/.hub-grid → .jm-art*/.jm-arch*/.jm-hub*).
   Classes neuves → zéro collision avec le snippet Round 1 (qui cible .entry-content).
   ⚠️ À valider en live staging avec contenu réel (cycle dédié post-deploy).
   ──────────────────────────────────────────────────────────────────────── */

/* ── En-tête article (page-head) ── */
.jm-article-page { background: var(--jm-bg); color: var(--jm-text); }
.jm-art-head { padding: 56px 0 40px; border-bottom: 1px solid var(--jm-line); }
.jm-art-crumb { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--jm-s-8); }
.jm-art-crumb a { color: var(--jm-text-3); transition: color var(--jm-t-fast) var(--jm-ease-out); }
.jm-art-crumb a:hover { color: var(--jm-accent); }
.jm-art-crumb .sep { color: var(--jm-line); }
.jm-art-crumb .here { color: var(--jm-accent); }
.jm-art-kicker { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-accent); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: var(--jm-s-5); }
/* BUG AK (S9 J29, 2e passe Ersin « encore trop grand, plus dézoomé ») : typo article
   resserrée façon Medium/Substack lu de loin — h1 ~38px (pas 48/60), h2 ~28px, h3 ~21px,
   lede 19px, corps 17px. Aucun conflit snippet (single.php isole déjà via .jm-art-body). */
.jm-art-h1 { font-family: var(--jm-display); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.375rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--jm-text); margin: 0 0 var(--jm-s-6); }
.jm-art-lede { font-family: var(--jm-body); font-size: 1.1875rem; color: var(--jm-text-2); line-height: 1.55; max-width: 680px; margin: 0; }
.jm-art-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: var(--jm-s-8); padding-top: var(--jm-s-6); border-top: 1px solid var(--jm-line-2); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; }
.jm-art-byline b { color: var(--jm-text); font-weight: 600; }
/* F5-3 A1 : règles `.jm-art-byline b a` retirées — byline = texte pur (plus de lien
   archive auteur, décision Ersin), on ne garde pas de CSS mort (leçon #164). */

/* Image à la une (hero Gemini) restaurée S9 J30 — hero contenu (cap hauteur + crop
   paysage centré, gère les sources carrées 2048² sans dominer l'écran). */
.jm-art-hero-img { margin: var(--jm-s-10) 0 0; }
.jm-art-hero-img img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; object-position: center; border-radius: var(--jm-r-lg); border: 1px solid var(--jm-line); }

/* ════════════════════════════════════════════════════════════════════════
   CORPS DE L'ARTICLE — refonte EXHAUSTIVE composants Gutenberg (S9 J31, Bug AK³)
   Niveau Medium / Substack / Stripe Blog. Scope strict .jm-art-body.
   Typo de base (p/h2/h3/h4) validée J30 (Ctrl+0) → inchangée. On élève ici
   TOUS les autres blocs : table, quote, pullquote, list, code/pre, image,
   gallery, cover, group, columns, buttons, separator, embed + encarts custom.
   ⚠️ Blocs Kadence (kt-svg-icon-list, rowlayout, advancedbtn) NON ciblés
   (exclusions :not(.kt-…)) pour ne pas casser leur rendu natif.
   ──────────────────────────────────────────────────────────────────────── */
.jm-art-body { padding: var(--jm-s-16) 0; }
.jm-art-body > .jm-wrap-narrow > * { max-width: 720px; }
/* Les tableaux et galeries peuvent respirer un peu plus large que la colonne de lecture. */
.jm-art-body > .jm-wrap-narrow > figure.wp-block-table,
.jm-art-body > .jm-wrap-narrow > .wp-block-gallery { max-width: 760px; }

/* — Paragraphe / titres / liens / strong (validés J30, inchangés) — */
.jm-art-body p { font-family: var(--jm-body); font-size: 1.0625rem; color: var(--jm-text); line-height: 1.7; margin: 0 0 var(--jm-s-6); }
.jm-art-body h2 { font-family: var(--jm-display); font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--jm-text); margin: var(--jm-s-12) 0 var(--jm-s-4); }
.jm-art-body h3 { font-family: var(--jm-display); font-size: clamp(1.12rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--jm-text); margin: var(--jm-s-10) 0 var(--jm-s-3); }
.jm-art-body h4 { font-family: var(--jm-display); font-size: 1.15rem; font-weight: 700; color: var(--jm-text); margin: var(--jm-s-8) 0 var(--jm-s-2); }
/* F5-3 A3b : la règle prose EXCLUT À LA RACINE tous les liens-boutons (Kadence,
   Gutenberg, pills .jm-*) — un bouton ne doit jamais hériter de l'underline prose.
   :where() = spécificité ZÉRO : la règle garde son poids (0,1,1) d'origine et
   n'écrase aucun override existant (.jm-affiliate-mention a, etc.). */
.jm-art-body a:where(:not(.kt-button):not(.wp-block-button__link):not([class*="jm-"][class*="btn"]):not(.jm-art-tool-card)) { color: var(--jm-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--jm-t-fast) var(--jm-ease-out); }
/* Filet site-wide : aucun lien-bouton souligné, quelle que soit la zone. */
a.kt-button, a.wp-block-button__link, a[class*="jm-"][class*="btn"], a.jm-art-tool-card, a.jm-optim-cta,
a.kt-button .kt-btn-inner-text, a.wp-block-button__link span { text-decoration: none; }
.jm-art-body a:hover { color: color-mix(in oklab, var(--jm-accent), var(--jm-text) 25%); }
.jm-art-body strong { color: var(--jm-text); font-weight: 700; }

/* — LISTES premium (puces carrées accent, numéros mono, respiration) — */
.jm-art-body ul:not(.kt-svg-icon-list),
.jm-art-body ol:not(.kt-svg-icon-list) { margin: 0 0 var(--jm-s-6); padding-left: 0; list-style: none; color: var(--jm-text); }
.jm-art-body ul:not(.kt-svg-icon-list) > li,
.jm-art-body ol:not(.kt-svg-icon-list) > li { position: relative; font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--jm-s-3); padding-left: 1.7em; }
.jm-art-body ul:not(.kt-svg-icon-list) > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--jm-accent); border-radius: 1px; }
.jm-art-body ol:not(.kt-svg-icon-list) { counter-reset: jmli; }
.jm-art-body ol:not(.kt-svg-icon-list) > li { counter-increment: jmli; padding-left: 2.1em; }
.jm-art-body ol:not(.kt-svg-icon-list) > li::before { content: counter(jmli); position: absolute; left: 0; top: 0.05em; min-width: 1.5em; font-family: var(--jm-mono); font-size: 0.82em; font-weight: 700; color: var(--jm-accent); }
.jm-art-body li ul:not(.kt-svg-icon-list), .jm-art-body li ol:not(.kt-svg-icon-list) { margin: var(--jm-s-3) 0 0; }
/* Kadence iconlist (en-tête méta articles N+2/N+3, blocs budget) : la palette Kadence
   fige #f0f0f0 par héritage → invisible en light (récidive pattern Bug AM, volet iconlist).
   Couleur SEULE, theme-aware, (0,3,0) sans !important — rendu dark inchangé (--jm-text=#f0f0f0). */
.jm-art-body .kt-svg-icon-list-items .kt-svg-icon-list-item-wrap,
.jm-art-body .kt-svg-icon-list-items .kt-svg-icon-list-text { color: var(--jm-text); }

/* — B1 F5-2 : CONCLUSION LONGUE (blockquote multi-paragraphes) —
   Le style citation display 1.45rem est pensé pour des pull-quotes COURTS ;
   les conclusions des tests (« Le verdict de ton copilote… ») sont des blockquotes
   de 2+ paragraphes → « texte géant » (Ersin F5-2). :has(p + p) = recalibre vers
   le body en gardant l'habillage premium (bande accent, fond). Fallback sans
   :has() : rendu antérieur, rien de cassé. Échelle 38/28/17 J29-J30 respectée. */
.jm-art-body blockquote:not(.wp-block-pullquote):has(p + p) {
  font-family: var(--jm-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  padding: var(--jm-s-6) var(--jm-s-6) var(--jm-s-6) var(--jm-s-8);
}
.jm-art-body blockquote:not(.wp-block-pullquote):has(p + p) p:first-child strong:first-child {
  font-family: var(--jm-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jm-accent);
}

/* — B2 F5-2 : CTA OPTIM'ASSUR DE FIN D'ARTICLE (rowlayout Kadence palette1) —
   Le bloc contenu « Cette moto te fait rêver ? / vérifie ton assurance » est un
   kb-row-layout avec fond palette1 = #00b4ff PLEIN (« banner pub », Ersin :
   « pas propre »). Restylé ici pour les 14+ articles SANS toucher aux contenus :
   surface token + halo accent subtil + radius card + texte theme-aware (les
   advancedheadings portaient du blanc pour contraster avec le bleu plein). */
.jm-art-body .kb-row-layout-wrap.kt-row-has-bg.has-theme-palette1-background-color {
  background: linear-gradient(135deg, color-mix(in oklab, var(--jm-accent), var(--jm-bg-2) 86%), var(--jm-bg-2) 70%);
  border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 70%);
  border-left: 3px solid var(--jm-accent);
  border-radius: var(--jm-r-lg);
  overflow: hidden;
}
/* !important JUSTIFIÉ (diagnostic CDP F5-2) : les headings du CTA portent
   `has-theme-palette-3-color` → règle GUTENBERG CORE `{color:...!important}`
   (#f0f0f0 figé, irrépressible par spécificité). Scopé strictement au bloc
   CTA palette1 → zéro fuite ; dark inchangé (--jm-text = #f0f0f0). */
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .wp-block-kadence-advancedheading,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color [class*="has-theme-palette"],
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color h2,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color h3,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color p {
  color: var(--jm-text) !important;
}
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color a:not(.kt-button) {
  color: var(--jm-accent);
  font-weight: 600;
}
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button {
  background: var(--jm-accent);
  color: var(--jm-accent-ink);
  border: none;
  border-radius: var(--jm-r-pill);
  font-weight: 700;
  padding: 12px 28px;
  min-height: 48px;
}
/* Kadence pose la couleur du label sur un span interne → AA dans les 2 modes */
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button .kt-btn-inner-text,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button span {
  color: var(--jm-accent-ink);
}
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button:hover {
  background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%);
  color: var(--jm-accent-ink);
}
/* N+5 A1 — SNAP couleur/fond au flip de thème (ceinture+bretelles du fix FOUC
   functions.php). Cause racine prouvée live N+5 : en STABLE le label est DÉJÀ
   correct (mesuré CDP : light #fff / dark #0d0d0d) ; le « sombre sur bleu foncé »
   d'Ersin = la frame de cross-fade quand `transition: all` (Kadence) interpole
   #0d0d0d→#fff par du gris pendant le flip dark→light tardif. On limite la
   transition au transform → couleur + fond snappent instantanément, AUCUNE frame
   grise, quel que soit le moment du flip (boot tardif OU toggle live). Dark
   inchangé (couleurs identiques, seul le fondu disparaît). Couvre les 14 CTA. */
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button .kt-btn-inner-text,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kt-button span,
.jm-art-body .wp-block-button__link {
  transition-property: transform !important;
}
/* N+5 A2 — CENTRER le bouton CTA de fin d'article (Ersin : aligné à GAUCHE sur
   MT-07, blocs de générations différentes). Le bouton est un inline-block dans
   `.wp-block-kadence-advancedbtn` (display:block + text-align:start) → collé à
   gauche. On centre le conteneur : text-align:center centre le bouton Kadence
   (inline-block), justify-content:center couvre un wrapper flex (boutons core).
   Inventaire N+5 : 14 CTA palette1 = structure Kadence uniforme. Spécificité
   (0,4,0) > règle Kadence du wrap → 0 !important nécessaire. */
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .wp-block-kadence-advancedbtn,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .kb-buttons-wrap,
.jm-art-body .kt-row-has-bg.has-theme-palette1-background-color .wp-block-buttons {
  text-align: center;
  justify-content: center;
}

/* — CITATION (core/quote) : bande accent généreuse, lettrine guillemet subtile — */
.jm-art-body blockquote:not(.wp-block-pullquote) { position: relative; border-left: 4px solid var(--jm-accent); padding: var(--jm-s-2) var(--jm-s-2) var(--jm-s-2) var(--jm-s-8); margin: var(--jm-s-10) 0; font-family: var(--jm-display); font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.4; font-weight: 600; color: var(--jm-text); background: color-mix(in oklab, var(--jm-accent), transparent 96%); border-radius: 0 var(--jm-r-md) var(--jm-r-md) 0; }
.jm-art-body blockquote:not(.wp-block-pullquote) p { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 var(--jm-s-3); }
.jm-art-body blockquote:not(.wp-block-pullquote) p:last-child { margin-bottom: 0; }
.jm-art-body blockquote cite, .jm-art-body blockquote .wp-block-quote__citation { display: block; margin-top: var(--jm-s-4); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); font-style: normal; font-weight: 400; letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); }

/* — PULLQUOTE (mise en avant centrée, bornes accent haut/bas) — */
.jm-art-body figure.wp-block-pullquote { margin: var(--jm-s-14) auto; padding: var(--jm-s-8) var(--jm-s-4); text-align: center; border-top: 2px solid var(--jm-accent); border-bottom: 2px solid var(--jm-accent); border-radius: 0; background: none; }
.jm-art-body figure.wp-block-pullquote blockquote { border: none; background: none; padding: 0; margin: 0; }
.jm-art-body figure.wp-block-pullquote p { font-family: var(--jm-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; color: var(--jm-text); margin: 0; }
.jm-art-body figure.wp-block-pullquote cite { display: block; margin-top: var(--jm-s-4); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); font-style: normal; letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); }

/* — CODE inline + bloc préformaté — */
.jm-art-body :not(pre) > code { font-family: var(--jm-mono); font-size: 0.88em; background: var(--jm-bg-3); color: var(--jm-text); padding: 0.12em 0.4em; border-radius: var(--jm-r-sm); border: 1px solid var(--jm-line-2); }
.jm-art-body pre, .jm-art-body pre.wp-block-preformatted, .jm-art-body pre.wp-block-code { font-family: var(--jm-mono); font-size: 0.875rem; line-height: 1.6; background: var(--jm-bg-3); color: var(--jm-text); padding: var(--jm-s-5); border-radius: var(--jm-r-md); border: 1px solid var(--jm-line); overflow-x: auto; margin: var(--jm-s-8) 0; }
.jm-art-body pre code { background: none; border: none; padding: 0; font-size: inherit; }

/* — IMAGES + légendes — */
.jm-art-body img, .jm-art-body figure { max-width: 100%; height: auto; border-radius: var(--jm-r-md); margin: var(--jm-s-8) auto; }
.jm-art-body figure.wp-block-image, .jm-art-body .wp-block-image figure { overflow: hidden; }
.jm-art-body figure img { margin: 0; border-radius: var(--jm-r-md); }
.jm-art-body figcaption, .jm-art-body .wp-element-caption { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); color: var(--jm-text-3); text-align: center; margin-top: var(--jm-s-3); letter-spacing: var(--jm-ls-mono); line-height: 1.5; }

/* — GALERIE (grille gap radius, hover zoom) — */
.jm-art-body figure.wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--jm-s-3); margin: var(--jm-s-10) auto; }
.jm-art-body figure.wp-block-gallery .wp-block-image, .jm-art-body figure.wp-block-gallery figure { margin: 0; border-radius: var(--jm-r-md); overflow: hidden; }
.jm-art-body figure.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jm-t-slow) var(--jm-ease-out); }
@media (hover: hover) { .jm-art-body figure.wp-block-gallery img:hover { transform: scale(1.04); } }

/* — COVER (image + overlay + texte) — */
.jm-art-body .wp-block-cover { border-radius: var(--jm-r-lg); overflow: hidden; margin: var(--jm-s-10) auto; min-height: 320px; }
.jm-art-body .wp-block-cover .wp-block-cover__background { opacity: 0.55; }
.jm-art-body .wp-block-cover .wp-block-cover__inner-container { color: #fff; }

/* — GROUP + COLUMNS — */
.jm-art-body .wp-block-group.has-background { padding: var(--jm-s-6); border-radius: var(--jm-r-lg); }
.jm-art-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--jm-s-6); margin: var(--jm-s-8) 0; }
.jm-art-body .wp-block-columns > .wp-block-column { flex: 1 1 240px; min-width: 0; }
@media (max-width: 600px) { .jm-art-body .wp-block-columns { gap: var(--jm-s-4); } .jm-art-body .wp-block-columns > .wp-block-column { flex-basis: 100%; } }

/* — BOUTONS core (mappés sur le style .jm-btn A1) — */
.jm-art-body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--jm-s-3); margin: var(--jm-s-8) 0; }
.jm-art-body .wp-block-button__link { display: inline-block; font-family: var(--jm-display); font-weight: 700; font-size: 0.95rem; line-height: 1.2; padding: 13px 24px; border-radius: var(--jm-r-pill); background: var(--jm-accent); color: var(--jm-accent-ink); border: 1px solid var(--jm-accent); text-decoration: none; transition: background var(--jm-t-fast) var(--jm-ease-out), color var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out); }
.jm-art-body .wp-block-button.is-style-outline .wp-block-button__link, .jm-art-body .wp-block-button__link.is-style-outline { background: transparent; color: var(--jm-accent); }
@media (hover: hover) { .jm-art-body .wp-block-button__link:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%); border-color: transparent; color: var(--jm-accent-ink); } }
.jm-art-body .wp-block-button__link:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }

/* — SÉPARATEURS (default / wide / dots) — */
.jm-art-body hr, .jm-art-body hr.wp-block-separator { border: none; border-top: 1px solid var(--jm-line); margin: var(--jm-s-12) auto; max-width: 100%; opacity: 1; }
.jm-art-body hr.wp-block-separator.is-style-wide { width: 100%; }
.jm-art-body hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 64px; border-top-width: 2px; border-color: var(--jm-accent); margin-left: auto; margin-right: auto; }
.jm-art-body hr.wp-block-separator.is-style-dots { border: none; text-align: center; max-width: 100%; }
.jm-art-body hr.wp-block-separator.is-style-dots::before { content: "···"; font-size: 1.6rem; letter-spacing: 0.6em; color: var(--jm-accent); }

/* — EMBED (YouTube/Twitter… responsive 16/9) — */
.jm-art-body figure.wp-block-embed { margin: var(--jm-s-10) auto; }
.jm-art-body figure.wp-block-embed .wp-block-embed__wrapper { position: relative; }
.jm-art-body figure.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.jm-art-body figure.wp-block-embed iframe { width: 100%; height: 100%; border: 0; border-radius: var(--jm-r-md); display: block; }

/* — TABLEAUX (core/table) — refonte Image 1 : header accent, zébrage, hover,
   cellules aérées, scroll horizontal responsive (Viewport Fit ADR-59) —
   2026-06-28 : min-width 32rem -> min(32rem,100%) pour que les tables 2 colonnes
   tiennent sur mobile sans scroll horizontal (desktop inchangé : 512px). */
.jm-art-body figure.wp-block-table { margin: var(--jm-s-10) auto; border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jm-art-body figure.wp-block-table > table, .jm-art-body table { width: 100%; min-width: min(32rem, 100%); border-collapse: collapse; margin: 0; font-family: var(--jm-body); font-size: 1rem; }
.jm-art-body table thead th, .jm-art-body table th { font-family: var(--jm-mono); font-size: var(--jm-fs-small); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text); font-weight: 600; text-align: left; padding: var(--jm-s-4) var(--jm-s-5); background: color-mix(in oklab, var(--jm-accent), transparent 90%); border-bottom: 2px solid color-mix(in oklab, var(--jm-accent), transparent 55%); }
.jm-art-body table th strong { font-weight: 600; }
.jm-art-body table td { padding: var(--jm-s-4) var(--jm-s-5); color: var(--jm-text); line-height: 1.5; border-bottom: 1px solid var(--jm-line-2); vertical-align: top; }
.jm-art-body table tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--jm-text), transparent 97%); }
@media (hover: hover) { .jm-art-body table tbody tr:hover td { background: color-mix(in oklab, var(--jm-accent), transparent 94%); } }
.jm-art-body table tbody tr:last-child td { border-bottom: none; }
.jm-art-body table th.has-text-align-center, .jm-art-body table td.has-text-align-center { text-align: center; }
.jm-art-body table th.has-text-align-right, .jm-art-body table td.has-text-align-right { text-align: right; }
.jm-art-body figure.wp-block-table figcaption { padding: var(--jm-s-3) var(--jm-s-5); margin: 0; text-align: left; font-style: italic; }

/* ── Cards motos A2 (S9 J33, refonte « Sélection motos » permis-a2) ──
   Remplace la table 9 colonnes (wrap aberrant) par une grille de cards
   responsive. 1 card/moto : nom + type + 3 specs + pour qui + forts/faibles
   + lien test. Theme-aware, Viewport Fit (stack mobile). */
/* Bug AN (S9 J34) — grille 2 colonnes desktop (≥880px), 1 colonne mobile.
   Centrée + élargie à 820px (le conteneur .jm-wrap-narrow plafonne à 720px pour
   le texte ; on laisse respirer les 2 cards côte à côte). Décision Ersin J34. */
.jm-art-body .jm-moto-grid { display: grid; grid-template-columns: 1fr; gap: var(--jm-s-6); margin: var(--jm-s-8) auto; max-width: 820px; }
.jm-moto-card { display: flex; flex-direction: column; padding: var(--jm-s-5); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); background: var(--jm-bg-2); transition: border-color var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out); }
/* Bug AN — neutralise le legacy `.jm-moto-card` de design-tokens.css
   (`background: var(--bg-card,#111214) !important`, dark forcé NON theme-aware,
   vestige d'une ancienne section homepage `#jm-motos` supprimée Bundle Round 2).
   Il bavait sur les cards Permis A2 → en light, texte #0d0d0d sur fond dark =
   invisible. `!important` = unique recours documenté pour battre le !important
   d'un snippet WPCode antérieur (la cause racine est aussi scopée `.home` côté
   snippet design-tokens.css). Diagnostic empirique live J34 confirmé dual mode. */
.jm-art-body .jm-moto-card { background: var(--jm-bg-2) !important; }
@media (hover: hover) { .jm-moto-card:hover { border-color: var(--jm-accent); transform: translateY(-2px); } }
.jm-moto-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jm-s-2); margin-bottom: var(--jm-s-3); }
.jm-moto-name { font-family: var(--jm-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jm-text); line-height: 1.15; }
.jm-moto-type { flex: none; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 60%); padding: 3px 9px; border-radius: var(--jm-r-pill); white-space: nowrap; }
.jm-moto-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-2); margin: 0 0 var(--jm-s-3); padding: var(--jm-s-3) 0; border-top: 1px solid var(--jm-line-2); border-bottom: 1px solid var(--jm-line-2); }
.jm-moto-spec b { display: block; font-family: var(--jm-display); font-size: 0.95rem; font-weight: 700; color: var(--jm-text); }
.jm-moto-spec span { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); }
.jm-moto-for { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); margin: 0 0 var(--jm-s-3); }
.jm-moto-for b { color: var(--jm-accent); font-weight: 600; }
.jm-moto-pf { list-style: none; margin: 0 0 var(--jm-s-4); padding: 0; display: flex; flex-direction: column; gap: 5px; }
.jm-moto-pf li { font-family: var(--jm-body); font-size: var(--jm-fs-small); line-height: 1.4; color: var(--jm-text-2); padding-left: 1.4em; position: relative; }
.jm-moto-pf li.pro::before { content: "+"; position: absolute; left: 0; color: var(--jm-success); font-weight: 700; }
.jm-moto-pf li.con::before { content: "–"; position: absolute; left: 0; color: var(--jm-text-3); font-weight: 700; }
.jm-moto-link { margin-top: auto; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.jm-moto-link:hover { color: color-mix(in oklab, var(--jm-accent), var(--jm-text) 25%); }
@media (min-width: 880px) { .jm-art-body .jm-moto-grid { grid-template-columns: repeat(2, 1fr); } }

/* ════════════ P3 — Pages Légal & Contact theme-aware (S9 J35-bis, prouvé live) ════════════
   Ces pages utilisent le template Kadence par défaut → `.content-bg` (boxed) a un fond
   #0d0d0d hardcodé (réglage global Kadence) = îlot noir en light mode. On rend la boîte,
   le texte, les liens theme-aware (scopé PID légales + contact + à propos). Refus de
   toucher au CONTENU (PID 80/82/164 intouchables) : style uniquement. Diagnostic empirique
   J35-bis : .content-bg = rgb(13,13,13) en light → après fix = var(--jm-bg-2). */
.page-id-80 .content-bg, .page-id-82 .content-bg, .page-id-164 .content-bg,
.page-id-76 .content-bg, .page-id-1141 .content-bg { background-color: var(--jm-bg-2); }
.page-id-80 .entry-content, .page-id-82 .entry-content, .page-id-164 .entry-content,
.page-id-76 .entry-content, .page-id-1141 .entry-content { color: var(--jm-text); }
.page-id-80 .entry-content :is(p, li, h1, h2, h3, h4, strong, td, th),
.page-id-82 .entry-content :is(p, li, h1, h2, h3, h4, strong, td, th),
.page-id-164 .entry-content :is(p, li, h1, h2, h3, h4, strong, td, th),
.page-id-76 .entry-content :is(p, li, h1, h2, h3, h4, strong),
.page-id-1141 .entry-content :is(p, li, h1, h2, h3, h4, strong) { color: var(--jm-text); }
.page-id-80 .entry-content a, .page-id-82 .entry-content a, .page-id-164 .entry-content a,
.page-id-76 .entry-content a, .page-id-1141 .entry-content a { color: var(--jm-accent); }

/* J39 §3.3 — Document cookies Complianz (PID 164) theme-aware. Le shortcode rend
   `#cmplz-document.cmplz-document` ; un bloc <style> LEGACY (hors repo : WPCode/Customizer
   /champ CSS Complianz) force `#cmplz-document,.cmplz-document {background:#000;color:#fff
   !important}` + `#cmplz-document a {color:#3498db}` = îlot noir en light (quick-fix
   pré-light-mode). On le neutralise avec des overrides theme-aware à spécificité
   supérieure (`.page-id-164 #cmplz-document …` = 1,1,0 > legacy 1,0,0) + !important.
   STYLE ONLY — contenu cookie INTOUCHÉ (PID 164 protégé). IDÉAL : Ersin supprime le bloc
   legacy (alors ces !important deviennent superflus). Prouvé live J39 (2 modes OK). */
.page-id-164 #cmplz-document, .page-id-164 .cmplz-document { background-color: transparent !important; color: var(--jm-text-2) !important; }
.page-id-164 #cmplz-document *, .page-id-164 .cmplz-document * { color: var(--jm-text-2) !important; background-color: transparent !important; }
.page-id-164 #cmplz-document :is(h1, h2, h3, h4, h5, h6, strong, b, th),
.page-id-164 .cmplz-document :is(h1, h2, h3, h4, h5, h6, strong, b, th) { color: var(--jm-text) !important; }
.page-id-164 #cmplz-document a, .page-id-164 .cmplz-document a { color: var(--jm-accent) !important; }
.page-id-164 #cmplz-document :is(table, th, td), .page-id-164 .cmplz-document :is(table, th, td) { border-color: var(--jm-line) !important; }

/* Encart affiliation (règle maillage 8). */
.jm-art-body .jm-affiliate-disclosure { font-size: var(--jm-fs-small); color: var(--jm-text-3); margin: var(--jm-s-6) auto; padding: var(--jm-s-3) var(--jm-s-4) var(--jm-s-3) var(--jm-s-5); background: var(--jm-bg-2); border-left: 3px solid var(--jm-accent); border-radius: 0 var(--jm-r-sm) var(--jm-r-sm) 0; line-height: 1.5; }

/* Disclaimer méthodo tests motos (règle maillage 11) — refonte Bug AK³ Image 2 :
   callout premium (band accent 3px + bg subtil + padding GÉNÉREUX). Les styles
   inline legacy (padding horizontal 0 → texte collé) sont RETIRÉS du HTML des
   articles (décision Ersin J31, MCP context=edit) → la classe gouverne seule,
   ZÉRO !important. Le <strong> sert d'amorce accent. */
.jm-art-body .jm-disclaimer-methodo { margin: var(--jm-s-10) auto; padding: var(--jm-s-5) var(--jm-s-6) var(--jm-s-5) var(--jm-s-8); background: color-mix(in oklab, var(--jm-accent), transparent 95%); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 78%); border-left: 3px solid var(--jm-accent); border-radius: 0 var(--jm-r-md) var(--jm-r-md) 0; }
.jm-art-body .jm-disclaimer-methodo p { font-family: var(--jm-body); font-style: normal; font-size: 0.9375rem; color: var(--jm-text-2); line-height: 1.65; margin: 0; }
.jm-art-body .jm-disclaimer-methodo strong { color: var(--jm-accent); font-style: normal; font-weight: 700; }
/* Mention affilié inline (1 post legacy, budget-premiere-moto) — règle maillage 8 :
   12px, texte discret. Reprise du snippet article-template.css retiré (session F5). */
.jm-art-body .jm-affiliate-mention { font-size: 0.75rem; color: var(--jm-text-3); text-align: center; line-height: 1.5; margin: calc(-1 * var(--jm-s-3)) 0 var(--jm-s-8); }
.jm-art-body .jm-affiliate-mention a { color: var(--jm-text-2); text-decoration: underline; text-underline-offset: 2px; }
/* Dual CTA (1 post legacy, comparatif-assureurs) : la grid 2 col est en style INLINE dans
   le contenu → !important justifié (seul moyen CSS de la replier en 1 colonne mobile). */
@media (max-width: 640px) {
	.jm-art-body .jm-dual-cta { grid-template-columns: 1fr !important; }
}

.jm-art-pagelinks { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); margin-top: var(--jm-s-8); display: flex; gap: 8px; }

/* ── CTA final article ── */
.jm-art-cta { padding: 0 0 var(--jm-s-20); }
/* Bloc outils contextuel fin d'article (S9 J29) — 3 cartes, la pertinente d'abord. */
.jm-art-tools-head { margin-bottom: var(--jm-s-6); }
.jm-art-tools-head h2 { font-family: var(--jm-display); font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--jm-text); margin: var(--jm-s-1) 0 0; }
.jm-art-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-4); }
.jm-art-tool-card { position: relative; display: flex; flex-direction: column; gap: var(--jm-s-1); padding: var(--jm-s-5); border-radius: var(--jm-r-md); border: 1px solid var(--jm-line); background: var(--jm-bg-2); text-decoration: none; transition: border-color var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out); }
.jm-art-tool-card:hover { border-color: var(--jm-accent); transform: translateY(-2px); }
.jm-art-tool-card.is-reco { border-color: color-mix(in oklab, var(--jm-accent), transparent 45%); background: linear-gradient(150deg, color-mix(in oklab, var(--jm-accent), transparent 90%), var(--jm-bg-2) 60%); }
.jm-art-tool-tag { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); }
.jm-art-tool-name { font-family: var(--jm-display); font-weight: 700; font-size: 1.0625rem; color: var(--jm-text); }
.jm-art-tool-desc { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.5; flex: 1; }
.jm-art-tool-go { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); margin-top: var(--jm-s-3); }
@media (max-width: 720px) { .jm-art-tools { grid-template-columns: 1fr; } }

/* ── Archive hub (category.php) ── */
.jm-archive-page { background: var(--jm-bg); color: var(--jm-text); }
.jm-arch-head { padding: 56px 0 40px; border-bottom: 1px solid var(--jm-line); }
.jm-arch-head .jm-sec-num { display: block; margin: var(--jm-s-6) 0 var(--jm-s-3); }
.jm-arch-h1 { font-family: var(--jm-display); font-weight: 800; font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--jm-text); margin: 0 0 var(--jm-s-4); }
.jm-arch-desc { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); line-height: var(--jm-lh-lede); max-width: 640px; }
.jm-arch-count { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); margin: var(--jm-s-5) 0 0; }
.jm-arch-count b { color: var(--jm-accent); font-weight: 500; }
.jm-arch-list { padding: var(--jm-s-16) 0 var(--jm-s-24); }
.jm-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-6); }
.jm-hub-card { background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); overflow: hidden; transition: transform var(--jm-t-slow) var(--jm-ease-out), border-color var(--jm-t-slow) var(--jm-ease-out); }
@media (hover: hover) { .jm-hub-card:hover { transform: translateY(-3px); border-color: var(--jm-accent); } }
.jm-hub-card > a { display: flex; flex-direction: column; height: 100%; }
.jm-hub-card a:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
.jm-hub-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--jm-bg-3); }
.jm-hub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jm-t-slow) var(--jm-ease-out); }
@media (hover: hover) { .jm-hub-card:hover .jm-hub-thumb img { transform: scale(1.04); } }
.jm-hub-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--jm-bg-3), var(--jm-bg-2)); }
.jm-hub-num { position: absolute; top: 12px; left: 12px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); color: var(--jm-text); background: rgba(13,13,13,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: var(--jm-r-xs); }
:root[data-theme="light"] .jm-hub-num { color: #fff; background: rgba(13,13,13,0.55); }
.jm-hub-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.jm-hub-meta { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; display: flex; gap: 12px; margin-bottom: 10px; }
.jm-hub-title { font-family: var(--jm-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; color: var(--jm-text); margin: 0 0 10px; }
.jm-hub-excerpt { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.55; margin: 0 0 16px; flex: 1; }
.jm-hub-read { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); }
.jm-arch-empty { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); padding: var(--jm-s-12) 0; }

/* Bande CTA outil contextuel des hubs (S9 J31, Section 4 — DRY 5 hubs). */
.jm-arch-cta-wrap { padding: 0 0 var(--jm-s-20); }
.jm-arch-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--jm-s-6); flex-wrap: wrap; padding: var(--jm-s-8); border-radius: var(--jm-r-lg); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 68%); background: linear-gradient(135deg, color-mix(in oklab, var(--jm-accent), transparent 90%), var(--jm-bg-2) 68%); }
.jm-arch-cta-txt { flex: 1 1 320px; }
.jm-arch-cta-txt h2 { font-family: var(--jm-display); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -0.015em; color: var(--jm-text); margin: var(--jm-s-1) 0 var(--jm-s-2); }
.jm-arch-cta-txt p { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.55; margin: 0; max-width: 56ch; }
.jm-arch-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--jm-display); font-weight: 700; font-size: 0.95rem; padding: 13px 24px; border-radius: var(--jm-r-pill); background: var(--jm-accent); color: var(--jm-accent-ink); text-decoration: none; border: 1px solid var(--jm-accent); transition: transform var(--jm-t-fast) var(--jm-ease-out), background var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-arch-cta-btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%); } }
.jm-arch-cta-btn:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
@media (max-width: 600px) { .jm-arch-cta { flex-direction: column; align-items: flex-start; } .jm-arch-cta-btn { width: 100%; justify-content: center; } }

/* ════════════════════════════════════════════════════════════════════════
   PAGES MÈRES PILIERS — page-piliers.php (S9 J32, chef-d'œuvre)
   Hero riche + contenu éditorial stylé (.jm-art-body) + guides (.jm-hub-grid)
   + outil (.jm-arch-cta) + cross-piliers. Vertical stack, Viewport Fit ADR-59.
   ──────────────────────────────────────────────────────────────────────── */
.jm-pilier-page { background: var(--jm-bg); color: var(--jm-text); }

/* A. Hero pilier */
.jm-pilier-hero { padding: var(--jm-s-14) 0 var(--jm-s-12); border-bottom: 1px solid var(--jm-line); background: linear-gradient(160deg, color-mix(in oklab, var(--jm-accent), transparent 92%), transparent 55%); }
.jm-pilier-hero .jm-art-crumb { margin-bottom: var(--jm-s-8); }
.jm-pilier-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--jm-s-10); align-items: center; }
.jm-pilier-eyebrow { display: block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); margin-bottom: var(--jm-s-4); }
.jm-pilier-h1 { font-family: var(--jm-display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--jm-text); margin: 0 0 var(--jm-s-5); max-width: 17ch; }
/* Bug AM (J33) : Kadence pose un -webkit-text-fill-color clair sur les titres
   (h1 ≈ rgb(247,248,248)) → blanc sur blanc en light. On force theme-aware avec
   une spécificité 0,2,0 (bat l'override Kadence, ZÉRO !important). */
.jm-pilier-hero .jm-pilier-h1 { color: var(--jm-text); -webkit-text-fill-color: var(--jm-text); }
/* Bug AM défense (J33) : les Kadence advancedheading SANS couleur explicite héritent
   de la palette Kadence (#f0f0f0, pensée dark) → invisibles en light. Scope étroit
   (corps de contenu + light + pas de classe has-text-color) → fixe les autres pages
   mères/articles sans override global --global-palette risqué (mapping complet = J34). */
:root[data-theme="light"] .jm-art-body .wp-block-kadence-advancedheading:not([class*="has-text-color"]),
:root[data-theme="light"] .jm-pilier-body .wp-block-kadence-advancedheading:not([class*="has-text-color"]) {
  color: var(--jm-text);
  -webkit-text-fill-color: var(--jm-text);
}
.jm-pilier-sub { font-family: var(--jm-body); font-size: var(--jm-fs-lede); line-height: 1.55; color: var(--jm-text-2); max-width: 60ch; margin: 0 0 var(--jm-s-6); }
.jm-pilier-stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--jm-s-8); margin: 0 0 var(--jm-s-8); padding: 0; }
.jm-pilier-stats li { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); }
.jm-pilier-stats b { display: block; font-family: var(--jm-display); font-size: 1.75rem; font-weight: 800; color: var(--jm-text); letter-spacing: -0.02em; }
.jm-pilier-cta-row { display: flex; flex-wrap: wrap; gap: var(--jm-s-3); }
.jm-pilier-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--jm-display); font-weight: 700; font-size: 0.95rem; padding: 13px 24px; border-radius: var(--jm-r-pill); text-decoration: none; border: 1px solid transparent; transition: transform var(--jm-t-fast) var(--jm-ease-out), background var(--jm-t-fast) var(--jm-ease-out), border-color var(--jm-t-fast) var(--jm-ease-out); }
.jm-pilier-btn--primary { background: var(--jm-accent); color: var(--jm-accent-ink); border-color: var(--jm-accent); }
.jm-pilier-btn--ghost { background: transparent; color: var(--jm-text); border-color: var(--jm-line); }
@media (hover: hover) {
  .jm-pilier-btn--primary:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--jm-accent), var(--jm-text) 18%); }
  .jm-pilier-btn--ghost:hover { border-color: var(--jm-accent); color: var(--jm-accent); }
}
.jm-pilier-btn:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
.jm-pilier-hero-aside { display: grid; place-items: center; }
.jm-pilier-hero-ic { display: grid; place-items: center; width: 112px; height: 112px; border-radius: var(--jm-r-lg); background: color-mix(in oklab, var(--jm-accent), transparent 88%); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 55%); color: var(--jm-accent); }
.jm-pilier-hero-ic svg { width: 52px; height: 52px; }

/* B. Corps éditorial : réutilise .jm-art-body (J31). */
.jm-pilier-body { padding: var(--jm-s-14) 0 var(--jm-s-12); }

/* En-têtes de section communs */
.jm-pilier-sec-head { margin-bottom: var(--jm-s-8); }
.jm-pilier-sec-head h2 { font-family: var(--jm-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--jm-text); margin: var(--jm-s-2) 0 0; }

/* C. Guides du pilier (réutilise .jm-hub-grid / .jm-hub-card) */
.jm-pilier-guides { padding: var(--jm-s-12) 0; border-top: 1px solid var(--jm-line); }
.jm-pilier-alllink { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--jm-s-8); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); transition: color var(--jm-t-fast) var(--jm-ease-out); }
.jm-pilier-alllink:hover { color: color-mix(in oklab, var(--jm-accent), var(--jm-text) 25%); }

/* D. Outil dédié (réutilise .jm-arch-cta) — carte COMPACTE (D, 2026-06-24 : était trop
   haute en fin de page mère ; réduction CIBLÉE au contexte pilier → les archives gardent
   .jm-arch-cta intact). Carte 184->150px, section 280->214px (validé live dark+light /equipement/). */
.jm-pilier-tool-wrap { padding: var(--jm-s-6) 0 var(--jm-s-10); }
.jm-pilier-tool-wrap .jm-arch-cta { padding: 20px var(--jm-s-6); gap: 20px; }
.jm-pilier-tool-wrap .jm-arch-cta-txt h2 { font-size: clamp(1.12rem, 1.5vw, 1.35rem); margin: 2px 0 6px; }
.jm-pilier-tool-wrap .jm-arch-cta-txt p { max-width: 60ch; }
.jm-pilier-tool-wrap .jm-arch-cta-btn { padding: 11px 22px; font-size: 0.9rem; }

/* E. Cross-piliers */
.jm-pilier-cross { padding: var(--jm-s-12) 0 var(--jm-s-20); border-top: 1px solid var(--jm-line); }
.jm-pilier-cross-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jm-s-4); }
.jm-pilier-cross-card { display: flex; align-items: center; gap: var(--jm-s-3); padding: var(--jm-s-4); border: 1px solid var(--jm-line); border-radius: var(--jm-r-md); background: var(--jm-bg-2); text-decoration: none; transition: border-color var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-pilier-cross-card:hover { border-color: var(--jm-accent); transform: translateY(-2px); } }
.jm-pilier-cross-card:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 2px; }
.jm-pilier-cross-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--jm-r-sm); background: color-mix(in oklab, var(--jm-accent), transparent 86%); color: var(--jm-accent); }
.jm-pilier-cross-ic svg { width: 20px; height: 20px; }
.jm-pilier-cross-t { flex: 1; min-width: 0; font-family: var(--jm-display); font-weight: 700; font-size: 0.95rem; color: var(--jm-text); }
.jm-pilier-cross-t .num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); color: var(--jm-text-3); }
.jm-pilier-cross-arr { flex: none; color: var(--jm-accent); }

/* Responsive piliers */
@media (max-width: 900px) {
  .jm-pilier-hero-grid { grid-template-columns: 1fr; gap: var(--jm-s-6); }
  .jm-pilier-hero-aside { justify-self: start; }
  .jm-pilier-cross-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .jm-pilier-stats { gap: var(--jm-s-5); }
  .jm-pilier-cross-grid { grid-template-columns: 1fr; }
  .jm-pilier-btn { width: 100%; justify-content: center; }
}
.jm-arch-pagination { margin-top: var(--jm-s-16); font-family: var(--jm-mono); font-size: var(--jm-fs-mono); }
.jm-arch-pagination .page-numbers { padding: 8px 12px; border: 1px solid var(--jm-line); border-radius: var(--jm-r-sm); color: var(--jm-text-2); margin: 0 3px; transition: border-color var(--jm-t-fast) var(--jm-ease-out), color var(--jm-t-fast) var(--jm-ease-out); }
.jm-arch-pagination .page-numbers.current { background: var(--jm-accent); color: var(--jm-accent-ink); border-color: var(--jm-accent); }
@media (hover: hover) { .jm-arch-pagination a.page-numbers:hover { border-color: var(--jm-accent); color: var(--jm-accent); } }
@media (max-width: 1080px) { .jm-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .jm-hub-grid { grid-template-columns: 1fr; } .jm-art-body { padding: var(--jm-s-12) 0; } }


/* ════════════════════════════════════════════════════════════════════════
   15. ÉCO « Bientôt » séparé + ÉTAPE 19 Personas + ÉTAPE 20 CTA final (S9 J22)
   ──────────────────────────────────────────────────────────────────────── */

/* ── Éco : bande « Bientôt » (option C — supprime l'orphelin 3+2, contraste plein) ── */
.jm-eco-soon { margin-top: var(--jm-s-12); padding-top: var(--jm-s-8); border-top: 1px solid var(--jm-line); display: flex; align-items: center; gap: var(--jm-s-8); flex-wrap: wrap; }
.jm-eco-soon-label { flex: none; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-text-3); }
.jm-eco-soon-row { display: flex; gap: var(--jm-s-6); flex-wrap: wrap; flex: 1; }
.jm-eco-soon-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--jm-bg-2); border: 1px dashed var(--jm-line); border-radius: var(--jm-r-md); flex: 1 1 240px; }
.jm-eco-soon-ic { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jm-line); border-radius: var(--jm-r-sm); color: var(--jm-text-3); }
.jm-eco-soon-ic svg { width: 20px; height: 20px; }
.jm-eco-soon-txt { display: flex; flex-direction: column; gap: 2px; font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.4; }
.jm-eco-soon-txt b { font-family: var(--jm-display); font-size: 1rem; font-weight: 700; color: var(--jm-text); }
@media (max-width: 640px) { .jm-eco-soon { flex-direction: column; align-items: flex-start; gap: var(--jm-s-4); } .jm-eco-soon-row { flex-direction: column; width: 100%; } }

/* ── ÉTAPE 19 — Personas (qcards) ── */
.jm-front .jm-personas-sec { padding: var(--jm-s-24) 0; background: var(--jm-bg); border-top: 1px solid var(--jm-line); }
.jm-qcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jm-s-6); }
.jm-qcard { display: grid; grid-template-columns: 64px 1fr; gap: var(--jm-s-6); padding: var(--jm-s-8); background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-left: 2px solid var(--jm-accent); border-radius: var(--jm-r-lg); }
.jm-qcard-av { flex: none; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(150deg, var(--jm-accent), color-mix(in oklab, var(--jm-accent), var(--jm-text) 35%)); color: var(--jm-accent-ink); font-family: var(--jm-display); font-size: 28px; font-weight: 800; }
.jm-qcard-tag { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); }
.jm-qcard-name { font-family: var(--jm-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jm-text); margin: 8px 0 12px; }
.jm-qcard-ctx { font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.6; margin: 0 0 18px; }
.jm-qcard-ctx strong { color: var(--jm-text); font-weight: 700; }
.jm-qcard-cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-accent); transition: gap var(--jm-t-fast) var(--jm-ease-out); }
@media (hover: hover) { .jm-qcard-cta:hover { gap: 11px; } }
.jm-qcard-cta:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
@media (max-width: 900px) { .jm-qcards { grid-template-columns: 1fr; } .jm-qcard { grid-template-columns: 56px 1fr; padding: var(--jm-s-6); } .jm-qcard-av { width: 56px; height: 56px; font-size: 24px; } }

/* ── ÉTAPE 20 — CTA final + transition footer ── */
.jm-front .jm-final { padding: var(--jm-s-24) 0; border-top: 1px solid var(--jm-line); background: radial-gradient(120% 100% at 50% 0%, rgba(0,180,255,0.12), transparent 60%), var(--jm-bg); }
.jm-final-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.jm-final .jm-sec-num { display: block; margin-bottom: var(--jm-s-4); }
.jm-final-h2 { font-family: var(--jm-display); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; color: var(--jm-text); margin: 0 0 var(--jm-s-5); }
.jm-final-sub { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); line-height: var(--jm-lh-lede); margin: 0 auto var(--jm-s-8); max-width: 560px; }
.jm-final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════════════════════
   11. PAGE OUTIL OPTIM'ASSUR — page-optimassur.php (Bundle Round 2, S9 J24)
   Wrapper éditorial A1 autour de l'outil (snippet optimassur-v2.js, qui cible
   .entry-content). Dual mode pour les sections éditoriales ; zone outil en
   « console » sombre assumée tant que le refactor dual-mode de l'outil n'est
   pas fait (audit J24 P1). Réutilise .jm-hero / .jm-sec-head / .jm-final.
   ──────────────────────────────────────────────────────────────────────── */

/* Ancres : compense la nav fixe au scroll (CTA « Lance ton AssurScore » etc.) */
.jm-optim-page #optim-tool, .jm-optim-page #optim-comment, .jm-optim-page #optim-faq { scroll-margin-top: 92px; }

/* Hero outil : centré, colonne unique (pas d'Optim card) */
.jm-tool-hero-inner { max-width: 880px; margin: 0 auto; text-align: center; padding-bottom: var(--jm-s-16); }
.jm-tool-hero .jm-hero-eyebrow { justify-content: center; }
.jm-tool-page .jm-hero-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.jm-tool-page .jm-hero-cta { justify-content: center; }
.jm-tool-stats { justify-content: center; }
.jm-tool-hero .jm-hero-source { max-width: 660px; margin-left: auto; margin-right: auto; color: var(--jm-text-2); }
.jm-tool-hero .jm-hero-source a { color: var(--jm-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.jm-tool-hero .jm-hero-source a:hover { text-decoration: none; }
.jm-hero-source-aff { display: inline-block; margin-left: 4px; font-size: 0.85em; color: var(--jm-text-2); font-style: italic; }

/* Sections éditoriales */
.jm-front .jm-tool-sec { padding: var(--jm-s-24) 0; background: var(--jm-bg); border-top: 1px solid var(--jm-line); }
.jm-tool-steps-sec .jm-sec-head, .jm-tool-scale-sec .jm-sec-head { max-width: 720px; }
/* Bug AB (J25) : le sous-titre sous chaque H2 (.jm-sec-head p) n'avait pas de
   couleur explicite → héritait une couleur claire → invisible (blanc/blanc) en
   light mode. Couleur theme-aware (corrige home + page outil). */
.jm-sec-head p { color: var(--jm-text-2); }
.jm-sec-head p strong { color: var(--jm-text); }

/* 3 étapes */
.jm-tool-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-s-6); counter-reset: none; }
.jm-tool-step { background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); padding: var(--jm-s-8); }
.jm-tool-step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(150deg, var(--jm-accent), color-mix(in oklab, var(--jm-accent), var(--jm-text) 35%)); color: var(--jm-accent-ink); font-family: var(--jm-display); font-size: 22px; font-weight: 800; margin-bottom: var(--jm-s-5); }
.jm-tool-step h3 { font-family: var(--jm-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jm-text); margin: 0 0 var(--jm-s-3); }
.jm-tool-step p { font-family: var(--jm-body); font-size: var(--jm-fs-body); color: var(--jm-text-2); line-height: 1.6; margin: 0; }

/* Échelle A–G (style éco-score) */
.jm-scale { display: flex; gap: 6px; margin: 0 0 var(--jm-s-4); }
.jm-scale-seg { flex: 1; display: flex; align-items: center; justify-content: center; height: 64px; border-radius: 10px; font-family: var(--jm-display); font-size: 1.6rem; font-weight: 800; color: var(--seg); background: color-mix(in oklab, var(--seg), transparent 84%); border-bottom: 3px solid var(--seg); }
.jm-scale-legend { display: flex; justify-content: space-between; gap: 12px; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-2); }

/* Zone outil — theme-aware (Bug AA J25 : l'outil v3 adapte ses couleurs au mode,
   fini le « console sombre forcé ». La zone suit le thème du site). */
.jm-tool-zone { background: var(--jm-bg); border-top: 1px solid var(--jm-line); border-bottom: 1px solid var(--jm-line); padding: var(--jm-s-12) 0 var(--jm-s-24); }
.jm-tool-zone-head { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 auto var(--jm-s-6); padding-bottom: var(--jm-s-4); border-bottom: 1px solid var(--jm-line); }
.jm-tool-zone-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--jm-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--jm-accent), transparent 86%); flex: none; }
.jm-tool-zone-label { font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-2); }
.jm-tool-zone .entry-content { max-width: none; }
.jm-tool-noscript { max-width: 640px; margin: var(--jm-s-8) auto; padding: var(--jm-s-6); border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 55%); border-radius: var(--jm-r-lg); color: var(--jm-text); font-family: var(--jm-body); text-align: center; }

/* FAQ accordéon */
.jm-tool-faq { display: flex; flex-direction: column; gap: var(--jm-s-3); }
.jm-tool-faq-item { background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-lg); overflow: hidden; }
.jm-tool-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--jm-s-4); padding: var(--jm-s-6) var(--jm-s-8); font-family: var(--jm-display); font-size: 1.05rem; font-weight: 700; color: var(--jm-text); }
.jm-tool-faq-item summary::-webkit-details-marker { display: none; }
.jm-tool-faq-item summary:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: -2px; }
.jm-faq-ic { flex: none; position: relative; width: 16px; height: 16px; }
.jm-faq-ic::before, .jm-faq-ic::after { content: ""; position: absolute; background: var(--jm-accent); border-radius: 2px; transition: transform var(--jm-t-base) var(--jm-ease-out), opacity var(--jm-t-base) var(--jm-ease-out); }
.jm-faq-ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
.jm-faq-ic::after { top: 0; left: 7px; width: 2px; height: 16px; }
.jm-tool-faq-item[open] .jm-faq-ic::after { opacity: 0; transform: rotate(90deg); }
/* Bug Z (J25) : --jm-s-7 n'existe pas → tout le shorthand `padding` était invalidé
   par le CSS → réponses collées aux bords. Fix avec des tokens valides. */
.jm-tool-faq-a { padding: 0 var(--jm-s-8) var(--jm-s-6); }
.jm-tool-faq-a p { font-family: var(--jm-body); font-size: var(--jm-fs-body); color: var(--jm-text-2); line-height: 1.65; margin: 0; }

/* Disclosure partenaires L121-1 */
.jm-tool-disclosure { background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-left: 2px solid var(--jm-accent); border-radius: var(--jm-r-lg); padding: var(--jm-s-6) var(--jm-s-8); font-family: var(--jm-body); font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.6; font-style: normal; }
.jm-tool-disclosure strong { color: var(--jm-text); font-weight: 700; }

/* CTA final + gros bouton */
.jm-tool-final .jm-final-inner { display: flex; flex-direction: column; align-items: center; gap: var(--jm-s-5); }
.jm-tool-final h2 { font-family: var(--jm-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; color: var(--jm-text); margin: 0; }
.jm-tool-final p { font-family: var(--jm-body); font-size: var(--jm-fs-lede); color: var(--jm-text-2); line-height: var(--jm-lh-lede); margin: 0; max-width: 560px; }
.jm-btn-lg { padding: 18px 30px; font-size: 16px; }

/* Responsive page outil */
@media (max-width: 860px) {
  .jm-tool-steps { grid-template-columns: 1fr; }
  .jm-scale-seg { height: 52px; font-size: 1.3rem; }
}
@media (max-width: 520px) {
  .jm-tool-page .jm-hero-cta { flex-direction: column; align-items: stretch; }
  .jm-tool-page .jm-hero-cta .jm-btn { width: 100%; justify-content: center; }
  .jm-scale { gap: 3px; }
  .jm-scale-seg { height: 44px; font-size: 1.05rem; border-radius: 7px; }
  /* FAQ : padding latéral réduit mais respirant sur petit écran (Bug Z) */
  .jm-tool-faq-item summary { padding: var(--jm-s-4) var(--jm-s-5); }
  .jm-tool-faq-a { padding: 0 var(--jm-s-5) var(--jm-s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .jm-faq-ic::before, .jm-faq-ic::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   12. FIX SOURCE-ORDER LOGO FOOTER PETITS ÉCRANS (Bug Viewport Fit, S9 J26)
   La réduction J25 du logo footer (≤360px) était placée AVANT la définition de
   base `.jm-foot-logo .jm-logo-word{font-size:34px}` (ligne ~692) → même
   spécificité (0,2,0) mais écrasée par l'ordre source → wordmark restait 34px
   (245px) → 10px de scroll horizontal @320px. Repositionnée ici (fin de fichier)
   pour gagner l'ordre source. Cohérent ADR-59 « Viewport Fit ».
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) { .jm-foot-logo .jm-logo-word { font-size: 26px; } }
@media (max-width: 360px) {
  .jm-foot-logo .jm-logo-word { font-size: 21px; }
  .jm-foot-logo .jm-logo-mark img { height: 40px; }
}

/* ════════════════════════════ PAGE À PROPOS (Bug AQ-design, S9 J36) ════════════════════════════
   Layout A1 : hero 2 colonnes (texte + portrait) + contenu éditorial d'Ersin (préservé, stylé
   .jm-art-body) + cards outils + mentions FIABSYS. Pattern « texte gauche + visuel droite ». */
.jm-apropos-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: var(--jm-s-8); align-items: center;
}
.jm-apropos-hero-txt { min-width: 0; }
.jm-apropos-hero-media { justify-self: center; }
.jm-apropos-hero-media img {
  display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: var(--jm-r-lg);
  border: 1px solid var(--jm-line); box-shadow: 0 24px 60px -28px rgba(0,0,0,.5);
}
@media (min-width: 900px) {
  .jm-apropos-hero-inner { grid-template-columns: 1.3fr 0.7fr; gap: var(--jm-s-12); }
  .jm-apropos-hero-media { justify-self: end; }
  .jm-apropos-hero-media img { max-width: 380px; }
}

/* Cards outils gratuits (grille 3 colonnes desktop) */
.jm-apropos-tools-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--jm-s-4); margin-top: var(--jm-s-8);
}
@media (min-width: 760px) { .jm-apropos-tools-grid { grid-template-columns: repeat(3, 1fr); } }
.jm-apropos-tool-card {
  display: flex; flex-direction: column; gap: var(--jm-s-2);
  padding: var(--jm-s-6); border-radius: var(--jm-r-md);
  background: var(--jm-bg-2); border: 1px solid var(--jm-line);
  transition: border-color var(--jm-t-fast) var(--jm-ease-out), transform var(--jm-t-fast) var(--jm-ease-out);
}
@media (hover: hover) { .jm-apropos-tool-card:hover { border-color: var(--jm-accent); transform: translateY(-3px); } }
.jm-apropos-tool-card:focus-visible { outline: 2px solid var(--jm-accent); outline-offset: 2px; }
.jm-apropos-tool-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--jm-r-sm);
  background: color-mix(in oklab, var(--jm-accent), transparent 84%); color: var(--jm-accent);
  border: 1px solid color-mix(in oklab, var(--jm-accent), transparent 60%);
}
.jm-apropos-tool-l { font-family: var(--jm-display); font-size: 1.05rem; font-weight: 700; color: var(--jm-text); }
.jm-apropos-tool-d { font-size: var(--jm-fs-small); color: var(--jm-text-2); line-height: 1.45; }

/* Mentions FIABSYS */
.jm-apropos-legal { text-align: center; color: var(--jm-text-3); font-size: var(--jm-fs-small); }
.jm-apropos-legal p { margin: 0 0 var(--jm-s-2); }
.jm-apropos-legal a { color: var(--jm-text-2); border-bottom: 1px solid var(--jm-line); }
.jm-apropos-legal a:hover { color: var(--jm-accent); border-color: var(--jm-accent); }
.jm-apropos-legal-links span { margin: 0 8px; color: var(--jm-line); }

/* ============================================================
   VERDICT /10 — bloc test moto (ÉTAPE 24 · J37) · shortcode [jm_verdict]
   Distinct d'AssurScore A-G : jauge numérique conique + barres par critère.
   Theme-aware (tokens dual-mode), a11y, responsive.
   ============================================================ */
.jm-verdict {
  margin: var(--jm-s-10) 0; padding: var(--jm-s-8);
  background: var(--jm-bg-2); border: 1px solid var(--jm-line); border-radius: var(--jm-r-md, 12px);
}
.jm-verdict-head { margin-bottom: var(--jm-s-6); }
.jm-verdict-eyebrow {
  font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs, 0.72rem);
  letter-spacing: var(--jm-ls-mono, 0.08em); text-transform: uppercase; color: var(--jm-accent);
}
.jm-verdict-moto { font-family: var(--jm-display); font-size: 1.6rem; font-weight: 700; color: var(--jm-text); margin: 4px 0 0; line-height: 1.1; }
.jm-verdict-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--jm-s-8); align-items: center; }
.jm-verdict-gauge {
  --jm-verdict-deg: 0deg;
  width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--jm-accent) var(--jm-verdict-deg), color-mix(in oklab, var(--jm-line), transparent 30%) 0);
  display: grid; place-items: center;
}
.jm-verdict-gauge-inner { width: 104px; height: 104px; border-radius: 50%; background: var(--jm-bg); display: grid; place-items: center; align-content: center; }
.jm-verdict-score { font-family: var(--jm-display); font-size: 2.6rem; font-weight: 700; color: var(--jm-text); line-height: 1; }
.jm-verdict-score-max { font-family: var(--jm-mono); font-size: 0.8rem; color: var(--jm-text-3); }
.jm-verdict-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jm-verdict-crit { display: grid; grid-template-columns: 1fr 90px 28px; gap: 12px; align-items: center; }
.jm-verdict-crit-label { font-size: var(--jm-fs-small); color: var(--jm-text-2); }
.jm-verdict-bar { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--jm-line), transparent 20%); overflow: hidden; }
.jm-verdict-bar-fill { display: block; height: 100%; background: var(--jm-accent); border-radius: 3px; }
.jm-verdict-crit-score { font-family: var(--jm-mono); font-size: 0.85rem; color: var(--jm-text); text-align: right; }
.jm-verdict-disclaimer { margin: var(--jm-s-6) 0 0; font-size: 0.78rem; font-style: italic; color: var(--jm-text-3); line-height: 1.5; border-top: 1px solid var(--jm-line); padding-top: var(--jm-s-4); }
@media (max-width: 600px) {
  .jm-verdict-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .jm-verdict-criteria { width: 100%; }
  .jm-verdict-crit { grid-template-columns: 1fr 1fr 28px; text-align: left; }
}


/* ════════════════════════════════════════════════════════════════════
   J38 — Bundle visuel : méga-menu AZ-1/2/3 + pages légales RGPD A1
   Diagnostic + validation injection DevTools : tmp-diagnostic (S9 J38).
   ════════════════════════════════════════════════════════════════════ */

/* AZ-1/2/3 méga-menu silos. Cause live prouvée : .jm-mega-feat / .jm-mega-hub
   en display:inline-flex (rétrécis à 288/344 dans un panneau de 548) + panneau
   ancré left:0 sur .jm-nav-links (désync des piliers de droite). Validé injection :
   feat 288→514, hub 344→514 centré, Sécurité ancré bord droit (823→1123). */
.jm-nav-links > .jm-nav-item.has-mega:nth-last-child(-n+2) > .jm-mega--silo { left: auto; right: 0; }
.jm-mega--silo > .jm-mega-feat { display: flex; width: 100%; }
.jm-mega--silo > .jm-mega-hub { display: block; width: 100%; text-align: center; }

/* Pages légales RGPD (PID 80/82/164) — template page-legale.php. STYLE ONLY :
   contenu juridique L121-1 jamais touché (the_content() brut). Hero compact +
   colonne lecture 720px + Manrope headings + footer FIABSYS EI. Theme-aware. */
.jm-legal-hero { padding: var(--jm-s-20) var(--jm-wrap-pad-d) var(--jm-s-6); border-bottom: 1px solid var(--jm-line); }
.jm-legal-hero-inner { max-width: 720px; margin: 0 auto; }
.jm-legal-eyebrow { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); margin: 0 0 10px; }
.jm-legal-hero h1 { font-family: var(--jm-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--jm-text); margin: 0; }
.jm-legal-body { padding: var(--jm-s-14) var(--jm-wrap-pad-d) var(--jm-s-24); }
.jm-legal-content { max-width: 720px; margin: 0 auto; font-family: var(--jm-body); font-size: 16px; line-height: 1.7; color: var(--jm-text-2); }
.jm-legal-content > * { margin-bottom: var(--jm-s-3); }
.jm-legal-content h2 { font-family: var(--jm-display); font-size: 24px; font-weight: 700; color: var(--jm-text); margin: var(--jm-s-8) 0 var(--jm-s-2); }
.jm-legal-content h3 { font-family: var(--jm-display); font-size: 19px; font-weight: 700; color: var(--jm-text); margin: var(--jm-s-6) 0 var(--jm-s-1); }
.jm-legal-content a { color: var(--jm-accent); text-decoration: underline; }
.jm-legal-content ul, .jm-legal-content ol { padding-left: 1.4em; }
.jm-legal-content li { margin-bottom: 6px; }
.jm-legal-content strong { color: var(--jm-text); }
.jm-legal-foot { max-width: 720px; margin: var(--jm-s-12) auto 0; padding-top: var(--jm-s-4); border-top: 1px solid var(--jm-line); font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xs); line-height: 1.6; color: var(--jm-text-3); }
.jm-legal-foot a { color: var(--jm-accent); }
@media (max-width: 768px) {
  .jm-legal-hero { padding-left: var(--jm-wrap-pad-m); padding-right: var(--jm-wrap-pad-m); }
  .jm-legal-body { padding-left: var(--jm-wrap-pad-m); padding-right: var(--jm-wrap-pad-m); }
}

/* ════════════════════════════════════════════════════════════════════════
   404 FALLBACK A1 (Session DESIGN F5 2026-06-12) — page 879 hors publish
   depuis la migration → ce fallback EST le 404 prod. Dual mode tokens,
   liens de récupération silos + outil. Lenis skip (error404) inchangé.
   ──────────────────────────────────────────────────────────────────────── */
/* F5-3 (A2) : « encore un peu remontée » — la VRAIE source de l'espace était le
   `#primary.content-area{margin-top:80px}` Kadence (tracé live), pas notre padding
   (96→40 F5-2). Fix racine : margin neutralisé + padding s-5 → kicker à ~20-28px
   sous la nav. Historique : s-24 (F5) → s-10 (F5-2, grid centrage testé-rejeté) → s-5 + margin 0 (F5-3). */
.error404 #primary.content-area { margin-top: 0; }
.jm-404 { min-height: 55svh; padding: var(--jm-s-5) 0 var(--jm-s-20); text-align: center; background: var(--jm-bg); color: var(--jm-text); }
.jm-404-kicker { display: inline-block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono-wide); text-transform: uppercase; color: var(--jm-accent); margin-bottom: var(--jm-s-5); }
.jm-404-title { font-family: var(--jm-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--jm-text); margin: 0 0 var(--jm-s-5); }
.jm-404-sub { font-family: var(--jm-body); font-size: 1.125rem; line-height: 1.6; color: var(--jm-text-2); margin: 0 auto var(--jm-s-8); max-width: 560px; }
.jm-404-cta-row { margin-bottom: var(--jm-s-12); }
.jm-404-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 32px; background: var(--jm-accent); color: var(--jm-accent-ink); border-radius: var(--jm-r-pill); font-family: var(--jm-body); font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform var(--jm-t-fast) var(--jm-ease-out), box-shadow var(--jm-t-fast) var(--jm-ease-out); }
.jm-404-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--jm-accent), transparent 40%); color: var(--jm-accent-ink); }
.jm-404-paths-label { display: block; font-family: var(--jm-mono); font-size: var(--jm-fs-mono); letter-spacing: var(--jm-ls-mono); text-transform: uppercase; color: var(--jm-text-3); margin-bottom: var(--jm-s-4); }
.jm-404-paths ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--jm-s-3); list-style: none; margin: 0; padding: 0; }
.jm-404-paths li a { display: inline-block; padding: 10px 20px; min-height: 44px; border: 1px solid var(--jm-line); border-radius: var(--jm-r-pill); color: var(--jm-text-2); font-family: var(--jm-body); font-size: 0.9375rem; text-decoration: none; transition: color var(--jm-t-fast) var(--jm-ease-out), border-color var(--jm-t-fast) var(--jm-ease-out); }
.jm-404-paths li a:hover { color: var(--jm-accent); border-color: var(--jm-accent); }
@media (max-width: 480px) {
  .jm-404 { padding: var(--jm-s-4) 0 var(--jm-s-12); min-height: 50svh; }
}

/* ════ 23e · C.1 — Drawer mobile : sous-catégories en accordéon ════ */
@media (max-width: 1300px) {
  .jm-mob-silo { display: block; }
  .jm-mob-silo-row { display: flex; align-items: center; }
  .jm-mob-silos .jm-mob-silo-link { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 15px 4px; font-family: var(--jm-display); font-weight: 700; font-size: 17px; color: var(--jm-text); text-decoration: none; }
  .jm-mob-silos .jm-mob-silo-link .num { font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); color: var(--jm-text-3); font-weight: 500; }
  .jm-mob-silo-toggle { flex: none; width: 52px; min-height: 48px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--jm-text-2); -webkit-tap-highlight-color: transparent; }
  .jm-mob-silo-toggle .jm-chev { display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform var(--jm-t-base, 220ms) var(--jm-ease-out, ease); }
  .jm-mob-silo.is-open .jm-mob-silo-toggle { color: var(--jm-accent); }
  .jm-mob-silo.is-open .jm-mob-silo-toggle .jm-chev { transform: rotate(-135deg) translate(-1px,-1px); }
  .jm-mob-sub { list-style: none; margin: 0 0 6px; padding: 0 0 4px 0; }
  .jm-mob-sub[hidden] { display: none; }
  .jm-mob-sub li { margin: 0; }
  .jm-mob-silos .jm-mob-sub li a { display: block; padding: 11px 4px 11px 16px; margin-left: 8px; font-family: var(--jm-body); font-size: 14.5px; font-weight: 500; color: var(--jm-text-2); text-decoration: none; border-left: 2px solid var(--jm-line); transition: color .15s, border-color .15s; }
  .jm-mob-silos .jm-mob-sub li a:hover, .jm-mob-silos .jm-mob-sub li a:focus-visible { color: var(--jm-accent); border-left-color: var(--jm-accent); }
  .jm-mob-silos .jm-mob-sub-all a { color: var(--jm-accent); font-weight: 600; font-family: var(--jm-mono); font-size: var(--jm-fs-mono-xxs); text-transform: uppercase; letter-spacing: var(--jm-ls-mono); }
}

/* ════ 23e · C.4 — sticky-mob lisible en light (le label héritait blanc, sans couleur propre) ════ */
.sticky-mob .label { color: var(--jm-text); }
.sticky-mob .label small { color: var(--jm-text-2); }

/* ════ 23e · B.1 — Hero : cartes outils en rotation (empilées, extensible, 0 CLS) ════ */
.jm-hero-cards-col { min-width: 0; }
.jm-hero-cards { display: grid; }
/* B (2026-06-24) — transition PREMIUM : fondu + léger glissement + scale + flou de
   masquage (le flou fond les deux cartes pendant le crossfade), ~1,1 s, ease-in-out fort. */
.jm-hero-cards > .jm-hero-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.985); filter: blur(2px); transition: opacity 0.8s var(--jm-ease-in-out, ease), transform 0.8s var(--jm-ease-in-out, ease), filter 0.8s var(--jm-ease-in-out, ease), visibility 0.8s; pointer-events: none; }
.jm-hero-cards > .jm-hero-card.is-on { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .jm-hero-cards > .jm-hero-card { transition: opacity .35s ease, visibility .35s; transform: none; filter: none; } }

/* B (2026-06-24) — Pastilles de pagination des cartes hero : boutons natifs, cliquables
   ET navigables au clavier, focus visible, cible tactile >= 24px, theme-aware dark+light. */
.jm-hero-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; min-height: 28px; }
.jm-hero-dot { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 9px; margin: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 0; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.jm-hero-dot::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 999px; background: var(--jm-text-3, #6e6e6e); transition: background-color .45s var(--jm-ease-out, ease), width .45s var(--jm-ease-out, ease), transform .15s var(--jm-ease-out, ease); }
.jm-hero-dot[aria-current="true"]::before { background: var(--jm-accent); width: 24px; }
@media (hover: hover) and (pointer: fine) { .jm-hero-dot:hover::before { background: var(--jm-accent); } }
.jm-hero-dot:active::before { transform: scale(0.88); }
.jm-hero-dot:focus-visible { outline: none; }
.jm-hero-dot:focus-visible::before { outline: 2px solid var(--jm-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jm-hero-dot::before { transition: background-color .2s ease; } }
/* Carte Budget Moto — lignes de coût : EXACT pendant typographique d'Optim'Assur
   (A, 2026-06-25 : mêmes tokens body/mono/display + même gouttière 18px + même rythme
   que .jm-optim-row ; le total reprend le traitement de .jm-optim-row .grade). */
.jm-bm-list { padding: 6px 0; margin: 0; }
.jm-bm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--jm-line-2); }
.jm-bm-row:last-child { border-bottom: none; }
.jm-bm-row .lbl { font-family: var(--jm-body); font-size: 13px; font-weight: 600; color: var(--jm-text-2); }
.jm-bm-row .val { font-family: var(--jm-mono); font-size: 14px; font-weight: 600; color: var(--jm-text); white-space: nowrap; }
.jm-bm-row.jm-bm-minus .val { color: var(--jm-text-3); }
.jm-bm-row.jm-bm-total { border-bottom: none; border-top: 1px solid var(--jm-line); margin-top: 2px; padding: 12px 18px 2px; }
.jm-bm-row.jm-bm-total .lbl { font-family: var(--jm-display); font-weight: 700; color: var(--jm-text); }
.jm-bm-row.jm-bm-total .val { font-family: var(--jm-display); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--jm-accent); }

/* ════ 23e · B.2 — Hero CTA : hiérarchie pro (1 primaire net + 2 secondaires sobres) ════ */
.jm-hero-cta { gap: 10px 12px; }
.jm-hero-cta .jm-btn-ghost { font-weight: 600; }
.jm-hero-cta .jm-btn-ghost .jm-arr, .jm-hero-cta .jm-btn-ghost::after { opacity: .55; }
.jm-hero-cta .jm-btn:hover .jm-arr { transform: translateX(2px); }