/* FactuPay — jetons de design
   Valeurs relevées sur le système de design PayPal 6.0 (voir
   Documents/reverse-engineering/paypal/RAPPORT.md). Seules les valeurs sont
   reprises ; la marque, la police et les fichiers restent ceux de FactuPay. */

:root {
  /* Couleurs de base */
  --c-black: #000;
  --c-white: #fff;
  --c-sky: #60cdff;        /* bleu ciel (blue-400) */
  --c-blue: #0066f5;       /* bleu (blue-500) */
  --c-navy: #002991;       /* bleu nuit (blue-600) */
  --c-gold: #c7ab6e;       /* accent-4 */
  --c-gray-100: #f5f7fa;
  --c-gray-200: #edf0f2;
  --c-gray-300: #ccc;
  --c-canvas: #f1efea;     /* fond derrière le document */

  /* Teintes d'interface */
  --tint-04: rgba(0, 41, 145, .04);
  --tint-08: rgba(0, 41, 145, .08);
  --tint-12: rgba(0, 41, 145, .117);
  --tint-15: rgba(0, 41, 145, .154);
  --line: rgba(0, 0, 0, .16);
  --line-strong: #00000029;
  --icon: rgba(0, 0, 0, .48);
  --muted: #000000a1;
  --scrim: rgba(0, 0, 0, .4);

  /* Liens */
  --link: #0066f5;
  --link-hover: #3d8bf7;
  --link-active: #0047ac;

  /* Boutons */
  --btn-primary: #000;
  --btn-primary-hover: #3d3d3d;
  --btn-primary-active: #4f4f4f;
  --btn-secondary: var(--tint-08);
  --btn-secondary-hover: var(--tint-12);
  --btn-secondary-active: var(--tint-15);

  /* Focus */
  --focus: #0066f5;
  --focus-on-dark: #3db5ff;

  /* Typographie */
  --font-headline: "Satoshi", "Century Gothic", Helvetica, Arial, sans-serif;
  --font-text: "Satoshi", Helvetica, Arial, sans-serif;
  --fw-text: 400;
  --fw-strong: 700;
  --fw-headline: 900;
  --ls-headline: -.03em;
  --ls-title: -.02em;
  --ls-text: -.015em;

  /* Mêmes pentes que PayPal ; minimums abaissés pour les mots français
     longs sur téléphone (PayPal : 4.031rem, 3.531rem, 3.0625rem…). */
  --fs-display-3: clamp(2.75rem, 13.6161vw - 4.68304rem, 11.6563rem);
  --fs-h1: clamp(2.6rem, 10.3237vw - 3.07589rem, 9.3125rem);
  --fs-h2: clamp(2.4rem, 7.8125vw - 1.9375rem, 7.4375rem);
  --fs-h3: clamp(2.2rem, 5.91518vw - 1.12946rem, 5.96875rem);
  --fs-h4: clamp(2rem, 4.40848vw - .508929rem, 4.78125rem);
  --fs-h5: clamp(1.8rem, 3.23661vw - .0714286rem, 3.8125rem);
  --fs-h6: clamp(1.75rem, .25rem + 2.34375vw, 3.0625rem);
  --fs-h7: clamp(1.53125rem, .495536rem + 1.6183vw, 2.4375rem);
  --fs-title: clamp(1.3125rem, .5625rem + 1.17188vw, 1.96875rem);
  --fs-title-m: clamp(1rem, .714286rem + .446429vw, 1.25rem);
  --fs-body-xl: clamp(1.3125rem, .5625rem + 1.17188vw, 1.96875rem);
  --fs-body-l: clamp(1.15625rem, .691964rem + .725446vw, 1.5625rem);
  --fs-body: clamp(1rem, .714286rem + .446429vw, 1.25rem);
  --fs-body-s: clamp(.875rem, .732143rem + .223214vw, 1rem);
  --fs-caption: .875rem;

  /* Formes */
  --r-pill: 999px;
  --r-media: 1.5rem;
  --r-jumbo: 2rem;
  --r-badge: 1rem;

  /* Boutons */
  --btn-h: 3rem;
  --btn-px: 1.25rem;
  --btn-h-sm: 2rem;
  --btn-px-sm: .75rem;

  /* Grille et espacements fluides */
  --gap: clamp(1rem, .8226rem + .7569vw, 1.5rem);
  --sp-sm: clamp(.5rem, -.3rem + 1.25vw, 1.2rem);
  --sp-md: clamp(1rem, -.6rem + 2.5vw, 2.4rem);
  --sp-lg: clamp(2rem, -1.2rem + 5vw, 4.8rem);
  --sp-xl: clamp(3rem, -1.8rem + 7.5vw, 7.2rem);
  --sp-2xl: clamp(4rem, -2.4rem + 10vw, 9.6rem);
  --sp-3xl: clamp(6rem, -3.6rem + 15vw, 14.4rem);
  --rail: clamp(1rem, -1.5rem + 7vw, 8rem);
  --header-h: 88px;

  /* Mouvement */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-entry: cubic-bezier(.37, .34, .26, .9);
  --ease-bounce: cubic-bezier(.4, 1.2, .2, 1);
  --ease-soft: cubic-bezier(0, 0, .25, 1);
  --ease-media: cubic-bezier(.2, 0, .4, 1);
  --ease-open: cubic-bezier(0, 1, .5, 1);
  --ease-toast: cubic-bezier(0, .9, .3, 1);
  --t-fast: .2s;
  --t-base: .3s;
  --t-entry: .7s;
  --t-slow: 1s;
  --word-step: .4s;
}

/* Plates : chaque section choisit son fond, le reste suit */
.plate-white, .plate-sky, .plate-blue, .plate-navy, .plate-black, .plate-gray, .plate-gold {
  background: var(--bg);
  color: var(--text);
}
.plate-white { --bg: #fff; --text: #000; --hl: #0066f5; --muted-c: #000000a1; --hover: #eaedf1; --active: #d6dae2; --focus-c: #0066f5; --alt: #0029910a; --border: #00000029; --fill-1: #002991; --fill-2: #60cdff; }
.plate-gray  { --bg: #f5f7fa; --text: #000; --hl: #0066f5; --muted-c: #000000a1; --hover: #e3e6eb; --active: #cfd4dc; --focus-c: #0066f5; --alt: #0029910a; --border: #00000029; --fill-1: #002991; --fill-2: #60cdff; }
.plate-sky   { --bg: #60cdff; --text: #000; --hl: #002991; --muted-c: #000000a1; --hover: #59c1f5; --active: #51b5eb; --focus-c: #0066f5; --alt: #ffffffa1; --border: #ffffff3d; --fill-1: #002991; --fill-2: #fff; }
.plate-blue  { --bg: #0066f5; --text: #fff; --hl: #fff;    --muted-c: #ffffffb8; --hover: #0052c4; --active: #0047ac; --focus-c: #3db5ff; --alt: #0000003d; --border: #ffffff3d; --fill-1: #002991; --fill-2: #fff; }
.plate-navy  { --bg: #002991; --text: #fff; --hl: #60cdff; --muted-c: #ffffffb8; --hover: #1a3b8e; --active: #3d5aa3; --focus-c: #3db5ff; --alt: #0000003d; --border: #ffffff3d; --fill-1: #60cdff; --fill-2: #fff; }
.plate-black { --bg: #000;    --text: #fff; --hl: #60cdff; --muted-c: #ffffffb8; --hover: #1a1a1a; --active: #3d3d3d; --focus-c: #3db5ff; --alt: #1a1a1a;   --border: #ffffff3d; --fill-1: #60cdff; --fill-2: #fff; }
.plate-gold  { --bg: #c7ab6e; --text: #000; --hl: #7a5d1e; --muted-c: #000000a1; --hover: #b7a270; --active: #a89871; --focus-c: #5a420f; --alt: #f5e8be;   --border: #edd797;   --fill-1: #5a420f; --fill-2: #fdf6e3; }

/* Sur fond sombre, les boutons s'inversent */
.plate-navy, .plate-black, .plate-blue {
  --btn-primary: #fff; --btn-primary-hover: #c2c2c2; --btn-primary-active: #b0b0b0; --btn-primary-text: #000;
  --btn-secondary: hsla(0, 0%, 80%, .28); --btn-secondary-hover: hsla(0, 0%, 73%, .453); --btn-secondary-active: hsla(0, 0%, 80%, .503);
  --link: #60cdff; --link-hover: #8fd6ff; --focus: #3db5ff; --line: hsla(0, 0%, 100%, .24);
}