/*
 * Un pas pour nous — jetons de design unifiés (proposition du 18 octobre 2026).
 * Source unique pour le site public, l'espace client et l'espace conseiller.
 * Les primitives nomment une teinte ; les jetons sémantiques nomment un usage.
 * Les pages et composants n'utilisent que les jetons sémantiques.
 */

/* Newsreader (SIL OFL, licence dans assets/newsreader-OFL.txt), choisie le 18 octobre 2026
 * à la place de Bodoni Moda pour la lisibilité. Fichier réduit aux axes utilisés :
 * graisse 400–500, taille optique 24–72. */
@font-face {
  font-family: Newsreader;
  src: url("../assets/newsreader.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: Karla;
  src: url("../assets/karla.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* ---------- Primitives : palette terre cuite, lin et cacao ---------- */
  --upn-cacao-900: #30241f;
  --upn-cacao-600: #69554b;
  --upn-cacao-400: #9d8879;

  --upn-lin-50: #fffaf5;
  --upn-lin-100: #f5f0e8;
  --upn-lin-200: #ece2d6;
  --upn-lin-300: #d9c8b7;
  --upn-sable-300: #e5d2be;
  --upn-peche-100: #f8e9dd;
  --upn-argile-300: #dca58e;

  --upn-terre-500: #b8654b;
  --upn-terre-600: #a9553e;
  --upn-terre-700: #8f432f;

  --upn-sauge-100: #e2ece8;
  --upn-sauge-800: #263d34;
  --upn-succes-100: #e6efdf;
  --upn-succes-800: #365236;
  --upn-erreur-100: #f7e1dc;
  --upn-erreur-700: #8d2e28;
  --upn-info-100: #e6eff1;
  --upn-info-800: #366372;
  --upn-attention-100: #fcedd6;
  --upn-attention-800: #835022;

  /* ---------- Couleurs sémantiques ---------- */
  --color-page: var(--upn-lin-100);
  --color-surface: var(--upn-lin-50);
  --color-surface-tint: var(--upn-peche-100);
  --color-surface-warm: var(--upn-sable-300);
  --color-surface-inverse: var(--upn-cacao-900);

  --color-text: var(--upn-cacao-900);
  --color-text-muted: var(--upn-cacao-600);
  --color-text-inverse: var(--upn-lin-100);
  --color-text-inverse-muted: var(--upn-sable-300);

  --color-line: var(--upn-lin-200);
  --color-line-strong: var(--upn-lin-300);
  --color-field-border: var(--upn-cacao-400);

  --color-action: var(--upn-terre-600);
  --color-action-hover: var(--upn-terre-700);
  --color-on-action: var(--upn-lin-50);
  --color-link: var(--upn-terre-700);
  --color-accent: var(--upn-terre-500);
  --color-accent-soft: var(--upn-argile-300);
  --color-focus: var(--upn-terre-700);
  --color-focus-inverse: var(--upn-sable-300);
  --color-selection: var(--upn-peche-100);

  --color-person-one: var(--upn-peche-100);
  --color-on-person-one: var(--upn-cacao-900);
  --color-person-two: var(--upn-sauge-100);
  --color-on-person-two: var(--upn-sauge-800);

  --color-success: var(--upn-succes-800);
  --color-success-bg: var(--upn-succes-100);
  --color-error: var(--upn-erreur-700);
  --color-error-bg: var(--upn-erreur-100);
  --color-info: var(--upn-info-800);
  --color-info-bg: var(--upn-info-100);
  --color-warning: var(--upn-attention-800);
  --color-warning-bg: var(--upn-attention-100);

  /* ---------- Typographie : Newsreader à partir de 28 px, Karla pour le reste ---------- */
  --font-display: Newsreader, Georgia, serif;
  --font-text: Karla, Arial, sans-serif;

  --text-2xs: .75rem;      /* 12 px : libellés de la barre mobile uniquement */
  --text-xs: .8125rem;     /* 13 px : métadonnées, jamais une information indispensable */
  --text-sm: .9375rem;     /* 15 px : textes d'interface secondaires */
  --text-md: 1.0625rem;    /* 17 px : lecture courante */
  --text-lg: 1.25rem;      /* 20 px : titres de cartes et de blocs, Karla 600 */
  --text-xl: 1.5rem;       /* 24 px : titres de rubrique dans les espaces, Karla 600 */

  --display-sm: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);  /* 28 → 36 px */
  --display-md: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);   /* 36 → 52 px */
  --display-lg: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);   /* 44 → 76 px */

  /* Réglages propres à la police d'affichage : à ajuster si elle change. */
  --display-weight: 460;
  --display-variation: normal;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-text: 1.6;
  --tracking-display: -.022em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* ---------- Espacements : pas de 4 px ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* ---------- Formes ---------- */
  --radius-sm: 6px;     /* badges, cases à cocher */
  --radius-md: 8px;     /* champs */
  --radius-lg: 12px;    /* cartes, encarts, bulles */
  --radius-xl: 16px;    /* photographies, dialogues */
  --radius-pill: 999px; /* boutons, onglets, filtres */

  /* ---------- Profondeur : trois niveaux, toujours décalés et diffus ---------- */
  --shadow-1: 0 1px 2px rgb(48 36 31 / .06), 0 2px 8px rgb(48 36 31 / .05);
  --shadow-2: 0 14px 32px -10px rgb(48 36 31 / .16);
  --shadow-3: 0 28px 72px -16px rgb(48 36 31 / .32);
  --backdrop: rgb(48 36 31 / .6);

  /* ---------- Verre de l'en-tête : sobre, sans reflet ni dégradé ---------- */
  --glass-surface: rgb(255 250 245 / .74);
  --glass-surface-solid: rgb(255 250 245 / .96);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-edge: rgb(48 36 31 / .08);

  /* ---------- Mouvement ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --duration-fast: 160ms;     /* retour immédiat : appui, survol */
  --duration-base: 240ms;     /* changement d'état */
  --duration-slow: 340ms;     /* menu, dialogue, changement de page */
  --duration-reveal: 720ms;   /* apparition au défilement, ouverture d'une photo */
  --duration-focal: 900ms;    /* le seul moment signé : titre et photo d'ouverture */
  --stagger: 70ms;            /* décalage entre éléments d'une liste, 4 au plus */

  /* ---------- Mise en page ---------- */
  --measure: 68ch;
  --content-max: 1180px;
  --header-max: 1344px;
  --gutter: clamp(1rem, .5rem + 2.5vw, 3rem);
  --header-space: calc(66px + 2 * var(--space-3)); /* capsule d'en-tête et ses marges : le hero passe dessous */
  --control-height: 44px;     /* boutons */
  --control-height-lg: 52px;
  --field-height: 42px;       /* champs de formulaire, 44 px sur écran tactile */
  --target-min: 44px;

  color-scheme: light;
}