/* ==========================================================================
   Flexitel — Variables de design (couleurs, espacements, typographie)
   Direction artistique : bleu Immotic (repris du site flexitel.fr / immotic.fr)
   sur neutres clairs, registre éditorial et professionnel. Toutes les couleurs
   passent par ces variables afin de garder une cohérence stricte sur le site.
   ========================================================================== */

:root {
  /* === Palette de marque — bleu Immotic === */
  --color-primary: #008ac5;          /* bleu vif Immotic — icônes, filets, dégradés */
  --color-primary-dark: #076087;     /* bleu profond — texte interactif, liens, boutons (contraste AA) */
  --color-navy: #071c26;             /* navy très sombre — sections « deep » */
  --color-accent: #33b9df;           /* bleu clair — touches ponctuelles */
  --color-accent-soft: #a9dcf0;      /* bleu pâle — filets et éclats discrets */
  --color-background: #f6f8fa;       /* gris très clair froid — fond principal */
  --color-background-light: #e8f4fb; /* bleu très clair — bandes d'accent */
  --color-white: #ffffff;            /* blanc pur — cartes et bandes nettes */
  --color-text: #0f2535;             /* bleu-nuit — texte principal */
  --color-text-muted: #51626c;       /* ardoise — textes secondaires */

  /* === Déclinaisons utilitaires === */
  --color-border: #e2e8f0;           /* filet froid */
  --color-border-strong: #c6d5df;
  --color-ink-800: #071c26;
  --color-success: #4f8a63;
  --color-success-bg: #e7f0e9;
  --color-error: #b3261e;
  --color-error-bg: #fbeceb;

  /* Surface translucide de l'en-tête (glassmorphisme sobre) */
  --surface-glass: rgba(255, 255, 255, 0.82);

  /* === Dégradés (sobres, sans excès lumineux) === */
  --gradient-brand: linear-gradient(135deg, #008ac5 0%, #33b9df 100%);
  --gradient-deep: linear-gradient(158deg, #05202e 0%, #003d58 52%, #076087 100%);
  --gradient-soft: linear-gradient(180deg, var(--color-white) 0%, var(--color-background) 100%);

  /* Texture « papier » très discrète (points), réutilisable en fond de section */
  --texture-dots: radial-gradient(rgba(7, 28, 38, 0.05) 1px, transparent 1.6px);
  --texture-dots-light: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.6px);

  /* === Typographie === */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Échelle fluide — titres affirmés, bonne respiration */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.38vw, 1.38rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.78vw, 1.85rem);
  --step-3: clamp(1.7rem, 1.36rem + 1.45vw, 2.55rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.5vw, 3.5rem);
  --step-5: clamp(2.6rem, 1.72rem + 3.7vw, 4.7rem);

  /* Graisses & interlettrage de référence */
  --tracking-tight: -0.028em;
  --tracking-eyebrow: 0.16em;

  /* === 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: 3.25rem;
  --space-3xl: 4.5rem;
  --section-y: clamp(2.5rem, 1.9rem + 2vw, 4rem);

  /* === Rayons === */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* === Ombres — douces et froides, en couches (jamais dures) === */
  --shadow-xs: 0 1px 2px rgba(15, 37, 53, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 37, 53, 0.05), 0 8px 20px -14px rgba(15, 37, 53, 0.14);
  --shadow-md: 0 4px 12px -6px rgba(15, 37, 53, 0.10), 0 20px 40px -24px rgba(15, 37, 53, 0.22);
  --shadow-lg: 0 8px 20px -10px rgba(15, 37, 53, 0.12), 0 36px 70px -32px rgba(15, 37, 53, 0.28);

  /* === Mise en page === */
  --container: 1180px;
  --container-narrow: 800px;
  --header-height: 76px;

  /* === Transitions === */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 220ms var(--ease);
}