/* ============================================================
   Le Cellier — pont charte -> app
   Importe les tokens officiels (cellier-tokens.css) + Inter,
   et branche les variables utilisées par l'app (dc-runtime) dessus.
   Source de vérité = cellier-tokens.css.
   ============================================================ */
@import url('cellier-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-ExtraLight.otf') format('opentype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Extrabold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Metadata'; src: url('fonts/Metadata-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

:root {
  /* Couleurs (alias vers les tokens Cellier) */
  --bg:            var(--cel-cream);
  --green:         var(--cel-green);
  --green-dark:    var(--cel-green-700);
  --green-soft:    var(--cel-green-soft);
  --bleu-roi:      var(--cel-green);        /* primaire (boutons) */
  --bleu-fonce:    var(--cel-green-deep);   /* surfaces sombres / sidebar */
  --turquoise:     var(--cel-orange);       /* accent */
  --bleu-ciel:     var(--cel-viz-4);
  --jaune-safran:  var(--cel-viz-3);
  --orange:        var(--cel-orange);
  --ink:           var(--cel-ink);
  --ink2:          var(--cel-fg-2);
  --ink-soft:      var(--cel-fg-2);
  --ink-mute:      var(--cel-fg-3);
  --muted:         var(--cel-fg-2);
  --num:           var(--cel-fg-3);
  --cream:         var(--cel-on-deep-1);    /* texte/surface sur fond sombre */
  --cream-mut:     var(--cel-on-deep-2);
  --line:          var(--cel-line);
  --card:          var(--cel-surface);
  --surface:       var(--cel-surface);
  --surface-alt:   var(--cel-cream);
  --surface-deep:  var(--cel-cream-deep);
  --bg-1:          var(--cel-surface);
  --bg-2:          var(--cel-cream);
  --bg-3:          var(--cel-cream-deep);
  --fg-1:          var(--cel-fg-1);
  --fg-2:          var(--cel-fg-2);
  --fg-3:          var(--cel-fg-3);
  --rule:          var(--cel-line);
  --brand:         var(--cel-green);
  --brand-deep:    var(--cel-green-deep);
  --accent:        var(--cel-orange);
  --pillar-securiser: var(--cel-viz-4);
  --pillar-optimiser: var(--cel-viz-3);
  --pillar-accelerer: var(--cel-orange);

  /* Type */
  --font-display:  var(--cel-font-display);
  --font-body:     var(--cel-font-body);
  --disp:          var(--cel-font-display);
  --body:          var(--cel-font-body);
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display-xl: clamp(56px, 9vw, 128px);
  --fs-display-l:  clamp(44px, 6vw, 88px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-h1: 30px; --fs-h2: 22px; --fs-h3: 18px;
  --fs-eyebrow: 12px; --fs-body-l: 17px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px;
  --lh-display: 0.95; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55;
  --ls-display: -0.02em; --ls-eyebrow: 0.14em;

  /* Espacement */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* Rayons (alias tokens Cellier) */
  --radius-xs: var(--cel-r-xs); --radius-sm: var(--cel-r-sm); --radius-md: var(--cel-r-md);
  --radius-lg: var(--cel-r-lg); --radius-xl: var(--cel-r-xl); --radius-pill: var(--cel-r-pill);

  /* Ombres (alias tokens Cellier — plus douces) */
  --shadow: var(--cel-sh-sm);
  --shadow-xs: var(--cel-sh-xs); --shadow-sm: var(--cel-sh-sm);
  --shadow-md: var(--cel-sh-md); --shadow-lg: var(--cel-sh-lg); --shadow-ring: var(--cel-ring);

  /* Motion */
  --ease-out: var(--cel-ease); --ease-in: cubic-bezier(0.6, 0, 0.8, 0.3); --ease-spring: var(--cel-spring);
  --dur-1: var(--cel-d1); --dur-2: var(--cel-d2); --dur-3: var(--cel-d3); --dur-4: 600ms;
}

/* Classes typographiques (conservées) */
.m-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.m-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-l); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--brand); }
.m-display--hero { font-size: var(--fs-display-xl); font-weight: 900; }
.m-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg-1); }
.m-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); }
.m-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.m-p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.m-underscore { display: inline-block; animation: cel-cursor 1.1s steps(1) infinite; }

/* Resets */
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
::selection { background: var(--cel-orange); color: #fff; }