/* ============================================================
   tokens.css — Design tokens globaux
   ============================================================ */

:root {
  /* Couleurs — identité industrielle / logistique premium */
  --color-navy-950: #171322;
  --color-navy-900: #211b31;
  --color-navy-700: #3b3157;
  --color-steel-500: #6b6477;
  --color-steel-300: #a9b4c0;
  --color-steel-100: #f1eef7;
  --color-accent-500: #7c3aed;   /* orange conteneur / signalétique industrielle */
  --color-accent-600: #6d28d9;
  --color-white: #ffffff;
  --color-success: #1f9d55;
  --color-danger: #d0342c;

  /* Typographie */
  /* Grands titres : condensé, très gras, en majuscules (Oswald) */
  --font-display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue Condensed', Impact, sans-serif;
  /* Tout le reste : sans-serif géométrique lisible (Manrope) */
  --font-heading: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Rayons / ombres */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(10, 15, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 15, 26, 0.08);
  --shadow-lg: 0 20px 48px rgba(10, 15, 26, 0.14);

  /* Header */
  --header-height: 162px;              /* bande d'annonce 38 + barre du haut 64 + recherche */
  --header-offset: var(--header-height); /* éléments collants : suit la hauteur réelle du header */
  --z-header: 100;
}

@media (min-width: 421px) { :root { --header-height: 166px; } }
/* Bande d'annonce repliée au défilement : les éléments collants remontent de 38 px */
html.announce-collapsed { --header-offset: calc(var(--header-height) - 38px); }