/* Tokens — palette « Pantone » (Colors/ : 9060 U, 20-0146 Magnetic Blue, PMS 1655 C).
   Trois rôles : BLANC crème dominant (fond), BLEU secondaire (titres, texte, surfaces), ORANGE d'accent (CTA, détails).
   Teintes relevées sur la référence : crème #F8F6D6, bleu #05308C, orange #FC4C02.
   Adaptations : fond éclairci (le crème pur reste pour les surfaces), texte = bleu assombri,
   petits textes orange assombris (#C23800) pour rester lisibles (AA). Le texte posé sur l'orange est bleu nuit.
   Deux polices : Lexend Exa (titres) et IBM Plex Mono (texte). */
:root {
  color-scheme: light;
  /* Palette de référence */
  --cream: #F8F6D6;        /* Pantone 9060 U */
  --blue: #05308C;         /* Pantone 20-0146 Magnetic Blue */
  --orange: #FC4C02;       /* Pantone PMS 1655 C */

  /* Fonds : blanc crème dominant */
  --page: #FCFBF0;         /* fond du héros et des pages (reste disponible dans les zones bleues) */
  --bg: var(--page);       /* fond principal : crème éclairci */
  --bg-2: var(--cream);    /* surfaces : cartes, panneaux, formulaires */
  --bg-3: #F2EFC9;         /* surfaces imbriquées */

  /* Texte et filets : le bleu */
  --ink: #0A1E52;          /* texte : bleu Magnetic assombri (15:1 sur le fond) */
  --ink-2: #33447A;
  --muted: #5F6A92;        /* 4,9:1 sur le fond */
  --line: color-mix(in srgb, var(--blue) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--blue) 30%, transparent);
  --blue-2: #1A47A8;       /* bleu éclairci : survols */
  --blue-deep: #04276F;    /* bleu Magnetic assombri : survol des liens du héros */
  --shadow: rgba(5, 25, 80, 0.22);

  /* Accent orange, décliné */
  --orange-hover: #FF6A2B; /* survol des aplats orange */
  --orange-text: #C23800;  /* petits textes / points orange sur fond clair (AA) */
  --on-orange: var(--ink); /* texte posé sur l'orange */
  --on-ink: var(--bg);     /* texte posé sur le bleu */

  /* Anciens noms conservés (utilisés dans tout le site) */
  --red: var(--orange);    /* aplats, boutons */
  --neon: var(--orange-text);
  --pink: var(--orange);   /* focus */
  --magenta: #D94100;
  --wine: var(--blue);
  --on-red: var(--on-orange);
  --lava: var(--orange);   /* aplats et accents */
  --lava-v: var(--blue);   /* grands titres */

  --font-display: 'Lexend Exa', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --display-weight: 360;   /* titres fins (un cran plus affirmés qu'à l'origine : 300) */
  --display-track: 0.06em; /* lettres espacées, comme le logo */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-xl: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1rem + 2vw, 2.9rem);
  --fs-mega: clamp(2.2rem, 0.6rem + 6.6vw, 7.5rem);

  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);
  --section-y: clamp(6rem, 4rem + 8vw, 12rem);
  --maxw: 1360px;
  --header-h: 72px;
  --radius: 6px;           /* angles nets, comme la carte */
  --r-pill: 3px;           /* boutons, étiquettes (anciennes pilules) */
  --r-sm: 4px;

  /* Durées par usage (UX Pro Max : pas une durée unique copiée partout) */
  --t-micro: 200ms;
  --t-ui: 400ms;
  --t-enter: 700ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 899px) {
  :root { --header-h: 60px; --tabbar-h: 0px; } /* plus de barre d'onglets : navigation par le menu */
}

/* Zone bleue : le footer. Texte crème, orange éclairci pour les petits détails. */
.theme-blue, .footer {
  --bg: #04297A;
  --bg-2: var(--blue);
  --bg-3: #0B3C9E;
  --ink: var(--cream);
  --ink-2: color-mix(in srgb, var(--cream) 84%, var(--blue));
  --muted: color-mix(in srgb, var(--cream) 66%, var(--blue));
  --line: color-mix(in srgb, var(--cream) 15%, transparent);
  --line-strong: color-mix(in srgb, var(--cream) 30%, transparent);
  --orange-text: #FF8248;  /* 4,7:1 sur le bleu */
  --neon: var(--orange-text);
  --lava-v: var(--orange);
  --on-ink: var(--blue);
  --shadow: rgba(2, 12, 40, 0.45);
  color: var(--ink);
  color-scheme: dark;
}