/* ==========================================================================
   Nova Épargne — design system partagé
   Source de vérité : maquette-accueil.html, maquette-article.html,
   maquette-comparatif.html (validées). Ne pas redesigner ici sans validation.
   Scopes par template : body.nova-home / body.nova-article / body.nova-comparatif
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens & base
   -------------------------------------------------------------------------- */
:root {
  --nova-bg: #fbfcf8;
  --nova-surface: #ffffff;
  --nova-surface-soft: #f3f7f1;
  --nova-text: #17211b;
  --nova-muted: #66736b;
  --nova-border: #e2e8df;
  --nova-accent: #78b88a;
  --nova-accent-strong: #3f8f5b;
  --nova-accent-soft: #e8f4eb;
  --nova-warning-soft: #fff6df;
  --nova-shadow: 0 20px 50px rgba(31, 55, 38, 0.08);
  --nova-radius: 24px;
  --nova-header-height: 74px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--nova-bg);
  color: var(--nova-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.nova-article { line-height: 1.72; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

/* --------------------------------------------------------------------------
   2. Eyebrow, chips, boutons
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--nova-accent-soft);
  color: var(--nova-accent-strong);
  font-weight: 800;
  font-size: 0.82rem;
}
.nova-home .eyebrow {
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface);
  font-weight: 700;
}
.eyebrow__icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--nova-accent-soft);
  color: var(--nova-accent-strong);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}
.chip { padding: 6px 10px; border-radius: 999px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: 0.78rem; font-weight: 700; }
.nova-comparatif .chip,
.nova-fiche .chip,
.nova-hub .chip,
.nova-outil .chip { padding: 7px 11px; background: var(--nova-surface); border: 1px solid var(--nova-border); font-size: .8rem; font-weight: 800; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nova-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface);
  color: var(--nova-text);
  font-weight: 700;
  box-shadow: none;
}
.nova-btn--primary { background: var(--nova-accent-strong); color: #fff; border-color: var(--nova-accent-strong); }
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 2000;
  background: var(--nova-text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Header + navigation desktop
   -------------------------------------------------------------------------- */
.nova-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 252, 248, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 223, 0.84);
}
.nova-header .container { width: min(1320px, calc(100% - 32px)); }
.nova-header__inner {
  height: var(--nova-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nova-logo { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.nova-logo span { color: var(--nova-accent-strong); }
.nova-nav { display: flex; align-items: center; gap: 2px; color: var(--nova-muted); font-size: 0.75rem; font-weight: 700; }
.nova-nav__list { list-style: none; display: flex; align-items: center; gap: 2px; padding: 0; margin: 0; }
.nova-nav__item { position: relative; }
.nova-nav__link,
.nova-nav__trigger {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nova-muted);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.nova-nav__link:hover,
.nova-nav__link:focus-visible,
.nova-nav__trigger:hover,
.nova-nav__trigger:focus-visible,
.nova-nav__item:focus-within > .nova-nav__trigger,
.nova-nav__item:hover > .nova-nav__trigger {
  color: var(--nova-text);
  background: var(--nova-surface);
  outline: none;
}
.nova-nav__home { width: 40px; justify-content: center; padding: 0; }
.nova-nav__home svg { width: 19px; height: 19px; }
.nova-nav__arrow { font-size: .68rem; color: var(--nova-accent-strong); transform: translateY(1px); }
.nova-dropdown,
.nova-submenu {
  position: absolute;
  z-index: 30;
  min-width: 280px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--nova-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 44px rgba(31, 55, 38, .11);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.nova-dropdown { top: calc(100% + 8px); left: 0; }
.nova-nav__item:last-child .nova-dropdown { left: auto; right: 0; }
.nova-nav__item:hover > .nova-dropdown,
.nova-nav__item:focus-within > .nova-dropdown,
.nova-dropdown__item:hover > .nova-submenu,
.nova-dropdown__item:focus-within > .nova-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nova-dropdown__item { position: relative; }
.nova-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--nova-text);
  font-size: .88rem;
  line-height: 1.25;
  font-weight: 700;
}
.nova-dropdown__link:hover,
.nova-dropdown__link:focus-visible { background: var(--nova-surface-soft); color: var(--nova-text); outline: none; }
.nova-dropdown__link--missing { color: var(--nova-muted); }
.nova-submenu { top: -8px; left: calc(100% + 8px); min-width: 300px; transform: translateX(-4px); }
.nova-submenu .nova-dropdown__link { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 2px; }
.nova-submenu__badge { color: var(--nova-accent-strong); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.nova-submenu__copy { color: var(--nova-muted); font-size: .78rem; font-weight: 600; }
.nova-header__cta { display: inline-flex; }

/* Navigation partagée : libellés sur deux lignes, deux accès prioritaires et
   répartition aérée de toute la largeur disponible entre logo et newsletter. */
.nova-header .nova-nav__link,
.nova-header .nova-nav__trigger { min-height: 54px; line-height: 1.12; text-align: center; }
.nova-header .nova-nav { flex: 1; min-width: 0; margin-inline: clamp(18px, 2.5vw, 40px); }
.nova-header .nova-nav__list { width: 100%; justify-content: space-between; gap: clamp(12px, 1.4vw, 24px); }
.nova-header .nova-nav__label { display: grid; gap: 2px; }
.nova-header .nova-nav__item--featured > .nova-nav__link {
  padding-inline: 12px;
  border: 1px solid rgba(63, 143, 91, 0.22);
  background: var(--nova-accent-soft);
  color: #2f7547;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(63, 143, 91, 0.08);
}
.nova-header .nova-nav__item--featured > .nova-nav__link:hover,
.nova-header .nova-nav__item--featured > .nova-nav__link:focus-visible {
  border-color: rgba(63, 143, 91, 0.38);
  background: #dff0e4;
  color: #245f38;
}
.nova-mobile .nova-mobile__link--featured {
  margin: 6px 0;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(63, 143, 91, 0.22);
  border-radius: 14px;
  background: var(--nova-accent-soft);
  color: #2f7547;
  font-weight: 800;
  line-height: 1.25;
}
@media (min-width: 1272px) { body { --nova-header-height: 88px; } }
@media (max-width: 1271px) {
  body { --nova-header-height: 74px; }
  .nova-mobile .nova-mobile__label { display: grid; gap: 1px; }
}
@media (min-width: 1272px) and (max-width: 1360px) {
  .nova-header .nova-nav__link,
  .nova-header .nova-nav__trigger { padding-inline: 6px; }
  .nova-header .nova-nav__item--featured > .nova-nav__link { padding-inline: 9px; }
}


/* Accueil seulement — navigation enrichie, sans effet sur les autres pages. */
.nova-header .nova-nav__item--featured > .nova-nav__link {
  border-radius: 5px;
}
.nova-header .nova-dropdown {
  padding: 10px;
  border-radius: 14px;
}
.nova-header .nova-dropdown::before {
  content: attr(data-menu-label);
  display: block;
  padding: 3px 9px 8px;
  color: var(--nova-accent-strong);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.nova-header .nova-dropdown__link,
.nova-mobile .nova-dropdown__link {
  position: relative;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.nova-header .nova-dropdown__link::before,
.nova-mobile .nova-dropdown__link::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 1px solid color-mix(in srgb, var(--nova-accent-strong) 55%, var(--nova-border));
  border-radius: 50%;
  background: linear-gradient(135deg, #e5f1e7 0%, var(--nova-accent) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}
/* Les flèches de sous-menu restent la seule information poussée à droite. */
.nova-header .nova-dropdown__link .nova-nav__arrow { margin-left: auto; }
.nova-header .nova-dropdown__link:hover,
.nova-header .nova-dropdown__link:focus-visible,
.nova-mobile .nova-dropdown__link:hover,
.nova-mobile .nova-dropdown__link:focus-visible {
  background: var(--nova-accent-soft);
  color: var(--nova-accent-strong);
  transform: translateX(2px);
}
.nova-mobile .nova-mobile__link--featured { border-radius: 5px; }

/* --------------------------------------------------------------------------
   4. Burger + menu mobile accordéon
   Le panneau .nova-mobile est un FRÈRE du header (jamais dedans) : le
   backdrop-filter du header en ferait le bloc conteneur du position:fixed.
   -------------------------------------------------------------------------- */
.nova-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface);
  cursor: pointer;
  place-items: center;
  padding: 0;
}
.nova-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--nova-text);
  margin: 2.5px auto;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nova-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nova-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nova-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.nova-mobile {
  position: fixed;
  top: var(--nova-header-height);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--nova-header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--nova-bg);
  z-index: 40;
  padding: 14px 20px 44px;
}
.nova-mobile[hidden] { display: none; }
body.nova-menu-open { overflow: hidden; }
.nova-mobile__link,
.nova-mobile__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--nova-border);
  font-weight: 700;
  font-size: 1rem;
  color: var(--nova-text);
  cursor: pointer;
  list-style: none;
}
.nova-mobile__group > summary::-webkit-details-marker { display: none; }
.nova-mobile__group > summary::after {
  content: "\25BE";
  color: var(--nova-accent-strong);
  font-size: .8rem;
  transition: transform 160ms ease;
}
.nova-mobile__group[open] > summary::after { transform: rotate(180deg); }
.nova-mobile__group ul { list-style: none; margin: 0; padding: 4px 0 10px; }
.nova-mobile__group .nova-dropdown__link { min-height: 46px; }
.nova-mobile__group .nova-mobile__subgroup { border: 0; }
.nova-mobile__subgroup > summary {
  border-bottom: 0;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .88rem;
}
.nova-mobile__subgroup > summary:hover { background: var(--nova-surface-soft); }
.nova-mobile__subgroup ul { padding-left: 12px; }
.nova-mobile__cta { margin-top: 20px; width: 100%; }
/* Bascule burger à 1271px et non 960px : la barre de nav déroulée mesure
   1241px (logo 125 + nav 966 + CTA 126 + 2 gaps) et les libellés sont en
   white-space: nowrap. En dessous de 1272px le conteneur d'en-tête
   (100% - 32px) est trop étroit, et le CTA « Newsletter » débordait à droite
   en créant un scroll horizontal sur toute la page. */
@media (max-width: 1271px) {
  .nova-nav { display: none; }
  .nova-header__cta { display: none; }
  .nova-burger { display: grid; }
}
@media (min-width: 1272px) {
  .nova-mobile { display: none !important; }
}
/* Juste au-dessus du seuil, la barre déroulée ne tient qu'à quelques pixels
   près : on resserre légèrement les items pour garder une marge de sécurité
   (polices de repli plus larges, zoom navigateur). */
@media (min-width: 1272px) and (max-width: 1360px) {
  .nova-nav__list { gap: 0; }
  .nova-nav__link,
  .nova-nav__trigger { padding: 0 5px; gap: 5px; }
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.nova-footer { padding: 54px 0 36px; border-top: 1px solid var(--nova-border); background: #fff; }
.nova-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.nova-footer h4 { margin: 0 0 12px; }
.nova-footer p, .nova-footer a { color: var(--nova-muted); font-size: 0.94rem; }
.nova-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nova-footer__bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--nova-border); }
.nova-footer__bottom p { margin: 0; color: var(--nova-muted); font-size: 0.88rem; text-align: center; }

/* --------------------------------------------------------------------------
   6. Sections génériques + cartes partagées
   -------------------------------------------------------------------------- */
.section { padding: 74px 0; }
.section--soft { background: var(--nova-surface-soft); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-title { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; }
.section-subtitle { margin: 10px 0 0; color: var(--nova-muted); font-size: 1.04rem; max-width: 740px; }
.nova-comparatif .section-subtitle,
.nova-fiche .section-subtitle,
.nova-hub .section-subtitle,
.nova-outil .section-subtitle,
.nova-legal .section-subtitle { max-width: 860px; }

.feature-card, .partner-card, .news-card, .cta-box,
.method-card, .profile-card, .info-callout, .faq-item {
  background: var(--nova-surface);
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius);
  box-shadow: 0 12px 36px rgba(31, 55, 38, 0.055);
}
.feature-card { padding: 24px; min-height: 230px; }
.nova-article .feature-card { padding: 22px; min-height: 0; }
.feature-card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--nova-accent-soft);
  color: var(--nova-accent-strong);
  font-weight: 800;
  margin-bottom: 18px;
}
.feature-card h3, .partner-card h3, .news-card h3,
.method-card h3, .profile-card h3 { margin: 0 0 10px; line-height: 1.18; letter-spacing: -0.025em; }
.feature-card p, .partner-card p, .news-card p,
.method-card p, .profile-card p { margin: 0; color: var(--nova-muted); }

/* NewsCard — composant réutilisable (ne pas connecter de données réelles) */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card { overflow: hidden; }
.news-card__media {
  height: 150px;
  background: linear-gradient(135deg, #cfe4d6 0%, var(--nova-accent-soft) 55%, var(--nova-surface-soft) 100%);
  border-bottom: 1px solid var(--nova-border);
  display: grid;
  place-items: center;
  color: var(--nova-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.news-card__body { padding: 18px; }
.news-card__meta { color: var(--nova-accent-strong); font-size: 0.78rem; font-weight: 800; margin-bottom: 10px; }

/* Cartographie du signal — visuel abstrait réservé aux actualités agrégées. */
.news-card__media--signal {
  --signal-deep: #2f6b58;
  --signal-mid: #9bc8b3;
  --signal-pale: #eaf5ef;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--signal-deep) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--signal-deep) 8%, transparent) 1px, transparent 1px),
    linear-gradient(var(--signal-angle), #fff 2%, var(--signal-pale) 58%, color-mix(in srgb, var(--signal-mid) 58%, white));
  background-size: var(--signal-grid) var(--signal-grid), var(--signal-grid) var(--signal-grid), auto;
}
.news-card__media--signal::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: var(--signal-beam);
  top: -88px;
  background: linear-gradient(150deg, transparent 28%, color-mix(in srgb, var(--signal-mid) 48%, transparent) 29% 46%, transparent 47%);
  transform: rotate(var(--signal-rotation));
}
.news-card__signal-icon {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 15px;
  color: #fff;
  background: var(--signal-deep);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--signal-deep) 24%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-card__signal-bars { position: absolute; right: 20px; bottom: 21px; display: flex; align-items: end; gap: 5px; height: 44px; opacity: .45; }
.news-card__signal-bars i { display: block; width: 5px; border-radius: 5px; background: var(--signal-deep); }
.news-card__signal-bars i:nth-child(1) { height: var(--bar-1); }
.news-card__signal-bars i:nth-child(2) { height: var(--bar-2); }
.news-card__signal-bars i:nth-child(3) { height: var(--bar-3); }
.news-card__signal-bars i:nth-child(4) { height: var(--bar-4); }
.news-card__signal-bars i:nth-child(5) { height: var(--bar-5); }
.news-card__media--signal.signal--reverse .news-card__signal-icon { left: auto; right: 22px; }
.news-card__media--signal.signal--reverse .news-card__signal-bars { right: auto; left: 20px; transform: scaleY(-1); bottom: 65px; }
.signal--crypto { --signal-deep: #4c4b91; --signal-mid: #aab3e2; --signal-pale: #eef0fb; }
.signal--world { --signal-deep: #2f6b58; --signal-mid: #9bc8b3; --signal-pale: #eaf5ef; }
.signal--south-america { --signal-deep: #9a612c; --signal-mid: #dfb77f; --signal-pale: #fbf1e4; }
.signal--asia { --signal-deep: #98515f; --signal-mid: #dfabb2; --signal-pale: #faedef; }

/* CTA box */
.cta-box {
  padding: clamp(28px, 6vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #e8f4eb);
}
.cta-box h2 { margin: 0 0 10px; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.035em; line-height: 1.08; }
.cta-box p { margin: 0; color: var(--nova-muted); max-width: 720px; }
.nova-article .cta-box { margin: 42px 0; padding: 30px; gap: 20px; }
.nova-article .cta-box h2 { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: -.03em; line-height: 1.12; }

/* FAQ : grille éditoriale partagée, 2 colonnes puis une seule sur mobile. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.nova-comparatif .faq,
.nova-fiche .faq,
.nova-hub .faq,
.nova-outil .faq,
.nova-legal .faq { margin-top: 28px; }
.faq-item { padding: 0; overflow: hidden; border-left: 1px solid var(--nova-border); transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:nth-child(even) { background: #f8fcf8; }
.faq-item summary { cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 18px 20px; font-weight: 800; line-height: 1.35; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "?"; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .92rem; font-weight: 800; }
section[id="conseils"] .faq-item summary::before { content: "i"; font-family: Georgia, serif; font-size: 1rem; font-style: italic; }
.faq-item summary::after { content: "+"; color: var(--nova-accent-strong); font-size: 1.35rem; font-weight: 500; line-height: 1; text-align: center; transition: transform .2s ease; }
.faq-item[open] { border-left: 4px solid var(--nova-accent-strong); box-shadow: 0 12px 28px rgba(31, 55, 38, .08); }
.faq-item[open] summary { padding-left: 17px; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 20px 20px 62px; color: var(--nova-muted); }
.faq-item__body { padding: 0 20px 20px 62px; color: var(--nova-muted); }
.faq-item__body p { padding: 0 0 12px; }
.faq-item__body ul { margin: 0; padding-left: 20px; }
.faq-item__body li { margin-bottom: 6px; }

/* Cartes avec image réelle (logos/visuels de marque conservés) + boutons */
.card-media { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--nova-border); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media__tag { position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--nova-accent-strong); font-size: .75rem; font-weight: 800; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.card-actions .nova-btn { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.card-tagline { margin: 10px 0 4px; color: var(--nova-accent-strong); font-size: .9rem; font-weight: 800; }

/* Indicateur de niveaux de risque (ex. Health Factor) */
.hf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.hf-cell { border: 1px solid var(--nova-border); border-radius: 12px; padding: 12px; text-align: center; background: var(--nova-surface); font-size: .85rem; font-weight: 600; }
.hf-cell strong { display: block; margin-bottom: 4px; font-size: 1.05rem; }
.hf-cell--ok { background: var(--nova-accent-soft); border-color: #d6e8d8; color: var(--nova-accent-strong); }
.hf-cell--warn { background: var(--nova-warning-soft); border-color: #efe3bd; color: #8a6d1a; }
.hf-cell--danger { background: #fdeceb; border-color: #f2cfcb; color: #b3453a; }

/* Placeholders visuels neutres (emplacements de futures images réelles) */
.placeholder {
  height: 320px;
  border-radius: 28px;
  background: linear-gradient(135deg, #e8f4eb, #fff);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--nova-border);
  display: grid;
  place-items: center;
  color: var(--nova-muted);
  font-weight: 700;
  margin: 26px 0 34px;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* Format 9 : photo bespoke en couverture plein cadre, ignore le padding/grid du placeholder */
.placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

/* --------------------------------------------------------------------------
   7. Accueil (body.nova-home) — hero carrousel, présentation, parcours
   -------------------------------------------------------------------------- */
.hero-home {
  position: relative;
  padding: 70px 0 46px;
  background: linear-gradient(180deg, #fbfcf8 0%, #f4f8f2 100%);
  overflow: hidden;
}
.hero-carousel {
  position: relative;
  /* Gabarit des flèches : voir .hero-nav-btn pour le calcul de la gouttière. */
  --hero-btn-size: 52px;
  /* Écart flèche / contenu de la slide : 18px quand la place manque, jusqu'à
     44px dès que la marge extérieure le permet (à partir de ~1330px). */
  --hero-btn-gap: clamp(18px, calc(50vw - 624px), 44px);
  --hero-btn-edge: 10px;  /* marge mini entre la flèche et le bord de l'écran */
}
.hero-slides { position: relative; min-height: 560px; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  /* 360ms : fondu assez long pour que le défilement automatique reste doux. */
  transition: opacity 360ms ease, transform 360ms ease, visibility 360ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  position: relative;
}
.hero-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr);
  gap: 60px;
  align-items: center;
  min-height: 560px;
}
.hero-title {
  margin: 22px 0 22px;
  font-size: clamp(2.7rem, 6vw, 4.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 860px;
}
.nova-home h1 {
  margin: 22px 0 22px;
  font-size: clamp(2.7rem, 6vw, 4.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 860px;
}
.hero-title__accent { color: var(--nova-accent-strong); }
.nova-home .hero-copy { color: var(--nova-muted); font-size: 1.18rem; max-width: 650px; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-placeholder {
  min-height: 500px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(120, 184, 138, 0.18), rgba(255, 255, 255, 0.5)),
    repeating-linear-gradient(135deg, rgba(63, 143, 91, 0.08) 0 1px, transparent 1px 18px),
    #eef6ed;
  border: 1px solid var(--nova-border);
  box-shadow: var(--nova-shadow);
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.hero-placeholder--patrimoine { background: linear-gradient(135deg, rgba(120,184,138,.2), rgba(255,255,255,.55)), repeating-linear-gradient(135deg, rgba(63,143,91,.08) 0 1px, transparent 1px 18px), #eef6ed; }
.hero-placeholder--actus { background: linear-gradient(135deg, rgba(120,184,138,.14), rgba(255,255,255,.72)), repeating-linear-gradient(45deg, rgba(63,143,91,.07) 0 1px, transparent 1px 20px), #f5f9f3; }
.hero-placeholder--assurance { background: linear-gradient(135deg, rgba(120,184,138,.16), rgba(255,246,223,.58)), repeating-linear-gradient(135deg, rgba(63,143,91,.07) 0 1px, transparent 1px 18px), #f6f8ef; }
.hero-placeholder--pea { background: linear-gradient(135deg, rgba(63,143,91,.2), rgba(255,255,255,.62)), repeating-linear-gradient(135deg, rgba(63,143,91,.08) 0 1px, transparent 1px 18px), #eef7ef; }
.hero-placeholder--per { background: linear-gradient(135deg, rgba(120,184,138,.15), rgba(255,246,223,.66)), repeating-linear-gradient(135deg, rgba(63,143,91,.07) 0 1px, transparent 1px 18px), #f7f6ed; }
.hero-placeholder--cto { background: linear-gradient(135deg, rgba(120,184,138,.16), rgba(232,244,235,.9)), repeating-linear-gradient(135deg, rgba(63,143,91,.08) 0 1px, transparent 1px 18px), #f0f8f5; }
.hero-placeholder--epargne { background: linear-gradient(135deg, rgba(120,184,138,.2), rgba(255,255,255,.6)), repeating-linear-gradient(135deg, rgba(63,143,91,.08) 0 1px, transparent 1px 18px), #edf8f1; }
.hero-placeholder--presentation {
  min-height: 430px;
  background:
    linear-gradient(135deg, rgba(232, 244, 235, 0.95), rgba(255, 255, 255, 0.64)),
    repeating-linear-gradient(135deg, rgba(63, 143, 91, 0.07) 0 1px, transparent 1px 18px),
    var(--nova-accent-soft);
}
/* après les modificateurs : leur shorthand background réinitialiserait size/position */
.hero-placeholder,
.hero-placeholder--presentation {
  background-size: cover;
  background-position: center;
}
.placeholder-card {
  width: 100%;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(226, 232, 223, 0.9);
  padding: 18px;
  color: var(--nova-muted);
  font-size: 0.92rem;
  font-weight: 600;
}
/* Flèches du carrousel héro : pastille pleine sage green, halo vert doux et
   agrandissement au survol — même parti pris que les flèches d'accueil de
   defi-epargne (cercle plein, glow coloré, scale au hover), décliné à la
   charte Nova. */
.hero-nav-btn {
  position: absolute;
  top: 42%;
  z-index: 4;
  width: var(--hero-btn-size);
  height: var(--hero-btn-size);
  border-radius: 999px;
  border: 0;
  /* Vert soutenu (et non le sage clair) : le chevron blanc garde ainsi un
     contraste ≥ 3:1 sur toute la surface, cf. WCAG 1.4.11. */
  background: linear-gradient(135deg, var(--nova-accent-strong) 0%, #2f7a4c 100%);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(63, 143, 91, .30), 0 2px 6px rgba(31, 55, 38, .12);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hero-nav-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(63, 143, 91, .42), 0 3px 8px rgba(31, 55, 38, .16);
}
.hero-nav-btn:active { transform: scale(.95); }
.hero-nav-btn:focus-visible {
  outline: 3px solid var(--nova-accent-strong);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-nav-btn { transition: none; }
  .hero-nav-btn:hover, .hero-nav-btn:active { transform: none; }
}
/* Les flèches se posent dans la marge extérieure du conteneur (1120px) dès
   qu'elle est assez large ; sinon elles se collent au bord de l'écran et la
   slide réserve une gouttière équivalente (padding ci-dessous) pour que la
   flèche droite ne recouvre jamais l'image. Base 100% = largeur du document
   (et non 100vw, qui inclut la barre de défilement et décalait les deux
   boutons vers la droite). */
.hero-prev { left: max(var(--hero-btn-edge), calc((100% - 1120px) / 2 - var(--hero-btn-gap) - var(--hero-btn-size))); }
.hero-next { right: max(var(--hero-btn-edge), calc((100% - 1120px) / 2 - var(--hero-btn-gap) - var(--hero-btn-size))); }
/* Gouttière réservée tant que la marge extérieure ne suffit pas :
   648px ≈ 1120/2 + edge (10) + taille (52) + écart mini (18), avec la
   tolérance de la barre de défilement ; plafonnée à 60px, valeur atteinte dès
   que le conteneur passe en « 100% - 40px ». */
.hero-slide .container { padding-inline: clamp(0px, calc(648px - 50vw), 60px); }
.hero-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  max-width: 980px;
}
.hero-tab {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface);
  color: var(--nova-muted);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.hero-tab:hover,
.hero-tab:focus-visible {
  color: var(--nova-text);
  border-color: var(--nova-accent-strong);
  outline: 3px solid var(--nova-accent-soft);
}
.hero-tab.is-active {
  background: var(--nova-accent-strong);
  border-color: var(--nova-accent-strong);
  color: #fff;
}
.presentation-section {
  padding: 76px 0;
  background: #fff;
  border-top: 1px solid var(--nova-border);
  border-bottom: 1px solid var(--nova-border);
}
.presentation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
  gap: 56px;
  align-items: center;
}
.presentation-title {
  margin: 22px 0 22px;
  font-size: clamp(2.15rem, 4.5vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 780px;
}
.presentation-copy { margin: 0; color: var(--nova-muted); font-size: 1.08rem; max-width: 760px; }
.presentation-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.presentation-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--nova-surface);
  border: 1px solid var(--nova-border);
  color: var(--nova-text);
  font-size: .88rem;
  font-weight: 700;
}
.presentation-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--nova-accent-strong);
  box-shadow: 0 0 0 4px var(--nova-accent-soft);
  flex: 0 0 auto;
}
.nova-home .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nova-home .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nova-home .partner-card { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.partner-card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-card__media {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(120, 184, 138, .18), rgba(255, 255, 255, .72)),
    repeating-linear-gradient(135deg, rgba(63, 143, 91, .07) 0 1px, transparent 1px 18px),
    #eef6ed;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--nova-border);
  display: grid;
  place-items: center;
  color: var(--nova-muted);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  padding: 14px;
}
.partner-card__subtitle { margin: -4px 0 0; color: var(--nova-accent-strong); font-size: .9rem; font-weight: 800; }
.nova-home .partner-card .nova-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   8. Article / guide (body.nova-article)
   -------------------------------------------------------------------------- */
.article-hero { padding: 74px 0 46px; background: linear-gradient(180deg, #fbfcf8 0%, #f3f7f1 100%); border-bottom: 1px solid var(--nova-border); }
.breadcrumb { color: var(--nova-muted); font-size: .92rem; font-weight: 600; margin-bottom: 22px; }
.nova-article h1,
.nova-comparatif h1,
.nova-fiche h1,
.nova-hub h1,
.nova-outil h1,
.nova-legal h1 { margin: 20px 0 20px; max-width: 900px; font-size: clamp(2.55rem, 6vw, 4.35rem); line-height: 1.02; letter-spacing: -.045em; }
.article-deck { max-width: 760px; color: var(--nova-muted); font-size: 1.18rem; margin: 0; }
.h1-sub { display: block; margin-top: 10px; font-size: 0.5em; font-weight: 600; letter-spacing: -0.02em; color: var(--nova-muted); line-height: 1.2; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 60px; align-items: start; padding: 64px 0 84px; }
.toc { position: sticky; top: 100px; border: 1px solid var(--nova-border); border-radius: 20px; background: #fff; padding: 18px; box-shadow: 0 12px 30px rgba(31, 55, 38, .04); }
.toc strong { display: block; margin-bottom: 10px; }
.toc a { display: block; color: var(--nova-muted); padding: 7px 0; font-weight: 600; font-size: .92rem; }
.article-content { font-size: 1.06rem; }
.article-content h2 { margin: 54px 0 16px; font-size: clamp(1.85rem, 4vw, 2.45rem); line-height: 1.12; letter-spacing: -.035em; }
.article-content h3 { margin: 26px 0 8px; font-size: 1.24rem; line-height: 1.22; letter-spacing: -.02em; }
.article-content p { color: var(--nova-muted); margin: 0 0 18px; }
.article-content ul { color: var(--nova-muted); margin: 0 0 18px; padding-left: 22px; }
.article-content li { margin-bottom: 8px; }
.nova-article .feature-grid,
.nova-article .comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 34px; }
.nova-article .profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 34px; }
.nova-article .feature-card h3 { margin-top: 0; }
/* Stablecoins MiCA : hiérarchie locale des obligations et comparaison réglementaire. */
.nova-article .mica-obligations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nova-article .mica-obligations-grid .feature-card { min-height: 0; padding: 20px; }
.nova-article .mica-obligations-grid .feature-card h3 { font-size: 1.02rem; }
.nova-article .mica-comparison .feature-card--mica { border-left: 4px solid var(--nova-accent-strong); background: #f8fcf8; }
.nova-article .mica-comparison .feature-card--non-mica { border-left: 4px solid #c9d0ca; }
/* Stablecoins MiCA : rythme éditorial et repères chiffrés, limités à cet article. */
.stablecoins-mica-article > section { scroll-margin-top: 112px; }
.stablecoins-mica-article .mica-section { margin: 46px -32px; padding: 32px; border: 1px solid var(--nova-border); border-radius: 28px; }
.stablecoins-mica-article .mica-section--soft { background: var(--nova-surface-soft); }
.stablecoins-mica-article .mica-section h2:first-child,
.stablecoins-mica-article .mica-section .eyebrow + h2 { margin-top: 0; }
.stablecoins-mica-article .mica-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 30px; }
.stablecoins-mica-article .mica-stat { padding: 17px 15px; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: 16px; text-align: center; }
.stablecoins-mica-article .mica-stat strong { display: block; color: var(--nova-accent-strong); font-size: 1.18rem; letter-spacing: -.03em; line-height: 1.1; }
.stablecoins-mica-article .mica-stat span { display: block; margin-top: 7px; color: var(--nova-muted); font-size: .78rem; font-weight: 600; line-height: 1.35; }
.stablecoins-mica-article .mica-stat-grid--agrement { margin-bottom: 24px; }
.stablecoins-mica-article .mica-callout--update { margin-top: 20px; }
.stablecoins-mica-article .mica-callout--example { border-color: #cfe1d2; }
.stablecoins-mica-article #reserves .chip-row { margin: 22px 0 0; }
.nova-article .info-callout { padding: 24px; background: var(--nova-accent-soft); border-color: #d6e8d8; margin: 24px 0; }
.nova-article .info-callout--warning { background: var(--nova-warning-soft); border-color: #efe3bd; }
.info-callout h3 { margin: 0 0 8px; line-height: 1.2; letter-spacing: -.02em; }
.info-callout strong { color: var(--nova-text); }
.context-note { text-align: center; color: var(--nova-muted); font-size: 0.9rem; margin: 28px auto 18px; max-width: 900px; padding: 0 20px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0 36px; }
/* Variante réservée aux explications fiscales, dont le contenu exige des cartes
   plus larges que le gabarit synthétique standard à quatre colonnes. */
.steps.steps--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* Variante pour les séquences liées : relie les jalons sans changer le gabarit des étapes standard. */
.steps.steps--connected { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.steps.steps--connected:has(.step:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.steps--connected:not(:has(.step:nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
.steps.steps--connected::before { display: none; }
.steps--connected .step:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 42px; left: 42px; width: calc(100% + 18px); height: 2px; background: var(--nova-accent-soft); pointer-events: none; }
.steps--connected .step { position: relative; padding: 22px; box-shadow: 0 8px 22px rgba(31, 55, 38, .045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.steps--connected .step:hover { transform: translateY(-2px); border-color: #c7ddca; box-shadow: 0 12px 28px rgba(31, 55, 38, .09); }
.steps--connected .step span { position: relative; z-index: 3; width: 42px; height: 42px; margin-bottom: 16px; background: #d6e8d8; box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(31, 55, 38, .10); }
.step { background: #fff; border: 1px solid var(--nova-border); border-radius: 20px; padding: 20px; }
.step span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--nova-accent-soft);
  color: var(--nova-accent-strong);
  font-weight: 800;
  margin-bottom: 14px;
}
.step h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.02em; }
.step p { margin: 0; color: var(--nova-muted); font-size: .94rem; }

/* --------------------------------------------------------------------------
   9. Comparatif / pilier affiliation (body.nova-comparatif)
   -------------------------------------------------------------------------- */
.comparison-hero { padding: 78px 0 54px; background: linear-gradient(180deg, #fbfcf8 0%, #f3f7f1 100%); border-bottom: 1px solid var(--nova-border); }
.comparison-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: center; }
.nova-comparatif .hero-copy,
.nova-fiche .hero-copy,
.nova-hub .hero-copy,
.nova-outil .hero-copy,
.nova-legal .hero-copy { margin: 0 0 26px; max-width: 790px; color: var(--nova-muted); font-size: 1.16rem; }
.hero-panel { background: #fff; border: 1px solid var(--nova-border); border-radius: 30px; box-shadow: var(--nova-shadow); padding: 24px; }
.hero-panel strong { display: block; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; }
.hero-panel p { margin: 0; color: var(--nova-muted); }

/* Hero photo des comparatifs : media 16:9 sans panneau texte. */
.hero-panel--image {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.hero-panel--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.method-card, .profile-card { padding: 22px; }
.nova-comparatif .partner-grid,
.nova-fiche .partner-grid,
.nova-hub .partner-grid,
.nova-outil .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; align-items: stretch; }
/* Colonne flex (et non grid + align-content:start) pour que .card-actions puisse
   être poussé en bas via margin-top:auto : les CTA s'alignent alors d'une carte à
   l'autre sur une même rangée, malgré des descriptions de longueurs différentes. */
.nova-comparatif .partner-card,
.nova-fiche .partner-card,
.nova-hub .partner-card,
.nova-outil .partner-card { padding: 22px; display: flex; flex-direction: column; height: 100%; gap: 16px; }
/* Les blocs à hauteur (logo 92px) ou ratio (média 16:9) fixes ne doivent pas se
   faire comprimer par le flex-shrink quand le texte de la carte est long. */
.nova-comparatif .partner-card > .partner-card__logo,
.nova-fiche .partner-card > .partner-card__logo,
.nova-hub .partner-card > .partner-card__logo,
.nova-outil .partner-card > .partner-card__logo,
.nova-comparatif .partner-card > .partner-card__media,
.nova-fiche .partner-card > .partner-card__media,
.nova-hub .partner-card > .partner-card__media,
.nova-outil .partner-card > .partner-card__media { flex: 0 0 auto; }
.nova-comparatif .partner-card > .card-actions,
.nova-fiche .partner-card > .card-actions,
.nova-hub .partner-card > .card-actions,
.nova-outil .partner-card > .card-actions { margin-top: auto; }
.partner-card__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 92px;
  padding: 14px;
  border: 1px solid var(--nova-border);
  border-radius: 18px;
  background: var(--nova-surface);
  text-align: center;
}
.partner-card__logo img,
.partner-card__logo img.svg-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}
.partner-card__product-badge {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 3px 7px;
  border: 1px solid var(--nova-border);
  border-radius: 999px;
  background: #fff;
  color: var(--nova-muted);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}
.partner-card__product-badge::before { content: attr(aria-label); }
.partner-card__product-badge svg { display: none; }
.card-illustration {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  border: 1px solid var(--nova-border);
  margin: 0 0 12px;
}
/* Photos éditoriales de section : même cadre 16:9, avec le rythme des anciens placeholders. */
.section-illustration { border-radius: 28px; margin: 26px 0 34px; }
.split > .section-illustration { align-self: stretch; width: 100%; height: 100%; min-height: 280px; margin: 0; aspect-ratio: auto; }
/* ⚠️ PLUS AUCUN USAGE DANS LE HTML depuis le 2026-08-17 — ne pas réemployer sans
   vérifier le ratio natif de la photo. Ce modificateur imposait un cadre 3/4 à
   des illustrations de section qui sont TOUTES en 1536x1024 (paysage, ratio 1.5) :
   `object-fit: cover` en jetait la moitié de la largeur, et le cadre de 560px
   étirait le bloc bien au-delà de la hauteur du texte (mesuré sur wallets.html :
   337px de vide sous une colonne de 223px). Conservé pour une éventuelle photo
   réellement verticale, mais l'unique usage du site a été retiré. */
.split > .section-illustration--portrait { align-self: center; height: auto; min-height: 0; max-height: 560px; aspect-ratio: 3 / 4; }
/* variante photo : l'image remplit le cadre 16:9 déjà porté par .partner-card__media
   (un <img> en enfant direct de .partner-card, flex column, tirerait sa hauteur
   de sa taille intrinsèque et ignorerait aspect-ratio) */
.partner-card__media--photo { padding: 0; background: none; overflow: hidden; }
.partner-card__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}
.partner-card__media--brand-logo,
.card-media--brand-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 92px;
  aspect-ratio: auto;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--nova-border);
  border-radius: 18px;
  background: var(--nova-surface);
}
.partner-card__media--brand-logo img,
.card-media--brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}
.partner-card__logo--enveloppe { align-content: center; gap: 2px; }
.partner-card__logo--enveloppe strong { font-size: 1.02rem; letter-spacing: -.01em; color: var(--nova-text); }
.partner-card__logo--enveloppe span { font-size: .78rem; font-weight: 600; color: var(--nova-muted); }
.table-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid var(--nova-border); border-radius: 24px; background: #fff; box-shadow: 0 12px 36px rgba(31, 55, 38, .055); }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 820px; }
.table-wrap--compact table { min-width: 0; }
.table-wrap th, .table-wrap td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--nova-border); vertical-align: top; }
.table-wrap th { background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table-wrap td { color: var(--nova-muted); }
.table-wrap td strong { color: var(--nova-text); }
.nova-comparatif .profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.nova-comparatif .profile-card ul,
.nova-comparatif .partner-card ul,
.nova-fiche .partner-card ul,
.nova-hub .partner-card ul,
.nova-outil .partner-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--nova-muted); }
.nova-comparatif .profile-card li,
.nova-comparatif .partner-card li,
.nova-fiche .partner-card li,
.nova-hub .partner-card li,
.nova-outil .partner-card li { margin-bottom: 8px; }
.nova-comparatif .section .eyebrow,
.nova-fiche .section .eyebrow,
.nova-hub .section .eyebrow,
.nova-outil .section .eyebrow,
.nova-legal .section .eyebrow { margin-bottom: 14px; }
.nova-comparatif .info-callout,
.nova-fiche .info-callout,
.nova-hub .info-callout,
.nova-outil .info-callout { padding: 22px; background: var(--nova-warning-soft); border-color: #efe3bd; margin-top: 28px; }
.nova-comparatif .info-callout p,
.nova-fiche .info-callout p,
.nova-hub .info-callout p,
.nova-outil .info-callout p { margin: 0; color: var(--nova-muted); }
.nova-comparatif .info-callout p + p,
.nova-fiche .info-callout p + p,
.nova-hub .info-callout p + p,
.nova-outil .info-callout p + p { margin-top: 10px; }
.nova-comparatif .split,
.nova-fiche .split,
.nova-hub .split,
.nova-outil .split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; align-items: start; margin-top: 10px; }
.nova-comparatif .split .placeholder,
.nova-fiche .split .placeholder,
.nova-hub .split .placeholder,
.nova-outil .split .placeholder { margin: 0; height: auto; min-height: 280px; align-self: stretch; }
/* Zigzag : on inverse la 2e colonne, quelle que soit la façon dont l'image est
   balisée. Le sélecteur ne visait que .placeholder, si bien que les 24 blocs
   dont l'illustration est un <img class="card-illustration"> nu — hubs et
   tutoriels — portaient split--flip sans aucun effet visuel. Les 272 .split du
   site ont exactement deux enfants : cibler le 2e est structurel et survit à un
   changement de balisage de l'image. */
.nova-comparatif .split--flip > :nth-child(2),
.nova-fiche .split--flip > :nth-child(2),
.nova-hub .split--flip > :nth-child(2),
.nova-outil .split--flip > :nth-child(2) { order: -1; }
.nova-comparatif .split .section-subtitle,
.nova-fiche .split .section-subtitle,
.nova-hub .split .section-subtitle,
.nova-outil .split .section-subtitle { margin-bottom: 0; }
.nova-comparatif .split h3,
.nova-fiche .split h3,
.nova-hub .split h3,
.nova-outil .split h3 { margin: 0 0 14px; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.15; }
.nova-comparatif .split h4,
.nova-fiche .split h4,
.nova-hub .split h4 { margin: 16px 0 4px; font-size: 1.02rem; letter-spacing: -.01em; }
.nova-comparatif .split h4 + p,
.nova-fiche .split h4 + p,
.nova-hub .split h4 + p { margin: 0; color: var(--nova-muted); }
.nova-comparatif .split .chip-row,
.nova-fiche .split .chip-row,
.nova-hub .split .chip-row,
.nova-outil .split .chip-row { margin-top: 18px; }
.nova-comparatif .split .nova-btn,
.nova-fiche .split .nova-btn,
.nova-hub .split .nova-btn,
.nova-outil .split .nova-btn { margin-top: 20px; }
.nova-comparatif .btn-row,
.nova-fiche .btn-row,
.nova-legal .btn-row,
.nova-outil .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.nova-comparatif .table-note,
.nova-fiche .table-note { margin: 26px 0 0; font-weight: 700; color: var(--nova-text); }
.nova-comparatif .table-wrap small,
.nova-fiche .table-wrap small { display: block; margin-top: 2px; font-size: .82rem; color: var(--nova-muted); }
.nova-comparatif .verdict { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 30px; padding: 36px; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); box-shadow: 0 12px 36px rgba(31, 55, 38, .055); }
.nova-comparatif .verdict__figure { text-align: center; border-right: 1px solid var(--nova-border); padding-right: 30px; }
.nova-comparatif .verdict__label { display: block; margin: 16px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nova-muted); font-weight: 700; }
.nova-comparatif .verdict__value { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; color: var(--nova-accent-strong); line-height: 1; }
.nova-comparatif .verdict h3 { margin: 0 0 12px; font-size: 1.5rem; letter-spacing: -.03em; }
.nova-comparatif .verdict__body > p { margin: 0 0 18px; color: var(--nova-muted); }
.nova-comparatif .verdict__features { display: flex; gap: 14px; }
.nova-comparatif .verdict__features > div { flex: 1; padding: 14px 18px; background: var(--nova-surface-soft); border: 1px solid var(--nova-border); border-radius: 16px; font-size: .9rem; color: var(--nova-muted); }
.nova-comparatif .verdict__features strong { display: block; margin-bottom: 4px; color: var(--nova-text); }
.nova-comparatif .stat-grid,
.nova-hub .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.nova-comparatif .stat-box,
.nova-hub .stat-box { padding: 20px; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: 20px; text-align: center; }
.nova-comparatif .stat-box strong,
.nova-hub .stat-box strong { display: block; font-size: 1.5rem; letter-spacing: -.02em; color: var(--nova-text); }
.nova-comparatif .stat-box--gain strong { color: var(--nova-accent-strong); }
.nova-comparatif .stat-box span,
.nova-hub .stat-box span { display: block; margin-top: 6px; font-size: .85rem; color: var(--nova-muted); }

/* --------------------------------------------------------------------------
   9bis. Fiche détail partenaire/protocole/wallet (body.nova-fiche)
   Réutilise les composants du template Comparatif (sélecteurs étendus
   ci-dessus) + composants propres aux fiches.
   -------------------------------------------------------------------------- */
.nova-fiche .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.nova-fiche .service-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nova-fiche .service-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nova-fiche .service-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: 20px; padding: 20px; }
.nova-fiche .service-card h4 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.02em; }
.nova-fiche .service-card p { margin: 0; color: var(--nova-muted); font-size: .94rem; }
.nova-fiche .cta-box { margin: 42px 0; padding: 34px; text-align: center; display: block; }
.nova-fiche .cta-box h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; }
.nova-fiche .cta-box p { margin: 0 auto 22px; max-width: 700px; }
.nova-fiche .step h4 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.02em; }
.nova-fiche .info-callout h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -.02em; }
.nova-fiche .split .steps { grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; }
/* La variante connectée conserve son parcours horizontal dans les tutoriels .nova-fiche. */
.nova-fiche .split .steps.steps--connected { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0 36px; }
.nova-fiche .split .steps.steps--connected:has(.step:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nova-fiche .split .steps.steps--connected:not(:has(.step:nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
/* Dans une colonne de .split, les séquences denses restent verticales et lisibles. */
.nova-fiche .split .steps.steps--connected.steps--stacked { grid-template-columns: 1fr; gap: 14px; margin: 24px 0 36px; }
.steps--connected.steps--stacked .step { padding-left: 76px; }
.steps--connected.steps--stacked .step span { position: absolute; top: 22px; left: 20px; margin: 0; }
.steps--connected.steps--stacked .step:not(:last-child)::after { top: 64px; right: auto; bottom: -14px; left: 40px; width: 2px; height: auto; }
.nova-fiche .split .steps.steps--connected.steps--stacked:has(.step:nth-child(4)),
.nova-fiche .split .steps.steps--connected.steps--stacked:not(:has(.step:nth-child(3))) { grid-template-columns: 1fr; }
.nova-fiche .split ul { margin: 14px 0 0; padding-left: 18px; color: var(--nova-muted); }
.nova-fiche .split ul li { margin-bottom: 8px; }
.nova-fiche .service-card .partner-card__logo { margin-bottom: 12px; }
.nova-fiche .service-card .card-actions { margin-top: 12px; }
.nova-fiche .split img { width: 100%; border-radius: var(--nova-radius); border: 1px solid var(--nova-border); box-shadow: 0 12px 36px rgba(31, 55, 38, .055); }
/* Cadrage éditorial : préserver le logo Assurancevie.com dans la capture de Lucya Cardif. */
.assurancevie-com__intro-visual img { object-position: 0% center; }
.assurancevie-com__features-visual img { object-position: 8% center; }
.placement-direct__features-visual img { object-position: 8% center; }
.altaprofits__features-visual img { object-position: 8% center; }
.meilleurtaux-placement__features-visual img { object-position: 25% center; }

/* --------------------------------------------------------------------------
   9ter. Catégorie / hub (body.nova-hub) — réutilise comparatif/fiche + cartes
   de parcours avec ligne de rendement.
   -------------------------------------------------------------------------- */
.nova-hub .card-apy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--nova-border); border-radius: 14px; background: var(--nova-surface-soft); }
.nova-hub .card-apy span { font-size: .78rem; font-weight: 700; color: var(--nova-muted); text-transform: uppercase; letter-spacing: .04em; }
.nova-hub .card-apy strong { font-size: 1.12rem; letter-spacing: -.02em; color: var(--nova-accent-strong); white-space: nowrap; }

/* Parcours « Rémunérer vos espèces » : visuels 4:3 et finition locale aux trois niveaux. */
.nova-hub .remuneration-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nova-hub .remuneration-levels .partner-card--remuneration-level { padding: 24px; border-color: #d8e6da; box-shadow: 0 10px 26px rgba(31, 55, 38, .07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.nova-hub .remuneration-levels .partner-card--remuneration-level:hover { transform: translateY(-4px); border-color: #bdd8c1; box-shadow: 0 18px 38px rgba(31, 55, 38, .14); }
.nova-hub .remuneration-levels .card-illustration--tall { aspect-ratio: 4 / 3; margin-bottom: 6px; border-color: #cfe1d2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 18px rgba(31, 55, 38, .08); }
.nova-hub .remuneration-levels .card-apy { background: var(--nova-accent-soft); border-color: #cfe1d2; }
.nova-hub .remuneration-levels .card-apy span { color: var(--nova-accent-strong); }

/* --------------------------------------------------------------------------
   9quater. Outil / simulateur (body.nova-outil) — coquille statique Nova +
   habillage clair des composants générés/pilotés par JS (markup et scripts
   d'outil conservés tels quels).
   -------------------------------------------------------------------------- */
/* Catalogue promotions (bonus.html — markup généré par bonus-page.js) */
.nova-outil .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 22px; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); margin-top: 34px; }
.nova-outil .toolbar-title { font-weight: 800; }
.nova-outil .toolbar-subtitle { color: var(--nova-muted); font-size: .88rem; }
.nova-outil .toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nova-outil .toolbar-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface); font: inherit; font-weight: 700; color: var(--nova-muted); cursor: pointer; }
.nova-outil .toolbar-btn.active { background: var(--nova-accent-strong); border-color: var(--nova-accent-strong); color: #fff; }
.nova-outil .catalog-section { margin-top: 46px; }
.nova-outil .section-kicker { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-weight: 800; font-size: .82rem; margin-bottom: 12px; }
.nova-outil .catalog-section .section-title-premium { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1.12; }
.nova-outil .section-intro { margin: 0 0 18px; color: var(--nova-muted); max-width: 860px; }
.nova-outil .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nova-outil .promo-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); overflow: hidden; display: flex; flex-direction: column; }
.nova-outil .promo-card .card-media { position: relative; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.nova-outil .promo-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.nova-outil .promo-card .card-media--brand-logo { height: 92px; aspect-ratio: auto; margin: 12px 12px 0; padding: 14px; border: 1px solid var(--nova-border); border-radius: 18px; background: var(--nova-surface); display: flex; align-items: center; justify-content: center; }
.nova-outil .promo-card .card-media--brand-logo img { width: auto; height: auto; max-width: 100%; max-height: 40px; object-fit: contain; }
.nova-outil .promo-card .card-media--brand-logo .card-media-overlay { display: none; }
.nova-outil .card-media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 33, 27, 0) 40%, rgba(23, 33, 27, .45)); }
.nova-outil .promo-card__status { padding: 12px 12px 0; }
.nova-outil .status-chip { padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(255, 255, 255, .92); color: var(--nova-muted); border: 1px solid var(--nova-border); }
.nova-outil .status-chip.active { color: var(--nova-accent-strong); }
.nova-outil .promo-card .card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.nova-outil .entity-meta h3 { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: -.02em; }
.nova-outil .entity-meta p { margin: 0; color: var(--nova-muted); font-size: .92rem; }
.nova-outil .offer-title { font-weight: 800; color: var(--nova-accent-strong); }
.nova-outil .offer-copy { color: var(--nova-muted); font-size: .94rem; }
.nova-outil .offer-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.nova-outil .offer-meta span { padding: 5px 10px; border-radius: 999px; background: var(--nova-surface-soft); border: 1px solid var(--nova-border); font-size: .78rem; font-weight: 700; color: var(--nova-muted); }
.nova-outil .promo-card .card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.nova-outil .primary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--nova-accent-strong); color: #fff; font-weight: 700; }
.nova-outil .primary-link.disabled-link { background: var(--nova-surface-soft); color: var(--nova-muted); pointer-events: none; }
.nova-outil .secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface); color: var(--nova-text); font-weight: 700; }
.nova-outil .empty-state { padding: 22px; border: 1px dashed var(--nova-border); border-radius: var(--nova-radius); color: var(--nova-muted); background: var(--nova-surface); }

/* Simulateur fiscal (simulateur-fiscalite.html — logique JS conservée, ids intacts) */
.nova-outil .simulator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 18px; margin-top: 36px; align-items: start; }
.nova-outil .input-card, .nova-outil .output-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 26px; }
.nova-outil .simulator-confrontation-output { grid-column: 1 / -1; }
.nova-outil .input-card h3 { margin: 0 0 22px; font-size: 1.2rem; letter-spacing: -.02em; }
.nova-outil .input-group { margin-bottom: 18px; }
.nova-outil .input-group > label { display: block; font-size: .85rem; font-weight: 700; color: var(--nova-muted); margin-bottom: 8px; }
.nova-outil .input-group--separated { border-top: 1px solid var(--nova-border); padding-top: 18px; }
.nova-outil .input-wrapper { display: flex; align-items: center; gap: 12px; }
.nova-outil .input-wrapper label { font-size: .8rem; color: var(--nova-muted); min-width: 90px; }
.nova-outil .input-wrapper input[type="range"] { flex: 1; accent-color: var(--nova-accent-strong); min-width: 0; }
.nova-outil .value-display { flex: 0 0 auto; min-width: 84px; padding: 6px 10px; border: 1px solid var(--nova-border); border-radius: 10px; background: var(--nova-surface-soft); font-size: .85rem; font-weight: 800; color: var(--nova-text); text-align: center; }
/* Variante éditable : field-sizing laisse la pastille grandir avec la valeur
   saisie (jusqu'à « 1 000 000 ») au lieu de rogner le texte ; min/max encadrent
   la plage. Navigateurs sans field-sizing : comportement inchangé à 96px. */
.nova-outil input.value-display { width: 96px; field-sizing: content; min-width: 96px; max-width: 150px; }
.nova-outil .input-hint { font-size: .75rem; color: var(--nova-muted); margin: 6px 0 0; }
.nova-outil .input-hint--positive { color: var(--nova-accent-strong); }
.nova-outil .simulator-summary-row { display: flex; gap: 14px; align-items: stretch; margin-bottom: 24px; flex-wrap: wrap; }
.nova-outil .result-badge { flex: 1; min-width: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 18px; background: var(--nova-surface-soft); border: 1px solid var(--nova-border); border-radius: 18px; }
.nova-outil .badge-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nova-muted); margin-bottom: 6px; text-align: center; }
.nova-outil .badge-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.nova-outil .verdict-box { flex: 1.8; min-width: 220px; display: flex; flex-direction: column; justify-content: center; padding: 20px 24px; background: var(--nova-accent-soft); border: 1px solid #d6e8d8; border-radius: 18px; }
.nova-outil .verdict-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--nova-accent-strong); margin-bottom: 4px; }
.nova-outil .verdict-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--nova-accent-strong); }
.nova-outil .chart-container { position: relative; height: 320px; margin-bottom: 28px; }
.nova-outil .performance-nette { padding: 20px; border-radius: 18px; background: var(--nova-accent-soft); border: 1px solid #d6e8d8; text-align: center; font-weight: 600; margin-bottom: 28px; }
.nova-outil .performance-nette strong { color: var(--nova-accent-strong); font-size: 1.15em; font-weight: 800; }
.nova-outil .confrontation-grid-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nova-outil .confrontation-card { border: 1px solid var(--nova-border); border-radius: 20px; padding: 20px; background: var(--nova-surface-soft); }
.nova-outil .confrontation-card .chip-row { margin-bottom: 12px; }
.nova-outil .confrontation-card .placeholder { height: 110px; margin: 0 0 14px; }
.nova-outil .confrontation-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.nova-outil .fiscal-card .confrontation-value { color: #b3453a; }
.nova-outil .web3-card .confrontation-value { color: var(--nova-accent-strong); }
.nova-outil .confrontation-card p { margin: 8px 0 0; color: var(--nova-muted); font-size: .85rem; }
.nova-outil .sim-callout { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--nova-border); border-radius: 18px; background: var(--nova-surface); margin-top: 18px; }
.nova-outil .sim-callout h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.nova-outil .sim-callout p { margin: 4px 0 0; color: var(--nova-muted); font-size: .9rem; }
.nova-outil .sim-callout__body { flex: 1; min-width: 240px; }
.nova-outil .sim-callout__body > div[id] { color: var(--nova-muted); font-size: .92rem; line-height: 1.74; margin-top: 14px; }
.nova-outil .sim-callout__body > div[id] p { margin: 0 0 12px; }
.nova-outil .sim-callout button, .nova-outil .sim-callout .btn-premium-action { font: inherit; cursor: pointer; }

/* Simulateur d'impôts (simulateur-impots.html — calculateTax intact) */
.nova-outil .sim-card { max-width: 760px; margin: 36px auto 0; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 28px; }
.nova-outil .sim-divider { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--nova-accent-strong); margin: 0 0 16px; }
.nova-outil .sim-field { margin-bottom: 16px; }
.nova-outil .sim-label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.nova-outil .sim-input, .nova-outil .sim-select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--nova-border); border-radius: 12px; background: var(--nova-surface-soft); font: inherit; color: var(--nova-text); }
.nova-outil .sim-input:focus, .nova-outil .sim-select:focus { outline: 2px solid var(--nova-accent); outline-offset: 1px; }
.nova-outil .sim-hint { font-size: .78rem; color: var(--nova-muted); margin-top: 5px; }
.nova-outil .sim-error { display: none; margin: 14px 0; padding: 12px 16px; border-radius: 12px; background: #fdeceb; border: 1px solid #f2cfcb; color: #b3453a; font-size: .88rem; font-weight: 600; }
.nova-outil .sim-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--nova-accent-strong); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.nova-outil .results-section-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 26px; margin-top: 24px; }
.nova-outil .results-section-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 18px; }
.nova-outil .result-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.nova-outil .result-card { padding: 16px; background: var(--nova-surface-soft); border: 1px solid var(--nova-border); border-radius: 16px; text-align: center; }
.nova-outil .result-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nova-muted); margin-bottom: 6px; }
.nova-outil .result-value { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.nova-outil .result-winner-badge { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .75rem; font-weight: 800; }
.nova-outil .recommendation-box { padding: 14px 16px; border-radius: 14px; background: var(--nova-accent-soft); border: 1px solid #d6e8d8; font-size: .95rem; }
.nova-outil .recommendation-box:empty { display: none; }
.nova-outil .breakdown-table { width: 100%; border-collapse: collapse; }
.nova-outil .breakdown-table th { text-align: left; padding: 10px 12px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.nova-outil .breakdown-table td { padding: 10px 12px; border-bottom: 1px solid var(--nova-border); color: var(--nova-muted); }
.nova-outil .breakdown-table td:first-child { color: var(--nova-text); }
.nova-outil .breakdown-table .bd-note { font-size: .82rem; color: var(--nova-muted); }

/* Blog / Actualités (blog.html — filtres + injection API back-office intacts) */
.nova-outil .blog-search-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); margin: 10px 0 26px; }
.nova-outil .blog-search-tab { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; padding: 0 14px; border: 1px solid var(--nova-border); border-radius: 999px; background: var(--nova-surface-soft); }
.nova-outil .search-tab-icon { color: var(--nova-muted); }
.nova-outil #blogSearch { flex: 1; min-height: 42px; border: 0; background: transparent; font: inherit; color: var(--nova-text); outline: none; }
.nova-outil .blog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.nova-outil .filter-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.nova-outil .filter-btn.btn-outline { background: var(--nova-surface); border: 1px solid var(--nova-border); color: var(--nova-muted); }
.nova-outil .filter-btn.btn-primary { background: var(--nova-accent-strong); border: 1px solid var(--nova-accent-strong); color: #fff; }
.nova-outil .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nova-outil .blog-card { display: flex; flex-direction: column; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); overflow: hidden; cursor: pointer; }
.nova-outil .blog-image { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e8f4eb, #fff); background-size: cover !important; background-position: center; }
.nova-outil .blog-content { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.nova-outil .blog-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nova-outil .blog-category { padding: 5px 10px; border-radius: 999px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .75rem; font-weight: 800; }
.nova-outil .blog-title { margin: 0; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.015em; }
.nova-outil .blog-date { margin: 0; color: var(--nova-muted); font-size: .8rem; }
.nova-outil .blog-excerpt { margin: 0; color: var(--nova-muted); font-size: .9rem; }
.nova-outil .blog-excerpt:empty { display: none; }
.nova-outil .blog-link { margin-top: auto; padding-top: 8px; color: var(--nova-accent-strong); font-weight: 700; font-size: .9rem; }

/* Simulateur de frais assurance-vie (assurance-vie-gestion-libre.html) */
.nova-outil .sim-panel { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 30px 26px; margin-bottom: 56px; }
.nova-outil .sim-panel__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.nova-outil .sim-panel__sub { font-size: .82rem; color: var(--nova-muted); margin-top: 2px; }
.nova-outil .sim-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 24px 0; }
.nova-outil .sim-range-row { display: flex; align-items: center; gap: 10px; }
.nova-outil .sim-range-row input[type="range"] { flex: 1; accent-color: var(--nova-accent-strong); cursor: pointer; min-width: 0; }
.nova-outil .sim-range-row .sim-range-val { font-weight: 800; min-width: 44px; text-align: right; }
.nova-outil .sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nova-outil .sim-kicker { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.nova-outil .sim-kicker--banque { color: #b3453a; }
.nova-outil .sim-kicker--courtier { color: var(--nova-accent-strong); }
.nova-outil .sim-chart-card { background: var(--nova-surface-soft); border: 1px solid var(--nova-border); border-radius: 20px; padding: 24px 22px 18px; margin: 18px 0 24px; }
.nova-outil .sim-chart-card__kicker { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nova-accent-strong); margin-bottom: 8px; }
.nova-outil .sim-chart-card__title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.nova-outil .sim-chart-card p { margin: 0 0 14px; color: var(--nova-muted); font-size: .92rem; }
.nova-outil .sim-chart-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--nova-accent-soft); border: 1px solid #d6e8d8; color: var(--nova-accent-strong); font-size: .82rem; font-weight: 800; margin-bottom: 16px; }
.nova-outil .sim-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: var(--nova-muted); font-size: .86rem; }
.nova-outil .sim-legend > div { display: flex; align-items: center; gap: 8px; }
.nova-outil .sim-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.nova-outil .sim-legend .dash-banque { background: #b3453a; }
.nova-outil .sim-legend .dash-courtier { background: var(--nova-accent-strong); }
.nova-outil .sim-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.nova-outil .sim-kpi-card { padding: 16px; background: var(--nova-surface-soft); border: 1px solid var(--nova-border); border-radius: 16px; }
.nova-outil .sim-kpi-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nova-muted); margin-bottom: 6px; }
.nova-outil .sim-kpi-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.nova-outil .sim-kpi-sub { font-size: .8rem; color: var(--nova-muted); margin-top: 4px; }
.nova-outil .sim-table th, .nova-outil .sim-table td { padding: 8px 12px; border-bottom: 1px solid var(--nova-border); text-align: left; }
.nova-outil .sim-table th { background: var(--nova-accent-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }

/* Comparateur de taux live (taux-live.html — defi-rates-client.js intact) */
.nova-outil .rates-dashboard { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 22px; margin-top: 30px; }
.nova-outil .rates-header-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--nova-muted); font-size: .85rem; }
.nova-outil .btn-refresh { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface-soft); font: inherit; font-weight: 700; color: var(--nova-text); cursor: pointer; }
.nova-outil .loading-spinner-small { width: 18px; height: 18px; border: 2px solid var(--nova-border); border-top-color: var(--nova-accent-strong); border-radius: 50%; animation: nova-spin 0.8s linear infinite; }
@keyframes nova-spin { to { transform: rotate(360deg); } }
.nova-outil .rates-table-container { overflow-x: auto; border: 1px solid var(--nova-border); border-radius: 18px; }
.nova-outil .rates-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.nova-outil .rates-table th { background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px 14px; text-align: left; position: relative; }
.nova-outil .rates-table td { padding: 12px 14px; border-top: 1px solid var(--nova-border); color: var(--nova-muted); }
.nova-outil .rates-table td:first-child { color: var(--nova-text); font-weight: 600; }
.nova-outil .rates-table .pool-name { font-weight: 700; color: var(--nova-text); }
.nova-outil .rates-table .apy-value { font-weight: 800; }
.nova-outil .rates-table .apy-na { color: var(--nova-muted); font-weight: 600; }
.nova-outil .rates-table .btn-sm { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--nova-accent-strong); color: #fff; font-size: .8rem; font-weight: 700; }
.nova-outil .header-filter { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* L'emoji et son libellé forment un seul mot visuel : sans nowrap, « ÉMETTEUR »
   (colonne étroite) passe à la ligne sous son emoji et désaligne toute la
   rangée d'en-têtes, les autres cellules restant centrées sur une seule ligne. */
.nova-outil .stocks-table th .header-filter { white-space: nowrap; }
/* Font Awesome n'est pas chargé sur le thème nova : le <i class="fas fa-chevron-down">
   des 3 en-têtes filtrables est rendu vide (largeur 0), donc aucun indice visuel
   n'annonce le menu déroulant. On redessine le chevron en CSS, comme .nova-nav__arrow. */
.nova-outil .header-filter .fa-chevron-down { font-style: normal; line-height: 1; }
.nova-outil .header-filter .fa-chevron-down::before { content: "\25BE"; display: inline-block; font-size: .68rem; color: var(--nova-accent-strong); transition: transform .2s ease; }
.nova-outil th:has(.filter-dropdown.active) .fa-chevron-down::before { transform: rotate(180deg); }
.nova-outil .multiselect-options, .nova-outil .filter-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 200px; max-height: 280px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--nova-border); border-radius: 14px; box-shadow: 0 18px 44px rgba(31, 55, 38, .13); text-transform: none; letter-spacing: 0; }
/* Les .filter-dropdown sont fermés par défaut : c'est le JS de la page qui pose
   .active au clic sur le .header-filter (règle héritée de abc-styles.css, perdue
   lors du passage au thème nova). Sans ça les 3 menus du tableau d'actifs
   tokenisés s'affichent ouverts au chargement, par-dessus le tableau. */
.nova-outil .filter-dropdown { display: none; }
.nova-outil .filter-dropdown.active { display: block; }
/* Même défaut pour le multiselect de taux-live.html : les règles de fermeture
   vivaient dans defi-rates-client.css, qui n'est plus chargé depuis la migration
   nova. Le panneau est .multiselect-options (pas le conteneur), et defi-rates-client.js
   pose .active sur le .multiselect-container parent au clic sur le trigger. */
.nova-outil .multiselect-container { position: relative; }
.nova-outil .multiselect-options { display: none; }
.nova-outil .multiselect-container.active .multiselect-options { display: block; }
.nova-outil .multiselect-option, .nova-outil .filter-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--nova-text); font-size: .85rem; font-weight: 600; cursor: pointer; }
.nova-outil .multiselect-option:hover, .nova-outil .filter-option:hover { background: var(--nova-surface-soft); }
.nova-outil .multiselect-option input { accent-color: var(--nova-accent-strong); }
/* Le trigger n'a plus l'aspect « panneau » qu'il tirait par erreur des styles du
   menu : on lui redonne un chevron, seul indice visuel qu'il est cliquable. */
.nova-outil .multiselect-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.nova-outil .multiselect-trigger::after { content: "\25BE"; display: inline-block; font-size: .68rem; color: var(--nova-accent-strong); transition: transform .2s ease; }
.nova-outil .multiselect-container.active .multiselect-trigger::after { transform: rotate(180deg); }

/* Tableau d'actifs tokenisés (investir-en-bourse-on-chain.html — moteur JS intact) */
.nova-outil .rotate-hint { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--nova-warning-soft); border: 1px solid #efe3bd; color: #8a6d1a; font-size: .85rem; font-weight: 600; }
.nova-outil .rotate-hint button { border: 0; background: transparent; font: inherit; font-weight: 800; color: inherit; cursor: pointer; }
@media (max-width: 700px) { .nova-outil .rotate-hint { display: flex; } }
.nova-outil .stocks-table-wrapper { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 18px; margin-top: 26px; overflow-x: auto; }
.nova-outil .stocks-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.nova-outil .stocks-table th { background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px 14px; text-align: left; position: relative; }
.nova-outil .stocks-table td { padding: 12px 14px; border-top: 1px solid var(--nova-border); color: var(--nova-muted); vertical-align: middle; }
.nova-outil .entity-info { display: flex; align-items: center; gap: 10px; }
.nova-outil .entity-logo { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--nova-border); background: #fff; object-fit: contain; }
.nova-outil .entity-name { font-weight: 700; color: var(--nova-text); }
.nova-outil .entity-ticker { font-size: .78rem; color: var(--nova-muted); }
.nova-outil .price-value { font-weight: 800; color: var(--nova-text); white-space: nowrap; }
.nova-outil .change-value { font-weight: 800; white-space: nowrap; }
.nova-outil .change-value.positive { color: var(--nova-accent-strong); }
.nova-outil .change-value.negative { color: #b3453a; }
.nova-outil .stock-category { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--nova-accent-soft); color: var(--nova-accent-strong); }
.nova-outil .stock-platform { font-size: .8rem; font-weight: 700; }
/* Badges émetteurs (Ondo / xStocks) de la colonne ÉMETTEUR. Les anciens styles
   inline dataient du thème sombre : `brightness(0) invert(1)` repeignait le logo
   Ondo en BLANC (invisible sur le fond clair nova) et les drop-shadow colorées
   servaient de halo sur fond noir. Logos officiels servis depuis assets/hub-logos/. */
.nova-outil .issuer-badge { height: 20px; width: 20px; object-fit: contain; transition: transform .2s ease; }
.nova-outil .issuer-badge--square { border-radius: 5px; }
.nova-outil a:hover > .issuer-badge { transform: scale(1.15); }
.nova-outil .multi-chain-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.nova-outil .sparkline-container { display: inline-flex; }
.nova-outil .stock-search-row { display: flex; justify-content: center; margin-bottom: 20px; }
.nova-outil .stock-search-row > div { position: relative; width: 100%; max-width: 350px; }

/* Simulateur de portefeuille (simulateur-portefeuille.html — moteur JS intact) */
.nova-outil .simulator-container { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-top: 30px; }
.nova-outil .market-panel, .nova-outil .portfolio-panel { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 22px; }
.nova-outil .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nova-outil .panel-title { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.nova-outil .badge-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--nova-accent-soft); color: var(--nova-accent-strong); font-size: .75rem; font-weight: 800; }
.nova-outil .badge-live .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--nova-accent-strong); }
.nova-outil .search-bar { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--nova-border); border-radius: 12px; background: var(--nova-surface-soft); font: inherit; color: var(--nova-text); outline: none; }
.nova-outil .market-mobile-helper { font-size: .8rem; color: var(--nova-muted); margin-bottom: 10px; }
.nova-outil .stock-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.nova-outil .stock-item, .nova-outil .stock-list > div[onclick] { border: 1px solid var(--nova-border); border-radius: 14px; }
.nova-outil .stock-info-left { display: flex; align-items: center; gap: 10px; }
.nova-outil .stock-icon { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--nova-border); background: #fff; object-fit: contain; }
.nova-outil .stock-icon-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.nova-outil .stock-names { line-height: 1.25; }
.nova-outil .stock-price, .nova-outil .price-current { font-weight: 800; color: var(--nova-text); }
.nova-outil .btn-trade { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.nova-outil .btn-buy { background: var(--nova-accent-strong); color: #fff; }
.nova-outil .btn-sell { background: #fdeceb; color: #b3453a; border: 1px solid #f2cfcb; }
.nova-outil .btn-reset { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface-soft); font: inherit; font-weight: 700; cursor: pointer; color: var(--nova-text); }
.nova-outil .portfolio-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.nova-outil .trade-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(23, 33, 27, 0.45); }
.nova-outil .trade-modal.active { display: flex; }
.nova-outil .modal-content { position: relative; width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 26px; box-shadow: var(--nova-shadow); }
.nova-outil .close-modal { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; color: var(--nova-muted); }
.nova-outil .trade-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--nova-border); border-radius: 12px; background: var(--nova-surface-soft); font: inherit; color: var(--nova-text); }

/* --------------------------------------------------------------------------
   9quinquies. Légal (body.nova-legal) — structure simple, lisibilité d'abord.
   Le lexique (variante interactive) garde recherche/filtres/fiches dépliables
   pilotés par lexique-script.js (intact), habillées en clair ci-dessous.
   -------------------------------------------------------------------------- */
.nova-legal .legal-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); padding: 24px 26px; margin-bottom: 16px; }
.nova-legal .legal-card h3 { margin: 0 0 12px; font-size: 1.15rem; letter-spacing: -.02em; }
.nova-legal .legal-card p { margin: 0 0 8px; color: var(--nova-muted); }
.nova-legal .legal-card p:last-child { margin-bottom: 0; }
.nova-legal .legal-card a { color: var(--nova-accent-strong); font-weight: 700; }
.nova-legal .legal-card ul { margin: 0 0 8px; padding-left: 20px; color: var(--nova-muted); }
.nova-legal .container--narrow { max-width: 900px; }
/* Lexique interactif */
.nova-legal .lexique-filters { position: sticky; top: calc(var(--nova-header-height) + 10px); z-index: 15; margin: 0 0 26px; }
.nova-legal .lexique-filters-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--nova-border); border-radius: var(--nova-radius); box-shadow: 0 12px 36px rgba(31, 55, 38, .08); }
.nova-legal .lexique-search-tab { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; padding: 0 14px; border: 1px solid var(--nova-border); border-radius: 999px; background: var(--nova-surface-soft); }
.nova-legal #lexiqueSearch { flex: 1; min-height: 42px; border: 0; background: transparent; font: inherit; color: var(--nova-text); outline: none; }
.nova-legal .category-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.nova-legal .category-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface); font: inherit; font-size: .85rem; font-weight: 700; color: var(--nova-muted); cursor: pointer; }
.nova-legal .category-btn.active { background: var(--nova-accent-strong); border-color: var(--nova-accent-strong); color: #fff; }
.nova-legal .lexique-category { margin-top: 34px; }
.nova-legal .lexique-category.hidden { display: none; }
.nova-legal .category-title { margin: 0 0 16px; font-size: 1.35rem; letter-spacing: -.02em; }
.nova-legal .terms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.nova-legal .term-card { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: 18px; padding: 14px 16px; }
.nova-legal .term-card.hidden { display: none; }
.nova-legal .term-card.search-match { border-color: var(--nova-accent); box-shadow: 0 0 0 2px var(--nova-accent-soft); }
.nova-legal .term-card .info-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nova-legal .term-name { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.nova-legal .term-card .btn-premium-action { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface-soft); font: inherit; font-size: .82rem; font-weight: 700; color: var(--nova-text); cursor: pointer; white-space: nowrap; }
.nova-legal .term-card .btn-premium-action.active-btn { background: var(--nova-accent-strong); border-color: var(--nova-accent-strong); color: #fff; }
.nova-legal .term-card .info-bar-reveal { display: none; }
.nova-legal .term-card.active .info-bar-reveal { display: block; padding-top: 10px; }
.nova-legal .term-definition { margin: 0; color: var(--nova-muted); font-size: .92rem; }
.nova-legal .lexique-stats { margin-top: 26px; color: var(--nova-muted); font-size: .88rem; text-align: center; }
.nova-legal #scrollTop { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--nova-border); background: var(--nova-surface); box-shadow: var(--nova-shadow); font-size: 1.1rem; cursor: pointer; display: none; }
.nova-legal #scrollTop.visible { display: block; }

/* Newsletter (newsletter.html — formulaire et script d'inscription intacts) */
/* Composition dédiée à newsletter.html : ces classes ne touchent ni les cartes
   éditoriales ni les formulaires employés ailleurs sur le site. */
.nova-outil .newsletter-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.nova-outil .newsletter-editorial-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nova-border);
  border-radius: 18px;
  background: var(--nova-surface);
  box-shadow: 0 10px 24px rgba(22, 45, 32, .06);
}
.nova-outil .newsletter-editorial-card > img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--nova-border);
}
.nova-outil .newsletter-editorial-card__body {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}
.nova-outil .newsletter-editorial-card .chip-row { margin: 0 0 12px; }
.nova-outil .newsletter-editorial-card h3 { margin: 0 0 10px; font-size: 1.18rem; line-height: 1.2; letter-spacing: -.025em; }
.nova-outil .newsletter-editorial-card p { margin: 0; color: var(--nova-muted); line-height: 1.58; }
.nova-outil .newsletter-editorial-card .nova-btn { margin-top: auto; padding: 10px 15px; font-size: .86rem; }
.nova-outil .newsletter-signup-card {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid color-mix(in srgb, var(--nova-accent) 34%, var(--nova-border));
  border-radius: 22px;
  background: var(--nova-accent-soft);
  box-shadow: 0 12px 28px rgba(22, 45, 32, .06);
}
.nova-outil .newsletter-signup-card .section-title { max-width: 690px; font-size: clamp(1.75rem, 3.5vw, 2.4rem); }
.nova-outil .newsletter-signup-card .section-subtitle { max-width: 760px; }
.nova-outil .newsletter-signup-card .section-subtitle + .section-subtitle { margin-top: 12px; color: var(--nova-muted); font-size: .88rem; line-height: 1.55; }
.nova-outil .newsletter-signup-card .newsletter-form-row { margin-top: 24px; }
.nova-outil .newsletter-signup-card .newsletter-input { border-color: color-mix(in srgb, var(--nova-accent) 42%, var(--nova-border)); }

@media (max-width: 860px) {
  .nova-outil .newsletter-editorial-grid { grid-template-columns: 1fr; gap: 16px; }
  .nova-outil .newsletter-editorial-card > img { height: 210px; }
}
@media (max-width: 560px) {
  .nova-outil .newsletter-editorial-card__body { padding: 18px; }
  .nova-outil .newsletter-editorial-card > img { height: 190px; }
  .nova-outil .newsletter-signup-card { padding: 24px 18px; border-radius: 18px; }
}

.nova-outil .newsletter-form-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.nova-outil .newsletter-input { flex: 1; min-width: 220px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--nova-border); border-radius: 999px; background: var(--nova-surface); font: inherit; color: var(--nova-text); outline: none; }
.nova-outil .newsletter-input:focus { outline: 2px solid var(--nova-accent); outline-offset: 1px; }
.nova-outil .newsletter-form-row .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--nova-accent-strong); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.nova-outil .newsletter-consent-row { margin-bottom: 10px; }
.nova-outil .newsletter-consent-label { display: flex; align-items: flex-start; gap: 10px; color: var(--nova-muted); font-size: .88rem; cursor: pointer; }
.nova-outil .newsletter-consent-check { margin-top: 3px; accent-color: var(--nova-accent-strong); }
.nova-outil .newsletter-consent-link { color: var(--nova-accent-strong); font-weight: 700; }
.nova-outil .newsletter-legal { margin: 0 0 8px; color: var(--nova-muted); font-size: .82rem; }
.nova-outil .newsletter-status { min-height: 22px; font-weight: 600; font-size: .9rem; }

/* --------------------------------------------------------------------------
   10. Cookie consent — habillage clair Nova (markup injecté par cookie-consent.js)
   -------------------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cookie-consent__bar {
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius);
  box-shadow: 0 24px 64px rgba(31, 55, 38, 0.16);
  backdrop-filter: blur(16px);
  padding: 20px 22px;
  color: var(--nova-text);
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.cookie-consent__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--nova-accent-strong);
  opacity: 0.78;
}
.cookie-consent__copy { min-width: 0; padding-left: 6px; }
.cookie-consent__headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.cookie-consent__eyebrow {
  margin: 0 0 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nova-accent-strong);
}
.cookie-consent__title { margin: 0; font-size: 1.14rem; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.cookie-consent__text { margin: 0; color: var(--nova-muted); font-size: 0.82rem; line-height: 1.52; max-width: 100%; flex: 1 1 320px; }
.cookie-consent__link { color: var(--nova-accent-strong); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(63, 143, 91, 0.35); }
.cookie-consent__link:hover { color: var(--nova-text); border-bottom-color: var(--nova-text); }
.cookie-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; }
.cookie-consent__button {
  border: 1px solid var(--nova-border);
  border-radius: 999px;
  padding: 10px 15px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-height: 40px;
  white-space: nowrap;
  background: var(--nova-surface);
  color: var(--nova-text);
}
.cookie-consent__button:hover { transform: translateY(-1px); }
.cookie-consent__button--primary {
  background: var(--nova-accent-strong);
  color: #fff;
  border-color: var(--nova-accent-strong);
  box-shadow: 0 10px 24px rgba(63, 143, 91, 0.2);
}
.cookie-consent__button--secondary { background: var(--nova-surface); color: var(--nova-text); }
.cookie-consent__button--ghost { background: var(--nova-accent-soft); color: var(--nova-accent-strong); border-color: #d6e8d8; }
@media (max-width: 720px) {
  .cookie-consent { left: 12px; right: 12px; bottom: 12px; }
  .cookie-consent__bar { grid-template-columns: 1fr; align-items: start; }
  .cookie-consent__actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   11. Responsive templates
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .comparison-hero__grid, .method-grid,
  .nova-comparatif .profile-grid,
  .nova-comparatif .cta-box { grid-template-columns: 1fr; }
  /* Palier tablette : 4 -> 2 colonnes. Le saut direct 4 -> 1 étirait les cartes
     sur toute la largeur, avec un bandeau logo très large et presque vide.
     Escalier calqué sur .nova-home .partner-grid (3 -> 2 -> 1). */
  .nova-comparatif .partner-grid, .nova-fiche .partner-grid, .nova-hub .partner-grid,
  .nova-outil .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .nova-outil .cards-grid { grid-template-columns: 1fr; }
  .nova-outil .simulator-grid { grid-template-columns: minmax(0, 1fr); }
  .nova-outil .confrontation-grid-inline,
  .nova-outil .result-cards { grid-template-columns: 1fr; }
  .nova-outil .blog-grid { grid-template-columns: 1fr; }
  .nova-legal .terms-grid { grid-template-columns: 1fr; }
  .nova-outil .sim-cols, .nova-outil .simulator-container { grid-template-columns: 1fr; }
  .nova-comparatif .split, .nova-fiche .split, .nova-hub .split,
  .nova-outil .split,
  .nova-comparatif .verdict,
  .nova-comparatif .stat-grid, .nova-hub .stat-grid, .nova-fiche .service-grid,
  .nova-fiche .service-grid--3, .nova-fiche .service-grid--2 { grid-template-columns: 1fr; }
  /* Une seule colonne : on annule l'inversion pour que le texte reste avant
     l'image. Même cible que la règle desktop, sinon les images nues resteraient
     inversées en mobile. .nova-outil ajouté, il manquait ici. */
  .nova-comparatif .split--flip > :nth-child(2),
  .nova-fiche .split--flip > :nth-child(2),
  .nova-hub .split--flip > :nth-child(2),
  .nova-outil .split--flip > :nth-child(2) { order: 0; }
  .nova-comparatif .verdict__figure { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--nova-border); padding-bottom: 24px; }
  .nova-comparatif .verdict__features { flex-direction: column; }
}
@media (max-width: 900px) {
  .toc { display: none; }
  .article-layout, .nova-article .cta-box { grid-template-columns: 1fr; }
  .nova-article .feature-grid, .nova-article .comparison-grid,
  .nova-article .profile-grid, .steps { grid-template-columns: 1fr; }
  .nova-article .mica-obligations-grid { grid-template-columns: minmax(0, 1fr); }
  .stablecoins-mica-article .mica-stat-grid { grid-template-columns: 1fr; }
  .stablecoins-mica-article .mica-section { margin-right: 0; margin-left: 0; padding: 24px; }
  .steps.steps--wide { grid-template-columns: 1fr; }
  .steps.steps--connected { grid-template-columns: 1fr; gap: 14px; }
  .nova-fiche .split .steps.steps--connected { grid-template-columns: 1fr; gap: 14px; margin: 24px 0 36px; }
  .steps.steps--connected:has(.step:nth-child(4)),
  .steps.steps--connected:not(:has(.step:nth-child(3))),
  .nova-fiche .split .steps.steps--connected:has(.step:nth-child(4)),
  .nova-fiche .split .steps.steps--connected:not(:has(.step:nth-child(3))) { grid-template-columns: 1fr; }
  .steps.steps--connected::before { display: none; }
  .steps--connected .step { padding-left: 76px; }
  .steps--connected .step span { position: absolute; top: 22px; left: 20px; margin: 0; }
  .steps--connected .step:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 64px; bottom: -14px; left: 40px; width: 2px; height: auto; background: var(--nova-accent-soft); pointer-events: none; }
}
@media (max-width: 860px) {
  .hero-home__grid, .presentation-grid, .cta-box, .nova-footer__grid { grid-template-columns: 1fr; }
  .nova-home .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .nova-home .feature-grid, .news-grid { grid-template-columns: 1fr; }
  .section-head { display: block; }
  .hero-placeholder { min-height: 340px; }
  .hero-placeholder--presentation { min-height: 320px; }
  .hero-home { padding-top: 48px; }
  .hero-slides, .hero-home__grid { min-height: auto; }
  .hero-carousel { --hero-btn-size: 44px; }
  .hero-nav-btn { top: 250px; font-size: 1.2rem; }
  .presentation-section { padding: 58px 0; }
}
@media (max-width: 640px) {
  .nova-home .partner-grid { grid-template-columns: 1fr; }
  .nova-article .mica-obligations-grid { grid-template-columns: 1fr; }
  /* Dernière marche de l'escalier : 2 -> 1 colonne, au même seuil que .nova-home. */
  .nova-comparatif .partner-grid, .nova-fiche .partner-grid, .nova-hub .partner-grid,
  .nova-outil .partner-grid { grid-template-columns: 1fr; }
  /* Flèches du carrousel hero : réduites et collées aux bords, et le contenu
     des slides est décalé pour ne plus passer dessous (chevauchement à 390px) */
  .hero-carousel { --hero-btn-size: 38px; --hero-btn-gap: 14px; --hero-btn-edge: 6px; }
  .hero-nav-btn { font-size: 1.05rem; }
  .hero-slide .container { padding-inline: 38px; }
}


/* Fiscalite placements: photo-led envelope cards. */
.nova-hub .fiscalite-envelope-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.nova-hub .fiscalite-envelope-grid > .partner-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nova-hub .fiscalite-envelope-grid > .partner-card:nth-child(4) {
  grid-column: 2 / span 2;
}
.nova-hub .fiscalite-envelope-grid > .partner-card:nth-child(5) {
  grid-column: 4 / span 2;
}
.partner-card--enveloppe .partner-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
}
.partner-card--enveloppe .partner-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.partner-card__identity {
  display: grid;
  gap: 9px;
}
.partner-card__identity .chip-row {
  margin: 0;
}
.partner-card__heading h3 {
  margin: 0 0 3px;
  color: var(--nova-text);
  font-size: 1.05rem;
  line-height: 1.2;
}
.partner-card__heading span {
  display: block;
  color: var(--nova-muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
}
.partner-card--enveloppe > p {
  margin: 0;
}
.partner-card--enveloppe .card-actions {
  margin-top: auto;
}

@media (max-width: 980px) {
  .nova-hub .fiscalite-envelope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nova-hub .fiscalite-envelope-grid > .partner-card,
  .nova-hub .fiscalite-envelope-grid > .partner-card:nth-child(4),
  .nova-hub .fiscalite-envelope-grid > .partner-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .nova-hub .fiscalite-envelope-grid {
    grid-template-columns: 1fr;
  }
}


/* Fiscal detail pages: validated envelope photography. */
.nova-article .article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 48px;
  align-items: center;
}
.nova-article .article-hero__content {
  min-width: 0;
}
.nova-article .article-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius);
  box-shadow: var(--nova-shadow);
}
.nova-article .envelope-link-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.nova-article .envelope-link-card .partner-card__media {
  flex: 0 0 auto;
}
.nova-article .envelope-link-card .card-actions {
  margin-top: auto;
}

@media (max-width: 980px) {
  .nova-article .article-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .nova-article .article-hero__image {
    max-width: 760px;
  }
}

/* Cadrage des photos éditoriales intégrées : conserver le format source 16:9. */
.placeholder.section-illustration {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
}
/* Variantes legacy de fiches : mêmes images .placeholder, sans la classe
   .section-illustration. Elles doivent aussi quitter l’étirement de grille
   pour accompagner les colonnes de texte longues. Portée : .nova-fiche uniquement. */
.nova-fiche.legacy-split-illustrations .split .placeholder:not(.section-illustration) {
  align-self: start;
  height: auto;
  min-height: 280px;
  position: sticky;
  top: calc(var(--nova-header-height) + 24px);
}

.nova-comparatif .split .placeholder.section-illustration,
.nova-fiche .split .placeholder.section-illustration,
.nova-hub .split .placeholder.section-illustration,
.nova-outil .split .placeholder.section-illustration {
  align-self: start;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  /* L'illustration accompagne la lecture des blocs longs (étapes numérotées, listes)
     au lieu de laisser un vide vertical sous elle. Mesure sur les 266 blocs .split du
     site : 55 dépassaient 400 px d'écart texte/image, les pires à 842 px (blocs à 3 ou
     4 étapes) ; les 106 blocs où l'image est déjà plus haute que le texte ne bougent
     pas. Le déplacement est borné par la zone de grille du .split : l'image ne peut ni
     déborder sur le footer ni passer sous le widget d’assistance.
     Règle posée ici et non près de `.split > .section-illustration` : `.nova-* .split
     .placeholder` (align-self: stretch) a la même spécificité et arrive plus loin dans
     le fichier, elle écraserait le align-self dont le sticky a besoin. */
  position: sticky;
  top: calc(var(--nova-header-height) + 24px);
}
@media (max-width: 960px) {
  /* Sous 960px les .split passent à une colonne : le texte n'a plus de vide à combler
     et une image collante viendrait masquer le contenu sous le header.
     `relative` et non `static` : .placeholder doit rester le bloc conteneur de sa
     propre photo, car `.placeholder img` est en position:absolute; inset:0. En
     `static` l'image se rattachait au bloc conteneur initial et se dessinait en
     0,0 / 100vw x 100vh, hors de sa carte (mesuré le 13/08/2026 : 229 illustrations
     sur 75 pages). `relative` désactive le sticky aussi bien que `static`.
     `top: auto` est indispensable : le `top: calc(var(--nova-header-height) + 24px)`
     déclaré pour le sticky s'appliquerait sinon comme décalage vers le bas (~96px)
     et ferait chevaucher l'illustration sur le bloc suivant. */
  .nova-comparatif .split .placeholder.section-illustration,
  .nova-fiche .split .placeholder.section-illustration,
  .nova-fiche.legacy-split-illustrations .split .placeholder:not(.section-illustration),
  .nova-hub .split .placeholder.section-illustration,
  .nova-outil .split .placeholder.section-illustration { position: relative; top: auto; }
}
.nova-outil .confrontation-card .placeholder.section-illustration {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   Niveau 1, section « Les Fondations » (.foundations-rail) — fil conducteur
   numéroté + halo derrière les illustrations.

   Contrat de non-régression : la grille des .split ne bouge pas. Aucune règle
   ci-dessous ne redéfinit display, grid-template-columns, gap, order, align-*
   ni width/margin sur .split ou sur ses enfants directs. Deux pièges de la
   tentative précédente sont évités explicitement :

   1) le repère chiffré est ajouté en DERNIER enfant du .split, jamais en
      premier : `.split--flip > :nth-child(2) { order: -1 }` (le zigzag) compte
      TOUS les éléments enfants, y compris ceux hors flux ; un badge en premier
      enfant faisait désigner le bloc de texte au lieu de l'image ;
   2) .foundations-step et les pseudo-éléments sont en position:absolute : un
      enfant absolu d'un conteneur grid n'est pas un élément de grille, il ne
      consomme donc aucune piste et n'impose pas de 3e colonne.

   Le halo doit passer derrière l'illustration, ce qui impose z-index:-1 et
   donc isolation:isolate (aucun effet sur la mise en page) : sans contexte
   d'empilement local, un z-index négatif passerait derrière le fond de
   .section--soft, porté par un ancêtre, et le halo disparaîtrait.
   Se reposer sur le seul ordre de l'arbre ne marche pas : les éléments d'une
   grille sont peints dans l'ordre modifié par `order`, si bien que le
   `order:-1` de .split--flip fait peindre l'image AVANT le ::before, qui la
   recouvrait alors d'un voile sur les blocs 1 et 3. */
.foundations-rail .split { position: relative; isolation: isolate; }

/* Halo : .placeholder est en overflow:hidden avec la photo en inset:0, le halo
   n'est donc visible qu'en débord, comme une aura autour de l'illustration.
   Les bornes suivent la colonne de l'image, qui change de côté avec --flip :
   sans flip l'image occupe la piste de 420px (62,5 % -> 100 % du .split), avec
   flip la piste 1fr (0 -> ~58,6 %). */
.foundations-rail .split::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22px;
  bottom: -22px;
  left: 58%;
  right: -28px;
  border-radius: 44px;
  background: radial-gradient(ellipse at center, var(--nova-accent-soft) 0%, rgba(232, 244, 235, .55) 58%, rgba(232, 244, 235, 0) 100%);
}
.foundations-rail .split--flip::before { left: -28px; right: 42%; }

/* Rail : un segment par bloc, du bas de son propre badge au haut du badge
   suivant. Auto-alignant, contrairement à un rail unique qui exigerait des
   décalages en dur. Le dernier bloc ne prolonge rien. */
.foundations-rail .split::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: -44px;
  left: -31px;
  width: 2px;
  background: linear-gradient(180deg, #cfe4d4, #dcebdf);
}
.foundations-rail .split:last-of-type::after { content: none; }

/* Repère chiffré, dans la gouttière à gauche du conteneur. */
.foundations-step {
  position: absolute;
  top: 6px;
  left: -48px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nova-accent-soft);
  box-shadow: 0 0 0 5px var(--nova-surface-soft), 0 4px 10px rgba(31, 55, 38, .10);
  color: var(--nova-accent-strong);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* Sous 1240px la gouttière (min(1120px, 100% - 40px) centré) descend sous 60px :
   le rail sortirait de l'écran. Les repères se replient alors dans la marge de
   36px au-dessus de chaque bloc, où ils ne recouvrent aucun contenu. */
@media (max-width: 1239px) {
  .foundations-rail .split::after { content: none; }
  .foundations-step { top: -34px; left: 0; width: 30px; height: 30px; font-size: .84rem; box-shadow: 0 0 0 4px var(--nova-surface-soft), 0 3px 8px rgba(31, 55, 38, .10); }
}

/* Colonnes empilées : l'illustration passe sous le texte, le halo la suit.
   Hauteur de l'image = largeur du .container x 9/16 (aspect-ratio de
   .section-illustration), soit (100vw - 40px) x .5625 tant que le conteneur
   est en calc(100% - 40px), c.-à-d. sous 1160px. */
@media (max-width: 960px) {
  /* L'ancrage de la photo dans sa carte est traité par la règle générique
     `position: relative; top: auto` de la media query 960px (§ .section-illustration),
     plus besoin de le rejouer ici. */
  .foundations-rail .split::before,
  .foundations-rail .split--flip::before {
    top: auto;
    left: -16px;
    right: -16px;
    bottom: -20px;
    height: calc((100vw - 40px) * .5625 + 40px);
    border-radius: 36px;
  }
}

/* Catégories des cartes partenaire : le liseré et le tag partagent une couleur
   sémantique, tandis que le cadre logo conserve son fond neutre. */
.partner-card[data-partner-category] {
  --partner-category-color: #b28746;
  position: relative;
  overflow: hidden;
}
.partner-card[data-partner-category]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--partner-category-color);
}
.partner-card[data-partner-category="exchange"] { --partner-category-color: #25875b; }
.partner-card[data-partner-category="french"] { --partner-category-color: #d66e5b; }
.partner-card[data-partner-category="european"] { --partner-category-color: #4078c7; }
.partner-card[data-partner-category="wallet"] { --partner-category-color: #8069c9; }
.partner-card[data-partner-category="defi"] { --partner-category-color: #268f8b; }
.partner-card[data-partner-category] .chip-row .chip:first-child {
  color: var(--partner-category-color);
  border-color: currentColor;
  background: var(--nova-surface);
}
/* Les wordmarks restent optiquement plus petits que les logos-icônes. */
.partner-card__logo[data-brand="revolut"] img {
  width: auto;
  height: 40px;
  max-width: 100%;
  max-height: 40px;
}
/* Mise en évidence des portefeuilles physiques : le cadre de logo reste neutre. */
.partner-card { background: #fff; }
.partner-card[data-partner-type="hardware"] { background: #FAEEDA; border-color: #e6cf9e; }
.partner-card[data-partner-type="hardware"] .chip-row .chip:first-child { background: #FAEEDA; color: #8a5a18; border-color: #cfa65b; }
.partner-card[data-partner-type="hardware"] .partner-card__logo { background: #fff; }
/* Mise en évidence éditoriale, indépendante des catégories. */
.partner-card:has(.partner-card__logo[data-brand="coinhouse"]), .partner-card:has(.partner-card__logo[data-brand="meria"]), .partner-card:has(.partner-card__logo[data-brand="deblock"]) { --partner-category-color: #FAEEDA; background: #FAEEDA; border-color: #e6cf9e; }
.partner-card:has(.partner-card__logo[data-brand="xtb"]) { --partner-category-color: #EEEDFE; background: #EEEDFE; border-color: #d9d7fa; }
.partner-card:has(.partner-card__logo[data-brand="hyperliquid"]) { --partner-category-color: #E1F5EE; background: #E1F5EE; border-color: #c2e5d8; }
.partner-card:has(.partner-card__logo[data-brand="coinhouse"]) .chip-row .chip:first-child, .partner-card:has(.partner-card__logo[data-brand="meria"]) .chip-row .chip:first-child, .partner-card:has(.partner-card__logo[data-brand="deblock"]) .chip-row .chip:first-child { background: #FAEEDA; color: #8a5a18; border-color: #cfa65b; }
.partner-card:has(.partner-card__logo[data-brand="xtb"]) .chip-row .chip:first-child { background: #EEEDFE; color: #5e589c; border-color: #bdb8e4; }
.partner-card:has(.partner-card__logo[data-brand="hyperliquid"]) .chip-row .chip:first-child { background: #E1F5EE; color: #397462; border-color: #9dcebd; }
.partner-card:has(.partner-card__logo[data-brand="coinhouse"]) .partner-card__logo, .partner-card:has(.partner-card__logo[data-brand="meria"]) .partner-card__logo, .partner-card:has(.partner-card__logo[data-brand="deblock"]) .partner-card__logo, .partner-card:has(.partner-card__logo[data-brand="xtb"]) .partner-card__logo, .partner-card:has(.partner-card__logo[data-brand="hyperliquid"]) .partner-card__logo { background: #fff; }
/* Bandeau MiCA de niveau 1 : CTA autonome après les trois fondations. */
.mica-cta-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 36px; padding: 22px 26px; border: 1px solid #cfe0cf; border-radius: 18px; background: #e8f1e6; }
.mica-cta-banner__icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #dbe6d9; border-radius: 14px; background: #fff; color: var(--nova-accent-strong); }
.mica-cta-banner__icon svg { width: 27px; height: 27px; }
.mica-cta-banner__copy h3 { margin: 0 0 4px; font-size: 1.08rem; }
.mica-cta-banner__copy p { margin: 0; color: var(--nova-muted); }
@media (max-width: 720px) { .mica-cta-banner { grid-template-columns: auto minmax(0, 1fr); padding: 20px; } .mica-cta-banner .nova-btn { grid-column: 1 / -1; width: 100%; } }
/* Grilles de cartes : actions alignées en bas, malgré des contenus de longueurs différentes. */
.partner-grid, .feature-grid { align-items: stretch; }
.partner-grid > .partner-card { height: 100%; }
.partner-grid > .partner-card > .card-actions { margin-top: auto; }
.feature-grid > .feature-card { display: flex; flex-direction: column; height: 100%; }
.feature-grid > .feature-card > .card-actions { margin-top: auto; }
/* Comparaisons éditoriales : même ancrage des actions que les cartes de carrousel. */
.comparison-grid { align-items: stretch; }
.comparison-grid > .feature-card { display: flex; flex-direction: column; height: 100%; }
.comparison-grid > .feature-card > .card-actions { margin-top: auto; }
/* Crédit Lombard : liste verticale pleine largeur des protocoles. */
.credit-lombard-article .lombard-protocol-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .credit-lombard-article .lombard-protocol-list { grid-template-columns: minmax(0, 1fr); } }
/* Protocoles : les marques icône sont équilibrées optiquement avec les wordmarks. */
.protocols-partner-grid .partner-card__logo[data-brand="compound"] img, .protocols-partner-grid .partner-card__logo[data-brand="fluid"] img, .protocols-partner-grid .partner-card__logo[data-brand="jupiter"] img, .protocols-partner-grid .partner-card__logo[data-brand="venus"] img { width: auto; height: 52px; max-width: 100%; max-height: 52px; }
/* Morpho Labs : mise en évidence ambre dédiée, distincte du code catégorie. */
.protocols-partner-grid .partner-card:has(.partner-card__logo[data-brand="morpho"]) { --partner-category-color: #FAEEDA; background: #FAEEDA; border-color: #e6cf9e; }
.protocols-partner-grid .partner-card:has(.partner-card__logo[data-brand="morpho"]) .chip-row .chip:first-child { background: #FAEEDA; color: #8a5a18; border-color: #cfa65b; }
.protocols-partner-grid .partner-card:has(.partner-card__logo[data-brand="morpho"]) .partner-card__logo { background: #fff; }
/* Standard final des cartes partenaire, logo et promotion. */
.partner-grid, .feature-grid, .comparison-grid, .profile-grid, .nova-outil .cards-grid { align-items: stretch; }
.partner-grid > .partner-card, .feature-grid > .feature-card, .comparison-grid > .feature-card, .profile-grid > .feature-card { display: flex; flex-direction: column; height: 100%; }
.partner-grid > .partner-card > .card-actions, .feature-grid > .feature-card > .card-actions, .comparison-grid > .feature-card > .card-actions, .profile-grid > .feature-card > .card-actions, .nova-outil .promo-card .card-actions { margin-top: auto; }
.partner-card, .feature-card, .nova-outil .promo-card { background: #fff; }
.partner-card__logo, .partner-card__media--brand-logo, .card-media--brand-logo, .nova-outil .promo-card .card-media--brand-logo { background: #fff !important; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="ledger"]), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="safepal"]), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="trezor"]), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="morpho"]) { --partner-category-color: #FAEEDA; background: #FAEEDA; border-color: #e6cf9e; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="coinhouse"]), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="meria"]), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="deblock"]) { --partner-category-color: #FAEEDA; background: #FAEEDA; border-color: #e6cf9e; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="xtb"]) { --partner-category-color: #EEEDFE; background: #EEEDFE; border-color: #d9d7fa; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="hyperliquid"]) { --partner-category-color: #E1F5EE; background: #E1F5EE; border-color: #c2e5d8; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="ledger"]) :is(.chip:first-child, .status-chip), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="safepal"]) :is(.chip:first-child, .status-chip), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="trezor"]) :is(.chip:first-child, .status-chip), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="morpho"]) :is(.chip:first-child, .status-chip) { background: #FAEEDA; color: #8a5a18; border-color: #cfa65b; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="coinhouse"]) :is(.chip:first-child, .status-chip), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="meria"]) :is(.chip:first-child, .status-chip), :is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="deblock"]) :is(.chip:first-child, .status-chip) { background: #FAEEDA; color: #8a5a18; border-color: #cfa65b; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="xtb"]) :is(.chip:first-child, .status-chip) { background: #EEEDFE; color: #5e589c; border-color: #bdb8e4; }
:is(.partner-card, .feature-card, .nova-outil .promo-card):has(:is(.partner-card__logo, .card-media)[data-brand="hyperliquid"]) :is(.chip:first-child, .status-chip) { background: #E1F5EE; color: #397462; border-color: #9dcebd; }
/* Bonus : les plateformes partagent la teinte ambre des Wallets physiques. */
.nova-outil #platforms .promo-card { background: #FAEEDA; border-color: #e6cf9e; }
.nova-outil #platforms .promo-card .status-chip { background: #FAEEDA; border-color: #cfa65b; color: #76511d; }
/* Le mot-symbole officiel Finary est conçu en orange pâle ; il est renforcé sur le cadre blanc. */
.nova-outil #platforms .promo-card:has(.card-media[data-brand="finary"]) .card-media img { filter: brightness(.55) saturate(1.15); }
/* Bonus : catalogue en liste d’offres, d’après la maquette de référence. */
.nova-outil #bonusCatalog .cards-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.nova-outil #bonusCatalog .promo-card { display: grid; grid-template-columns: 146px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; overflow: visible; padding: 12px 16px; border-radius: 14px; background: #fff; border-color: var(--nova-border); box-shadow: 0 6px 18px rgba(31, 55, 38, .045); }
.nova-outil #bonusCatalog .promo-card__status { grid-column: 2; grid-row: 1; padding: 0 0 8px; }
.nova-outil #bonusCatalog .promo-card .status-chip { background: #f3f4f3; border-color: #dce1dc; color: #68736a; }
.nova-outil #bonusCatalog .promo-card .status-chip.active { background: #e8f4e9; border-color: #c7dfca; color: #397447; }
.nova-outil #bonusCatalog .promo-card .card-media { grid-column: 1; grid-row: 1 / span 2; width: 118px; height: 86px; aspect-ratio: auto; margin: 0; padding: 14px; border: 1px solid var(--nova-border); border-radius: 12px; background: #fff !important; justify-self: start; }
.nova-outil #bonusCatalog .promo-card .card-media img { max-height: 40px; object-fit: contain; }
.nova-outil #bonusCatalog .promo-card .card-body { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) 158px; column-gap: 20px; row-gap: 4px; padding: 0; }
.nova-outil #bonusCatalog .promo-card .entity-meta, .nova-outil #bonusCatalog .promo-card .offer-title, .nova-outil #bonusCatalog .promo-card .offer-copy, .nova-outil #bonusCatalog .promo-card .offer-meta { grid-column: 1; }
.nova-outil #bonusCatalog .promo-card .entity-meta h3 { font-size: 1.05rem; }
.nova-outil #bonusCatalog .promo-card .entity-meta p, .nova-outil #bonusCatalog .promo-card .offer-copy { font-size: .88rem; }
.nova-outil #bonusCatalog .promo-card .card-actions { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: end; width: 158px; margin: 0; flex-direction: column; align-items: stretch; }
.nova-outil #bonusCatalog .promo-card .primary-link, .nova-outil #bonusCatalog .promo-card .secondary-link { min-height: 36px; padding: 0 12px; font-size: .82rem; white-space: nowrap; }
.nova-outil #bonusCatalog .promo-card .secondary-link { border: 0; background: transparent; }
@media (max-width: 700px) { .nova-outil #bonusCatalog .promo-card { grid-template-columns: 1fr; padding: 14px; } .nova-outil #bonusCatalog .promo-card .card-media, .nova-outil #bonusCatalog .promo-card__status, .nova-outil #bonusCatalog .promo-card .card-body { grid-column: 1; grid-row: auto; } .nova-outil #bonusCatalog .promo-card .card-media { width: 100%; height: 92px; justify-self: stretch; } .nova-outil #bonusCatalog .promo-card .card-body { grid-template-columns: 1fr; } .nova-outil #bonusCatalog .promo-card .entity-meta, .nova-outil #bonusCatalog .promo-card .offer-title, .nova-outil #bonusCatalog .promo-card .offer-copy, .nova-outil #bonusCatalog .promo-card .offer-meta, .nova-outil #bonusCatalog .promo-card .card-actions { grid-column: 1; grid-row: auto; } .nova-outil #bonusCatalog .promo-card .card-actions { width: 100%; flex-direction: row; justify-self: stretch; } .nova-outil #bonusCatalog .promo-card .primary-link, .nova-outil #bonusCatalog .promo-card .secondary-link { flex: 1; } }
/* Bonus : le statut reste entièrement contenu dans la ligne d’offre. */
.nova-outil #bonusCatalog .promo-card { overflow: hidden; }
.nova-outil #bonusCatalog .promo-card__status { position: relative; z-index: 0; align-self: center; }
.nova-outil #bonusCatalog .promo-card .status-chip { display: inline-flex; width: fit-content; }
/* Les CTA longs restent lisibles dans leur colonne, sans débordement. */
.nova-outil #bonusCatalog .promo-card .primary-link, .nova-outil #bonusCatalog .promo-card .secondary-link { white-space: normal; text-align: center; }