/*
 * ParFreeTion : charte graphique v3.0 « Marine & cuivre » (variante 2a)
 * Remplace css/design-tokens.css — aucun autre fichier CSS à modifier.
 * Les noms de variables sont inchangés : design.css et design-handoff.css
 * continuent de fonctionner tels quels.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  /* Couleurs : charte v3 « Marine & cuivre »
     --corail = accent principal (cuivre)
     --or     = accent secondaire (laiton)
     --brun   = encre + fonds sombres (bleu nuit)
     --sauge  = accent tertiaire (bleu-vert) */
  --corail: #B5622F;
  --corail-light: #D08A55;
  --corail-pale: #F7E5D8;
  --or: #C9A65C;
  --or-light: #DCC48A;
  --or-pale: #F6ECD6;
  --brun: #14273D;
  --brun-mid: #4E5F72;
  --brun-light: #7A8794;
  --sauge: #4C8C8B;
  --sauge-clair: #7FB2B1;
  --sauge-pale: #DCECEB;
  --creme: #F6F4F1;
  --creme-alt: #EAE6E1;
  --border: #DEDAD3;
  --terre: #F0E7DE;
  --blanc: #FFFFFF;

  /* Fond sombre plus profond que --brun, pour le héros et le pied de page
     si vous voulez les détacher du texte (optionnel) */
  --nuit: #112337;

  /* Alias compat design précédent */
  --color-ink: var(--brun);
  --color-ink-soft: var(--brun-mid);
  --color-surface: var(--creme);
  --color-surface-alt: var(--creme-alt);
  --color-accent: var(--corail);
  --color-accent-hover: #9B5027;
  --color-accent-soft: var(--corail-pale);
  --color-gold: var(--or);
  --color-gold-soft: var(--or-pale);
  --color-success: var(--sauge);
  --color-border: var(--border);
  --color-glass: rgba(246, 244, 241, 0.88);
  --color-glass-border: rgba(20, 39, 61, 0.08);
  --color-on-dark: var(--creme);
  --color-on-dark-muted: rgba(246, 244, 241, 0.75);

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-hero: 3.25rem;   /* 52px */
  --text-4xl: 2.375rem;   /* 38px H1 */
  --text-3xl: 1.75rem;    /* 28px H2 */
  --text-2xl: 1.375rem;   /* 22px H3 */
  --text-xl: 1.125rem;    /* 18px body large */
  --text-base: 1rem;      /* 16px */
  --text-sm: 0.875rem;    /* 14px */
  --text-xs: 0.75rem;     /* 12px */

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --tracking-wide: 0.04em;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(20, 39, 61, 0.05);
  --shadow-md: 0 4px 14px rgba(20, 39, 61, 0.07);
  --shadow-lg: 0 12px 28px rgba(20, 39, 61, 0.09);

  --max-width: 1280px;
  --nav-height: 76px;
  --stave-pattern: repeating-linear-gradient(
    180deg,
    rgba(201, 166, 92, 0.10) 0px,
    rgba(201, 166, 92, 0.10) 1px,
    transparent 1px,
    transparent 46px
  );
  --stave-pattern-soft: repeating-linear-gradient(
    180deg,
    rgba(201, 166, 92, 0.07) 0px,
    rgba(201, 166, 92, 0.07) 1px,
    transparent 1px,
    transparent 40px
  );

  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-normal: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}