/* ==========================================================================
   Design tokens — extracted from MQ-1ZERO1-SiteWeb-V1.1.xd

   Values are read from the XD scene graph, not eyeballed from an export. The
   type scale below is every distinct family/style/size/line-height combination
   used across the 1440px artboards, with the usage count that justified each
   one. Do not add a size here that the design does not contain.

   Responsive scales (768 / 375) land in a later pass; this file currently
   describes the desktop artboards only.
   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     Named by role, not by hue, so a palette change is one edit here. The raw
     hex values are the XD's full palette — every colour it actually uses. */

  --c-green:          #ade542;  /* primary brand, card fills, CTAs */
  --c-green-deep:     #a4d93f;  /* pressed / hover state of the above */
  --c-green-edge:     #94c43a;  /* 1px stroke on the deep-green halves */

  /* The boards hold most copy at 70% — not as a lighter colour but as an
     `opacity: 0.7` on a group wrapping the text, which is why it reads as the
     same hex in a colour picker and was missed. Kept as alpha rather than
     `opacity` on our side: these elements are what the scroll reveals tween,
     and a CSS opacity would be overwritten the moment one plays. */
  --c-ink-70:         rgb(58 62 61 / 0.7);
  --c-off-white-70:   rgb(241 248 241 / 0.7);
  --c-mist-70:        rgb(180 195 188 / 0.7);   /* display type on dark */
  --c-panel:          #212121;  /* dark section panel */
  --c-panel-deep:     #181c18;  /* near-black, alternating bands */
  --c-ink:            #3a3e3d;  /* body text on light, icon strokes */
  --c-navy:           #021d36;  /* rare accent */

  /* Not in the XD — the boards draw no error state. #b3261e holds 5.6:1 on
     the #f0eceb field face; the brighter one is only ever used as a fill. */
  --c-error:          #b3261e;
  --c-error-bright:   #e5483a;

  --c-mist:           #b4c3bc;  /* large display text on dark */
  --c-mist-2:         #ccd3cf;
  --c-mist-3:         #d8dcd8;
  --c-off-white:      #f1f8f1;  /* body text on dark */
  --c-white:          #ffffff;

  /* Semantic aliases — templates use these, never the raw names above. */
  --c-bg:             var(--c-panel);
  --c-bg-alt:         var(--c-panel-deep);
  --c-text:           var(--c-off-white);
  --c-text-display:   var(--c-mist);
  --c-text-muted:     var(--c-mist-2);
  --c-accent:         var(--c-green);
  --c-on-accent:      var(--c-panel);


  /* --- Type families -----------------------------------------------------
     The XD names the DM Sans optical sizes separately ("DM Sans 36pt" for
     display, "DM Sans 18pt" for text). The variable webfont covers both via
     font-optical-sizing, so one family declaration serves all of it. */

  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --font-display: 'OT Bulb Classic', var(--font-mono);

  --fw-thin:      100;  /* DM Sans 36pt Thin — display only */
  --fw-light:     300;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;


  /* --- Type scale --------------------------------------------------------
     size / line-height pairs, exactly as authored. Usage counts in comments
     are from the 1440px artboards. */

  --t-numeral:        300px; --t-numeral-lh:      92px;  /* Bulb  — 404 only        */
  --t-display:         80px; --t-display-lh:      75px;  /* Thin  — hero, CTA   ×10 */
  --t-card-title:      60px; --t-card-title-lh:   64px;  /* Light — case cards   ×3 */
  --t-h2:              46px; --t-h2-lh:           46px;  /* Light — section      ×12*/
  --t-step:            40px; --t-step-lh:         92px;  /* Bulb  — S1/ E1/     ×15 */
  --t-lead:            24px; --t-lead-lh:         23px;  /* Medium— paragraphs  ×12 */
  --t-h3:              24px; --t-h3-lh:           32px;  /* Medium— "À propos"   ×4 */

  /* The editorial blocks (À propos / Histoire, Client / Enjeux, the Défi lead)
     take the same sizes as --t-lead but a looser leading, and the two scales
     part company below 1025: the boards hold the lead at 20/19 and 18/20 while
     these blocks go to 20/22 and 18/20. Its own token, because --t-h3 is shared
     with the bare h3 selector and with .prose h2 on Politiques, none of which
     were measured here. */
  --t-editorial-lh:    32px;                              /* Medium— 24/32 at 1440   */
  --t-label:           18px; --t-label-lh:        55px;  /* Mono  — nav, labels ×65 */
  --t-body:            16px; --t-body-lh:         18px;  /* Medium— body        ×18 */
  --t-button:          16px; --t-button-lh:       55px;  /* SemiBd— buttons     ×10 */
  --t-strong:          16px; --t-strong-lh:       18px;  /* Bold  — values       ×9 */
  --t-button-sm:       13px; --t-button-sm-lh:    55px;  /* Mono  — "Détails"    ×6 */
  --t-tag:             12px; --t-tag-lh:          55px;  /* Mono  — tags        ×31 */
  --t-micro:           10px; --t-micro-lh:        18px;  /* Medium— [Client]     ×9 */
  --t-credit:          10px; --t-credit-lh:       23px;  /* Mono  — img credit   ×3 */


  /* --- Grid --------------------------------------------------------------
     Straight from the artboard's own grid definition:
     columns 12, gutter 16, marginLeft 26, defaultLayoutWidth 1440. */

  --grid-columns:   12;
  --grid-gutter:    16px;
  --page-margin:    26px;
  --page-max:       1440px;
  --content-max:    1388px;  /* page-max minus both margins */


  /* --- Spacing -----------------------------------------------------------
     8px base, matching the XD's rowSpacing/columnSpacing. */

  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8: 128px;
  --s-9: 192px;


  /* --- Motion ------------------------------------------------------------
     Scroll reveals fire at 85% of viewport height (see animations.js). */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;

  --radius-card:   10px;   /* XD: shape.r on the card and image rects */
  --z-header:      100;
  --z-popup:       900;
  --z-consent:     950;
  --z-preloader:  1000;
}


/* --------------------------------------------------------------------------
   OT Bulb Classic — commercial display face used for the E1/ S1/ case numbers
   and the 404 numeral. Only weight 200 is licensed and only digits and a few
   glyphs are ever set in it, so there is no italic or second weight to load.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'OT Bulb Classic';
  src: url('../fonts/OTBulbClassic-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Anyone who has asked their OS to reduce motion gets no scroll reveals, no
   marquee, no sphere rotation. The GSAP timelines check this too.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}