/* Design tokens — charte graphique v1 TLC Prospérité.
   Toute couleur, police ou espacement du site passe par ces variables. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs */
  --color-navy: #061426;
  --color-navy-2: #0b2036;
  --color-navy-3: #12304d;
  --color-accent: #5cc4a8;
  --color-accent-hover: #7ad6bd;
  --color-accent-soft: rgba(92, 196, 168, 0.14);
  --color-accent-deep: #1f6b57; /* turquoise assombri : texte lisible sur fond clair */
  --color-ivory: #f6f4ee;
  --color-white: #ffffff;
  --color-ink: #0e1b2b;
  --color-ink-muted: #56636f;
  --color-on-dark: #e9eef2;
  --color-on-dark-muted: #8a97a6;
  --color-line: #ddd8cc;
  --color-line-dark: rgba(255, 255, 255, 0.14);
  --color-error: #c0453a;
  --color-success: #2f8f76;
  --color-navy-veil: rgba(6, 20, 38, 0.62);
  --overlay-hero: linear-gradient(90deg, rgba(6, 20, 38, 0.8) 0%, rgba(6, 20, 38, 0.45) 55%, rgba(6, 20, 38, 0.15) 100%),
    linear-gradient(180deg, rgba(6, 20, 38, 0.7) 0%, rgba(6, 20, 38, 0.15) 40%, rgba(6, 20, 38, 0.85) 100%);
  --overlay-band: linear-gradient(180deg, rgba(6, 20, 38, 0.5) 0%, rgba(6, 20, 38, 0.74) 100%);

  /* Typographie */
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
  --text-logo: clamp(1.1875rem, 1rem + 0.7vw, 1.625rem);
  --text-logo-tagline: 1rem;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --tracking-caps: 0.22em;
  --tracking-logo: 0.14em;
  --tracking-wide: 0.08em;
  --tracking-tight: -0.01em;
  --measure: 38rem; /* longueur de ligne confortable */

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Mise en page */
  --container: 76rem;
  --container-narrow: 48rem;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --header-h: 4.75rem;
  --band-h: clamp(20rem, 52vw, 34rem);
  --line: 1px;
  --z-header: 100;
  --z-skip: 200;

  /* Formes et mouvement */
  --radius-sm: 2px;
  --radius: 4px;
  --shadow: 0 18px 48px rgba(6, 20, 38, 0.18);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.35s;
  --duration-slow: 0.9s;
  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-light: 2px solid var(--color-accent-deep);
}