/* charte.css — pages d'acquisition MeilleurSalaire.fr
   Transposition fidèle du gabarit Claude Design validé (P1) :
   mêmes variables --ms-* que le site, thème suivant la préférence
   système, accordéon natif, une seule rupture à 480 px.
   Polices auto-hébergées, sous-ensemble latin, /fonts/. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  --ms-serif: "Source Serif 4", Georgia, serif;
  --ms-sans: "Public Sans", system-ui, sans-serif;
  --ms-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ms-bg: #eaf0f8; --ms-surface: #ffffff; --ms-inset: #f5f8fc;
  --ms-text: #10336b; --ms-muted: #5b6b85; --ms-line: #e3eaf3;
  --ms-cta: #0f3b8c; --ms-cta-txt: #ffffff; --ms-cta-hover: #0b63ce;
  --ms-data: #c6d3e6; --ms-vise: #0b63ce; --ms-vous: #d6005f;
  --ms-ambre-fond: rgba(199, 126, 10, 0.09);
  --ms-ambre-filet: rgba(199, 126, 10, 0.26);
  --ms-ambre-txt: #9a6208;
  --ms-shadow: 0 1px 2px rgba(16, 51, 107, 0.07), 0 8px 24px rgba(16, 51, 107, 0.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ms-bg: #071528; --ms-surface: #0e2445; --ms-inset: #0a1c36;
    --ms-text: #e8eff9; --ms-muted: #9db2d0; --ms-line: #1d3f6d;
    --ms-cta: #e8eff9; --ms-cta-txt: #10336b; --ms-cta-hover: #ffffff;
    --ms-data: #24405f; --ms-vise: #6ba8f0; --ms-vous: #ff5090;
    --ms-ambre-fond: rgba(230, 168, 60, 0.11);
    --ms-ambre-filet: rgba(230, 168, 60, 0.28);
    --ms-ambre-txt: #e0a83c;
    --ms-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-sans);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ms-vise); text-decoration: none; }
a:hover { color: var(--ms-text); }
svg { display: block; }
:focus-visible { outline: 2px solid var(--ms-vous); outline-offset: 2px; }
input::placeholder { color: var(--ms-muted); opacity: 0.75; }

/* Accordéon natif : details/summary, pas une ligne de script. */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary span[aria-hidden]::before { content: "+"; }
details[open] > summary span[aria-hidden]::before { content: "\2212"; }

/* Une seule rupture, à 480 px, comme sur le site. */
@media (max-width: 480px) {
  .rp { padding-left: 16px !important; padding-right: 16px !important; }
  .h1 { font-size: 30px !important; }
  .kpi { font-size: 62px !important; }
  .pastilles { gap: 7px !important; }
}