/* ──────────────────────────────────────────────────────────────
   Mon Petit Capital, Design system partagé
   Palette : bleu marine #1E3A8A, accents blancs et gris sobres
   Typo : Inter (sans-serif moderne, magazine premium)
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ──────────────────────────────────────────────────────────────
   Anti-CLS : fallback Arial avec métriques ajustées sur Inter.
   Quand Inter charge en retard, le navigateur swap d'abord sur
   "Inter Fallback" (Arial avec mêmes proportions qu'Inter) puis
   sur Inter, la hauteur du texte est identique → 0 shift.
   Métriques calculées via https://screenspan.net/fallback
   ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.40%;
}

:root {
  --blue-900: #0F172A;
  --blue-800: #1E3A8A;
  --blue-700: #1E40AF;
  --blue-100: #EEF2FF;
  --yellow: #FFFFFF;        /* déprécié, utiliser white ou un accent neutre */
  --yellow-dark: #475569;   /* déprécié, gris-bleu sobre */
  --green-700: #166534;
  --green-100: #DCFCE7;
  --purple-800: #5B21B6;
  --purple-100: #F5F3FF;
  --gray-50: #F5F7FB;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-500: #475569;  /* WCAG AA bumped from #64748B (4.16:1) to #475569 (7.21:1, AAA) */
  --gray-700: #475569;
  --white: #fff;
  --max-w: 1080px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow: 0 4px 14px rgba(15,23,42,0.06);
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Force le rendu en mode clair partout, désactive l'auto-dark des navigateurs */
  color-scheme: only light;
}

html, body { color-scheme: only light; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  line-height: 1.6;
  color: var(--blue-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue-800); text-decoration: none; transition: opacity .15s; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--blue-800);
  font-size: 16px;
  letter-spacing: -0.3px;
}
.site-header .brand:hover { text-decoration: none; }
.site-header .brand-logo {
  width: 34px; height: 34px;
  background: transparent;
  border: 2px solid var(--blue-800);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.site-header .brand:hover .brand-logo { background: var(--blue-100); transform: rotate(-3deg); }
.site-header .brand-logo svg { width: 22px; height: 22px; }
.site-header .brand-logo svg rect,
.site-header .brand-logo svg path { stroke: var(--blue-800) !important; }
.site-header nav {
  display: flex; align-items: center; gap: 28px;
}
.site-header nav > a,
.site-header nav > .dropdown > a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.1px;
}
.site-header nav a:hover { color: var(--blue-800); text-decoration: none; }
.site-header nav a.active { color: var(--blue-800); }
.site-header .cta-nav {
  background: var(--blue-800);
  color: var(--white) !important;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: background .15s;
}
.site-header .cta-nav:hover { background: var(--blue-700); text-decoration: none; color: var(--white) !important; }
.menu-toggle { display: none; background: none; border: none; font-size: 22px; color: var(--blue-900); }

@media (max-width: 780px) {
  .site-header nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); padding: 20px 24px; gap: 16px; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow); align-items: stretch; }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 8px 0; }
  .site-header nav .cta-nav { text-align: center; }
  .menu-toggle { display: block; }
}

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  transition: transform .12s, box-shadow .12s;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--blue-800);
  color: var(--white);
  border: 1.5px solid var(--blue-800);
}
.btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); box-shadow: 0 6px 16px rgba(30,58,138,0.25); }
.btn-secondary {
  background: var(--white);
  color: var(--blue-800);
  border: 1.5px solid var(--blue-800);
}
.btn-secondary:hover { background: var(--blue-100); }
.btn-dark {
  background: var(--blue-800);
  color: var(--white);
  border: 1.5px solid var(--blue-800);
}
.btn-dark:hover { background: var(--blue-700); border-color: var(--blue-700); }

/* ── LAYOUT ────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 72px 0;
}
.section-sm { padding: 48px 0; }
.section-lg { padding: 96px 0; }

h1, h2, h3, h4 {
  color: var(--blue-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-family: var(--font-display);
  font-feature-settings: "ss01", "cv11";
}
h1 { font-size: 46px; font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: 32px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.025em; }
h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.015em; }
p { margin-bottom: 12px; }

.lead { font-size: 18px; color: var(--gray-700); line-height: 1.6; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-800);
  background: var(--blue-100);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Couche éditoriale articles et modules ───────────────────── */
.mpc-reading-brief,
.mpc-practice-card,
.mpc-source-check,
.mpc-next-step {
  margin: 24px 0;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
}
.mpc-reading-brief {
  border-color: #C7D2FE;
  background: #F8FAFF;
}
.mpc-practice-card {
  border-color: #BBF7D0;
  background: #F0FDF4;
}
.mpc-source-check {
  border-color: #FDE68A;
  background: #FFFBEB;
}
.mpc-next-step {
  border-color: #DDD6FE;
  background: #F5F3FF;
}
.mpc-content-label {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-800);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mpc-reading-brief ul,
.mpc-practice-card ul,
.mpc-source-check ul,
.mpc-next-step ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.mpc-reading-brief li,
.mpc-practice-card li,
.mpc-source-check li,
.mpc-next-step li {
  margin: 6px 0;
}
.mpc-next-step .mpc-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.mpc-next-step .mpc-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--blue-800);
  color: var(--blue-800);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}
.mpc-next-step .mpc-mini-btn.primary {
  background: var(--blue-800);
  color: #fff;
}
.mpc-next-step .mpc-mini-btn:hover {
  text-decoration: none;
  background: var(--blue-100);
}
.mpc-next-step .mpc-mini-btn.primary:hover {
  background: var(--blue-700);
}

@media (max-width: 640px) {
  .mpc-reading-brief,
  .mpc-practice-card,
  .mpc-source-check,
  .mpc-next-step {
    padding: 18px 16px;
    margin: 20px 0;
  }
  .mpc-next-step .mpc-next-actions {
    flex-direction: column;
  }
  .mpc-next-step .mpc-mini-btn {
    width: 100%;
  }
}

/* ── HERO ──────────────────────────────────────────── */
/* Le hero est un élément brand : il garde son apparence (fond bleu sombre + texte blanc)
   identique en mode clair et en mode sombre. On utilise des couleurs hardcodées au lieu
   de variables CSS pour ne pas être impacté par les overrides dark mode. */
.hero {
  background: linear-gradient(180deg, #1E3A8A 0%, #22479A 100%);
  color: #ffffff;
  padding: 96px 24px 110px;
  text-align: center;
  position: relative;
  /* Anti-CLS : réserve la place du hero dès l'init pour ne pas shifter
     pendant le chargement progressif (font swap, JS différé). */
  min-height: 540px;
  contain: layout;
}

/* Anti-CLS, blocs homepage qui peuvent shifter au chargement progressif */
.onboarding-grid { min-height: 200px; contain: layout; }
.itinerary { min-height: 540px; contain: layout; }
.alaune-grid { min-height: 280px; contain: layout; }
.video-quiz-grid { min-height: 320px; contain: layout; }
.phone-grid { min-height: 360px; contain: layout; }

.app-screens-grid {
  align-items: start;
  justify-items: center;
}

.app-screenshot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.app-screenshot-frame {
  width: 100%;
  max-width: 272px;
  filter: drop-shadow(0 18px 36px rgba(15,31,77,0.18));
}

.app-screenshot-frame--screen {
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border: 4px solid #0F1F4D;
  border-radius: 30px;
  background: #0F1F4D;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.app-screenshot-frame--photo {
  max-width: 262px;
}

.app-screenshot-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.app-screenshot-frame--photo .app-screenshot-image {
  height: auto;
  border-radius: 38px;
}

.app-screenshot-caption {
  margin-top: 18px;
  text-align: center;
  max-width: 292px;
  width: 100%;
}

.app-screenshot-title {
  display: block;
  font-weight: 900;
  color: #0F1F4D;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.app-screenshot-subtitle {
  display: block;
  color: #475569;
  font-size: 14px;
  line-height: 1.42;
  margin-top: 6px;
}

.hero { overflow: hidden; }
.hero .logo-big {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  background: #ffffff;
  border-radius: 22px;
  margin: 0 auto 26px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.hero .homepage-logo {
  background: #1E3A8A;
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(15,31,77,0.28);
}
.hero .logo-big svg { width: 58px; height: 58px; }
.hero h1 {
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}
.hero .subtitle {
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero .promise {
  font-size: 19px;
  color: rgba(255,255,255,0.88);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.hero .promise strong {
  color: #ffffff;
}
.hero .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero .small-note {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.hero .small-note a {
  color: #FFFFFF;
}

/* ── HOMEPAGE PROOF STRIP ─────────────────────────── */
.home-proof {
  margin-top: -62px;
  position: relative;
  z-index: 3;
  padding: 0 0 18px;
}
.home-proof-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.home-proof-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(15,31,77,0.12);
  text-decoration: none;
  color: var(--blue-900);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-proof-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(15,31,77,0.16);
  border-color: rgba(30,58,138,0.28);
  text-decoration: none;
}
.home-proof-card-main {
  background: linear-gradient(135deg, #ffffff 0%, #EFF6FF 100%);
}
.proof-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #DBEAFE;
  color: var(--blue-800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.proof-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--blue-800);
}
.proof-score span {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -1px;
}
.proof-score small {
  color: var(--gray-500);
  font-weight: 700;
}
.home-proof-card h2,
.home-proof-card h3 {
  margin: 0 0 10px;
  color: var(--blue-900);
  line-height: 1.18;
  letter-spacing: -0.2px;
}
.home-proof-card h2 { font-size: 24px; }
.home-proof-card h3 { font-size: 20px; }
.home-proof-card p {
  margin: 0 0 18px;
  color: var(--gray-700);
  font-size: 14.5px;
  line-height: 1.6;
}
.home-proof-card strong {
  margin-top: auto;
  color: var(--blue-800);
  font-size: 14.5px;
}

/* ── SIMULATEURS : choix par objectif ───────────────── */
.sim-goals {
  padding: 34px 0 10px;
  background: #F8FAFC;
}
.sim-goal-head {
  max-width: 640px;
  margin: 0 auto 18px;
  text-align: center;
}
.sim-goal-head h2 {
  margin: 8px 0 8px;
  font-size: 24px;
  color: var(--blue-900);
}
.sim-goal-head p {
  margin: 0;
  color: var(--gray-600);
  font-size: 15px;
  line-height: 1.6;
}
.sim-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sim-goal-card {
  text-align: left;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.sim-goal-card:hover {
  border-color: var(--blue-800);
  background: #EFF6FF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30,58,138,.10);
}
.sim-goal-card strong {
  display: block;
  color: var(--blue-900);
  font-size: 14.5px;
  line-height: 1.35;
  margin-bottom: 5px;
}
.sim-goal-card span {
  display: block;
  color: var(--gray-600);
  font-size: 13px;
  line-height: 1.45;
}

/* ── FEATURES GRID ─────────────────────────────────── */
.grid {
  display: grid;
  gap: 20px;
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card .card-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--blue-100) 0%, #DBEAFE 100%);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  color: var(--blue-800);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover .card-icon { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 6px 16px rgba(30,58,138,0.15); }
.card .card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card.text-center .card-icon { margin-left: auto; margin-right: auto; }
.card h3:has(> svg:first-child) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.card h3 > svg:first-child {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  stroke: currentColor;
}
.reassure-band .rb-item .ic svg { width: 18px; height: 18px; stroke: var(--blue-800); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-icon { display: inline-block; vertical-align: middle; }
.mpc-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--gray-700); line-height: 1.6; margin: 0; }

/* Outils téléchargeables : cartes lisibles sur mobile */
.tools-download-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tools-download-card .card-icon,
.tools-section-heading .card-icon {
  margin-bottom: 0;
  flex: 0 0 52px;
}
.tools-section-heading .card-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--blue-100) 0%, #DBEAFE 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-800);
}
.tools-section-heading .card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tools-download-card .card-icon-success {
  color: #15803D;
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
}
.tools-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 10px;
}
.tools-section-heading h2 {
  margin: 0;
  color: var(--navy);
}

@media (max-width: 640px) {
  .tools-hero {
    padding-top: 42px !important;
    padding-bottom: 18px !important;
  }
  .tools-hero h1 {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .tools-hero .lead {
    max-width: 330px !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
  .tools-download-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 14px 16px !important;
    align-items: start !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }
  .tools-download-card > div:first-child {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    margin-top: 2px;
    border-radius: 12px;
    background: #EFF6FF;
  }
  .tools-download-card .card-icon-success {
    background: #DCFCE7;
  }
  .tools-download-card > div:first-child svg {
    width: 30px !important;
    height: 30px !important;
  }
  .tools-download-card > div:nth-child(2) {
    min-width: 0;
  }
  .tools-download-card span {
    display: inline-flex !important;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25 !important;
    letter-spacing: 0.4px !important;
  }
  .tools-download-card h3 {
    font-size: 18px !important;
    line-height: 1.24 !important;
    margin: 9px 0 7px !important;
  }
  .tools-download-card p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  .tools-download-card > a.btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    padding: 12px 16px !important;
    white-space: normal !important;
    text-align: center;
  }
  .tools-section-heading {
    gap: 12px;
    margin-top: 38px;
  }
  .tools-section-heading .card-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
  }
  .tools-section-heading h2 {
    font-size: 22px;
    line-height: 1.18;
  }
}

/* ── STATS / KPI ───────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat .value {
  font-size: 42px;
  font-weight: 800;
  color: var(--blue-800);
  letter-spacing: -1px;
  display: block;
}
.stat .label {
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 600;
  margin-top: 4px;
}

/* ── PRICING ───────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.plan {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: left;
  position: relative;
}
.plan.featured {
  border: 2px solid var(--blue-800);
  box-shadow: 0 10px 30px rgba(30,58,138,0.08);
}
.plan .badge-top {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--blue-800);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 1px;
}
.plan .plan-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--gray-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.plan .plan-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.plan .plan-price .suffix { font-size: 14px; color: var(--gray-500); font-weight: 500; }
.plan .plan-sub { font-size: 14px; color: var(--gray-500); margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin-bottom: 20px; }
.plan li {
  font-size: 14.5px;
  color: var(--blue-900);
  padding: 7px 0 7px 26px;
  position: relative;
  line-height: 1.5;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 14px; height: 14px;
  background: var(--green-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan li.muted { color: var(--gray-500); }
.plan li.muted::before {
  top: 16px;
  height: 2px;
  background: var(--gray-500);
  -webkit-mask: none;
  mask: none;
}
.plan .btn { width: 100%; display: block; }

/* ── COMPARATIVE TABLE ─────────────────────────────── */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.cmp-table th, .cmp-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14.5px;
  vertical-align: middle;
}
.cmp-table th { background: var(--gray-50); color: var(--blue-900); font-weight: 800; font-size: 14px; line-height: 1.25; }
.cmp-table th.c, .cmp-table td.c { text-align: center; }
@media (max-width:640px) {
  .cmp-table th, .cmp-table td { padding: 10px 8px; font-size: 12.5px; }
  .cmp-table th { font-size: 12px; }
}

/* ── ANTI-DEBORDEMENT MOBILE GLOBAL ────────────────── */
/* Toutes les tables, prose, et blocs trop larges deviennent scrollables horizontalement
   ou réduisent leur taille sur mobile. */
@media (max-width: 640px) {
  /* Empêche le débordement horizontal de la page */
  body, html { overflow-x: hidden; max-width: 100vw; }

  /* Tables mobiles : pas de colonnes coupées, texte compact mais lisible */
  table {
    display: table;
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    overflow: visible;
  }
  table th,
  table td {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  /* Les blocs <pre> et code (calculs, exemples) en monospace s'adaptent */
  pre, code { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; }

  /* Les listes de termes / equations avec chiffres alignés se reformatent */
  .calc-explainer, .calc-bareme, .calc-result { padding: 14px 16px !important; }
  .calc-bareme table td, .calc-result table td { padding: 4px 0 !important; font-size: 12.5px; }

  /* Les containers de hero s'adaptent */
  .hero, .calc-hero { padding-left: 18px !important; padding-right: 18px !important; }
  .hero h1, .calc-hero h1 { font-size: 26px !important; line-height: 1.2; word-break: break-word; }
  .hero p, .calc-hero p { font-size: 15px !important; }

  /* Titres H1/H2 mobile : réduction + wrap propre pour éviter le débordement
     Couvre toutes les pages (légales, articles, glossaire, comprendre-avis-imposition…) */
  h1 { font-size: 30px !important; line-height: 1.15; word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
  h2 { font-size: 22px !important; line-height: 1.2; word-break: break-word; overflow-wrap: break-word; }
  .prose h1, main h1 { font-size: 28px !important; }
  .prose h2, main h2 { font-size: 21px !important; }
  /* Évite le scroll horizontal global */
  html, body { overflow-x: hidden; }

  /* Les grids en 3 colonnes deviennent 1 colonne */
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* Évite le débordement des cards et conteneurs flex */
  .card, .container, main, section { max-width: 100%; box-sizing: border-box; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Boutons longs ne débordent pas */
  .btn, button, a.btn-primary, a.btn-secondary, a.btn-sticky {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Forms en colonne */
  form { flex-direction: column; }
  input[type="email"], input[type="text"], input[type="number"], select { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }

  /* Schemas de tableaux dans le simulateur */
  .sim-scenarios-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    table-layout: auto;
    font-size: 11.5px;
    -webkit-overflow-scrolling: touch;
  }
  .sim-scenarios-table th,
  .sim-scenarios-table td {
    min-width: 72px;
    padding: 6px 4px;
  }

  /* Blocs newsletter en fin d'article : éviter le micro-texte */
  .newsletter-band {
    padding: 24px 18px !important;
    margin: 28px 0 !important;
  }
  .newsletter-band p,
  .newsletter-band a,
  .art-newsletter p,
  .art-newsletter a {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .newsletter-band h3,
  .art-newsletter h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  main [style*="font-size:11px"],
  main [style*="font-size:11.5px"] {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .newsletter-form,
  .art-newsletter-form {
    width: 100% !important;
  }
}
.cmp-table th.highlight { background: var(--blue-800); color: var(--white); }
.cmp-table td.highlight { background: var(--blue-100); color: var(--blue-900) !important; font-weight: 800; }
.cmp-table td.highlight.yes { color: var(--green-700) !important; }
.cmp-table td.highlight.no { color: var(--gray-500) !important; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table td.c { text-align: center; font-weight: 700; }
.cmp-table .yes { color: var(--green-700); }
.cmp-table .no { color: var(--gray-500); }

/* ── FAQ ───────────────────────────────────────────── */
.faq {
  max-width: 780px;
  margin: 0 auto;
}
.faq details {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 4px 20px;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blue-900);
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--blue-800);
  font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details p, .faq details ul, .faq details ol {
  padding-bottom: 18px;
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.65;
}
.faq details ul, .faq details ol { padding-left: 22px; }
.faq details li { margin-bottom: 6px; }

/* ── CALLOUT / BANNERS ─────────────────────────────── */
.callout {
  background: var(--blue-100);
  border-left: 4px solid var(--blue-800);
  padding: 18px 22px;
  border-radius: 8px;
  margin: 20px 0;
}
.callout p { margin: 0; font-size: 14.5px; color: var(--blue-900); }
.callout strong { color: var(--blue-800); }

.warning {
  background: #F8FAFC;
  border-left: 4px solid var(--yellow-dark);
  padding: 16px 22px;
  border-radius: 8px;
  margin: 20px 0;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

/* ── ARTICLE / PROSE ───────────────────────────────── */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--blue-900);
}
.prose h2 { font-size: 28px; margin: 48px 0 16px; }
.prose h3 { font-size: 21px; margin: 32px 0 12px; }
.prose p { margin-bottom: 18px; color: var(--gray-700); }
.prose ul, .prose ol { margin: 16px 0 20px 24px; color: var(--gray-700); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--blue-900); }
.prose blockquote {
  border-left: 3px solid var(--yellow-dark);
  padding: 10px 20px;
  margin: 24px 0;
  color: var(--gray-700);
  font-style: italic;
  background: #FEF9E7;
  border-radius: 0 8px 8px 0;
}
.prose code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--blue-800);
}

/* ── TRUST / ABOUT PROOF STRIP ─────────────────────── */
.trust-proof-strip {
  padding: 0 0 18px;
  margin-top: -4px;
}
.trust-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.trust-proof-item {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 26px rgba(15,31,77,0.07);
}
.trust-proof-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.trust-proof-item strong {
  display: block;
  color: var(--blue-900);
  font-size: 18px;
  margin-bottom: 8px;
}
.trust-proof-item p {
  margin: 0;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .prose {
    width: 100%;
    max-width: 40rem;
    padding: 0 22px;
    font-size: 17px;
    line-height: 1.82;
  }

  .prose h2 {
    margin: 44px 0 18px;
    font-size: 23px !important;
    line-height: 1.22;
    letter-spacing: -0.01em;
  }

  .prose h2:first-child {
    margin-top: 0;
  }

  .prose h3 {
    margin: 32px 0 14px;
    font-size: 19px;
    line-height: 1.3;
  }

  .prose p {
    margin-bottom: 22px;
  }

  .prose ul,
  .prose ol {
    margin: 16px 0 26px 0;
    padding-left: 24px;
  }

  .prose li {
    margin-bottom: 12px;
    padding-left: 2px;
    line-height: 1.72;
  }

  .prose blockquote {
    margin: 30px 0;
    padding: 16px 18px;
    line-height: 1.72;
  }

  .prose .callout,
  .prose .warning {
    margin: 28px 0;
    padding: 18px;
  }

  .prose .callout p,
  .prose .warning p {
    font-size: 15.5px;
    line-height: 1.65;
  }

  .trust-proof-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lead {
    font-size: 18px;
    line-height: 1.72;
  }

  main > .section:first-of-type:not(.hero) {
    padding-top: 46px !important;
    padding-bottom: 22px !important;
  }

  main > .section:first-of-type:not(.hero) h1 {
    max-width: 12.5em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.16 !important;
    letter-spacing: -0.015em;
  }

  main > .section:first-of-type:not(.hero) .lead {
    max-width: 34ch !important;
    margin-top: 18px !important;
  }

  .bio-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 20px !important;
    margin: 32px 0 !important;
    text-align: left;
  }

  .bio-grid > div:first-child {
    width: 104px !important;
    height: 104px !important;
    font-size: 40px !important;
  }
}

/* ── SIMULATEURS ─────────────────────────────────── */
.simulator {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.simulator h3 { margin-bottom: 4px; }
.simulator .sim-sub { color: var(--gray-500); font-size: 14px; margin-bottom: 22px; }
.sim-field {
  margin-bottom: 18px;
}
.sim-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 6px;
}
.sim-field label .val {
  color: var(--blue-800);
  font-weight: 800;
  font-size: 15px;
}
.sim-field input[type="range"] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  background: var(--gray-200);
  border-radius: 3px;
  outline: none;
}
.sim-field input[type="range"]:focus-visible {
  outline: 3px solid var(--blue-800);
  outline-offset: 6px;
  border-radius: 4px;
}
/* Focus visible global pour tous les éléments interactifs (WCAG 2.4.7) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue-800);
  outline-offset: 2px;
}
.sim-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-800);
  cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.sim-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-800);
  cursor: pointer;
  border: 3px solid var(--white);
}
.sim-field input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--blue-900);
}
.sim-result {
  background: var(--blue-100);
  border-radius: 12px;
  padding: 22px;
  margin-top: 20px;
  text-align: center;
}
.sim-result .big {
  font-size: 36px;
  font-weight: 800;
  color: var(--blue-800);
  letter-spacing: -0.8px;
  display: block;
  margin: 4px 0;
}
.sim-result .lbl {
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sim-result .detail {
  font-size: 14px;
  color: var(--gray-700);
  margin-top: 10px;
  line-height: 1.55;
}
.sim-inline-title,
.sim-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sim-inline-title {
  font-weight: 700;
  color: var(--blue-800);
  margin-bottom: 6px;
}
.sim-inline-note {
  font-size: 12.5px;
  color: #475569;
  margin-top: 8px;
  line-height: 1.45;
}
.sim-inline-title svg,
.sim-inline-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sim-inline-title span,
.sim-inline-note span {
  min-width: 0;
}
.ux-brief {
  margin-top: 14px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--blue-800);
  border-radius: 8px;
  text-align: left;
  color: var(--gray-800);
  font-size: 14px;
  line-height: 1.55;
}
.ux-brief strong { color: var(--blue-900); }
.ux-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ux-diagnostic-card {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
}
.ux-diagnostic-card .k {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ux-diagnostic-card .v {
  margin-top: 3px;
  color: var(--blue-900);
  font-weight: 800;
  font-size: 14px;
}
.ux-trust-line {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.45;
}
.ux-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.ux-action-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.ux-action-row .primary { background: var(--blue-800); color: #FFFFFF; }
.ux-action-row .secondary { background: #EEF2FF; color: var(--blue-800); }
.ux-action-row .premium { background: #4C1D95; color: #FFFFFF; }
.sim-field-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
.sim-field-action[hidden] {
  display: none;
}
.sim-field-action button {
  min-height: 36px;
  border-radius: 8px;
  padding: 8px 12px;
  background: #EEF2FF;
  color: var(--blue-800);
  font-size: 13px;
  font-weight: 800;
}
.sim-field-action span {
  color: var(--gray-600);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ── TRUST SECTION ─────────────────────────────────── */
.trust-strip {
  background: var(--white);
  padding: 56px 24px;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.trust-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  text-align: center;
}
.trust-grid .trust-item strong {
  display: block;
  color: var(--blue-900);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}
.trust-grid .trust-item p {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0;
}

/* ── FOOTER ────────────────────────────────────────── */
.site-footer {
  background: var(--blue-900);
  color: rgba(255,255,255,0.72);
  padding: 56px 24px 32px;
  font-size: 14px;
  line-height: 1.65;
}
.footer-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-grid a {
  color: rgba(255,255,255,0.72);
  display: block;
  padding: 4px 0;
}
.footer-grid a:hover { color: #FFFFFF; text-decoration: none; }
.footer-brand .tag {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.55;
}
.footer-legal {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.footer-legal .disclaimer { margin-top: 12px; }

@media (max-width: 720px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .hero { padding: 64px 20px 80px; }
  .hero h1 { font-size: 36px; }
  .hero .promise { font-size: 16px; }
  .home-proof {
    margin-top: -38px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .home-proof-grid { grid-template-columns: 1fr; }
  .home-proof-card {
    min-height: 0;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(15,31,77,0.10);
  }
  .proof-score span { font-size: 38px; }
  .section { padding: 56px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .stat .value { font-size: 32px; }
}

/* Mobile petit (iPhone): footer en 1 colonne pour eviter le debordement a droite */
@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer-grid h4 { margin-bottom: 8px; }
  .footer-grid a { padding: 3px 0; }
  .footer-legal { padding-left: 20px; padding-right: 20px; }
}

/* ── ARTICLE (parcours) ──────────────────────────── */
.breadcrumb {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--gray-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-800); }
.breadcrumb .sep { margin: 0 6px; color: var(--gray-200); }

.art { font-size: 17px; line-height: 1.75; color: var(--blue-900); }
.art-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: 12px;
}
.art-meta .pill {
  display: inline-block; padding: 5px 11px;
  border-radius: 999px; font-weight: 700;
  letter-spacing: 0.3px;
}
.pill-module { font-size: 11px; }
.pill-free { background: var(--green-100); color: var(--green-700); }
.pill-premium { background: var(--purple-100); color: var(--purple-800); }
.pill-difficulty { background: var(--gray-100); color: var(--gray-700); }
.pill-duration { background: #EFF6FF; color: #1E3A8A; border: 1px solid #DBEAFE; }

.art-title {
  font-size: 40px; line-height: 1.15; letter-spacing: -1px;
  margin: 18px 0 18px;
}
.art-hook {
  font-size: 20px; line-height: 1.55; font-weight: 500;
  color: var(--gray-700); margin-bottom: 36px;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--gray-200);
}

.art-body p { margin-bottom: 18px; color: var(--blue-900); }
.art-body strong { color: var(--blue-900); }
.art-body ul, .art-body ol { margin: 0 0 22px 26px; color: var(--blue-900); }
.art-body li { margin-bottom: 8px; }
.art-section { margin: 32px 0; }
.art-section h2 {
  font-size: 26px; margin: 40px 0 14px;
  letter-spacing: -0.4px;
}
.art-section .art-section h2 { font-size: 20px; }

.art-keypoint {
  background: var(--blue-100); border-left: 4px solid var(--blue-800);
  padding: 18px 22px; border-radius: 10px; margin: 24px 0;
}
.art-keypoint .label {
  display: inline-block; font-size: 11px; font-weight: 800;
  color: var(--blue-800); letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 6px;
}
.art-keypoint p { margin: 0; color: var(--blue-900); font-weight: 600; font-size: 16px; }

.art-quote {
  border-left: 3px solid var(--yellow-dark);
  padding: 14px 22px; margin: 28px 0;
  font-style: italic; color: var(--gray-700);
  background: #FEF9E7; border-radius: 0 8px 8px 0;
}
.art-quote cite {
  display: block; margin-top: 10px;
  font-style: normal; font-size: 14px; color: var(--gray-500);
}

.art-example {
  background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 20px 22px; margin: 24px 0;
}
.art-example .label {
  display: inline-block; font-size: 10px; font-weight: 800;
  color: var(--green-700); background: var(--green-100);
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 10px;
}
.art-example h4 { font-size: 16px; margin-bottom: 8px; }
.art-example .scenario { margin-bottom: 10px; font-size: 15.5px; }
.art-example ul { margin: 8px 0 0 22px; }
.art-example li { color: var(--gray-700); font-size: 14.5px; }

.art-miscon {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 24px 0;
}
.art-miscon > div { padding: 18px; border-radius: 12px; }
.art-miscon .false { background: #FEF2F2; border-left: 4px solid #DC2626; }
.art-miscon .true  { background: #ECFDF5; border-left: 4px solid #059669; }
.art-miscon .label {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 6px;
}
.art-miscon .false .label { color: #DC2626; }
.art-miscon .true  .label { color: #059669; }
.art-miscon p { margin: 0; font-size: 15px; color: var(--gray-700); }

.art-action {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  color: #fff; padding: 24px; border-radius: 14px;
  margin: 28px 0;
}
.art-action .label {
  display: inline-block; font-size: 10px; font-weight: 800;
  color: var(--yellow); letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.art-action p,
.art-action ul,
.art-action ol,
.art-action li { color: rgba(255,255,255,0.95); }
.art-action p { margin-bottom: 10px; }
.art-action ul, .art-action ol { margin: 8px 0; padding-left: 22px; }
.art-action li { margin-bottom: 4px; }
.art-action strong { color: #fff; }
.art-action a { color: #FCD34D; text-decoration: underline; }
.art-action .donow {
  background: rgba(255,255,255,0.12); padding: 12px 16px;
  border-radius: 10px; margin-top: 12px;
}
.art-action .donow strong { color: var(--yellow); }

.art-warning {
  background: #F8FAFC; border-left: 4px solid var(--yellow-dark);
  padding: 16px 22px; border-radius: 0 10px 10px 0; margin: 22px 0;
  font-size: 14.5px; color: #475569;
}
.art-warning p { margin: 0; }

.art-comparison { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-comparison h4 { font-size: 16px; margin-bottom: 10px; }
.art-comparison table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; table-layout: auto; }
.art-comparison th, .art-comparison td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gray-200); font-size: 14.5px; line-height: 1.45; vertical-align: middle; overflow-wrap: normal; word-break: normal; }
.art-comparison th { background: var(--gray-50); font-weight: 800; }
.art-comparison tr:last-child td { border-bottom: none; }

.art-body > table,
.prose > table,
.art-section > table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  table-layout: auto;
  margin: 22px 0;
}

.art-body > table th,
.art-body > table td,
.prose > table th,
.prose > table td,
.art-section > table th,
.art-section > table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14.5px;
  line-height: 1.45;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
}

.art-body > table th,
.prose > table th,
.art-section > table th {
  background: var(--gray-50);
  color: var(--blue-900);
  font-weight: 800;
}

.art-body > table td:first-child,
.prose > table td:first-child,
.art-section > table td:first-child,
.art-comparison table td:first-child {
  font-weight: 600;
  color: var(--gray-900);
}

.art-body > table th:nth-child(1),
.art-body > table td:nth-child(1),
.art-body > table th:nth-child(2),
.art-body > table td:nth-child(2),
.prose > table th:nth-child(1),
.prose > table td:nth-child(1),
.prose > table th:nth-child(2),
.prose > table td:nth-child(2),
.art-section > table th:nth-child(1),
.art-section > table td:nth-child(1),
.art-section > table th:nth-child(2),
.art-section > table td:nth-child(2),
.art-comparison table th:nth-child(1),
.art-comparison table td:nth-child(1),
.art-comparison table th:nth-child(2),
.art-comparison table td:nth-child(2) {
  white-space: nowrap;
}

@media (max-width: 820px) {
  .art-comparison table,
  .art-body > table,
  .prose > table,
  .art-section > table {
    display: block;
    width: max-content !important;
    min-width: 640px;
    max-width: none;
    overflow-x: auto;
    table-layout: auto;
  }

  .art-comparison th,
  .art-comparison td,
  .art-body > table th,
  .art-body > table td,
  .prose > table th,
  .prose > table td,
  .art-section > table th,
  .art-section > table td {
    padding: 11px 12px;
    font-size: 13.5px;
  }
}

.art-chart { margin: 28px 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 20px; }
.art-chart .caption { font-size: 13px; color: var(--gray-500); margin-top: 12px; text-align: center; }
.cmp-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.cmp-lbl { color: var(--gray-700); font-weight: 600; }
.cmp-bar { background: var(--gray-100); height: 14px; border-radius: 7px; overflow: hidden; }
.cmp-bar > span { display: block; height: 100%; background: var(--blue-800); border-radius: 7px; transition: width .4s; }
.cmp-val { font-weight: 700; color: var(--blue-900); font-size: 13px; min-width: 60px; text-align: right; }

.compound-summary { font-size: 13px; color: var(--gray-700); background: var(--gray-50); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; line-height: 1.6; }
.compound-summary strong { color: var(--blue-900); }
.compound-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; padding: 10px 0; }
.compound-point { text-align: center; }
.compound-point .year { font-size: 11px; color: var(--gray-500); font-weight: 700; }
.compound-point .bar { height: 100px; background: var(--gray-100); border-radius: 6px; position: relative; margin: 6px 0; overflow: hidden; }
.compound-point .bar > span { position: absolute; bottom: 0; left: 0; right: 0; background: var(--blue-800); border-radius: 6px; }
.compound-point .value { font-size: 11px; color: var(--blue-900); font-weight: 700; }

.art-takeaways {
  background: var(--yellow); background: #F8FAFC;
  border-radius: 14px; padding: 28px; margin: 40px 0 24px;
}
.art-takeaways h2 { font-size: 20px; margin-bottom: 12px; color: #78350F; }
.art-takeaways ul { list-style: none; padding: 0; margin: 0; }
.art-takeaways li {
  padding: 8px 0 8px 28px; position: relative;
  color: #475569; font-size: 15.5px;
}
.art-takeaways li::before {
  content: "✓"; position: absolute; left: 0;
  color: #78350F; font-weight: 900;
}

.art-quiz {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 28px; margin: 32px 0;
}
.art-quiz h2 { font-size: 20px; margin-bottom: 14px; }
.quiz-q { font-weight: 700; font-size: 16px; margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  background: var(--gray-50); border: 2px solid var(--gray-200);
  padding: 14px 18px; border-radius: 10px;
  text-align: left; font-size: 15px; cursor: pointer;
  transition: all .15s; color: var(--blue-900);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--blue-800); background: var(--blue-100); }
.quiz-opt.correct { background: #ECFDF5; border-color: #059669; color: #065F46; font-weight: 700; }
.quiz-opt.wrong { background: #FEF2F2; border-color: #DC2626; color: #991B1B; }
.quiz-opt:disabled { cursor: default; }
.quiz-feedback {
  margin-top: 16px; padding: 14px 16px;
  border-radius: 10px; font-size: 14.5px; line-height: 1.55;
}
.quiz-feedback.ok { background: #ECFDF5; color: #065F46; }
.quiz-feedback.ko { background: #FEF2F2; color: #991B1B; }

.art-premium-cta {
  background: linear-gradient(135deg, var(--purple-100), var(--blue-100));
  border: 2px solid var(--purple-800); border-radius: 16px;
  padding: 28px; margin: 32px 0; text-align: center;
}
.art-premium-cta h3 { color: var(--purple-800); font-size: 20px; margin-bottom: 8px; }
.art-premium-cta p { color: var(--gray-700); margin-bottom: 18px; }

.guide-premium-panel {
  margin: 26px 0 34px;
  padding: 22px;
  border: 1px solid #D9E2EF;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 14px 34px rgba(15, 31, 77, 0.08);
}
.guide-premium-panel .guide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.guide-premium-panel h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: #0F172A;
}
.guide-premium-panel p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}
.guide-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.guide-premium-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
}
.guide-premium-card strong {
  display: block;
  margin-bottom: 6px;
  color: #0F172A;
  font-size: 14px;
}
.guide-premium-card span {
  display: block;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.5;
}
.guide-step-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}
.guide-step-map span {
  display: block;
  min-height: 76px;
  padding: 13px 12px;
  border-radius: 10px;
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  border: 1px solid #DBEAFE;
}
.guide-step-map em {
  display: block;
  margin-bottom: 4px;
  color: #0F172A;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.guide-action-check {
  margin: 28px 0;
  padding: 22px;
  border-radius: 14px;
  background: #0F1F4D;
  color: #FFFFFF;
}
.guide-action-check h2,
.guide-action-check h3 {
  color: #FFFFFF;
  margin: 0 0 12px;
  font-size: 21px;
}
.guide-action-check p,
.guide-action-check li {
  color: rgba(255, 255, 255, 0.9);
}
.guide-action-check ul,
.guide-action-check ol {
  margin: 10px 0 0 22px;
}
.guide-action-check li {
  margin-bottom: 7px;
}
.guide-action-check a {
  color: #FDE68A;
  text-decoration: underline;
}
.guide-warning-tight {
  margin: 22px 0;
  padding: 16px 18px;
  border-left: 4px solid #B45309;
  border-radius: 0 10px 10px 0;
  background: #FFFBEB;
  color: #475569;
  font-size: 14.5px;
  line-height: 1.6;
}
.guide-warning-tight strong { color: #92400E; }
.guide-index-card {
  position: relative;
  overflow: hidden;
}
.guide-index-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #1E3A8A, #166534);
  opacity: 0;
  transition: opacity .18s;
}
.guide-index-card:hover::after { opacity: 1; }
.guide-index-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.guide-index-meta span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .guide-premium-panel { padding: 18px; }
  .guide-premium-panel h2 { font-size: 20px; }
  .guide-premium-grid,
  .guide-step-map {
    grid-template-columns: 1fr;
  }
  .guide-step-map span {
    min-height: 0;
  }
}

.art-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 40px 0 0;
}
.art-nav-prev, .art-nav-next {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 18px 22px;
  text-decoration: none; display: block;
  transition: all .15s;
}
.art-nav-prev:hover, .art-nav-next:hover {
  border-color: var(--blue-800); transform: translateY(-2px);
  text-decoration: none;
}
.art-nav-next { text-align: right; }
.art-nav-prev .lbl, .art-nav-next .lbl {
  display: block; font-size: 11px; font-weight: 800;
  color: var(--gray-500); letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 6px;
}
.art-nav-prev .ttl, .art-nav-next .ttl {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--blue-800); line-height: 1.35;
}
.art-nav-prev .lbl::before { content: "← "; }
.art-nav-next .lbl::after { content: " →"; }

.art-cta-app {
  background: var(--blue-100); border-radius: 16px;
  padding: 32px; margin: 40px 0 0; text-align: center;
}
.art-cta-app h3 { font-size: 20px; margin-bottom: 8px; }
.art-cta-app p { color: var(--gray-700); margin-bottom: 20px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Pages module */
.module-header h1 { font-size: 32px; margin: 0; }
.module-chapters { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.module-chapters li { list-style: none; }
.module-chapters a {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 18px 22px;
  text-decoration: none; transition: all .15s;
  color: var(--blue-900);
}
.module-chapters a:hover {
  border-color: var(--blue-800); transform: translateX(4px);
  text-decoration: none;
}
.module-chapters .num {
  font-size: 22px; font-weight: 800; color: var(--blue-800);
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.module-chapters .title { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.module-chapters .hook { display: block; font-size: 14px; color: var(--gray-700); line-height: 1.55; margin-bottom: 6px; }
.module-chapters .meta { display: block; font-size: 12px; color: var(--gray-500); font-weight: 600; }
.module-chapters .arrow { color: var(--gray-500); font-size: 22px; }

.module-card {
  text-decoration: none; padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
  transition: all .15s;
}
.module-card:hover { transform: translateY(-3px); text-decoration: none; box-shadow: var(--shadow); }
.module-card .mod-id { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.module-card h4 { font-size: 17px; margin: 4px 0 2px; color: var(--blue-900); }
.module-card .mod-meta { font-size: 12px; color: var(--gray-500); font-weight: 600; margin-top: 8px; }

@media (max-width: 720px) {
  .art-title { font-size: 30px; }
  .art-hook { font-size: 17px; }
  .art-miscon { grid-template-columns: 1fr; }
  .art-nav { grid-template-columns: 1fr; }
  .module-chapters a { grid-template-columns: auto 1fr; }
  .module-chapters .arrow { display: none; }
}

@media (max-width: 640px) {
  .art {
    padding-left: 22px;
    padding-right: 22px;
    font-size: 17px;
    line-height: 1.82;
  }

  .art-title {
    font-size: 30px !important;
    line-height: 1.16;
    letter-spacing: -0.015em;
    margin-top: 16px;
  }

  .art-hook {
    font-size: 18px;
    line-height: 1.68;
    margin-bottom: 34px;
  }

  .art-body p {
    margin-bottom: 22px;
  }

  .art-body ul,
  .art-body ol {
    margin: 0 0 26px 0;
    padding-left: 24px;
  }

  .art-body li {
    margin-bottom: 12px;
    line-height: 1.72;
  }

  .art-section {
    margin: 42px 0;
  }

  .art-section h2 {
    font-size: 23px !important;
    line-height: 1.22;
    margin: 0 0 18px;
  }

  .art-keypoint,
  .art-example,
  .art-action,
  .art-warning,
  .art-chart {
    margin: 30px 0;
    padding: 18px;
  }
}

/* ── EMAIL CAPTURE ─────────────────────────── */
.email-capture {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  margin: 40px 0;
}
.email-capture h3 {
  color: #fff; margin: 0 0 6px;
  font-size: 20px; letter-spacing: -0.3px;
}
.email-capture p {
  color: rgba(255,255,255,0.88); margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.55;
}
.email-capture form {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.email-capture input[type="email"] {
  flex: 1; min-width: 200px;
  padding: 13px 16px; border-radius: 10px; border: none;
  font-size: 15px; font-family: inherit;
}
.email-capture button {
  padding: 13px 22px; border-radius: 10px; border: none;
  background: var(--yellow); color: var(--blue-800);
  font-weight: 800; font-size: 14px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  font-family: inherit;
}
.email-capture button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.email-capture .fine {
  font-size: 12px; color: rgba(255,255,255,0.6);
  margin-top: 10px; margin-bottom: 0;
}
.email-capture .fine a { color: var(--yellow); }
.email-capture .success {
  background: rgba(255,255,255,0.12);
  padding: 16px; border-radius: 10px;
  text-align: center; color: #fff;
}
.email-capture .success strong { color: var(--yellow); }

.email-capture-inline {
  background: var(--blue-100); color: var(--blue-900);
  border: 1px dashed var(--blue-800); border-radius: 12px;
  padding: 20px; margin: 28px 0;
}
.email-capture-inline h4 { color: var(--blue-800); margin: 0 0 6px; font-size: 16px; }
.email-capture-inline p { font-size: 14px; color: var(--gray-700); margin-bottom: 12px; }
.email-capture-inline form { display: flex; gap: 6px; flex-wrap: wrap; }
.email-capture-inline input[type="email"] {
  flex: 1; min-width: 180px;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--gray-200); font-size: 14px; font-family: inherit;
}
.email-capture-inline button {
  padding: 10px 16px; border-radius: 8px; border: none;
  background: var(--blue-800); color: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.email-capture-inline .success { color: var(--green-700); font-weight: 700; font-size: 14px; }

/* ── STORE BUTTONS ──────────────────────────── */
.download-stores {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin: 20px 0;
}
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--blue-900); color: #fff;
  padding: 14px 22px; border-radius: 12px;
  text-decoration: none; min-width: 200px;
  transition: transform .12s, box-shadow .12s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); text-decoration: none; }
.store-btn.primary { background: var(--blue-800); box-shadow: 0 0 0 3px var(--yellow); }
.store-btn svg { flex-shrink: 0; }
.store-btn .store-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-btn .small { font-size: 11px; opacity: 0.8; }
.store-btn strong { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }

/* ── STICKY BOTTOM CTA ──────────────────────── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--blue-800); color: #fff;
  padding: 14px 20px; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  transform: translateY(100%); transition: transform .25s;
  font-size: 14px;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta p { margin: 0; }
.sticky-cta strong { color: var(--yellow); }
.sticky-cta a.btn-sticky {
  background: var(--yellow); color: var(--blue-800);
  padding: 8px 16px; border-radius: 8px;
  font-weight: 800; font-size: 13px;
  text-decoration: none;
  transition: transform .1s;
}
.sticky-cta a.btn-sticky:hover { text-decoration: none; transform: translateY(-1px); }
.sticky-cta .close {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: #fff; width: 26px; height: 26px; border-radius: 6px;
  cursor: pointer; font-size: 13px;
}
.sticky-cta .close:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
  .sticky-cta { font-size: 13px; padding: 10px 14px; gap: 10px; }
  .sticky-cta p { flex-basis: 100%; text-align: center; }
}

/* ── NAV DROPDOWN ───────────────────────────── */
.site-header nav .dropdown {
  position: relative; display: inline-block;
}
.site-header nav .dropdown > a::after {
  content: " ▾"; font-size: 11px; opacity: 0.7;
}
.site-header nav .dropdown-menu {
  display: none; position: absolute;
  top: 100%; left: -14px; margin-top: 0;
  /* Invisible padding-top creates a hover bridge so the menu doesn't close
     when the user moves the mouse from the parent link to the menu. */
  padding-top: 14px;
  z-index: 60; min-width: 240px;
}
.site-header nav .dropdown-menu::before {
  /* The visible card */
  content: ""; position: absolute; inset: 14px 0 0 0;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  z-index: -1;
}
.site-header nav .dropdown-menu > * { position: relative; }
.site-header nav .dropdown:hover .dropdown-menu,
.site-header nav .dropdown:focus-within .dropdown-menu { display: block; }
.site-header nav .dropdown-menu a {
  display: block; padding: 9px 14px;
  margin: 4px 8px; border-radius: 8px; font-size: 13.5px;
  color: var(--gray-700); line-height: 1.35;
}
.site-header nav .dropdown-menu a:first-of-type { margin-top: 8px; }
.site-header nav .dropdown-menu a:last-of-type { margin-bottom: 8px; }
.site-header nav .dropdown-menu a:hover { background: var(--blue-100); color: var(--blue-800); text-decoration: none; }
.site-header nav .dropdown-menu .dd-section {
  font-size: 10px; font-weight: 800; color: var(--gray-500);
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 10px 14px 4px; margin: 0 8px;
}
.site-header nav .dropdown-menu .dd-divider {
  height: 1px; background: var(--gray-200); margin: 6px 14px;
}
@media (max-width: 780px) {
  .site-header nav .dropdown-menu {
    display: block; position: static;
    padding: 0 0 0 16px; margin: 0; min-width: 0;
  }
  .site-header nav .dropdown-menu::before { display: none; }
  .site-header nav .dropdown-menu a { margin: 0; padding: 8px 0; }
  .site-header nav .dropdown-menu .dd-section { padding: 8px 0 2px; margin: 0; }
  .site-header nav .dropdown-menu .dd-divider { margin: 6px 0; }
  .site-header nav .dropdown > a::after { display: none; }
}

/* ── TOC (sommaire auto) ────────────────────── */
.art-toc {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 18px 22px;
  margin: 20px 0 32px;
}
.art-toc .toc-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gray-500);
  margin-bottom: 10px;
}
.art-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.art-toc li { counter-increment: toc; padding: 4px 0; font-size: 14px; }
.art-toc li::before { content: counter(toc, decimal-leading-zero) ". "; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.art-toc a { color: var(--blue-800); text-decoration: none; }
.art-toc a:hover { text-decoration: underline; }
.art-toc li.sub { padding-left: 20px; font-size: 13.5px; }
.art-toc li.sub::before { content: "› "; color: var(--gray-500); }

@media (min-width: 1160px) {
  .art-toc {
    float: right;
    width: 260px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    position: sticky;
    top: 88px;
    margin: 0 -300px 28px 36px;
  }
  .art-toc .toc-label {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    padding-bottom: 8px;
  }
  .art-body p {
    line-height: 1.82;
  }
  .art-section {
    margin: 42px 0;
  }
}

/* ── CROSS-SELL APRÈS SIMULATEUR ────────────── */
.sim-crosssell {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 22px; margin-top: 16px;
}
.sim-crosssell .lbl {
  font-size: 11px; font-weight: 800; color: var(--blue-800);
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 12px;
}
.sim-crosssell .links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.sim-crosssell .links a {
  padding: 12px 14px; background: var(--blue-100);
  border-radius: 10px; text-decoration: none;
  font-size: 13.5px; color: var(--blue-900); font-weight: 600;
  transition: transform .12s;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.35;
}
.sim-crosssell .links a > svg {
  flex-shrink: 0; vertical-align: baseline;
}
.sim-crosssell .links a:hover { transform: translateX(3px); text-decoration: none; }

/* ── GLOSSAIRE ──────────────────────────────── */
.gloss-search { margin-bottom: 24px; }
.gloss-search input {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--gray-200); border-radius: 12px;
  font-size: 16px; font-family: inherit;
  transition: border-color .15s;
}
.gloss-search input:focus { outline: none; border-color: var(--blue-800); }

.gloss-letters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 16px; background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px; margin-bottom: 20px;
}
.gloss-letters a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 13px; font-weight: 800;
  background: var(--gray-50); color: var(--blue-800);
  text-decoration: none; transition: all .15s;
}
.gloss-letters a:hover { background: var(--blue-800); color: #fff; text-decoration: none; }

.gloss-categories {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.gloss-cat-btn {
  padding: 8px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--gray-200);
  font-size: 12.5px; font-weight: 700; color: var(--gray-700);
  cursor: pointer; transition: all .12s;
}
.gloss-cat-btn:hover { border-color: var(--blue-800); color: var(--blue-800); }
.gloss-cat-btn.active { background: var(--blue-800); color: #fff; border-color: var(--blue-800); }

.gloss-letter { font-size: 28px; color: var(--blue-800); margin: 28px 0 14px; padding-left: 4px; }

.gloss-entries { list-style: none; padding: 0; display: grid; gap: 10px; }
.gloss-entries a {
  display: block; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 16px 20px; text-decoration: none;
  transition: all .12s;
}
.gloss-entries a:hover { border-color: var(--blue-800); transform: translateX(4px); text-decoration: none; }
.gloss-entries strong { display: block; color: var(--blue-900); font-size: 17px; margin-bottom: 4px; }
.gloss-entries .cat {
  display: inline-block; font-size: 10px; font-weight: 800;
  color: var(--gray-500); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 6px;
}
.gloss-entries .def { display: block; color: var(--gray-700); font-size: 14.5px; line-height: 1.55; }
.gloss-empty { text-align: center; color: var(--gray-500); padding: 32px; font-style: italic; }

/* ── POUR ALLER PLUS LOIN (fin d'article) ─────── */
.art-further {
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--gray-50) 100%);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 32px;
  margin: 48px 0 32px;
}
.art-further h3 {
  font-size: 20px;
  color: var(--blue-900);
  margin-bottom: 18px;
}
.art-further .further-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.art-further .further-card {
  display: block;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.art-further .further-card:hover {
  border-color: var(--blue-800);
  transform: translateY(-2px);
  text-decoration: none;
}
.art-further .further-card .lbl {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.art-further .further-card .ttl {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-800);
}
.art-further .further-app {
  font-size: 13.5px;
  color: var(--gray-500);
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
}
.art-further .further-app a {
  color: var(--blue-800);
  font-weight: 600;
}

/* ── REASSURE BAND (au-dessus des prix) ────────── */
.reassure-band {
  background: linear-gradient(135deg, var(--green-100) 0%, #E0F2FE 100%);
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 auto 20px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 22px;
}
.reassure-band .rb-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--blue-900); line-height: 1.45;
}
.reassure-band .rb-item .ic {
  flex-shrink: 0; width: 30px; height: 30px;
  background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.reassure-band .rb-item strong { color: var(--green-700); }
@media (max-width: 560px) {
  .reassure-band { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px; }
  .reassure-band .rb-item { font-size: 12.5px; }
}

/* ── PREMIUM HERO (page /premium.html) ─────────── */
.premium-hero {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 60%, #2E1B85 100%);
  color: #fff;
  padding: 80px 24px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.premium-hero::before {
  content: "";
  position: absolute;
  top: -80px; right: -60px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(253,230,138,0.2), transparent 70%);
  pointer-events: none;
}
.premium-hero::after {
  content: "";
  position: absolute;
  bottom: -120px; left: -80px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%);
  pointer-events: none;
}
.premium-hero .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.premium-hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(253,230,138,0.15); color: var(--yellow);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(253,230,138,0.3);
  margin-bottom: 18px;
}
.premium-hero h1 {
  font-size: 44px; line-height: 1.1; letter-spacing: -0.5px;
  color: #fff; margin-bottom: 18px;
}
.premium-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #FFFFFF, #BFDBFE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.premium-hero .sub {
  font-size: 19px; color: rgba(255,255,255,0.82);
  margin: 0 auto 30px; max-width: 620px;
}
.premium-hero .price {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-bottom: 18px;
}
.premium-hero .price .eu { font-size: 56px; font-weight: 900; color: var(--yellow); letter-spacing: -1px; }
.premium-hero .price .per { font-size: 17px; color: rgba(255,255,255,0.7); }
.premium-hero .pill {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 28px;
}
.premium-hero .cta-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--yellow); color: var(--blue-900);
  padding: 16px 32px; border-radius: 12px;
  font-weight: 800; font-size: 16px; letter-spacing: 0.2px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(253,230,138,0.35);
  transition: transform .12s, box-shadow .12s;
}
.premium-hero .cta-main:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(253,230,138,0.45); text-decoration: none; }
.premium-hero .under {
  margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.65);
}
@media (max-width: 600px) {
  .premium-hero { padding: 56px 20px 48px; }
  .premium-hero h1 { font-size: 32px; }
  .premium-hero .sub { font-size: 16px; }
  .premium-hero .price .eu { font-size: 42px; }
}

/* ── ROI CALC (retour sur investissement visuel) ── */
.roi-calc {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px;
  max-width: 720px;
  margin: 0 auto;
}
.roi-calc h3 {
  font-size: 22px; margin-bottom: 8px;
  color: var(--blue-900);
}
.roi-calc .roi-sub { color: var(--gray-500); font-size: 14.5px; margin-bottom: 22px; }
.roi-calc .roi-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.roi-calc .roi-row:last-of-type { border-bottom: none; }
.roi-calc .roi-lbl { font-size: 14.5px; color: var(--gray-700); }
.roi-calc .roi-val { font-weight: 800; color: var(--blue-900); font-size: 17px; font-variant-numeric: tabular-nums; }
.roi-calc .roi-val.negative { color: #DC2626; }
.roi-calc .roi-val.positive { color: var(--green-700); }
.roi-calc .roi-total {
  background: var(--green-100);
  border-radius: 12px; padding: 16px 18px;
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.roi-calc .roi-total strong { font-size: 19px; color: var(--green-700); }

/* ── PREMIUM PREVIEW CARD (ce que tu débloques) ── */
.prev-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.prev-card:hover { border-color: var(--blue-800); transform: translateY(-3px); }
.prev-card .tag {
  display: inline-block;
  background: linear-gradient(120deg, var(--purple-800), #7C3AED);
  color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 12px;
}
.prev-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--blue-900); }
.prev-card p { font-size: 14.5px; color: var(--gray-700); line-height: 1.55; }
.prev-card ul {
  margin-top: 14px; padding-left: 20px;
  font-size: 14px; color: var(--gray-700);
}
.prev-card ul li { margin-bottom: 6px; }

/* ── ONBOARDING IMMÉDIAT (homepage : 6 points de départ) ──────────── */
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .onboarding-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .onboarding-grid { grid-template-columns: 1fr; } }
.onboarding-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.onboarding-card:hover {
  border-color: var(--blue-800);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30,58,138,0.10);
  text-decoration: none;
}
.onboarding-card .onboarding-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-800);
  color: #fff;
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.onboarding-card strong {
  display: block;
  font-size: 15px;
  color: var(--blue-900);
  margin-bottom: 4px;
}
.onboarding-card p {
  margin: 0;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.45;
}

/* ── SIM TABS STICKY (sélecteur de simulateur) ────────── */
.sim-tabs-sticky {
  position: sticky;
  /* On colle juste sous le header (qui fait ~64px) pour ne pas le chevaucher */
  top: 64px;
  z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  padding: 8px 0;
  margin-bottom: 24px;
}
.sim-tabs-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
}
.sim-tabs-nav::-webkit-scrollbar {
  height: 4px;
}
.sim-tabs-nav::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 2px;
}
.sim-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sim-tab svg { flex-shrink: 0; }
.sim-tab:hover {
  background: var(--gray-100);
  color: var(--blue-900);
}
.sim-tab.active {
  background: var(--blue-800);
  color: var(--white);
  border-color: var(--blue-800);
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15);
}
.sim-tab.active:hover {
  background: var(--blue-900);
}
.sim-tab-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: #FEF3C7;
  color: #92400E;
  border-radius: 999px;
  text-transform: uppercase;
}
.sim-tab.active .sim-tab-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
@media (max-width: 720px) {
  .sim-tab span:not(.sim-tab-pill) { font-size: 13px; }
  .sim-tab { padding: 9px 12px; }
}
@media (max-width: 640px) {
  .sim-goals {
    padding: 28px 0 8px;
  }
  .sim-goal-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .sim-goal-head h2 {
    font-size: 21px;
  }
  .sim-tabs-sticky {
    top: 61px;
    padding: 8px 0 10px;
    margin-bottom: 18px;
  }
  .sim-tabs-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 4px 0;
  }
  .sim-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-color: var(--gray-200);
    background: var(--white);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .sim-tab svg {
    width: 16px;
    height: 16px;
  }
  .sim-tab span:not(.sim-tab-pill) {
    font-size: 12.5px;
  }
  .sim-tab-pill {
    font-size: 8px;
    padding: 2px 5px;
  }
}

/* Masquage simulateurs hors tab actif */
.simulator[data-sim-hidden="true"] {
  display: none;
}

/* ── ITINÉRAIRE 5 ÉTAPES (lecture séquencée homepage) ──── */
.itinerary {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: itinerary;
}
.itinerary::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue-800) 0%, var(--blue-800) 50%, rgba(30, 58, 138, 0.15) 100%);
  z-index: 0;
}
.itinerary-step {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 18px 0;
  z-index: 1;
}
.itinerary-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-800);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--white), 0 4px 12px rgba(30, 58, 138, 0.18);
  position: relative;
  z-index: 2;
}
.itinerary-body {
  flex: 1;
  display: block;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 20px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.itinerary-body:hover,
.itinerary-step:hover .itinerary-body {
  border-color: var(--blue-800);
  box-shadow: 0 6px 18px rgba(30, 58, 138, 0.10);
  transform: translateY(-1px);
}
.itinerary-body:focus-visible {
  outline: 2px solid var(--blue-800);
  outline-offset: 2px;
}
.itinerary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.itinerary-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--blue-900);
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.itinerary-body:hover .itinerary-title {
  color: var(--blue-800);
  text-decoration: underline;
}
.itinerary-time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-800);
  background: #DBEAFE;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.3px;
}
.itinerary-why {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: var(--gray-700);
  line-height: 1.55;
}
.itinerary-why strong {
  color: var(--blue-900);
  font-weight: 700;
}
.itinerary-out {
  margin: 0;
  font-size: 13.5px;
  color: var(--gray-600, #64748B);
  font-style: italic;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-200);
}
@media (max-width: 540px) {
  .itinerary-num {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .itinerary::before {
    left: 19px;
  }
  .itinerary-body {
    padding: 14px 16px;
  }
  .itinerary-title {
    font-size: 15.5px;
  }
}

/* ── LISIBILITÉ MOBILE HOMEPAGE ─────────────────────── */
@media (max-width: 640px) {
  #mpc-cb-tooltip {
    display: none !important;
  }

  body {
    font-size: 16px;
    line-height: 1.65;
  }

  .site-header .wrap {
    padding: 12px 18px;
  }

  .site-header .brand {
    font-size: 15px;
    letter-spacing: 0;
  }

  .site-header .brand-logo {
    width: 38px;
    height: 38px;
  }

  .section {
    padding: 42px 0 !important;
  }

  .hero {
    min-height: 0;
    padding: 50px 20px 62px !important;
  }

  .hero .logo-big {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    margin-bottom: 24px;
  }

  .hero .logo-big svg {
    width: 48px;
    height: 48px;
  }

  .hero .subtitle {
    max-width: 310px;
    margin: 0 auto 18px;
    font-size: 12.5px !important;
    line-height: 1.55;
    letter-spacing: 0.7px;
  }

  .hero h1 {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    font-size: 32px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.4px;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .hero .promise {
    max-width: 34ch;
    margin-bottom: 30px;
    font-size: 16px !important;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
  }

  .hero .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
  }

  .hero .btn {
    width: 100%;
    padding: 15px 18px;
    border-radius: 12px;
    line-height: 1.35;
  }

  .hero .small-note {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 13.5px !important;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
  }

  .hero > div[style*="inline-flex"] {
    max-width: 330px;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    text-align: left;
    font-size: 13px !important;
    line-height: 1.5;
  }

  .container > a[style*="display:flex"][href="bilan-financier.html"],
  .container > a[download] {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .container > a[style*="display:flex"][href="bilan-financier.html"] h2,
  .container > a[download] h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .container > a[style*="display:flex"][href="bilan-financier.html"] p,
  .container > a[download] p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .container > a[style*="display:flex"][href="bilan-financier.html"] > div:last-child,
  .container > a[download] > div:last-child {
    width: 100%;
    text-align: center;
  }

  section[aria-label="Choisis ton point de départ"] {
    padding-top: 34px !important;
    padding-bottom: 18px !important;
  }

  section[aria-label="Choisis ton point de départ"] h2,
  section[aria-label="L'itinéraire 5 étapes"] h2 {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  section[aria-label="L'itinéraire 5 étapes"] p[style*="max-width:560px"] {
    max-width: 33ch !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .onboarding-grid {
    gap: 12px;
    min-height: 0;
  }

  .onboarding-card {
    gap: 13px;
    padding: 18px;
    border-radius: 13px;
  }

  .onboarding-card .onboarding-num {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .onboarding-card strong {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .onboarding-card p {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .itinerary {
    min-height: 0;
    margin-top: 8px;
  }

  .itinerary-step {
    gap: 12px;
    padding: 12px 0;
  }

  .itinerary-body {
    padding: 16px;
    border-radius: 13px;
  }

  .itinerary-head {
    gap: 8px;
    margin-bottom: 12px;
  }

  .itinerary-title {
    font-size: 16px;
    line-height: 1.35;
  }

  .itinerary-time {
    font-size: 11.5px;
  }

  .itinerary-why {
    font-size: 14.5px;
    line-height: 1.62;
  }

  .itinerary-out {
    font-size: 14px;
    line-height: 1.55;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .stat .label {
    line-height: 1.35;
  }

  .video-quiz-grid,
  .phone-grid {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  .video-quiz-grid > a {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: 14px !important;
  }

  .video-quiz-grid h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .video-quiz-grid p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .sticky-cta.visible {
    display: none;
  }
}

/* ── FUNNEL FREE → PREMIUM (homepage 3-step) ──────────── */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
}
@media (max-width: 880px) {
  .funnel-grid { grid-template-columns: 1fr; gap: 18px; }
}
.funnel-step {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.funnel-step-premium {
  background: linear-gradient(180deg, #ffffff 0%, #FAF5FF 100%);
  border-color: #DDD6FE;
  box-shadow: 0 8px 28px rgba(109, 40, 217, 0.08);
}
.funnel-num {
  position: absolute;
  top: -16px; left: 22px;
  width: 36px; height: 36px;
  background: var(--blue-800);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px;
  box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
.funnel-step-premium .funnel-num {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  box-shadow: 0 4px 12px rgba(109,40,217,0.3);
}
.funnel-tag {
  display: inline-block;
  background: #DCFCE7;
  color: #14532D;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.funnel-tag-premium {
  background: #EDE9FE;
  color: #5B21B6;
}
.funnel-step h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--blue-900);
  letter-spacing: -0.3px;
}
.funnel-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-700);
  margin: 0 0 12px;
}
.funnel-out {
  background: #F1F5F9;
  border-left: 3px solid var(--blue-800);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.5;
  margin-top: auto;
}
.funnel-step-premium .funnel-out {
  background: #F5F3FF;
  border-left-color: #6D28D9;
}

/* Mini timeline teaser pour le plan 12 mois Premium */
.plan-teaser {
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 4px;
  position: relative;
  font-size: 13px;
}
.plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #E5E7EB;
}
.plan-row:last-of-type { border-bottom: none; }
.plan-month {
  background: #6D28D9;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}
.plan-label {
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.45;
}
.plan-row-blur .plan-label {
  color: #CBD5E1;
  filter: blur(2px);
  letter-spacing: 0.5px;
  user-select: none;
}
.plan-row-blur .plan-month {
  background: #CBD5E1;
  color: #fff;
}
.plan-lock {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F5F3FF;
  border: 1px dashed #C4B5FD;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #5B21B6;
  font-weight: 700;
}
.prev-card .prev-cta {
  margin-top: 16px;
  font-weight: 800;
  color: var(--blue-800);
  font-size: 14.5px;
  letter-spacing: 0.2px;
}
.prev-card:hover .prev-cta { color: var(--purple-800); }
.prev-card:hover { box-shadow: 0 8px 22px rgba(30,58,138,0.10); cursor: pointer; }

/* ── Hero "7 jours offerts" pill, alignement icône ── */
.premium-hero .pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.premium-hero .pill svg { display: inline-block; flex-shrink: 0; }

/* ── HOMEPAGE PREMIUM CTA BAND ────────────────
   Élément brand : fond bleu navy gardé identique en clair et en sombre.
   Couleurs hardcodées (pas de var(--blue-800) qui devient clair en dark). */
.home-premium-band {
  background: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 55%, #4338CA 100%);
  color: #fff;
  padding: 72px 24px;
  position: relative; overflow: hidden;
}
.home-premium-band::before {
  content: "";
  position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(253,230,138,0.12), transparent 70%);
}
.home-premium-band .inner {
  max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  align-items: center;
  position: relative; z-index: 2;
}
.home-premium-band h2 {
  font-size: 34px; color: #fff; line-height: 1.2;
  margin-bottom: 14px;
}
.home-premium-band h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #FFFFFF, #BFDBFE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-premium-band p { font-size: 16.5px; color: rgba(255,255,255,0.82); margin-bottom: 22px; }
.home-premium-band .ct-row { display: flex; gap: 14px; flex-wrap: wrap; }
.home-premium-band .btn-yellow {
  background: #DBEAFE; color: #1E3A8A;
  padding: 14px 26px; border-radius: 11px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  transition: transform .12s;
}
.home-premium-band .btn-yellow:hover { transform: translateY(-2px); text-decoration: none; }
.home-premium-band .btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 13px 22px; border-radius: 11px;
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.home-premium-band .btn-ghost:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.home-premium-band .trust-mini {
  margin-top: 20px; font-size: 13px;
  color: rgba(255,255,255,0.65);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.home-premium-band .trust-mini span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-premium-band .trust-mini span::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home-premium-band .unlock-preview {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 22px;
  backdrop-filter: blur(8px);
}
.home-premium-band .unlock-preview h4 {
  font-size: 12px; color: var(--yellow);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 14px; font-weight: 800;
}
.home-premium-band .unlock-preview ul { list-style: none; padding: 0; margin: 0; }
.home-premium-band .unlock-preview li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 14px; color: rgba(255,255,255,0.92);
  display: flex; align-items: center; gap: 10px;
}
.home-premium-band .unlock-preview li:last-child { border-bottom: none; }
.home-premium-band .unlock-preview li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-14h-8l1-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-14h-8l1-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 780px) {
  .home-premium-band { padding: 48px 20px; }
  .home-premium-band .inner { grid-template-columns: 1fr; gap: 30px; }
  .home-premium-band h2 { font-size: 26px; }
}

/* ── GARANTIE BADGE (petit badge pour boutons) ── */
.guarantee-mini {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--green-700); font-weight: 600;
  margin-top: 10px;
}
.guarantee-mini::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── STICKY CTA VARIANTES ───────────────────── */
.sticky-cta.urgent strong { color: var(--yellow); }
.sticky-cta .tiny {
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px; display: block;
}

/* ── HELPERS ────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-640 { max-width: 640px; }
.max-780 { max-width: 780px; }

/* ── ICÔNE DE RECHERCHE (header) ── */
.nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--blue-800); background: transparent;
  margin-left: 4px; transition: background .15s, color .15s;
}
.nav-search:hover { background: var(--blue-100); text-decoration: none; }
@media (max-width: 780px) {
  .nav-search { width: auto; height: auto; padding: 12px 0; border-radius: 0; justify-content: flex-start; gap: 10px; }
  .nav-search::after { content: 'Rechercher'; font-weight: 600; }
}

/* ── LIEN COMPTE / CONNEXION (header) ── */
.nav-account {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500) !important;
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: 4px;
  transition: color .15s, background .15s;
}
.nav-account:hover { color: var(--blue-800) !important; background: var(--blue-100); text-decoration: none; }
@media (max-width: 780px) {
  .nav-account { padding: 12px 0; border-radius: 0; }
}

/* ──────────────────────────────────────────────────────────────
   DARK MODE, DÉSACTIVÉ (rendu visuel incohérent avec inline styles).
   Le site est forcé en mode clair partout via color-scheme:only light
   plus haut dans le :root. Le bloc dark mode reste en commentaire pour
   pouvoir être réactivé/refait proprement plus tard si besoin.
   ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* media query qui ne match jamais */
  :root {
    --blue-900: #E2E8F0;          /* texte principal devient clair */
    --blue-800: #93C5FD;          /* accent lien, bleu clair lisible */
    --blue-700: #60A5FA;
    --blue-100: #1E293B;          /* fond cards/encarts → gris-bleu sombre */
    --gray-50: #0B1220;           /* fond body */
    --gray-100: #111827;
    --gray-200: #1F2937;          /* borders */
    --gray-500: #475569;
    --gray-700: #CBD5E1;
    --green-100: #064E3B;
    --green-700: #6EE7B7;
    --purple-100: #2E1065;
    --purple-800: #C4B5FD;
    --white: #0F172A;             /* "fond blanc" devient sombre */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 4px 14px rgba(0,0,0,0.4);
  }
  body { background: #0B1220; color: #E2E8F0; }
  .site-header { background: #111827; border-bottom-color: #1F2937; }
  .brand { color: #E2E8F0; }
  .brand-logo { background: var(--blue-700); }
  .dropdown-menu { background: #111827; border: 1px solid #1F2937; }
  .dropdown-menu a { color: #E2E8F0; }
  .dropdown-menu a:hover { background: #1E293B; }
  nav a:not(.cta-nav) { color: #CBD5E1; }
  nav a.cta-nav { background: #FFFFFF; color: #0F172A; }
  .card, .plan { background: #111827; border-color: #1F2937; }
  .cmp-table { background: #111827; }
  .cmp-table th { background: #1E293B; color: #E2E8F0; }
  .cmp-table td { border-color: #1F2937; }
  .cmp-table td.highlight { background: #1E3A8A; color: #FFFFFF !important; }
  blockquote { background: #1E293B; border-left-color: var(--blue-700); }
  .callout { background: #1E293B; border-color: var(--blue-700); }
  .warning { background: #1E293B; border-color: #475569; color: #CBD5E1; }
  .eyebrow { background: #1E3A8A; color: #FFFFFF; }
  /* Les sections au fond blue-800 explicite gardent leur teinte (déjà foncées) */
  .site-footer { background: #060A14; }
  .footer-legal { color: #475569; }
  /* Scrollbar discrète */
  html { color-scheme: dark; }
  /* Images : laisser respirer un peu */
  img:not([src*=".svg"]) { opacity: 0.92; transition: opacity .2s; }
  img:not([src*=".svg"]):hover { opacity: 1; }
  /* Patches pour les éléments avec background hardcodé blanc */
  .art-comparison table { background: #111827 !important; color: #E2E8F0; }
  .art-comparison table tr { background: #111827; }
  .art-comparison th { background: #1E293B !important; color: #E2E8F0 !important; }
  .art-comparison td { color: #CBD5E1 !important; border-color: #1F2937 !important; }
  .art-chart { background: #111827 !important; border-color: #1F2937 !important; }
  .art-warning { background: #422006 !important; color: #FED7AA !important; }
  .art-body p, .art-body strong, .art-body li { color: #E2E8F0 !important; }
  .art-section h2 { color: #E2E8F0 !important; }
  /* Override des inline styles "color:#XXXX" sur les sections de l'index parcours */
  [style*="color:#166534"], [style*="color: #166534"] { color: #6EE7B7 !important; }
  [style*="color:#5B21B6"], [style*="color: #5B21B6"] { color: #C4B5FD !important; }
  [style*="color:#1E3A8A"], [style*="color: #1E3A8A"] { color: #93C5FD !important; }
  [style*="color:#475569"], [style*="color: #475569"] { color: #FED7AA !important; }
  [style*="background:#F5F3FF"], [style*="background: #F5F3FF"] { background: #2E1065 !important; }
  [style*="background:#F8FAFC"], [style*="background: #F8FAFC"] { background: #422006 !important; }

  /* ── BOUTONS, garder texte sombre lisible sur fond jaune ── */
  .btn-primary { background: #FFFFFF !important; color: #1E3A8A !important; }
  .btn-primary:hover { background: #E2E8F0 !important; box-shadow: 0 6px 16px rgba(255,255,255,0.18); }
  .btn-secondary { background: transparent !important; color: #93C5FD !important; border-color: #93C5FD !important; }
  .btn-secondary:hover { background: rgba(147,197,253,0.1) !important; }
  .btn-dark { background: #1E3A8A !important; color: #ffffff !important; }
  .btn-dark:hover { background: #2A4FA8 !important; }

  /* ── EYEBROW (badge bleu) ── */
  .eyebrow { background: #1E3A8A !important; color: #FFFFFF !important; }

  /* ── CARDS ICÔNES, uniforme bleu sombre au lieu de gradient bleu clair ── */
  .card .card-icon {
    background: linear-gradient(135deg, #1E3A8A 0%, #3730A3 100%) !important;
    color: #FFFFFF !important;
  }
  .card .card-icon svg { stroke: #FFFFFF !important; }

  /* ── PILLS (badges) ── */
  .pill-difficulty { background: #1F2937 !important; color: #CBD5E1 !important; }
  .pill-duration { background: #1F2937 !important; color: #CBD5E1 !important; }
  .pill-module { background: #2E1065 !important; color: #C4B5FD !important; }
  .pill-premium { background: #1E293B !important; color: #FFFFFF !important; }

  /* ── COMPARISON BARS / CHARTS ── */
  .cmp-bar { background: #1F2937 !important; }
  .cmp-bar > span { background: #93C5FD !important; }
  .cmp-val { color: #E2E8F0 !important; }
  .compound-summary { background: #1E293B !important; color: #CBD5E1 !important; }
  .compound-summary strong { color: #E2E8F0 !important; }
  .compound-point .bar { background: #1F2937 !important; }
  .compound-point .bar > span { background: #93C5FD !important; }
  .compound-point .value { color: #E2E8F0 !important; }
  .compound-point .year { color: #475569 !important; }

  /* ── ART CHART (chiffres dans articles) ── */
  .art-chart { background: #111827 !important; border-color: #1F2937 !important; }
  .art-chart .caption { color: #475569 !important; }

  /* ── MODULE CARDS / ARC BLOCKS ── */
  .module-card { background: #111827 !important; border-color: #1F2937 !important; }
  .module-card h4 { color: #E2E8F0 !important; }
  .module-card .mod-meta { color: #475569 !important; }
  .arc-block { background: #111827 !important; border-color: #1F2937 !important; }
  .arc-block h2, .arc-block h3 { color: #E2E8F0 !important; }
  .arc-block p { color: #CBD5E1 !important; }

  /* ── ELEMENTS AVEC BACKGROUND BLEU CLAIR HARDCODÉ ── */
  /* Forcer ces fonds pseudo-clairs à devenir des cartes sombres lisibles */
  [style*="background:#F5F3FF"], [style*="background: #F5F3FF"] { background: #2E1065 !important; }
  [style*="background:#F8FAFC"], [style*="background: #F8FAFC"] { background: #422006 !important; color: #FED7AA !important; }
  [style*="background:#EFF6FF"], [style*="background: #FFFFFF"] {
    background: #FFFFFF !important; /* Brand blanc cassé sobre */
    color: #1E3A8A !important; /* Texte navy pour lisibilité */
  }
  [style*="background:#DBEAFE"], [style*="background: #DBEAFE"] { background: #1E3A8A !important; color: #E2E8F0 !important; }
  [style*="background:#E0F2FE"], [style*="background: #E0F2FE"] { background: #1E293B !important; }
  [style*="background:#D1FAE5"], [style*="background: #D1FAE5"] { background: #064E3B !important; color: #6EE7B7 !important; }

  /* ── INLINE STYLES COULEURS, pour les span/p avec couleurs hardcodées ──
     ATTENTION : on N'OVERRIDE PAS color:#1E3A8A quand l'élément a aussi un fond jaune
     (background:#EFF6FF), sinon les boutons jaunes auraient du texte bleu clair illisible.
     Le :not([style*="background:#EFF6FF"]) protège ce cas. */
  [style*="color:#1E3A8A"]:not([style*="background:#EFF6FF"]):not([style*="background: #FFFFFF"]):not(.btn-primary):not(.eyebrow),
  [style*="color: #1E3A8A"]:not([style*="background:#EFF6FF"]):not([style*="background: #FFFFFF"]):not(.btn-primary):not(.eyebrow) {
    color: #93C5FD !important;
  }
  [style*="color:#5B21B6"]:not([style*="background:#EFF6FF"]):not([style*="background:#F5F3FF"]),
  [style*="color: #5B21B6"]:not([style*="background:#EFF6FF"]):not([style*="background:#F5F3FF"]) { color: #C4B5FD !important; }
  [style*="color:#166534"], [style*="color: #166534"] { color: #6EE7B7 !important; }
  [style*="color:#475569"]:not([style*="background:#F8FAFC"]),
  [style*="color: #475569"]:not([style*="background:#F8FAFC"]) { color: #FED7AA !important; }
  [style*="color:#991B1B"]:not([style*="background:#FEE2E2"]),
  [style*="color: #991B1B"]:not([style*="background:#FEE2E2"]) { color: #FCA5A5 !important; }
  [style*="color:#0F172A"], [style*="color: #0F172A"] { color: #E2E8F0 !important; }
  [style*="color:#334155"], [style*="color: #334155"] { color: #CBD5E1 !important; }
  [style*="color:#475569"], [style*="color: #475569"] { color: #475569 !important; }

  /* ── INPUT / FORMS ── */
  input, textarea, select {
    background: #111827 !important;
    color: #E2E8F0 !important;
    border-color: #1F2937 !important;
  }
  input:focus, textarea:focus, select:focus {
    border-color: #93C5FD !important;
  }
  input::placeholder, textarea::placeholder {
    color: #475569 !important;
  }

  /* ── EXCEPTIONS, éléments brand qui doivent garder leurs couleurs hardcodées ── */
  /* Le hero homepage (déjà hardcodé), les bandeaux brand bleu sombre, et le checkout MPC
     ont des couleurs explicites (#1E3A8A, #3730A3) qui restent identiques en dark.
     Si un élément a un fond bleu sombre hardcodé (genre la bannière Excel téléchargement),
     il garde son look, pas besoin d'override. */
  .hero, .hero h1, .hero p, .hero .small-note, .hero .promise { /* déjà hardcoded plus haut */ }

  /* ── TABLES (pour glossaire / tarifs / comparateurs) ── */
  table:not(.cmp-table):not(.art-comparison table) {
    background: #111827;
    color: #E2E8F0;
  }
  table:not(.cmp-table):not(.art-comparison table) th {
    background: #1E293B !important;
    color: #E2E8F0 !important;
  }
  table:not(.cmp-table):not(.art-comparison table) td {
    border-color: #1F2937 !important;
    color: #CBD5E1 !important;
  }

  /* ── SCROLLBAR custom (Webkit) ── */
  ::-webkit-scrollbar { width: 10px; background: #0B1220; }
  ::-webkit-scrollbar-thumb { background: #1F2937; border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: #334155; }

  /* ── LIENS ── */
  a { color: #93C5FD; }
  a:hover { color: #BFDBFE; }
  /* Sauf liens dans le hero, header, footer, et boutons (gardent leurs couleurs) */
  .hero a, .site-header a, .site-footer a, .btn { color: inherit; }
  .btn-primary { color: #1E3A8A !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     OVERRIDES MASSIFS, couvre TOUS les inline styles pastels du site
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── Backgrounds pastel clairs → équivalents sombres ── */
  [style*="background:#DBEAFE"], [style*="background: #DBEAFE"],
  [style*="background:#BFDBFE"], [style*="background: #BFDBFE"],
  [style*="background:#93C5FD"], [style*="background: #93C5FD"] { background: #1E3A8A !important; color: #E2E8F0 !important; }
  [style*="background:#E0F2FE"], [style*="background: #E0F2FE"],
  [style*="background:#BAE6FD"], [style*="background: #BAE6FD"] { background: #1E293B !important; color: #CBD5E1 !important; }
  [style*="background:#D1FAE5"], [style*="background: #D1FAE5"],
  [style*="background:#A7F3D0"], [style*="background: #A7F3D0"],
  [style*="background:#BBF7D0"], [style*="background: #BBF7D0"] { background: #064E3B !important; color: #6EE7B7 !important; }
  [style*="background:#F8FAFC"], [style*="background: #F8FAFC"],
  [style*="background:#EFF6FF"], [style*="background: #FFFFFF"] { background: #1E293B !important; color: #FFFFFF !important; }
  [style*="background:#F5F3FF"], [style*="background: #F5F3FF"],
  [style*="background:#EDE9FE"], [style*="background: #EDE9FE"],
  [style*="background:#DDD6FE"], [style*="background: #DDD6FE"] { background: #2E1065 !important; color: #C4B5FD !important; }
  [style*="background:#FEE2E2"], [style*="background: #FEE2E2"],
  [style*="background:#FECACA"], [style*="background: #FECACA"] { background: #450A0A !important; color: #FCA5A5 !important; }
  [style*="background:#FCE7F3"], [style*="background: #FCE7F3"] { background: #500724 !important; color: #FBCFE8 !important; }
  [style*="background:#FED7AA"], [style*="background: #FED7AA"],
  [style*="background:#FFEDD5"], [style*="background: #FFEDD5"] { background: #422006 !important; color: #FED7AA !important; }
  [style*="background:#F1F5F9"], [style*="background: #F1F5F9"],
  [style*="background:#F8FAFC"], [style*="background: #F8FAFC"],
  [style*="background:#FAFAFA"], [style*="background: #FAFAFA"] { background: #1E293B !important; }
  [style*="background:#FFFFFF"], [style*="background: #FFFFFF"],
  [style*="background:#fff"], [style*="background: #fff"] { background: #111827 !important; color: #E2E8F0; }

  /* ── Linear-gradients qui DOIVENT rester bleu sombre brand ── */
  /* Utilise [style*="linear-gradient"] avec .home-premium-band etc. déjà fixé.
     Ici on cible les gradients pastels génériques. */
  [style*="linear-gradient(135deg,#DBEAFE"],
  [style*="linear-gradient(135deg, #DBEAFE"] { background: linear-gradient(135deg, #1E3A8A, #3730A3) !important; color: #fff !important; }

  /* ── Footer logo et brand : forcer visible en sombre ── */
  .site-footer .brand,
  .site-footer .brand-logo { color: #E2E8F0 !important; }
  .site-footer .brand-logo { background: #1E3A8A !important; }
  .site-footer .brand-logo svg rect,
  .site-footer .brand-logo svg path { stroke: #FFFFFF !important; }
  .footer-brand .tag { color: #475569 !important; }
  .site-footer h4 { color: #FFFFFF !important; }
  .site-footer a { color: #CBD5E1; }
  .site-footer a:hover { color: #ffffff; }

  /* ── Reassure-band : gradient vert/bleu clair → vert sombre ── */
  .reassure-band {
    background: linear-gradient(135deg, #064E3B 0%, #1E293B 100%) !important;
    border-color: #047857 !important;
  }
  .reassure-band .rb-item { color: #E2E8F0 !important; }
  .reassure-band .rb-item .ic { background: #1E3A8A !important; }
  .reassure-band .rb-item strong { color: #6EE7B7 !important; }

  /* ── Tous les SVG icons stroke #1E3A8A → bleu clair ── */
  svg[stroke="#1E3A8A"] { stroke: #93C5FD !important; }
  .reassure-band svg { stroke: #FFFFFF !important; }

  /* ── Cards .module-card avec module-X classes ── */
  [class*="pill-module"] { background: #2E1065 !important; color: #C4B5FD !important; }

  /* ── Header dropdown ── */
  .dropdown-menu a:active { background: #1E293B; color: #FFFFFF; }

  /* ── Bandeau "PREMIUM débloque" + Excel banner inline ── */
  /* Si l'élément a `background:linear-gradient(135deg,#1E3A8A,#3730A3)` (déjà sombre), on le laisse.
     Pas de override nécessaire. */

  /* ═══════════════════════════════════════════════════════════════════════
     OVERRIDES POUR INLINE STYLES UTILISANT var(), la cause profonde
     ═══════════════════════════════════════════════════════════════════════
     Quand un élément a `style="background:var(--blue-800)"`, en mode sombre
     la variable est inversée (#93C5FD = bleu clair). On force ces patterns
     à rester en bleu sombre (couleur brand). */
  [style*="background:var(--blue-800)"],
  [style*="background: var(--blue-800)"],
  [style*="background:var(--blue-900)"],
  [style*="background: var(--blue-900)"],
  [style*="background:var(--blue-700)"],
  [style*="background: var(--blue-700)"] {
    background: #1E3A8A !important;
    color: #ffffff !important;
  }
  /* Sections avec bg blue-800 + color white explicite : texte reste blanc */
  [style*="background:var(--blue-800)"][style*="color:var(--white)"],
  [style*="background: var(--blue-800)"][style*="color: var(--white)"] {
    color: #ffffff !important;
  }
  [style*="background:var(--blue-800)"] h1,
  [style*="background:var(--blue-800)"] h2,
  [style*="background:var(--blue-800)"] h3,
  [style*="background:var(--blue-800)"] p,
  [style*="background: var(--blue-800)"] h1,
  [style*="background: var(--blue-800)"] h2,
  [style*="background: var(--blue-800)"] h3,
  [style*="background: var(--blue-800)"] p {
    color: inherit !important;
  }

  /* var(--white) en background (c'est-à-dire fond blanc) → fond carte sombre */
  [style*="background:var(--white)"]:not(.hero):not(.brand-logo),
  [style*="background: var(--white)"]:not(.hero):not(.brand-logo) {
    background: #111827 !important;
    color: #E2E8F0;
  }

  /* var(--gray-50) ou --gray-100 en background → fond légèrement plus sombre */
  [style*="background:var(--gray-50)"],
  [style*="background: var(--gray-50)"],
  [style*="background:var(--gray-100)"],
  [style*="background: var(--gray-100)"] {
    background: #1E293B !important;
  }

  /* Couleurs texte hardcodées via var() */
  [style*="color:var(--blue-800)"],
  [style*="color: var(--blue-800)"] { color: #93C5FD !important; }
  [style*="color:var(--blue-700)"],
  [style*="color: var(--blue-700)"] { color: #60A5FA !important; }
  [style*="color:var(--gray-700)"],
  [style*="color: var(--gray-700)"] { color: #CBD5E1 !important; }
  [style*="color:var(--gray-500)"],
  [style*="color: var(--gray-500)"] { color: #475569 !important; }

  /* Linear-gradient avec var(--blue-X), uniformiser sur navy */
  [style*="linear-gradient(135deg,var(--blue-800),var(--blue-700))"],
  [style*="linear-gradient(135deg, var(--blue-800), var(--blue-700))"],
  [style*="linear-gradient(135deg,var(--blue-800)"],
  [style*="linear-gradient(135deg, var(--blue-800)"] {
    background: linear-gradient(135deg, #1E3A8A, #3730A3) !important;
    color: #ffffff !important;
  }
  [style*="linear-gradient(135deg,var(--blue-100)"],
  [style*="linear-gradient(135deg, var(--blue-100)"],
  [style*="linear-gradient(135deg,var(--purple-100)"],
  [style*="linear-gradient(135deg, var(--purple-100)"] {
    background: linear-gradient(135deg, #1E293B, #2E1065) !important;
    color: #E2E8F0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AUDIT V5, Améliorations CSS génériques (callout variants, print, micro-interactions)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Callout variants (info / warning / success) ── */
.callout.info { border-left: 4px solid #1E3A8A; background: #DBEAFE; }
.callout.warning { border-left: 3px solid #475569; background: #F8FAFC; }
.callout.success { border-left: 4px solid #15803D; background: #D1FAE5; }
.callout.danger { border-left: 4px solid #DC2626; background: #FEE2E2; }

/* ── Micro-interactions sur boutons ── */
.btn:active { transform: scale(0.98); }
.sticky-cta button:active { opacity: 0.8; }

/* ── Sticky table comparison (tarifs.html) ── */
@media (min-width: 700px) {
  .cmp-table-sticky thead { position: sticky; top: 0; background: var(--white); z-index: 5; box-shadow: 0 2px 6px rgba(15,23,42,0.05); }
  .cmp-table-sticky th:first-child, .cmp-table-sticky td:first-child {
    position: sticky; left: 0; background: var(--white); z-index: 4;
  }
}

/* ── Loupe de recherche dans le header ── */
.search-toggle {
  background: transparent; border: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s; margin-right: 4px;
  color: var(--gray-500);
  opacity: 0.85;
}
.search-toggle:hover { color: var(--blue-800); opacity: 1; }
.search-toggle svg { width: 17px; height: 17px; }
@media (max-width: 780px) {
  .search-toggle { display: none; }
}

/* ── Skip link accessibilité (WCAG 2.4.1 Bypass Blocks) ── */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: #1E3A8A; color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: 14px;
  text-decoration: none; z-index: 9999;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0; outline: 2px solid #1E3A8A; outline-offset: 2px;
}

/* ── Back to top button ── */
.scroll-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  background: #1E3A8A; color: #ffffff;
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 50;
  transition: transform .15s, opacity .15s;
}
.scroll-to-top:hover { transform: translateY(-2px); }
.scroll-to-top.visible { display: flex; }

/* ── Print CSS, pour imprimer des articles/checklists ── */
@media print {
  .site-header, .site-footer, .sticky-cta, .scroll-to-top, nav, .menu-toggle, .home-premium-band, [data-toc], aside.art-toc { display: none !important; }
  body { background: #ffffff; color: #000000; font-size: 11pt; }
  h1, h2, h3 { color: #000000; page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
  a { color: #000000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .hero { background: none !important; color: #000000 !important; padding: 20pt 0 !important; }
  .hero h1, .hero p { color: #000000 !important; }
  img { max-width: 100% !important; }
}

/* ── Lazy-loading hint pour images ── */
img { loading: lazy; }

/* ── Disclaimer non-CIF (à injecter sur les articles d'investissement) ── */
.disclaimer-cif {
  background: #F8FAFC;
  border: 1px solid #475569;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 22px 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
}
.disclaimer-cif strong { color: #475569; }
.disclaimer-cif a { color: #475569; text-decoration: underline; font-weight: 600; }



/* ── Theme toggle (dark mode manual override) ── */
.theme-toggle {
  background: transparent;
  border: 0;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  margin-right: 4px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }
@media (max-width: 720px) { .theme-toggle { display: none; } }

/* Force dark via class (priorité sur prefers-color-scheme) */
html.force-dark { color-scheme: dark; }


/* WCAG link-in-text-block, souligne TOUS les liens dans le corps de texte.
   Pour ne pas reposer uniquement sur la couleur (daltoniens, malvoyants).
   Approche : underline par défaut pour les <a>, et override sur les exclusions (nav, footer, cards, buttons). */
a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Exclusions : pas d'underline sur ces classes */
header a,
footer a,
nav a,
.dropdown a,
.dropdown-menu a,
.brand,
.skip-link,
.btn,
.btn-primary,
.btn-secondary,
.btn-yellow,
.btn-ghost,
.btn-dark,
.cta-nav,
.search-toggle,
.sim-tab,
.card a,
.card-link,
.cs-card a,
.gloss-entries a,
.itinerary a,
.itinerary-body a,
.prev-card,
.prev-card a,
.sim-crosssell a,
.btn-sticky,
.gloss-letter-section a,
.module-card a,
.cmp-table a,
.recap-card a,
.feature-card a,
.next-step a,
.tarifs-card a,
.cta-band a,
.cta a,
.icon-link,
[role="button"],
[role="tab"],
.sim-paywall-link,
.faq-item summary a {
  text-decoration: none;
}
/* Hover : underline pour donner feedback */
a:hover { text-decoration: underline; }
.btn:hover, .cta-nav:hover, header a:hover, nav a:hover, footer a:hover { text-decoration: none; }

/* Visually hidden but accessible to screen readers (WCAG-compliant) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Footer h3 stylé comme h4 (pour conserver le rendu visuel après fix WCAG heading-order) */
.footer-h { font-size: 14px; font-weight: 700; color: #FFFFFF; margin: 0 0 12px; letter-spacing: 0.4px; text-transform: uppercase; }

/* === FIX ALIGNEMENT ICÔNES SVG dans les liens de cards (multi-ligne robuste) === */
/* Quand un texte de lien fait 2 lignes, vertical-align:middle casse l'alignement
   de l'icône SVG. On force inline-flex + align-items:center + gap qui marchent
   en single ET multi-line. Application aux composants cards les plus utilisés. */
.sim-crosssell .links a,
.cs-card a:has(> svg),
.next-step a:has(> svg),
.feature-card a:has(> svg),
.itinerary a:has(> svg),
.itinerary-body a:has(> svg),
.recap-card a:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.sim-crosssell .links a > svg,
.cs-card a > svg,
.next-step a > svg,
.feature-card a > svg,
.itinerary a > svg,
.itinerary-body a > svg,
.recap-card a > svg {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}