/* ComptesPro — design tokens (source: design-reference/components.html, section 00 Fondations). Loaded first. */
:root {
  /* Logo palette + neutrals */
  --cp-petrol:        #09415C; /* headings, nav, filled buttons, footer */
  --cp-petrol-dark:   #06324A; /* button hover */
  --cp-pink:          #F5467E; /* accents, bullets, active state, focus */
  --cp-pink-text:     #C2185B; /* text on pink chips (contrast) */
  --cp-pink-bg:       #FFF2F6;
  --cp-ink:           #15232B; /* body text */
  --cp-muted:         #52636D; /* secondary text — 4.5:1 on white */
  --cp-border:        #DDE5E9;
  --cp-border-dash:   #B8C6CE; /* sponsored modules only (dashed border) */
  --cp-bg:            #FFFFFF;
  --cp-bg-alt:        #F4F7F8; /* alternate sections, "À retenir" box */
  --cp-bg-sponsor:    #FBFCFD; /* sponsor box only */
  --cp-footer-text:   #C9D6DD;
  --cp-ok:            #1E6B45; /* "points forts" only */
  --cp-ok-bg:         #EEF8F2;
  --cp-ok-border:     #B9D9C8;
  --cp-ko:            #8A1C3F; /* "limites" only */
  /* Monograms (fallback without partner logo) */
  --cp-mono-1: #09415C; --cp-mono-2: #1F5F7D; --cp-mono-3: #3A7A98; --cp-mono-4: #52636D;

  /* Typography */
  --cp-font-display: "Manrope", "Inter", system-ui, sans-serif; /* 700/800: headings, prices, offer names */
  --cp-font-body:    "Inter", system-ui, sans-serif;            /* 400/500/600/700 */
  --cp-h1: 52px;        /* home; article 44px */
  --cp-h2: 34px;        /* home sections; article 28px */
  --cp-h3: 21px;
  --cp-body: 16px;      /* UI */
  --cp-article: 18px;   /* article body, line-height 1.7; 17px under 640px */
  --cp-small: 14px;
  --cp-eyebrow: 12px;   /* 700, uppercase, letter-spacing .08em */
  --cp-tracking-tight: -0.012em;

  /* Shapes */
  --cp-radius-sm: 8px;   /* buttons, fields */
  --cp-radius-md: 10px;  /* inner cards, monograms */
  --cp-radius-lg: 12px;  /* card */
  --cp-radius-xl: 14px;  /* box sponsor */
  --cp-radius-pill: 999px;
  --cp-shadow-hero: 0 10px 30px rgba(9, 65, 92, .08); /* orientation module and mobile action bar only */

  /* Layout */
  --cp-wrap: 1200px;      /* + 32px padding desktop, 16px mobile */
  --cp-article-col: 740px;
  --cp-sidebar-col: 300px;
  --cp-col-gap: 64px;
  --cp-header-h: 72px;
  --cp-section-y: 64px;
  --cp-touch: 44px;
  --cp-focus: 3px solid var(--cp-pink);
}

@media (max-width: 640px) {
  :root { --cp-h1: 36px; --cp-h2: 26px; --cp-article: 17px; }
}