/* =========================================================================
   SINFONI — Conseil en Investissements Financiers
   Design system : "Ink-on-marble editorial spread"
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Palette de marque — échantillonnée au pixel sur assets/img/sinfoni-logo.png */
  --canvas: #1f1f29; /* surface "carte" graphite — anciennement blanc, cf. refonte sombre */
  --petrol: #00607f;  /* bleu pétrole, bas de la vague du logo */
  --cyan: #00acbb;    /* cyan, haut de la vague du logo — seul accent chromatique */
  --slate: #a2bece;   /* bleu gris, relevé sur sinfoni.net */
  --ink: #3d3935;     /* encre, brand mark uniquement (logo, sélection) */

  --carbon: var(--petrol);
  --graphite: var(--ink);
  --fog: #9b9ba7;     /* texte secondaire clair (anciennement gris foncé --fog) */
  --ash: #34343f;     /* surface neutre sombre (anciennement bleu gris clair) */
  --iris: var(--petrol);

  /* Brand Sinfoni */
  --navy: var(--petrol);
  --champagne: var(--cyan);
  --ivory: #ededf3;   /* texte principal sur fond sombre */

  /* Dérivés */
  --hairline: rgba(237, 237, 243, 0.12);
  --hairline-strong: rgba(237, 237, 243, 0.22);
  --hairline-light: rgba(255, 255, 255, 0.14);
  --wash: #26262f;    /* surface intermédiaire sombre (anciennement bleu gris très clair) */
  --charcoal: #15151b; /* canvas onyx — fond dominant de toutes les pages */
  --charcoal-deep: #0d0d11; /* teinte plus foncée, pour le footer */

  /* Typographie */
  --font-display: "Source Serif 4", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 20px;

  /* Layout */
  --page-max: 1200px;
  --gutter: 24px;
  --radius-card: 2px;
  --radius-pill: 100px;
  --header-h: 74px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

section[id], article[id], div[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--cyan); color: #fff; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--cyan);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHIE ÉDITORIALE
   ------------------------------------------------------------------------- */
.display,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display {
  font-size: clamp(40px, 6.1vw, 76px);
  line-height: 1.03;
}

.h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.07;
}

.h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.2;
}

.h3 {
  font-size: clamp(22px, 2.1vw, 26px);
  line-height: 1.15;
}

.h4 {
  font-size: 20px;
  line-height: 1.25;
}

.serif-accent {
  font-style: italic;
  color: var(--fog);
}

.lede {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--fog);
  max-width: 62ch;
}

.body-sm { font-size: var(--text-body-sm); line-height: 1.65; color: var(--fog); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
}

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(64px, 8vw, 104px);
}

.section--tight { padding-block: clamp(48px, 5vw, 68px); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 48px;
  }
  .section-head--split > div:last-child {
    padding-left: 40px;
    border-left: 1px solid var(--hairline-strong);
  }
  .dark .section-head--split > div:last-child { border-left-color: var(--hairline-light); }
}
.section-head--split .lede { font-size: 15px; line-height: 1.7; }

.section-head--center {
  justify-items: center;
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}
.section-head--center .lede { margin-top: 16px; font-size: 15.5px; line-height: 1.7; }

.section-head__title { margin-top: 18px; }

.rule { height: 1px; background: var(--hairline); border: 0; }

/* -------------------------------------------------------------------------
   5. BOUTONS & LIENS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-card);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--cyan);
  color: #fff;
}
.btn--primary:hover { background: var(--petrol); }
.btn__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--ivory);
}
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--quiet {
  border-color: var(--hairline-strong);
  color: var(--ivory);
}
.btn--quiet:hover { border-color: var(--ivory); }

.btn--light {
  background: #fff;
  color: var(--ink);
}
.btn--light:hover { background: #ececef; }

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: 9px 16px; font-size: var(--text-body-sm); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { border-color: currentColor; color: var(--cyan); }
.link-arrow span { transition: transform var(--dur) var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-row > .btn { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   7. HEADER
   ------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--hairline);
  background: rgba(21, 21, 27, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.header__inner {
  width: 100%;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__left { display: flex; align-items: center; }

/* Logo */
.logo { display: flex; align-items: center; }
.logo__img { height: 33px; width: auto; display: block; }
.logo__img--footer { height: 34px; }
.logo__img--dark { display: none; transform: translateY(-8px); }
.logo__img--light { display: block; transform: translateY(-8px); }

/* Espace client — lien texte simple */
.header__login {
  font-size: 13px;
  font-weight: 500;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}
.header__login:hover { color: var(--cyan); }

/* Navigation */
.nav { display: flex; align-items: center; gap: 22px; }
.nav__item { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}
.nav__trigger:hover,
.nav__item.is-open .nav__trigger { color: var(--cyan); }

.nav__chev {
  transition: transform var(--dur) var(--ease);
  color: var(--fog);
}
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 320px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  box-shadow: 0 1px 0 rgba(61, 57, 53, 0.04);
}
.nav__item.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__panel::before {
  content: "";
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}

.nav__panel--wide { min-width: 380px; }

.nav__link {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  transition: background var(--dur) var(--ease);
}
.nav__link:hover { background: var(--wash); }
.nav__link strong {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 500;
  margin-bottom: 3px;
}
.nav__link span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fog);
}

.nav__group-label {
  padding: 12px 14px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fog);
}
.nav__group-label:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.header__actions { display: flex; align-items: center; gap: 16px; }

/* Burger */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
}
.burger__bars { display: block; width: 16px; }
.burger__bars i {
  display: block;
  height: 1.5px;
  background: var(--ivory);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger__bars i + i { margin-top: 4px; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Menu mobile */
.mobile-nav {
  position: fixed;
  inset: calc(var(--header-h)) 0 0 0;
  z-index: 85;
  background: var(--canvas);
  padding: 8px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }

.macc { border-bottom: 1px solid var(--hairline); }
.macc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
}
.macc__trigger .nav__chev { transition: transform var(--dur) var(--ease); }
.macc.is-open .macc__trigger .nav__chev { transform: rotate(180deg); }
.macc__panel { display: none; padding: 0 2px 14px; }
.macc.is-open .macc__panel { display: block; }
.macc__panel a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  color: var(--fog);
  border-top: 1px solid var(--hairline);
}
.macc__panel a:hover { color: var(--ivory); }

.macc__group-label {
  padding: 14px 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fog);
  border-top: 1px solid var(--hairline);
}
.macc__group-label:first-child { border-top: none; padding-top: 0; }

.mobile-nav__actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.mobile-nav__meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fog);
  display: grid;
  gap: 6px;
}

@media (max-width: 1200px) {
  .nav, .header__actions .btn--ghost { display: none; }
  .burger { display: inline-flex; }
  .header__inner { gap: 12px; }
}

@media (max-width: 560px) {
  .header__login, .header__actions .btn--primary { display: none; }
}

/* -------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------- */
/* Hero plein cadre, photo + calque sombre, header transparent par-dessus
   tant qu'on n'a pas scrollé (voir « HEADER — variante hero » plus bas). */
.hero--photo {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  min-height: clamp(560px, 84vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__parallax { position: absolute; top: -8%; left: 0; right: 0; bottom: -8%; will-change: transform; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  /* Dégradé de secours si la photo venait à manquer. */
  background: linear-gradient(155deg, #161616 0%, var(--charcoal) 55%, #4a4a4a 130%);
  transform-origin: 50% 55%;
  animation: heroAmbient 12s ease-in-out infinite alternate;
}
@keyframes heroAmbient {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2.6%, -3.2%); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 12, 0.62) 0%, rgba(3, 7, 12, 0.3) 42%, rgba(3, 7, 12, 0.72) 100%);
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__inner > * {
  opacity: 0;
  animation: heroReveal 900ms var(--ease) forwards;
}
.hero__inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.32s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.5s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.68s; }
.hero__inner > *:nth-child(5) { animation-delay: 0.86s; }

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--header-h) + clamp(56px, 9vw, 108px)) clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
}

.eyebrow--light { color: rgba(255, 255, 255, 0.82); }

.hero__title--center { margin-top: 22px; color: #fff; }
.hero__title--center .serif-accent { color: rgba(255, 255, 255, 0.72); }
.hero__lede--center {
  margin-top: 22px;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.86);
}
.hero__ctas--center { margin-top: 34px; justify-content: center; }

.hero__proof--center {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.hero__proof--center {
  opacity: 1;
  animation: none;
}
.hero__proof--center li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  animation: heroReveal 700ms var(--ease) forwards;
}
.hero__proof--center li:nth-child(1) { animation-delay: 0.86s; }
.hero__proof--center li:nth-child(2) { animation-delay: 0.98s; }
.hero__proof--center li:nth-child(3) { animation-delay: 1.1s; }
.hero__proof--center li:nth-child(4) { animation-delay: 1.22s; }
.hero__proof--center svg { color: var(--champagne); flex: none; }
.hero__proof--center .counter { margin-right: 3px; font-variant-numeric: tabular-nums; }

/* Aperçu de l'espace client, déplacé hors du hero photo */
.client-preview__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 1000px) {
  .client-preview__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* Liste plus sobre, esprit Mercury (texte mieux agencé face au mockup) */
.client-preview .lede { font-size: var(--text-body-sm); }
.client-preview .card__list {
  margin-top: 26px;
  padding-top: 0;
  border-top: none;
  display: block;
}
.client-preview .card__list li {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--hairline-light);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}
.client-preview .card__list li::before { content: none; }
.client-preview .card__list li:last-child { border-bottom: 1px solid var(--hairline-light); }

/* Mockup */
.mockup { position: relative; }
.mockup__wash {
  position: absolute;
  inset: -22px -18px -30px -22px;
  border-radius: 12px;
  background-color: var(--wash);
  background-image: radial-gradient(var(--ash) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.85;
}

.panel {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 22px;
}

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.panel__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.panel__value {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 500;
  color: var(--fog);
  white-space: nowrap;
}
.tag--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
}
.delta {
  font-size: 13px;
  font-weight: 500;
  color: #4ade80;
}

.spark { margin: 16px 0 6px; }
.spark svg { width: 100%; height: auto; }

.alloc { display: grid; gap: 13px; margin-top: 18px; }
.alloc__row { display: grid; gap: 7px; }
.alloc__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.alloc__top span:last-child { color: var(--fog); font-variant-numeric: tabular-nums; }
.alloc__bar { height: 4px; background: var(--wash); border-radius: 100px; overflow: hidden; }
.alloc__fill { height: 100%; background: var(--ink); border-radius: 100px; }
.alloc__row:nth-child(2) .alloc__fill { background: #3d3d4d; }
.alloc__row:nth-child(3) .alloc__fill { background: var(--iris); }
.alloc__row:nth-child(4) .alloc__fill { background: var(--champagne); }
.alloc__row:nth-child(5) .alloc__fill { background: var(--ash); }

.envelopes {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mockup__card {
  position: relative;
  margin-top: 14px;
  margin-left: auto;
  width: min(100%, 300px);
  background: var(--petrol);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.mockup__card svg { flex: none; color: var(--champagne); }
.mockup__card strong { display: block; font-size: var(--text-body-sm); font-weight: 500; }
.mockup__card span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }

/* -------------------------------------------------------------------------
   8bis. BANDEAU DÉFILANT — ENVELOPPES & SUPPORTS
   ------------------------------------------------------------------------- */
.section-divider { height: clamp(40px, 6vw, 72px); background: transparent; }

.marquee-section {
  padding-block: 28px;
  background: var(--wash);
  border-block: 1px solid var(--hairline);
  display: grid;
  gap: 14px;
}

.marquee-row {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-row--reverse .marquee-track { animation-direction: reverse; }
.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-16.6667%); }
}

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--radius-card);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ivory);
  white-space: nowrap;
  text-decoration: none;
}
.pill svg { flex: none; color: var(--cyan); }
a.pill { transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
a.pill:hover { border-color: var(--hairline-strong); color: var(--cyan); }

.marquee-section--logos { background: var(--canvas); }
.logo-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 30px;
}
.logo-pill img {
  height: 24px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%) invert(1) brightness(1.7);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.logo-pill:hover img { filter: grayscale(0%) invert(0) brightness(1); opacity: 1; }

/* Le pictogramme AXA est un pavé carré : à 24px de haut il paraît minuscule
   à côté des logotypes horizontaux, on l'agrandit un peu. */
.logo-pill--axa img { height: 34px; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; }
  .tilt-card:hover .tilt-card__photo img { transform: none !important; }
}

/* -------------------------------------------------------------------------
   10. CARTES / EXPERTISES
   ------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.4vw, 30px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.65);
}

.card__index {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--champagne);
}
.card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  margin-bottom: 22px;
  color: var(--ivory);
}
.card__title { margin-bottom: 12px; }
.card__text { font-size: var(--text-body-sm); line-height: 1.65; color: var(--fog); }

.card__list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.card__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.card__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: 8px;
}
.card__foot { margin-top: auto; padding-top: 24px; }

/* -------------------------------------------------------------------------
   10bis. CARTES INCLINÉES — SUR-MESURE
   ------------------------------------------------------------------------- */
.tilt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: 56px;
  padding: 12px 0 36px;
}
.tilt-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  border: 1px solid var(--hairline-strong);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tilt-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.26); }
.tilt-card__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tilt-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease); }
@media (min-width: 721px) {
  .tilt-card:hover .tilt-card__photo img { transform: scale(1.06) !important; }
}
.tilt-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 21, 27, 0) 18%, rgba(21, 21, 27, 0.5) 46%, rgba(21, 21, 27, 0.94) 72%, rgba(21, 21, 27, 0.97) 100%);
  pointer-events: none;
}
.tilt-card__body {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 26px 24px 28px;
  color: var(--ivory);
}
.tilt-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.tilt-card__body h3 {
  position: relative;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.tilt-card__body p { position: relative; font-size: 13.5px; line-height: 1.6; color: var(--fog); }

@media (max-width: 720px) {
  .tilt-card { transform: none; }
  .tilt-card:hover { transform: translateY(-4px); }
}

/* -------------------------------------------------------------------------
   10ter. ISR / ESG
   ------------------------------------------------------------------------- */
.isr-panel {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.isr-panel__top {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .isr-panel__top { grid-template-columns: 1.15fr 1fr; }
}
.isr-panel__text {
  background: var(--wash);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.isr-panel__photo { min-height: 260px; position: relative; overflow: hidden; }
.isr-panel__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isr-panel__labels {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  padding: 28px 24px;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
}
.isr-panel__labels img { height: 42px; width: auto; }
.isr-panel__esg-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ivory);
}

/* -------------------------------------------------------------------------
   11. PROCESSUS (BANDE SOMBRE)
   ------------------------------------------------------------------------- */
.dark {
  background: var(--charcoal);
  color: #fff;
}
.dark .lede, .dark .body-sm { color: rgba(255, 255, 255, 0.72); }
.dark .eyebrow { color: rgba(255, 255, 255, 0.55); }
.dark .rule { background: var(--hairline-light); }
.dark .card__list { border-top-color: var(--hairline-light); }
.dark .card__list li::before { background: var(--cyan); }
.dark .article { border-top-color: var(--hairline-light); }
.dark .article__meta { color: rgba(255, 255, 255, 0.55); }
.dark .article__cat { color: var(--champagne); }
.dark .article__text { color: rgba(255, 255, 255, 0.72); }

.processus-frame {
  margin-top: 56px;
  padding: 44px clamp(20px, 4vw, 48px) 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}

.timeline-wrap {
  margin-top: 48px;
}

.timeline__cards {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 64px 0 0;
}

/* Cascade volontairement lente : la ligne se dessine au ralenti, puis
   chaque numéro, puis chaque colonne de texte arrive avec un temps de
   pause marqué entre chacun. La ligne se dessine via sa largeur (0 à
   100 %) plutôt qu'un clip-path, qui s'est révélé peu fiable sur
   certains navigateurs — un dégradé répété en pixels absolus reste
   net quelle que soit la largeur. */
.timeline__line {
  position: absolute;
  z-index: 2;
  top: 23.5px;
  left: 0;
  width: 0;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.4) 0 6px, transparent 6px 12px);
}
.timeline__line.reveal {
  opacity: 1;
  transform: none;
  transition: width 2400ms var(--ease);
  transition-delay: 0ms !important;
}
.timeline__line.reveal.is-in { width: 100%; }

.timeline__num-col {
  position: absolute;
  z-index: 2;
  top: 0;
}
.timeline__num-col:nth-child(2) { left: 0; }
.timeline__num-col:nth-child(3) { left: calc(20% + 4px); }
.timeline__num-col:nth-child(4) { left: calc(40% + 8px); }
.timeline__num-col:nth-child(5) { left: calc(60% + 12px); }
.timeline__num-col:nth-child(6) { left: calc(80% + 16px); }
.timeline__num-col.reveal { transition: opacity 950ms var(--ease), transform 950ms var(--ease); }
.timeline__num-col:nth-child(2) { transition-delay: 250ms !important; }
.timeline__num-col:nth-child(3) { transition-delay: 500ms !important; }
.timeline__num-col:nth-child(4) { transition-delay: 750ms !important; }
.timeline__num-col:nth-child(5) { transition-delay: 1000ms !important; }
.timeline__num-col:nth-child(6) { transition-delay: 1250ms !important; }
.timeline__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--cyan);
}

.timeline__card {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}
.timeline__card.reveal { transition: opacity 950ms var(--ease), transform 950ms var(--ease); }
.timeline__card:nth-child(7) { transition-delay: 1500ms !important; }
.timeline__card:nth-child(8) { transition-delay: 1750ms !important; }
.timeline__card:nth-child(9) { transition-delay: 2000ms !important; }
.timeline__card:nth-child(10) { transition-delay: 2250ms !important; }
.timeline__card:nth-child(11) { transition-delay: 2500ms !important; }
.timeline__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.timeline__text {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.timeline__tools {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-light);
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 880px) {
  .timeline__line, .timeline__num-col { display: none; }
  .timeline__cards { flex-direction: column; gap: 0; padding: 8px 0; counter-reset: step; }
  .timeline__cards::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 44px;
    bottom: 44px;
    left: 15px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0 6px, transparent 6px 12px);
  }
  .timeline__card {
    position: relative;
    padding: 20px 20px 20px 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    counter-increment: step;
  }
  .timeline__card:last-child { border-bottom: none; }
  .timeline__card::before {
    content: counter(step);
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--charcoal);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--cyan);
  }
}

.dark-foot {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* -------------------------------------------------------------------------
   12. SIMULATEUR
   ------------------------------------------------------------------------- */

.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 980px) {
  .sim { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}

.sim__controls {
  padding: clamp(24px, 2.6vw, 32px);
  border-bottom: 1px solid var(--hairline);
  background: var(--wash);
}
@media (min-width: 980px) {
  .sim__controls { border-bottom: 0; border-right: 1px solid var(--hairline); }
}

.field { margin-bottom: 26px; }
.field:last-child { margin-bottom: 0; }

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.field__label { font-size: 13.5px; font-weight: 500; }
.field__out {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 100px;
  background: linear-gradient(to right, var(--cyan) var(--pct, 0%), rgba(255, 255, 255, 0.16) var(--pct, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--cyan);
  transition: transform var(--dur) var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 100px; background: rgba(255, 255, 255, 0.16);
}
input[type="range"]::-moz-range-progress {
  height: 3px; border-radius: 100px; background: var(--cyan);
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--cyan);
}
.field__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--fog);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.segmented button {
  padding: 9px 6px;
  border-radius: var(--radius-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--fog);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button:hover { color: var(--ivory); }
.segmented button[aria-pressed="true"] { background: var(--cyan); color: #fff; }

.profile-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fog);
  min-height: 39px;
}

.sim__result {
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--wash);
  display: flex;
  flex-direction: column;
}

.result__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.result__block { min-width: 140px; }
.result__block dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  display: flex;
  align-items: center;
  gap: 7px;
}
.result__block dt i {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.result__block dd {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.result__block--accent dd { color: var(--cyan); }
.result__hint { font-size: 12px; color: var(--fog); margin-top: 6px; }

.chart { margin-top: 24px; flex: 1; }
.chart svg { width: 100%; height: auto; }
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--fog);
}
.chart__legend li { display: flex; align-items: center; gap: 8px; }
.chart__legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }

.sim__foot {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.disclaimer {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fog);
  width: 100%;
}

/* -------------------------------------------------------------------------
   13. PARTENAIRES
   ------------------------------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 620px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .partners { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.partner {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 26px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9a9aa2;
  transition: color var(--dur) var(--ease);
}
.partner:hover { color: var(--ivory); }

/* -------------------------------------------------------------------------
   14. ARTICLES
   ------------------------------------------------------------------------- */
.article {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline-light);
  padding-top: 20px;
  transition: opacity var(--dur) var(--ease);
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.article__cat { color: var(--cyan); }
.article__thumb {
  display: block;
  position: relative;
  margin: 20px 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.article__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.82);
}
.article__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 21, 27, 0) 45%, rgba(21, 21, 27, 0.55) 100%);
  pointer-events: none;
}
.article__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  transition: color var(--dur) var(--ease);
}
.article:hover .article__title { color: var(--cyan); }
.article__text { margin-top: 12px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--fog); }
.article__foot { margin-top: auto; padding-top: 20px; }

/* -------------------------------------------------------------------------
   15. TÉMOIGNAGES
   ------------------------------------------------------------------------- */
.quote {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.4vw, 30px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quote:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-4px); }
.quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.quote__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.quote__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wash);
  border: 1px solid var(--hairline-light);
  color: var(--fog);
}
.quote__title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ivory);
}
.quote__text {
  position: relative;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.quote__foot {
  position: relative;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-light);
  margin-top: 22px;
}
.quote__who { font-size: 13.5px; font-weight: 500; color: var(--ivory); }
.quote__meta { font-size: 12.5px; color: var(--fog); margin-top: 3px; }

/* Carrousel de témoignages */
.quotes-carousel { position: relative; margin: 0 calc(var(--gutter) * -1); }
.quotes-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 4px var(--gutter) 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.quotes-track::-webkit-scrollbar { display: none; }
.quotes-track .quote {
  flex: 0 0 auto;
  width: min(360px, 82vw);
  scroll-snap-align: start;
}
.quotes-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(21, 21, 27, 0.9);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.quotes-nav:hover { border-color: var(--cyan); color: var(--cyan); }
.quotes-nav:disabled { opacity: 0.3; pointer-events: none; }
.quotes-nav--prev { left: 6px; }
.quotes-nav--next { right: 6px; }

@media (max-width: 760px) {
  .quotes-nav { display: none; }
}

/* -------------------------------------------------------------------------
   15bis. ÉQUIPE
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.team-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.team-card:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-4px); }
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.team-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: transform 700ms var(--ease), filter var(--dur) var(--ease);
}
@media (min-width: 721px) {
  .team-card:hover .team-card__photo img { transform: scale(1.06) !important; filter: grayscale(0); }
}
.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 33, 0) 60%, rgba(26, 26, 33, 0.85) 100%);
  pointer-events: none;
}
.team-card__body {
  position: relative;
  padding: 18px 20px;
}
.team-card__body h2 {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--ivory);
}
.team-card__body p { margin-top: 3px; font-size: 13px; color: var(--fog); }
.team-card__linkedin {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 999px;
  background: rgba(21, 21, 27, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--ivory);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.team-card:hover .team-card__linkedin,
.team-card__linkedin:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.team-card__linkedin:hover { border-color: var(--cyan); background: var(--cyan); color: #fff; }
@media (max-width: 720px) {
  .team-card__linkedin { opacity: 1; transform: none; background: rgba(21, 21, 27, 0.8); }
}

/* -------------------------------------------------------------------------
   16. BANDE NEWSLETTER
   ------------------------------------------------------------------------- */
#contact.dark { padding-block: clamp(36px, 4vw, 52px); }
.news-band {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.news-band__title { margin-top: 10px; font-size: clamp(22px, 2.4vw, 28px); }
.news-band__lede { max-width: 42ch; margin: 10px auto 0; font-size: 13.5px; }
.news-band__form {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 400px;
  margin: 20px auto 0;
  padding: 4px 4px 4px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}
.news-band__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
}
.news-band__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.news-band__input:focus { outline: none; }
.news-band__submit { flex-shrink: 0; white-space: nowrap; padding: 9px 16px; font-size: 13px; }
.news-band__note { margin-top: 10px; color: rgba(255, 255, 255, 0.5); min-height: 1em; }
@media (max-width: 560px) {
  .news-band__form { flex-direction: column; align-items: stretch; padding: 14px; gap: 10px; }
  .news-band__input { padding: 8px 6px; }
}

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.footer {
  background: var(--charcoal-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(52px, 6vw, 80px) 32px;
}
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: #fff; }

.footer__top {
  display: grid;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hairline-light);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: 60px; }
}

.footer__tagline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 28ch;
}
.footer__contact { margin-top: 24px; display: grid; gap: 9px; font-size: var(--text-body-sm); }
.footer__contact li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.footer__contact svg { margin-top: 3px; color: var(--champagne); }

.footer__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.footer__col h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: var(--text-body-sm); }

.compliance {
  padding-block: 32px;
  border-bottom: 1px solid var(--hairline-light);
  display: grid;
  gap: 22px;
}
@media (min-width: 820px) {
  .compliance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 48px; }
}
.compliance h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.compliance p { font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.58); }
.compliance p + p { margin-top: 8px; }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.badge {
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.footer__bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* -------------------------------------------------------------------------
   18. MODALES
   ------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(61, 57, 53, 0.55); }

.modal__box {
  position: relative;
  width: min(100%, 620px);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  background: var(--canvas);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 36px);
  transform: translateY(12px) scale(0.99);
  transition: transform var(--dur) var(--ease);
}
.modal.is-open .modal__box { transform: none; }

.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--fog);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { border-color: var(--ivory); color: var(--ivory); }

.modal__title { margin: 14px 0 10px; }

/* Pop-up actualité financière */
.modal__box--popup { overflow: hidden; }
.modal__box--popup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--petrol));
}
.popup-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--petrol));
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 96, 127, 0.55);
}

.form-grid { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fog);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--canvas);
  font-size: var(--text-body-sm);
  transition: border-color var(--dur) var(--ease);
}
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 172, 187, 0.18); }
textarea.input { resize: vertical; min-height: 84px; }

.form-note { font-size: 11.5px; line-height: 1.6; color: var(--fog); }

.success {
  text-align: center;
  padding: 26px 0 10px;
}
.success__icon {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--petrol);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success__recap {
  margin: 20px auto 0;
  max-width: 340px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px;
  font-size: 13.5px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.success__recap div { display: flex; justify-content: space-between; gap: 16px; }
.success__recap span:first-child { color: var(--fog); }

/* -------------------------------------------------------------------------
   19. TOAST
   ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 130;
  background: var(--petrol);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* -------------------------------------------------------------------------
   19bis. CTA FLOTTANT — persistant au défilement
   ------------------------------------------------------------------------- */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
}
.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.floating-cta__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-card);
  background: rgba(21, 21, 27, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.floating-cta .btn { white-space: nowrap; }

@media (max-width: 640px) {
  /* bottom relevé : sur mobile, le launcher du chatbot (widget externe,
     sinfoni-assistant-chatbot.vercel.app) est lui aussi ancré en bas à
     droite et chevauchait le bouton droit de cette barre à bottom: 26px. */
  .floating-cta { left: 16px; right: 16px; bottom: 92px; transform: translateY(20px); }
  .floating-cta.is-visible { transform: translateY(0); }
  .floating-cta__inner { width: 100%; }
  .floating-cta .btn { flex: 1; justify-content: center; }
}

/* -------------------------------------------------------------------------
   21. PAGE LÉGALE
   ------------------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.legal h3 { font-size: 15px; font-weight: 600; margin-top: 26px; }
.legal p, .legal li { font-size: 14.5px; line-height: 1.75; color: var(--fog); }
.legal p { margin-top: 14px; }
.legal strong { color: var(--ivory); font-weight: 500; }
.legal ul { margin-top: 14px; display: grid; gap: 8px; }
.legal ul li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.legal ul li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--champagne);
  margin-top: 10px;
}
.legal a { color: var(--ivory); border-bottom: 1px solid var(--hairline-strong); }
.legal a:hover { color: var(--cyan); border-color: var(--cyan); }

/* -------------------------------------------------------------------------
   22. RÉVÉLATION AU SCROLL
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   NOUVELLE ARBORESCENCE (Accompagnement / Solutions / Sinfoni / Ressources)
   Additif uniquement — n'affecte pas l'accueil, qui garde son ancien menu.
   ========================================================================= */

/* Desktop : titre de menu cliquable (lien) + bouton icône séparé pour le
   déroulant. Le sélecteur :has() ne cible que les .nav__item qui contiennent
   le nouveau lien ; les .nav__item de l'accueil (bouton unique) sont ignorés. */
.nav__item:has(.nav__trigger-link) { display: flex; align-items: center; }

.nav__trigger-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 2px 9px 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ivory);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__trigger-link:hover,
.nav__item.is-open .nav__trigger-link { color: var(--cyan); }

.nav__trigger--icon { padding-left: 4px; }

/* Mobile : même logique pour les accordéons du menu burger. */
.macc__head { display: flex; align-items: center; gap: 10px; }
.macc__trigger-link {
  flex: 1;
  padding: 18px 2px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ivory);
  text-decoration: none;
}
.macc__trigger--icon { width: auto; justify-content: center; }

/* Cartes de navigation des pages d'atterrissage (Accompagnement, Solutions…) */
.menu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.menu-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.2vw, 28px);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu-card:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-4px); }
.menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.menu-card h2 {
  position: relative;
  font-size: 17px;
  font-weight: 500;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}
.menu-card:hover h3 { color: var(--cyan); }
.menu-card p { position: relative; font-size: 13.5px; line-height: 1.6; color: var(--fog); margin: 0; }
.menu-card__arrow {
  position: relative;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cyan);
}

/* Fonds en euros / unités de compte : deux cartes indépendantes, dans le
   même langage visuel que les cartes de témoignages (.quote), pour rester
   cohérent avec le reste du site plutôt que d'inventer un nouveau motif. */
.envelope-split {
  display: flex;
  gap: 20px;
}
.envelope-split__half {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.4vw, 30px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.envelope-split__half:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-4px); }
.envelope-split__half::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.envelope-split__icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wash);
  border: 1px solid var(--hairline-light);
  color: var(--fog);
}
.envelope-split__half--growth .envelope-split__icon { color: var(--cyan); border-color: rgba(0, 172, 187, 0.35); }
.envelope-split__tag {
  position: relative;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.envelope-split__half--growth .envelope-split__tag { color: var(--cyan); }
.envelope-split__title {
  position: relative;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.envelope-split__text {
  position: relative;
  margin-top: 14px;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 720px) {
  .envelope-split { flex-direction: column; }
}

/* Liste de supports (page "Les supports d'investissement") : rangées
   pleine largeur plutôt qu'une grille de cartes, pour éviter tout effet
   de carte orpheline quel que soit le nombre d'éléments. */
.support-list { margin-top: 8px; border-top: 1px solid var(--hairline); }
.support-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 26px 16px;
  margin-inline: -16px;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: background var(--dur) var(--ease);
}
.support-row:hover { background: rgba(255, 255, 255, 0.03); }
.support-row__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 172, 187, 0.1);
  border-radius: var(--radius-card);
  color: var(--cyan);
  flex: none;
  transition: background var(--dur) var(--ease);
}
.support-row:hover .support-row__icon { background: rgba(0, 172, 187, 0.2); }
.support-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.support-row__title { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ivory); }
.support-row__tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
}
.support-row__text { font-size: var(--text-body-sm); line-height: 1.65; color: var(--fog); max-width: 62ch; }
.support-row__link { align-self: center; white-space: nowrap; }
.support-row:hover .support-row__link { color: var(--cyan); }
@media (max-width: 640px) {
  .support-row { grid-template-columns: 44px minmax(0, 1fr); }
  .support-row__link { grid-column: 1 / -1; margin-top: 14px; }
}

/* -------------------------------------------------------------------------
   17b. PHOTO D'EN-TÊTE D'ARTICLE
   ------------------------------------------------------------------------- */
.article-cover-photo {
  margin: 28px 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
.article-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Désature/assombrit légèrement les photos de banque d'images pour
     qu'elles s'intègrent au thème sombre plutôt que de trancher avec leurs
     couleurs vives d'origine. */
  filter: saturate(0.78) brightness(0.86) contrast(1.03);
}
.article-cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 17, 0) 60%, rgba(13, 13, 17, 0.5) 100%);
  pointer-events: none;
}

/* Espacement entre les blocs du corps d'un article généré via le CMS
   (titres h3/h4 et paragraphes body-sm consécutifs). */
.article-block-content > .body-sm,
.article-block-content > .h3,
.article-block-content > .h4 {
  margin-top: 14px;
}
.article-block-content > :first-child {
  margin-top: 0;
}
.article-block-content > .h3 {
  margin-top: 28px;
}

/* Capture d'écran du tableau Excel (« chiffres de la semaine »), en fin
   d'article généré via le CMS — pas de ratio forcé, pour ne pas rogner
   le tableau comme pour une photo. */
.article-table-capture {
  margin-top: 32px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.article-table-capture img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------
   18. SOMMAIRE ARTICLE — mise en page à deux colonnes (pages longues)
   ------------------------------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
@media (min-width: 980px) {
  .article-layout {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}

.article-toc__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 16px;
}
.article-toc__list {
  display: grid;
  gap: 1px;
  border-left: 1px solid var(--hairline);
}
.article-toc__list a {
  display: block;
  padding: 9px 0 9px 18px;
  margin-left: -1px;
  font-size: 13.5px;
  color: var(--fog);
  border-left: 1.5px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.article-toc__list a:hover { color: var(--ivory); }
.article-toc__list a.is-active { color: var(--ivory); border-left-color: var(--champagne); }
.article-toc__list ul.article-toc__sublist { display: grid; gap: 1px; }
.article-toc__list ul.article-toc__sublist a { font-size: 12.5px; padding-left: 30px; }

@media (min-width: 980px) {
  .article-toc { position: sticky; top: calc(var(--header-h) + 32px); }
}

.article-body {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--wash);
  overflow: hidden;
}

.article-block {
  padding: clamp(28px, 3.4vw, 44px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.block-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------------
   19. CARTES CONTRAT — exemples d'assureurs partenaires
   ------------------------------------------------------------------------- */
.contract-card {
  background: linear-gradient(165deg, var(--canvas) 0%, var(--wash) 120%);
  position: relative;
  overflow: hidden;
}
.contract-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, transparent 75%);
  opacity: 0.8;
}
.contract-card__badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.contract-card__name {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 21px);
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0 0 20px;
}
/* Logo dans un encart de hauteur fixe : les logos (Allianz très large, AXA
   presque carré...) ont des proportions très différentes d'un assureur à
   l'autre. Sans cet encart, chacun occupe toute la hauteur disponible et ils
   paraissent de tailles totalement incohérentes les uns par rapport aux
   autres sur une même rangée. */
.contract-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  max-width: 100%;
  padding: 0 18px;
  margin: 14px 0 22px;
  background: rgba(237, 237, 243, 0.05);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.contract-card__logo img { max-height: 26px; max-width: 160px; width: auto; height: auto; display: block; }

.contract-card__list li::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 0;
  background: var(--cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-top: 2px;
}

.contract-card__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.contract-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ivory);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.contract-card__cta:hover { border-color: var(--cyan); background: rgba(237, 237, 243, 0.04); }
.contract-card__cta svg { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.contract-card__cta:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   20. TABLEAU RÉCAPITULATIF
   ------------------------------------------------------------------------- */
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.spec-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  padding: 16px 22px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
}
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  border-bottom: 1px solid var(--hairline);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }
.spec-table th {
  width: 34%;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ivory);
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
}
.spec-table td { color: var(--fog); background: var(--wash); }
.spec-table td ul { display: grid; gap: 9px; }
.spec-table td li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
}
.spec-table td li::before {
  content: "+";
  color: var(--champagne);
  font-weight: 700;
  line-height: 1.6;
}

/* Titres internes aux blocs d'article : même échelle que les titres de
   carte sur la home (tilt-card, article, quote), plus petite que .h2/.h3. */
.article-block h2 {
  font-size: 21px;
  line-height: 1.25;
}
.article-block .card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.contract-card__name { font-size: 20px; }

/* Texte courant des blocs d'article : une taille en dessous des
   .lede/.body-sm par défaut, pour un rendu plus compact. */
.article-block .lede {
  font-size: 15px;
  line-height: 1.6;
}
.article-block .body-sm { font-size: 13px; }
.article-block .card__list li { font-size: 13px; }
.article-block .form-note { font-size: 11px; }

/* -------------------------------------------------------------------------
   21. TUNNEL "QUEL EST VOTRE PROJET ?"
   ------------------------------------------------------------------------- */
.wizard-head { margin-bottom: 24px; }
.wizard-head__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wizard-head__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
}
.wizard-head__count { font-size: 12px; color: var(--fog); }
.wizard-progress {
  margin-top: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--hairline-strong);
  overflow: hidden;
}
.wizard-progress__bar {
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
  transition: width var(--dur) var(--ease);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.choice-grid--stack { grid-template-columns: 1fr; }
.choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  line-height: 1.35;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice-card:hover { border-color: var(--hairline-strong); background: var(--wash); }
.choice-card[aria-pressed="true"] {
  border-color: var(--cyan);
  background: rgba(0, 172, 187, 0.1);
  color: var(--cyan);
}
.choice-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: inherit;
}
.choice-card__body { display: grid; gap: 3px; }
.choice-card__desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--fog);
}
.choice-card[aria-pressed="true"] .choice-card__desc { color: var(--cyan); opacity: 0.85; }

.wizard-other {
  margin-top: 12px;
}

.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.wizard-back {
  font-size: 13px;
  color: var(--fog);
  padding: 10px 4px;
}
.wizard-back:hover { color: var(--ivory); }

.wizard-ask {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.wizard-ask__thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 2px;
}
.wizard-ask__msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wizard-ask__msg strong { font-weight: 600; }
.wizard-ask__msg a { color: var(--cyan); border-bottom: 1px solid rgba(0, 172, 187, 0.4); }
.wizard-ask__msg--user {
  align-self: flex-end;
  background: rgba(0, 172, 187, 0.14);
  color: var(--ivory);
  border-bottom-right-radius: 4px;
}
.wizard-ask__msg--bot {
  align-self: flex-start;
  background: var(--wash);
  color: var(--ivory);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
}
.wizard-ask__msg--error {
  align-self: flex-start;
  background: rgba(179, 38, 30, 0.12);
  color: #e39a94;
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-bottom-left-radius: 4px;
}
.wizard-ask__msg--loading { display: flex; gap: 4px; align-items: center; padding: 11px 14px; }
.wizard-ask__msg--loading span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fog);
  animation: wizard-ask-bounce 1.2s infinite ease-in-out;
}
.wizard-ask__msg--loading span:nth-child(2) { animation-delay: 0.15s; }
.wizard-ask__msg--loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wizard-ask-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.wizard-ask__row { display: flex; align-items: center; gap: 8px; }
.wizard-ask__input { flex: 1; }
.wizard-ask__send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #fff;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wizard-ask__send:hover { background: var(--petrol); }
.wizard-ask__send:disabled { opacity: 0.4; cursor: not-allowed; }
.wizard-ask__note { margin-top: 8px; font-size: 10.5px; color: var(--fog); text-align: center; }

/* -------------------------------------------------------------------------
   22. TABLEAU DE DONNÉES (comparatifs chiffrés, type scénarios A/B)
   ------------------------------------------------------------------------- */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: 16px 22px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
}
.data-table th,
.data-table td {
  padding: 13px 16px;
  font-size: 13.5px;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.data-table thead th {
  background: var(--canvas);
  color: var(--fog);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.data-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--ivory);
  background: var(--canvas);
  white-space: nowrap;
}
.data-table tbody td { color: var(--fog); background: var(--wash); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.group-row th {
  background: var(--wash);
  color: var(--cyan);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

/* -------------------------------------------------------------------------
   23. FAQ — accordéon
   ------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq-item:has(.faq-item__q[aria-expanded="true"]) { border-color: var(--hairline-strong); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}
.faq-item__q:hover { color: var(--cyan); }
.faq-item__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--fog);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(135deg); color: var(--cyan); }
.faq-item__a {
  padding: 0 20px 20px;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fog);
}

/* -------------------------------------------------------------------------
   24. SINFONEWS — onglets de filtre et cartes d'articles
   ------------------------------------------------------------------------- */
.sinfonews-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  border-bottom: 1px solid var(--hairline);
}
.sinfonews-filter {
  position: relative;
  background: none;
  border: none;
  padding: 10px 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--fog);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.sinfonews-filter:hover { color: var(--ivory); }
.sinfonews-filter.is-active { color: var(--cyan); }
.sinfonews-filter.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--cyan);
}

.sinfonews-card { text-decoration: none; }
.sinfonews-card .article__meta { margin-bottom: 4px; }
.sinfonews-card .card__title { margin-top: 14px; }

/* Grille d'articles à couverture photo (titre en surimpression) */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 28px;
}
@media (max-width: 720px) {
  .articles-grid { grid-template-columns: minmax(0, 1fr); }
}

.article-cover { display: block; text-decoration: none; }
.article-cover .article__meta { margin-bottom: 14px; }
.article-cover__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.article-cover__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.82);
  transition: transform var(--dur) var(--ease);
}
.article-cover:hover .article-cover__thumb img { transform: scale(1.03); }
.article-cover__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 21, 27, 0) 40%, rgba(21, 21, 27, 0.78) 100%);
  pointer-events: none;
}
.article-cover__title {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ivory);
  z-index: 1;
}

/* -------------------------------------------------------------------------
   25. FICHE FONDS (exemples de fonds réels, type fiche professionnelle)
   ------------------------------------------------------------------------- */
.fund-fiche {
  margin-top: 28px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--wash);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.fund-fiche + .fund-fiche { margin-top: 20px; }

.fund-fiche__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.fund-fiche__category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.fund-fiche__name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ivory);
}
.fund-fiche__isin {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fog);
}

.fund-fiche__risk { text-align: right; flex: none; }
.fund-fiche__risk-label {
  font-size: 11px;
  color: var(--fog);
  margin-bottom: 6px;
}
.fund-fiche__risk-scale {
  display: flex;
  gap: 3px;
}
.fund-fiche__risk-scale span {
  width: 13px;
  height: 20px;
  border-radius: 2px;
  background: var(--hairline-strong);
}
.fund-fiche__risk-scale span.is-filled { background: var(--cyan); }
.fund-fiche__risk-value {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ivory);
}

.fund-fiche__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.fund-fiche__stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ivory);
}
.fund-fiche__stat-value.is-negative { color: #e3857a; }
.fund-fiche__stat-label {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fog);
}

.fund-fiche__fees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.fund-fiche__fees div { display: flex; justify-content: space-between; gap: 10px; }
.fund-fiche__fees span { font-size: 13px; color: var(--fog); }
.fund-fiche__fees strong { font-size: 13px; color: var(--ivory); font-weight: 600; }

.fund-fiche__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.fund-fiche__foot p { font-size: 11.5px; color: var(--fog); }
.fund-fiche__foot a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
}
.fund-fiche__foot a:hover { color: var(--ivory); }

/* ========================================================================
   26. DONUT D'ALLOCATION
   ======================================================================== */
.allocation-donuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  margin-top: 8px;
}
.allocation-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}
.allocation-donut__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 18px;
}
.allocation-donut__chart {
  position: relative;
  width: 152px;
  height: 152px;
}
.allocation-donut__chart svg { display: block; width: 100%; height: 100%; }
.allocation-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.allocation-donut__num {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  color: var(--ivory);
  line-height: 1;
}
.allocation-donut__label {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fog);
  max-width: 88px;
  line-height: 1.3;
}
.allocation-donut__legend {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.allocation-donut__legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fog);
}
.allocation-donut__legend span i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.allocation-donut__legend span b {
  margin-left: auto;
  font-weight: 600;
  color: var(--ivory);
}

/* ========================================================================
   26bis. PROFILS DE PERFORMANCE — page /sinfoni/nos-performances
   ======================================================================== */
.perf-card { align-items: center; text-align: center; }
.perf-card__ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
}
.perf-card__num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--ivory);
  line-height: 1;
}
.perf-card__num-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fog);
  margin-top: 6px;
  max-width: 90px;
  text-align: center;
}
.perf-card__name {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ivory);
  margin-top: 24px;
}
.perf-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fog);
  margin-top: 10px;
}
.perf-card__cta {
  margin-top: 24px;
  width: 100%;
}

/* ========================================================================
   27. ARTICLE HERO — PHOTO PLEIN FORMAT
   ======================================================================== */
.article-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(72px, 11vw, 140px) clamp(56px, 8vw, 96px);
  min-height: clamp(420px, 52vh, 620px);
  display: flex;
  align-items: flex-end;
}
.article-hero__media { position: absolute; inset: 0; z-index: 0; }
.article-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.article-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 14, 0.88) 0%, rgba(10, 10, 14, 0.66) 40%, rgba(10, 10, 14, 0.32) 68%, rgba(10, 10, 14, 0.15) 100%),
              linear-gradient(0deg, rgba(10, 10, 14, 0.55) 0%, rgba(10, 10, 14, 0) 45%);
}
.article-hero .container { position: relative; z-index: 1; }
.article-hero .lede { color: rgba(255, 255, 255, 0.82); }
.article-hero .body-sm { color: rgba(255, 255, 255, 0.68); }
.article-hero .form-note { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 760px) {
  .article-hero { align-items: center; }
  .article-hero__scrim {
    background: linear-gradient(180deg, rgba(10, 10, 14, 0.5) 0%, rgba(10, 10, 14, 0.82) 55%, rgba(10, 10, 14, 0.92) 100%);
  }
}

/* ========================================================================
   28. COURBE EN J — GRAPHIQUE
   ======================================================================== */
.jcurve-chart {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  padding: 20px 4px 8px;
}
.jcurve-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.jcurve-chart__grid-line { stroke: var(--hairline); stroke-width: 1; }
.jcurve-chart__grid-label {
  fill: var(--fog);
  font-size: 10.5px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.jcurve-chart__baseline { stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.jcurve-chart__baseline-label {
  fill: var(--fog);
  font-size: 10.5px;
  font-family: var(--font-ui);
}
.jcurve-chart__phase-divider { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; }
.jcurve-chart__phase-label {
  fill: var(--fog);
  font-size: 10px;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}
.jcurve-chart__area { fill: var(--cyan); opacity: 0.1; }
.jcurve-chart__line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jcurve-chart__dot { fill: var(--cyan); stroke: var(--canvas); stroke-width: 2; }
.jcurve-chart__dot--key { fill: var(--cyan); stroke: var(--canvas); stroke-width: 2.5; }
.jcurve-chart__point-label {
  fill: var(--ivory);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.jcurve-chart__point-sublabel {
  fill: var(--fog);
  font-family: var(--font-ui);
  font-size: 10.5px;
}
.jcurve-chart__xaxis-label {
  fill: var(--fog);
  font-size: 10.5px;
  font-family: var(--font-ui);
}
.jcurve-chart__crosshair {
  stroke: var(--hairline-strong);
  stroke-width: 1;
  pointer-events: none;
}
.jcurve-chart__crosshair[hidden] { display: none; }
.jcurve-chart__hit { fill: transparent; cursor: crosshair; }
.jcurve-chart__tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--wash);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.jcurve-chart__tooltip[hidden] { display: none; }
.jcurve-chart__tooltip-value {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.jcurve-chart__tooltip-label { color: var(--fog); margin-top: 2px; }

/* -------------------------------------------------------------------------
   29. GUIDES PATRIMONIAUX — gabarit longue traîne (SEO/GEO)
   Rendu par api/articles-index.js et api/article.js (contenu Supabase).
   Réutilise .article-layout / .article-toc / .article-body / .article-block /
   .block-tag / .spec-table / .data-table / .faq-list / .menu-card /
   .sinfonews-card déjà en place sur les pages solutions — seuls les
   composants propres au format long (TL;DR, encarts, CTA in-texte, colonne
   de conversion, fil d'Ariane, badge E-E-A-T, barre de progression) sont
   ajoutés ici.
   ------------------------------------------------------------------------- */

/* Couleur d'avertissement : seule couleur hors palette de marque de tout le
   site, volontairement — un point de vigilance fiscal doit rester
   identifiable au premier coup d'œil, pas se fondre dans l'accent cyan
   utilisé partout ailleurs comme couleur "positive/marque". */
:root {
  --amber: #c9933c;
}

/* Espacement par défaut entre deux composants riches consécutifs dans le
   corps d'un guide (ex. un tableau immédiatement suivi d'un encart) —
   CSS, pas du style en ligne au cas par cas sur chaque composant : un
   article rédigé automatiquement (generator.mjs) n'ajoute pas toujours la
   marge en ligne de façon cohérente (observé en production : tableau et
   encart collés l'un à l'autre, sans aucun espace). Scopé à
   .article-block-content, le conteneur partagé par les guides Supabase et
   les articles SinfoNews — ne touche pas .spec-table/.data-table/etc.
   utilisés tels quels sur les pages solutions. */
.article-block-content > .spec-table-wrap,
.article-block-content > .data-table-wrap,
.article-block-content > .guide-callout,
.article-block-content > .guide-case,
.article-block-content > .guide-cta-banner,
.article-block-content > ul.card__list,
.article-block-content > .menu-cards,
.article-block-content > .faq-list {
  margin-top: 28px;
}

/* Barre de progression de lecture — fixe, fine, au-dessus du header. */
.guide-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--hairline-strong);
  z-index: 95;
}
.guide-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  transition: width 80ms linear;
}

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fog);
}
.breadcrumb a { color: var(--fog); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb__sep { color: var(--hairline-strong); }
.breadcrumb__current { color: var(--ivory); }

/* Badge E-E-A-T — auteur + statut vérifié */
.guide-eeat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-eeat__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--petrol), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: #fff;
}
.guide-eeat__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-eeat__check {
  flex: none;
  display: inline-flex;
  color: var(--cyan);
}
.guide-eeat__role { font-size: 12px; color: var(--fog); margin-top: 1px; }

/* Briefing Audio Sinfoni — lecteur éditorial, au-dessus du "En bref" */
.audio-briefing {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  background: var(--wash);
  padding: clamp(18px, 2.2vw, 24px);
  margin-bottom: 20px;
}
.audio-briefing__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.audio-briefing__play {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--cyan);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.audio-briefing__play:hover { transform: scale(1.06); }
.audio-briefing__play svg { display: block; }
.audio-briefing__meta { flex: 1; min-width: 0; }
.audio-briefing__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.audio-briefing__sub {
  font-size: 13.5px;
  color: var(--ivory);
  margin-top: 3px;
}
.audio-briefing__badge {
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}
.audio-briefing__badge:not(:empty)::before { content: "· "; }

/* Onde sonore — visible et animée seulement pendant la lecture */
.audio-briefing__wave {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease);
}
.audio-briefing__wave span {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--cyan);
  animation: audio-wave 1s ease-in-out infinite;
  animation-play-state: paused;
}
.audio-briefing__wave span:nth-child(1) { animation-delay: -0.9s; }
.audio-briefing__wave span:nth-child(2) { animation-delay: -0.6s; }
.audio-briefing__wave span:nth-child(3) { animation-delay: -0.3s; }
.audio-briefing__wave span:nth-child(4) { animation-delay: -0.75s; }
.audio-briefing__wave span:nth-child(5) { animation-delay: -0.15s; }
.is-playing .audio-briefing__wave { opacity: 1; }
.is-playing .audio-briefing__wave span { animation-play-state: running; }
@keyframes audio-wave {
  0%, 100% { height: 5px; }
  50% { height: 18px; }
}

.audio-briefing__speed {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.audio-briefing__speed:hover { border-color: var(--cyan); color: var(--cyan); }

.audio-briefing__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.audio-briefing__time {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--fog);
  min-width: 2.4em;
}
.audio-briefing__time:last-child { text-align: right; }

.audio-briefing__seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: var(--hairline-strong);
  cursor: pointer;
}
.audio-briefing__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: -4.5px;
  transition: transform var(--dur) var(--ease);
}
.audio-briefing__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: transparent; }
.audio-briefing__seek:hover::-webkit-slider-thumb { transform: scale(1.2); }
.audio-briefing__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--cyan);
}
.audio-briefing__seek::-moz-range-track { height: 3px; border-radius: 2px; background: var(--hairline-strong); }

@media (max-width: 520px) {
  .audio-briefing__wave { display: none; }
}

/* "En bref" — TL;DR pour lecture humaine rapide et extraction GEO */
.guide-tldr {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  background: var(--wash);
  padding: clamp(20px, 2.4vw, 28px);
}
.guide-tldr__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.guide-tldr__list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.guide-tldr__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ivory);
}
.guide-tldr__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Encarts d'expertise — "L'œil de Sinfoni" / "À retenir" / vigilance fiscale */
.guide-callout {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  padding: clamp(18px, 2vw, 24px);
}
.guide-callout__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory);
}
.guide-callout__head svg { flex: none; color: inherit; }
.guide-callout p,
.guide-callout ul { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--fog); }
.guide-callout p:first-of-type { margin-top: 12px; }
.guide-callout--expert .guide-callout__head { color: var(--cyan); }
.guide-callout--warning .guide-callout__head { color: var(--amber); }

/* Cas pratique / simulation chiffrée — habillage de .data-table existant */
.guide-case {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  background: var(--wash);
  padding: clamp(20px, 2.4vw, 28px);
}
.guide-case__head { margin-bottom: 18px; }

/* Bannière CTA in-texte */
.guide-cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(165deg, #292933 0%, #1a1a21 100%);
  padding: clamp(20px, 2.4vw, 26px);
}
.guide-cta-banner__text { max-width: 46ch; }
.guide-cta-banner__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.guide-cta-banner__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ivory);
}
.guide-cta-banner .btn { flex: none; }

/* Mise en page sommaire / contenu, même point de rupture que
   .article-layout (déjà en place sur les pages solutions) mais indépendante
   pour ne rien changer à ces pages existantes. Pas de 3e colonne : la
   conversion passe par la bannière CTA in-texte et le bloc rendez-vous en
   bas de page, pour laisser toute la largeur au contenu (tableaux compris). */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
@media (min-width: 980px) {
  .guide-layout { grid-template-columns: 228px minmax(0, 1fr); gap: 56px; align-items: start; }
}