/* ================================================================
   MAPAYER — Base v2
   Remise à zéro, typographie Poppins, éléments natifs.

   Dépend de design-tokens.css (à charger avant ce fichier).
   Aucun !important, aucune couleur codée en dur : tout passe par
   les tokens. Surchargeable par components.css.
   ================================================================ */

/* ----------------------------------------------------------------
   Typographie
   ---------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;              /* 15px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-base);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Poppins a une hauteur d'x généreuse : on allège les graisses et on
   resserre légèrement l'interlettrage des grands corps. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-strong);
}

h1, .h1 { font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: -0.02em; }
h2, .h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.015em; }
h3, .h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1.0625rem; }
h5, .h5 { font-size: 0.9375rem; }
h6, .h6 { font-size: 0.875rem; }

p { color: var(--text-muted); }

small, .small { font-size: 0.8125rem; }

strong, b { font-weight: 600; color: var(--text-strong); }

a {
  color: var(--brand-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-inout);
}

a:hover,
a:focus { color: var(--brand-text-strong); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }

/* Les chiffres s'alignent : montants, taux, soldes, dates, compteurs */
.mp-num,
.mp-amount,
.mp-balance,
[id*="balance"],
[class*="amount"]:not([class*="wrapper"]),
[class*="__amount"],
.text--amount {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
   Éléments natifs
   ---------------------------------------------------------------- */
hr {
  height: 1px;
  border: 0;
  margin: var(--space-6) 0;
  background-color: var(--border-base);
}

img, svg, video { max-width: 100%; height: auto; }

::selection {
  background-color: var(--brand-tint);
  color: var(--text-strong);
}

/* Anneau de focus visible au clavier uniquement — jamais sur un clic souris */
:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------------
   Défilement
   ---------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-500); }

/* ----------------------------------------------------------------
   Transition de thème
   Limitée aux couleurs : une transition sur `all` provoque des
   saccades sur toute la page lors d'un changement de thème.
   ---------------------------------------------------------------- */
html,
body {
  transition: background-color var(--dur-slow) var(--ease-inout),
              color var(--dur-slow) var(--ease-inout);
}

/* ----------------------------------------------------------------
   Mouvement réduit
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------
   Utilitaires (jeu volontairement court)
   ---------------------------------------------------------------- */
.mp-measure { max-width: var(--measure); }
.mp-num-tabular { font-variant-numeric: tabular-nums; }
.mp-muted { color: var(--text-muted); }
.mp-faint { color: var(--text-faint); }
.mp-strong { color: var(--text-strong); font-weight: 600; }
.mp-brand-text { color: var(--brand-text); }
.mp-gold-text { color: var(--gold-text); }

/* Texte doré en dégradé : l'or du thème clair doit être la
   déclinaison lisible, l'or charte ne donnant que 2,42:1 sur blanc. */
.mp-gold-gradient {
  background: var(--gold-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-text);
}

.mp-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;
}

/* Conteneurs de débordement horizontal sur mobile : on autorise le
   défilement plutôt que la coupure du contenu. */
.mp-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}