/* ==========================================================================
   FB Tech — design tokens
   Source : Figma « FB - Product designer » › section 3-Portfolio.
   Ce fichier ne contient QUE des variables : aucun sélecteur de composant.
   ========================================================================== */

/* Polices auto-hébergées (latin), chargées uniquement par les pages FB Tech */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/roboto/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Couleurs — primitives ---------- */
  --fb-neutral-0: #ffffff;
  --fb-neutral-50: #f5f7fa;
  --fb-neutral-100: #e6e9ef;
  --fb-neutral-300: #b3b9c6;
  --fb-neutral-500: #646b7b;
  --fb-neutral-800: #1e2230;
  --fb-neutral-900: #141722;
  --fb-neutral-950: #0c0e16;

  --fb-aqua-50: #f0faf6;
  --fb-aqua-400: #31c99e;
  --fb-aqua-600: #1aa276;
  --fb-aqua-700: #12805c;
  /* Ajout : nuance de survol du bouton principal (contraste AA avec le blanc) */
  --fb-aqua-800: #0e6649;

  --fb-indigo-50: #eef0ff;
  --fb-indigo-300: #a5aaff;
  --fb-indigo-500: #6c72ff;
  --fb-indigo-600: #4a4fe0;

  /* ---------- Couleurs — sémantiques (seules utilisées par les composants) ---------- */
  --fb-color-bg-default: var(--fb-neutral-0);
  --fb-color-bg-subtle: var(--fb-neutral-50);
  --fb-color-bg-brand-subtle: var(--fb-aqua-50);
  /* Écart volontaire avec Figma (aqua-600) : blanc sur aqua-600 = 3,2:1, échec AA.
     aqua-700 = 4,9:1. */
  --fb-color-bg-brand: var(--fb-aqua-700);
  --fb-color-bg-brand-hover: var(--fb-aqua-800);
  --fb-color-bg-accent-subtle: var(--fb-indigo-50);
  --fb-color-bg-inverse: var(--fb-neutral-900);
  --fb-color-bg-overlay: var(--fb-neutral-950);

  --fb-color-text-primary: var(--fb-neutral-800);
  --fb-color-text-secondary: var(--fb-neutral-500);
  --fb-color-text-disabled: var(--fb-neutral-300);
  --fb-color-text-brand: var(--fb-aqua-700);
  --fb-color-text-accent: var(--fb-indigo-600);
  --fb-color-text-inverse: var(--fb-neutral-0);
  --fb-color-text-brand-inverse: var(--fb-aqua-400);
  --fb-color-text-accent-inverse: var(--fb-indigo-300);

  --fb-color-border-default: var(--fb-neutral-100);
  --fb-color-border-strong: var(--fb-neutral-300);
  --fb-color-border-inverse: var(--fb-neutral-0);
  --fb-color-border-subtle-inverse: var(--fb-neutral-800);
  --fb-color-border-tag-inverse: var(--fb-neutral-500);
  --fb-color-border-focus: var(--fb-indigo-500);

  /* ---------- Espacements ---------- */
  --fb-spacing-none: 0;
  --fb-spacing-1: 4px;
  --fb-spacing-2: 8px;
  --fb-spacing-3: 16px;
  --fb-spacing-4: 24px;
  --fb-spacing-5: 32px;
  --fb-spacing-6: 48px;
  --fb-spacing-7: 64px;
  --fb-spacing-8: 80px;
  --fb-spacing-9: 96px;
  --fb-spacing-10: 112px;
  --fb-spacing-11: 128px;
  --fb-spacing-12: 144px;
  --fb-spacing-13: 160px;
  --fb-spacing-14: 176px;
  --fb-spacing-15: 192px;
  --fb-spacing-16: 208px;

  /* ---------- Rayons ---------- */
  --fb-radius-pill: 999px;
  --fb-radius-sm: 8px;
  --fb-radius-md: 12px;
  --fb-radius-lg: 16px;
  --fb-radius-xl: 20px;
  --fb-radius-2xl: 24px;

  /* ---------- Bordures ---------- */
  --fb-border-width: 1px;
  --fb-focus-width: 2px;

  /* ---------- Typographie ---------- */
  --fb-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fb-font-label: var(--fb-font-sans);      /* labels, nav, chips : Roboto semi-bold (une seule famille) */

  --fb-font-weight-light: 300;
  --fb-font-weight-regular: 400;
  --fb-font-weight-medium: 500;
  --fb-font-weight-semibold: 600;
  --fb-font-weight-bold: 700;

  /* Titres fluides : min mobile → max desktop 1440 */
  --fb-font-size-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);   /* 40 → 68 */
  --fb-line-height-display: 1.147;                                  /* 78/68 */
  --fb-font-size-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);       /* 34 → 56 */
  --fb-line-height-h1: 1.18;                                        /* 66/56 */
  --fb-font-size-h2: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);     /* 30 → 44 */
  --fb-line-height-h2: 1.227;                                       /* 54/44 */
  --fb-font-size-h2-col: clamp(1.625rem, 1.4rem + 0.8vw, 2rem);     /* 26 → 32 */
  --fb-line-height-h2-col: 1.3125;                                  /* 42/32 */
  --fb-font-size-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20 */
  --fb-line-height-lead: 1.6;                                       /* 32/20 */
  --fb-font-size-lead-s: 1.125rem;                                  /* 18 */
  --fb-line-height-lead-s: 1.556;                                   /* 28/18 */
  --fb-font-size-body: 1.0625rem;                                   /* 17 */
  --fb-line-height-body: 1.647;                                     /* 28/17 */
  --fb-font-size-body-m: 1rem;                                      /* 16 */
  --fb-line-height-body-m: 1.625;                                   /* 26/16 */
  --fb-font-size-body-s: 0.9375rem;                                 /* 15 */
  --fb-line-height-body-s: 1.6;                                     /* 24/15 */
  --fb-font-size-caption: 0.875rem;                                 /* 14 */
  --fb-line-height-caption: 1.571;                                  /* 22/14 */
  --fb-font-size-footnote: 0.8125rem;                               /* 13 */
  --fb-font-size-card-title: 1.375rem;                              /* 22 */
  --fb-font-size-project-title: 1.25rem;                            /* 20 */
  --fb-font-size-subtitle: 1.125rem;                                /* 18 */
  --fb-font-size-subtitle-s: 1rem;                                  /* 16 */
  --fb-font-size-label: 0.8125rem;                                  /* 13 — label de section */
  --fb-font-size-chip: 0.75rem;                                     /* 12 — nav, chips, tags */
  --fb-font-size-meta: 0.6875rem;                                   /* 11 — tags de carte, méta */
  --fb-font-size-button: 1rem;                                      /* 16 */
  --fb-font-size-button-s: 0.875rem;                                /* 14 — bouton de nav */
  --fb-font-size-stat: clamp(2.25rem, 2rem + 0.8vw, 2.875rem);      /* 36 → 46 */
  --fb-font-size-stat-unit: 1.125rem;                               /* 18 */
  --fb-line-height-stat: 1.174;                                     /* 54/46 */
  --fb-font-size-step: clamp(2rem, 1.8rem + 0.6vw, 2.5rem);         /* 32 → 40 */
  --fb-line-height-tight: 1.2;
  --fb-line-height-tag: 1.667;                                      /* 20/12 */

  /* ---------- Layout ---------- */
  --fb-content-max: 76rem;                  /* 1216 px */
  --fb-measure-heading: 56.25rem;           /* 900 px — titres de section */
  --fb-measure-lead: 47.5rem;               /* 760 px */
  --fb-measure-hero: 62.5rem;               /* 1000 px — H1 accueil */
  --fb-measure-hero-lead: 45rem;            /* 720 px */
  --fb-measure-case-title: 65rem;           /* 1040 px */
  --fb-measure-case-lead: 51.25rem;         /* 820 px */
  --fb-column-aside: 23.75rem;              /* 380 px — colonne titre Contexte / Rôle */
  --fb-media-narrow: 51.8125rem;            /* 829 px — visuels centrés */
  --fb-media-portrait: 30rem;               /* 480 px — captures mobiles en portrait */
  --fb-step-number-width: 5rem;             /* 80 px */
  --fb-nav-height: 5.5rem;                  /* 88 px */
  --fb-logo-size: 3.5rem;                   /* 56 px */
  --fb-icon-pill-size: 3rem;                /* 48 px */
  --fb-icon-pill-size-s: 2rem;              /* 32 px */
  --fb-icon-size: 1.5rem;                   /* 24 px */
  --fb-icon-size-s: 1.125rem;               /* 18 px */
  --fb-chip-height: 2rem;                   /* 32 px */

  --fb-gutter: var(--fb-spacing-10);
  --fb-section-padding: var(--fb-spacing-10);
  --fb-hero-padding: var(--fb-spacing-13);
  --fb-case-hero-padding: var(--fb-spacing-9);

  /* ---------- Mouvement ---------- */
  --fb-duration-fast: 150ms;
  --fb-duration-base: 250ms;
  --fb-duration-slow: 300ms;
  --fb-duration-reduced: 100ms;   /* fondu seul si prefers-reduced-motion */
  --fb-stagger: 30ms;             /* décalage entre cartes qui apparaissent */
  --fb-ease: cubic-bezier(0.2, 0, 0, 1);
  --fb-scale-press: 0.97;         /* chip au clic */
  --fb-scale-exit: 0.96;          /* carte qui disparaît */
  --fb-motion-rise: 0.75rem;      /* carte qui apparaît : montée de 12 px */

  /* ---------- Points de rupture (documentation : les media queries ne lisent pas les variables) ----------
     ≤ 1024 px : grilles en 2 colonnes, marges réduites
     ≤ 980 px  : nav burger
     ≤ 768 px  : colonnes de contenu empilées
     ≤ 480 px  : 1 colonne, marges spacing-3 (cible 375 px) */
}

@media (max-width: 1024px) {
  :root {
    --fb-gutter: var(--fb-spacing-6);
    --fb-section-padding: var(--fb-spacing-8);
    --fb-hero-padding: var(--fb-spacing-10);
    --fb-case-hero-padding: var(--fb-spacing-7);
  }
}

@media (max-width: 768px) {
  :root {
    --fb-gutter: var(--fb-spacing-4);
    --fb-section-padding: var(--fb-spacing-7);
    --fb-hero-padding: var(--fb-spacing-8);
    --fb-case-hero-padding: var(--fb-spacing-6);
  }
}

@media (max-width: 480px) {
  :root {
    --fb-gutter: var(--fb-spacing-3);
    --fb-section-padding: var(--fb-spacing-6);
    --fb-hero-padding: var(--fb-spacing-7);
  }
}