/* ============================================================
   JBS — Variables globales
   ============================================================ */

:root {
  /* Palette inspirée de la RDC, adoucie pour l'écran */
  --rdc-blue-deep: #082A4A;
  --rdc-blue: #0B4F78;
  --rdc-blue-medium: #176A96;
  --rdc-blue-soft: #DCECF3;

  --rdc-red-deep: #8E2F36;
  --rdc-red: #B94247;
  --rdc-red-soft: #F3E3E3;

  --rdc-gold: #C89A3D;
  --rdc-gold-text: #8A6417;
  --rdc-gold-soft: #E8C879;
  --rdc-gold-pale: #F6ECD4;

  --ink: #102235;
  --ink-soft: #425466;
  --ivory: #F6F2E9;
  --paper: #FCFBF7;
  --white: #FFFFFF;
  --line: #D9E0E5;

  /* Typographie */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Rayons */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(8, 42, 74, 0.06), 0 6px 18px rgba(8, 42, 74, 0.06);
  --shadow: 0 2px 4px rgba(8, 42, 74, 0.05), 0 18px 44px rgba(8, 42, 74, 0.1);
  --shadow-lg: 0 4px 8px rgba(8, 42, 74, 0.06), 0 30px 70px rgba(8, 42, 74, 0.16);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 640ms;

  /* Cadrage du portrait */
  --hero-position-x: 50%;
  --hero-position-y: 30%;

  /* Header */
  --header-h: 84px;

  /* Ratio visuel */
  --ratio-neutral: 60%;
  --ratio-blue: 25%;
  --ratio-blue-light: 10%;
  --ratio-gold: 4%;
  --ratio-red: 1%;
}