/* =====================================================================
   METOD · DESIGN TOKENS · v3.2
   =====================================================================
   À IMPORTER EN PREMIER dans le projet, avant tout autre CSS.
   Tous les composants METOD consomment ces variables — jamais de hex
   hardcodé dans le code.

   Usage React/Vue/vanilla :
   import './metod-tokens.css' (ou <link rel="stylesheet" href="metod-tokens.css">)

   Règle d'or : si un besoin n'existe pas comme token, on ne le crée pas
   en local — on étend le système dans ce fichier.
   ===================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* =================================================================
     COULEURS · Neutres
     ================================================================= */
  --metod-bone:       #FAFAF8;  /* Background principal */
  --metod-paper:      #F4F3EF;  /* Surface secondaire */
  --metod-mist:       #E8E6E0;  /* Hover */
  --metod-fog:        #D9D7D1;  /* Border */
  --metod-stone:      #A8A6A0;  /* Disabled */
  --metod-ash:        #6B6B68;  /* Texte secondaire */
  --metod-graphite:   #1A1A1A;  /* Surface dark */
  --metod-ink:        #0A0A0A;  /* Texte principal */

  /* =================================================================
     COULEURS · Brand (orange)
     Règle : max 1 usage d'orange par écran, réservé à l'action
     principale ou à la donnée critique.
     ================================================================= */
  --metod-orange:       #E85A10;
  --metod-orange-soft:  #FDE8DC;
  --metod-orange-deep:  #B8440A;
  --metod-orange-glow:  rgba(232, 90, 16, 0.08);

  /* =================================================================
     COULEURS · Sémantiques (tons chauds, accordés à l'orange)
     Toujours utilisées en paire : valeur dense + fond soft.
     ================================================================= */
  --metod-brick:         #B4341F;   /* Retard, délai dépassé */
  --metod-brick-soft:    #F5DFD9;
  --metod-caramel:       #8B5A2B;   /* À traiter, action requise */
  --metod-caramel-soft:  #F2E6D6;
  --metod-forest:        #3D6B4A;   /* Validé, succès */
  --metod-forest-soft:   #DDE8DE;
  --metod-slate:         #3D5A7A;   /* Info neutre */
  --metod-slate-soft:    #DDE3EC;
  --metod-plum:          #6B4A7A;   /* En cours, workflow actif */
  --metod-plum-soft:     #E6DFEA;

  /* =================================================================
     TYPOGRAPHIE
     - Aeonik : logo uniquement (licence Dinamo)
     - General Sans : display & UI (gratuit, Fontshare)
     - JetBrains Mono : données techniques (IDs, délais, chiffres)
     ================================================================= */
  --font-display:  'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Échelle typographique — 7 niveaux figés */
  --font-size-display:   88px;   /* line-height: 0.95, letter-spacing: -0.03em, weight: 500 */
  --font-size-h1:        48px;   /* line-height: 1.05, letter-spacing: -0.02em, weight: 500 */
  --font-size-h2:        32px;   /* line-height: 1.15, letter-spacing: -0.015em, weight: 500 */
  --font-size-h3:        22px;   /* line-height: 1.3, letter-spacing: -0.01em, weight: 500 */
  --font-size-body-lg:   17px;   /* line-height: 1.55, weight: 400 */
  --font-size-body:      15px;   /* line-height: 1.55, weight: 400 */
  --font-size-caption:   12px;   /* line-height: 1.45, weight: 400 */
  --font-size-eyebrow:   11px;   /* line-height: 1, letter-spacing: 0.14em, uppercase, weight: 500 */
  --font-size-mono:      13px;   /* letter-spacing: 0, weight: 500 */

  /* =================================================================
     ESPACEMENT · base 4px
     Aucune valeur en dehors de cette échelle.
     ================================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* =================================================================
     RADIUS
     ================================================================= */
  --radius-sm:    4px;    /* Buttons, tags, inputs */
  --radius-md:    8px;    /* Cards, stat cards */
  --radius-lg:    12px;   /* Modales, popovers */
  --radius-xl:    16px;
  --radius-full:  999px;  /* Avatars, pills */

  /* =================================================================
     OMBRES
     ================================================================= */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 2px 8px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 8px 24px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.04);
  --shadow-xl: 0 24px 48px rgba(10, 10, 10, 0.12), 0 8px 16px rgba(10, 10, 10, 0.06);

  /* =================================================================
     BORDURES
     ================================================================= */
  --border-hairline:  1px solid var(--metod-mist);
  --border-soft:      1px solid var(--metod-fog);
  --border-strong:    1px solid var(--metod-ash);

  /* =================================================================
     MOTION
     Respect strict de prefers-reduced-motion côté JS.
     ================================================================= */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    150ms;   /* Hover, focus, state change simple */
  --duration-base:    250ms;   /* Lift, scale, fade standard */
  --duration-slow:    450ms;   /* Reveal, reordering */
  --duration-slower:  700ms;   /* Hero reveal, entrée de page */

  /* =================================================================
     SHELL · Dimensions figées
     ================================================================= */
  --shell-topbar-height:         52px;
  --shell-sidebar-width:         240px;
  --shell-sidebar-collapsed:     56px;
  --shell-panel-width:           320px;
  --shell-content-max:           1440px;
  --shell-content-padding:       32px;

  /* =================================================================
     BREAKPOINTS · à utiliser en @media uniquement
     mobile    : < 640px
     tablet    : 640 - 1023
     desktop   : 1024 - 1439
     widescreen: 1440+
     ================================================================= */
  --bp-mobile:      640px;
  --bp-tablet:      1024px;
  --bp-widescreen:  1440px;

  /* =================================================================
     GRILLE
     ================================================================= */
  --grid-cols-mobile:    4;
  --grid-cols-tablet:    8;
  --grid-cols-desktop:   12;
  --grid-gap-mobile:     16px;
  --grid-gap-tablet:     20px;
  --grid-gap-desktop:    24px;
}

/* =====================================================================
   MOTION · Respect des préférences utilisateur
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* =====================================================================
   RESET & DÉFAUTS METOD
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--metod-ink);
  background: var(--metod-bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   CLASSES UTILITAIRES — typographie
   ===================================================================== */
.metod-display {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.metod-h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.metod-h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.metod-h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.metod-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.metod-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  font-weight: 500;
}

/* =====================================================================
   FOCUS — Accessibilité clavier WCAG AA
   ===================================================================== */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 90, 16, 0.3);
  border-radius: var(--radius-sm);
}