/* ==========================================================================
   AzureIA — Design tokens
   Toutes les couleurs, typographies, espacements et effets du site.
   Modifier une valeur ici la met à jour partout.
   ========================================================================== */

:root {
  /* ---- Palette de marque (charte AzureIA) ---- */
  --azur: #1F5BFF;          /* Couleur de marque, boutons */
  --azur-profond: #1638E6;  /* Départ du dégradé, survol */
  --azur-moyen: #1F74FF;    /* Milieu du dégradé du logo */
  --ciel: #29BDFF;          /* Arrivée du dégradé, illustrations */
  --ciel-clair: #5CD2FF;    /* Version claire (logo inversé, fonds sombres) */
  --nuit: #081433;          /* Texte, fonds sombres */
  --nuit-2: #0E1D45;        /* Surface sombre légèrement relevée */
  --corail: #FF6A4D;        /* Accent chaud */
  --corail-clair: #FF9A82;
  --ecume: #F3F7FC;         /* Fond secondaire */
  --brume: #DCE7F7;         /* Filets, pastilles */
  --ardoise: #55637D;       /* Texte secondaire */
  --blanc: #FFFFFF;

  /* ---- Dégradés ---- */
  --gradient-brand: linear-gradient(135deg, var(--azur-profond) 0%, var(--azur-moyen) 55%, var(--ciel) 100%);
  --gradient-text: linear-gradient(95deg, var(--azur-profond) 0%, var(--azur-moyen) 55%, #22A8FF 100%);
  --gradient-text-inverse: linear-gradient(95deg, #4C9BFF 0%, var(--ciel-clair) 100%);

  /* ---- Rôles sémantiques ---- */
  --color-bg: var(--blanc);
  --color-surface: var(--ecume);
  --color-text: var(--nuit);
  --color-text-muted: var(--ardoise);
  --color-accent: var(--azur);
  --color-accent-hover: var(--azur-profond);
  --color-border: var(--brume);
  --color-on-dark: #F3F7FC;
  --color-on-dark-muted: rgba(243, 247, 252, 0.74);

  /* ---- Typographie ---- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.125rem, 1.15rem + 4.1vw, 4.5rem);      /* 34 → 72px */
  --fs-h2: clamp(2rem, 1.3rem + 2.9vw, 3.75rem);          /* 32 → 60px */
  --fs-h3: clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem);      /* 30 → 52px */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);     /* 18 → 20px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 → 20px */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.04;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --tracking-display: -0.04em;
  --tracking-heading: -0.032em;

  /* ---- Espacements ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --section-y: clamp(4.5rem, 2.8rem + 6.5vw, 8.5rem);

  /* ---- Mise en page ---- */
  --container: 1180px;
  --container-narrow: 980px;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --header-h: 80px;

  /* ---- Formes ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Ombres & halos ---- */
  --shadow-sm: 0 1px 2px rgba(8, 20, 51, 0.06), 0 2px 8px rgba(8, 20, 51, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(8, 20, 51, 0.18);
  --shadow-header: 0 8px 28px -16px rgba(8, 20, 51, 0.18);
  --glow-azur: 0 1px 16px 4px rgba(31, 91, 255, 0.22);
  --glow-azur-strong: 0 8px 28px 6px rgba(31, 91, 255, 0.3);
  --glow-ciel: 0 0 26px 4px rgba(41, 189, 255, 0.38);

  /* ---- Animations ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.9s;
  --marquee-speed: 60; /* px par seconde, lu par le script */

  /* ---- Plans ---- */
  --z-header: 50;
  --z-menu: 60;
}